Pasting code block renders [object HTMLPreElement] instead of code content

[prathmeshyelne]

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

1. Open the editor.
2. Copy the following code:

import EditorJS from '@editorjs/editorjs'

const editor = new EditorJS({
  tools: {
    // ... your tools
  }
})

3. Paste the code into the editor.
4. 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 :

Issue Video :

Screen.Recording.2026-06-13.at.8.35.44.PM.mov

[waterWang]

The root cause is in the @editorjs/code tool's handleHTMLPaste method. When pasting a <pre> element containing <code> child tags, element.innerHTML returns HTML including the <code> tag, which can leak into the code field.

Submitted a fix: editor-js/code#80 — uses element.textContent instead of element.innerHTML to extract plain text only.

[waterWang]

The fix for this issue has been submitted in PR #80 to the @editorjs/code repository (editor-js/code#80).

Root cause: handleHTMLPaste in the Code tool uses element.innerHTML instead of element.textContent. When pasting a <pre> element that contains <code> child tags (common from code editors), innerHTML returns the HTML including the <code> tag, which leaks into the code field. Using textContent ensures only plain text is extracted.

Fix: element.innerHTML → element.textContent in src/index.ts.