Creating a custom Editor node with html inside

Hello Martin,

We already have an example with similar functionality: https://www.telerik.com/kendo-react-ui/knowledge-base/add-custom-tools-to-the-editor-and-customize-built-in-tools/#toc-insert-non-editable-node. I think you will find the answers there.

Also see this example which I made: https://stackblitz.com/edit/react-y3dx71?file=app%2Fmain.jsx. It shows how to translate the custom tags into editor HTML node and back.

Please, let me know if I can help further.

Regards,
Nikolay
Progress Telerik

Hello Nikolay

Thanks a lot. This was exactly what I was looking for and it helped me a lot. Just one question:

I updated line 41 in your StackBlitz example to look be

but it does not seem to parse ${name} into a "nonEditable". See attached image Maybe I'm doing something wrong?

Again, thanks so much for this help, it really makes a huge difference!

Hello Martin,

The "${name}" tag needs to be parsed to HTML before it is inserted into the Editor. The getHtml and setHtml functions convert the "${some_tag_key}" tags into "nonEditable" tags and back - https://stackblitz.com/edit/react-y3dx71-fuxrtn?file=app%2Fmain.jsx.

const getHtml = (html) => {
    return html.replace(/<span [^>]+?class=\"uneditable\"[^>]+?>([^>]+?)<\/span>/gi, (_match, group) => {
      return '$' + group;
    });
  };

const setHtml = (html) => {
    return html.replace(/\$({[^}]+?})/g, (_match, group) => {
      return '<span contenteditable="false" class="uneditable" style="user-select: none; opacity: 0.5;">' + group + '</span>';
    });
  };

class App extends React.Component {
  state = { html: setHtml('<p>sample paragraph ${name} test</p>') };

Regards,
Nikolay
Progress Telerik

Hi Nikolay,

Thank you, this works perfect. Since I'm already asking, I have a related question. This is something that I counted on implementing later, but now that you seem to be online I might as well ask now.

I also would, if possible, have an "on-the-fly" parser, so that if the user types for example ${name}, it will be directly translated to a "nonEditable". Just for fun, I tried wrapping the "event.html" in a "setHtml" in the onChange method, but it did not seem to work.

Is this possible? And does this make the solution much more complex? This is not at all important but it would be a nice feature to have.

Thanks again for your help, it is so great to have someone who really explains and show how it works.

Hi Martin,

It is not something complex if you use an Input Rule. Here is an example - https://stackblitz.com/edit/react-y3dx71-r6qttk?file=app%2Fmain.jsx. Type ${name} and press space to test it.

Regards,
Nikolay
Progress Telerik

Thank you Nikolay!

This works wonderfully and exactly like I want it to work.

I just again need to way that I'm in awe of how great help I have gotten from you in this forum. You've actually taken time to help me find a solution and not just give me a "random generic pointer in some arbitrary direction". I hope you realize how rare that is. Keep up the wonderful work you do!

All the best
/Martin

Hi Martin,

I am glad to hear that. Thank you for the kind words.

Regards,
Nikolay
Progress Telerik