@magic-marker/prosemirror-suggest-changes 0.2.1-block-join.0 → 0.2.1-block-join.2

package/dist/ensureSelectionPlugin.d.ts

@@ -0,0 +1,13 @@
+import { Plugin, PluginKey } from "prosemirror-state";
+interface PluginState {
+    handleKeyDown: {
+        backspace: boolean;
+        delete: boolean;
+        arrowLeft: boolean;
+        arrowRight: boolean;
+    };
+}
+export declare const ensureSelectionKey: PluginKey<PluginState>;
+export declare function ensureSelection(): Plugin<PluginState>;
+export declare function isEnsureSelectionEnabled(): boolean;
+export {};

package/dist/ensureSelectionPlugin.js

@@ -0,0 +1,247 @@
+import { Plugin, PluginKey, TextSelection } from "prosemirror-state";
+import { getSuggestionMarks } from "./utils.js";
+export const ensureSelectionKey = new PluginKey("@handlewithcare/prosemirror-suggest-changes-ensure-selection");
+export function ensureSelection() {
+    return new Plugin({
+        key: ensureSelectionKey,
+        state: {
+            apply (tr, state) {
+                const newPluginState = tr.getMeta(ensureSelectionKey);
+                if (newPluginState) {
+                    return newPluginState;
+                }
+                return state;
+            },
+            init () {
+                return {
+                    handleKeyDown: {
+                        backspace: false,
+                        delete: false,
+                        arrowLeft: false,
+                        arrowRight: false
+                    }
+                };
+            }
+        },
+        props: {
+            handleKeyDown (view, event) {
+                const state = this.getState(view.state);
+                if (!state) return;
+                const newState = {
+                    ...state
+                };
+                newState.handleKeyDown.backspace = event.key === "Backspace";
+                newState.handleKeyDown.delete = event.key === "Delete";
+                newState.handleKeyDown.arrowLeft = event.key === "ArrowLeft";
+                newState.handleKeyDown.arrowRight = event.key === "ArrowRight";
+                if (newState.handleKeyDown.backspace !== state.handleKeyDown.backspace || newState.handleKeyDown.delete !== state.handleKeyDown.delete || newState.handleKeyDown.arrowLeft !== state.handleKeyDown.arrowLeft || newState.handleKeyDown.arrowRight !== state.handleKeyDown.arrowRight) {
+                    console.log("handleKeyDown newState =", newState);
+                    view.dispatch(view.state.tr.setMeta(ensureSelectionKey, newState));
+                }
+            }
+        },
+        appendTransaction (_transactions, oldState, newState) {
+            const state = newState;
+            if (!(state.selection instanceof TextSelection)) return null;
+            if (!(oldState.selection instanceof TextSelection)) return null;
+            const { $cursor } = state.selection;
+            if ($cursor == null) return null;
+            const $oldCursor = oldState.selection.$cursor;
+            let dir;
+            if ($oldCursor != null) {
+                dir = $cursor.pos > $oldCursor.pos ? 1 : -1;
+            } else {
+                const { $from, $to } = oldState.selection;
+                const distToFrom = $cursor.pos - $from.pos;
+                const distToTo = $to.pos - $cursor.pos;
+                // if cursor ended up closer to the right side of the selection (to),
+                // consider direction as 1 - "to the right"
+                dir = distToTo <= distToFrom ? 1 : -1;
+            }
+            const pluginState = ensureSelectionKey.getState(newState);
+            if (pluginState?.handleKeyDown.backspace || pluginState?.handleKeyDown.arrowLeft) {
+                dir = -1;
+            } else if (pluginState?.handleKeyDown.delete || pluginState?.handleKeyDown.arrowRight) {
+                dir = 1;
+            }
+            if (!isValidPos($cursor, dir)) {
+                console.groupCollapsed("$cursor is not valid, find new $cursor", $cursor.pos, {
+                    dir,
+                    oldSelection: oldState.selection,
+                    $cursor
+                });
+                let $pos = $cursor;
+                if (dir > 0) {
+                    $pos = findNextPos($pos, dir);
+                    if (!isValidPos($pos, dir)) {
+                        console.warn("failed to find next valid $cursor, trying prev");
+                        $pos = findPrevPos($pos, dir);
+                    }
+                } else {
+                    $pos = findPrevPos($pos, dir);
+                    if (!isValidPos($pos, dir)) {
+                        console.warn("failed to find prev valid $cursor, trying next");
+                        $pos = findNextPos($pos, dir);
+                    }
+                }
+                if (!isValidPos($pos, dir)) {
+                    console.warn("failed to find valid $cursor after all attempts", $pos.pos, "keeping the original $cursor", $cursor.pos, {
+                        $cursor,
+                        $pos
+                    });
+                    console.groupEnd();
+                    console.log("final $cursor (unchanged)", $cursor);
+                    return null;
+                }
+                console.info("found new valid $cursor", $pos.pos, {
+                    $pos
+                });
+                console.groupEnd();
+                console.log("final $cursor", $pos.pos, {
+                    $pos
+                });
+                return newState.tr.setSelection(TextSelection.create(newState.doc, $pos.pos, $pos.pos));
+            }
+            return null;
+        }
+    });
+}
+export function isEnsureSelectionEnabled() {
+    return true;
+}
+function findNextPos($initialPos, dir) {
+    console.groupCollapsed("finding next valid pos from $initialPos =", $initialPos);
+    let $pos = $initialPos;
+    while(!isValidPos($pos, dir) && ($pos.nodeAfter != null || $pos.depth > 0)){
+        if ($pos.nodeAfter != null) {
+            if ($pos.nodeAfter.isInline) {
+                // nodeAfter is inline - move in by one
+                $pos = $pos.doc.resolve($pos.pos + 1);
+                console.log("nodeAfter is inline, move to end of it", $pos);
+            } else {
+                // nodeAfter is not inline - find first inline descendant in nodeAfter
+                let localStartPos = null;
+                $pos.nodeAfter.descendants((child, pos)=>{
+                    if (!child.isInline) return true;
+                    if (localStartPos !== null) return false;
+                    localStartPos = pos;
+                    return false;
+                });
+                if (localStartPos !== null) {
+                    // we have a local position of a first inline descendant - convert it to global position
+                    // +1 to "enter" the node, and add local pos
+                    $pos = $pos.doc.resolve($pos.pos + 1 + localStartPos);
+                    console.log("found first inline descendant, move to start of it", $pos);
+                } else {
+                    // unable to find first inline descendant of nodeAfter - just skip nodeAfter
+                    $pos = $pos.doc.resolve($pos.pos + $pos.nodeAfter.nodeSize);
+                    console.log("unable to find first inline descendant, move to end of nodeAfter", $pos);
+                }
+            }
+        } else if ($pos.depth > 0) {
+            // nodeAfter is null - go up
+            $pos = $pos.doc.resolve($pos.after());
+            console.log("nodeAfter is null, go up", $pos);
+        }
+    }
+    if (isValidPos($pos, dir)) {
+        console.log("found next valid $pos", $pos);
+    } else {
+        console.warn("failed to find next valid $pos", $pos, "keep initial pos", $initialPos);
+    }
+    console.groupEnd();
+    return isValidPos($pos, dir) ? $pos : $initialPos;
+}
+function findPrevPos($initialPos, dir) {
+    console.groupCollapsed("finding prev valid pos from $initialPos =", $initialPos);
+    let $pos = $initialPos;
+    while(!isValidPos($pos, dir) && ($pos.nodeBefore != null || $pos.depth > 0)){
+        if ($pos.nodeBefore != null) {
+            if ($pos.nodeBefore.isInline) {
+                // nodeBefore is inline - move in by one
+                $pos = $pos.doc.resolve($pos.pos - 1);
+                console.log("nodeBefore is inline, move to start of it", $pos);
+            } else {
+                // nodeBefore is not inline - find last inline descendant in nodeBefore
+                let localEndPos = null;
+                $pos.nodeBefore.descendants((child, pos)=>{
+                    if (!child.isInline) return true;
+                    localEndPos = pos + child.nodeSize;
+                    return false;
+                });
+                if (localEndPos !== null) {
+                    // we have a local position of a last inline descendant - convert it to global position
+                    // move pos to start of node before, add 1 to "enter" nodeBefore, then add local pos
+                    $pos = $pos.doc.resolve($pos.pos - $pos.nodeBefore.nodeSize + 1 + localEndPos);
+                    console.log("found last inline descendant, move to end of it", $pos);
+                } else {
+                    // unable to find last inline descendant of nodeBefore - just skip nodeBefore
+                    $pos = $pos.doc.resolve($pos.pos - $pos.nodeBefore.nodeSize);
+                    console.log("unable to find last inline descendant, move to start of nodeBefore", $pos);
+                }
+            }
+        } else if ($pos.depth > 0) {
+            // nodeBefore is null - go up
+            $pos = $pos.doc.resolve($pos.before());
+            console.log("nodeBefore is null, go up", $pos);
+        }
+    }
+    if (isValidPos($pos, dir)) {
+        console.log("found prev valid $pos", $pos);
+    } else {
+        console.warn("failed to find prev valid $pos", $pos, "keep initial pos", $initialPos);
+    }
+    console.groupEnd();
+    return isValidPos($pos, dir) ? $pos : $initialPos;
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function isValidPos($pos, _dir) {
+    // text selection is only valid in nodes that allow inline content
+    // https://github.com/ProseMirror/prosemirror-state/blob/1.4.4/src/selection.ts#L219
+    if (!$pos.parent.inlineContent) {
+        console.warn("cursor invalid", "not in inlineContent node", $pos);
+        return false;
+    }
+    const { deletion } = getSuggestionMarks($pos.doc.type.schema);
+    //   moving right - zwsp is on the right - skip forward
+    //   if (dir > 0 && $pos.nodeAfter?.text?.startsWith(ZWSP)) {
+    //     console.warn(
+    //       "cursor invalid",
+    //       "moving right - zwsp is on the right - skip forward",
+    //       $pos,
+    //     );
+    //     return false;
+    //   }
+    //   //   moving left - zwsp is on the left - skip backward
+    //   if (dir < 0 && $pos.nodeBefore?.text?.startsWith(ZWSP)) {
+    //     console.warn(
+    //       "cursor invalid",
+    //       "moving left - zwsp is on the left - skip backward",
+    //       $pos,
+    //     );
+    //     return false;
+    //   }
+    const deletionBefore = deletion.isInSet($pos.nodeBefore?.marks ?? []);
+    const deletionAfter = deletion.isInSet($pos.nodeAfter?.marks ?? []);
+    // between two deletions
+    if (deletionBefore && deletionAfter) {
+        console.warn("cursor invalid", "between two deletions", $pos);
+        return false;
+    }
+    // between a deletion and a node boundary
+    if (deletionBefore && $pos.nodeAfter == null) {
+        console.warn("cursor invalid", "between a deletion and a node boundary", $pos);
+        return false;
+    }
+    // between a node boundary and a deletion, if deletion is not anchor
+    if ($pos.nodeBefore == null && deletionAfter && deletionAfter.attrs["type"] !== "anchor") {
+        console.warn("cursor invalid", "between a node boundary and a deletion", $pos);
+        return false;
+    }
+    // deletion is on the left, non-deletion is on the right
+    if (deletionBefore && $pos.nodeAfter != null && !deletionAfter) {
+        console.warn("cursor invalid", "deletion is on the left, non-deletion is on the right", $pos);
+        return false;
+    }
+    return true;
+}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-export { addSuggestionMarks, insertion, deletion, modification, } from "./schema.js";
+export { addSuggestionMarks, insertion, deletion, modification, hiddenDeletion, } from "./schema.js";
 export { selectSuggestion, revertSuggestion, revertSuggestions, applySuggestion, applySuggestions, enableSuggestChanges, disableSuggestChanges, toggleSuggestChanges, } from "./commands.js";
 export { suggestChanges, suggestChangesKey, isSuggestChangesEnabled, } from "./plugin.js";
 export { withSuggestChanges, transformToSuggestionTransaction, } from "./withSuggestChanges.js";
+export { ensureSelection as experimental_ensureSelection, ensureSelectionKey as experimental_ensureSelectionKey, isEnsureSelectionEnabled as experimental_isEnsureSelectionEnabled, } from "./ensureSelectionPlugin.js";

package/dist/index.js

@@ -1,4 +1,5 @@
-export { addSuggestionMarks, insertion, deletion, modification } from "./schema.js";
+export { addSuggestionMarks, insertion, deletion, modification, hiddenDeletion } from "./schema.js";
 export { selectSuggestion, revertSuggestion, revertSuggestions, applySuggestion, applySuggestions, enableSuggestChanges, disableSuggestChanges, toggleSuggestChanges } from "./commands.js";
 export { suggestChanges, suggestChangesKey, isSuggestChangesEnabled } from "./plugin.js";
 export { withSuggestChanges, transformToSuggestionTransaction } from "./withSuggestChanges.js";
+export { ensureSelection as experimental_ensureSelection, ensureSelectionKey as experimental_ensureSelectionKey, isEnsureSelectionEnabled as experimental_isEnsureSelectionEnabled } from "./ensureSelectionPlugin.js";

package/dist/plugin.js

@@ -1,4 +1,4 @@
-import { Plugin, PluginKey, TextSelection } from "prosemirror-state";
+import { Plugin, PluginKey } from "prosemirror-state";
 import { getSuggestionDecorations } from "./decorations.js";
 export const suggestChangesKey = new PluginKey("@handlewithcare/prosemirror-suggest-changes");
 export function suggestChanges() {
@@ -17,19 +17,7 @@ export function suggestChanges() {
             }
         },
         props: {
-            decorations: getSuggestionDecorations,
-            // Add a custom keydown handler that skips over any zero-width
-            // spaces that we've inserted so that users aren't aware of them
-            handleKeyDown (view, event) {
-                if (event.key === "ArrowRight" && view.state.selection instanceof TextSelection && view.state.selection.empty && view.state.selection.$cursor?.nodeAfter?.text?.startsWith("\u200B")) {
-                    view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, view.state.selection.$cursor.pos + 1)));
-                }
-                if (event.key === "ArrowLeft" && view.state.selection instanceof TextSelection && view.state.selection.empty && view.state.selection.$cursor?.nodeBefore?.text?.endsWith("\u200B")) {
-                    view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, view.state.selection.$cursor.pos - 1)));
-                }
-                // Never block any other handlers from running after
-                return false;
-            }
+            decorations: getSuggestionDecorations
         }
     });
 }

package/dist/prependDeletionsWithZWSP.d.ts

@@ -0,0 +1,4 @@
+import { type Transaction } from "prosemirror-state";
+export declare function prependDeletionsWithZWSP(transaction: Transaction, opts?: {
+    experimental_deletions?: "hidden" | "visible";
+}): Transaction;

package/dist/prependDeletionsWithZWSP.js

@@ -0,0 +1,54 @@
+import { getSuggestionMarks } from "./utils.js";
+import { Transform } from "prosemirror-transform";
+import { ZWSP } from "./constants.js";
+export function prependDeletionsWithZWSP(transaction, opts) {
+    console.groupCollapsed("prepend deletions with zwsp");
+    const { deletion } = getSuggestionMarks(transaction.doc.type.schema);
+    let transform = new Transform(transaction.doc);
+    transform.doc.descendants((node, pos)=>{
+        const mark = node.marks.find((mark)=>mark.type === deletion && mark.attrs["type"] === "anchor");
+        if (!node.isText || mark == null) return true;
+        const mappedPos = transform.mapping.map(pos);
+        transform.delete(mappedPos, mappedPos + node.nodeSize);
+        console.log("found zwsp, deleted", {
+            from: mappedPos,
+            to: mappedPos + node.nodeSize
+        });
+        return true;
+    });
+    transform.steps.forEach((step)=>{
+        transaction.step(step);
+    });
+    console.log(`added ${String(transform.steps.length)} remove zwsp steps to tr`);
+    if (opts?.experimental_deletions !== "hidden") {
+        console.log("deletions are visible, skipping prepend zwsp");
+        console.groupEnd();
+        return transaction;
+    }
+    transform = new Transform(transaction.doc);
+    transform.doc.descendants((node, pos)=>{
+        if (!node.inlineContent) return true;
+        const mark = node.firstChild?.marks.find((mark)=>mark.type === deletion);
+        if (mark == null) return true;
+        if (mark.attrs["type"] === "anchor") return true;
+        const zwspNode = transform.doc.type.schema.text(ZWSP, [
+            deletion.create({
+                type: "anchor",
+                id: mark.attrs["id"]
+            })
+        ]);
+        const mappedPos = transform.mapping.map(pos);
+        transform.insert(mappedPos + 1, zwspNode);
+        console.log("found first-child-deletion inline content node, inserted zwsp at", {
+            pos,
+            mappedPos
+        });
+        return true;
+    });
+    transform.steps.forEach((step)=>{
+        transaction.step(step);
+    });
+    console.log(`added ${String(transform.steps.length)} add zwsp steps to tr`);
+    console.groupEnd();
+    return transaction;
+}

package/dist/schema.d.ts

@@ -1,9 +1,12 @@
 import { type MarkSpec } from "prosemirror-model";
 export declare const deletion: MarkSpec;
+export declare const hiddenDeletion: MarkSpec;
 export declare const insertion: MarkSpec;
 export declare const modification: MarkSpec;
 /**
  * Add the deletion, insertion, and modification marks to
  * the provided MarkSpec map.
  */
-export declare function addSuggestionMarks<Marks extends string>(marks: Record<Marks, MarkSpec>): Record<Marks | "deletion" | "insertion" | "modification", MarkSpec>;
+export declare function addSuggestionMarks<Marks extends string>(marks: Record<Marks, MarkSpec>, opts?: {
+    experimental_deletions?: "hidden" | "visible";
+}): Record<Marks | "deletion" | "insertion" | "modification", MarkSpec>;

package/dist/schema.js

@@ -43,6 +43,27 @@ export const deletion = {
         }
     ]
 };
+export const hiddenDeletion = {
+    ...deletion,
+    toDOM (mark, inline) {
+        return [
+            "del",
+            {
+                "data-id": JSON.stringify(mark.attrs["id"]),
+                "data-inline": String(inline),
+                ...!inline && {
+                    style: "display: block"
+                },
+                ...inline && mark.attrs["type"] !== "anchor" && {
+                    style: "font-size: 0px;"
+                },
+                "data-type": JSON.stringify(mark.attrs["type"]),
+                "data-data": JSON.stringify(mark.attrs["data"])
+            },
+            0
+        ];
+    }
+};
 export const insertion = {
     inclusive: false,
     excludes: "deletion modification insertion",
@@ -140,10 +161,10 @@ export const modification = {
 /**
  * Add the deletion, insertion, and modification marks to
  * the provided MarkSpec map.
- */ export function addSuggestionMarks(marks) {
+ */ export function addSuggestionMarks(marks, opts) {
     return {
         ...marks,
-        deletion,
+        deletion: opts?.experimental_deletions === "hidden" ? hiddenDeletion : deletion,
         insertion,
         modification
     };

package/dist/withSuggestChanges.d.ts

@@ -24,4 +24,6 @@ export declare function transformToSuggestionTransaction(originalTransaction: Tr
  * applying them, e.g. by marking a range with the deletion mark rather
  * than removing it from the document.
  */
-export declare function withSuggestChanges(dispatchTransaction?: EditorView["dispatch"], generateId?: (schema: Schema, doc?: Node) => SuggestionId): EditorView["dispatch"];
+export declare function withSuggestChanges(dispatchTransaction?: EditorView["dispatch"], generateId?: (schema: Schema, doc?: Node) => SuggestionId, opts?: {
+    experimental_deletions?: "hidden" | "visible";
+}): EditorView["dispatch"];

package/dist/withSuggestChanges.js

@@ -9,6 +9,7 @@ import { suggestReplaceStep } from "./replaceStep.js";
 import { isSuggestChangesEnabled, suggestChangesKey } from "./plugin.js";
 import { generateNextNumberId } from "./generateId.js";
 import { getSuggestionMarks } from "./utils.js";
+import { prependDeletionsWithZWSP } from "./prependDeletionsWithZWSP.js";
 function getStepHandler(step) {
     if (step instanceof ReplaceStep) {
         return suggestReplaceStep;
@@ -102,13 +103,16 @@ function getStepHandler(step) {
  * These modified transactions will suggest changes instead of directly
  * applying them, e.g. by marking a range with the deletion mark rather
  * than removing it from the document.
- */ export function withSuggestChanges(dispatchTransaction, generateId) {
+ */ export function withSuggestChanges(dispatchTransaction, generateId, opts) {
     const dispatch = dispatchTransaction ?? function(tr) {
         this.updateState(this.state.apply(tr));
     };
     return function dispatchTransaction(tr) {
         const ySyncMeta = tr.getMeta("y-sync$") ?? {};
         const transaction = isSuggestChangesEnabled(this.state) && !tr.getMeta("history$") && !tr.getMeta("collab$") && !ySyncMeta.isUndoRedoOperation && !ySyncMeta.isChangeOrigin && !("skip" in (tr.getMeta(suggestChangesKey) ?? {})) ? transformToSuggestionTransaction(tr, this.state, generateId) : tr;
+        if (transaction.docChanged) {
+            prependDeletionsWithZWSP(transaction, opts);
+        }
         dispatch.call(this, transaction);
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magic-marker/prosemirror-suggest-changes",
-  "version": "0.2.1-block-join.0",
+  "version": "0.2.1-block-join.2",
   "license": "MIT",
   "type": "module",
   "module": "dist/index.js",