tui.editor icon indicating copy to clipboard operation
tui.editor copied to clipboard

Unexpected behaviour of getInstance().getHTML() when used in a library

Open ats1999 opened this issue 4 years ago • 4 comments

Describe the bug

I am using this editor in many projects. I am customizing this editor a little bit

  • dark mode
  • toggle preview style
  • fullscreen
  • mermaid
  • katex
  • latex
  • iframe (for selected domain only)
  • inline math
  • some CSS

So, instead of repeating the same code everywhere, I tried to develop it as a library and install that everywhere.

I used create-react-library to develop it

What is not working

I am using this code to parse inline math.

It's working perfectly inside the viewer but, the returned HTML is not correct.

markdown input

$$katex
\sum_{i=0}^nA[i]
$$

$\sum_{i=0}^nA[i]$

Output - Viewer of the editor Screenshot from 2021-11-02 08-55-00

Output - getInstance().getHTML() Screenshot from 2021-11-02 08-56-24

The inline parsed HTML is not returned by getInstance().getHTML()

To Reproduce

Steps to reproduce the behaviour:

  1. Clone the repo https://github.com/ats1999/md-byte
  2. cd md-byte/mde10 && npm I && cd example && npm i
  3. cd md-byte/mde10 && npm start
  4. cd md-byte/mde10/example && npm start

Expected behaviour

Inline parsed HTML should be returned by getInstance().getHTML()

Screenshots

If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context

Add any other context about the problem here.

ats1999 avatar Nov 02 '21 03:11 ats1999

@ats1999 I checked the issue. The getHTML() result is returned based on our wysiwyg for compatibility. However, the customizing of the text through customHTMLRenderer is not applied when converting to WYSIWYG editor. In the end, it seems to be a problem that can be solved if the custom inline node is officially supported. I'll think more about this!

js87zz avatar Nov 08 '21 09:11 js87zz

@js87zz I saw htmlInline here

But, i am not aware that how can i use it.

According to the example in the above docs

    htmlInline: {
      big(node, { entering }) {
        return entering
          ? { type: 'openTag', tagName: 'big', attributes: node.attrs }
          : { type: 'closeTag', tagName: 'big' };
      },
    }

What is big here??

How can I parse $math$ with htmlInline?

ats1999 avatar Nov 08 '21 09:11 ats1999

I got it what is big.

But instead of writing inline HTML nodes, I would like to use $math$ syntax.

ats1999 avatar Nov 08 '21 15:11 ats1999

I came to this bug/feature because it seems to be describing the behavior I am experiencing...

Are you saying that when you add a customHTMLRenderer, that you will see the custom rendered HTML inside the preview/wysiwyg pane, but that getHTML() will not return the custom rendered HTML, and you need to apply your custom rendering on the result from getHTML()? This doesn't really seem like a "feature"... more like a bug.

derekbsnider avatar Mar 17 '25 16:03 derekbsnider