@lexical/react 0.1.6 → 0.1.10

package/DEPRECATED_useLexicalPlainText.dev.js

@@ -0,0 +1,761 @@
+/**
+ * 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 withSubscriptions = require('@lexical/react/withSubscriptions');
+var lexical = require('lexical');
+var react = require('react');
+
+/**
+ * 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 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 = 0;
+
+function getDirtyNodes(editorState, dirtyLeavesSet, dirtyElementsSet) {
+  const dirtyLeaves = Array.from(dirtyLeavesSet);
+  const dirtyElements = Array.from(dirtyElementsSet);
+  const nodeMap = editorState._nodeMap;
+  const nodes = [];
+
+  for (let i = 0; i < dirtyLeaves.length; i++) {
+    const dirtyLeafKey = dirtyLeaves[i];
+    const dirtyLeaf = nodeMap.get(dirtyLeafKey);
+
+    if (dirtyLeaf !== undefined) {
+      nodes.push(dirtyLeaf);
+    }
+  }
+
+  for (let i = 0; i < dirtyElements.length; i++) {
+    const intentionallyMarkedAsDirty = dirtyElements[i][1];
+
+    if (!intentionallyMarkedAsDirty) {
+      continue;
+    }
+
+    const dirtyElementKey = dirtyElements[i][0];
+    const dirtyElement = nodeMap.get(dirtyElementKey);
+
+    if (dirtyElement !== undefined && !lexical.$isRootNode(dirtyElement)) {
+      nodes.push(dirtyElement);
+    }
+  }
+
+  return nodes;
+}
+
+function getChangeType(prevEditorState, nextEditorState, dirtyLeavesSet, dirtyElementsSet, isComposing) {
+  if (prevEditorState === null || dirtyLeavesSet.size === 0 && dirtyElementsSet.size === 0) {
+    return OTHER;
+  }
+
+  const nextSelection = nextEditorState._selection;
+  const prevSelection = prevEditorState._selection;
+
+  if (isComposing) {
+    return COMPOSING_CHARACTER;
+  }
+
+  if (!lexical.$isRangeSelection(nextSelection) || !lexical.$isRangeSelection(prevSelection) || !prevSelection.isCollapsed() || !nextSelection.isCollapsed()) {
+    return OTHER;
+  }
+
+  const dirtyNodes = getDirtyNodes(nextEditorState, dirtyLeavesSet, dirtyElementsSet);
+
+  if (dirtyNodes.length === 0) {
+    return OTHER;
+  } // Catching the case when inserting new text node into an element (e.g. first char in paragraph/list),
+  // or after existing node.
+
+
+  if (dirtyNodes.length > 1) {
+    const nextNodeMap = nextEditorState._nodeMap;
+    const nextAnchorNode = nextNodeMap.get(nextSelection.anchor.key);
+    const prevAnchorNode = nextNodeMap.get(prevSelection.anchor.key);
+
+    if (nextAnchorNode && prevAnchorNode && !prevEditorState._nodeMap.has(nextAnchorNode.__key) && lexical.$isTextNode(nextAnchorNode) && nextAnchorNode.__text.length === 1 && nextSelection.anchor.offset === 1) {
+      return INSERT_CHARACTER_AFTER_SELECTION;
+    }
+
+    return OTHER;
+  }
+
+  const nextDirtyNode = dirtyNodes[0];
+
+  const prevDirtyNode = prevEditorState._nodeMap.get(nextDirtyNode.__key);
+
+  if (!lexical.$isTextNode(prevDirtyNode) || !lexical.$isTextNode(nextDirtyNode) || prevDirtyNode.__mode !== nextDirtyNode.__mode) {
+    return OTHER;
+  }
+
+  const prevText = prevDirtyNode.__text;
+  const nextText = nextDirtyNode.__text;
+
+  if (prevText === nextText) {
+    return OTHER;
+  }
+
+  const nextAnchor = nextSelection.anchor;
+  const prevAnchor = prevSelection.anchor;
+
+  if (nextAnchor.key !== prevAnchor.key || nextAnchor.type !== 'text') {
+    return OTHER;
+  }
+
+  const nextAnchorOffset = nextAnchor.offset;
+  const prevAnchorOffset = prevAnchor.offset;
+  const textDiff = nextText.length - prevText.length;
+
+  if (textDiff === 1 && prevAnchorOffset === nextAnchorOffset - 1) {
+    return INSERT_CHARACTER_AFTER_SELECTION;
+  }
+
+  if (textDiff === -1 && prevAnchorOffset === nextAnchorOffset + 1) {
+    return DELETE_CHARACTER_BEFORE_SELECTION;
+  }
+
+  if (textDiff === -1 && prevAnchorOffset === nextAnchorOffset) {
+    return DELETE_CHARACTER_AFTER_SELECTION;
+  }
+
+  return OTHER;
+}
+
+function createMergeActionGetter(editor, delay) {
+  let prevChangeTime = Date.now();
+  let prevChangeType = OTHER;
+  return (prevEditorState, nextEditorState, currentHistoryEntry, dirtyLeaves, dirtyElements, tags) => {
+    const changeTime = Date.now(); // If applying changes from history stack there's no need
+    // to run history logic again, as history entries already calculated
+
+    if (tags.has('historic')) {
+      prevChangeType = OTHER;
+      prevChangeTime = changeTime;
+      return DISCARD_HISTORY_CANDIDATE;
+    }
+
+    const changeType = getChangeType(prevEditorState, nextEditorState, dirtyLeaves, dirtyElements, editor.isComposing());
+
+    const mergeAction = (() => {
+      const shouldPushHistory = tags.has('history-push');
+      const shouldMergeHistory = !shouldPushHistory && tags.has('history-merge');
+
+      if (shouldMergeHistory) {
+        return HISTORY_MERGE;
+      }
+
+      if (prevEditorState === null) {
+        return HISTORY_PUSH;
+      }
+
+      const selection = nextEditorState._selection;
+      const prevSelection = prevEditorState._selection;
+      const hasDirtyNodes = dirtyLeaves.size > 0 || dirtyElements.size > 0;
+
+      if (!hasDirtyNodes) {
+        if (prevSelection === null && selection !== null) {
+          return HISTORY_MERGE;
+        }
+
+        return DISCARD_HISTORY_CANDIDATE;
+      }
+
+      const isSameEditor = currentHistoryEntry === null || currentHistoryEntry.editor === editor;
+
+      if (shouldPushHistory === false && changeType !== OTHER && changeType === prevChangeType && changeTime < prevChangeTime + delay && isSameEditor) {
+        return HISTORY_MERGE;
+      }
+
+      return HISTORY_PUSH;
+    })();
+
+    prevChangeTime = changeTime;
+    prevChangeType = changeType;
+    return mergeAction;
+  };
+}
+
+function useHistory(editor, externalHistoryState, delay = 1000) {
+  const historyState = react.useMemo(() => externalHistoryState || createEmptyHistoryState(), [externalHistoryState]);
+  const clearHistory = react.useCallback(() => {
+    historyState.undoStack = [];
+    historyState.redoStack = [];
+    historyState.current = null;
+  }, [historyState]);
+  react.useEffect(() => {
+    const getMergeAction = createMergeActionGetter(editor, delay);
+
+    const applyChange = ({
+      editorState,
+      prevEditorState,
+      dirtyLeaves,
+      dirtyElements,
+      tags
+    }) => {
+      const current = historyState.current;
+      const redoStack = historyState.redoStack;
+      const undoStack = historyState.undoStack;
+      const currentEditorState = current === null ? null : current.editorState;
+
+      if (current !== null && editorState === currentEditorState) {
+        return;
+      }
+
+      const mergeAction = getMergeAction(prevEditorState, editorState, current, dirtyLeaves, dirtyElements, tags);
+
+      if (mergeAction === HISTORY_PUSH) {
+        if (redoStack.length !== 0) {
+          historyState.redoStack = [];
+        }
+
+        if (current !== null) {
+          undoStack.push({ ...current,
+            undoSelection: prevEditorState.read(lexical.$getSelection)
+          });
+          editor.execCommand('canUndo', true);
+        }
+      } else if (mergeAction === DISCARD_HISTORY_CANDIDATE) {
+        return;
+      } // Else we merge
+
+
+      historyState.current = {
+        editor,
+        editorState
+      };
+    };
+
+    const undo = () => {
+      const redoStack = historyState.redoStack;
+      const undoStack = historyState.undoStack;
+      const undoStackLength = undoStack.length;
+
+      if (undoStackLength !== 0) {
+        const current = historyState.current;
+        const historyStateEntry = undoStack.pop();
+
+        if (current !== null) {
+          redoStack.push(current);
+          editor.execCommand('canRedo', true);
+        }
+
+        if (undoStack.length === 0) {
+          editor.execCommand('canUndo', false);
+        }
+
+        historyState.current = historyStateEntry;
+        historyStateEntry.editor.setEditorState(historyStateEntry.editorState.clone(historyStateEntry.undoSelection), {
+          tag: 'historic'
+        });
+      }
+    };
+
+    const redo = () => {
+      const redoStack = historyState.redoStack;
+      const undoStack = historyState.undoStack;
+
+      if (redoStack.length !== 0) {
+        const current = historyState.current;
+
+        if (current !== null) {
+          undoStack.push(current);
+          editor.execCommand('canUndo', true);
+        }
+
+        const historyStateEntry = redoStack.pop();
+
+        if (redoStack.length === 0) {
+          editor.execCommand('canRedo', false);
+        }
+
+        historyState.current = historyStateEntry;
+        historyStateEntry.editor.setEditorState(historyStateEntry.editorState, {
+          tag: 'historic'
+        });
+      }
+    };
+
+    const applyCommand = type => {
+      switch (type) {
+        case 'undo':
+          undo();
+          return true;
+
+        case 'redo':
+          redo();
+          return true;
+
+        case 'clearEditor':
+          clearHistory();
+          return false;
+
+        case 'clearHistory':
+          clearHistory();
+          return true;
+
+        default:
+          return false;
+      }
+    };
+
+    return withSubscriptions(editor.addListener('command', applyCommand, EditorPriority), editor.addListener('update', applyChange));
+  }, [clearHistory, delay, editor, historyState]);
+}
+function createEmptyHistoryState() {
+  return {
+    current: null,
+    redoStack: [],
+    undoStack: []
+  };
+}
+
+/**
+ * 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 useLexicalHistory(editor, externalHistoryState, delay = 1000) {
+  return useHistory(editor, externalHistoryState, delay);
+}
+
+/**
+ * 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 $moveCaretSelection(selection, isHoldingShift, isBackward, granularity) {
+  selection.modify(isHoldingShift ? 'extend' : 'move', isBackward, granularity);
+}
+function $isParentElementRTL(selection) {
+  const anchorNode = selection.anchor.getNode();
+  const parent = lexical.$isRootNode(anchorNode) ? anchorNode : 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 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;
+}
+
+/**
+ * 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 $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 onPasteForPlainText(event, editor) {
+  event.preventDefault();
+  editor.update(() => {
+    const selection = lexical.$getSelection();
+    const clipboardData = event.clipboardData;
+
+    if (clipboardData != null && lexical.$isRangeSelection(selection)) {
+      $insertDataTransferForPlainText(clipboardData, selection);
+    }
+  });
+}
+function onCutForPlainText(event, editor) {
+  onCopyForPlainText(event, editor);
+  editor.update(() => {
+    const selection = lexical.$getSelection();
+
+    if (lexical.$isRangeSelection(selection)) {
+      selection.removeText();
+    }
+  });
+}
+function onCopyForPlainText(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;
+        }
+
+        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());
+      }
+    }
+  });
+}
+
+/**
+ * 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(() => {
+                const selection = lexical.$getSelection();
+
+                if (lexical.$isRangeSelection(selection)) {
+                  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.
+ *
+ * 
+ */
+function usePlainTextSetup(editor) {
+  react.useEffect(() => {
+    const removeListener = editor.addListener('command', (type, payload) => {
+      const selection = lexical.$getSelection();
+
+      if (!lexical.$isRangeSelection(selection)) {
+        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) {
+                $insertDataTransferForPlainText(dataTransfer, selection);
+              } else {
+                const data = eventOrText.data;
+
+                if (data) {
+                  selection.insertText(data);
+                }
+              }
+            }
+
+            return true;
+          }
+
+        case 'removeText':
+          selection.removeText();
+          return true;
+
+        case 'insertLineBreak':
+          const selectStart = payload;
+          selection.insertLineBreak(selectStart);
+          return true;
+
+        case 'insertParagraph':
+          selection.insertLineBreak();
+          return true;
+
+        case 'indentContent':
+        case 'outdentContent':
+        case 'insertHorizontalRule':
+        case 'insertImage':
+        case 'insertTable':
+        case 'formatElement':
+        case 'formatText':
+          {
+            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();
+            return editor.execCommand('deleteCharacter', true);
+          }
+
+        case 'keyDelete':
+          {
+            const event = payload;
+            event.preventDefault();
+            return editor.execCommand('deleteCharacter', false);
+          }
+
+        case 'keyEnter':
+          {
+            const event = payload;
+            event.preventDefault();
+            return editor.execCommand('insertLineBreak');
+          }
+
+        case 'copy':
+          {
+            const event = payload;
+            onCopyForPlainText(event, editor);
+            return true;
+          }
+
+        case 'cut':
+          {
+            const event = payload;
+            onCutForPlainText(event, editor);
+            return true;
+          }
+
+        case 'paste':
+          {
+            const event = payload;
+            onPasteForPlainText(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;
+    }, 0);
+    const bootstrapCommandHandled = editor.execCommand('bootstrapEditor');
+
+    if (!bootstrapCommandHandled) {
+      console.warn('bootstrapEditor command was not handled. Did you forget to add <BootstrapPlugin />?');
+    }
+
+    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 useLexicalPlainText(editor, externalHistoryState) {
+  usePlainTextSetup(editor);
+  useLexicalHistory(editor, externalHistoryState);
+}
+
+module.exports = useLexicalPlainText;