nhn / tui.editor

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

How to use `htmlInline`? #3199

Open dreamncn opened 8 months ago

dreamncn commented 8 months ago

Describe the bug

I found this field (htmlInline) from the document. I defined a badge function. It seems to run well in markdown mode, but something went wrong when switching to the WYSIWYG mode.

To Reproduce

Steps to reproduce the behavior:

  1. Defined badge

    const customHTMLRenderer = {
    htmlInline: {
        badge(node, { entering }) {
            if(!entering){
                return "";
            }
            var name = node.attrs.text|| "注释";
            var type = node.attrs.type|| "tip";
            var vertical = node.attrs.vertical|| "top";
    
            return entering
                ?{ type: 'html',  content: ` <span  class="badge ` + type + `" style ="vertical-align: ` + vertical + `;">` + name + `</span>` }
                :"";
        },
    },
    };

    I don't think this is a best practice, but I really haven't found any more information on how to use it in the documentation

  2. Use the badge tag
23342432<badge text="译文" type="error" vertical="middle"></badge><badge text="译文" type="note" vertical="top"></badge>dffsdds<badge text="译ddd文" type="warn" vertical="bottom"></badge>23423423432
  1. render image
  2. When I switched to WYSIWYG mode, he made a mistake.

Uncaught TypeError: Cannot read properties of null (reading '0')
    at ih (app.min.js:24:335800)
    at htmlInline (app.min.js:24:419452)
    at o (app.min.js:24:421912)
    at e.convert (app.min.js:24:422131)
    at e.convertNode (app.min.js:24:422186)
    at e.toWysiwygModel (app.min.js:24:434394)
    at e.changeMode (app.min.js:24:453118)
    at app.min.js:24:411084
    at Array.forEach (<anonymous>)
    at e.emit (app.min.js:24:411055)
  1. I debugged the code (compressed),The value of e is empty.
         function ih(e) {
                var t = (e = e.match(ga)[0]).match(new RegExp(ha,"g"));
                return t ? t.reduce((function(e, t) {
                    var n = t.trim().split("=")
                      , r = n[0]
                      , o = n.slice(1);
                    return o.length && (e[r] = o.join("=").replace(/'|"/g, "").trim()),
                    e
                }
                ), {}) : {}
            }

Expected behavior

No error.

Screenshots

Not applicable.

Desktop (please complete the following information):

Not applicable.

Smartphone (please complete the following information):

Not applicable.

Additional context

Not applicable.