wysiwyg editor

Destry · 2021-01-31 17:57:10

Myusername wrote #328434:

here is a demonstration.

Do you happen to know how in that demonstration the Textile link is being filtered to scope for the grey punctuation only (i.e. "":)?

I’m trying to target this in a TextMate theme but the regex is beyond me.

I’d also like to target paired Textile syntax in general, if anyone knows the trick to that, too, for example @...@, %...%, *...*, etc.

I don’t mean target the elements they stand for, or the strings between, but the actual punctuation pairs themselves. I want to grey these down from the regular text/strings.

Last edited by Destry (2021-01-31 18:09:14)

Myusername · 2021-02-01 18:51:42

The syntax highlighting for this demo is done by prismjs. You may find something in this file.

Destry · 2021-02-02 13:04:18

Myusername wrote #328482:

The syntax highlighting for this demo is done by prismjs. You may find something in this file.

Yes, thanks!

Myusername · 2021-02-02 16:20:53

I did a few things in regular expressions, but I think that is as much as I can get. I will leave the demo as it is, maybe someone will be interested in continuing this.

etc · 2021-02-02 20:29:25

Myusername wrote #328496:

I will leave the demo as it is, maybe someone will be interested in continuing this.

Sure, I think that would be a nice addition, say, to smd_textile_bar and then to core if approved by the community. Personally, I’m more interested in auto-complete/indent feature than in syntax colouration, will take a look if the time permits.

Myusername · 2021-02-03 09:22:53

etc wrote #328498:

Sure, I think that would be a nice addition, say, to smd_textile_bar and then to core if approved by the community

Yes, it would be great, although smd_textile_bar was created for <textarea>. I don’t know how much it will interfere.

Personally, I’m more interested in auto-complete/indent feature than in syntax colouration, will take a look if the time permits.

Yes, they are very useful.

Certainly a editor with these resources would be a great step forward, talking about the Textpattern admin area.

Although, some bugs need to be resolved before anything.

Last edited by Myusername (2021-02-03 09:24:39)

Myusername · 2021-02-04 08:06:24

Look codejar.

And here the demonstration with prismjs textile.

Last edited by Myusername (2021-02-04 08:14:45)

etc · 2021-02-04 10:38:59

Very cute for 2kB! I’m not sure we can get everything we want just via options, but worths testing.

Myusername · 2021-02-05 14:08:04

I made a plugin that puts codejar with prismjs in Textpattern. More specifically on the tabs write, pages, forms and styles.

Just for a real demonstration.

In this plugin, I made some modifications so that it works together with wet_textfilter_markdown, and change the syntax highlight according to the user’s choice.

If anyone is curious they can download here

Last edited by Myusername (2021-02-05 14:10:01)

etc · 2021-02-05 15:17:29

Thank you, I have tried but failed, since it requires some CORS manipulation to import JS.

Bloke · 2021-02-05 16:59:52

Nice idea! Couple of things:

Add $writepage = 0; at the start of the function (line 95ish) to avoid the warning of the unset variable later.
Consider downloading the latest codejar.js and embedding it inside the plugin’s ‘data’ field to get round the CORS stuff.

Example, just after the $plugin['textpack'] definition block in your plugin template (before if (!defined('txpinterface')):

$plugin['data'] = <<<ENDJS
export function CodeJar(editor, highlight, opt = {}) {
    const options = Object.assign({ tab: '\t', indentOn: /{$/, spellcheck: false, catchTab: true, preserveIdent: true, addClosing: true, history: true }, opt);
    let listeners = [];
...
ENDJS;

Then when you need to read the data in from this area:

...
$codejar = \Txp::get('\Textpattern\Plugin\Plugin')->fetchData('elc_codejar');
$codejar .= <<< EOJS
const editor = document.querySelector(".editor");

          const highlight = editor => {
            editor.textContent = editor.textContent
            Prism.highlightElement(editor);
          }
...
EOJS;

Untested, but something like that should work.

Last edited by Bloke (2021-02-05 17:01:47)

gaekwad · 2021-02-05 20:30:34

Myusername wrote #328545:

I made a plugin that puts codejar with prismjs in Textpattern.

Would you mind adding yourself to our author prefix list via this link?:

github.com/textpattern/textpattern.github.io/issues/new?assignees=&template=register-author-prefix.md&title=Request+for+prefix%3A+elc

Last edited by gaekwad (2021-02-05 20:30:46)

Textpattern CMS

Textpattern CMS support forum

#37 2021-01-31 17:57:10

Re: wysiwyg editor

Myusername wrote #328434:

#38 2021-02-01 18:51:42

Re: wysiwyg editor

#39 2021-02-02 13:04:18

Re: wysiwyg editor

Myusername wrote #328482:

#40 2021-02-02 16:20:53

Re: wysiwyg editor

#41 2021-02-02 20:29:25

Re: wysiwyg editor

Myusername wrote #328496:

#42 2021-02-03 09:22:53

Re: wysiwyg editor

etc wrote #328498:

#43 2021-02-04 08:06:24

Re: wysiwyg editor

#44 2021-02-04 10:38:59

Re: wysiwyg editor

#45 2021-02-05 14:08:04

Re: wysiwyg editor

#46 2021-02-05 15:17:29

Re: wysiwyg editor

#47 2021-02-05 16:59:52

Re: wysiwyg editor

#48 2021-02-05 20:30:34

Re: wysiwyg editor

Myusername wrote #328545:

Board footer