Monday, April 29, 2024
HomeCSShtml - Why does mvp.css trigger EditorJS hyperlinks to grow to be...

html – Why does mvp.css trigger EditorJS hyperlinks to grow to be empty?


When working with EditorJS, I discover that making a chunk of textual content a hyperlink, the presence of mvp.css causes the hyperlink to grow to be empty.

I’ve created a JS Fiddle to reveal this:
https://jsfiddle.internet/kwr03qgs/2/

Attempt highlighting the ‘hyperlink me’ textual content and make it a hyperlink to something.
Discover how the info turns into "textual content": "<a>Hyperlink me</a>.<br>"

Now take away the hyperlink to mvp.css (or strive this jsfiddle), run it, and make the textual content a hyperlink.
Discover how the info turns into "textual content": "<a href="https://instance.com">Hyperlink me.</a><br>"

What’s inflicting the presence of mvp.css to intervene with the JS right here?

For reference, right here is the HTML that reproduces the problem:

    <hyperlink rel="stylesheet" href="https://unpkg.com/mvp.css"> 
    <script src="https://cdn.jsdelivr.internet/npm/@editorjs/editorjs@newest"></script>

    <div class="container">
            <div id="editorjs" class="column"></div>
            <div id="output" class="column"></div>
    </div>
    
    <script>

        var editor = new EditorJS({
            holder: 'editorjs',
            tunes: [],

            instruments: {},

            information: {
            "time": 1713204528921,
            "blocks": [
              {
                "id": "CLAw1GQkIK",
                "type": "paragraph",
                "data": {
                  "text": "Link me.<br>"
                }
              }
            ],
            "model": "2.29.1"
          },

            onChange: () => {
                editor.save().then((outputData) => {
                    console.log(outputData);
                    const outputElement = doc.getElementById('output');
                    const escapedJson = JSON.stringify(outputData, null, 4)
                        .change(/</g, "&lt;")
                        .change(/>/g, "&gt;");
                    outputElement.innerHTML = `<pre><code class="language-json">${escapedJson}</code></pre>`;
                    
                }).catch((error) => {
                    console.log('Saving failed: ', error)
                });
            },
            
        });
    </script>

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments