@lexical/react 0.1.7 → 0.1.8

package/LexicalRichTextPlugin.dev.js

@@ -0,0 +1,1136 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+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');
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+function $textContent() {
+  const root = lexical.$getRoot();
+  return root.getTextContent();
+}
+function $isTextContentEmpty(isEditorComposing, trim = true) {
+  if (isEditorComposing) {
+    return false;
+  }
+
+  let text = $textContent();
+
+  if (trim) {
+    text = text.trim();
+  }
+
+  return text === '';
+}
+function $canShowPlaceholder(isComposing) {
+  if (!$isTextContentEmpty(isComposing, false)) {
+    return false;
+  }
+
+  const root = lexical.$getRoot();
+  const children = root.getChildren();
+  const childrenLength = children.length;
+
+  if (childrenLength > 1) {
+    return false;
+  }
+
+  for (let i = 0; i < childrenLength; i++) {
+    const topBlock = children[i];
+
+    if (lexical.$isElementNode(topBlock)) {
+      if (topBlock.__type !== 'paragraph') {
+        return false;
+      }
+
+      if (topBlock.__indent !== 0) {
+        return false;
+      }
+
+      const topBlockChildren = topBlock.getChildren();
+      const topBlockChildrenLength = topBlockChildren.length;
+
+      for (let s = 0; s < topBlockChildrenLength; s++) {
+        const child = topBlockChildren[i];
+
+        if (!lexical.$isTextNode(child)) {
+          return false;
+        }
+      }
+    }
+  }
+
+  return true;
+}
+function $canShowPlaceholderCurry(isEditorComposing) {
+  return () => $canShowPlaceholder(isEditorComposing);
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const useLayoutEffectImpl = CAN_USE_DOM ? React.useLayoutEffect : React.useEffect;
+var useLayoutEffect = useLayoutEffectImpl;
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+function useLexicalCanShowPlaceholder(editor) {
+  const [canShowPlaceholder, setCanShowPlaceholder] = React.useState(editor.getEditorState().read($canShowPlaceholderCurry(editor.isComposing())));
+  useLayoutEffect(() => {
+    return editor.addListener('update', ({
+      editorState
+    }) => {
+      const isComposing = editor.isComposing();
+      const currentCanShowPlaceholder = editorState.read($canShowPlaceholderCurry(isComposing));
+      setCanShowPlaceholder(currentCanShowPlaceholder);
+    });
+  }, [editor]);
+  return canShowPlaceholder;
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+function useDecorators(editor) {
+  const [decorators, setDecorators] = React.useState(() => editor.getDecorators()); // Subscribe to changes
+
+  useLayoutEffect(() => {
+    return editor.addListener('decorator', nextDecorators => {
+      reactDom.flushSync(() => {
+        setDecorators(nextDecorators);
+      });
+    });
+  }, [editor]); // Return decorators defined as React Portals
+
+  return React.useMemo(() => {
+    const decoratedPortals = [];
+    const decoratorKeys = Object.keys(decorators);
+
+    for (let i = 0; i < decoratorKeys.length; i++) {
+      const nodeKey = decoratorKeys[i];
+      const reactDecorator = decorators[nodeKey];
+      const element = editor.getElementByKey(nodeKey);
+
+      if (element !== null) {
+        decoratedPortals.push( /*#__PURE__*/reactDom.createPortal(reactDecorator, element));
+      }
+    }
+
+    return decoratedPortals;
+  }, [decorators, editor]);
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+
+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()) {
+    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);
+}
+function $isParentElementRTL(selection) {
+  const anchorNode = selection.anchor.getNode();
+  const parent = anchorNode.getParentOrThrow();
+  return parent.getDirection() === 'rtl';
+}
+function $moveCharacter(selection, isHoldingShift, isBackward) {
+  const isRTL = $isParentElementRTL(selection);
+  $moveCaretSelection(selection, isHoldingShift, isBackward ? !isRTL : isRTL, 'character');
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+function getPossibleDecoratorNode(focus, isBackward) {
+  const focusOffset = focus.offset;
+
+  if (focus.type === 'element') {
+    const block = focus.getNode();
+    return block.getChildAtIndex(isBackward ? focusOffset - 1 : focusOffset);
+  } else {
+    const focusNode = focus.getNode();
+
+    if (isBackward && focusOffset === 0 || !isBackward && focusOffset === focusNode.getTextContentSize()) {
+      return isBackward ? focusNode.getPreviousSibling() : focusNode.getNextSibling();
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+
+const isCodeElement = div => {
+  return div.style.fontFamily.match('monospace') !== null;
+};
+
+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');
+        }
+      },
+      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);
+        }
+      } 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 possibleDecoratorNode = getPossibleDecoratorNode(selection.focus, isBackward);
+  return lexical.$isDecoratorNode(possibleDecoratorNode);
+}
+function onPasteForRichText(event, editor) {
+  event.preventDefault();
+  editor.update(() => {
+    lexical.$log('onPasteForRichText');
+    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(() => {
+    lexical.$log('onCutForRichText');
+    const selection = lexical.$getSelection();
+
+    if (selection !== null) {
+      selection.removeText();
+    }
+  });
+}
+function onCopyForRichText(event, editor) {
+  event.preventDefault();
+  editor.update(() => {
+    lexical.$log('onCopyForRichText');
+    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;
+        }
+
+        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);
+        }
+
+        clipboardData.setData('text/plain', selection.getTextContent());
+        const namespace = editor._config.namespace;
+        clipboardData.setData('application/x-lexical-editor', JSON.stringify({
+          namespace,
+          state: $cloneContents(selection)
+        }));
+      }
+    }
+  });
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+function useLexicalDragonSupport(editor) {
+  React.useEffect(() => {
+    const handler = event => {
+      const rootElement = editor.getRootElement();
+
+      if (document.activeElement !== rootElement) {
+        return;
+      }
+
+      const data = event.data;
+
+      if (typeof data === 'string') {
+        let parsedData;
+
+        try {
+          parsedData = JSON.parse(data);
+        } catch (e) {
+          return;
+        }
+
+        if (parsedData && parsedData.protocol === 'nuanria_messaging' && parsedData.type === 'request') {
+          const payload = parsedData.payload;
+
+          if (payload && payload.functionId === 'makeChanges') {
+            const args = payload.args;
+
+            if (args) {
+              const [elementStart, elementLength, text, selStart, selLength, formatCommand] = args; // TODO: we should probably handle formatCommand somehow?
+              editor.update(() => {
+                lexical.$log('useLexicalDragonSupport');
+                const selection = lexical.$getSelection();
+
+                if (selection !== null) {
+                  const anchor = selection.anchor;
+                  let anchorNode = anchor.getNode();
+                  let setSelStart = 0;
+                  let setSelEnd = 0;
+
+                  if (lexical.$isTextNode(anchorNode)) {
+                    // set initial selection
+                    if (elementStart >= 0 && elementLength >= 0) {
+                      setSelStart = elementStart;
+                      setSelEnd = elementStart + elementLength; // If the offset is more than the end, make it the end
+
+                      selection.setTextNodeRange(anchorNode, setSelStart, anchorNode, setSelEnd);
+                    }
+                  }
+
+                  if (setSelStart !== setSelEnd || text !== '') {
+                    selection.insertRawText(text);
+                    anchorNode = anchor.getNode();
+                  }
+
+                  if (lexical.$isTextNode(anchorNode)) {
+                    // set final selection
+                    setSelStart = selStart;
+                    setSelEnd = selStart + selLength;
+                    const anchorNodeTextLength = anchorNode.getTextContentSize(); // If the offset is more than the end, make it the end
+
+                    setSelStart = setSelStart > anchorNodeTextLength ? anchorNodeTextLength : setSelStart;
+                    setSelEnd = setSelEnd > anchorNodeTextLength ? anchorNodeTextLength : setSelEnd;
+                    selection.setTextNodeRange(anchorNode, setSelStart, anchorNode, setSelEnd);
+                  } // block the chrome extension from handling this event
+
+
+                  event.stopImmediatePropagation();
+                }
+              });
+            }
+          }
+        }
+      }
+    };
+
+    window.addEventListener('message', handler, true);
+    return () => {
+      window.removeEventListener('message', handler, true);
+    };
+  }, [editor]);
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const EditorPriority = 0;
+function useRichTextSetup(editor) {
+  useLayoutEffect(() => {
+    const removeListener = editor.addListener('command', (type, payload) => {
+      const selection = lexical.$getSelection();
+
+      if (selection === null) {
+        return false;
+      }
+
+      switch (type) {
+        case 'deleteCharacter':
+          {
+            const isBackward = payload;
+            selection.deleteCharacter(isBackward);
+            return true;
+          }
+
+        case 'deleteWord':
+          {
+            const isBackward = payload;
+            selection.deleteWord(isBackward);
+            return true;
+          }
+
+        case 'deleteLine':
+          {
+            const isBackward = payload;
+            selection.deleteLine(isBackward);
+            return true;
+          }
+
+        case 'insertText':
+          {
+            const eventOrText = payload;
+
+            if (typeof eventOrText === 'string') {
+              selection.insertText(eventOrText);
+            } else {
+              const dataTransfer = eventOrText.dataTransfer;
+
+              if (dataTransfer != null) {
+                $insertDataTransferForRichText(dataTransfer, selection, editor);
+              } else {
+                const data = eventOrText.data;
+
+                if (data) {
+                  selection.insertText(data);
+                }
+              }
+            }
+
+            return true;
+          }
+
+        case 'removeText':
+          selection.removeText();
+          return true;
+
+        case 'formatText':
+          {
+            const format = payload;
+            selection.formatText(format);
+            return true;
+          }
+
+        case 'formatElement':
+          {
+            const format = payload;
+            const node = selection.anchor.getNode();
+            const element = lexical.$isElementNode(node) ? node : node.getParentOrThrow();
+            element.setFormat(format);
+            return true;
+          }
+
+        case 'insertLineBreak':
+          const selectStart = payload;
+          selection.insertLineBreak(selectStart);
+          return true;
+
+        case 'insertParagraph':
+          selection.insertParagraph();
+          return true;
+
+        case 'indentContent':
+          {
+            // Handle code blocks
+            const anchor = selection.anchor;
+            const parentBlock = anchor.type === 'element' ? anchor.getNode() : anchor.getNode().getParentOrThrow();
+
+            if (parentBlock.canInsertTab()) {
+              editor.execCommand('insertText', '\t');
+            } else {
+              if (parentBlock.getIndent() !== 10) {
+                parentBlock.setIndent(parentBlock.getIndent() + 1);
+              }
+            }
+
+            return true;
+          }
+
+        case 'outdentContent':
+          {
+            // Handle code blocks
+            const anchor = selection.anchor;
+            const anchorNode = anchor.getNode();
+            const parentBlock = anchor.type === 'element' ? anchor.getNode() : anchor.getNode().getParentOrThrow();
+
+            if (parentBlock.canInsertTab()) {
+              const textContent = anchorNode.getTextContent();
+              const character = textContent[anchor.offset - 1];
+
+              if (character === '\t') {
+                editor.execCommand('deleteCharacter', true);
+              }
+            } else {
+              if (parentBlock.getIndent() !== 0) {
+                parentBlock.setIndent(parentBlock.getIndent() - 1);
+              }
+            }
+
+            return true;
+          }
+
+        case 'keyArrowLeft':
+          {
+            const event = payload;
+            const isHoldingShift = event.shiftKey;
+
+            if ($shouldOverrideDefaultCharacterSelection(selection, true)) {
+              event.preventDefault();
+              $moveCharacter(selection, isHoldingShift, true);
+              return true;
+            }
+
+            return false;
+          }
+
+        case 'keyArrowRight':
+          {
+            const event = payload;
+            const isHoldingShift = event.shiftKey;
+
+            if ($shouldOverrideDefaultCharacterSelection(selection, false)) {
+              event.preventDefault();
+              $moveCharacter(selection, isHoldingShift, false);
+              return true;
+            }
+
+            return false;
+          }
+
+        case 'keyBackspace':
+          {
+            const event = payload;
+            event.preventDefault();
+            const {
+              anchor
+            } = selection;
+
+            if (selection.isCollapsed() && anchor.offset === 0) {
+              const element = anchor.type === 'element' ? anchor.getNode() : anchor.getNode().getParentOrThrow();
+
+              if (element.getIndent() > 0) {
+                return editor.execCommand('outdentContent');
+              }
+            }
+
+            return editor.execCommand('deleteCharacter', true);
+          }
+
+        case 'keyDelete':
+          {
+            const event = payload;
+            event.preventDefault();
+            return editor.execCommand('deleteCharacter', false);
+          }
+
+        case 'keyEnter':
+          {
+            const event = payload;
+            event.preventDefault();
+
+            if (event.shiftKey) {
+              return editor.execCommand('insertLineBreak');
+            }
+
+            return editor.execCommand('insertParagraph');
+          }
+
+        case 'keyTab':
+          {
+            const event = payload;
+            event.preventDefault();
+            return editor.execCommand(event.shiftKey ? 'outdentContent' : 'indentContent');
+          }
+
+        case 'keyEscape':
+          {
+            editor.blur();
+            return true;
+          }
+
+        case 'copy':
+          {
+            const event = payload;
+            onCopyForRichText(event, editor);
+            return true;
+          }
+
+        case 'cut':
+          {
+            const event = payload;
+            onCutForRichText(event, editor);
+            return true;
+          }
+
+        case 'paste':
+          {
+            const event = payload;
+            onPasteForRichText(event, editor);
+            return true;
+          }
+
+        case 'drop':
+        case 'dragstart':
+          {
+            // TODO: Make drag and drop work at some point.
+            const event = payload;
+            event.preventDefault();
+            return true;
+          }
+      }
+
+      return false;
+    }, EditorPriority);
+    editor.execCommand('bootstrapEditor');
+    return removeListener;
+  }, [editor]);
+  useLexicalDragonSupport(editor);
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+function RichTextPlugin({
+  contentEditable,
+  placeholder
+}) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const showPlaceholder = useLexicalCanShowPlaceholder(editor);
+  useRichTextSetup(editor);
+  const decorators = useDecorators(editor);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, contentEditable, showPlaceholder && placeholder, decorators);
+}
+
+module.exports = RichTextPlugin;