@dxos/react-ui-editor 0.3.10-main.3cfd481 → 0.3.10-main.3edbcce

package/src/components/TextEditor/extensions/tasklist.ts

@@ -2,112 +2,106 @@
 // Copyright 2023 DXOS.org
 //
 
-import { syntaxTree } from '@codemirror/language';
 import {
-  type EditorState,
-  type Extension,
-  type RangeSet,
-  RangeSetBuilder,
-  StateField,
-  type Transaction,
-} from '@codemirror/state';
-import { EditorView, Decoration, WidgetType } from '@codemirror/view';
+  EditorView,
+  Decoration,
+  WidgetType,
+  MatchDecorator,
+  ViewPlugin,
+  type DecorationSet,
+  type ViewUpdate,
+} from '@codemirror/view';
 
 class CheckboxWidget extends WidgetType {
-  constructor(private readonly _pos: number, private readonly _getCursor: () => number, private _checked: boolean) {
+  constructor(
+    private readonly _pos: number,
+    private _checked: boolean,
+    private readonly _indent: number,
+    private readonly _onCheck: (check: boolean) => void,
+  ) {
     super();
   }
 
   override eq(other: CheckboxWidget) {
-    // Uniqueness based on position; also checks state.
-    // TODO(burdon): Is this efficient? Check life-cycle.
-    return this._pos === other._pos && this._checked === other._checked;
+    return this._pos === other._pos && this._checked === other._checked && this._indent === other._indent;
   }
 
   toDOM(view: EditorView) {
-    // console.log('toDom', this._pos);
     const wrap = document.createElement('span');
-    wrap.setAttribute('aria-hidden', 'true');
     wrap.className = 'cm-task-item';
+    wrap.setAttribute('aria-hidden', 'true');
+    wrap.style.setProperty('margin-left', this._indent * 24 + 'px');
 
-    const box = wrap.appendChild(document.createElement('input'));
-    box.type = 'checkbox';
-    box.checked = this._checked;
-    box.onclick = (event) => {
-      this._checked = !isChecked(view.state, this._pos);
-      view.dispatch({
-        changes: {
-          from: this._pos + 1,
-          to: this._pos + 2,
-          insert: this._checked ? 'x' : ' ',
-        },
-        // TODO(burdon): Restore cursor position? More useful to move to end of line (can indent).
-        selection: {
-          anchor: this._pos + 4,
-          // anchor: this._getCursor(),
-        },
-      });
+    const input = wrap.appendChild(document.createElement('input'));
+    input.type = 'checkbox';
+    input.checked = this._checked;
+    input.onchange = (event: Event) => {
+      this._onCheck((event.target as any).checked);
       return true;
     };
 
     return wrap;
   }
 
-  // TODO(burdon): Remove listener?
-  // override destroy() {
-  // console.log('destroy', this._pos);
-  // }
-
   override ignoreEvent() {
     return false;
   }
 }
 
-const isChecked = (state: EditorState, pos: number) => {
-  return state.sliceDoc(pos, pos + 3).toLowerCase() === '[x]';
-};
+// TODO(burdon): Reconcile with theme.
+const styles = EditorView.baseTheme({
+  '& .cm-task-item': {
+    paddingLeft: '4px',
+    paddingRight: '8px',
+  },
+});
 
-export const statefield = (): Extension => {
-  let lastPosition: number = 0;
-  const listener = EditorView.updateListener.of((update) => {
-    lastPosition = update.startState.selection.main.head;
+export const tasklist = () => {
+  // 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(pos, checked, indent, (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 checkbox = (state: EditorState) => {
-    const builder = new RangeSetBuilder();
-    syntaxTree(state).iterate({
-      enter: (node) => {
-        // console.log(node.name, node.from, node.to);
-        if (node.name === 'TaskMarker') {
-          builder.add(
-            node.from,
-            node.to,
-            Decoration.replace({
-              widget: new CheckboxWidget(node.from, () => lastPosition, isChecked(state, node.from)),
-            }),
-          );
-        }
-      },
-    });
+  const tasks = ViewPlugin.fromClass(
+    class {
+      tasks: DecorationSet;
+      constructor(view: EditorView) {
+        this.tasks = taskMatcher.createDeco(view);
+      }
 
-    return builder.finish();
-  };
+      update(update: ViewUpdate) {
+        this.tasks = taskMatcher.updateDeco(update, this.tasks);
+      }
+    },
+    {
+      decorations: (instance) => instance.tasks,
+      provide: (plugin) =>
+        EditorView.atomicRanges.of((view) => {
+          return view.plugin(plugin)?.tasks || Decoration.none;
+        }),
+    },
+  );
 
-  return [
-    listener,
-    StateField.define<RangeSet<any>>({
-      create: (state) => checkbox(state),
-      update: (_: RangeSet<any>, tr: Transaction) => checkbox(tr.state),
-      provide: (field) => EditorView.decorations.from(field),
-    }),
-  ];
+  return [tasks, styles];
 };
-
-// TODO(burdon): Reconcile with theme.
-export const styles = EditorView.baseTheme({
-  '& .cm-task-item': {
-    padding: '0 4px',
-  },
-});
-
-export const tasklist = () => [statefield(), styles];

package/src/components/TextEditor/themes/default.ts

@@ -159,6 +159,18 @@ export const textTheme: {
   '& .cm-scroller': {
     fontFamily: get(tokens, 'fontFamily.body', []).join(','),
   },
+  '& .cm-placeholder': {
+    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
+  },
+};
+
+export const markdownTheme: {
+  [selector: string]: StyleSpec;
+} = {
+  // NOTE: Must leave base font family as is (i.e., monospace) due to fenced code blocks.
+  '& .cm-placeholder': {
+    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
+  },
 };
 
 export const codeTheme: {
@@ -167,4 +179,7 @@ export const codeTheme: {
   '& .cm-scroller': {
     fontFamily: get(tokens, 'fontFamily.mono', []).join(','),
   },
+  '& .cm-placeholder': {
+    fontFamily: get(tokens, 'fontFamily.mono', []).join(','),
+  },
 };

package/src/hooks/automerge/PatchSemaphore.ts

@@ -2,20 +2,24 @@
 // Copyright 2023 DXOS.org
 //
 
+// TODO(burdon): Additional copyright?
+
 import { type EditorView } from '@codemirror/view';
 
 import { next as automerge } from '@dxos/automerge/automerge';
 
-import amToCodemirror from './amToCodemirror';
-import codeMirrorToAm from './codeMirrorToAm';
 import { type IDocHandle } from './handle';
 import { type Field, isReconcileTx, getPath, reconcileAnnotationType, updateHeads, getLastHeads } from './plugin';
+import { automergeToCodemirror, codemirrorToAutomerge } from './translation';
 
 type Doc<T> = automerge.Doc<T>;
 type Heads = automerge.Heads;
 
 type ChangeFn = (atHeads: Heads, change: (doc: Doc<unknown>) => void) => Heads | undefined;
 
+/**
+ * TODO(burdon): Comment.
+ */
 export class PatchSemaphore {
   _field!: Field;
   _inReconcile = false;
@@ -39,7 +43,7 @@ export class PatchSemaphore {
 
     const transactions = view.state.field(this._field).unreconciledTransactions.filter((tx) => !isReconcileTx(tx));
 
-    // First undo all the unreconciled transactions
+    // First undo all the unreconciled transactions.
     const toInvert = transactions.slice().reverse();
     for (const tx of toInvert) {
       const inverted = tx.changes.invert(tx.startState.doc);
@@ -50,19 +54,18 @@ export class PatchSemaphore {
       });
     }
 
-    // now apply the unreconciled transactions to the document
-    let newHeads = codeMirrorToAm(this._field, handle, transactions, view.state);
+    // Apply the unreconciled transactions to the document.
+    let newHeads = codemirrorToAutomerge(this._field, handle, transactions, view.state);
 
-    // NOTE: null and undefined each come from automerge and repo respectively
+    // NOTE: null and undefined each come from automerge and repo respectively.
     if (newHeads === null || newHeads === undefined) {
       // TODO: @alexjg this is the call that's resetting the editor state on click
       newHeads = automerge.getHeads(handle.docSync()!);
     }
 
-    // now get the diff between the updated state of the document and the heads
-    // and apply that to the codemirror doc
+    // Now get the diff between the updated state of the document and the heads and apply that to the codemirror doc.
     const diff = automerge.equals(oldHeads, newHeads) ? [] : automerge.diff(handle.docSync()!, oldHeads, newHeads);
-    amToCodemirror(view, selection, path, diff);
+    automergeToCodemirror(view, selection, path, diff);
 
     view.dispatch({
       effects: updateHeads(newHeads),

package/src/hooks/automerge/index.ts

@@ -2,5 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-export { automergePlugin, type AutomergePlugin } from './plugin';
 export { type IDocHandle } from './handle';
+export { automergePlugin, type AutomergePlugin } from './plugin';

package/src/hooks/automerge/plugin.ts

@@ -78,6 +78,7 @@ export const automergePlugin = (handle: IDocHandle, path: Prop[]): AutomergePlug
       return result;
     },
   });
+
   const semaphore = new PatchSemaphore(stateField);
 
   const viewPlugin = ViewPlugin.fromClass(

package/src/hooks/automerge/{amToCodemirror.ts → translation/automerge-to-codemirror.ts}

@@ -2,6 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
+// TODO(burdon): Additional copyright?
+
 import { ChangeSet, type ChangeSpec, type EditorSelection, type EditorState } from '@codemirror/state';
 import { type EditorView } from '@codemirror/view';
 
@@ -14,9 +16,14 @@ import {
   type SpliceTextPatch,
 } from '@dxos/automerge/automerge';
 
-import { reconcileAnnotationType } from './plugin';
+import { reconcileAnnotationType } from '../plugin';
 
-export default (view: EditorView, selection: EditorSelection, target: Prop[], patches: Patch[]) => {
+export const automergeToCodemirror = (
+  view: EditorView,
+  selection: EditorSelection,
+  target: Prop[],
+  patches: Patch[],
+) => {
   for (const patch of patches) {
     const changeSpec = handlePatch(patch, target, view.state);
     if (changeSpec != null) {
@@ -28,6 +35,7 @@ export default (view: EditorView, selection: EditorSelection, target: Prop[], pa
       });
     }
   }
+
   view.dispatch({
     selection,
     annotations: reconcileAnnotationType.of({}),

package/src/hooks/automerge/{codeMirrorToAm.ts → translation/codemirror-to-automerge.ts}

@@ -2,14 +2,16 @@
 // Copyright 2023 DXOS.org
 //
 
+// TODO(burdon): Additional copyright?
+
 import { type EditorState, type Text, type Transaction } from '@codemirror/state';
 
 import { next as am, type Heads } from '@dxos/automerge/automerge';
 
-import { type IDocHandle } from './handle';
-import { type Field } from './plugin';
+import { type IDocHandle } from '../handle';
+import { type Field } from '../plugin';
 
-export default (
+export const codemirrorToAutomerge = (
   field: Field,
   handle: IDocHandle,
   transactions: Transaction[],
@@ -18,7 +20,7 @@ export default (
   const { lastHeads, path } = state.field(field);
 
   // We don't want to call `automerge.updateAt` if there are no changes.
-  // Otherwise later on `automerge.diff` will return empty patches that result in a no-op but still mess up the selection.
+  // Otherwise, later on `automerge.diff` will return empty patches that result in a no-op but still mess up the selection.
   let hasChanges = false;
   for (const tr of transactions) {
     tr.changes.iterChanges(() => {
@@ -37,5 +39,6 @@ export default (
       });
     }
   });
+
   return newHeads ?? undefined;
 };

package/src/hooks/automerge/translation/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './automerge-to-codemirror';
+export * from './codemirror-to-automerge';

package/src/hooks/useTextModel.ts

@@ -29,6 +29,7 @@ type Awareness = awarenessProtocol.Awareness;
 // TODO(wittjosiah): Factor out to common package? @dxos/react-client?
 export type EditorModel = {
   id: string;
+  // TODO(burdon): Remove.
   content: string | YText | YXmlFragment | DocAccessor;
   text: () => string;
   extension?: Extension;
@@ -57,28 +58,30 @@ export const useTextModel = ({ identity, space, text }: UseTextModelOptions): Ed
 };
 
 const createModel = (options: UseTextModelOptions) => {
-  const { space, text } = options;
-
+  const { text } = options;
   if (isActualAutomergeObject(text)) {
     return createAutomergeModel(options);
   } else {
-    if (!space || !text?.doc || !text?.content) {
+    if (!text?.doc) {
       return undefined;
     }
+
     return createYjsModel(options);
   }
 };
 
 const createYjsModel = ({ identity, space, text }: UseTextModelOptions): EditorModel => {
-  invariant(space && text?.doc && text?.content);
-  const provider = new SpaceAwarenessProvider({ space, doc: text.doc, channel: `yjs.awareness.${text.id}` });
+  invariant(text?.doc && text?.content);
+  const provider = space
+    ? new SpaceAwarenessProvider({ space, doc: text.doc, channel: `yjs.awareness.${text.id}` })
+    : undefined;
 
   return {
     id: text.doc.guid,
     content: text.content,
     text: () => text.content!.toString(),
-    extension: yCollab(text.content as YText, provider.awareness),
-    awareness: provider.awareness,
+    extension: yCollab(text.content as YText, provider?.awareness),
+    awareness: provider?.awareness,
     peer: identity
       ? {
           id: identity.identityKey.toHex(),
@@ -88,7 +91,7 @@ const createYjsModel = ({ identity, space, text }: UseTextModelOptions): EditorM
   };
 };
 
-const createAutomergeModel = ({ identity, space, text }: UseTextModelOptions): EditorModel => {
+const createAutomergeModel = ({ identity, text }: UseTextModelOptions): EditorModel => {
   const obj = text as any as AutomergeTextCompat;
   const doc = getRawDoc(obj, [obj.field]);
 

package/src/testing/replicator.ts

@@ -163,16 +163,17 @@ export class Replicator {
       colorLight: cursorColor.light,
     });
 
+    const field = 'content';
+    const content = this._kind === TextKind.PLAIN ? doc.getText(field) : doc.getXmlFragment(field);
     const model: EditorModel = {
       id: doc.guid,
-      content: this._kind === TextKind.PLAIN ? doc.getText('content') : doc.getXmlFragment('content'),
-      text: () => model.content.toString(),
+      text: () => content.toString(),
+      content,
       awareness: provider.awareness,
       peer: { id },
     };
 
     this._peers.push(model);
-
     return model;
   };
 }
@@ -184,6 +185,5 @@ export type UseYjsModelOptions = {
 };
 
 export const useYjsModel = ({ replicator, id, doc }: UseYjsModelOptions): EditorModel => {
-  const peer = useMemo(() => replicator.createPeer(id, doc), [doc]);
-  return peer;
+  return useMemo(() => replicator.createPeer(id, doc), [doc]);
 };

package/dist/types/src/hooks/automerge/amToCodemirror.d.ts

@@ -1,6 +0,0 @@
-import { type EditorSelection } from '@codemirror/state';
-import { type EditorView } from '@codemirror/view';
-import { type Patch, type Prop } from '@dxos/automerge/automerge';
-declare const _default: (view: EditorView, selection: EditorSelection, target: Prop[], patches: Patch[]) => void;
-export default _default;
-//# sourceMappingURL=amToCodemirror.d.ts.map

package/dist/types/src/hooks/automerge/amToCodemirror.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"amToCodemirror.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/automerge/amToCodemirror.ts"],"names":[],"mappings":"AAIA,OAAO,EAA8B,KAAK,eAAe,EAAoB,MAAM,mBAAmB,CAAC;AACvG,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAGL,KAAK,KAAK,EACV,KAAK,IAAI,EAGV,MAAM,2BAA2B,CAAC;+BAIb,UAAU,aAAa,eAAe,UAAU,IAAI,EAAE,WAAW,KAAK,EAAE;AAA9F,wBAgBE"}

package/dist/types/src/hooks/automerge/codeMirrorToAm.d.ts

@@ -1,7 +0,0 @@
-import { type EditorState, type Transaction } from '@codemirror/state';
-import { type Heads } from '@dxos/automerge/automerge';
-import { type IDocHandle } from './handle';
-import { type Field } from './plugin';
-declare const _default: (field: Field, handle: IDocHandle, transactions: Transaction[], state: EditorState) => Heads | undefined;
-export default _default;
-//# sourceMappingURL=codeMirrorToAm.d.ts.map

package/dist/types/src/hooks/automerge/codeMirrorToAm.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"codeMirrorToAm.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/automerge/codeMirrorToAm.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAa,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAElF,OAAO,EAAc,KAAK,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAEnE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,UAAU,CAAC;+CAI5B,UAAU,gBACJ,WAAW,EAAE,SACpB,WAAW,KACjB,KAAK,GAAG,SAAS;AALpB,wBA6BE"}