@dxos/react-ui-editor 0.3.9-main.632a97f → 0.3.9-main.71124bf

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.3.9-main.632a97f",
+  "version": "0.3.9-main.71124bf",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -13,16 +13,16 @@
     "src"
   ],
   "dependencies": {
-    "@codemirror/autocomplete": "^6.11.0",
-    "@codemirror/commands": "^6.3.0",
-    "@codemirror/lang-markdown": "^6.2.2",
-    "@codemirror/language": "^6.9.2",
+    "@codemirror/autocomplete": "^6.11.1",
+    "@codemirror/commands": "^6.3.2",
+    "@codemirror/lang-markdown": "^6.2.3",
+    "@codemirror/language": "^6.9.3",
     "@codemirror/language-data": "^6.3.1",
     "@codemirror/lint": "^6.4.2",
-    "@codemirror/search": "^6.5.4",
-    "@codemirror/state": "^6.3.1",
+    "@codemirror/search": "^6.5.5",
+    "@codemirror/state": "^6.3.3",
     "@codemirror/theme-one-dark": "^6.1.2",
-    "@codemirror/view": "^6.22.0",
+    "@codemirror/view": "^6.22.2",
     "@fluentui/react-tabster": "^9.12.0",
     "@lezer/common": "^1.1.1",
     "@lezer/highlight": "^1.2.0",
@@ -37,8 +37,9 @@
     "@tiptap/pm": "2.0.0-beta.220",
     "@tiptap/react": "2.0.0-beta.220",
     "@tiptap/starter-kit": "2.0.0-beta.220",
-    "codemirror": "^6.65.7",
+    "codemirror": "6.0.1",
     "lib0": "^0.2.65",
+    "lodash.defaultsdeep": "^4.6.1",
     "lodash.get": "^4.4.2",
     "prosemirror-model": "^1.19.0",
     "prosemirror-state": "^1.4.2",
@@ -48,34 +49,39 @@
     "y-prosemirror": "~1.0.20",
     "y-protocols": "^1.0.5",
     "yjs": "^13.6.10",
-    "@dxos/debug": "0.3.9-main.632a97f",
-    "@dxos/display-name": "0.3.9-main.632a97f",
-    "@dxos/react-async": "0.3.9-main.632a97f",
-    "@dxos/react-ui": "0.3.9-main.632a97f",
-    "@dxos/log": "0.3.9-main.632a97f",
-    "@dxos/react-ui-theme": "0.3.9-main.632a97f",
-    "@dxos/protocols": "0.3.9-main.632a97f",
-    "@dxos/text-model": "0.3.9-main.632a97f",
-    "@dxos/util": "0.3.9-main.632a97f"
+    "@dxos/debug": "0.3.9-main.71124bf",
+    "@dxos/automerge": "0.3.9-main.71124bf",
+    "@dxos/display-name": "0.3.9-main.71124bf",
+    "@dxos/echo-schema": "0.3.9-main.71124bf",
+    "@dxos/invariant": "0.3.9-main.71124bf",
+    "@dxos/log": "0.3.9-main.71124bf",
+    "@dxos/protocols": "0.3.9-main.71124bf",
+    "@dxos/react-async": "0.3.9-main.71124bf",
+    "@dxos/react-ui": "0.3.9-main.71124bf",
+    "@dxos/react-ui-theme": "0.3.9-main.71124bf",
+    "@dxos/text-model": "0.3.9-main.71124bf",
+    "@dxos/util": "0.3.9-main.71124bf"
   },
   "devDependencies": {
-    "@codemirror/basic-setup": "^0.20.0",
-    "@types/codemirror": "^5.60.14",
+    "@automerge/automerge-repo-network-broadcastchannel": "^1.0.19",
+    "@phosphor-icons/react": "^2.0.5",
+    "@types/lodash.defaultsdeep": "^4.6.6",
     "@types/lodash.get": "^4.4.7",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/automerge": "0.3.9-main.632a97f",
-    "@dxos/config": "0.3.9-main.632a97f",
-    "@dxos/echo-typegen": "0.3.9-main.632a97f",
-    "@dxos/echo-schema": "0.3.9-main.632a97f",
-    "@dxos/react-client": "0.3.9-main.632a97f"
+    "@dxos/echo-typegen": "0.3.9-main.71124bf",
+    "@dxos/react-client": "0.3.9-main.71124bf",
+    "@dxos/react-ui": "0.3.9-main.71124bf",
+    "@dxos/storybook-utils": "0.3.9-main.71124bf",
+    "@dxos/config": "0.3.9-main.71124bf"
   },
   "peerDependencies": {
+    "@phosphor-icons/react": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.3.9-main.632a97f"
+    "@dxos/react-client": "0.3.9-main.71124bf"
   },
   "publishConfig": {
     "access": "public"

package/src/automerge/automerge-plugin/PatchSemaphore.ts

@@ -8,8 +8,8 @@ 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 { type Peer } from '../demo';
 
 type Doc<T> = automerge.Doc<T>;
 type Heads = automerge.Heads;
@@ -27,8 +27,8 @@ export class PatchSemaphore {
     }
   }
 
-  reconcile = (handle: Peer, view: EditorView) => {
-    if (!this._inReconcile) {
+  reconcile = (handle: IDocHandle, view: EditorView) => {
+    if (this._inReconcile) {
       return;
     }
     this._inReconcile = true;
@@ -56,12 +56,12 @@ export class PatchSemaphore {
     // 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.doc);
+      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
-    const diff = automerge.equals(oldHeads, newHeads) ? [] : automerge.diff(handle.doc, oldHeads, newHeads);
+    const diff = automerge.equals(oldHeads, newHeads) ? [] : automerge.diff(handle.docSync()!, oldHeads, newHeads);
     amToCodemirror(view, selection, path, diff);
 
     view.dispatch({

package/src/automerge/automerge-plugin/codeMirrorToAm.ts

@@ -6,21 +6,24 @@ 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 Peer } from '../demo';
 
-export default (field: Field, handle: Peer, transactions: Transaction[], state: EditorState): Heads | undefined => {
+export default (
+  field: Field,
+  handle: IDocHandle,
+  transactions: Transaction[],
+  state: EditorState,
+): Heads | undefined => {
   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.
   let hasChanges = false;
   for (const tr of transactions) {
-    if (tr.changes.length) {
-      tr.changes.iterChanges(() => {
-        hasChanges = true;
-      });
-    }
+    tr.changes.iterChanges(() => {
+      hasChanges = true;
+    });
   }
 
   if (!hasChanges) {

package/src/automerge/automerge-plugin/handle.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import type * as A from '@dxos/automerge/automerge';
+
+export type IDocHandle<T = any> = {
+  docSync(): A.Doc<T> | undefined;
+  change(callback: A.ChangeFn<T>, options?: A.ChangeOptions<T>): void;
+  changeAt(heads: A.Heads, callback: A.ChangeFn<T>, options?: A.ChangeOptions<T>): string[] | undefined;
+
+  addListener(event: 'change', listener: () => void): void;
+  removeListener(event: 'change', listener: () => void): void;
+};

package/src/automerge/automerge-plugin/index.ts

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

package/src/automerge/automerge-plugin/plugin.ts

@@ -12,13 +12,13 @@ import {
   type Transaction,
   type TransactionSpec,
 } from '@codemirror/state';
-import { type EditorView } from '@codemirror/view';
+import { ViewPlugin, type EditorView, type PluginValue, type ViewUpdate } from '@codemirror/view';
 
 import * as automerge from '@dxos/automerge/automerge';
-import { type Doc, type Heads, type Prop } from '@dxos/automerge/automerge';
+import { type Heads, type Prop } from '@dxos/automerge/automerge';
 
 import { PatchSemaphore } from './PatchSemaphore';
-import { type Peer } from '../demo';
+import { type IDocHandle } from './handle';
 
 export type Value = {
   lastHeads: Heads;
@@ -44,10 +44,14 @@ const semaphoreFacet = Facet.define<PatchSemaphore, PatchSemaphore>({
   combine: (values) => values.at(-1)!, // Take last.
 });
 
-export const plugin = <T>(doc: Doc<T>, path: Prop[]): Extension => {
+export type AutomergePlugin = {
+  extension: Extension;
+};
+
+export const automergePlugin = (handle: IDocHandle, path: Prop[]): AutomergePlugin => {
   const stateField: StateField<Value> = StateField.define({
     create: () => ({
-      lastHeads: automerge.getHeads(doc),
+      lastHeads: automerge.getHeads(handle.docSync()!),
       unreconciledTransactions: [],
       path: path.slice(),
     }),
@@ -76,7 +80,36 @@ export const plugin = <T>(doc: Doc<T>, path: Prop[]): Extension => {
   });
   const semaphore = new PatchSemaphore(stateField);
 
-  return [stateField, semaphoreFacet.of(semaphore)];
+  const viewPlugin = ViewPlugin.fromClass(
+    class AutomergeCodemirrorViewPlugin implements PluginValue {
+      private _view: EditorView;
+
+      constructor(view: EditorView) {
+        this._view = view;
+        handle.addListener('change', this._handleChange);
+      }
+
+      update(update: ViewUpdate) {
+        if (update.transactions.length > 0 && update.transactions.some((t) => !isReconcileTx(t))) {
+          queueMicrotask(() => {
+            this._view.state.facet(semaphoreFacet).reconcile(handle, this._view);
+          });
+        }
+      }
+
+      destroy() {
+        handle.addListener('change', this._handleChange);
+      }
+
+      private _handleChange = () => {
+        this._view.state.facet(semaphoreFacet).reconcile(handle, this._view);
+      };
+    },
+  );
+
+  return {
+    extension: [stateField, semaphoreFacet.of(semaphore), viewPlugin],
+  };
 };
 
 export const reconcileAnnotationType = Annotation.define<unknown>();
@@ -98,7 +131,3 @@ export const makeReconcile = (tr: TransactionSpec) => {
   // annotations: reconcileAnnotationType.of({})
   // }
 };
-
-export const reconcile = (handle: Peer, view: EditorView) => {
-  view.state.facet(semaphoreFacet).reconcile(handle, view);
-};

package/src/automerge/automerge.stories.tsx

@@ -2,17 +2,20 @@
 // Copyright 2023 DXOS.org
 //
 
-import { basicSetup } from '@codemirror/basic-setup';
+import '@preact/signals-react'; // Register react integration
+import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-network-broadcastchannel';
 import { EditorView } from '@codemirror/view';
+import { basicSetup } from 'codemirror';
+import get from 'lodash.get';
 import React, { useEffect, useRef, useState } from 'react';
 
-import { type Prop, next as automerge } from '@dxos/automerge/automerge';
+import { type Prop } from '@dxos/automerge/automerge';
+import { type DocHandle, Repo } from '@dxos/automerge/automerge-repo';
 
-import { plugin as amgPlugin, reconcile } from './automerge-plugin';
-import { Peer } from './demo';
+import { type IDocHandle, automergePlugin } from './automerge-plugin';
 
 type EditorProps = {
-  handle: Peer;
+  handle: IDocHandle;
   path: Prop[];
 };
 
@@ -21,27 +24,13 @@ const Editor = ({ handle, path }: EditorProps) => {
   const editorRoot = useRef<EditorView>();
 
   useEffect(() => {
-    const doc = handle.doc;
-    const source = doc.text; // this should use path
-    const plugin = amgPlugin(doc, path);
     const view = (editorRoot.current = new EditorView({
-      doc: source,
-      extensions: [basicSetup, plugin],
-      dispatch: (transaction) => {
-        view.update([transaction]);
-        reconcile(handle, view);
-      },
+      doc: get(handle.docSync()!, path),
+      extensions: [basicSetup, automergePlugin(handle, path)],
       parent: containerRef.current as any,
     }));
 
-    const handleChange = () => {
-      reconcile(handle, view);
-    };
-
-    handle.changeEvent.on(handleChange);
-
     return () => {
-      handle.changeEvent.off(handleChange);
       view.destroy();
     };
   }, []);
@@ -50,31 +39,29 @@ const Editor = ({ handle, path }: EditorProps) => {
 };
 
 const Story = () => {
-  const [object1, setObject1] = useState<Peer | null>(null);
-  const [object2, setObject2] = useState<Peer | null>(null);
-  const [stats1, setStats1] = useState<any>({});
-  const [stats2, setStats2] = useState<any>({});
+  const [object1, setObject1] = useState<DocHandle<any> | null>(null);
+  const [object2, setObject2] = useState<DocHandle<any> | null>(null);
 
   useEffect(() => {
-    const object1 = new Peer();
-    object1.doc = automerge.from({ text: 'Hello world!' });
-
-    const object2 = new Peer();
-    object2.doc = automerge.init();
-
-    const r1 = object1.replicate();
-    const r2 = object2.replicate();
-
-    void r1.readable.pipeTo(r2.writable);
-    void r2.readable.pipeTo(r1.writable);
-
-    setObject1(object1);
-    setObject2(object2);
-
-    setInterval(() => {
-      setStats1({ ...object1.stats });
-      setStats2({ ...object2.stats });
-    }, 500);
+    queueMicrotask(async () => {
+      const repo1 = new Repo({
+        network: [new BroadcastChannelNetworkAdapter()],
+      });
+      const repo2 = new Repo({
+        network: [new BroadcastChannelNetworkAdapter()],
+      });
+
+      const object1 = repo1.create();
+      object1.change((doc: any) => {
+        doc.text = 'Hello world!';
+      });
+
+      const object2 = repo2.find(object1.url);
+      await object2.whenReady();
+
+      setObject1(object1);
+      setObject2(object2);
+    });
   }, []);
 
   if (!object1 || !object2) {
@@ -85,11 +72,9 @@ const Story = () => {
     <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', width: '100vw' }}>
       <div>
         <Editor handle={object1} path={['text']} />
-        <div style={{ whiteSpace: 'pre' }}>{JSON.stringify(stats1, null, 2)}</div>
       </div>
       <div>
         <Editor handle={object2} path={['text']} />
-        <div style={{ whiteSpace: 'pre' }}>{JSON.stringify(stats2, null, 2)}</div>
       </div>
     </div>
   );
@@ -99,6 +84,6 @@ export default {
   title: 'Automerge',
 };
 
-export const EditorStory = {
+export const AutomergeRepo = {
   render: () => <Story />,
 };

package/src/components/TextEditor/TextEditor.stories.tsx

@@ -3,29 +3,77 @@
 //
 
 import '@dxosTheme';
-import React, { useState } from 'react';
+import { markdown } from '@codemirror/lang-markdown';
+import { ArrowCircleUp } from '@phosphor-icons/react';
+import React, { StrictMode, useState } from 'react';
+import { createRoot } from 'react-dom/client';
 
 import { TextObject } from '@dxos/echo-schema';
-import { fixedInsetFlexLayout, groupSurface, inputSurface, mx } from '@dxos/react-ui-theme';
+import { fixedInsetFlexLayout, getSize, groupSurface, inputSurface, mx } from '@dxos/react-ui-theme';
+import { withTheme } from '@dxos/storybook-utils';
 
 import { TextEditor } from './TextEditor';
-import { useTextModel } from '../../model';
+import { createHyperlinkTooltip, hyperlinkDecoration } from './extensions';
+import { useTextModel } from '../../hooks';
 
-const Story = () => {
-  const [item] = useState({ text: new TextObject('Hello world!') });
+const text = [
+  '',
+  '',
+  'This is all about [DXOS](https://dxos.org); read more [here](https://docs.dxos.org/guide/getting-started.html).',
+  '',
+  '',
+].join('\n');
+
+const hyperLinkTooltip = () =>
+  createHyperlinkTooltip((el, url) => {
+    const web = new URL(url);
+    createRoot(el).render(
+      <StrictMode>
+        <div className='flex gap-1 items-center'>
+          <ArrowCircleUp className={mx(getSize(6), 'text-blue-500')} />
+          <p className='pr-1'>{web.origin}</p>
+        </div>
+      </StrictMode>,
+    );
+  });
+
+const Story = ({ automerge }: { automerge?: boolean }) => {
+  const [item] = useState({ text: new TextObject(text, undefined, undefined, { useAutomergeBackend: !!automerge }) });
   const model = useTextModel({ text: item.text });
+  if (!model) {
+    return <></>;
+  }
 
   return (
-    <div className={mx(fixedInsetFlexLayout, groupSurface, 'p-4 gap-4')}>
-      <TextEditor model={model} slots={{ root: { className: mx(inputSurface, 'px-2') } }} />
-      <pre>{JSON.stringify(model?.content?.toString(), null, 2)}</pre>
+    <div className={mx(fixedInsetFlexLayout, groupSurface)}>
+      <div className='flex justify-center p-8'>
+        <div className='w-[800px]'>
+          <TextEditor
+            model={model}
+            extensions={[
+              markdown(),
+              hyperlinkDecoration({ link: false }),
+              hyperLinkTooltip(),
+              // EditorView.domEventHandlers({
+              //   mousedown: (e, view) => {},
+              // }),
+            ]}
+            slots={{ root: { className: mx(inputSurface, 'p-2') } }}
+          />
+        </div>
+      </div>
     </div>
   );
 };
 
 export default {
   component: TextEditor,
+  decorators: [withTheme],
   render: Story,
 };
 
 export const Default = {};
+
+export const Automerge = {
+  render: () => <Story automerge />,
+};