@dxos/react-ui-editor 0.3.11-main.67451e9 → 0.3.11-main.68db74e

package/dist/lib/browser/index.mjs

@@ -2025,87 +2025,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
@@ -2315,13 +2313,6 @@ var defaultTheme = {
     textDecoration: "none"
   },
   //
-  // widgets
-  //
-  ".cm-widgetBuffer": {
-    display: "none",
-    height: 0
-  },
-  //
   // table
   //
   ".cm-table *": {