@dxos/react-ui-editor 0.3.9-main.b7e6a67 → 0.3.9-main.c414ce0

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 } 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,18 +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 } from './automerge-plugin';
-import { reconcile } from './automerge-plugin/plugin';
-import { Peer } from './demo';
+import { type IDocHandle, automergePlugin } from './automerge-plugin';
 
 type EditorProps = {
-  handle: Peer;
+  handle: IDocHandle;
   path: Prop[];
 };
 
@@ -22,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();
     };
   }, []);
@@ -51,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) {
@@ -86,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>
   );
@@ -100,6 +84,6 @@ export default {
   title: 'Automerge',
 };
 
-export const EditorStory = {
+export const AutomergeRepo = {
   render: () => <Story />,
 };

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

@@ -0,0 +1,79 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+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, getSize, groupSurface, inputSurface, mx } from '@dxos/react-ui-theme';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { TextEditor } from './TextEditor';
+import { createHyperlinkTooltip, hyperlinkDecoration } from './extensions';
+import { useTextModel } from '../../hooks';
+
+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)}>
+      <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 />,
+};

package/src/components/TextEditor/TextEditor.tsx

@@ -0,0 +1,188 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { EditorState, type Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { useFocusableGroup } from '@fluentui/react-tabster';
+import { vim } from '@replit/codemirror-vim';
+import defaultsDeep from 'lodash.defaultsdeep';
+import get from 'lodash.get';
+import React, {
+  type KeyboardEvent,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useState,
+  type ComponentProps,
+} from 'react';
+
+import { isDocAccessor } from '@dxos/echo-schema';
+import { useThemeContext } from '@dxos/react-ui';
+
+import { basicBundle, basicTheme, markdownBundle, markdownTheme } from './extensions';
+import { type EditorModel, useCollaboration } from '../../hooks';
+import type { ThemeStyles } from '../../styles';
+
+export const EditorModes = ['default', 'vim'] as const;
+export type EditorMode = (typeof EditorModes)[number];
+
+export type CursorInfo = {
+  from: number;
+  to: number;
+  line: number;
+  lines: number;
+  after?: string;
+};
+
+export type TextEditorRef = {
+  editor: HTMLDivElement | null;
+  state?: EditorState;
+  view?: EditorView;
+};
+
+export type TextEditorSlots = {
+  root?: Omit<ComponentProps<'div'>, 'ref'>;
+  editor?: {
+    className?: string;
+    placeholder?: string;
+    spellCheck?: boolean;
+    tabIndex?: number;
+    theme?: ThemeStyles;
+  };
+};
+
+export type TextEditorProps = {
+  model: EditorModel;
+  extensions?: Extension[];
+  slots?: TextEditorSlots;
+  editorMode?: EditorMode;
+};
+
+/**
+ * Base text editor.
+ * NOTE: Rather than adding properties, try to create extensions that can be reused.
+ */
+export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
+  ({ model, extensions = [], slots, editorMode }, forwardedRef) => {
+    const { themeMode } = useThemeContext();
+    const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
+
+    const [parent, setParent] = useState<HTMLDivElement | null>(null);
+    const [state, setState] = useState<EditorState>();
+    const [view, setView] = useState<EditorView>();
+    useImperativeHandle(
+      forwardedRef,
+      () => ({
+        editor: parent,
+        state,
+        view,
+      }),
+      [view, state, parent],
+    );
+
+    // TODO(burdon): Pass in extension?
+    const collaboration = useCollaboration(model, themeMode);
+
+    useEffect(() => {
+      if (!parent) {
+        return;
+      }
+
+      const initialText = isDocAccessor(model.content)
+        ? get(model.content.handle.docSync(), model.content.path)
+        : model.content?.toString();
+
+      const state = EditorState.create({
+        doc: initialText,
+        extensions: [
+          // TODO(burdon): Factor out VIM mode?
+          editorMode === 'vim' && vim(),
+
+          // Replication.
+          collaboration,
+
+          // Theme.
+          slots?.editor?.theme && EditorView.theme(slots?.editor?.theme),
+
+          // Custom.
+          ...extensions,
+        ].filter(Boolean) as Extension[],
+      });
+
+      setState(state);
+
+      // NOTE: This repaints the editor.
+      // If the new state is derived from the old state, it will likely not be visible other than the cursor resetting.
+      // Ideally this should not be hit except when changing between text objects.
+      view?.destroy();
+      setView(new EditorView({ state, parent }));
+
+      return () => {
+        view?.destroy();
+        setView(undefined);
+        setState(undefined);
+      };
+    }, [parent, model.content, themeMode, editorMode]);
+
+    const handleKeyUp = useCallback(
+      (event: KeyboardEvent) => {
+        const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
+        switch (key) {
+          case 'Enter': {
+            view?.contentDOM.focus();
+            break;
+          }
+
+          case 'Escape': {
+            editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey) && parent?.focus();
+            break;
+          }
+        }
+      },
+      [view, editorMode],
+    );
+
+    return (
+      <div
+        key={model.id}
+        ref={setParent}
+        tabIndex={0}
+        {...slots?.root}
+        {...(editorMode !== 'vim' && tabsterDOMAttribute)}
+        onKeyUp={handleKeyUp}
+      />
+    );
+  },
+);
+
+export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
+  ({ extensions: _extensions, slots, ...props }, forwardedRef) => {
+    const { themeMode } = useThemeContext();
+    const extensions = [...(_extensions ?? []), basicBundle({ themeMode, placeholder: slots?.editor?.placeholder })];
+    return (
+      <BaseTextEditor
+        ref={forwardedRef}
+        extensions={extensions}
+        slots={defaultsDeep({}, slots, { editor: { theme: basicTheme } })}
+        {...props}
+      />
+    );
+  },
+);
+
+export const MarkdownEditor = forwardRef<TextEditorRef, TextEditorProps>(
+  ({ extensions: _extensions, slots, ...props }, forwardedRef) => {
+    const { themeMode } = useThemeContext();
+    const extensions = [...(_extensions ?? []), markdownBundle({ themeMode })];
+    return (
+      <BaseTextEditor
+        ref={forwardedRef}
+        extensions={extensions}
+        slots={defaultsDeep({}, slots, { editor: { theme: markdownTheme } })}
+        {...props}
+      />
+    );
+  },
+);

package/src/components/TextEditor/codemirror.stories.ts

@@ -0,0 +1,114 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
+import { EditorState } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { type StoryObj } from '@storybook/html';
+import { basicSetup } from 'codemirror';
+import { yCollab } from 'y-codemirror.next';
+
+import { EventSubscriptions } from '@dxos/async';
+import { generateName } from '@dxos/display-name';
+import { Client, type PublicKey } from '@dxos/react-client';
+import { type Space, TextObject } from '@dxos/react-client/echo';
+import { type Identity } from '@dxos/react-client/halo';
+import { joinCommonSpace, TestBuilder, textGenerator } from '@dxos/react-client/testing';
+import { YText } from '@dxos/text-model';
+
+import { cursorColor, SpaceAwarenessProvider } from '../../hooks';
+import { EditorDocument, types as schema } from '../../testing';
+
+export default {
+  title: 'CodeMirror',
+};
+
+const testBuilder = new TestBuilder();
+const views: Record<number, EditorView> = {};
+const subscriptions = new EventSubscriptions();
+
+const updateEditor = async (id: number, editor: HTMLDivElement, identity: Identity, space: Space, text: TextObject) => {
+  const doc = text.doc;
+  const ytext = text.content;
+  if (!(ytext instanceof YText) || !doc) {
+    return;
+  }
+
+  const { awareness } = new SpaceAwarenessProvider({ space, doc, channel: `yjs.awareness.${text.id}` });
+  awareness.setLocalStateField('user', {
+    name: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
+    // TODO(wittjosiah): Pick colours from theme based on identity key.
+    color: cursorColor.color,
+    colorLight: cursorColor.light,
+  });
+
+  const state = EditorState.create({
+    doc: ytext.toString(),
+    extensions: [basicSetup, markdown({ base: markdownLanguage }), yCollab(ytext, awareness)],
+  });
+
+  const view = views[id];
+  if (view) {
+    view.setState(state);
+  } else {
+    views[id] = new EditorView({ state, parent: editor });
+  }
+
+  if (id === 0) {
+    subscriptions.clear();
+    subscriptions.add(textGenerator({ text: ytext }));
+  }
+};
+
+const setupEditor = async (id: number, client: Client, spaceKey: PublicKey, editor: HTMLDivElement) => {
+  const space = await client.spaces.get(spaceKey)!;
+  const query = space.db.query(EditorDocument.filter());
+  query.subscribe(({ objects }) => {
+    const text = objects[0]?.content;
+    void (text && updateEditor(id, editor, client.halo.identity.get()!, space, text));
+  });
+
+  const text = query.objects[0]?.content;
+  void (text && updateEditor(id, editor, client.halo.identity.get()!, space, text));
+};
+
+const setupSpace = async (count: number) => {
+  const clients = [...Array(count)].map(() => new Client({ services: testBuilder.createLocal() }));
+  await Promise.all(clients.map((client) => client.initialize()));
+  await Promise.all(clients.map((client) => client.halo.createIdentity()));
+  clients.map((client) => client.spaces.addSchema(schema));
+
+  const space = await clients[0].spaces.create();
+  const text = new TextObject('Hello, Storybook!');
+  const document = new EditorDocument({ content: text });
+  await space.db.add(document);
+
+  await joinCommonSpace(clients, space.key);
+
+  return { clients, spaceKey: space.key };
+};
+
+const count = 2;
+
+export const Default: StoryObj<{ id: number; client: Client; spaceKey: PublicKey }> = {
+  render: ({ id, client, spaceKey }) => {
+    const editor = document.createElement('div');
+    editor.setAttribute('style', 'min-width: 0; flex: 1; padding: 1rem;');
+    void setupEditor(id, client, spaceKey, editor);
+    return editor;
+  },
+  decorators: [
+    (story) => {
+      const container = document.createElement('div');
+      container.setAttribute('style', 'display: flex; justify-content: space-evenly');
+      void setupSpace(count).then(({ clients, spaceKey }) => {
+        clients.forEach((client, id) => {
+          // TODO(wittjosiah): According to the docs these types should be compatible.
+          container.appendChild(story({ args: { id, client, spaceKey } }) as HTMLElement);
+        });
+      });
+      return container;
+    },
+  ],
+};