@lexical/react 0.1.10 → 0.1.13

package/LexicalRichTextPlugin.dev.js

@@ -10,6 +10,7 @@ var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
 var React = require('react');
 var lexical = require('lexical');
 var reactDom = require('react-dom');
+var clipboard = require('@lexical/clipboard');
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -169,188 +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) {
-  if (!lexical.$isRangeSelection(selection)) {
-    {
-      throw Error(`TODO`);
-    }
-  }
-
-  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);
 }
@@ -363,54 +182,9 @@ 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 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;
-    }
-  }
-
-  return block.getChildAtIndex(isBackward ? offset - 1 : offset);
-}
-
-function getPossibleDecoratorNode(focus, isBackward) {
-  const focusOffset = focus.offset;
-
-  if (focus.type === 'element') {
-    const block = focus.getNode();
-    return resolveElement(block, isBackward, focusOffset);
-  } else {
-    const focusNode = focus.getNode();
-
-    if (isBackward && focusOffset === 0 || !isBackward && focusOffset === focusNode.getTextContentSize()) {
-      const possibleNode = isBackward ? focusNode.getPreviousSibling() : focusNode.getNextSibling();
-
-      if (possibleNode === null) {
-        return resolveElement(focusNode.getParentOrThrow(), isBackward, focusNode.getIndexWithinParent() + (isBackward ? 0 : 1));
-      }
-
-      return possibleNode;
-    }
-  }
-
-  return null;
+function $shouldOverrideDefaultCharacterSelection(selection, isBackward) {
+  const possibleNode = lexical.$getDecoratorNode(selection.focus, isBackward);
+  return lexical.$isDecoratorNode(possibleNode) && !possibleNode.isIsolated();
 }
 
 /**
@@ -421,185 +195,39 @@ function getPossibleDecoratorNode(focus, isBackward) {
  *
  * 
  */
+function onCutForRichText(event, editor) {
+  onCopyForRichText(event, editor);
+  editor.update(() => {
+    const selection = lexical.$getSelection();
 
-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);
+    if (lexical.$isRangeSelection(selection)) {
+      selection.removeText();
     }
-  }
-
-  return nodes;
+  });
 }
+function onCopyForRichText(event, editor) {
+  event.preventDefault();
+  editor.update(() => {
+    const clipboardData = event.clipboardData;
+    const selection = lexical.$getSelection();
 
-function getConversionFunction(domNode, editor) {
-  const {
-    nodeName
-  } = domNode;
-
-  const cachedConversions = editor._htmlConversions.get(nodeName.toLowerCase());
-
-  let currentConversion = null;
-
-  if (cachedConversions !== undefined) {
-    cachedConversions.forEach(cachedConversion => {
-      const domConversion = cachedConversion(domNode);
+    if (selection !== null) {
+      if (clipboardData != null) {
+        const htmlString = clipboard.getHtmlContent(editor);
+        const lexicalString = clipboard.$getLexicalContent(editor);
 
-      if (domConversion !== null) {
-        if (currentConversion === null || currentConversion.priority < domConversion.priority) {
-          currentConversion = domConversion;
+        if (htmlString !== null) {
+          clipboardData.setData('text/html', htmlString);
         }
-      }
-    });
-  }
-
-  return currentConversion !== null ? currentConversion.conversion : null;
-}
-
-function $createNodesFromDOM(node, editor, forChildMap = new Map()) {
-  let lexicalNodes = [];
-  let currentLexicalNode = null;
-  const transformFunction = getConversionFunction(node, editor);
-  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(node.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], 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, 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], 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, 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 (lexicalString !== null) {
+          clipboardData.setData('application/x-lexical-editor', lexicalString);
         }
 
-        if (currentBlock !== null) {
-          currentBlock.append(node);
-        }
-      } else {
-        topLevelBlocks.push(node);
-        currentBlock = null;
+        clipboardData.setData('text/plain', selection.getTextContent());
       }
     }
-
-    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();
@@ -608,52 +236,65 @@ function onPasteForRichText(event, editor) {
     const clipboardData = event.clipboardData;
 
     if (clipboardData != null && lexical.$isRangeSelection(selection)) {
-      $insertDataTransferForRichText(clipboardData, selection, editor);
-    }
-  });
-}
-function onCutForRichText(event, editor) {
-  onCopyForRichText(event, editor);
-  editor.update(() => {
-    const selection = lexical.$getSelection();
-
-    if (lexical.$isRangeSelection(selection)) {
-      selection.removeText();
+      clipboard.$insertDataTransferForRichText(clipboardData, selection, editor);
     }
   });
 }
-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;
+/**
+ * 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.
+ *
+ * 
+ */
+// Convoluted logic to make this work with Flow. Order matters.
+const options = {
+  tag: 'history-merge'
+};
+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();
+        }
+      }
+    }, updateOptions);
+  } else if (initialEditorState !== null) {
+    switch (typeof initialEditorState) {
+      case 'string':
+        {
+          const parsedEditorState = editor.parseEditorState(initialEditorState);
+          editor.setEditorState(parsedEditorState, 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 'object':
+        {
+          editor.setEditorState(initialEditorState, setEditorOptions);
+          break;
         }
 
-        clipboardData.setData('text/plain', selection.getTextContent());
-        const namespace = editor._config.namespace;
-        clipboardData.setData('application/x-lexical-editor', JSON.stringify({
-          namespace,
-          state: $cloneContents(selection)
-        }));
-      }
+      case 'function':
+        {
+          editor.update(initialEditorState, updateOptions);
+          break;
+        }
     }
-  });
+  }
 }
 
 /**
@@ -752,8 +393,8 @@ function useLexicalDragonSupport(editor) {
  *
  * 
  */
-function useRichTextSetup(editor) {
-  React.useEffect(() => {
+function useRichTextSetup(editor, initialEditorState) {
+  useLayoutEffect(() => {
     const removeListener = editor.addListener('command', (type, payload) => {
       const selection = lexical.$getSelection();
 
@@ -798,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;
 
@@ -992,13 +633,9 @@ function useRichTextSetup(editor) {
 
       return false;
     }, 0);
-    const bootstrapCommandHandled = editor.execCommand('bootstrapEditor');
-
-    if (!bootstrapCommandHandled) {
-      console.warn('bootstrapEditor command was not handled. Did you forget to add <BootstrapPlugin />?');
-    }
-
-    return removeListener;
+    initializeEditor(editor, initialEditorState);
+    return removeListener; // We only do this for init
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor]);
   useLexicalDragonSupport(editor);
 }
@@ -1013,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);
 }

package/LexicalRichTextPlugin.js.flow

@@ -0,0 +1,18 @@
+/**
+ * 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.
+ *
+ * @flow strict
+ */
+
+import type {EditorState} from 'lexical';
+
+type InitialEditorStateType = null | string | EditorState | (() => void);
+
+declare export default function RichTextPlugin({
+  contentEditable: React$Node,
+  initialEditorState?: InitialEditorStateType,
+  placeholder: React$Node,
+}): React$Node;