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, "<")
.change(/>/g, ">");
outputElement.innerHTML = `<pre><code class="language-json">${escapedJson}</code></pre>`;
}).catch((error) => {
console.log('Saving failed: ', error)
});
},
});
</script>