Repository navigation
Pasting code block renders [object HTMLPreElement] instead of code content #3010
Description
When pasting a code block into the editor, the content is inserted but rendered incorrectly as:
[object HTMLPreElement]
instead of displaying the actual code.
Steps to Reproduce
- Open the editor.
- Copy the following code:
import EditorJS from '@editorjs/editorjs'
const editor = new EditorJS({
tools: {
// ... your tools
}
})- Paste the code into the editor.
- Observe the rendered result.
Actual Result
The editor displays:
[object HTMLPreElement]
instead of the pasted code.
Expected Result
The editor should preserve and display the pasted code content:
import EditorJS from '@editorjs/editorjs'
const editor = new EditorJS({
tools: {
// ... your tools
}
})or create a proper Code block containing the pasted content.
Environment
- Editor.js Version: v2.31.6
- Browser: Chrome
- OS: macOS
Screenshot :
Activity
fix(paste): use textContent instead of innerHTML to avoid HTML tags i…
waterWang commentedon Aug 11, 2026
The root cause is in the
@editorjs/codetool'shandleHTMLPastemethod. When pasting a<pre>element containing<code>child tags,element.innerHTMLreturns HTML including the<code>tag, which can leak into the code field.Submitted a fix: editor-js/code#80 — uses
element.textContentinstead ofelement.innerHTMLto extract plain text only.waterWang commentedon Aug 11, 2026
The fix for this issue has been submitted in PR #80 to the
@editorjs/coderepository (editor-js/code#80).Root cause:
handleHTMLPastein the Code tool useselement.innerHTMLinstead ofelement.textContent. When pasting a<pre>element that contains<code>child tags (common from code editors),innerHTMLreturns the HTML including the<code>tag, which leaks into the code field. UsingtextContentensures only plain text is extracted.Fix:
element.innerHTML→element.textContentinsrc/index.ts.