@dxos/react-ui-editor 0.3.11-main.cf6cc01 → 0.3.11-main.d56f337

package/dist/lib/browser/index.mjs

@@ -1214,6 +1214,60 @@ var highlightDecorations = EditorView5.decorations.compute([
   }).filter(nonNullable) ?? [];
   return Decoration3.set(decorations);
 });
+var trackPastedComments = (onMove) => {
+  let tracked = null;
+  const registerCopy = (event, view) => {
+    const comments2 = view.state.field(commentsStateField);
+    const { main } = view.state.selection;
+    const inSel = comments2.ranges.filter((range) => range.from >= main.from && range.to <= main.to && range.from < range.to);
+    if (!inSel.length) {
+      tracked = null;
+    } else {
+      tracked = {
+        text: view.state.doc.slice(main.from, main.to),
+        comments: inSel.map((range) => ({
+          from: range.from - main.from,
+          to: range.to - main.from,
+          id: range.id
+        }))
+      };
+    }
+  };
+  return [
+    EditorView5.domEventHandlers({
+      cut: registerCopy,
+      copy: registerCopy
+    }),
+    EditorView5.updateListener.of((update2) => {
+      if (tracked) {
+        const paste = update2.transactions.find((tr) => tr.isUserEvent("input.paste"));
+        if (paste) {
+          let found = -1;
+          paste.changes.iterChanges((fromA, toA, fromB, toB, text) => {
+            if (text.eq(tracked.text)) {
+              for (let i = update2.transactions.indexOf(paste) + 1; i < update2.transactions.length; i++) {
+                fromB = update2.transactions[i].changes.mapPos(fromB);
+              }
+              found = fromB;
+            }
+          });
+          if (found > -1) {
+            const active = update2.view.state.field(commentsStateField).ranges;
+            for (const moved of tracked.comments) {
+              if (active.some((range) => range.id === moved.id && range.from === range.to)) {
+                onMove(moved.id, Cursor.getCursorFromRange(update2.view.state.facet(Cursor.converter), {
+                  from: found + moved.from,
+                  to: found + moved.to
+                }));
+              }
+            }
+          }
+          tracked = null;
+        }
+      }
+    })
+  ];
+};
 var comments = (options = {}) => {
   const { key: shortcut = "meta-'" } = options;
   const handleSelect = debounce((state) => options.onSelect?.(state), 200);
@@ -1221,7 +1275,7 @@ var comments = (options = {}) => {
     const cursorConverter3 = view.state.facet(Cursor.converter);
     invariant2(options.onCreate, void 0, {
       F: __dxlog_file3,
-      L: 177,
+      L: 240,
       S: void 0,
       A: [
         "options.onCreate",
@@ -1324,7 +1378,7 @@ var comments = (options = {}) => {
                   thread: range.id
                 }, {
                   F: __dxlog_file3,
-                  L: 274,
+                  L: 337,
                   S: void 0,
                   C: (f, a) => f(...a)
                 });
@@ -1377,7 +1431,8 @@ var comments = (options = {}) => {
           });
         }
       }
-    })
+    }),
+    options.onMove ? trackPastedComments(options.onMove) : []
   ];
 };
 
@@ -2025,87 +2080,85 @@ var TableWidget = class extends WidgetType5 {
 };
 
 // packages/ui/react-ui-editor/src/extensions/tasklist.ts
-import { EditorView as EditorView11, Decoration as Decoration8, WidgetType as WidgetType6, MatchDecorator as MatchDecorator2, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
-var styles5 = EditorView11.baseTheme({
-  "& .cm-task-item": {
-    paddingLeft: "4px",
-    paddingRight: "8px"
-  }
-});
+import { syntaxTree as syntaxTree4 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder3 } from "@codemirror/state";
+import { EditorView as EditorView11, Decoration as Decoration8, WidgetType as WidgetType6, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
 var CheckboxWidget = class extends WidgetType6 {
-  constructor(_checked, _indent, _onCheck) {
+  constructor(_checked) {
     super();
     this._checked = _checked;
-    this._indent = _indent;
-    this._onCheck = _onCheck;
   }
   eq(other) {
-    return this._checked === other._checked && this._indent === other._indent;
+    return this._checked === other._checked;
   }
   toDOM(view) {
-    const wrap = document.createElement("span");
-    wrap.className = "cm-task-item";
-    wrap.setAttribute("aria-hidden", "true");
-    wrap.style.setProperty("margin-left", this._indent * 24 + "px");
-    const input = wrap.appendChild(document.createElement("input"));
+    const input = document.createElement("input");
     input.type = "checkbox";
     input.checked = this._checked;
-    if (!this._onCheck) {
+    if (view.state.readOnly) {
       input.setAttribute("disabled", "true");
-    }
-    if (this._onCheck) {
-      input.onchange = (event) => {
-        this._onCheck?.(event.target.checked);
-        return true;
+    } else {
+      input.onmousedown = (event) => {
+        const pos = view.posAtDOM(input);
+        const text = view.state.sliceDoc(pos, pos + 3);
+        if (text === (this._checked ? "[x]" : "[ ]")) {
+          view.dispatch({
+            changes: {
+              from: pos + 1,
+              to: pos + 2,
+              insert: this._checked ? " " : "x"
+            }
+          });
+          event.preventDefault();
+        }
       };
     }
-    return wrap;
+    return input;
   }
   ignoreEvent() {
     return false;
   }
 };
+var checkedDeco = Decoration8.replace({
+  widget: new CheckboxWidget(true)
+});
+var uncheckedDeco = Decoration8.replace({
+  widget: new CheckboxWidget(false)
+});
 var tasklist = (options = {}) => {
-  const taskMatcher = new MatchDecorator2({
-    regexp: /^(\s*)- \[([ xX])\]\s/g,
-    decoration: (match, view, pos) => {
-      const indent = Math.floor(match[1].length / 2);
-      const checked = match[2] === "x" || match[2] === "X";
-      return Decoration8.replace({
-        widget: new CheckboxWidget(checked, indent, view.state.readOnly ? void 0 : (checked2) => {
-          const idx = pos + match[0].indexOf("[") + 1;
-          view.dispatch({
-            changes: {
-              from: idx,
-              to: idx + 1,
-              insert: checked2 ? "x" : " "
-            },
-            // TODO(burdon): Restore cursor position? More useful to move to end of line (can indent).
-            selection: {
-              anchor: idx + 3
-            }
-          });
-        })
-      });
-    }
-  });
-  const tasks = ViewPlugin6.fromClass(class {
+  return ViewPlugin6.fromClass(class {
     constructor(view) {
-      this.tasks = taskMatcher.createDeco(view);
+      this.decorations = buildDecorations3(view);
     }
     update(update2) {
-      this.tasks = taskMatcher.updateDeco(update2, this.tasks);
+      if (update2.docChanged || update2.viewportChanged || update2.selectionSet) {
+        this.decorations = buildDecorations3(update2.view);
+      }
     }
   }, {
-    decorations: (value) => value.tasks,
+    decorations: (v) => v.decorations,
     provide: (plugin) => EditorView11.atomicRanges.of((view) => {
-      return view.plugin(plugin)?.tasks || Decoration8.none;
+      return view.plugin(plugin)?.decorations || Decoration8.none;
     })
   });
-  return [
-    tasks,
-    styles5
-  ];
+};
+var buildDecorations3 = (view) => {
+  const builder = new RangeSetBuilder3();
+  const { state } = view;
+  const cursor = state.selection.main.head;
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree4(state).iterate({
+      enter: (node) => {
+        if (node.name === "TaskMarker" && (cursor < node.from || cursor > node.to)) {
+          const checked = state.doc.sliceString(node.from + 1, node.to - 1) === "x";
+          builder.add(node.from, node.to, checked ? checkedDeco : uncheckedDeco);
+        }
+      },
+      from,
+      to
+    });
+  }
+  return builder.finish();
 };
 
 // packages/ui/react-ui-editor/src/extensions/typewriter.ts