nhn / tui.editor

🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.
http://ui.toast.com/tui-editor
MIT License
17.21k stars 1.76k forks source link

How to escape inline html in markdown? #679

Open docent opened 5 years ago

docent commented 5 years ago

So Markdown supports inline HTML, and TUI editor reflects inline HTML in the preview. But we don't want the users to be able to use inline html - ideally the user could type, say <b>Hey</b> but it would be shown escaped, both in preview and in WYSIWYG editor. How can we do that with TUI?

I suppose we can't use the HTML sanitizer, as sanitizer works after markdown has already been converted to HTML.

Ideally, there should be a convertorBeforeMarkdownToHtmlConverted event.

seonim-ryu commented 5 years ago

@docent Sorry for the late response.

Is this the situation you are talking about?

  1. In the Markdown editor, enter html as follows:
    <b>foo</b>
    <i>bar</i>
  2. Through some preprocessing, such as an event, the tags appear to be escaped in Markdown Preview or in WYSIWYG. mde

If this is correct, I think we can use the previewBeforeHook andwysiwygSetValueBefore events. Like this:

editor.on('wysiwygSetValueBefore', html => {
  // ...
  return escapedHTML;
});

Can you check it?

docent commented 5 years ago

@seonim-ryu Your example is correct. AFAIK previewBeforeHook cannot be used because the input to this event is already rendered HTML and not markdown, so you cannot tell between HTML created both from normal markdown and from inline HTML in the markdown. So if I escaped this, everything will be escaped.

For example, if you input the following in markdown:

<b>Hey</b>
**Hey2**

The previewBeforeHook event will get

<p><b>Hey</b><br>
<strong>Hey2</strong></p>

So you can't tell what came from inline HTML and what came from Markdown.

docent commented 5 years ago

BTW, looking at the code and various events, I tried to simply force this behaviour by monkey patching some functions. Getting TUI to escape HTML in Markdown is easy, but the problems start when you switch between markdown and wysiwyg modes. TBH it seems that would be easier if the editor provided a general option like escapeInlineHtml that would work for Markdown and WYSIWYG modes, and would disable inline HTML altogether.

seonim-ryu commented 4 years ago

@docent Ah. I understand what you described. I'll consider adding the convertorBeforeMarkdownToHtmlConverted event or adding an option.

Thanks for the comments.

workxrom commented 4 years ago

@docent Sorry for the late response.

Is this the situation you are talking about?

  1. In the Markdown editor, enter html as follows:
<b>foo</b>
<i>bar</i>
  1. Through some preprocessing, such as an event, the tags appear to be escaped in Markdown Preview or in WYSIWYG. mde

If this is correct, I think we can use the previewBeforeHook andwysiwygSetValueBefore events. Like this:

editor.on('wysiwygSetValueBefore', html => {
  // ...
  return escapedHTML;
});

Can you check it?

Thank you! It works! =)

PeterDcsl commented 2 years ago

Hi! Sorry to resurrect such an old post, but I'm also trying to disable inline HTML for the markdown editor (but not the wysiwyg editor - we are not using that). I've been trying out customHTMLRenderer and beforePreviewRender, but these seem like dead ends. Is there a way to achieve this?