@lexical/react 0.1.16 → 0.1.17

package/DEPRECATED_useLexicalPlainText.dev.js

@@ -6,11 +6,11 @@
  */
 'use strict';
 
-var withSubscriptions = require('@lexical/react/withSubscriptions');
-var lexical = require('lexical');
+var history = require('@lexical/history');
 var react = require('react');
-var clipboard = require('@lexical/clipboard');
-var selection = require('@lexical/selection');
+var dragon = require('@lexical/dragon');
+var plainText = require('@lexical/plain-text');
+var utils = require('@lexical/utils');
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -20,312 +20,11 @@ var selection = require('@lexical/selection');
  *
  * 
  */
-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]);
+  const historyState = react.useMemo(() => externalHistoryState || history.createEmptyHistoryState(), [externalHistoryState]);
   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: []
-  };
+    return history.registerHistory(editor, historyState, delay);
+  }, [delay, editor, historyState]);
 }
 
 /**
@@ -361,199 +60,6 @@ const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !==
 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 onPasteForPlainText(event, editor) {
-  event.preventDefault();
-  editor.update(() => {
-    const selection = lexical.$getSelection();
-    const clipboardData = event.clipboardData;
-
-    if (clipboardData != null && lexical.$isRangeSelection(selection)) {
-      clipboard.$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 htmlString = clipboard.getHtmlContent(editor);
-
-        if (htmlString !== null) {
-          clipboardData.setData('text/html', htmlString);
-        }
-
-        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.
- *
- * 
- */
-// 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;
-        }
-
-      case 'object':
-        {
-          editor.setEditorState(initialEditorState, setEditorOptions);
-          break;
-        }
-
-      case 'function':
-        {
-          editor.update(initialEditorState, updateOptions);
-          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.
- *
- * 
- */
-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.
  *
@@ -564,169 +70,9 @@ function useLexicalDragonSupport(editor) {
  */
 function usePlainTextSetup(editor, initialEditorState) {
   useLayoutEffect(() => {
-    const removeListener = editor.addListener('command', (type, payload) => {
-      const selection$1 = lexical.$getSelection();
-
-      if (!lexical.$isRangeSelection(selection$1)) {
-        return false;
-      }
-
-      switch (type) {
-        case 'deleteCharacter':
-          {
-            const isBackward = payload;
-            selection$1.deleteCharacter(isBackward);
-            return true;
-          }
-
-        case 'deleteWord':
-          {
-            const isBackward = payload;
-            selection$1.deleteWord(isBackward);
-            return true;
-          }
-
-        case 'deleteLine':
-          {
-            const isBackward = payload;
-            selection$1.deleteLine(isBackward);
-            return true;
-          }
-
-        case 'insertText':
-          {
-            const eventOrText = payload;
-
-            if (typeof eventOrText === 'string') {
-              selection$1.insertText(eventOrText);
-            } else {
-              const dataTransfer = eventOrText.dataTransfer;
-
-              if (dataTransfer != null) {
-                clipboard.$insertDataTransferForPlainText(dataTransfer, selection$1);
-              } else {
-                const data = eventOrText.data;
-
-                if (data) {
-                  selection$1.insertText(data);
-                }
-              }
-            }
-
-            return true;
-          }
-
-        case 'removeText':
-          selection$1.removeText();
-          return true;
-
-        case 'insertLineBreak':
-          const selectStart = payload;
-          selection$1.insertLineBreak(selectStart);
-          return true;
-
-        case 'insertParagraph':
-          selection$1.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 (selection.$shouldOverrideDefaultCharacterSelection(selection$1, true)) {
-              event.preventDefault();
-              selection.$moveCharacter(selection$1, isHoldingShift, true);
-              return true;
-            }
-
-            return false;
-          }
-
-        case 'keyArrowRight':
-          {
-            const event = payload;
-            const isHoldingShift = event.shiftKey;
-
-            if (selection.$shouldOverrideDefaultCharacterSelection(selection$1, false)) {
-              event.preventDefault();
-              selection.$moveCharacter(selection$1, 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);
-    initializeEditor(editor, initialEditorState);
-    return removeListener; // We only do this for init
+    return utils.mergeRegister(plainText.registerPlainText(editor, initialEditorState), dragon.registerDragonSupport(editor)); // We only do this for init
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor]);
-  useLexicalDragonSupport(editor);
 }
 
 /**