feat: restore selections when undo/redo

loro-dev · May 23, 2024 · b786f15 · b786f15
1 parent c9d0056
commit b786f15
Show file tree

Hide file tree

Showing 8 changed files with 215 additions and 48 deletions.
diff --git a/examples/stories/package.json b/examples/stories/package.json
@@ -12,7 +12,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "loro-crdt": "^0.16.1",
+    "loro-crdt": "^0.16.2",
     "loro-prosemirror": "link:../..",
     "prosemirror-commands": "^1.5.2",
     "prosemirror-example-setup": "^1.2.2",

diff --git a/examples/stories/pnpm-lock.yaml b/examples/stories/pnpm-lock.yaml
diff --git a/examples/stories/src/stories/Editor.stories.tsx b/examples/stories/src/stories/Editor.stories.tsx
@@ -1,5 +1,5 @@
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 
 import { Editor } from './Editor';
 import { Loro } from 'loro-crdt';
@@ -16,9 +16,16 @@ const meta = {
 } satisfies Meta<typeof Editor>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 
-export const Basic: Story = {};
+export const Basic = () => {
+  const loroARef = useRef<Loro>(createLoro());
+  const idA = loroARef.current.peerIdStr;
+  const awarenessA = useRef<CursorAwareness>(new CursorAwareness(idA));
+  return <div>
+    <Editor loro={loroARef.current} awareness={awarenessA.current} />
+  </div>
+
+};
 
 function createLoro() {
   const doc = new Loro();

diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
   "license": "ISC",
   "dependencies": {
     "lib0": "^0.2.42",
-    "loro-crdt": "^0.16.1"
+    "loro-crdt": "^0.16.2"
   },
   "peerDependencies": {
     "prosemirror-model": "^1.18.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/cursor-plugin.ts b/src/cursor-plugin.ts
@@ -1,7 +1,7 @@
 import { Awareness, Container, ContainerID, Cursor, Loro, LoroList, LoroText, PeerID } from "loro-crdt";
 import { EditorState, Plugin, PluginKey, Selection } from "prosemirror-state";
 import { Decoration, DecorationAttrs, DecorationSet } from "prosemirror-view";
-import { loroSyncPluginKey } from "./sync-plugin";
+import { LoroSyncPluginState, loroSyncPluginKey } from "./sync-plugin";
 import { Node } from "prosemirror-model";
 import { CHILDREN_KEY, LoroDocType, LoroNode, LoroNodeMapping, WEAK_NODE_TO_LORO_CONTAINER_MAPPING } from "./lib";
 import { CursorAwareness, cursorEq } from "./awareness";
@@ -37,10 +37,10 @@ function createDecorations(
       continue;
     }
 
-    const [focus, focusCursorUpdate] = cursorToAbsolutePosition(state.doc, cursor.focus, doc as LoroDocType, loroState.mapping);
+    const [focus, focusCursorUpdate] = cursorToAbsolutePosition(cursor.focus, doc as LoroDocType, loroState.mapping);
     d.push(Decoration.widget(focus, createCursor(peer as PeerID)));
     if (!cursorEq(cursor.anchor, cursor.focus)) {
-      const [anchor, anchorCursorUpdate] = cursorToAbsolutePosition(state.doc, cursor.anchor, doc as LoroDocType, loroState.mapping);
+      const [anchor, anchorCursorUpdate] = cursorToAbsolutePosition(cursor.anchor, doc as LoroDocType, loroState.mapping);
       d.push(Decoration.inline(Math.min(anchor, focus), Math.max(anchor, focus), createSelection(peer as PeerID)));
       if (focusCursorUpdate || anchorCursorUpdate) {
         awareness.setLocal({
@@ -135,18 +135,7 @@ export const LoroCursorPlugin = (
         const pmRootNode = view.state.doc;
         if (view.hasFocus()) {
           const selection = getSelection(view.state);
-          const anchor = absolutePositionToCursor(
-            pmRootNode,
-            selection.anchor,
-            loroState.doc as LoroDocType,
-            loroState.mapping,
-          );
-          const focus = selection.head == selection.anchor ? anchor : absolutePositionToCursor(
-            pmRootNode,
-            selection.head,
-            loroState.doc as LoroDocType,
-            loroState.mapping,
-          );
+          const { anchor, focus } = convertPmSelectionToCursors(pmRootNode, selection, loroState);
           if (
             current == null ||
             !cursorEq(current.anchor, anchor) ||
@@ -184,6 +173,22 @@ export const LoroCursorPlugin = (
 };
 
 
+export function convertPmSelectionToCursors(pmRootNode: Node, selection: Selection, loroState: LoroSyncPluginState) {
+  const anchor = absolutePositionToCursor(
+    pmRootNode,
+    selection.anchor,
+    loroState.doc as LoroDocType,
+    loroState.mapping
+  );
+  const focus = selection.head == selection.anchor ? anchor : absolutePositionToCursor(
+    pmRootNode,
+    selection.head,
+    loroState.doc as LoroDocType,
+    loroState.mapping
+  );
+  return { anchor, focus };
+}
+
 function absolutePositionToCursor(pmRootNode: Node, anchor: number, doc: LoroDocType, mapping: LoroNodeMapping): Cursor | undefined {
   const pos = pmRootNode.resolve(anchor);
   const nodeParent = pos.node(pos.depth);
@@ -230,7 +235,7 @@ function absolutePositionToCursor(pmRootNode: Node, anchor: number, doc: LoroDoc
 }
 
 
-function cursorToAbsolutePosition(_pmRootNode: Node, cursor: Cursor, doc: LoroDocType, mapping: LoroNodeMapping): [number, Cursor | undefined] {
+export function cursorToAbsolutePosition(cursor: Cursor, doc: LoroDocType, mapping: LoroNodeMapping): [number, Cursor | undefined] {
   const containerId = cursor.containerId()
   let index = -1;
   let targetChildId: ContainerID;

diff --git a/src/sync-plugin.ts b/src/sync-plugin.ts
@@ -34,11 +34,11 @@ type PluginTransactionType =
   };
 
 export interface LoroSyncPluginProps {
-  doc: Loro;
+  doc: LoroDocType;
   mapping?: LoroNodeMapping;
 }
 
-interface LoroSyncPluginState extends LoroSyncPluginProps {
+export interface LoroSyncPluginState extends LoroSyncPluginProps {
   changedBy: "local" | "import" | "checkout";
   mapping: LoroNodeMapping;
   snapshot?: Loro | null;