@lexical/react 0.1.9 → 0.1.12

package/LexicalRichTextPlugin.dev.js

@@ -10,10 +10,7 @@ var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
 var React = require('react');
 var lexical = require('lexical');
 var reactDom = require('react-dom');
-var list = require('@lexical/list');
-var CodeNode = require('lexical/CodeNode');
-var HeadingNode = require('lexical/HeadingNode');
-var LinkNode = require('lexical/LinkNode');
+var clipboard = require('@lexical/clipboard');
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -173,182 +170,6 @@ function useDecorators(editor) {
  * 
  */
 
-function $cloneWithProperties(node) {
-  const latest = node.getLatest();
-  const constructor = latest.constructor;
-  const clone = constructor.clone(latest);
-  clone.__parent = latest.__parent;
-
-  if (lexical.$isElementNode(latest) && lexical.$isElementNode(clone)) {
-    clone.__children = Array.from(latest.__children);
-    clone.__format = latest.__format;
-    clone.__indent = latest.__indent;
-    clone.__dir = latest.__dir;
-  } else if (lexical.$isTextNode(latest) && lexical.$isTextNode(clone)) {
-    clone.__format = latest.__format;
-    clone.__style = latest.__style;
-    clone.__mode = latest.__mode;
-    clone.__detail = latest.__detail;
-  } else if (lexical.$isDecoratorNode(latest) && lexical.$isDecoratorNode(clone)) {
-    clone.__state = latest.__state;
-  } // $FlowFixMe
-
-
-  return clone;
-}
-
-function $getIndexFromPossibleClone(node, parent, nodeMap) {
-  const parentClone = nodeMap.get(parent.getKey());
-
-  if (lexical.$isElementNode(parentClone)) {
-    return parentClone.__children.indexOf(node.getKey());
-  }
-
-  return node.getIndexWithinParent();
-}
-
-function $getParentAvoidingExcludedElements(node) {
-  let parent = node.getParent();
-
-  while (parent !== null && parent.excludeFromCopy()) {
-    parent = parent.getParent();
-  }
-
-  return parent;
-}
-
-function $copyLeafNodeBranchToRoot(leaf, startingOffset, isLeftSide, range, nodeMap) {
-  let node = leaf;
-  let offset = startingOffset;
-
-  while (node !== null) {
-    const parent = $getParentAvoidingExcludedElements(node);
-
-    if (parent === null) {
-      break;
-    }
-
-    if (!lexical.$isElementNode(node) || !node.excludeFromCopy()) {
-      const key = node.getKey();
-      let clone = nodeMap.get(key);
-      const needsClone = clone === undefined;
-
-      if (needsClone) {
-        clone = $cloneWithProperties(node);
-        nodeMap.set(key, clone);
-      }
-
-      if (lexical.$isTextNode(clone) && !clone.isSegmented() && !clone.isToken()) {
-        clone.__text = clone.__text.slice(isLeftSide ? offset : 0, isLeftSide ? undefined : offset);
-      } else if (lexical.$isElementNode(clone)) {
-        clone.__children = clone.__children.slice(isLeftSide ? offset : 0, isLeftSide ? undefined : offset + 1);
-      }
-
-      if (lexical.$isRootNode(parent)) {
-        if (needsClone) {
-          // We only want to collect a range of top level nodes.
-          // So if the parent is the root, we know this is a top level.
-          range.push(key);
-        }
-
-        break;
-      }
-    }
-
-    offset = $getIndexFromPossibleClone(node, parent, nodeMap);
-    node = parent;
-  }
-}
-
-function $cloneContents(selection) {
-  const anchor = selection.anchor;
-  const focus = selection.focus;
-  const anchorOffset = anchor.getCharacterOffset();
-  const focusOffset = focus.getCharacterOffset();
-  const anchorNode = anchor.getNode();
-  const focusNode = focus.getNode();
-  const anchorNodeParent = anchorNode.getParentOrThrow(); // Handle a single text node extraction
-
-  if (anchorNode === focusNode && lexical.$isTextNode(anchorNode) && (anchorNodeParent.canBeEmpty() || anchorNodeParent.getChildrenSize() > 1)) {
-    const clonedFirstNode = $cloneWithProperties(anchorNode);
-    const isBefore = focusOffset > anchorOffset;
-    const startOffset = isBefore ? anchorOffset : focusOffset;
-    const endOffset = isBefore ? focusOffset : anchorOffset;
-    clonedFirstNode.__text = clonedFirstNode.__text.slice(startOffset, endOffset);
-    const key = clonedFirstNode.getKey();
-    return {
-      nodeMap: [[key, clonedFirstNode]],
-      range: [key]
-    };
-  }
-
-  const nodes = selection.getNodes();
-
-  if (nodes.length === 0) {
-    return {
-      nodeMap: [],
-      range: []
-    };
-  } // Check if we can use the parent of the nodes, if the
-  // parent can't be empty, then it's important that we
-  // also copy that element node along with its children.
-
-
-  let nodesLength = nodes.length;
-  const firstNode = nodes[0];
-  const firstNodeParent = firstNode.getParent();
-
-  if (firstNodeParent !== null && (!firstNodeParent.canBeEmpty() || lexical.$isRootNode(firstNodeParent))) {
-    const parentChildren = firstNodeParent.__children;
-    const parentChildrenLength = parentChildren.length;
-
-    if (parentChildrenLength === nodesLength) {
-      let areTheSame = true;
-
-      for (let i = 0; i < parentChildren.length; i++) {
-        if (parentChildren[i] !== nodes[i].__key) {
-          areTheSame = false;
-          break;
-        }
-      }
-
-      if (areTheSame) {
-        nodesLength++;
-        nodes.push(firstNodeParent);
-      }
-    }
-  }
-
-  const lastNode = nodes[nodesLength - 1];
-  const isBefore = anchor.isBefore(focus);
-  const nodeMap = new Map();
-  const range = []; // Do first node to root
-
-  $copyLeafNodeBranchToRoot(firstNode, isBefore ? anchorOffset : focusOffset, true, range, nodeMap); // Copy all nodes between
-
-  for (let i = 0; i < nodesLength; i++) {
-    const node = nodes[i];
-    const key = node.getKey();
-
-    if (!nodeMap.has(key) && (!lexical.$isElementNode(node) || !node.excludeFromCopy())) {
-      const clone = $cloneWithProperties(node);
-
-      if (lexical.$isRootNode(node.getParent())) {
-        range.push(node.getKey());
-      }
-
-      nodeMap.set(key, clone);
-    }
-  } // Do last node to root
-
-
-  $copyLeafNodeBranchToRoot(lastNode, isBefore ? focusOffset : anchorOffset, false, range, nodeMap);
-  return {
-    nodeMap: Array.from(nodeMap.entries()),
-    range
-  };
-}
-
 function $moveCaretSelection(selection, isHoldingShift, isBackward, granularity) {
   selection.modify(isHoldingShift ? 'extend' : 'move', isBackward, granularity);
 }
@@ -361,6 +182,10 @@ function $moveCharacter(selection, isHoldingShift, isBackward) {
   const isRTL = $isParentElementRTL(selection);
   $moveCaretSelection(selection, isHoldingShift, isBackward ? !isRTL : isRTL, 'character');
 }
+function $shouldOverrideDefaultCharacterSelection(selection, isBackward) {
+  const possibleNode = lexical.$getDecoratorNode(selection.focus, isBackward);
+  return lexical.$isDecoratorNode(possibleNode) && !possibleNode.isIsolated();
+}
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -370,45 +195,50 @@ function $moveCharacter(selection, isHoldingShift, isBackward) {
  *
  * 
  */
-function resolveElement(element, isBackward, focusOffset) {
-  const parent = element.getParent();
-  let offset = focusOffset;
-  let block = element;
-
-  if (parent !== null) {
-    if (isBackward && focusOffset === 0) {
-      offset = block.getIndexWithinParent();
-      block = parent;
-    } else if (!isBackward && focusOffset === block.getChildrenSize()) {
-      offset = block.getIndexWithinParent() + 1;
-      block = parent;
-    }
-  }
+function onCutForRichText(event, editor) {
+  onCopyForRichText(event, editor);
+  editor.update(() => {
+    const selection = lexical.$getSelection();
 
-  return block.getChildAtIndex(isBackward ? offset - 1 : offset);
+    if (lexical.$isRangeSelection(selection)) {
+      selection.removeText();
+    }
+  });
 }
+function onCopyForRichText(event, editor) {
+  event.preventDefault();
+  editor.update(() => {
+    const clipboardData = event.clipboardData;
+    const selection = lexical.$getSelection();
 
-function getPossibleDecoratorNode(focus, isBackward) {
-  const focusOffset = focus.offset;
+    if (selection !== null) {
+      if (clipboardData != null) {
+        const htmlString = clipboard.getHtmlContent(editor);
+        const lexicalString = clipboard.$getLexicalContent(editor);
 
-  if (focus.type === 'element') {
-    const block = focus.getNode();
-    return resolveElement(block, isBackward, focusOffset);
-  } else {
-    const focusNode = focus.getNode();
+        if (htmlString !== null) {
+          clipboardData.setData('text/html', htmlString);
+        }
 
-    if (isBackward && focusOffset === 0 || !isBackward && focusOffset === focusNode.getTextContentSize()) {
-      const possibleNode = isBackward ? focusNode.getPreviousSibling() : focusNode.getNextSibling();
+        if (lexicalString !== null) {
+          clipboardData.setData('application/x-lexical-editor', lexicalString);
+        }
 
-      if (possibleNode === null) {
-        return resolveElement(focusNode.getParentOrThrow(), isBackward, focusNode.getIndexWithinParent() + (isBackward ? 0 : 1));
+        clipboardData.setData('text/plain', selection.getTextContent());
       }
-
-      return possibleNode;
     }
-  }
+  });
+}
+function onPasteForRichText(event, editor) {
+  event.preventDefault();
+  editor.update(() => {
+    const selection = lexical.$getSelection();
+    const clipboardData = event.clipboardData;
 
-  return null;
+    if (clipboardData != null && lexical.$isRangeSelection(selection)) {
+      clipboard.$insertDataTransferForRichText(clipboardData, selection, editor);
+    }
+  });
 }
 
 /**
@@ -419,381 +249,52 @@ function getPossibleDecoratorNode(focus, isBackward) {
  *
  * 
  */
-
-const isCodeElement = div => {
-  return div.style.fontFamily.match('monospace') !== null;
+// Convoluted logic to make this work with Flow. Order matters.
+const options = {
+  tag: 'history-merge'
 };
-
-const DOM_NODE_NAME_TO_LEXICAL_NODE = {
-  '#text': domNode => ({
-    node: lexical.$createTextNode(domNode.textContent)
-  }),
-  a: domNode => {
-    let node;
-
-    if (domNode instanceof HTMLAnchorElement) {
-      node = LinkNode.$createLinkNode(domNode.href);
-    } else {
-      node = lexical.$createTextNode(domNode.textContent);
-    }
-
-    return {
-      node
-    };
-  },
-  b: domNode => {
-    // $FlowFixMe[incompatible-type] domNode is a <b> since we matched it by nodeName
-    const b = domNode; // Google Docs wraps all copied HTML in a <b> with font-weight normal
-
-    const hasNormalFontWeight = b.style.fontWeight === 'normal';
-    return {
-      forChild: lexicalNode => {
-        if (lexical.$isTextNode(lexicalNode) && !hasNormalFontWeight) {
-          lexicalNode.toggleFormat('bold');
-        }
-      },
-      node: null
-    };
-  },
-  br: () => ({
-    node: lexical.$createLineBreakNode()
-  }),
-  div: domNode => {
-    // $FlowFixMe[incompatible-type] domNode is a <div> since we matched it by nodeName
-    const div = domNode;
-    return {
-      after: childLexicalNodes => {
-        const domParent = domNode.parentNode;
-
-        if (domParent != null && domNode !== domParent.lastChild) {
-          childLexicalNodes.push(lexical.$createLineBreakNode());
-        }
-
-        return childLexicalNodes;
-      },
-      node: isCodeElement(div) ? CodeNode.$createCodeNode() : null
-    };
-  },
-  em: domNode => {
-    return {
-      forChild: lexicalNode => {
-        if (lexical.$isTextNode(lexicalNode)) {
-          lexicalNode.toggleFormat('italic');
-        }
-      },
-      node: null
-    };
-  },
-  h1: () => ({
-    node: HeadingNode.$createHeadingNode('h1')
-  }),
-  h2: () => ({
-    node: HeadingNode.$createHeadingNode('h2')
-  }),
-  h3: () => ({
-    node: HeadingNode.$createHeadingNode('h3')
-  }),
-  h4: () => ({
-    node: HeadingNode.$createHeadingNode('h4')
-  }),
-  h5: () => ({
-    node: HeadingNode.$createHeadingNode('h5')
-  }),
-  i: domNode => {
-    return {
-      forChild: lexicalNode => {
-        if (lexical.$isTextNode(lexicalNode)) {
-          lexicalNode.toggleFormat('italic');
-        }
-      },
-      node: null
-    };
-  },
-  li: () => ({
-    node: list.$createListItemNode()
-  }),
-  ol: () => ({
-    node: list.$createListNode('ol')
-  }),
-  p: () => ({
-    node: lexical.$createParagraphNode()
-  }),
-  pre: domNode => ({
-    node: CodeNode.$createCodeNode()
-  }),
-  span: domNode => {
-    // $FlowFixMe[incompatible-type] domNode is a <span> since we matched it by nodeName
-    const span = domNode; // Google Docs uses span tags + font-weight for bold text
-
-    const hasBoldFontWeight = span.style.fontWeight === '700';
-    return {
-      forChild: lexicalNode => {
-        if (lexical.$isTextNode(lexicalNode) && hasBoldFontWeight) {
-          lexicalNode.toggleFormat('bold');
-        }
-      },
-      node: null
-    };
-  },
-  strong: domNode => {
-    return {
-      forChild: lexicalNode => {
-        if (lexical.$isTextNode(lexicalNode)) {
-          lexicalNode.toggleFormat('bold');
-        }
-      },
-      node: null
-    };
-  },
-  table: domNode => {
-    // $FlowFixMe[incompatible-type] domNode is a <table> since we matched it by nodeName
-    const table = domNode;
-    const isGitHubCodeTable = table.classList.contains('js-file-line-container');
-    return {
-      node: isGitHubCodeTable ? CodeNode.$createCodeNode() : null
-    };
-  },
-  td: domNode => {
-    // $FlowFixMe[incompatible-type] domNode is a <table> since we matched it by nodeName
-    const cell = domNode;
-    const isGitHubCodeCell = cell.classList.contains('js-file-line');
-    return {
-      after: childLexicalNodes => {
-        if (isGitHubCodeCell && cell.parentNode && cell.parentNode.nextSibling) {
-          // Append newline between code lines
-          childLexicalNodes.push(lexical.$createLineBreakNode());
-        }
-
-        return childLexicalNodes;
-      },
-      node: null
-    };
-  },
-  u: domNode => {
-    return {
-      forChild: lexicalNode => {
-        if (lexical.$isTextNode(lexicalNode)) {
-          lexicalNode.toggleFormat('underline');
+const setEditorOptions = options;
+const updateOptions = options;
+function initializeEditor(editor, initialEditorState) {
+  if (initialEditorState === null) {
+    return;
+  } else if (initialEditorState === undefined) {
+    editor.update(() => {
+      const root = lexical.$getRoot();
+      const firstChild = root.getFirstChild();
+
+      if (firstChild === null) {
+        const paragraph = lexical.$createParagraphNode();
+        root.append(paragraph);
+        const activeElement = document.activeElement;
+
+        if (lexical.$getSelection() !== null || activeElement !== null && activeElement === editor.getRootElement()) {
+          paragraph.select();
         }
-      },
-      node: null
-    };
-  },
-  ul: () => ({
-    node: list.$createListNode('ul')
-  })
-};
-
-function $generateNodes(nodeRange) {
-  const {
-    range,
-    nodeMap
-  } = nodeRange;
-  const parsedNodeMap = new Map(nodeMap);
-  const nodes = [];
-
-  for (let i = 0; i < range.length; i++) {
-    const key = range[i];
-    const parsedNode = parsedNodeMap.get(key);
-
-    if (parsedNode !== undefined) {
-      const node = lexical.$createNodeFromParse(parsedNode, parsedNodeMap);
-      nodes.push(node);
-    }
-  }
-
-  return nodes;
-}
-
-function $createNodesFromDOM(node, conversionMap, editor, forChildMap = new Map()) {
-  let lexicalNodes = [];
-  let currentLexicalNode = null;
-  const nodeName = node.nodeName.toLowerCase();
-  const customHtmlTransforms = editor._config.htmlTransforms || {};
-  const transformFunction = customHtmlTransforms[nodeName] || conversionMap[nodeName];
-  const transformOutput = transformFunction ? transformFunction(node) : null;
-  let postTransform = null;
-
-  if (transformOutput !== null) {
-    postTransform = transformOutput.after;
-    currentLexicalNode = transformOutput.node;
-
-    if (currentLexicalNode !== null) {
-      lexicalNodes.push(currentLexicalNode);
-      const forChildFunctions = Array.from(forChildMap.values());
-
-      for (let i = 0; i < forChildFunctions.length; i++) {
-        forChildFunctions[i](currentLexicalNode);
       }
-    }
-
-    if (transformOutput.forChild != null) {
-      forChildMap.set(nodeName, transformOutput.forChild);
-    }
-  } // If the DOM node doesn't have a transformer, we don't know what
-  // to do with it but we still need to process any childNodes.
-
-
-  const children = node.childNodes;
-  let childLexicalNodes = [];
-
-  for (let i = 0; i < children.length; i++) {
-    childLexicalNodes.push(...$createNodesFromDOM(children[i], conversionMap, editor, forChildMap));
-  }
-
-  if (postTransform != null) {
-    childLexicalNodes = postTransform(childLexicalNodes);
-  }
-
-  if (currentLexicalNode == null) {
-    // If it hasn't been converted to a LexicalNode, we hoist its children
-    // up to the same level as it.
-    lexicalNodes = lexicalNodes.concat(childLexicalNodes);
-  } else {
-    if (lexical.$isElementNode(currentLexicalNode)) {
-      // If the current node is a ElementNode after conversion,
-      // we can append all the children to it.
-      currentLexicalNode.append(...childLexicalNodes);
-    }
-  }
-
-  return lexicalNodes;
-}
-
-function $generateNodesFromDOM(dom, conversionMap, editor) {
-  let lexicalNodes = [];
-  const elements = dom.body ? Array.from(dom.body.childNodes) : [];
-  const elementsLength = elements.length;
-
-  for (let i = 0; i < elementsLength; i++) {
-    const lexicalNode = $createNodesFromDOM(elements[i], conversionMap, editor);
-
-    if (lexicalNode !== null) {
-      lexicalNodes = lexicalNodes.concat(lexicalNode);
-    }
-  }
-
-  return lexicalNodes;
-}
-
-function $insertDataTransferForRichText(dataTransfer, selection, editor) {
-  const lexicalNodesString = dataTransfer.getData('application/x-lexical-editor');
-
-  if (lexicalNodesString) {
-    const namespace = editor._config.namespace;
-
-    try {
-      const lexicalClipboardData = JSON.parse(lexicalNodesString);
-
-      if (lexicalClipboardData.namespace === namespace) {
-        const nodeRange = lexicalClipboardData.state;
-        const nodes = $generateNodes(nodeRange);
-        selection.insertNodes(nodes);
-        return;
-      }
-    } catch (e) {// Malformed, missing nodes..
-    }
-  }
-
-  const textHtmlMimeType = 'text/html';
-  const htmlString = dataTransfer.getData(textHtmlMimeType);
-
-  if (htmlString) {
-    const parser = new DOMParser();
-    const dom = parser.parseFromString(htmlString, textHtmlMimeType);
-    const nodes = $generateNodesFromDOM(dom, DOM_NODE_NAME_TO_LEXICAL_NODE, editor); // Wrap text and inline nodes in paragraph nodes so we have all blocks at the top-level
-
-    const topLevelBlocks = [];
-    let currentBlock = null;
-
-    for (let i = 0; i < nodes.length; i++) {
-      const node = nodes[i];
-
-      if (!lexical.$isElementNode(node) || node.isInline()) {
-        if (currentBlock === null) {
-          currentBlock = lexical.$createParagraphNode();
-          topLevelBlocks.push(currentBlock);
-        }
-
-        if (currentBlock !== null) {
-          currentBlock.append(node);
+    }, updateOptions);
+  } else if (initialEditorState !== null) {
+    switch (typeof initialEditorState) {
+      case 'string':
+        {
+          const parsedEditorState = editor.parseEditorState(initialEditorState);
+          editor.setEditorState(parsedEditorState, setEditorOptions);
+          break;
         }
-      } else {
-        topLevelBlocks.push(node);
-        currentBlock = null;
-      }
-    }
-
-    selection.insertNodes(topLevelBlocks);
-    return;
-  }
-
-  $insertDataTransferForPlainText(dataTransfer, selection);
-}
-function $insertDataTransferForPlainText(dataTransfer, selection) {
-  const text = dataTransfer.getData('text/plain');
-
-  if (text != null) {
-    selection.insertRawText(text);
-  }
-}
-function $shouldOverrideDefaultCharacterSelection(selection, isBackward) {
-  const possibleNode = getPossibleDecoratorNode(selection.focus, isBackward);
-  return lexical.$isDecoratorNode(possibleNode) && !possibleNode.isIsolated();
-}
-function onPasteForRichText(event, editor) {
-  event.preventDefault();
-  editor.update(() => {
-    const selection = lexical.$getSelection();
-    const clipboardData = event.clipboardData;
-
-    if (clipboardData != null && selection !== null) {
-      $insertDataTransferForRichText(clipboardData, selection, editor);
-    }
-  });
-}
-function onCutForRichText(event, editor) {
-  onCopyForRichText(event, editor);
-  editor.update(() => {
-    const selection = lexical.$getSelection();
-
-    if (selection !== null) {
-      selection.removeText();
-    }
-  });
-}
-function onCopyForRichText(event, editor) {
-  event.preventDefault();
-  editor.update(() => {
-    const clipboardData = event.clipboardData;
-    const selection = lexical.$getSelection();
-
-    if (selection !== null) {
-      if (clipboardData != null) {
-        const domSelection = window.getSelection(); // If we haven't selected a range, then don't copy anything
 
-        if (domSelection.isCollapsed) {
-          return;
+      case 'object':
+        {
+          editor.setEditorState(initialEditorState, setEditorOptions);
+          break;
         }
 
-        const range = domSelection.getRangeAt(0);
-
-        if (range) {
-          const container = document.createElement('div');
-          const frag = range.cloneContents();
-          container.appendChild(frag);
-          clipboardData.setData('text/html', container.innerHTML);
+      case 'function':
+        {
+          editor.update(initialEditorState, updateOptions);
+          break;
         }
-
-        clipboardData.setData('text/plain', selection.getTextContent());
-        const namespace = editor._config.namespace;
-        clipboardData.setData('application/x-lexical-editor', JSON.stringify({
-          namespace,
-          state: $cloneContents(selection)
-        }));
-      }
     }
-  });
+  }
 }
 
 /**
@@ -835,7 +336,7 @@ function useLexicalDragonSupport(editor) {
               editor.update(() => {
                 const selection = lexical.$getSelection();
 
-                if (selection !== null) {
+                if (lexical.$isRangeSelection(selection)) {
                   const anchor = selection.anchor;
                   let anchorNode = anchor.getNode();
                   let setSelStart = 0;
@@ -892,13 +393,17 @@ function useLexicalDragonSupport(editor) {
  *
  * 
  */
-const EditorPriority = 0;
-function useRichTextSetup(editor) {
+function useRichTextSetup(editor, initialEditorState) {
   useLayoutEffect(() => {
     const removeListener = editor.addListener('command', (type, payload) => {
       const selection = lexical.$getSelection();
 
-      if (selection === null) {
+      if (type === 'click' && lexical.$isNodeSelection(selection)) {
+        selection.clear();
+        return true;
+      }
+
+      if (!lexical.$isRangeSelection(selection)) {
         return false;
       }
 
@@ -934,7 +439,7 @@ function useRichTextSetup(editor) {
               const dataTransfer = eventOrText.dataTransfer;
 
               if (dataTransfer != null) {
-                $insertDataTransferForRichText(dataTransfer, selection, editor);
+                clipboard.$insertDataTransferForRichText(dataTransfer, selection, editor);
               } else {
                 const data = eventOrText.data;
 
@@ -1127,9 +632,10 @@ function useRichTextSetup(editor) {
       }
 
       return false;
-    }, EditorPriority);
-    editor.execCommand('bootstrapEditor');
-    return removeListener;
+    }, 0);
+    initializeEditor(editor, initialEditorState);
+    return removeListener; // We only do this for init
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor]);
   useLexicalDragonSupport(editor);
 }
@@ -1144,11 +650,12 @@ function useRichTextSetup(editor) {
  */
 function RichTextPlugin({
   contentEditable,
-  placeholder
+  placeholder,
+  initialEditorState
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const showPlaceholder = useLexicalCanShowPlaceholder(editor);
-  useRichTextSetup(editor);
+  useRichTextSetup(editor, initialEditorState);
   const decorators = useDecorators(editor);
   return /*#__PURE__*/React.createElement(React.Fragment, null, contentEditable, showPlaceholder && placeholder, decorators);
 }