Merge remote-tracking branch 'origin/main' into refactor-npm-package-…

…process-facebookgh-5869

packages/lexical-clipboard/src/clipboard.ts

@@ -166,13 +166,16 @@ export function $insertDataTransferForRichText(
         parts.pop();
       }
       for (let i = 0; i < parts.length; i++) {
-        const part = parts[i];
-        if (part === '\n' || part === '\r\n') {
-          selection.insertParagraph();
-        } else if (part === '\t') {
-          selection.insertNodes([$createTabNode()]);
-        } else {
-          selection.insertText(part);
+        const currentSelection = $getSelection();
+        if ($isRangeSelection(currentSelection)) {
+          const part = parts[i];
+          if (part === '\n' || part === '\r\n') {
+            currentSelection.insertParagraph();
+          } else if (part === '\t') {
+            currentSelection.insertNodes([$createTabNode()]);
+          } else {
+            currentSelection.insertText(part);
+          }
         }
       }
     } else {

packages/lexical-devtools/src/entrypoints/background/ActionIconWatchdog.ts

@@ -82,7 +82,8 @@ export default class ActionIconWatchdog {
 
   private isRestrictedBrowserPage(url: string | undefined) {
     return (
-      !url || ['chrome:', 'about:', 'file:'].includes(new URL(url).protocol)
+      !url ||
+      ['chrome:', 'about:', 'file:', 'edge:'].includes(new URL(url).protocol)
     );
   }
 

packages/lexical-devtools/src/entrypoints/devtools-panel/App.tsx

@@ -34,10 +34,16 @@ function App({tabID}: Props) {
   const [errorMessage, setErrorMessage] = useState('');
 
   const {lexicalState} = useExtensionStore();
-  const states = lexicalState[tabID] ?? {};
+  const states = lexicalState[tabID];
   const lexicalCount = Object.keys(states ?? {}).length;
 
-  return (
+  return lexicalState[tabID] === null ? (
+    <Alert status="warning">
+      <AlertIcon />
+      This is a restricted browser page. Lexical DevTools cannot access this
+      page.
+    </Alert>
+  ) : (
     <>
       <Flex>
         <Box p="4">
@@ -85,7 +91,7 @@ function App({tabID}: Props) {
         ) : (
           <Alert status="info">
             <AlertIcon />
-            No Lexical editor found on the page.
+            No Lexical editors found on the page.
           </Alert>
         )}
       </Box>

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

@@ -31,7 +31,9 @@ test.describe('Autocomplete', () => {
           dir="ltr">
           <span data-lexical-text="true">Sort by alpha</span>
           <span contenteditable="false" data-lexical-decorator="true">
-            <span spellcheck="false" style="color: rgb(204, 204, 204)">
+            <span
+              class="PlaygroundEditorTheme__autocomplete"
+              spellcheck="false">
               betical (TAB)
             </span>
           </span>

packages/lexical-playground/src/nodes/AutocompleteNode.tsx

@@ -6,14 +6,16 @@
  *
  */
 
-import type {Spread} from 'lexical';
-
-import {
-  DecoratorNode,
+import type {
   EditorConfig,
+  EditorThemeClassName,
+  LexicalEditor,
   NodeKey,
   SerializedLexicalNode,
+  Spread,
 } from 'lexical';
+
+import {DecoratorNode} from 'lexical';
 import * as React from 'react';
 
 import {useSharedAutocompleteContext} from '../context/SharedAutocompleteContext';
@@ -35,7 +37,14 @@ export type SerializedAutocompleteNode = Spread<
 >;
 
 export class AutocompleteNode extends DecoratorNode<JSX.Element | null> {
-  // TODO add comment
+  /**
+   * A unique uuid is generated for each session and assigned to the instance.
+   * This helps to:
+   * - Ensures max one Autocomplete node per session.
+   * - Ensure that when collaboration is enabled, this node is not shown in
+   *   other sessions.
+   * See https://github.com/facebook/lexical/blob/master/packages/lexical-playground/src/plugins/AutocompletePlugin/index.tsx#L39
+   */
   __uuid: string;
 
   static clone(node: AutocompleteNode): AutocompleteNode {
@@ -79,28 +88,31 @@ export class AutocompleteNode extends DecoratorNode<JSX.Element | null> {
     return document.createElement('span');
   }
 
-  decorate(): JSX.Element | null {
+  decorate(editor: LexicalEditor, config: EditorConfig): JSX.Element | null {
     if (this.__uuid !== UUID) {
       return null;
     }
-    return <AutocompleteComponent />;
+    return <AutocompleteComponent className={config.theme.autocomplete} />;
   }
 }
 
 export function $createAutocompleteNode(uuid: string): AutocompleteNode {
   return new AutocompleteNode(uuid);
 }
 
-function AutocompleteComponent(): JSX.Element {
+function AutocompleteComponent({
+  className,
+}: {
+  className: EditorThemeClassName;
+}): JSX.Element {
   const [suggestion] = useSharedAutocompleteContext();
   const userAgentData = window.navigator.userAgentData;
   const isMobile =
     userAgentData !== undefined
       ? userAgentData.mobile
       : window.innerWidth <= 800 && window.innerHeight <= 600;
-  // TODO Move to theme
   return (
-    <span style={{color: '#ccc'}} spellCheck="false">
+    <span className={className} spellCheck="false">
       {suggestion} {isMobile ? '(SWIPE \u2B95)' : '(TAB)'}
     </span>
   );

packages/lexical-playground/src/themes/PlaygroundEditorTheme.css

@@ -439,3 +439,6 @@
   border: 1px dashed #ddd;
   padding: 8px 16px;
 }
+.PlaygroundEditorTheme__autocomplete {
+  color: #ccc;
+}

packages/lexical-playground/src/themes/PlaygroundEditorTheme.ts

@@ -11,6 +11,7 @@ import type {EditorThemeClasses} from 'lexical';
 import './PlaygroundEditorTheme.css';
 
 const theme: EditorThemeClasses = {
+  autocomplete: 'PlaygroundEditorTheme__autocomplete',
   blockCursor: 'PlaygroundEditorTheme__blockCursor',
   characterLimit: 'PlaygroundEditorTheme__characterLimit',
   code: 'PlaygroundEditorTheme__code',

packages/lexical/src/LexicalSelection.ts

@@ -2685,11 +2685,23 @@ export function $getTextContent(): string {
 }
 
 function removeTextAndSplitBlock(selection: RangeSelection): number {
+  let selection_ = selection;
   if (!selection.isCollapsed()) {
-    selection.removeText();
+    selection_.removeText();
+  }
+  // A new selection can originate as a result of node replacement, in which case is registered via
+  // $setSelection
+  const newSelection = $getSelection();
+  if ($isRangeSelection(newSelection)) {
+    selection_ = newSelection;
   }
 
-  const anchor = selection.anchor;
+  invariant(
+    $isRangeSelection(selection_),
+    'Unexpected dirty selection to be null',
+  );
+
+  const anchor = selection_.anchor;
   let node = anchor.getNode();
   let offset = anchor.offset;
 

packages/lexical/src/LexicalUtils.ts

@@ -1591,7 +1591,7 @@ export function isHTMLElement(x: Node | EventTarget): x is HTMLElement {
 export function INTERNAL_$isBlock(
   node: LexicalNode,
 ): node is ElementNode | DecoratorNode<unknown> {
-  if ($isDecoratorNode(node) && !node.isInline()) {
+  if ($isRootNode(node) || ($isDecoratorNode(node) && !node.isInline())) {
     return true;
   }
   if (!$isElementNode(node) || $isRootOrShadowRoot(node)) {

packages/lexical/src/index.ts

@@ -16,6 +16,7 @@ export type {
   EditorConfig,
   EditorSetOptions,
   EditorThemeClasses,
+  EditorThemeClassName,
   HTMLConfig,
   Klass,
   KlassConstructor,

scripts/error-codes/codes.json

@@ -159,5 +159,8 @@
   "157": "Expected tableNode to have a parent TableNode",
   "158": "Expected gridParent to have a parent",
   "159": "Expected focusCellParent to have a parent",
-  "160": "Expected TableCellNode parent to be a TableRowNode"
+  "160": "Expected TableCellNode parent to be a TableRowNode",
+  "161": "Unexpected dirty selection to be null",
+  "162": "Root element not registered",
+  "163": "node is not a ListNode"
 }