wysiwyg editor

philwareham · 2021-01-11 10:08:23

Bloke wrote #328127:

This solution, with its tight synchronisation between Textile (or A.N.Other markup system) and HTML delivers a great experience because it creates both tidy HTML and Textile.

So, would this be a potential contender for core, if the UX can be hammered out well?

Bloke · 2021-01-11 10:46:22

philwareham wrote #328128:

So, would this be a potential contender for core, if the UX can be hammered out well?

It’s certainly small enough and light enough. My concern would be how to integrate it with any markup system you might have installed as a plugin (e.g. Markdown). That will require a markdown-to-html and html-to-markdown converter too, which bulks things up.

A core-sanctioned (com_) plugin might be preferable here so the various markup systems can be modularised. Maybe smd_textile_bar could become com_markup_bar or something? And that plugin would have bundled with it a bunch of converters for various markup systems so it can pick the correct one based on which Textfilter is in force for an article. We can expand the set of available filters as we go.

One element of fun is switching the markup system on-the-fly – loading new .js WYSIWYG converters if you swap the selector from, say, Textile to Markdown on the Write panel. No idea how to do that.

If it can be done cleverly as a core feature without bloating it with markup tools that may not be used, then cool. Trying to avoid the kitchen sink approach. If it works better as a helper plugin – i.e. opt-in and can benefit from a faster development cycle to be more reactive to changes in markup systems – then I’m fine with that too.

Myusername · 2021-01-11 12:39:56

The pasted content being just plain text seems like an interesting idea. This prevents people from pasting together any rubbish that can sometimes make life difficult for converters (does that happen? They have done very well.).

The downside is basically not being able to paste images. Perhaps there is a way to get around this and just accept images. Anyway, I think there are more advantages than disadvantages.

This is already working here.

moon blake · 2021-01-11 13:09:20

Just out of curiosity: are we talking about pell.js or about SCEditor now?

etc · 2021-01-11 13:19:41

Myusername wrote #328125:

I would love to see a WYSIWYG editor working side by side with Textile. So I will continue to work on it. If you notice new problems, or who knows, ideas of how something should be reproduced, feel free to speak. The tests are very much appreciated.

Me too, thanks for your efforts. But the simple tags encoding when switching from textile to html is not quite satisfactory:

images, paragraphs etc are rendered as plain text in wysiwyg editor, which makes it less wysiwyg. I could live with it, but
tags being rendered as plain text, textile gets its way into it, transforming quotes into curly ones etc, which makes, say, <txp:php /> blocks fragile:

<txp:php>echo "hello";</txp:php>

becomes unusable

<txp:php>echo “hello”;</txp:php>

edit: though not in textile editor, which is great. But all code formatting (linebreaks, tabulations) is mangled by textile, and notextile.. commands are removed.

Myusername · 2021-01-11 14:08:07

etc wrote #328132:

Me too, thanks for your efforts. But the simple tags encoding when switching from textile to html is not quite satisfactory:

images, paragraphs etc are rendered as plain text in wysiwyg editor, which makes it less wysiwyg.

Yes, I would say that seeing HTML in the wysiwyg editor makes it less wysiwyg. But we are not talking about wysiwyg/html, but wysiwyg/textile, so there will be peculiarities. I think the following:

When we type this:

<img src="image.jpeg"/>

I don’t expect this to render an image in the wysiwyg editor. If I want to “send” an image of the textile to wysiwyg, I type Textile:

!image.jpeg!

To see all the content rendered in HTML, including the tags you typed and are being rendered as plain text in the wysiwyg editor, the textpattern preview should be useful. Right?

edit: though not in textile editor, which is great. But all code formatting (linebreaks, tabulations) is mangled by textile, and notextile.. commands are removed.

Truth.

Last edited by Myusername (2021-01-11 14:10:59)

etc · 2021-01-11 14:39:18

Myusername wrote #328133:

When we type this:

<img src="image.jpeg"/>...

I don’t expect this to render an image in the wysiwyg editor.

To see all the content rendered in HTML, including the tags you typed and are being rendered as plain text in the wysiwyg editor, the textpattern preview should be useful. Right?

Yep, no problem for me here. But letting textile into html/txp blocks like txp:php, script etc is problematic. We’d need to somehow protect them, maybe by including inside some code block.. dunno.

Myusername · 2021-01-14 16:28:57

A textarea with real-time syntax.

I don’t think it’s an alternative, but it’s cool.

Last edited by Myusername (2024-08-18 23:20:48)

etc · 2021-01-14 18:29:12

Nice find, and easy to plug in.

Myusername · 2021-01-15 19:59:38

LRTEditor is a lightweight editor that does, I believe, the most boring job. Adds basic functionality to the editor, deals with updating the content and also with the mouse position after the update, etc. The cool thing is that it seems to be compatible with basically any syntax highlighting. As far as I know, there isn’t one for textile, right? If so, tell me I’ll do some tests. Ultimately, how viable would it be to create a syntax highlight for textile? Even if it is something very simple that, over time, can become something cool.

Some modifications to make it more friendly to the textile would be necessary, as well as a toolbar, which shouldn’t be a problem.

I did some bad tests and it can be seen here. I basically added some regexs (h1,h2 and images), also badly made, to manipulate the titles and images, to see how it would look. Very badly done, but can have potential in the right hands.

It is important to note that, it is only allowed to work in LRTEditor with text. Which means, the approach would be very similar to SimpleMDE, but simpler and without the heavy codemirror.

Well, take a look and see if it interests you.

etc · 2021-01-15 21:10:07

Myusername wrote #328181:

LRTEditor is a lightweight editor that does, I believe, the most boring job.

Thanks for sleuthing. Out of the box it looks too intrusive (impossible to type tags, at least at the beginning of the line), but all of them need parametrization.

Since we currently use jQuery though, this one looks easier to adapt to basic textile.

Myusername · 2021-01-16 09:31:35

etc wrote #328182:

(impossible to type tags, at least at the beginning of the line)

Sorry, that was my mistake. Updated.

etc · 2021-01-16 11:43:30

Thank you. I think it has potential, especially if it can also replace Prism.js we use for HTML preview highlighting. Probably too late for 4.8.5, but let’s try it in 4.9-dev?

Myusername · 2021-01-16 12:41:19

etc wrote #328185:

Thank you. I think it has potential, especially if it can also replace Prism.js we use for HTML preview highlighting. Probably too late for 4.8.5, but let’s try it in 4.9-dev?

It would be great.

If a syntax highlight is created for Textpattern, you can probably replace prismjs in the preview. Perhaps later, it may even extend to the page and form guides.

Last edited by Myusername (2021-01-16 12:41:41)

etc · 2021-01-16 13:56:41

Myusername wrote #328187:

If a syntax highlight is created for Textpattern …

I guess HTML highlighter is already available? Here is txp tag regex, if you want to experiment:

/(<\/?(?:\w+:?):\w+(?:\[-?\d+\])?(?:\s+[\w\-]+(?:\s*=\s*(?:"(?:[^"]|"")*"|\'(?:[^\']|\'\')*\'|[^\s\'"\/>]+))?)*\s*\/?\>)/

Textpattern CMS support forum

#16 2021-01-11 10:08:23

Re: wysiwyg editor

Bloke wrote #328127:

#17 2021-01-11 10:46:22

Re: wysiwyg editor

philwareham wrote #328128:

#18 2021-01-11 12:39:56

Re: wysiwyg editor

#19 2021-01-11 13:09:20

Re: wysiwyg editor

#20 2021-01-11 13:19:41

Re: wysiwyg editor

Myusername wrote #328125:

#21 2021-01-11 14:08:07

Re: wysiwyg editor

etc wrote #328132:

#22 2021-01-11 14:39:18

Re: wysiwyg editor

Myusername wrote #328133:

#23 2021-01-14 16:28:57

Re: wysiwyg editor

#24 2021-01-14 18:29:12

Re: wysiwyg editor

#25 2021-01-15 19:59:38

Re: wysiwyg editor

#26 2021-01-15 21:10:07

Re: wysiwyg editor

Myusername wrote #328181:

#27 2021-01-16 09:31:35

Re: wysiwyg editor

etc wrote #328182:

#28 2021-01-16 11:43:30

Re: wysiwyg editor

#29 2021-01-16 12:41:19

Re: wysiwyg editor

etc wrote #328185:

#30 2021-01-16 13:56:41

Re: wysiwyg editor

Myusername wrote #328187:

Board footer