Add HTML paste support for checklists (#3579)

facebook · Dec 21, 2022 · c67d2aa · c67d2aa · vercel · Dec 21, 2022
1 parent 6db97e7
commit c67d2aa
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 3 deletions.
diff --git a/packages/lexical-list/src/LexicalListItemNode.ts b/packages/lexical-list/src/LexicalListItemNode.ts
@@ -518,7 +518,10 @@ function updateListItemChecked(
 }
 
 function convertListItemElement(domNode: Node): DOMConversionOutput {
-  return {node: $createListItemNode()};
+  const checked =
+    domNode instanceof HTMLElement &&
+    domNode.getAttribute('aria-checked') === 'true';
+  return {node: $createListItemNode(checked)};
 }
 
 export function $createListItemNode(checked?: boolean): ListItemNode {

diff --git a/packages/lexical-list/src/LexicalListNode.ts b/packages/lexical-list/src/LexicalListNode.ts
@@ -16,6 +16,7 @@ import {
   $isElementNode,
   DOMConversionMap,
   DOMConversionOutput,
+  DOMExportOutput,
   EditorConfig,
   EditorThemeClasses,
   ElementNode,
@@ -134,6 +135,19 @@ export class ListNode extends ElementNode {
     return node;
   }
 
+  exportDOM(editor: LexicalEditor): DOMExportOutput {
+    const element = document.createElement(this.__tag);
+    if (this.__start !== 1) {
+      element.setAttribute('start', String(this.__start));
+    }
+    if (this.__listType === 'check') {
+      element.setAttribute('__lexicalListType', 'check');
+    }
+    return {
+      element,
+    };
+  }
+
   exportJSON(): SerializedListNode {
     return {
       ...super.exportJSON(),
@@ -264,11 +278,17 @@ function normalizeChildren(nodes: Array<LexicalNode>): Array<ListItemNode> {
 function convertListNode(domNode: Node): DOMConversionOutput {
   const nodeName = domNode.nodeName.toLowerCase();
   let node = null;
-
   if (nodeName === 'ol') {
     node = $createListNode('number');
   } else if (nodeName === 'ul') {
-    node = $createListNode('bullet');
+    if (
+      domNode instanceof HTMLElement &&
+      domNode.getAttribute('__lexicallisttype') === 'check'
+    ) {
+      node = $createListNode('check');
+    } else {
+      node = $createListNode('bullet');
+    }
   }
 
   return {

diff --git a/packages/lexical-playground/__tests__/e2e/CopyAndPaste.spec.mjs b/packages/lexical-playground/__tests__/e2e/CopyAndPaste.spec.mjs
@@ -2577,6 +2577,80 @@ test.describe('CopyAndPaste', () => {
     );
   });
 
+  test('HTML Copy + paste a checklist', async ({page, isPlainText}) => {
+    test.skip(isPlainText);
+
+    await focusEditor(page);
+
+    const clipboard = {
+      'text/html': `<meta charset='utf-8'><ul __lexicallisttype="check"><li role="checkbox" tabindex="-1" aria-checked="false" value="1" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemUnchecked"><span>Hello</span></li><li role="checkbox" tabindex="-1" aria-checked="false" value="2" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemUnchecked"><span>world</span></li></ul>`,
+    };
+
+    await pasteFromClipboard(page, clipboard);
+
+    await assertHTML(
+      page,
+      html`
+        <ul class="PlaygroundEditorTheme__ul">
+          <li
+            role="checkbox"
+            tabindex="-1"
+            aria-checked="false"
+            value="1"
+            class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemUnchecked PlaygroundEditorTheme__ltr"
+            dir="ltr">
+            <span data-lexical-text="true">Hello</span>
+          </li>
+          <li
+            role="checkbox"
+            tabindex="-1"
+            aria-checked="false"
+            value="2"
+            class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemUnchecked PlaygroundEditorTheme__ltr"
+            dir="ltr">
+            <span data-lexical-text="true">world</span>
+          </li>
+        </ul>
+      `,
+    );
+
+    await clearEditor(page);
+    await focusEditor(page);
+
+    // Ensure we preserve checked status.
+    clipboard[
+      'text/html'
+    ] = `<meta charset='utf-8'><ul __lexicallisttype="check"><li role="checkbox" tabindex="-1" aria-checked="true" value="1" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemChecked"><span>Hello</span></li><li role="checkbox" tabindex="-1" aria-checked="false" value="2" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemUnchecked"><span>world</span></li></ul>`;
+
+    await pasteFromClipboard(page, clipboard);
+
+    await assertHTML(
+      page,
+      html`
+        <ul class="PlaygroundEditorTheme__ul">
+          <li
+            role="checkbox"
+            tabindex="-1"
+            aria-checked="true"
+            value="1"
+            class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemChecked PlaygroundEditorTheme__ltr"
+            dir="ltr">
+            <span data-lexical-text="true">Hello</span>
+          </li>
+          <li
+            role="checkbox"
+            tabindex="-1"
+            aria-checked="false"
+            value="2"
+            class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemUnchecked PlaygroundEditorTheme__ltr"
+            dir="ltr">
+            <span data-lexical-text="true">world</span>
+          </li>
+        </ul>
+      `,
+    );
+  });
+
   test('HTML Copy + paste a code block with BR', async ({
     page,
     isPlainText,