@lexical/history 0.1.17

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Meta Platforms, Inc. and affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/LexicalHistory.d.ts

@@ -0,0 +1,31 @@
+/**
+ * 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.
+ *
+ */
+import type {
+  EditorState,
+  GridSelection,
+  LexicalEditor,
+  NodeSelection,
+  RangeSelection,
+} from 'lexical';
+
+export type HistoryStateEntry = {
+  editor: LexicalEditor;
+  editorState: EditorState;
+  undoSelection?: RangeSelection | NodeSelection | GridSelection | null;
+};
+export type HistoryState = {
+  current: null | HistoryStateEntry;
+  redoStack: Array<HistoryStateEntry>;
+  undoStack: Array<HistoryStateEntry>;
+};
+export function registerHistory(
+  editor: LexicalEditor,
+  historyState: HistoryState,
+  delay: number,
+): () => void;
+export function createEmptyHistoryState(): HistoryState;

package/LexicalHistory.dev.js

@@ -0,0 +1,315 @@
+/**
+ * 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 utils = require('@lexical/utils');
+var lexical = require('lexical');
+
+/**
+ * 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, dirtyLeaves, dirtyElements) {
+  const nodeMap = editorState._nodeMap;
+  const nodes = [];
+
+  for (const dirtyLeafKey of dirtyLeaves) {
+    const dirtyLeaf = nodeMap.get(dirtyLeafKey);
+
+    if (dirtyLeaf !== undefined) {
+      nodes.push(dirtyLeaf);
+    }
+  }
+
+  for (const [dirtyElementKey, intentionallyMarkedAsDirty] of dirtyElements) {
+    if (!intentionallyMarkedAsDirty) {
+      continue;
+    }
+
+    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 redo(editor, historyState) {
+  const redoStack = historyState.redoStack;
+  const undoStack = historyState.undoStack;
+
+  if (redoStack.length !== 0) {
+    const current = historyState.current;
+
+    if (current !== null) {
+      undoStack.push(current);
+      editor.dispatchCommand(lexical.CAN_UNDO_COMMAND, true);
+    }
+
+    const historyStateEntry = redoStack.pop();
+
+    if (redoStack.length === 0) {
+      editor.dispatchCommand(lexical.CAN_REDO_COMMAND, false);
+    }
+
+    historyState.current = historyStateEntry;
+    historyStateEntry.editor.setEditorState(historyStateEntry.editorState, {
+      tag: 'historic'
+    });
+  }
+}
+
+function undo(editor, historyState) {
+  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.dispatchCommand(lexical.CAN_REDO_COMMAND, true);
+    }
+
+    if (undoStack.length === 0) {
+      editor.dispatchCommand(lexical.CAN_UNDO_COMMAND, false);
+    }
+
+    historyState.current = historyStateEntry;
+    historyStateEntry.editor.setEditorState(historyStateEntry.editorState.clone(historyStateEntry.undoSelection), {
+      tag: 'historic'
+    });
+  }
+}
+
+function clearHistory(historyState) {
+  historyState.undoStack = [];
+  historyState.redoStack = [];
+  historyState.current = null;
+}
+
+function registerHistory(editor, historyState, delay) {
+  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.dispatchCommand(lexical.CAN_UNDO_COMMAND, true);
+      }
+    } else if (mergeAction === DISCARD_HISTORY_CANDIDATE) {
+      return;
+    } // Else we merge
+
+
+    historyState.current = {
+      editor,
+      editorState
+    };
+  };
+
+  const unregisterCommandListener = utils.mergeRegister(editor.registerCommand(lexical.UNDO_COMMAND, () => {
+    undo(editor, historyState);
+    return true;
+  }, EditorPriority), editor.registerCommand(lexical.REDO_COMMAND, () => {
+    redo(editor, historyState);
+    return true;
+  }, EditorPriority), editor.registerCommand(lexical.CLEAR_EDITOR_COMMAND, () => {
+    clearHistory(historyState);
+    return false;
+  }, EditorPriority), editor.registerCommand(lexical.CLEAR_HISTORY_COMMAND, () => {
+    clearHistory(historyState);
+    return true;
+  }, EditorPriority), editor.registerUpdateListener(applyChange));
+  const unregisterUpdateListener = editor.registerUpdateListener(applyChange);
+  return () => {
+    unregisterCommandListener();
+    unregisterUpdateListener();
+  };
+}
+function createEmptyHistoryState() {
+  return {
+    current: null,
+    redoStack: [],
+    undoStack: []
+  };
+}
+
+exports.createEmptyHistoryState = createEmptyHistoryState;
+exports.registerHistory = registerHistory;

package/LexicalHistory.js

@@ -0,0 +1,9 @@
+/**
+ * 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'
+const LexicalHistory = process.env.NODE_ENV === 'development' ? require('./LexicalHistory.dev.js') : require('./LexicalHistory.prod.js')
+module.exports = LexicalHistory;

package/LexicalHistory.js.flow

@@ -0,0 +1,32 @@
+/**
+ * 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,
+  GridSelection,
+  LexicalEditor,
+  NodeSelection,
+  RangeSelection,
+} from 'lexical';
+
+export type HistoryStateEntry = {
+  editor: LexicalEditor,
+  editorState: EditorState,
+  undoSelection?: RangeSelection | NodeSelection | GridSelection | null,
+};
+export type HistoryState = {
+  current: null | HistoryStateEntry,
+  redoStack: Array<HistoryStateEntry>,
+  undoStack: Array<HistoryStateEntry>,
+};
+declare export function registerHistory(
+  editor: LexicalEditor,
+  historyState: HistoryState,
+  delay: number,
+): () => void;
+declare export function createEmptyHistoryState(): HistoryState;

package/LexicalHistory.prod.js

@@ -0,0 +1,14 @@
+/**
+ * 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.
+ */
+var g=require("@lexical/utils"),u=require("lexical");
+function v(b,a,k,h,m){if(null===b||0===k.size&&0===h.size)return 0;var e=a._selection,c=b._selection;if(m)return 1;if(!(u.$isRangeSelection(e)&&u.$isRangeSelection(c)&&c.isCollapsed()&&e.isCollapsed()))return 0;m=a._nodeMap;const d=[];for(const f of k)k=m.get(f),void 0!==k&&d.push(k);for(const [f,l]of h)l&&(h=m.get(f),void 0===h||u.$isRootNode(h)||d.push(h));if(0===d.length)return 0;if(1<d.length)return h=a._nodeMap,a=h.get(e.anchor.key),c=h.get(c.anchor.key),a&&c&&!b._nodeMap.has(a.__key)&&u.$isTextNode(a)&&
+1===a.__text.length&&1===e.anchor.offset?2:0;a=d[0];b=b._nodeMap.get(a.__key);if(!u.$isTextNode(b)||!u.$isTextNode(a)||b.__mode!==a.__mode)return 0;b=b.__text;a=a.__text;if(b===a)return 0;e=e.anchor;c=c.anchor;if(e.key!==c.key||"text"!==e.type)return 0;e=e.offset;c=c.offset;b=a.length-b.length;return 1===b&&c===e-1?2:-1===b&&c===e+1?3:-1===b&&c===e?4:0}
+function w(b,a){let k=Date.now(),h=0;return(m,e,c,d,f,l)=>{const p=Date.now();if(l.has("historic"))return h=0,k=p,2;const n=v(m,e,d,f,b.isComposing()),t=(()=>{const r=l.has("history-push");if(!r&&l.has("history-merge"))return 0;if(null===m)return 1;var q=e._selection;const x=m._selection;if(!(0<d.size||0<f.size))return null===x&&null!==q?0:2;q=null===c||c.editor===b;return!1===r&&0!==n&&n===h&&p<k+a&&q?0:1})();k=p;h=n;return t}}
+exports.createEmptyHistoryState=function(){return{current:null,redoStack:[],undoStack:[]}};
+exports.registerHistory=function(b,a,k){const h=w(b,k);k=({editorState:c,prevEditorState:d,dirtyLeaves:f,dirtyElements:l,tags:p})=>{const n=a.current,t=a.redoStack,r=a.undoStack,q=null===n?null:n.editorState;if(null===n||c!==q){f=h(d,c,n,f,l,p);if(1===f)0!==t.length&&(a.redoStack=[]),null!==n&&(r.push({...n,undoSelection:d.read(u.$getSelection)}),b.dispatchCommand(u.CAN_UNDO_COMMAND,!0));else if(2===f)return;a.current={editor:b,editorState:c}}};const m=g.mergeRegister(b.registerCommand(u.UNDO_COMMAND,
+()=>{const c=a.redoStack,d=a.undoStack;if(0!==d.length){const f=a.current,l=d.pop();null!==f&&(c.push(f),b.dispatchCommand(u.CAN_REDO_COMMAND,!0));0===d.length&&b.dispatchCommand(u.CAN_UNDO_COMMAND,!1);a.current=l;l.editor.setEditorState(l.editorState.clone(l.undoSelection),{tag:"historic"})}return!0},0),b.registerCommand(u.REDO_COMMAND,()=>{const c=a.redoStack;var d=a.undoStack;if(0!==c.length){const f=a.current;null!==f&&(d.push(f),b.dispatchCommand(u.CAN_UNDO_COMMAND,!0));d=c.pop();0===c.length&&
+b.dispatchCommand(u.CAN_REDO_COMMAND,!1);a.current=d;d.editor.setEditorState(d.editorState,{tag:"historic"})}return!0},0),b.registerCommand(u.CLEAR_EDITOR_COMMAND,()=>{a.undoStack=[];a.redoStack=[];a.current=null;return!1},0),b.registerCommand(u.CLEAR_HISTORY_COMMAND,()=>{a.undoStack=[];a.redoStack=[];a.current=null;return!0},0),b.registerUpdateListener(k)),e=b.registerUpdateListener(k);return()=>{m();e()}};

package/README.md

@@ -0,0 +1,28 @@
+# `@lexical/history`
+
+This package contains history helpers for Lexical.
+
+### Methods
+
+#### `registerHistory`
+
+Registers necessary listeners to manage undo/redo history stack and related editor commands. It returns `unregister` callback that cleans up all listeners and should be called on editor unmount.
+
+```js
+function registerHistory(
+  editor: LexicalEditor,
+  externalHistoryState: HistoryState,
+  delay: number,
+): () => void
+```
+
+### Commands
+
+History package handles `undo`, `redo` and `clearHistory` commands. It also triggers `canUndo` and `canRedo` commands when history state is changed. These commands could be used to work with history state:
+
+```jsx
+<Toolbar>
+  <Button onClick={() => editor.dispatchCommand('undo')}>Undo</Button>
+  <Button onClick={() => editor.dispatchCommand('redo')}>Redo</Button>
+</Toolbar>
+```

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@lexical/history",
+  "description": "This package contains selection history helpers for Lexical.",
+  "keywords": [
+    "lexical",
+    "editor",
+    "rich-text",
+    "history"
+  ],
+  "license": "MIT",
+  "version": "0.1.17",
+  "main": "LexicalHistory.js",
+  "peerDependencies": {
+    "lexical": "0.1.17"
+  },
+  "dependencies": {
+    "@lexical/utils": "0.1.17"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/lexical",
+    "directory": "packages/lexical-history"
+  }
+}