lexical 0.7.9 → 0.8.1

package/Lexical.dev.js

@@ -32,6 +32,7 @@ const DELETE_LINE_COMMAND = createCommand('DELETE_LINE_COMMAND');
 const FORMAT_TEXT_COMMAND = createCommand('FORMAT_TEXT_COMMAND');
 const UNDO_COMMAND = createCommand('UNDO_COMMAND');
 const REDO_COMMAND = createCommand('REDO_COMMAND');
+const KEY_DOWN_COMMAND = createCommand('KEYDOWN_COMMAND');
 const KEY_ARROW_RIGHT_COMMAND = createCommand('KEY_ARROW_RIGHT_COMMAND');
 const MOVE_TO_END = createCommand('MOVE_TO_END');
 const KEY_ARROW_LEFT_COMMAND = createCommand('KEY_ARROW_LEFT_COMMAND');
@@ -90,6 +91,8 @@ const IS_IOS = CAN_USE_DOM && /iPad|iPhone|iPod/.test(navigator.userAgent) && !w
 const IS_CHROME = CAN_USE_DOM && /^(?=.*Chrome).*/i.test(navigator.userAgent);
 // export const canUseTextInputEvent: boolean = CAN_USE_DOM && 'TextEvent' in window && !documentMode;
 
+const IS_APPLE_WEBKIT = CAN_USE_DOM && /AppleWebKit\/[\d.]+/.test(navigator.userAgent) && !IS_CHROME;
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -142,7 +145,7 @@ const ZERO_WIDTH_SPACE = '\u200b';
 
 // For iOS/Safari we use a non breaking space, otherwise the cursor appears
 // overlapping the composed text.
-const COMPOSITION_SUFFIX = IS_SAFARI || IS_IOS ? NON_BREAKING_SPACE : ZERO_WIDTH_SPACE;
+const COMPOSITION_SUFFIX = IS_SAFARI || IS_IOS || IS_APPLE_WEBKIT ? NON_BREAKING_SPACE : ZERO_WIDTH_SPACE;
 const DOUBLE_LINE_BREAK = '\n\n';
 
 // For FF, we need to use a non-breaking space, or it gets composition
@@ -856,7 +859,7 @@ function $updateTextNodeFromDOMContent(textNode, textContent, anchorOffset, focu
     if (compositionEnd || normalizedTextContent !== prevTextContent) {
       if (normalizedTextContent === '') {
         $setCompositionKey(null);
-        if (!IS_SAFARI && !IS_IOS) {
+        if (!IS_SAFARI && !IS_IOS && !IS_APPLE_WEBKIT) {
           // For composition (mainly Android), we have to remove the node on a later update
           const editor = getActiveEditor();
           setTimeout(() => {
@@ -1645,8 +1648,19 @@ function destroyChildren(children, _startIndex, endIndex, dom) {
 function setTextAlign(domStyle, value) {
   domStyle.setProperty('text-align', value);
 }
+const DEFAULT_INDENT_VALUE = '20px';
 function setElementIndent(dom, indent) {
-  dom.style.setProperty('padding-inline-start', indent === 0 ? '' : indent * 20 + 'px');
+  const indentClassName = activeEditorConfig.theme.indent;
+  if (typeof indentClassName === 'string') {
+    const elementHasClassName = dom.classList.contains(indentClassName);
+    if (indent > 0 && !elementHasClassName) {
+      dom.classList.add(indentClassName);
+    } else if (indent < 1 && elementHasClassName) {
+      dom.classList.remove(indentClassName);
+    }
+  }
+  const indentationBaseValue = getComputedStyle(dom).getPropertyValue('--lexical-indent-base-value') || DEFAULT_INDENT_VALUE;
+  dom.style.setProperty('padding-inline-start', indent === 0 ? '' : `calc(${indent} * ${indentationBaseValue})`);
 }
 function setElementFormat(dom, format) {
   const domStyle = dom.style;
@@ -2179,12 +2193,13 @@ if (CAN_USE_BEFORE_INPUT) {
 let lastKeyDownTimeStamp = 0;
 let lastKeyCode = 0;
 let lastBeforeInputInsertTextTimeStamp = 0;
+let unprocessedBeforeInputData = null;
 let rootElementsRegistered = 0;
 let isSelectionChangeFromDOMUpdate = false;
 let isSelectionChangeFromMouseDown = false;
 let isInsertLineBreak = false;
 let isFirefoxEndingComposition = false;
-let collapsedSelectionFormat = [0, 0, 'root', 0];
+let collapsedSelectionFormat = [0, '', 0, 'root', 0];
 
 // This function is used to determine if Lexical should attempt to override
 // the default browser behavior for insertion of text and use its own internal
@@ -2221,7 +2236,7 @@ function $shouldPreventDefaultAndInsertText(selection, text, timeStamp, isBefore
   // If the DOM selection element is not the same as the backing node during beforeinput.
   (isBeforeInput || !CAN_USE_BEFORE_INPUT) && backingAnchorElement !== null && !anchorNode.isComposing() && domAnchorNode !== getDOMTextNode(backingAnchorElement) ||
   // Check if we're changing from bold to italics, or some other format.
-  anchorNode.getFormat() !== selection.format ||
+  anchorNode.getFormat() !== selection.format || anchorNode.getStyle() !== selection.style ||
   // One last set of heuristics to check against.
   $shouldInsertTextAfterOrBeforeTextNode(selection, anchorNode);
 }
@@ -2277,14 +2292,17 @@ function onSelectionChange(domSelection, editor, isActive) {
         // instead of getting the format from the anchor node.
         const windowEvent = getWindow(editor).event;
         const currentTimeStamp = windowEvent ? windowEvent.timeStamp : performance.now();
-        const [lastFormat, lastOffset, lastKey, timeStamp] = collapsedSelectionFormat;
+        const [lastFormat, lastStyle, lastOffset, lastKey, timeStamp] = collapsedSelectionFormat;
         if (currentTimeStamp < timeStamp + 200 && anchor.offset === lastOffset && anchor.key === lastKey) {
           selection.format = lastFormat;
+          selection.style = lastStyle;
         } else {
           if (anchor.type === 'text') {
             selection.format = anchorNode.getFormat();
+            selection.style = anchorNode.getStyle();
           } else if (anchor.type === 'element') {
             selection.format = 0;
+            selection.style = '';
           }
         }
       } else {
@@ -2295,6 +2313,7 @@ function onSelectionChange(domSelection, editor, isActive) {
         for (let i = 0; i < nodesLength; i++) {
           const node = nodes[i];
           if ($isTextNode(node)) {
+            // TODO: what about style?
             hasTextNodes = true;
             combinedFormat &= node.getFormat();
             if (combinedFormat === 0) {
@@ -2399,6 +2418,7 @@ function onBeforeInput(event, editor) {
             const anchorNode = selection.anchor.getNode();
             anchorNode.markDirty();
             selection.format = anchorNode.getFormat();
+            selection.style = anchorNode.getStyle();
           }
         } else {
           event.preventDefault();
@@ -2411,9 +2431,21 @@ function onBeforeInput(event, editor) {
       return;
     }
     const data = event.data;
-    if (!selection.dirty && selection.isCollapsed() && !$isRootNode(selection.anchor.getNode())) {
+
+    // This represents the case when two beforeinput events are triggered at the same time (without a
+    // full event loop ending at input). This happens with MacOS with the default keyboard settings,
+    // a combination of autocorrection + autocapitalization.
+    // Having Lexical run everything in controlled mode would fix the issue without additional code
+    // but this would kill the massive performance win from the most common typing event.
+    // Alternatively, when this happens we can prematurely update our EditorState based on the DOM
+    // content, a job that would usually be the input event's responsibility.
+    if (unprocessedBeforeInputData !== null) {
+      $updateSelectedTextFromDOM(false, editor, unprocessedBeforeInputData);
+    }
+    if ((!selection.dirty || unprocessedBeforeInputData !== null) && selection.isCollapsed() && !$isRootNode(selection.anchor.getNode())) {
       $applyTargetRange(selection, event);
     }
+    unprocessedBeforeInputData = null;
     const anchor = selection.anchor;
     const focus = selection.focus;
     const anchorNode = anchor.getNode();
@@ -2433,6 +2465,8 @@ function onBeforeInput(event, editor) {
       } else if (data != null && $shouldPreventDefaultAndInsertText(selection, data, event.timeStamp, true)) {
         event.preventDefault();
         dispatchCommand(editor, CONTROLLED_TEXT_INSERTION_COMMAND, data);
+      } else {
+        unprocessedBeforeInputData = data;
       }
       lastBeforeInputInsertTextTimeStamp = event.timeStamp;
       return;
@@ -2597,7 +2631,7 @@ function onInput(event, editor) {
       }
 
       // This ensures consistency on Android.
-      if (!IS_SAFARI && !IS_IOS && editor.isComposing()) {
+      if (!IS_SAFARI && !IS_IOS && !IS_APPLE_WEBKIT && editor.isComposing()) {
         lastKeyDownTimeStamp = 0;
         $setCompositionKey(null);
       }
@@ -2616,12 +2650,14 @@ function onInput(event, editor) {
     // since the change.
     $flushMutations();
   });
+  unprocessedBeforeInputData = null;
 }
 function onCompositionStart(event, editor) {
   updateEditor(editor, () => {
     const selection = $getSelection();
     if ($isRangeSelection(selection) && !editor.isComposing()) {
       const anchor = selection.anchor;
+      const node = selection.anchor.getNode();
       $setCompositionKey(anchor.key);
       if (
       // If it has been 30ms since the last keydown, then we should
@@ -2630,7 +2666,7 @@ function onCompositionStart(event, editor) {
       event.timeStamp < lastKeyDownTimeStamp + ANDROID_COMPOSITION_LATENCY ||
       // FF has issues around composing multibyte characters, so we also
       // need to invoke the empty space heuristic below.
-      anchor.type === 'element' || !selection.isCollapsed() || selection.anchor.getNode().getFormat() !== selection.format) {
+      anchor.type === 'element' || !selection.isCollapsed() || node.getFormat() !== selection.format || node.getStyle() !== selection.style) {
         // We insert a zero width character, ready for the composition
         // to get inserted into the new node we create. If
         // we don't do this, Safari will fail on us because
@@ -2700,6 +2736,9 @@ function onKeyDown(event, editor) {
     metaKey,
     altKey
   } = event;
+  if (dispatchCommand(editor, KEY_DOWN_COMMAND, event)) {
+    return;
+  }
   if (isMoveForward(keyCode, ctrlKey, altKey, metaKey)) {
     dispatchCommand(editor, KEY_ARROW_RIGHT_COMMAND, event);
   } else if (isMoveToEnd(keyCode, ctrlKey, shiftKey, altKey, metaKey)) {
@@ -2963,8 +3002,8 @@ function cleanActiveNestedEditorsMap(editor) {
 function markSelectionChangeFromDOMUpdate() {
   isSelectionChangeFromDOMUpdate = true;
 }
-function markCollapsedSelectionFormat(format, offset, key, timeStamp) {
-  collapsedSelectionFormat = [format, offset, key, timeStamp];
+function markCollapsedSelectionFormat(format, style, offset, key, timeStamp) {
+  collapsedSelectionFormat = [format, style, offset, key, timeStamp];
 }
 
 /**
@@ -3071,12 +3110,13 @@ function $moveSelectionPointToEnd(point, node) {
     selectPointOnNode(point, node);
   }
 }
-function $transferStartingElementPointToTextPoint(start, end, format) {
+function $transferStartingElementPointToTextPoint(start, end, format, style) {
   const element = start.getNode();
   const placementNode = element.getChildAtIndex(start.offset);
   const textNode = $createTextNode();
   const target = $isRootNode(element) ? $createParagraphNode().append(textNode) : textNode;
   textNode.setFormat(format);
+  textNode.setStyle(style);
   if (placementNode === null) {
     element.append(target);
   } else {
@@ -3325,11 +3365,12 @@ function DEPRECATED_$isGridSelection(x) {
   return x instanceof GridSelection;
 }
 class RangeSelection {
-  constructor(anchor, focus, format) {
+  constructor(anchor, focus, format, style) {
     this.anchor = anchor;
     this.focus = focus;
     this.dirty = false;
     this.format = format;
+    this.style = style;
     this._cachedNodes = null;
     anchor._selection = this;
     focus._selection = this;
@@ -3338,7 +3379,7 @@ class RangeSelection {
     if (!$isRangeSelection(selection)) {
       return false;
     }
-    return this.anchor.is(selection.anchor) && this.focus.is(selection.focus) && this.format === selection.format;
+    return this.anchor.is(selection.anchor) && this.focus.is(selection.focus) && this.format === selection.format && this.style === selection.style;
   }
   isBackward() {
     return this.focus.isBefore(this.anchor);
@@ -3452,13 +3493,17 @@ class RangeSelection {
   clone() {
     const anchor = this.anchor;
     const focus = this.focus;
-    const selection = new RangeSelection($createPoint(anchor.key, anchor.offset, anchor.type), $createPoint(focus.key, focus.offset, focus.type), this.format);
+    const selection = new RangeSelection($createPoint(anchor.key, anchor.offset, anchor.type), $createPoint(focus.key, focus.offset, focus.type), this.format, this.style);
     return selection;
   }
   toggleFormat(format) {
     this.format = toggleTextFormatType(this.format, format, null);
     this.dirty = true;
   }
+  setStyle(style) {
+    this.style = style;
+    this.dirty = true;
+  }
   hasFormat(type) {
     const formatFlag = TEXT_TYPE_TO_FORMAT[type];
     return (this.format & formatFlag) !== 0;
@@ -3487,10 +3532,11 @@ class RangeSelection {
     const focus = this.focus;
     const isBefore = this.isCollapsed() || anchor.isBefore(focus);
     const format = this.format;
+    const style = this.style;
     if (isBefore && anchor.type === 'element') {
-      $transferStartingElementPointToTextPoint(anchor, focus, format);
+      $transferStartingElementPointToTextPoint(anchor, focus, format, style);
     } else if (!isBefore && focus.type === 'element') {
-      $transferStartingElementPointToTextPoint(focus, anchor, format);
+      $transferStartingElementPointToTextPoint(focus, anchor, format, style);
     }
     const selectedNodes = this.getNodes();
     const selectedNodesLength = selectedNodes.length;
@@ -3569,12 +3615,15 @@ class RangeSelection {
         return;
       }
       const firstNodeFormat = firstNode.getFormat();
-      if (startOffset === endOffset && firstNodeFormat !== format) {
+      const firstNodeStyle = firstNode.getStyle();
+      if (startOffset === endOffset && (firstNodeFormat !== format || firstNodeStyle !== style)) {
         if (firstNode.getTextContent() === '') {
           firstNode.setFormat(format);
+          firstNode.setStyle(style);
         } else {
           const textNode = $createTextNode(text);
           textNode.setFormat(format);
+          textNode.setStyle(style);
           textNode.select();
           if (startOffset === 0) {
             firstNode.insertBefore(textNode, false);
@@ -3601,6 +3650,7 @@ class RangeSelection {
           this.anchor.offset -= text.length;
         } else {
           this.format = firstNodeFormat;
+          this.style = firstNodeStyle;
         }
       }
     } else {
@@ -4787,7 +4837,7 @@ function $isBlockElementNode(node) {
 
 function internalMakeRangeSelection(anchorKey, anchorOffset, focusKey, focusOffset, anchorType, focusType) {
   const editorState = getActiveEditorState();
-  const selection = new RangeSelection($createPoint(anchorKey, anchorOffset, anchorType), $createPoint(focusKey, focusOffset, focusType), 0);
+  const selection = new RangeSelection($createPoint(anchorKey, anchorOffset, anchorType), $createPoint(focusKey, focusOffset, focusType), 0, '');
   selection.dirty = true;
   editorState._selection = selection;
   return selection;
@@ -4795,7 +4845,7 @@ function internalMakeRangeSelection(anchorKey, anchorOffset, focusKey, focusOffs
 function $createRangeSelection() {
   const anchor = $createPoint('root', 0, 'element');
   const focus = $createPoint('root', 0, 'element');
-  return new RangeSelection(anchor, focus, 0);
+  return new RangeSelection(anchor, focus, 0, '');
 }
 function $createNodeSelection() {
   return new NodeSelection(new Set());
@@ -4859,7 +4909,7 @@ function internalCreateRangeSelection(lastSelection, domSelection, editor) {
     return null;
   }
   const [resolvedAnchorPoint, resolvedFocusPoint] = resolvedSelectionPoints;
-  return new RangeSelection(resolvedAnchorPoint, resolvedFocusPoint, !$isRangeSelection(lastSelection) ? 0 : lastSelection.format);
+  return new RangeSelection(resolvedAnchorPoint, resolvedFocusPoint, !$isRangeSelection(lastSelection) ? 0 : lastSelection.format, !$isRangeSelection(lastSelection) ? '' : lastSelection.style);
 }
 function $getSelection() {
   const editorState = getActiveEditorState();
@@ -5055,13 +5105,17 @@ function updateDOMSelection(prevSelection, nextSelection, editor, domSelection,
   const nextAnchorOffset = anchor.offset;
   const nextFocusOffset = focus.offset;
   const nextFormat = nextSelection.format;
+  const nextStyle = nextSelection.style;
   const isCollapsed = nextSelection.isCollapsed();
   let nextAnchorNode = anchorDOM;
   let nextFocusNode = focusDOM;
-  let anchorFormatChanged = false;
+  let anchorFormatOrStyleChanged = false;
   if (anchor.type === 'text') {
     nextAnchorNode = getDOMTextNode(anchorDOM);
-    anchorFormatChanged = anchor.getNode().getFormat() !== nextFormat;
+    const anchorNode = anchor.getNode();
+    anchorFormatOrStyleChanged = anchorNode.getFormat() !== nextFormat || anchorNode.getStyle() !== nextStyle;
+  } else if ($isRangeSelection(prevSelection) && prevSelection.anchor.type === 'text') {
+    anchorFormatOrStyleChanged = true;
   }
   if (focus.type === 'text') {
     nextFocusNode = getDOMTextNode(focusDOM);
@@ -5072,8 +5126,8 @@ function updateDOMSelection(prevSelection, nextSelection, editor, domSelection,
   if (nextAnchorNode === null || nextFocusNode === null) {
     return;
   }
-  if (isCollapsed && (prevSelection === null || anchorFormatChanged || $isRangeSelection(prevSelection) && prevSelection.format !== nextFormat)) {
-    markCollapsedSelectionFormat(nextFormat, nextAnchorOffset, anchorKey, performance.now());
+  if (isCollapsed && (prevSelection === null || anchorFormatOrStyleChanged || $isRangeSelection(prevSelection) && (prevSelection.format !== nextFormat || prevSelection.style !== nextStyle))) {
+    markCollapsedSelectionFormat(nextFormat, nextStyle, nextAnchorOffset, anchorKey, performance.now());
   }
 
   // Diff against the native DOM selection to ensure we don't do
@@ -8172,10 +8226,12 @@ function createEditor(editorConfig) {
     for (let i = 0; i < nodes.length; i++) {
       let klass = nodes[i];
       let replacementClass = null;
+      let replacementKlass = null;
       if (typeof klass !== 'function') {
         const options = klass;
         klass = options.replace;
         replacementClass = options.with;
+        replacementKlass = options.withKlass ? options.withKlass : null;
       }
       // Ensure custom nodes implement required methods.
       {
@@ -8217,6 +8273,7 @@ function createEditor(editorConfig) {
       registeredNodes.set(type, {
         klass,
         replace: replacementClass,
+        replaceWithKlass: replacementKlass,
         transforms: new Set()
       });
     }
@@ -8364,7 +8421,7 @@ class LexicalEditor {
       mutations.delete(listener);
     };
   }
-  registerNodeTransform(klass, listener) {
+  registerNodeTransformToKlass(klass, listener) {
     const type = klass.getType();
     const registeredNode = this._nodes.get(type);
     if (registeredNode === undefined) {
@@ -8374,9 +8431,19 @@ class LexicalEditor {
     }
     const transforms = registeredNode.transforms;
     transforms.add(listener);
-    markAllNodesAsDirty(this, type);
+    return registeredNode;
+  }
+  registerNodeTransform(klass, listener) {
+    const registeredNode = this.registerNodeTransformToKlass(klass, listener);
+    const registeredNodes = [registeredNode];
+    const replaceWithKlass = registeredNode.replaceWithKlass;
+    if (replaceWithKlass != null) {
+      const registeredReplaceWithNode = this.registerNodeTransformToKlass(replaceWithKlass, listener);
+      registeredNodes.push(registeredReplaceWithNode);
+    }
+    markAllNodesAsDirty(this, klass.getType());
     return () => {
-      transforms.delete(listener);
+      registeredNodes.forEach(node => node.transforms.delete(listener));
     };
   }
   hasNodes(nodes) {
@@ -8668,6 +8735,7 @@ exports.KEY_ARROW_RIGHT_COMMAND = KEY_ARROW_RIGHT_COMMAND;
 exports.KEY_ARROW_UP_COMMAND = KEY_ARROW_UP_COMMAND;
 exports.KEY_BACKSPACE_COMMAND = KEY_BACKSPACE_COMMAND;
 exports.KEY_DELETE_COMMAND = KEY_DELETE_COMMAND;
+exports.KEY_DOWN_COMMAND = KEY_DOWN_COMMAND;
 exports.KEY_ENTER_COMMAND = KEY_ENTER_COMMAND;
 exports.KEY_ESCAPE_COMMAND = KEY_ESCAPE_COMMAND;
 exports.KEY_MODIFIER_COMMAND = KEY_MODIFIER_COMMAND;