lexical 0.1.13 → 0.1.16

package/Lexical.d.ts

@@ -14,7 +14,6 @@ import {Class, $ReadOnly} from 'utility-types';
 type ErrorHandler = (error: Error) => void;
 type MutationListeners = Map<MutationListener, Class<LexicalNode>>;
 export type NodeMutation = 'created' | 'destroyed';
-export type ErrorListener = (error: Error) => void;
 type UpdateListener = (arg0: {
   tags: Set<string>;
   prevEditorState: EditorState;
@@ -40,7 +39,6 @@ export type ReadOnlyListener = (readOnly: boolean) => void;
 type CommandPayload = any;
 type Listeners = {
   decorator: Set<DecoratorListener>;
-  error: Set<ErrorListener>;
   mutation: MutationListeners;
   textcontent: Set<TextContentListener>;
   root: Set<RootListener>;
@@ -99,7 +97,7 @@ export declare class LexicalEditor {
     klass: Class<LexicalNode>,
     listener: MutationListener,
   ): () => void;
-  addTransform<T extends LexicalNode>(
+  addNodeTransform<T extends LexicalNode>(
     klass: Class<T>,
     listener: Transform<T>,
   ): () => void;
@@ -146,17 +144,9 @@ export type EditorThemeClasses = {
   //@ts-expect-error
   list?: {
     ul?: EditorThemeClassName;
-    ul1?: EditorThemeClassName;
-    ul2?: EditorThemeClassName;
-    ul3?: EditorThemeClassName;
-    ul4?: EditorThemeClassName;
-    ul5?: EditorThemeClassName;
+    ulDepth?: Array<EditorThemeClassName>;
     ol?: EditorThemeClassName;
-    ol1?: EditorThemeClassName;
-    ol2?: EditorThemeClassName;
-    ol3?: EditorThemeClassName;
-    ol4?: EditorThemeClassName;
-    ol5?: EditorThemeClassName;
+    olDepth?: Array<EditorThemeClassName>;
     listitem?: EditorThemeClassName;
     nested?: {
       list?: EditorThemeClassName;
@@ -372,18 +362,28 @@ interface BaseSelection {
   insertRawText(text: string): void;
   is(selection: null | RangeSelection | NodeSelection | GridSelection): boolean;
 }
+export type GridSelectionShape = {
+  fromX: number;
+  fromY: number;
+  toX: number;
+  toY: number;
+};
 export declare class GridSelection {
   gridKey: NodeKey;
   anchorCellKey: NodeKey;
+  anchor: PointType;
   focusCellKey: NodeKey;
+  focus: PointType;
   dirty: boolean;
   constructor(gridKey: NodeKey, anchorCellKey: NodeKey, focusCellKey: NodeKey);
   is(selection: null | RangeSelection | NodeSelection | GridSelection): boolean;
   set(gridKey: NodeKey, anchorCellKey: NodeKey, focusCellKey: NodeKey): void;
   clone(): GridSelection;
   extract(): Array<LexicalNode>;
+  isCollapsed(): boolean;
   insertRawText(): void;
   insertText(): void;
+  getShape(): GridSelectionShape;
   getNodes(): Array<LexicalNode>;
   getTextContent(): string;
 }

package/Lexical.dev.js

@@ -14,7 +14,8 @@
  *
  * 
  */
-const getSelection = window.getSelection;
+const getSelection = () => window.getSelection();
+
 var getDOMSelection = getSelection;
 
 /**
@@ -136,12 +137,19 @@ const scheduleMicroTask = typeof queueMicrotask === 'function' ? queueMicrotask
   // No window prefix intended (#1400)
   Promise.resolve().then(fn);
 };
+
+function isSelectionCapturedInDecoratorInput(anchorDOM) {
+  const activeElement = document.activeElement;
+  const nodeName = activeElement !== null ? activeElement.nodeName : null;
+  return !$isDecoratorNode($getNearestNodeFromDOMNode(anchorDOM)) || nodeName !== 'INPUT' && nodeName !== 'TEXTAREA';
+}
+
 function isSelectionWithinEditor(editor, anchorDOM, focusDOM) {
   const rootElement = editor.getRootElement();
 
   try {
     return rootElement !== null && rootElement.contains(anchorDOM) && rootElement.contains(focusDOM) && // Ignore if selection is within nested editor
-    anchorDOM !== null && getNearestEditorFromDOMNode(anchorDOM) === editor;
+    anchorDOM !== null && isSelectionCapturedInDecoratorInput(anchorDOM) && getNearestEditorFromDOMNode(anchorDOM) === editor;
   } catch (error) {
     return false;
   }
@@ -461,7 +469,7 @@ function getEditorsToPropagate(editor) {
 function createUID() {
   return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
 }
-function $updateSelectedTextFromDOM(editor, compositionEnd) {
+function $updateSelectedTextFromDOM(editor, compositionEndEvent) {
   // Update the text content with the latest composition text
   const domSelection = getDOMSelection();
 
@@ -469,8 +477,8 @@ function $updateSelectedTextFromDOM(editor, compositionEnd) {
     return;
   }
 
-  const {
-    anchorNode,
+  const anchorNode = domSelection.anchorNode;
+  let {
     anchorOffset,
     focusOffset
   } = domSelection;
@@ -479,7 +487,17 @@ function $updateSelectedTextFromDOM(editor, compositionEnd) {
     const node = $getNearestNodeFromDOMNode(anchorNode);
 
     if ($isTextNode(node)) {
-      $updateTextNodeFromDOMContent(node, anchorNode.nodeValue, anchorOffset, focusOffset, compositionEnd);
+      let textContent = anchorNode.nodeValue;
+      const data = compositionEndEvent !== null && compositionEndEvent.data; // Data is intentionally truthy, as we check for boolean, null and empty string.
+
+      if (textContent === ZERO_WIDTH_CHAR && data) {
+        const offset = data.length;
+        textContent = data;
+        anchorOffset = offset;
+        focusOffset = offset;
+      }
+
+      $updateTextNodeFromDOMContent(node, textContent, anchorOffset, focusOffset, compositionEndEvent !== null);
     }
   }
 }
@@ -711,12 +729,18 @@ function getCachedClassNameArray(classNamesTheme, classNameThemeType) {
 
   return classNames;
 }
-function setMutatedNode(mutatedNodes, registeredNodes, node, mutation) {
-  const registeredNode = registeredNodes.get(node.__type);
+function setMutatedNode(mutatedNodes, registeredNodes, mutationListeners, node, mutation) {
+  if (mutationListeners.size === 0) {
+    return;
+  }
+
+  const nodeType = node.__type;
+  const nodeKey = node.__key;
+  const registeredNode = registeredNodes.get(nodeType);
 
   if (registeredNode === undefined) {
     {
-      throw Error(`Type ${node.__type} not in registeredNodes`);
+      throw Error(`Type ${nodeType} not in registeredNodes`);
     }
   }
 
@@ -728,7 +752,9 @@ function setMutatedNode(mutatedNodes, registeredNodes, node, mutation) {
     mutatedNodes.set(klass, mutatedNodesByType);
   }
 
-  mutatedNodesByType.set(node.__key, mutation);
+  if (!mutatedNodesByType.has(nodeKey)) {
+    mutatedNodesByType.set(nodeKey, mutation);
+  }
 }
 function $nodesOfType(klass) {
   const editorState = getActiveEditorState();
@@ -789,6 +815,11 @@ function $getDecoratorNode(focus, isBackward) {
 
   return null;
 }
+function isFirefoxClipboardEvents() {
+  const event = window.event;
+  const inputType = event && event.inputType;
+  return inputType === 'insertFromPaste' || inputType === 'insertFromPasteAsQuotation';
+}
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -1004,9 +1035,24 @@ function removeNode(nodeToRemove, restoreSelection) {
     $updateElementSelectionOnCreateDeleteNode(selection, parent, index, -1);
   }
 
-  if (parent !== null && !$isRootNode(parent) && !parent.canBeEmpty() && parent.getChildrenSize() === 0) {
+  if (parent !== null && !$isRootNode(parent) && !parent.canBeEmpty() && parent.isEmpty()) {
     removeNode(parent, restoreSelection);
   }
+
+  if (parent !== null && $isRootNode(parent) && parent.isEmpty()) {
+    parent.selectEnd();
+  }
+}
+function $getNodeByKeyOrThrow(key) {
+  const node = $getNodeByKey(key);
+
+  if (node === null) {
+    {
+      throw Error(`Expected node with key ${key} to exist but it's not in the nodeMap.`);
+    }
+  }
+
+  return node;
 }
 class LexicalNode {
   // Flow doesn't support abstract classes unfortunately, so we can't _force_
@@ -1438,8 +1484,7 @@ class LexicalNode {
 
   isComposing() {
     return this.__key === $getCompositionKey();
-  } // $FlowFixMe this is LexicalNode
-
+  }
 
   getLatest() {
     const latest = $getNodeByKey(this.__key);
@@ -1747,18 +1792,6 @@ class LexicalNode {
 
 }
 
-function $getNodeByKeyOrThrow(key) {
-  const node = $getNodeByKey(key);
-
-  if (node === null) {
-    {
-      throw Error(`Expected node with key ${key} to exist but it's not in the nodeMap.`);
-    }
-  }
-
-  return node;
-}
-
 function errorOnTypeKlassMismatch(type, klass) {
   const registeredNode = getActiveEditor()._nodes.get(type); // Common error - split in its own invariant
 
@@ -2220,6 +2253,7 @@ let activeEditor$1;
 let activeEditorNodes;
 let treatAllNodesAsDirty = false;
 let activeEditorStateReadOnly = false;
+let activeMutationListeners;
 let activeTextDirection = null;
 let activeDirtyElements;
 let activeDirtyLeaves;
@@ -2248,7 +2282,7 @@ function destroyNode(key, parentDOM) {
   }
 
   if (node !== undefined) {
-    setMutatedNode(mutatedNodes, activeEditorNodes, node, 'destroyed');
+    setMutatedNode(mutatedNodes, activeEditorNodes, activeMutationListeners, node, 'destroyed');
   }
 }
 
@@ -2386,7 +2420,7 @@ function createNode(key, parentDOM, insertDOM) {
     Object.freeze(node);
   }
 
-  setMutatedNode(mutatedNodes, activeEditorNodes, node, 'created');
+  setMutatedNode(mutatedNodes, activeEditorNodes, activeMutationListeners, node, 'created');
   return dom;
 }
 
@@ -2593,6 +2627,10 @@ function reconcileNode(key, parentDOM) {
     }
 
     return dom;
+  }
+
+  if (prevNode !== nextNode && isDirty) {
+    setMutatedNode(mutatedNodes, activeEditorNodes, activeMutationListeners, nextNode, 'updated');
   } // Update node. If it returns true, we need to unmount and re-create the node
 
 
@@ -2777,6 +2815,7 @@ function reconcileRoot(prevEditorState, nextEditorState, editor, dirtyType, dirt
   activeEditor$1 = editor;
   activeEditorConfig = editor._config;
   activeEditorNodes = editor._nodes;
+  activeMutationListeners = activeEditor$1._listeners.mutation;
   activeDirtyElements = dirtyElements;
   activeDirtyLeaves = dirtyLeaves;
   activePrevNodeMap = prevEditorState._nodeMap;
@@ -3655,6 +3694,7 @@ function $flushMutations(editor, mutations, observer) {
 
       const currentEditorState = editor._editorState;
       let shouldRevertSelection = false;
+      let possibleTextForFirefoxPaste = '';
 
       for (let i = 0; i < mutations.length; i++) {
         const mutation = mutations[i];
@@ -3685,7 +3725,15 @@ function $flushMutations(editor, mutations, observer) {
             const node = getNodeFromDOMNode(addedDOM);
             const parentDOM = addedDOM.parentNode;
 
-            if (parentDOM != null && node === null) {
+            if (parentDOM != null && node === null && (addedDOM.nodeName !== 'BR' || !isManagedLineBreak(addedDOM, parentDOM, editor))) {
+              if (IS_FIREFOX) {
+                const possibleText = addedDOM.innerText || addedDOM.nodeValue;
+
+                if (possibleText) {
+                  possibleTextForFirefoxPaste += possibleText;
+                }
+              }
+
               parentDOM.removeChild(addedDOM);
             }
           }
@@ -3780,13 +3828,17 @@ function $flushMutations(editor, mutations, observer) {
         observer.takeRecords();
       }
 
-      if (shouldRevertSelection) {
-        const selection = $getSelection() || getLastSelection(editor);
+      const selection = $getSelection() || getLastSelection(editor);
 
-        if (selection !== null) {
+      if (selection !== null) {
+        if (shouldRevertSelection) {
           selection.dirty = true;
           $setSelection(selection);
         }
+
+        if (IS_FIREFOX && isFirefoxClipboardEvents()) {
+          selection.insertRawText(possibleTextForFirefoxPaste);
+        }
       }
     });
   } finally {
@@ -3997,7 +4049,7 @@ class NodeSelection {
     return this.getNodes();
   }
 
-  insertRawText() {// Do nothing?
+  insertRawText(text) {// Do nothing?
   }
 
   insertText() {// Do nothing?
@@ -4037,7 +4089,9 @@ class GridSelection {
   constructor(gridKey, anchorCellKey, focusCellKey) {
     this.gridKey = gridKey;
     this.anchorCellKey = anchorCellKey;
+    this.anchor = $createPoint(anchorCellKey, 0, 'element');
     this.focusCellKey = focusCellKey;
+    this.focus = $createPoint(focusCellKey, 0, 'element');
     this.dirty = false;
   }
 
@@ -4060,18 +4114,90 @@ class GridSelection {
     return new GridSelection(this.gridKey, this.anchorCellKey, this.focusCellKey);
   }
 
+  isCollapsed() {
+    return false;
+  }
+
   extract() {
     return this.getNodes();
   }
 
-  insertRawText() {// Do nothing?
+  insertRawText(text) {// Do nothing?
   }
 
   insertText() {// Do nothing?
   }
 
+  getShape() {
+    const anchorCellNode = $getNodeByKey(this.anchorCellKey);
+
+    if (!anchorCellNode) {
+      throw Error(`getNodes: expected to find AnchorNode`);
+    }
+
+    const anchorCellNodeIndex = anchorCellNode.getIndexWithinParent();
+    const anchorCelRoweIndex = anchorCellNode.getParentOrThrow().getIndexWithinParent();
+    const focusCellNode = $getNodeByKey(this.focusCellKey);
+
+    if (!focusCellNode) {
+      throw Error(`getNodes: expected to find FocusNode`);
+    }
+
+    const focusCellNodeIndex = focusCellNode.getIndexWithinParent();
+    const focusCellRowIndex = focusCellNode.getParentOrThrow().getIndexWithinParent();
+    const startX = Math.min(anchorCellNodeIndex, focusCellNodeIndex);
+    const stopX = Math.max(anchorCellNodeIndex, focusCellNodeIndex);
+    const startY = Math.min(anchorCelRoweIndex, focusCellRowIndex);
+    const stopY = Math.max(anchorCelRoweIndex, focusCellRowIndex);
+    return {
+      fromX: Math.min(startX, stopX),
+      fromY: Math.min(startY, stopY),
+      toX: Math.max(startX, stopX),
+      toY: Math.max(startY, stopY)
+    };
+  }
+
   getNodes() {
-    const nodes = []; // TODO
+    const nodes = [];
+    const {
+      fromX,
+      fromY,
+      toX,
+      toY
+    } = this.getShape();
+    const gridNode = $getNodeByKey(this.gridKey);
+
+    if (!$isGridNode(gridNode)) {
+      {
+        throw Error(`getNodes: expected to find GridNode`);
+      }
+    }
+
+    const gridRowNodes = gridNode.getChildren();
+
+    for (let r = fromY; r <= toY; r++) {
+      const gridRowNode = gridRowNodes[r];
+
+      if (!$isGridRowNode(gridRowNode)) {
+        {
+          throw Error(`getNodes: expected to find GridRowNode`);
+        }
+      }
+
+      const gridCellNodes = gridRowNode.getChildren();
+
+      for (let c = fromX; c <= toX; c++) {
+        const gridCellNode = gridCellNodes[c];
+
+        if (!$isGridCellNode(gridCellNode)) {
+          {
+            throw Error(`getNodes: expected to find GridCellNode`);
+          }
+        }
+
+        nodes.push(gridCellNode);
+      }
+    }
 
     return nodes;
   }
@@ -4838,6 +4964,9 @@ class RangeSelection {
           if ($isElementNode(target) && !$isElementNode(sibling)) {
             target.append(sibling);
             target = sibling;
+          } else if (!$isElementNode(target) && !$isElementNode(sibling)) {
+            target.insertBefore(sibling);
+            target = sibling;
           } else {
             if ($isElementNode(sibling) && !sibling.canInsertAfter(target)) {
               const prevParentClone = prevParent.constructor.clone(prevParent);
@@ -5444,7 +5573,7 @@ function internalCreateSelection(editor) {
   const lastSelection = currentEditorState._selection;
   const domSelection = getDOMSelection();
 
-  if ($isNodeSelection(lastSelection)) {
+  if ($isNodeSelection(lastSelection) || $isGridSelection(lastSelection)) {
     return lastSelection.clone();
   }
 
@@ -6275,7 +6404,7 @@ class RootNode extends ElementNode {
     }
   }
 
-  insertBefore() {
+  insertBefore(nodeToInsert) {
     {
       throw Error(`insertBefore: cannot be called on root nodes`);
     }
@@ -6491,7 +6620,12 @@ function $canRemoveText(anchorNode, focusNode) {
 function onBeforeInput(event, editor) {
   const inputType = event.inputType; // We let the browser do its own thing for composition.
 
-  if (inputType === 'deleteCompositionText' || inputType === 'insertCompositionText') {
+  if (inputType === 'deleteCompositionText' || inputType === 'insertCompositionText' || // If we're pasting in FF, we shouldn't get this event
+  // as the `paste` event should have triggered, unless the
+  // user has dom.event.clipboardevents.enabled disabled in
+  // about:config. In that case, we need to process the
+  // pasted content in the DOM mutation phase.
+  IS_FIREFOX && isFirefoxClipboardEvents()) {
     return;
   }
 
@@ -6685,7 +6819,7 @@ function onInput(event, editor) {
     if (data != null && $isRangeSelection(selection) && $shouldPreventDefaultAndInsertText(selection, data, false)) {
       editor.execCommand('insertText', data);
     } else {
-      $updateSelectedTextFromDOM(editor, false);
+      $updateSelectedTextFromDOM(editor, null);
     } // Also flush any other mutations that might have occured
     // since the change.
 
@@ -6713,7 +6847,7 @@ function onCompositionStart(event, editor) {
   });
 }
 
-function onCompositionEndInternal(event, editor) {
+function onCompositionEnd(event, editor) {
   editor.update(() => {
     const compositionKey = editor._compositionKey;
     $setCompositionKey(null); // Handle termination of composition, as it can sometimes
@@ -6730,24 +6864,10 @@ function onCompositionEndInternal(event, editor) {
       return;
     }
 
-    $updateSelectedTextFromDOM(editor, true);
+    $updateSelectedTextFromDOM(editor, event);
   });
 }
 
-function onCompositionEnd(event, editor) {
-  if (IS_FIREFOX) {
-    // The order of onInput and onCompositionEnd is different
-    // in FF. Given that onInput will fire after onCompositionEnd
-    // in FF, we need to defer the $logic for onCompositionEnd to
-    // ensure that any possible onInput events fire before.
-    setTimeout(() => {
-      onCompositionEndInternal(event, editor);
-    }, 0);
-  } else {
-    onCompositionEndInternal(event, editor);
-  }
-}
-
 function updateAndroidSoftKeyFlagIfAny(event) {
   lastKeyWasMaybeAndroidSoftKey = event.key === 'Unidentified' && event.keyCode === 229;
 }
@@ -8035,7 +8155,7 @@ class BaseLexicalEditor {
     }
   }
 
-  addTransform( // There's no Flow-safe way to preserve the T in Transform<T>, but <T: LexicalNode> in the
+  addNodeTransform( // There's no Flow-safe way to preserve the T in Transform<T>, but <T: LexicalNode> in the
   // declaration below guarantees these are LexicalNodes.
   klass, listener) {
     const type = klass.getType();
@@ -8100,7 +8220,7 @@ class BaseLexicalEditor {
         const style = nextRootElement.style;
         style.userSelect = 'text';
         style.whiteSpace = 'pre-wrap';
-        style.overflowWrap = 'break-word';
+        style.wordBreak = 'break-word';
         nextRootElement.setAttribute('data-lexical-editor', 'true');
         this._dirtyType = FULL_RECONCILE;
         initMutationObserver(getSelf(this));
@@ -8230,7 +8350,7 @@ class BaseLexicalEditor {
  *
  * 
  */
-const VERSION = '0.1.13';
+const VERSION = '0.1.16';
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.

package/Lexical.js.flow

@@ -12,8 +12,7 @@
  */
 
 type MutationListeners = Map<MutationListener, Class<LexicalNode>>;
-export type NodeMutation = 'created' | 'destroyed';
-export type ErrorListener = (error: Error) => void;
+export type NodeMutation = 'created' | 'updated' | 'destroyed';
 type UpdateListener = ({
   tags: Set<string>,
   prevEditorState: EditorState,
@@ -44,7 +43,6 @@ export type ReadOnlyListener = (readOnly: boolean) => void;
 type CommandPayload = any;
 type Listeners = {
   decorator: Set<DecoratorListener>,
-  error: Set<ErrorListener>,
   mutation: MutationListeners,
   textcontent: Set<TextContentListener>,
   root: Set<RootListener>,
@@ -109,7 +107,7 @@ declare export class LexicalEditor {
     klass: Class<LexicalNode>,
     listener: MutationListener,
   ): () => void;
-  addTransform<T: LexicalNode>(
+  addNodeTransform<T: LexicalNode>(
     klass: Class<T>,
     listener: Transform<T>,
   ): () => void;
@@ -157,17 +155,9 @@ export type EditorThemeClasses = {
   image?: EditorThemeClassName,
   list?: {
     ul?: EditorThemeClassName,
-    ul1?: EditorThemeClassName,
-    ul2?: EditorThemeClassName,
-    ul3?: EditorThemeClassName,
-    ul4?: EditorThemeClassName,
-    ul5?: EditorThemeClassName,
+    ulDepth?: Array<EditorThemeClassName>,
     ol?: EditorThemeClassName,
-    ol1?: EditorThemeClassName,
-    ol2?: EditorThemeClassName,
-    ol3?: EditorThemeClassName,
-    ol4?: EditorThemeClassName,
-    ol5?: EditorThemeClassName,
+    olDepth?: Array<EditorThemeClassName>,
     listitem?: EditorThemeClassName,
     nested?: {
       list?: EditorThemeClassName,
@@ -389,33 +379,33 @@ interface BaseSelection {
   insertRawText(text: string): void;
   is(selection: null | RangeSelection | NodeSelection | GridSelection): boolean;
 }
-
+export type GridSelectionShape = {
+  fromX: number,
+  fromY: number,
+  toX: number,
+  toY: number,
+};
 declare export class GridSelection implements BaseSelection {
   gridKey: NodeKey;
   anchorCellKey: NodeKey;
+  anchor: PointType;
   focusCellKey: NodeKey;
+  focus: PointType;
   dirty: boolean;
-
   constructor(
     gridKey: NodeKey,
     anchorCellKey: NodeKey,
     focusCellKey: NodeKey,
   ): void;
-
   is(selection: null | RangeSelection | NodeSelection | GridSelection): boolean;
-
   set(gridKey: NodeKey, anchorCellKey: NodeKey, focusCellKey: NodeKey): void;
-
   clone(): GridSelection;
-
   extract(): Array<LexicalNode>;
-
   insertRawText(): void;
-
   insertText(): void;
-
+  isCollapsed(): false;
+  getShape(): GridSelectionShape;
   getNodes(): Array<LexicalNode>;
-
   getTextContent(): string;
 }