4 ms·

I wish we had a WYSIWYG focused on extremely explicit whitelist of nodes and attributes permitted, and in what configuration (you can put X in Y, but not Y in X

by slver 5y ago

I wish we had a WYSIWYG focused on extremely explicit whitelist of nodes and attributes permitted, and in what configuration (you can put X in Y, but not Y in X).

skrebbel 5y ago
If JS is ok, ProseMirror is designed to let you build exactly stuff like that.
c-smile 5y ago
It's kind of doing that already. Also HTML that is pasted from external sources (browsers, MS Office, etc.) gets "cannibalized" on pasting: https://github.com/c-smile/sciter-sdk/blob/master/notepad/res/htmlview/canonicalize-dom.tis https://github.com/c-smile/sciter-sdk/blob/master/notepad/re... with white listed tags and attributes.
codingdave 5y ago
CKEditor allows that level of customization. I think TinyMCE may as well. You also can massage your data as it comes in and out of the editor. I have a React wrapper for our editor that walks an HTML tree, and if nodes match criteria I've coded, I act on them in various ways before loading it all into the editor. The point being that there is no lack of options for building out such features. I'm not sure you'll ever get an editor to do it out-of-the-box, though, because everyone's needs are going to be different.
- c-smile 5y ago
  CKEditor is good but problem is that browser does not provide needed APIs for implementing good WYSIWYG solution. For example in Sciter I've added transactional DOM mutations feature element.richtext.update(function(ctx) { ctx.setAttribute(...) ctx.removeNode(...) ctx.wrapNode(...) }); Such mutation is performed as single UNDOable operation. Also Sciter supports immediate mode painting a la ImGUI that helps a lot to make lightweight editing solutions. The lack of needed API forced Google Docs to switch to Canvas based rendering and editing : https://workspaceupdates.googleblog.com/2021/05/Google-Docs-Canvas-Based-Rendering-Update.html https://workspaceupdates.googleblog.com/2021/05/Google-Docs-...

by slver 5y ago

I wish we had a WYSIWYG focused on extremely explicit whitelist of nodes and attributes permitted, and in what configuration (you can put X in Y, but not Y in X).

skrebbel 5y ago

If JS is ok, ProseMirror is designed to let you build exactly stuff like that.

c-smile 5y ago

It's kind of doing that already. Also HTML that is pasted from external sources (browsers, MS Office, etc.) gets "cannibalized" on pasting: https://github.com/c-smile/sciter-sdk/blob/master/notepad/res/htmlview/canonicalize-dom.tis https://github.com/c-smile/sciter-sdk/blob/master/notepad/re... with white listed tags and attributes.

codingdave 5y ago

CKEditor allows that level of customization. I think TinyMCE may as well. You also can massage your data as it comes in and out of the editor. I have a React wrapper for our editor that walks an HTML tree, and if nodes match criteria I've coded, I act on them in various ways before loading it all into the editor. The point being that there is no lack of options for building out such features. I'm not sure you'll ever get an editor to do it out-of-the-box, though, because everyone's needs are going to be different.

c-smile 5y ago
CKEditor is good but problem is that browser does not provide needed APIs for implementing good WYSIWYG solution. For example in Sciter I've added transactional DOM mutations feature element.richtext.update(function(ctx) { ctx.setAttribute(...) ctx.removeNode(...) ctx.wrapNode(...) }); Such mutation is performed as single UNDOable operation. Also Sciter supports immediate mode painting a la ImGUI that helps a lot to make lightweight editing solutions. The lack of needed API forced Google Docs to switch to Canvas based rendering and editing : https://workspaceupdates.googleblog.com/2021/05/Google-Docs-Canvas-Based-Rendering-Update.html https://workspaceupdates.googleblog.com/2021/05/Google-Docs-...