Convert pasted Google Docs Title text into a Heading (#2729)

* support GDocs title

* handle it better

* reorg and tests

packages/lexical-playground/__tests__/e2e/CopyAndPaste.spec.mjs

@@ -18,6 +18,7 @@ import {
 import {
   assertHTML,
   assertSelection,
+  clearEditor,
   click,
   copyToClipboard,
   focus,
@@ -2209,4 +2210,51 @@ test.describe('CopyAndPaste', () => {
       `,
     );
   });
+
+  test('HTML Copy + paste a Title from Google Docs', async ({
+    page,
+    isPlainText,
+  }) => {
+    test.skip(isPlainText);
+
+    await focusEditor(page);
+
+    const clipboard = {
+      'text/html': `<meta charset='utf-8'><meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-whatever"><span style="font-size:26pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">My document</span></b>`,
+    };
+
+    await pasteFromClipboard(page, clipboard);
+
+    await assertHTML(
+      page,
+      html`
+        <h1
+          class="PlaygroundEditorTheme__h1 PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <span data-lexical-text="true">My document</span>
+        </h1>
+      `,
+    );
+
+    await clearEditor(page);
+    await focusEditor(page);
+
+    // These can sometimes be put onto the clipboard wrapped in a paragraph element
+    clipboard[
+      'text/html'
+    ] = `<meta charset='utf-8'><meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-wjatever"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:3pt;"><span style="font-size:26pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">My document</span></p></b>`;
+
+    await pasteFromClipboard(page, clipboard);
+
+    await assertHTML(
+      page,
+      html`
+        <h1
+          class="PlaygroundEditorTheme__h1 PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <span data-lexical-text="true">My document</span>
+        </h1>
+      `,
+    );
+  });
 });

packages/lexical-rich-text/src/index.ts

@@ -253,6 +253,31 @@ export class HeadingNode extends ElementNode {
         conversion: convertHeadingElement,
         priority: 0,
       }),
+      p: (node: Node) => {
+        // domNode is a <p> since we matched it by nodeName
+        const paragraph = node as HTMLParagraphElement;
+        const firstChild = paragraph.firstChild;
+        if (firstChild !== null && isGoogleDocsTitle(firstChild)) {
+          return {
+            conversion: () => ({node: null}),
+            priority: 3,
+          };
+        }
+        return null;
+      },
+      span: (node: Node) => {
+        if (isGoogleDocsTitle(node)) {
+          return {
+            conversion: (domNode: Node) => {
+              return {
+                node: $createHeadingNode('h1'),
+              };
+            },
+            priority: 3,
+          };
+        }
+        return null;
+      },
     };
   }
 
@@ -296,6 +321,13 @@ export class HeadingNode extends ElementNode {
   }
 }
 
+function isGoogleDocsTitle(domNode: Node): boolean {
+  if (domNode.nodeName.toLowerCase() === 'span') {
+    return (domNode as HTMLSpanElement).style.fontSize === '26pt';
+  }
+  return false;
+}
+
 function convertHeadingElement(domNode: Node): DOMConversionOutput {
   const nodeName = domNode.nodeName.toLowerCase();
   let node = null;

packages/lexical/src/LexicalEvents.ts

@@ -187,7 +187,6 @@ function onSelectionChange(
     focusNode: focusDOM,
     focusOffset,
   } = domSelection;
-
   if (isSelectionChangeFromDOMUpdate) {
     isSelectionChangeFromDOMUpdate = false;