WIP: Replace zero-width spaces with block marks

Author: smoores-dev

.yarn/versions/a42fcf85.yml

@@ -0,0 +1,2 @@
+releases:
+  "@handlewithcare/prosemirror-suggest-changes": minor

demo/main.ts

@@ -39,23 +39,26 @@ export const schema = new Schema({
   nodes: {
     ...nodes,
     image: { ...nodes.image, group: "block", inline: false },
-    doc: { ...nodes.doc, marks: "insertion deletion modification" },
+    doc: {
+      ...nodes.doc,
+      marks: "insertion deletion modification blockBoundarySuggestion",
+    },
     ordered_list: {
       ...orderedList,
       group: "block",
       content: "list_item+",
-      marks: "insertion deletion modification",
+      marks: "insertion deletion modification blockBoundarySuggestion",
     },
     bullet_list: {
       ...bulletList,
       group: "block",
       content: "list_item+",
-      marks: "insertion deletion modification",
+      marks: "insertion deletion modification blockBoundarySuggestion",
     },
     list_item: {
       ...listItem,
       content: "block+",
-      marks: "insertion deletion modification",
+      marks: "insertion deletion modification blockBoundarySuggestion",
     },
   },
   marks: addSuggestionMarks(marks),

src/commands.ts

@@ -100,9 +100,6 @@ function applySuggestionsToTransform(
     const insertionTo = insertionFrom + child.nodeSize;
     if (child.isInline) {
       tr.removeMark(insertionFrom, insertionTo, markTypeToApply);
-      if (child.text === "\u200B") {
-        tr.delete(insertionFrom, insertionTo);
-      }
     } else {
       tr.removeNodeMark(insertionFrom, markTypeToApply);
     }

src/decorations.ts

@@ -1,11 +1,11 @@
-import type { Node } from "prosemirror-model";
 import type { EditorState } from "prosemirror-state";
 import {
   Decoration,
   DecorationSet,
   type DecorationSource,
 } from "prosemirror-view";
 import { getSuggestionMarks } from "./utils.js";
+import { type BoundarySuggestion } from "./schema.js";
 
 function pilcrow() {
   const span = document.createElement("span");
@@ -14,13 +14,12 @@ function pilcrow() {
 }
 
 export function getSuggestionDecorations(state: EditorState): DecorationSource {
-  const { deletion, insertion } = getSuggestionMarks(state.schema);
+  const { deletion, insertion, blockBoundarySuggestion } = getSuggestionMarks(
+    state.schema,
+  );
 
   const changeDecorations: Decoration[] = [];
-  let lastParentNode: Node | null = null;
-  let lastTextNode: Node | null = null;
-  let lastTextNodeEndPos = 0;
-  state.doc.descendants((node, pos, parent) => {
+  state.doc.descendants((node, pos) => {
     if (node.isTextblock && node.childCount) {
       if (node.children.every((child) => deletion.isInSet(child.marks))) {
         changeDecorations.push(
@@ -37,65 +36,26 @@ export function getSuggestionDecorations(state: EditorState): DecorationSource {
         );
       }
     }
-    if (node.type.name !== "text") return true;
-    const currentDeletionMark = node.marks.find(
-      (mark) => mark.type === deletion,
-    );
-    const currentInsertionMark = node.marks.find(
-      (mark) => mark.type === insertion,
-    );
 
-    const lastDeletionMark = lastTextNode?.marks.find(
-      (mark) => mark.type === deletion,
-    );
-    const lastInsertionMark = lastTextNode?.marks.find(
-      (mark) => mark.type === insertion,
-    );
-    const widgetPos = lastTextNodeEndPos;
-    lastTextNode = node;
-    lastTextNodeEndPos = pos + node.nodeSize;
-    if (parent === lastParentNode) {
-      lastParentNode = parent;
-      return true;
-    }
-    lastParentNode = parent;
-    if (
-      (!currentDeletionMark || !lastDeletionMark) &&
-      (!currentInsertionMark || !lastInsertionMark)
-    ) {
-      return true;
-    }
-    if (
-      currentDeletionMark?.attrs["id"] !== lastDeletionMark?.attrs["id"] &&
-      currentInsertionMark?.attrs["id"] !== lastInsertionMark?.attrs["id"]
-    ) {
-      return true;
-    }
-    if (currentDeletionMark) {
-      changeDecorations.push(
-        Decoration.widget(widgetPos, pilcrow, {
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-          key: currentDeletionMark.attrs["id"],
-          marks: [
-            deletion.create({
-              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-              id: currentDeletionMark.attrs["id"],
-            }),
-          ],
-        }),
-      );
-    }
-    if (currentInsertionMark) {
+    const boundarySuggestion = blockBoundarySuggestion.isInSet(node.marks)
+      ?.attrs as BoundarySuggestion | undefined;
+
+    if (!boundarySuggestion) return true;
+
+    if (boundarySuggestion.endType && boundarySuggestion.endId) {
+      const markType =
+        boundarySuggestion.endType === "insertion" ? insertion : deletion;
+
+      console.log(boundarySuggestion);
+
       changeDecorations.push(
-        Decoration.widget(widgetPos, pilcrow, {
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-          key: currentInsertionMark.attrs["id"],
-          marks: [
-            insertion.create({
-              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-              id: currentInsertionMark.attrs["id"],
-            }),
-          ],
+        Decoration.widget(pos + node.nodeSize - 1, pilcrow, {
+          key:
+            typeof boundarySuggestion.endId === "number"
+              ? boundarySuggestion.endId.toString()
+              : boundarySuggestion.endId,
+
+          marks: [markType.create({ id: boundarySuggestion.endId })],
         }),
       );
     }

src/plugin.ts

@@ -1,9 +1,4 @@
-import {
-  type EditorState,
-  Plugin,
-  PluginKey,
-  TextSelection,
-} from "prosemirror-state";
+import { type EditorState, Plugin, PluginKey } from "prosemirror-state";
 import { getSuggestionDecorations } from "./decorations.js";
 
 export const suggestChangesKey = new PluginKey<{ enabled: boolean }>(
@@ -28,44 +23,6 @@ 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;
-      },
     },
   });
 }