Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

Destry
Member
From: Haut-Rhin
Registered: 2004-08-04
Posts: 4,909
Website

Re: wysiwyg editor

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)

Offline

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

Myusername
Member
Registered: 2019-12-12
Posts: 165

Re: wysiwyg editor

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

Offline

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

Destry
Member
From: Haut-Rhin
Registered: 2004-08-04
Posts: 4,909
Website

Re: wysiwyg editor

Myusername wrote #328482:

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

Yes, thanks!

Offline

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

Myusername
Member
Registered: 2019-12-12
Posts: 165

Re: wysiwyg editor

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.

Offline

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

etc
Developer
Registered: 2010-11-11
Posts: 5,159
Website GitHub

Re: wysiwyg editor

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.

Offline

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

Myusername
Member
Registered: 2019-12-12
Posts: 165

Re: wysiwyg editor

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)

Offline

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

Myusername
Member
Registered: 2019-12-12
Posts: 165

Re: wysiwyg editor

Look codejar.

And here the demonstration with prismjs textile.

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

Offline

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

etc
Developer
Registered: 2010-11-11
Posts: 5,159
Website GitHub

Re: wysiwyg editor

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

Offline

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

Myusername
Member
Registered: 2019-12-12
Posts: 165

Re: wysiwyg editor

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)

Offline

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

etc
Developer
Registered: 2010-11-11
Posts: 5,159
Website GitHub

Re: wysiwyg editor

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

Offline

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

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,436
Website GitHub

Re: wysiwyg editor

Nice idea! Couple of things:

  1. Add $writepage = 0; at the start of the function (line 95ish) to avoid the warning of the unset variable later.
  2. 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)


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

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

gaekwad
Server grease monkey
From: People's Republic of Cornwall
Registered: 2005-11-19
Posts: 4,241
GitHub

Re: wysiwyg editor

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)

Offline

Board footer

Powered by FluxBB