@dxos/react-ui-editor 0.4.8-main.97e86fe → 0.4.8-main.a4c603b

package/src/components/TextEditor/TextEditor.tsx

@@ -2,10 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
-import { EditorState, type EditorStateConfig, type StateEffect } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
+import { EditorState, type Extension, type StateEffect } from '@codemirror/state';
+import { EditorView, scrollPastEnd } from '@codemirror/view';
 import { useFocusableGroup } from '@fluentui/react-tabster';
+import defaultsDeep from 'lodash.defaultsdeep';
 import React, {
+  type ComponentProps,
   type KeyboardEventHandler,
   forwardRef,
   useCallback,
@@ -13,12 +15,19 @@ import React, {
   useImperativeHandle,
   useRef,
   useState,
+  useMemo,
 } from 'react';
 
+import { DocAccessor } from '@dxos/echo-schema';
 import { log } from '@dxos/log';
+import { useThemeContext } from '@dxos/react-ui';
+import { focusRing } from '@dxos/react-ui-theme';
 import { isNotFalsy } from '@dxos/util';
 
-import { documentId, editorMode } from '../../extensions';
+import { createMarkdownExtensions, editorMode } from '../../extensions';
+import { createBasicExtensions, createThemeExtensions, type EditorModel } from '../../hooks';
+import { type ThemeStyles } from '../../styles';
+import { defaultTheme, markdownTheme, textTheme } from '../../themes';
 import { logChanges } from '../../util';
 
 export type CursorInfo = {
@@ -30,49 +39,61 @@ export type CursorInfo = {
   after?: string;
 };
 
-export type TextEditorProps = Pick<EditorStateConfig, 'doc' | 'selection' | 'extensions'> & {
-  id?: string;
-  className?: string;
+export type TextEditorSlots = {
+  root?: Omit<ComponentProps<'div'>, 'ref'>;
+  editor?: {
+    className?: string;
+  };
+  content?: {
+    className?: string;
+  };
+};
+
+export type TextEditorProps = {
+  model: EditorModel; // TODO(burdon): Optional (e.g., just provide content if readonly).
+  readonly?: boolean; // TODO(burdon): Move into model.
   autoFocus?: boolean;
-  scrollTo?: StateEffect<any>; // TODO(burdon): Restore scroll position: scrollTo EditorView.scrollSnapshot().
+  scrollPastEnd?: boolean;
   moveToEndOfLine?: boolean;
+  lineWrapping?: boolean;
+  scrollTo?: StateEffect<any>; // TODO(burdon): Restore scroll position: scrollTo EditorView.scrollSnapshot().
+  selection?: { anchor: number; head?: number };
+  placeholder?: string;
+  theme?: ThemeStyles;
+  slots?: TextEditorSlots;
+  extensions?: Extension[];
   debug?: boolean;
-  dataTestId?: string;
 };
 
-let instanceCount = 0;
-
 /**
- * Thin wrapper for text editor.
- * Handles tabster and focus management.
+ * Base text editor.
  */
-// TODO(burdon): Use useTextEditor internally.
-export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
+// TODO(burdon): Replace with useTextEditor.
+export const BaseTextEditor = forwardRef<EditorView | null, TextEditorProps>(
   (
     {
-      id,
-      doc,
-      selection,
-      extensions,
-      className,
+      model,
+      readonly,
       autoFocus,
       scrollTo = EditorView.scrollIntoView(0),
       moveToEndOfLine,
+      selection,
+      theme,
+      slots = defaultSlots,
+      extensions = [],
+      scrollPastEnd: _scrollPastEnd,
       debug,
-      dataTestId,
     },
     forwardedRef,
   ) => {
-    // TODO(burdon): Increments by 2!
-    const [instanceId] = useState(() => `text-editor-${++instanceCount}`);
-
-    // TODO(burdon): Make tabster optional.
     const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
+    const { themeMode } = useThemeContext();
+
     const rootRef = useRef<HTMLDivElement>(null);
     const [view, setView] = useState<EditorView | null>(null);
 
     // The view ref can be used to focus the editor.
-    // NOTE: Ref updates do not cause the parent to re-render; also the ref is not available immediately.
+    // NOTE: This does not cause the parent to re-render, so the ref is not available immediately.
     useImperativeHandle<EditorView | null, EditorView | null>(forwardedRef, () => view, [view]);
 
     // Set focus.
@@ -85,22 +106,34 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
     // Create editor state and view.
     // The view is recreated if the model or extensions are changed.
     useEffect(() => {
-      log('updating', { id, instanceId });
+      if (!model || !rootRef.current) {
+        return;
+      }
 
       //
       // EditorState
       // https://codemirror.net/docs/ref/#state.EditorStateConfig
       //
       const state = EditorState.create({
-        doc,
+        doc: typeof model.content === 'string' ? model.content : DocAccessor.getValue(model.content),
         selection,
         extensions: [
-          id && documentId.of(id),
-          // TODO(burdon): NOTE: Doesn't catch errors in keymap functions.
+          // TODO(burdon): Doesn't catch errors in keymap functions.
           EditorView.exceptionSink.of((err) => {
             log.catch(err);
           }),
 
+          // Theme.
+          // TODO(burdon): Make base theme configurable.
+          EditorView.baseTheme(defaultTheme),
+          theme && EditorView.theme(theme),
+          EditorView.darkTheme.of(themeMode === 'dark'),
+          slots.editor?.className && EditorView.editorAttributes.of({ class: slots.editor.className }),
+          slots.content?.className && EditorView.contentAttributes.of({ class: slots.content.className }),
+
+          // NOTE: Assumes default line height.
+          _scrollPastEnd && scrollPastEnd(),
+
           // Focus.
           EditorView.updateListener.of((update) => {
             update.transactions.forEach((transaction) => {
@@ -110,7 +143,16 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
             });
           }),
 
-          extensions,
+          // State.
+          EditorView.editable.of(!readonly),
+          EditorState.readOnly.of(!!readonly),
+
+          // Storage and replication.
+          // NOTE: This must come before user extensions.
+          model.extension,
+
+          // Custom.
+          ...extensions,
         ].filter(isNotFalsy),
       });
 
@@ -120,7 +162,7 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
       //
       const view = new EditorView({
         state,
-        parent: rootRef.current!,
+        parent: rootRef.current,
         scrollTo,
         // NOTE: Uncomment to debug/monitor all transactions.
         // https://codemirror.net/docs/ref/#view.EditorView.dispatch
@@ -134,7 +176,6 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
 
       setView(view);
 
-      // Position cursor at end of line.
       if (moveToEndOfLine) {
         const { to } = view.state.doc.lineAt(0);
         view?.dispatch({ selection: { anchor: to } });
@@ -142,14 +183,15 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
 
       // Remove tabster attribute (rely on custom keymap).
       if (state.facet(editorMode).noTabster) {
-        rootRef.current?.removeAttribute('data-tabster');
+        rootRef.current.removeAttribute('data-tabster');
       }
 
       return () => {
         view?.destroy();
         setView(null);
       };
-    }, [doc, selection, extensions]);
+      // TODO(wittjosiah): Does `rootRef` ever change? Only `.current` changes?
+    }, [rootRef, extensions, model, readonly, themeMode]);
 
     // Focus editor on Enter (e.g., when tabbing to this component).
     const handleKeyUp = useCallback<KeyboardEventHandler<HTMLDivElement>>(
@@ -169,12 +211,82 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
       <div
         role='none'
         ref={rootRef}
+        key={model.id} // TODO(burdon): Remove?
         tabIndex={0}
-        className={className}
-        data-testid={dataTestId}
-        {...tabsterDOMAttribute}
         onKeyUp={handleKeyUp}
+        {...slots.root}
+        {...tabsterDOMAttribute}
       />
     );
   },
 );
+
+// TODO(burdon): Replace with hooks.
+export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
+  (
+    { readonly, placeholder, lineWrapping = true, theme = textTheme, slots, extensions: _extensions, ...props },
+    forwardedRef,
+  ) => {
+    const { themeMode } = useThemeContext();
+    const updatedSlots = defaultsDeep({}, slots, defaultTextSlots);
+    const extensions = useMemo(
+      () => [
+        createBasicExtensions({ lineWrapping, placeholder }),
+        createThemeExtensions({ themeMode }),
+        ...(_extensions ?? []),
+      ],
+      [themeMode, placeholder, lineWrapping, _extensions],
+    );
+
+    return (
+      <BaseTextEditor
+        ref={forwardedRef}
+        readonly={readonly}
+        extensions={extensions}
+        theme={theme}
+        slots={updatedSlots}
+        {...props}
+      />
+    );
+  },
+);
+
+// TODO(burdon): Replace with hooks.
+export const MarkdownEditor = forwardRef<EditorView | null, TextEditorProps>(
+  ({ readonly, placeholder, theme = markdownTheme, slots, extensions: _extensions, ...props }, forwardedRef) => {
+    const { themeMode } = useThemeContext();
+    const updatedSlots = defaultsDeep({}, slots, defaultMarkdownSlots);
+    const extensions = useMemo(
+      () => [createMarkdownExtensions({ themeMode, placeholder }), ...(_extensions ?? [])],
+      [themeMode, placeholder, _extensions],
+    );
+
+    return (
+      <BaseTextEditor
+        ref={forwardedRef}
+        readonly={readonly}
+        extensions={extensions}
+        theme={theme}
+        slots={updatedSlots}
+        {...props}
+      />
+    );
+  },
+);
+
+export const defaultSlots: TextEditorSlots = {
+  root: {
+    className: focusRing,
+  },
+  editor: {
+    className: 'bs-full',
+  },
+};
+
+export const defaultTextSlots: TextEditorSlots = {
+  ...defaultSlots,
+};
+
+export const defaultMarkdownSlots: TextEditorSlots = {
+  ...defaultSlots,
+};

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -4,70 +4,61 @@
 
 import '@dxosTheme';
 
-import React, { type FC, useState } from 'react';
+import React, { type FC, useMemo, useState } from 'react';
 
 import { TextObject } from '@dxos/echo-schema';
 import { PublicKey } from '@dxos/keys';
 import { faker } from '@dxos/random';
-import { Tooltip, useThemeContext } from '@dxos/react-ui';
-import { textBlockWidth } from '@dxos/react-ui-theme';
+import { Tooltip } from '@dxos/react-ui';
+import { mx, textBlockWidth } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { Toolbar } from './Toolbar';
 import {
-  type Comment,
   decorateMarkdown,
   comments,
-  createBasicExtensions,
-  createDataExtensions,
-  createThemeExtensions,
-  formattingKeymap,
+  formatting,
+  image,
   table,
   useComments,
   useFormattingState,
-  createMarkdownExtensions,
-  image,
 } from '../../extensions';
-import { useActionHandler, useDocAccessor, useTextEditor } from '../../hooks';
+import { type Comment, useActionHandler, useEditorView, useTextModel } from '../../hooks';
 import translations from '../../translations';
+import { MarkdownEditor } from '../TextEditor';
 
 faker.seed(101);
 
-const Story: FC<{ content: string }> = ({ content }) => {
-  const { themeMode } = useThemeContext();
+const Story: FC<{ id?: string; content: string }> = ({ id = 'test', content }) => {
   const [item] = useState({ text: new TextObject(content) });
-  const { id, doc, accessor } = useDocAccessor(item.text);
+  const [_comments, setComments] = useState<Comment[]>([]);
+  const [editorRef, viewInvalidated] = useEditorView(id);
+  const model = useTextModel({ text: item.text });
   const [formattingState, formattingObserver] = useFormattingState();
-  const { parentRef, view } = useTextEditor(
-    () => ({
-      id,
-      doc,
-      extensions: [
-        createBasicExtensions(),
-        createMarkdownExtensions({ themeMode }),
-        createThemeExtensions({ themeMode, slots: { editor: { className: 'p-2' } } }),
-        createDataExtensions({ id, text: accessor }),
-        comments({
-          onCreate: ({ cursor }) => {
-            const id = PublicKey.random().toHex();
-            setComments((comments) => [...comments, { id, cursor }]);
-            return id;
-          },
-        }),
-        decorateMarkdown(),
-        formattingKeymap(),
-        image(),
-        table(),
-        formattingObserver,
-      ],
-    }),
-    [id, accessor, themeMode],
+  const extensions = useMemo(
+    () => [
+      decorateMarkdown(),
+      comments({
+        onCreate: ({ cursor }) => {
+          const id = PublicKey.random().toHex();
+          setComments((comments) => [...comments, { id, cursor }]);
+          return id;
+        },
+      }),
+      formatting(),
+      image(),
+      table(),
+      formattingObserver,
+    ],
+    [],
   );
 
-  const [_comments, setComments] = useState<Comment[]>([]);
-  useComments(view, id, _comments);
+  useComments(viewInvalidated ? null : editorRef.current, id, _comments);
+  const handleAction = useActionHandler(editorRef.current);
 
-  const handleAction = useActionHandler(view);
+  if (!model) {
+    return null;
+  }
 
   return (
     <div role='none' className='fixed inset-0 flex flex-col'>
@@ -76,7 +67,16 @@ const Story: FC<{ content: string }> = ({ content }) => {
         <Toolbar.Separator />
         <Toolbar.Extended />
       </Toolbar.Root>
-      <div role='textbox' ref={parentRef} className={textBlockWidth} />;
+
+      <MarkdownEditor
+        ref={editorRef}
+        model={model}
+        extensions={extensions}
+        slots={{
+          root: { className: mx(textBlockWidth) },
+          editor: { className: 'p-2' },
+        }}
+      />
     </div>
   );
 };

package/src/extensions/automerge/automerge.stories.tsx

@@ -9,7 +9,7 @@ import '@preact/signals-react';
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { Repo } from '@dxos/automerge/automerge-repo';
-import { createDocAccessor, Filter, DocAccessor } from '@dxos/echo-schema';
+import { createDocAccessor, Filter } from '@dxos/echo-schema';
 import { type PublicKey } from '@dxos/keys';
 import { Expando, TextObject, useSpace } from '@dxos/react-client/echo';
 import { ClientRepeater } from '@dxos/react-client/testing';
@@ -17,9 +17,9 @@ import { useThemeContext } from '@dxos/react-ui';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { automerge } from './automerge';
-import { useTextEditor } from '../../hooks';
+import { DocAccessor } from './defs';
+import { createBasicExtensions, createThemeExtensions, useTextEditor } from '../../hooks';
 import translations from '../../translations';
-import { createBasicExtensions, createThemeExtensions } from '../factories';
 
 const initialContent = 'Hello world!';
 
@@ -34,19 +34,21 @@ type EditorProps = {
 
 const Editor = ({ source, autoFocus }: EditorProps) => {
   const { themeMode } = useThemeContext();
-  const { parentRef } = useTextEditor(
-    () => ({
-      doc: DocAccessor.getValue(source),
-      extensions: [
-        createBasicExtensions({ placeholder: 'Type here...' }),
-        createThemeExtensions({ themeMode, slots: { editor: { className: 'p-2 bg-white dark:bg-black' } } }),
-        automerge(source),
-      ],
-      autoFocus,
-    }),
-    [source, themeMode],
+  const extensions = useMemo(
+    () => [
+      createBasicExtensions({ placeholder: 'Type here...' }),
+      createThemeExtensions({ themeMode, slots: { editor: { className: 'p-2 bg-white dark:bg-black' } } }),
+      automerge(source),
+    ],
+    [themeMode, source],
   );
 
+  const { parentRef } = useTextEditor({
+    doc: DocAccessor.getValue(source),
+    extensions,
+    autoFocus,
+  });
+
   return <div ref={parentRef} />;
 };
 
@@ -112,8 +114,7 @@ const EchoStory = ({ spaceKey }: { spaceKey: PublicKey }) => {
 
 export const Default = {};
 
-// TODO(burdon): Error:
-//  chunk-6NX3RPDS.mjs:2021 ControlPipeline#5 Error: invariant violation: Feed already added
+// TODO(burdon): Feed already added error.
 export const WithEcho = {
   decorators: [withTheme],
   render: () => {

package/src/extensions/automerge/automerge.ts

@@ -8,10 +8,9 @@ import { StateField, type Extension } from '@codemirror/state';
 import { EditorView, ViewPlugin } from '@codemirror/view';
 
 import { next as A } from '@dxos/automerge/automerge';
-import { type DocAccessor } from '@dxos/echo-schema';
 
 import { cursorConverter } from './cursor';
-import { updateHeadsEffect, isReconcile, type State } from './defs';
+import { updateHeadsEffect, isReconcile, type State, type DocAccessor } from './defs';
 import { Syncer } from './sync';
 import { Cursor } from '../cursor';
 

package/src/extensions/automerge/cursor.ts

@@ -5,9 +5,9 @@
 import get from 'lodash.get';
 
 import { next as A } from '@dxos/automerge/automerge';
-import { type DocAccessor } from '@dxos/echo-schema';
 import { log } from '@dxos/log';
 
+import { type DocAccessor } from './defs';
 import { type CursorConverter } from '../cursor';
 
 export const cursorConverter = ({ handle, path }: DocAccessor): CursorConverter => ({

package/src/extensions/automerge/defs.ts

@@ -5,8 +5,9 @@
 //
 
 import { Annotation, StateEffect, type StateField, type EditorState, type Transaction } from '@codemirror/state';
+import get from 'lodash.get';
 
-import { type Heads, type Prop } from '@dxos/automerge/automerge';
+import { type ChangeFn, type ChangeOptions, type Doc, type Heads, type Prop } from '@dxos/automerge/automerge';
 
 export type State = {
   path: Prop[];
@@ -30,3 +31,23 @@ export const reconcileAnnotation = Annotation.define<boolean>();
 export const isReconcile = (tr: Transaction): boolean => {
   return !!tr.annotation(reconcileAnnotation);
 };
+
+// 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/automerge/index.ts

@@ -3,3 +3,4 @@
 //
 
 export { automerge } from './automerge';
+export { type IDocHandle } from './defs';

package/src/extensions/automerge/sync.ts

@@ -8,9 +8,16 @@ import { type StateField } from '@codemirror/state';
 import { type EditorView } from '@codemirror/view';
 
 import { next as A } from '@dxos/automerge/automerge';
-import { type IDocHandle } from '@dxos/echo-schema';
 
-import { getLastHeads, getPath, type State, reconcileAnnotation, updateHeads, isReconcile } from './defs';
+import {
+  getLastHeads,
+  getPath,
+  type IDocHandle,
+  type State,
+  reconcileAnnotation,
+  updateHeads,
+  isReconcile,
+} from './defs';
 import { updateAutomerge } from './update-automerge';
 import { updateCodeMirror } from './update-codemirror';
 

package/src/extensions/automerge/update-automerge.ts

@@ -7,9 +7,8 @@
 import { type EditorState, type StateField, type Transaction, type Text } from '@codemirror/state';
 
 import { next as A, type Heads } from '@dxos/automerge/automerge';
-import { type IDocHandle } from '@dxos/echo-schema';
 
-import { type State } from './defs';
+import { type IDocHandle, type State } from './defs';
 
 export const updateAutomerge = (
   field: StateField<State>,

package/src/extensions/{awareness/awareness.ts → awareness.ts}

@@ -16,7 +16,7 @@ import {
 import { Event } from '@dxos/async';
 import { Context } from '@dxos/context';
 
-import { Cursor, type CursorConverter } from '../cursor';
+import { Cursor, type CursorConverter } from './cursor';
 
 export interface AwarenessProvider {
   remoteStateChange: Event<void>;

package/src/extensions/command/state.ts

@@ -74,7 +74,7 @@ export const commandState = StateField.define<CommandState>({
 
     return state;
   },
-  provide: (field) => [showTooltip.from(field, (value) => value.tooltip ?? null)],
+  provide: (f) => [showTooltip.from(f, (value) => value.tooltip ?? null)],
 });
 
 export const openEffect = StateEffect.define<{ pos: number; fullWidth?: boolean }>();

package/src/extensions/comments.ts

@@ -13,7 +13,7 @@ import { log } from '@dxos/log';
 import { nonNullable } from '@dxos/util';
 
 import { Cursor } from './cursor';
-import { type Comment, type Range } from './types';
+import { type Comment, type Range } from '../hooks';
 import { getToken } from '../styles';
 import { callbackWrapper } from '../util';
 
@@ -508,16 +508,12 @@ export const focusComment = (view: EditorView, id: string, center = true) => {
 /**
  * Update comments state field.
  */
-export const useComments = (view: EditorView | null | undefined, id: string, comments: Comment[] = []) => {
+export const useComments = (view: EditorView | null, id: string, comments: Comment[] = []) => {
   useEffect(() => {
     if (view) {
-      // Check same document.
-      // NOTE: Hook might be called before editor state is updated.
-      if (id === view.state.facet(documentId)) {
-        view.dispatch({
-          effects: setComments.of({ id, comments }),
-        });
-      }
+      view.dispatch({
+        effects: setComments.of({ id, comments }),
+      });
     }
   }, [id, view, comments]);
 };