@dxos/react-ui-editor 0.4.6-main.268e405 → 0.4.6-main.2c76dca

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

@@ -7,11 +7,9 @@ import '@dxosTheme';
 import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-network-broadcastchannel';
 import '@preact/signals-react';
 import { EditorView } from '@codemirror/view'; // Register react integration.
-import get from 'lodash.get';
 import React, { useEffect, useMemo, useState } from 'react';
 
-import { type Prop } from '@dxos/automerge/automerge';
-import { Repo, type DocHandle } from '@dxos/automerge/automerge-repo';
+import { Repo } from '@dxos/automerge/automerge-repo';
 import { Filter } from '@dxos/echo-schema';
 import { type PublicKey } from '@dxos/keys';
 import { Expando, TextObject, useSpace } from '@dxos/react-client/echo';
@@ -20,7 +18,8 @@ import { ClientRepeater } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { MarkdownEditor } from './TextEditor';
-import { type IDocHandle, automerge, awareness, createBasicBundle } from '../../extensions';
+import { automerge, awareness, createBasicBundle } from '../../extensions';
+import { DocAccessor } from '../../extensions/automerge/defs';
 import { useTextEditor, useTextModel } from '../../hooks';
 import { defaultTheme } from '../../themes';
 import translations from '../../translations';
@@ -32,24 +31,24 @@ type TestObject = {
 };
 
 type EditorProps = {
-  handle: IDocHandle;
-  path?: Prop[];
+  source: DocAccessor;
 };
 
-const Editor = ({ handle, path = ['text'] }: EditorProps) => {
+const Editor = ({ source }: EditorProps) => {
   const extensions = useMemo(
     () => [
       EditorView.baseTheme(defaultTheme),
       EditorView.editorAttributes.of({ class: 'p-2 bg-white' }),
       createBasicBundle({ placeholder: 'Type here...' }),
-      automerge({ handle, path }),
+      automerge(source),
       awareness(),
     ],
-    [handle, path],
+    [source],
   );
+
   const { parentRef } = useTextEditor({
     autoFocus: true,
-    doc: get(handle.docSync()!, path),
+    doc: DocAccessor.getValue(source),
     extensions,
   });
 
@@ -57,8 +56,8 @@ const Editor = ({ handle, path = ['text'] }: EditorProps) => {
 };
 
 const Story = () => {
-  const [object1, setObject1] = useState<DocHandle<TestObject>>();
-  const [object2, setObject2] = useState<DocHandle<TestObject>>();
+  const [object1, setObject1] = useState<DocAccessor<TestObject>>();
+  const [object2, setObject2] = useState<DocAccessor<TestObject>>();
 
   useEffect(() => {
     queueMicrotask(async () => {
@@ -77,8 +76,8 @@ const Story = () => {
       const object2 = repo2.find(object1.url);
       await object2.whenReady();
 
-      setObject1(object1);
-      setObject2(object2);
+      setObject1({ handle: object1, path: ['text'] });
+      setObject2({ handle: object2, path: ['text'] });
     });
   }, []);
 
@@ -88,8 +87,8 @@ const Story = () => {
 
   return (
     <div role='none' className='grid grid-cols-2 bs-full is-full gap-2'>
-      <Editor handle={object1} path={['text']} />
-      <Editor handle={object2} path={['text']} />
+      <Editor source={object1} />
+      <Editor source={object2} />
     </div>
   );
 };

package/src/extensions/automerge/automerge.ts

@@ -7,29 +7,24 @@
 import { StateField, type Extension } from '@codemirror/state';
 import { EditorView, ViewPlugin } from '@codemirror/view';
 
-import { next as A, type Prop } from '@dxos/automerge/automerge';
+import { next as A } from '@dxos/automerge/automerge';
 
 import { cursorConverter } from './cursor';
-import { updateHeadsEffect, type IDocHandle, isReconcile, type State } from './defs';
+import { updateHeadsEffect, isReconcile, type State, type DocAccessor } from './defs';
 import { Syncer } from './sync';
 import { Cursor } from '../cursor';
 
-export type AutomergeOptions = {
-  handle: IDocHandle;
-  path: Prop[];
-};
-
-export const automerge = ({ handle, path }: AutomergeOptions): Extension => {
+export const automerge = (accessor: DocAccessor): Extension => {
   const syncState = StateField.define<State>({
     create: () => ({
-      path: path.slice(),
-      lastHeads: A.getHeads(handle.docSync()!),
+      path: accessor.path.slice(),
+      lastHeads: A.getHeads(accessor.handle.docSync()!),
       unreconciledTransactions: [],
     }),
 
     update: (value, tr) => {
       const result: State = {
-        path: path.slice(),
+        path: accessor.path.slice(),
         lastHeads: value.lastHeads,
         unreconciledTransactions: value.unreconciledTransactions.slice(),
       };
@@ -54,21 +49,21 @@ export const automerge = ({ handle, path }: AutomergeOptions): Extension => {
     },
   });
 
-  const syncer = new Syncer(handle, syncState);
+  const syncer = new Syncer(accessor.handle, syncState);
 
   return [
-    Cursor.converter.of(cursorConverter(handle, path)),
+    Cursor.converter.of(cursorConverter(accessor)),
     syncState,
 
     // Reconcile external updates.
     ViewPlugin.fromClass(
       class {
         constructor(private readonly _view: EditorView) {
-          handle.addListener('change', this._handleChange.bind(this));
+          accessor.handle.addListener('change', this._handleChange.bind(this));
         }
 
         destroy() {
-          handle.removeListener('change', this._handleChange.bind(this));
+          accessor.handle.removeListener('change', this._handleChange.bind(this));
         }
 
         _handleChange() {

package/src/extensions/automerge/cursor.ts

@@ -4,14 +4,13 @@
 
 import get from 'lodash.get';
 
-import type { Prop } from '@dxos/automerge/automerge';
 import { next as A } from '@dxos/automerge/automerge';
 import { log } from '@dxos/log';
 
-import { type IDocHandle } from './defs';
+import { type DocAccessor } from './defs';
 import { type CursorConverter } from '../cursor';
 
-export const cursorConverter = (handle: IDocHandle, path: Prop[]): CursorConverter => ({
+export const cursorConverter = ({ handle, path }: DocAccessor): CursorConverter => ({
   // TODO(burdon): Handle assoc to associate with a previous character.
   toCursor: (pos) => {
     const doc = handle.docSync();

package/src/extensions/automerge/defs.ts

@@ -5,6 +5,7 @@
 //
 
 import { Annotation, StateEffect, type StateField, type EditorState, type Transaction } from '@codemirror/state';
+import get from 'lodash.get';
 
 import { type ChangeFn, type ChangeOptions, type Doc, type Heads, type Prop } from '@dxos/automerge/automerge';
 
@@ -31,10 +32,22 @@ export const isReconcile = (tr: Transaction): boolean => {
   return !!tr.annotation(reconcileAnnotation);
 };
 
-export type IDocHandle<T = any> = {
+// TODO(burdon): Reconcile with echo.
+export interface DocAccessor<T = any> {
+  handle: IDocHandle<T>;
+  get path(): string[]; // TODO(burdon): Getter or prop?
+}
+
+// TODO(burdon): Reconcile with echo.
+export const DocAccessor = {
+  getValue: (accessor: DocAccessor) => get(accessor.handle, accessor.path),
+};
+
+// TODO(burdon): Reconcile with echo.
+export interface IDocHandle<T = any> {
   docSync(): Doc<T> | undefined;
   change(callback: ChangeFn<T>, options?: ChangeOptions<T>): void;
   changeAt(heads: Heads, callback: ChangeFn<T>, options?: ChangeOptions<T>): string[] | undefined;
   addListener(event: 'change', listener: () => void): void;
   removeListener(event: 'change', listener: () => void): void;
-};
+}

package/src/extensions/markdown/decorate.ts

@@ -10,23 +10,6 @@ import { mx } from '@dxos/react-ui-theme';
 
 import { getToken } from '../../styles';
 
-/**
- * Widget for first/last line of code block (read-only).
- */
-// TODO(burdon): Add copy-to-clipboard button.
-class FencedCodeBoundary extends WidgetType {
-  constructor(private readonly _className: string) {
-    super();
-  }
-
-  override toDOM() {
-    const el = document.createElement('span');
-    el.innerHTML = ' ';
-    el.className = mx('cm-code cm-codeblock', this._className);
-    return el;
-  }
-}
-
 class HorizontalRuleWidget extends WidgetType {
   override toDOM() {
     const el = document.createElement('span');
@@ -91,8 +74,9 @@ class CheckboxWidget extends WidgetType {
 }
 
 const hide = Decoration.replace({});
-const fencedCodeTop = Decoration.replace({ widget: new FencedCodeBoundary('cm-codeblock-end cm-codeblock-first') });
-const fencedCodeBottom = Decoration.replace({ widget: new FencedCodeBoundary('cm-codeblock-end cm-codeblock-last') });
+const fencedCodeLine = Decoration.line({ class: mx('cm-code cm-codeblock-line') });
+const fencedCodeLineFirst = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-first') });
+const fencedCodeLineLast = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-last') });
 const horizontalRule = Decoration.replace({ widget: new HorizontalRuleWidget() });
 const checkedTask = Decoration.replace({ widget: new CheckboxWidget(true) });
 const uncheckedTask = Decoration.replace({ widget: new CheckboxWidget(false) });
@@ -130,16 +114,13 @@ const buildDecorations = (view: EditorView, options: DecorateOptions): Decoratio
             }
             const first = block.from <= node.from;
             const last = block.to >= node.to;
+            builder.add(
+              block.from,
+              block.from,
+              first ? fencedCodeLineFirst : last ? fencedCodeLineLast : fencedCodeLine,
+            );
             if (!editing && (first || last)) {
-              builder.add(block.from, block.to, first ? fencedCodeTop : fencedCodeBottom);
-            } else {
-              builder.add(
-                block.from,
-                block.from,
-                Decoration.line({
-                  class: mx('cm-code cm-codeblock-line', first && 'cm-codeblock-first', last && 'cm-codeblock-last'),
-                }),
-              );
+              builder.add(block.from, block.to, hide);
             }
           }
           return false;
@@ -252,18 +233,13 @@ const formattingStyles = EditorView.baseTheme({
     },
   },
   '& .cm-codeblock-first': {
-    '&::after': {
-      borderTopLeftRadius: '.5rem',
-      borderTopRightRadius: '.5rem',
-    },
+    borderTopLeftRadius: '.5rem',
+    borderTopRightRadius: '.5rem',
   },
   '& .cm-codeblock-last': {
-    '&::after': {
-      borderBottomLeftRadius: '.5rem',
-      borderBottomRightRadius: '.5rem',
-    },
+    borderBottomLeftRadius: '.5rem',
+    borderBottomRightRadius: '.5rem',
   },
-
   '&light .cm-codeblock-line, &light .cm-activeLine.cm-codeblock-line': {
     background: getToken('extend.semanticColors.input.light'),
     mixBlendMode: 'darken',
@@ -272,18 +248,6 @@ const formattingStyles = EditorView.baseTheme({
     background: getToken('extend.semanticColors.input.dark'),
     mixBlendMode: 'lighten',
   },
-  '&light .cm-codeblock-first, &light .cm-codeblock-last': {
-    mixBlendMode: 'darken',
-    '&::after': {
-      background: getToken('extend.semanticColors.input.light'),
-    },
-  },
-  '&dark .cm-codeblock-first, &dark .cm-codeblock-last': {
-    mixBlendMode: 'lighten',
-    '&::after': {
-      background: getToken('extend.semanticColors.input.dark'),
-    },
-  },
   '& .cm-hr': {
     display: 'inline-block',
     width: '100%',

package/src/extensions/markdown/image.ts

@@ -40,6 +40,16 @@ export const image = (options: ImageOptions = {}): Extension => {
   });
 };
 
+const preloaded = new Set<string>();
+
+const preloadImage = (url: string) => {
+  if (!preloaded.has(url)) {
+    const img = document.createElement('img');
+    img.src = url;
+    preloaded.add(url);
+  }
+};
+
 const buildDecorations = (from: number, to: number, state: EditorState) => {
   const decorations: Range<Decoration>[] = [];
   const cursor = state.selection.main.head;
@@ -51,6 +61,7 @@ const buildDecorations = (from: number, to: number, state: EditorState) => {
         if (urlNode) {
           const hide = state.readOnly || cursor < node.from || cursor > node.to;
           const url = state.sliceDoc(urlNode.from, urlNode.to);
+          preloadImage(url);
           decorations.push(
             Decoration.replace({
               block: true, // Prevent cursor from entering.

package/src/hooks/defs.ts

@@ -35,7 +35,9 @@ export type EditorModel = {
 
 /**
  * State field makes the model available to other extensions.
+ * @deprecated
  */
+// TODO(burdon): Remove.
 export const modelState = StateField.define<EditorModel | undefined>({
   create: () => undefined,
   update: (model) => model,

package/src/hooks/useEditorView.ts

@@ -7,6 +7,7 @@ import { type MutableRefObject, useRef, useState } from 'react';
 
 /**
  * Hook for accessing the editor view.
+ * @deprecated
  *
  * ```tsx
  * const Test = () => {
@@ -20,6 +21,7 @@ import { type MutableRefObject, useRef, useState } from 'react';
  * };
  * ```
  */
+// TODO(burdon): Replace with useTextEditor.
 export const useEditorView = (id: string): [MutableRefObject<EditorView | null>, boolean] => {
   const editorRef = useRef<EditorView | null>(null);
   const [prev, setPrev] = useState<[EditorView | null, string]>([null, '']);

package/src/hooks/useTextEditor.ts

@@ -10,7 +10,7 @@ import {
   type StateEffect,
 } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
-import { type RefObject, useEffect, useRef, useState } from 'react';
+import { type DependencyList, type RefObject, useEffect, useRef, useState } from 'react';
 
 import { log } from '@dxos/log';
 import { type ThemeMode } from '@dxos/react-ui';
@@ -36,14 +36,10 @@ export type UseTextEditor = {
  * Hook for creating editor.
  */
 // TODO(wittjosiah): Does not work in strict mode.
-export const useTextEditor = ({
-  autoFocus,
-  scrollTo,
-  debug,
-  doc,
-  selection,
-  extensions,
-}: UseTextEditorOptions = {}): UseTextEditor => {
+export const useTextEditor = (
+  { autoFocus, scrollTo, debug, doc, selection, extensions }: UseTextEditorOptions = {},
+  deps?: DependencyList,
+): UseTextEditor => {
   const onUpdate = useRef<() => void>();
   const [view, setView] = useState<EditorView>();
   const parentRef = useRef<HTMLDivElement>(null);
@@ -88,7 +84,7 @@ export const useTextEditor = ({
     return () => {
       view?.destroy();
     };
-  }, [doc, extensions]);
+  }, deps);
 
   useEffect(() => {
     if (view) {

package/src/hooks/useTextModel.ts

@@ -2,6 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
+import { type Extension } from '@codemirror/state';
 import get from 'lodash.get';
 import { type Dispatch, type SetStateAction, useState, useMemo } from 'react';
 
@@ -14,13 +15,42 @@ import { type Identity } from '@dxos/react-client/halo';
 import { SpaceAwarenessProvider } from './awareness-provider';
 import { type EditorModel, modelState } from './defs';
 import { automerge, awareness } from '../extensions';
+import { type DocAccessor } from '../extensions/automerge/defs';
 import { cursorColor } from '../styles';
 
-// TODO(burdon): Remove space/identity dependency. Define interface for the framework re content and presence.
-export type UseTextModelProps = {
-  identity?: Identity | null;
+export type useTextExtensionsProps = {
+  id: string;
+  text: DocAccessor;
   space?: Space;
+  identity?: Identity;
+};
+
+// TODO(burdon): Factor out automerge defs and extension (not hook).
+export const useTextExtensions = ({ id, text, space, identity }: useTextExtensionsProps): Extension[] => {
+  const extensions: Extension[] = [automerge(text)];
+
+  if (space && identity) {
+    const awarenessProvider = new SpaceAwarenessProvider({
+      space,
+      channel: `awareness.${id}`,
+      peerId: identity.identityKey.toHex(),
+      info: {
+        displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
+        color: cursorColor.color,
+        lightColor: cursorColor.light,
+      },
+    });
+
+    extensions.push(awareness(awarenessProvider));
+  }
+
+  return extensions;
+};
+
+export type UseTextModelProps = {
   text?: TextObject;
+  space?: Space;
+  identity?: Identity | null;
 };
 
 /**
@@ -32,8 +62,7 @@ export const useTextModel = (props: UseTextModelProps): EditorModel | undefined
 
 /**
  * For use primarily in stories & tests so the dependence on TextObject can be avoided.
- * @param id
- * @param defaultContent
+ * @deprecated
  */
 export const useInMemoryTextModel = ({
   id,

package/src/themes/default.ts

@@ -100,6 +100,13 @@ export const defaultTheme: ThemeStyles = {
     background: 'transparent',
   },
 
+  //
+  // gutter
+  //
+  '.cm-gutterElement': {
+    width: '48px',
+  },
+
   //
   // Selection
   //