@lexical/react 0.1.8 → 0.1.11

package/DEPRECATED_useLexicalRichText.dev.js

@@ -9,10 +9,6 @@
 var withSubscriptions = require('@lexical/react/withSubscriptions');
 var lexical = require('lexical');
 var react = require('react');
-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.
@@ -22,15 +18,15 @@ var LinkNode = require('lexical/LinkNode');
  *
  * 
  */
-const MERGE = 0;
-const NO_MERGE = 1;
-const DISCARD = 2;
+const HISTORY_MERGE = 0;
+const HISTORY_PUSH = 1;
+const DISCARD_HISTORY_CANDIDATE = 2;
 const OTHER = 0;
 const COMPOSING_CHARACTER = 1;
 const INSERT_CHARACTER_AFTER_SELECTION = 2;
 const DELETE_CHARACTER_BEFORE_SELECTION = 3;
 const DELETE_CHARACTER_AFTER_SELECTION = 4;
-const EditorPriority$1 = 0;
+const EditorPriority = 0;
 
 function getDirtyNodes(editorState, dirtyLeavesSet, dirtyElementsSet) {
   const dirtyLeaves = Array.from(dirtyLeavesSet);
@@ -77,7 +73,7 @@ function getChangeType(prevEditorState, nextEditorState, dirtyLeavesSet, dirtyEl
     return COMPOSING_CHARACTER;
   }
 
-  if (nextSelection === null || prevSelection === null || !prevSelection.isCollapsed() || !nextSelection.isCollapsed()) {
+  if (!lexical.$isRangeSelection(nextSelection) || !lexical.$isRangeSelection(prevSelection) || !prevSelection.isCollapsed() || !nextSelection.isCollapsed()) {
     return OTHER;
   }
 
@@ -152,18 +148,21 @@ function createMergeActionGetter(editor, delay) {
     if (tags.has('historic')) {
       prevChangeType = OTHER;
       prevChangeTime = changeTime;
-      return DISCARD;
+      return DISCARD_HISTORY_CANDIDATE;
     }
 
     const changeType = getChangeType(prevEditorState, nextEditorState, dirtyLeaves, dirtyElements, editor.isComposing());
 
     const mergeAction = (() => {
-      if (tags.has('without-history')) {
-        return MERGE;
+      const shouldPushHistory = tags.has('history-push');
+      const shouldMergeHistory = !shouldPushHistory && tags.has('history-merge');
+
+      if (shouldMergeHistory) {
+        return HISTORY_MERGE;
       }
 
       if (prevEditorState === null) {
-        return NO_MERGE;
+        return HISTORY_PUSH;
       }
 
       const selection = nextEditorState._selection;
@@ -172,19 +171,19 @@ function createMergeActionGetter(editor, delay) {
 
       if (!hasDirtyNodes) {
         if (prevSelection === null && selection !== null) {
-          return MERGE;
+          return HISTORY_MERGE;
         }
 
-        return DISCARD;
+        return DISCARD_HISTORY_CANDIDATE;
       }
 
       const isSameEditor = currentHistoryEntry === null || currentHistoryEntry.editor === editor;
 
-      if (changeType !== OTHER && changeType === prevChangeType && changeTime < prevChangeTime + delay && isSameEditor) {
-        return MERGE;
+      if (shouldPushHistory === false && changeType !== OTHER && changeType === prevChangeType && changeTime < prevChangeTime + delay && isSameEditor) {
+        return HISTORY_MERGE;
       }
 
-      return NO_MERGE;
+      return HISTORY_PUSH;
     })();
 
     prevChangeTime = changeTime;
@@ -221,7 +220,7 @@ function useHistory(editor, externalHistoryState, delay = 1000) {
 
       const mergeAction = getMergeAction(prevEditorState, editorState, current, dirtyLeaves, dirtyElements, tags);
 
-      if (mergeAction === NO_MERGE) {
+      if (mergeAction === HISTORY_PUSH) {
         if (redoStack.length !== 0) {
           historyState.redoStack = [];
         }
@@ -232,7 +231,7 @@ function useHistory(editor, externalHistoryState, delay = 1000) {
           });
           editor.execCommand('canUndo', true);
         }
-      } else if (mergeAction === DISCARD) {
+      } else if (mergeAction === DISCARD_HISTORY_CANDIDATE) {
         return;
       } // Else we merge
 
@@ -316,7 +315,7 @@ function useHistory(editor, externalHistoryState, delay = 1000) {
       }
     };
 
-    return withSubscriptions(editor.addListener('command', applyCommand, EditorPriority$1), editor.addListener('update', applyChange));
+    return withSubscriptions(editor.addListener('command', applyCommand, EditorPriority), editor.addListener('update', applyChange));
   }, [clearHistory, delay, editor, historyState]);
 }
 function createEmptyHistoryState() {
@@ -436,6 +435,12 @@ function $copyLeafNodeBranchToRoot(leaf, startingOffset, isLeftSide, range, node
 }
 
 function $cloneContents(selection) {
+  if (!lexical.$isRangeSelection(selection)) {
+    {
+      throw Error(`TODO`);
+    }
+  }
+
   const anchor = selection.anchor;
   const focus = selection.focus;
   const anchorOffset = anchor.getCharacterOffset();
@@ -473,7 +478,7 @@ function $cloneContents(selection) {
   const firstNode = nodes[0];
   const firstNodeParent = firstNode.getParent();
 
-  if (firstNodeParent !== null && !firstNodeParent.canBeEmpty()) {
+  if (firstNodeParent !== null && (!firstNodeParent.canBeEmpty() || lexical.$isRootNode(firstNodeParent))) {
     const parentChildren = firstNodeParent.__children;
     const parentChildrenLength = parentChildren.length;
 
@@ -529,7 +534,7 @@ function $moveCaretSelection(selection, isHoldingShift, isBackward, granularity)
 }
 function $isParentElementRTL(selection) {
   const anchorNode = selection.anchor.getNode();
-  const parent = anchorNode.getParentOrThrow();
+  const parent = lexical.$isRootNode(anchorNode) ? anchorNode : anchorNode.getParentOrThrow();
   return parent.getDirection() === 'rtl';
 }
 function $moveCharacter(selection, isHoldingShift, isBackward) {
@@ -545,195 +550,6 @@ function $moveCharacter(selection, isHoldingShift, isBackward) {
  *
  * 
  */
-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 {
@@ -756,12 +572,34 @@ function $generateNodes(nodeRange) {
   return nodes;
 }
 
-function $createNodesFromDOM(node, conversionMap, editor, forChildMap = new Map()) {
+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 (domConversion !== null) {
+        if (currentConversion === null || currentConversion.priority < domConversion.priority) {
+          currentConversion = domConversion;
+        }
+      }
+    });
+  }
+
+  return currentConversion !== null ? currentConversion.conversion : null;
+}
+
+function $createNodesFromDOM(node, 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 transformFunction = getConversionFunction(node, editor);
   const transformOutput = transformFunction ? transformFunction(node) : null;
   let postTransform = null;
 
@@ -779,7 +617,7 @@ function $createNodesFromDOM(node, conversionMap, editor, forChildMap = new Map(
     }
 
     if (transformOutput.forChild != null) {
-      forChildMap.set(nodeName, transformOutput.forChild);
+      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.
@@ -789,7 +627,7 @@ function $createNodesFromDOM(node, conversionMap, editor, forChildMap = new Map(
   let childLexicalNodes = [];
 
   for (let i = 0; i < children.length; i++) {
-    childLexicalNodes.push(...$createNodesFromDOM(children[i], conversionMap, editor, forChildMap));
+    childLexicalNodes.push(...$createNodesFromDOM(children[i], editor, forChildMap));
   }
 
   if (postTransform != null) {
@@ -811,13 +649,13 @@ function $createNodesFromDOM(node, conversionMap, editor, forChildMap = new Map(
   return lexicalNodes;
 }
 
-function $generateNodesFromDOM(dom, conversionMap, editor) {
+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], conversionMap, editor);
+    const lexicalNode = $createNodesFromDOM(elements[i], editor);
 
     if (lexicalNode !== null) {
       lexicalNodes = lexicalNodes.concat(lexicalNode);
@@ -852,7 +690,7 @@ function $insertDataTransferForRichText(dataTransfer, selection, editor) {
   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 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;
@@ -889,17 +727,16 @@ function $insertDataTransferForPlainText(dataTransfer, selection) {
   }
 }
 function $shouldOverrideDefaultCharacterSelection(selection, isBackward) {
-  const possibleDecoratorNode = getPossibleDecoratorNode(selection.focus, isBackward);
-  return lexical.$isDecoratorNode(possibleDecoratorNode);
+  const possibleNode = lexical.$getDecoratorNode(selection.focus, isBackward);
+  return lexical.$isDecoratorNode(possibleNode) && !possibleNode.isIsolated();
 }
 function onPasteForRichText(event, editor) {
   event.preventDefault();
   editor.update(() => {
-    lexical.$log('onPasteForRichText');
     const selection = lexical.$getSelection();
     const clipboardData = event.clipboardData;
 
-    if (clipboardData != null && selection !== null) {
+    if (clipboardData != null && lexical.$isRangeSelection(selection)) {
       $insertDataTransferForRichText(clipboardData, selection, editor);
     }
   });
@@ -907,10 +744,9 @@ function onPasteForRichText(event, editor) {
 function onCutForRichText(event, editor) {
   onCopyForRichText(event, editor);
   editor.update(() => {
-    lexical.$log('onCutForRichText');
     const selection = lexical.$getSelection();
 
-    if (selection !== null) {
+    if (lexical.$isRangeSelection(selection)) {
       selection.removeText();
     }
   });
@@ -918,7 +754,6 @@ function onCutForRichText(event, editor) {
 function onCopyForRichText(event, editor) {
   event.preventDefault();
   editor.update(() => {
-    lexical.$log('onCopyForRichText');
     const clipboardData = event.clipboardData;
     const selection = lexical.$getSelection();
 
@@ -958,18 +793,53 @@ function onCopyForRichText(event, editor) {
  *
  * 
  */
-const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
+// 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;
+        }
 
-/**
- * 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;
+      case 'object':
+        {
+          editor.setEditorState(initialEditorState, setEditorOptions);
+          break;
+        }
+
+      case 'function':
+        {
+          editor.update(initialEditorState, updateOptions);
+          break;
+        }
+    }
+  }
+}
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -1008,10 +878,9 @@ function useLexicalDragonSupport(editor) {
             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) {
+                if (lexical.$isRangeSelection(selection)) {
                   const anchor = selection.anchor;
                   let anchorNode = anchor.getNode();
                   let setSelStart = 0;
@@ -1068,13 +937,17 @@ function useLexicalDragonSupport(editor) {
  *
  * 
  */
-const EditorPriority = 0;
-function useRichTextSetup(editor) {
-  useLayoutEffect(() => {
+function useRichTextSetup(editor, initialEditorState) {
+  react.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;
       }
 
@@ -1303,9 +1176,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);
 }
@@ -1318,8 +1192,8 @@ function useRichTextSetup(editor) {
  *
  * 
  */
-function useLexicalRichText(editor, externalHistoryState) {
-  useRichTextSetup(editor);
+function useLexicalRichText(editor, externalHistoryState, initialEditorState) {
+  useRichTextSetup(editor, initialEditorState);
   useLexicalHistory(editor, externalHistoryState);
 }