Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] Pasted HTML lists are empty #2208

Closed
ollietreend opened this issue Dec 7, 2022 · 5 comments · Fixed by #2217
Closed

[Bug] Pasted HTML lists are empty #2208

ollietreend opened this issue Dec 7, 2022 · 5 comments · Fixed by #2217
Assignees
Labels

Comments

@ollietreend
Copy link

ollietreend commented Dec 7, 2022

Whenever I copy a HTML list (either a <ul> or <ol>) from the web, and paste it into an Editor.js instance, an empty list gets created. The list items are not populated.

This only seems to happen when pasting formatted text from an external application – i.e. where the clipboard data is in text/html format. Copying within or between Editor.js instances works as expected – presumably this is due to the clipboard data having the custom mime type application/x-editor-js and therefore being processed differently.

Steps to reproduce

  1. Open the demo editor at editorjs.io.
  2. Copy this list directly from the GitHub issue.
  3. Paste it into the editor. It will render as an empty ordered list.

Expected behavior

I expect the <li> list items to be populated within the list block's data.items attribute. Instead, the items array is empty.

Screenshots

Paste.HTML.list.into.Editor.mov

Device, Browser, OS

I'm using macOS Monterey. I've been able to recreate the bug in Chrome, Brave, Firefox and Safari.

Editor.js version

In local development, I've had issues with the current release, version 2.26.1. Presumably this is also what's running on the Editor.js homepage demo.

Plugins you use with their versions

I can recreate the issue in an Editor.js instance with only the default header, paragraph and list tools enabled.

@ollietreend ollietreend added the bug label Dec 7, 2022
@ollietreend
Copy link
Author

ollietreend commented Dec 7, 2022

Investigation done so far

I've wrapped the @editorjs/list tool to inspect the element that gets passed into the pasteHandler method.

import List from '@editorjs/list';

class DebuggedList extends List {
  pasteHandler(element) {
    console.log(element);
    super.pasteHandler(element);
  }
}

export default DebuggedList;

When I paste using this DebuggedList tool, I get the following in the JS console:

JavaScript console

This strikes me as odd. I would have expected to see an <ol> containing <li> elements – since this is what I pasted. Instead, the <li>s seem to have been stripped, and the <ol> now only contains a single text node.

I've also noticed that the <a> link in the first item of the Steps to reproduce list has been stripped. Only the link text remains.

Has something replaced the child elements by setting element.textContent? 🤔

Test coverage

I can't see any obvious signs that this particular 'journey' has been tested. So I wonder if this could be a regression?

In the main codex-team/editor.js repo, the Copy pasting from Editor spec doesn't cover HTML lists. And I can't see any tests in the editor-js/list repo.

@ollietreend
Copy link
Author

ollietreend commented Dec 7, 2022

Regression in 2.26.0

It looks like this is a regression introduced in the recent version 2.26.0.

When I run the previous version (2.25.0) in a local dev environment, HTML lists paste correctly as expected.

@ollietreend
Copy link
Author

ollietreend commented Dec 9, 2022

I've done some more digging, and it looks like there's an easy workaround.

The pasteConfig for List contains uppercase tag names. Changing them to lowercase fixes the issue.

static get pasteConfig() {
  return {
-    tags: ['OL', 'UL', 'LI'],
+    tags: ['ol', 'ul', 'li'],
  };
}

It looks like the sanitizer config is now case sensitive, where it was previously case insensitive.

I think the regression was introduced by #2100, released in v2.26.0-rc.1. Ideally there would be a unit test to ensure that tag names are case insensitive.

@imransilvake
Copy link

same issue on v2.26.0.

ollietreend added a commit to ollietreend/gift-week-editor that referenced this issue Dec 9, 2022
List items weren't pasting correctly – they'd always paste as an empty
list.

I did some digging and found a workaround, as documented in this GitHub
issue: codex-team/editor.js#2208

Until the bug is fixed in Editor.js itself, this workaround is required.
@imransilvake
Copy link

I downgraded to v.2.25.0 until there is a fix for this issue. I would say this is a high-priority bug that is causing a lot of problems for the users pasting content.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants