Merge branch 'main' into fix/6716

.gitignore

@@ -15,6 +15,7 @@ npm
 .env.production.local
 .ts-temp
 .docusaurus
+.playwright-clipboard.lock
 e2e-screenshots
 test-results
 playwright-report

.prettierignore

@@ -14,6 +14,7 @@ packages/playwright-core
 packages/**/vite.config.js
 packages/**/vite.prod.config.js
 packages/lexical-website/docs/api
+packages/lexical-website/fb/*.json
 **/*.md
 **/*.js.flow
 **/node_modules

package.json

@@ -134,6 +134,7 @@
     "@types/node": "^17.0.31",
     "@types/prettier": "^2.7.3",
     "@types/prismjs": "^1.26.0",
+    "@types/proper-lockfile": "^4.1.4",
     "@types/react": "^18.0.8",
     "@types/react-dom": "^18.0.3",
     "@types/trusted-types": "^2.0.7",
@@ -178,6 +179,7 @@
     "prettier-plugin-hermes-parser": "^0.20.1",
     "prettier-plugin-organize-attributes": "^0.0.5",
     "prettier-plugin-tailwindcss": "^0.4.1",
+    "proper-lockfile": "^4.1.2",
     "react-test-renderer": "^17.0.2",
     "rollup": "^4.22.4",
     "size-limit": "^11.1.2",

packages/lexical-html/src/index.ts

@@ -186,7 +186,9 @@ function getConversionFunction(
       if (
         domConversion !== null &&
         (currentConversion === null ||
-          (currentConversion.priority || 0) < (domConversion.priority || 0))
+          // Given equal priority, prefer the last registered importer
+          // which is typically an application custom node or HTMLConfig['import']
+          (currentConversion.priority || 0) <= (domConversion.priority || 0))
       ) {
         currentConversion = domConversion;
       }

packages/lexical-markdown/src/MarkdownShortcuts.ts

@@ -480,10 +480,13 @@ export function registerMarkdownShortcuts(
       const selection = editorState.read($getSelection);
       const prevSelection = prevEditorState.read($getSelection);
 
+      // We expect selection to be a collapsed range and not match previous one (as we want
+      // to trigger transforms only as user types)
       if (
         !$isRangeSelection(prevSelection) ||
         !$isRangeSelection(selection) ||
-        !selection.isCollapsed()
+        !selection.isCollapsed() ||
+        selection.is(prevSelection)
       ) {
         return;
       }

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

@@ -18,6 +18,7 @@ import {
   pasteFromClipboard,
   test,
   waitForSelector,
+  withExclusiveClipboardAccess,
 } from '../utils/index.mjs';
 
 test.describe('CodeActionMenu', () => {
@@ -84,31 +85,33 @@ test.describe('CodeActionMenu', () => {
 
     await mouseMoveToSelector(page, 'code.PlaygroundEditorTheme__code');
 
-    if (browserName === 'chromium') {
-      await context.grantPermissions(['clipboard-write']);
-      await click(page, 'button[aria-label=copy]');
-      await paste(page);
-      await context.clearPermissions();
-    } else {
-      await waitForSelector(page, 'button[aria-label=copy]');
+    await withExclusiveClipboardAccess(async () => {
+      if (browserName === 'chromium') {
+        await context.grantPermissions(['clipboard-write']);
+        await click(page, 'button[aria-label=copy]');
+        await paste(page);
+        await context.clearPermissions();
+      } else {
+        await waitForSelector(page, 'button[aria-label=copy]');
 
-      const copiedText = await evaluate(page, () => {
-        let text = null;
+        const copiedText = await evaluate(page, () => {
+          let text = null;
 
-        navigator.clipboard._writeText = navigator.clipboard.writeText;
-        navigator.clipboard.writeText = function (data) {
-          text = data;
-          this._writeText(data);
-        };
-        document.querySelector('button[aria-label=copy]').click();
+          navigator.clipboard._writeText = navigator.clipboard.writeText;
+          navigator.clipboard.writeText = function (data) {
+            text = data;
+            this._writeText(data);
+          };
+          document.querySelector('button[aria-label=copy]').click();
 
-        return text;
-      });
+          return text;
+        });
 
-      await pasteFromClipboard(page, {
-        'text/plain': copiedText,
-      });
-    }
+        await pasteFromClipboard(page, {
+          'text/plain': copiedText,
+        });
+      }
+    });
 
     await assertHTML(
       page,

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

@@ -28,6 +28,7 @@ import {
   locate,
   pasteFromClipboard,
   test,
+  withExclusiveClipboardAccess,
 } from '../../../utils/index.mjs';
 
 test.describe('HTML Links CopyAndPaste', () => {
@@ -148,9 +149,11 @@ test.describe('HTML Links CopyAndPaste', () => {
     await page.keyboard.down('Shift');
     await moveLeft(page, 2);
     await page.keyboard.up('Shift');
-    const clipboard = await copyToClipboard(page);
-    await moveToEditorEnd(page);
-    await pasteFromClipboard(page, clipboard);
+    await withExclusiveClipboardAccess(async () => {
+      const clipboard = await copyToClipboard(page);
+      await moveToEditorEnd(page);
+      await pasteFromClipboard(page, clipboard);
+    });
 
     await assertHTML(
       page,

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

@@ -6,6 +6,7 @@
  *
  */
 
+import {moveToLineEnd} from '../../../keyboardShortcuts/index.mjs';
 import {
   assertHTML,
   click,
@@ -15,6 +16,7 @@ import {
   initialize,
   pasteFromClipboard,
   test,
+  withExclusiveClipboardAccess,
 } from '../../../utils/index.mjs';
 
 test.describe('ContextMenuCopyAndPaste', () => {
@@ -33,13 +35,15 @@ test.describe('ContextMenuCopyAndPaste', () => {
     await page.pause();
     await doubleClick(page, 'div[contenteditable="false"] span');
     await page.pause();
-    await click(page, 'div[contenteditable="false"] span', {button: 'right'});
-    await click(page, '#typeahead-menu [role="option"] :text("Copy")');
+    await withExclusiveClipboardAccess(async () => {
+      await click(page, 'div[contenteditable="false"] span', {button: 'right'});
+      await click(page, '#typeahead-menu [role="option"] :text("Copy")');
 
-    await click(page, '.unlock');
-    await focusEditor(page);
+      await click(page, '.unlock');
+      await focusEditor(page);
 
-    await pasteFromClipboard(page);
+      await pasteFromClipboard(page);
+    });
 
     await assertHTML(
       page,
@@ -52,4 +56,56 @@ test.describe('ContextMenuCopyAndPaste', () => {
       `,
     );
   });
+  test('Rich text Copy and Paste with  different Font Size', async ({
+    page,
+    isPlainText,
+    isCollab,
+    browserName,
+  }) => {
+    test.skip(isCollab || isPlainText || browserName !== 'chromium');
+
+    await withExclusiveClipboardAccess(async () => {
+      await page
+        .context()
+        .grantPermissions(['clipboard-read', 'clipboard-write']);
+
+      await click(page, '.font-increment');
+      await focusEditor(page);
+      await page.keyboard.type('MLH Fellowship');
+      //await page.pause();
+      await moveToLineEnd(page);
+      await page.keyboard.press('Enter');
+      await page.keyboard.type('Fall 2024');
+
+      await click(page, '.lock');
+
+      await doubleClick(page, 'div[contenteditable="false"] span');
+      await click(page, 'div[contenteditable="false"] span', {button: 'right'});
+      await click(page, '#typeahead-menu [role="option"] :text("Copy")');
+
+      await click(page, '.unlock');
+      await focusEditor(page);
+      await pasteFromClipboard(page);
+    });
+
+    await assertHTML(
+      page,
+      html`
+        <p
+          class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <span style="font-size: 17px;" data-lexical-text="true">
+            MLH Fellowship
+          </span>
+        </p>
+        <p
+          class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <span style="font-size: 17px;" data-lexical-text="true">
+            Fall 2024Fellowship
+          </span>
+        </p>
+      `,
+    );
+  });
 });