@dxos/react-ui-editor 0.3.11-main.346d280 → 0.3.11-main.3a8a0ef

package/src/extensions/tasklist.ts

@@ -2,57 +2,39 @@
 // Copyright 2023 DXOS.org
 //
 
-import {
-  EditorView,
-  Decoration,
-  WidgetType,
-  MatchDecorator,
-  ViewPlugin,
-  type DecorationSet,
-  type ViewUpdate,
-} from '@codemirror/view';
-
-// TODO(burdon): Reconcile with theme.
-const styles = EditorView.baseTheme({
-  '& .cm-task-item': {
-    paddingLeft: '4px',
-    paddingRight: '8px',
-  },
-});
+import { syntaxTree } from '@codemirror/language';
+import { RangeSetBuilder } from '@codemirror/state';
+import { EditorView, Decoration, WidgetType, ViewPlugin, type DecorationSet, type ViewUpdate } from '@codemirror/view';
 
 class CheckboxWidget extends WidgetType {
-  constructor(
-    private _checked: boolean,
-    private readonly _indent: number,
-    private readonly _onCheck?: (check: boolean) => void,
-  ) {
+  constructor(private _checked: boolean) {
     super();
   }
 
   override eq(other: this) {
-    return this._checked === other._checked && this._indent === other._indent;
+    return this._checked === other._checked;
   }
 
   override toDOM(view: EditorView) {
-    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: Event) => {
-        this._onCheck?.((event.target as any).checked);
-        return true;
+    } else {
+      input.onmousedown = (event: 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;
   }
 
   override ignoreEvent() {
@@ -60,60 +42,54 @@ class CheckboxWidget extends WidgetType {
   }
 }
 
+const checkedDeco = Decoration.replace({ widget: new CheckboxWidget(true) });
+const uncheckedDeco = Decoration.replace({ widget: new CheckboxWidget(false) });
+
 export type TasklistOptions = {};
 
 export const tasklist = (options: TasklistOptions = {}) => {
-  // TODO(burdon): Matcher isn't as precise as syntax tree.
-  //  Allows for indents to be greater than AST would allow.
-  const taskMatcher = new MatchDecorator({
-    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 Decoration.replace({
-        widget: new CheckboxWidget(
-          checked,
-          indent,
-          view.state.readOnly
-            ? undefined
-            : (checked) => {
-                const idx = pos + match[0].indexOf('[') + 1;
-                view.dispatch({
-                  changes: {
-                    from: idx,
-                    to: idx + 1,
-                    insert: checked ? 'x' : ' ',
-                  },
-                  // TODO(burdon): Restore cursor position? More useful to move to end of line (can indent).
-                  selection: {
-                    anchor: idx + 3,
-                  },
-                });
-              },
-        ),
-      });
-    },
-  });
-
-  const tasks = ViewPlugin.fromClass(
+  return ViewPlugin.fromClass(
     class {
-      tasks: DecorationSet;
+      decorations: DecorationSet;
+
       constructor(view: EditorView) {
-        this.tasks = taskMatcher.createDeco(view);
+        this.decorations = buildDecorations(view);
       }
 
       update(update: ViewUpdate) {
-        this.tasks = taskMatcher.updateDeco(update, this.tasks);
+        if (update.docChanged || update.viewportChanged || update.selectionSet) {
+          this.decorations = buildDecorations(update.view);
+        }
       }
     },
     {
-      decorations: (value) => value.tasks,
+      decorations: (v) => v.decorations,
       provide: (plugin) =>
         EditorView.atomicRanges.of((view) => {
-          return view.plugin(plugin)?.tasks || Decoration.none;
+          return view.plugin(plugin)?.decorations || Decoration.none;
         }),
     },
   );
+};
+
+const buildDecorations = (view: EditorView): DecorationSet => {
+  const builder = new RangeSetBuilder<Decoration>();
+  const { state } = view;
+  const cursor = state.selection.main.head;
+
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree(state).iterate({
+      enter: (node) => {
+        // Check if cursor is inside text.
+        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 [tasks, styles];
+  return builder.finish();
 };

package/src/extensions/yjs/yjs.test.ts

@@ -12,7 +12,7 @@ import { type YText } from '@dxos/text-model';
 describe('YJS', () => {
   // https://docs.yjs.dev/api/shared-types/y.text
   // https://github.com/yjs/yjs?tab=readme-ov-file#relative-positions
-  test('absolute position', () => {
+  test.skip('absolute position', () => {
     const obj = new TextObject('hello world');
     const index = obj.text.indexOf('world');
     const relPos = Y.encodeRelativePosition(Y.createRelativePositionFromTypeIndex(obj.content as YText, index));

package/src/themes/default.ts

@@ -160,14 +160,6 @@ export const defaultTheme: ThemeStyles = {
     textDecoration: 'none',
   },
 
-  //
-  // widgets
-  //
-  '.cm-widgetBuffer': {
-    display: 'none',
-    height: 0,
-  },
-
   //
   // table
   //