@dxos/react-ui-editor 0.4.7-main.33db07e → 0.4.7-main.340e96b

package/src/{components/TextEditor → extensions/automerge}/automerge.stories.tsx

@@ -6,22 +6,19 @@ import '@dxosTheme';
 
 import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-network-broadcastchannel';
 import '@preact/signals-react';
-import { EditorView } from '@codemirror/view'; // Register react integration.
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { Repo } from '@dxos/automerge/automerge-repo';
-import { Filter } 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 { useIdentity } from '@dxos/react-client/halo';
 import { ClientRepeater } from '@dxos/react-client/testing';
+import { useThemeContext } from '@dxos/react-ui';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { MarkdownEditor } from './TextEditor';
-import { automerge, awareness, createBasicBundle } from '../../extensions';
-import { DocAccessor } from '../../extensions/automerge/defs';
-import { useTextEditor, useTextModel } from '../../hooks';
-import { defaultTheme } from '../../themes';
+import { automerge } from './automerge';
+import { DocAccessor } from './defs';
+import { createBasicExtensions, createThemeExtensions, useTextEditor } from '../../hooks';
 import translations from '../../translations';
 
 const initialContent = 'Hello world!';
@@ -32,24 +29,24 @@ type TestObject = {
 
 type EditorProps = {
   source: DocAccessor;
+  autoFocus?: boolean;
 };
 
-const Editor = ({ source }: EditorProps) => {
+const Editor = ({ source, autoFocus }: EditorProps) => {
+  const { themeMode } = useThemeContext();
   const extensions = useMemo(
     () => [
-      EditorView.baseTheme(defaultTheme),
-      EditorView.editorAttributes.of({ class: 'p-2 bg-white' }),
-      createBasicBundle({ placeholder: 'Type here...' }),
+      createBasicExtensions({ placeholder: 'Type here...' }),
+      createThemeExtensions({ themeMode, slots: { editor: { className: 'p-2 bg-white dark:bg-black' } } }),
       automerge(source),
-      awareness(),
     ],
-    [source],
+    [themeMode, source],
   );
 
   const { parentRef } = useTextEditor({
-    autoFocus: true,
     doc: DocAccessor.getValue(source),
     extensions,
+    autoFocus,
   });
 
   return <div ref={parentRef} />;
@@ -61,12 +58,8 @@ const Story = () => {
 
   useEffect(() => {
     queueMicrotask(async () => {
-      const repo1 = new Repo({
-        network: [new BroadcastChannelNetworkAdapter()],
-      });
-      const repo2 = new Repo({
-        network: [new BroadcastChannelNetworkAdapter()],
-      });
+      const repo1 = new Repo({ network: [new BroadcastChannelNetworkAdapter()] });
+      const repo2 = new Repo({ network: [new BroadcastChannelNetworkAdapter()] });
 
       const object1 = repo1.create();
       object1.change((doc: TestObject) => {
@@ -86,8 +79,8 @@ const Story = () => {
   }
 
   return (
-    <div role='none' className='grid grid-cols-2 bs-full is-full gap-2'>
-      <Editor source={object1} />
+    <div role='none' className='grid grid-cols-2 bs-full is-full divide-x divide-neutral-500'>
+      <Editor source={object1} autoFocus />
       <Editor source={object2} />
     </div>
   );
@@ -96,36 +89,39 @@ const Story = () => {
 export default {
   title: 'react-ui-editor/Automerge',
   component: Editor,
+  decorators: [withTheme],
   render: () => <Story />,
   parameters: { translations, layout: 'fullscreen' },
 };
 
-export const Default = {};
-
 const EchoStory = ({ spaceKey }: { spaceKey: PublicKey }) => {
-  const identity = useIdentity();
+  // TODO(burdon): Test identity.
+  // const identity = useIdentity();
   const space = useSpace(spaceKey);
-  // TODO(dmaretskyi): useQuery doesn't work.
-  const [obj] = space?.db.query(Filter.from({ type: 'test' })).objects ?? [];
-  const model = useTextModel({
-    identity,
-    space,
-    text: obj?.content,
-  });
-
-  if (!model) {
+  const source = useMemo<DocAccessor | undefined>(() => {
+    const { objects = [] } = space?.db.query(Filter.from({ type: 'test' })) ?? {};
+    if (objects.length) {
+      return createDocAccessor(objects[0].content);
+    }
+  }, [space]);
+
+  if (!source) {
     return null;
   }
 
-  return <MarkdownEditor model={model} />;
+  return <Editor source={source} />;
 };
 
+export const Default = {};
+
+// TODO(burdon): Feed already added error.
 export const WithEcho = {
   decorators: [withTheme],
   render: () => {
     return (
       <ClientRepeater
         count={2}
+        component={EchoStory}
         createSpace
         onCreateSpace={async (space) => {
           space.db.add(
@@ -135,7 +131,6 @@ export const WithEcho = {
             }),
           );
         }}
-        component={EchoStory}
       />
     );
   },

package/src/extensions/awareness.ts

@@ -164,7 +164,7 @@ export class RemoteSelectionsDecorator implements PluginValue {
           from: start,
           to: startLine.from + startLine.length,
           value: Decoration.mark({
-            attributes: { style: `background-color: ${color}` },
+            attributes: { style: `background-color: ${lightColor}` },
             class: 'cm-collab-selection',
           }),
         });
@@ -174,7 +174,7 @@ export class RemoteSelectionsDecorator implements PluginValue {
           from: endLine.from,
           to: end,
           value: Decoration.mark({
-            attributes: { style: `background-color: ${color}` },
+            attributes: { style: `background-color: ${lightColor}` },
             class: 'cm-collab-selection',
           }),
         });
@@ -185,7 +185,7 @@ export class RemoteSelectionsDecorator implements PluginValue {
             from: linePos,
             to: linePos,
             value: Decoration.line({
-              attributes: { style: `background-color: ${color}`, class: 'cm-collab-selectionLine' },
+              attributes: { style: `background-color: ${lightColor}`, class: 'cm-collab-selectionLine' },
             }),
           });
         }

package/src/extensions/command/command.ts

@@ -0,0 +1,35 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+import { EditorView, keymap } from '@codemirror/view';
+
+import { hintViewPlugin } from './hint';
+import { closeEffect, commandConfig, commandKeyBindings, commandState } from './state';
+
+// TODO(burdon): Create knowledge base for CM notes and ideas.
+// https://discuss.codemirror.net/t/inline-code-hints-like-vscode/5533/4
+// https://github.com/saminzadeh/codemirror-extension-inline-suggestion
+// https://github.com/ChromeDevTools/devtools-frontend/blob/main/front_end/ui/components/text_editor/config.ts#L370
+
+export type CommandAction = {
+  insert?: string;
+};
+
+export type CommandOptions = {
+  onRender: (el: HTMLElement, cb: (action?: CommandAction) => void) => void;
+  onHint: () => string | undefined;
+};
+
+export const command = (options: CommandOptions): Extension => {
+  return [
+    commandConfig.of(options),
+    commandState,
+    keymap.of(commandKeyBindings),
+    hintViewPlugin(options),
+    EditorView.focusChangeEffect.of((_, focusing) => {
+      return focusing ? closeEffect.of(null) : null;
+    }),
+  ];
+};

package/src/extensions/command/hint.ts

@@ -0,0 +1,76 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { RangeSetBuilder } from '@codemirror/state';
+import { Decoration, EditorView, ViewPlugin, type ViewUpdate, WidgetType } from '@codemirror/view';
+
+import { type CommandOptions } from './command';
+import { commandState } from './state';
+import { clientRectsFor, flattenRect } from '../util/dom';
+
+class CommandHint extends WidgetType {
+  constructor(readonly content: string | HTMLElement) {
+    super();
+  }
+
+  toDOM() {
+    const wrap = document.createElement('span');
+    wrap.className = 'cm-placeholder';
+    wrap.style.pointerEvents = 'none';
+    wrap.appendChild(typeof this.content === 'string' ? document.createTextNode(this.content) : this.content);
+    if (typeof this.content === 'string') {
+      wrap.setAttribute('aria-label', 'placeholder ' + this.content);
+    } else {
+      wrap.setAttribute('aria-hidden', 'true');
+    }
+    return wrap;
+  }
+
+  override coordsAt(dom: HTMLElement) {
+    const rects = dom.firstChild ? clientRectsFor(dom.firstChild) : [];
+    if (!rects.length) {
+      return null;
+    }
+    const style = window.getComputedStyle(dom.parentNode as HTMLElement);
+    const rect = flattenRect(rects[0], style.direction !== 'rtl');
+    const lineHeight = parseInt(style.lineHeight);
+    if (rect.bottom - rect.top > lineHeight * 1.5) {
+      return { left: rect.left, right: rect.right, top: rect.top, bottom: rect.top + lineHeight };
+    }
+    return rect;
+  }
+
+  override ignoreEvent() {
+    return false;
+  }
+}
+
+export const hintViewPlugin = ({ onHint }: CommandOptions) =>
+  ViewPlugin.fromClass(
+    class {
+      deco = Decoration.none;
+      update(update: ViewUpdate) {
+        const builder = new RangeSetBuilder<Decoration>();
+        const cState = update.view.state.field(commandState, false);
+        if (!cState?.tooltip) {
+          const selection = update.view.state.selection.main;
+          const line = update.view.state.doc.lineAt(selection.from);
+          // Only show if blank line.
+          // TODO(burdon): Clashes with placeholder if pos === 0.
+          // TODO(burdon): Show after delay or if blank line above?
+          if (selection.from === selection.to && line.from === line.to) {
+            const hint = onHint();
+            if (hint) {
+              builder.add(selection.from, selection.to, Decoration.widget({ widget: new CommandHint(hint) }));
+            }
+          }
+        }
+
+        this.deco = builder.finish();
+      }
+    },
+    {
+      provide: (plugin) => [EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration.none)],
+    },
+  );

package/src/extensions/command/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './command';

package/src/extensions/command/state.ts

@@ -0,0 +1,106 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Facet, StateEffect, StateField } from '@codemirror/state';
+import {
+  type Command,
+  type EditorView,
+  type KeyBinding,
+  showTooltip,
+  type Tooltip,
+  type TooltipView,
+} from '@codemirror/view';
+
+import { type CommandOptions } from './command';
+
+type CommandState = {
+  tooltip?: Tooltip | null;
+};
+
+export const commandConfig = Facet.define<CommandOptions, Required<CommandOptions>>({
+  combine: (providers) => providers[0],
+});
+
+export const commandState = StateField.define<CommandState>({
+  create: () => ({}),
+  update: (state, tr) => {
+    for (const effect of tr.effects) {
+      if (effect.is(closeEffect)) {
+        return {};
+      }
+
+      if (effect.is(openEffect)) {
+        const options = tr.state.facet(commandConfig);
+        const { pos, fullWidth } = effect.value;
+        const tooltip: Tooltip = {
+          pos,
+          above: false,
+          arrow: false,
+          strictSide: true,
+          create: (view: EditorView) => {
+            const dom = document.createElement('div');
+            const tooltipView: TooltipView = {
+              dom,
+              mount: (view: EditorView) => {
+                if (fullWidth) {
+                  const parent = dom.parentElement!;
+                  const { paddingLeft, paddingRight } = window.getComputedStyle(parent);
+                  const widthWithoutPadding = parent.clientWidth - parseFloat(paddingLeft) - parseFloat(paddingRight);
+                  dom.style.width = `${widthWithoutPadding}px`;
+                }
+
+                // Render react component.
+                options.onRender(dom, (action) => {
+                  view.dispatch({ effects: closeEffect.of(null) });
+                  if (action?.insert?.length) {
+                    view.dispatch({
+                      changes: { from: pos, insert: action.insert },
+                      selection: { anchor: pos + action.insert.length },
+                    });
+                  }
+                  // TODO(burdon): Truncates text if set focus immediately.
+                  setTimeout(() => view.focus());
+                });
+              },
+            };
+
+            return tooltipView;
+          },
+        };
+        return { tooltip };
+      }
+    }
+
+    return state;
+  },
+  provide: (f) => [showTooltip.from(f, (value) => value.tooltip ?? null)],
+});
+
+export const openEffect = StateEffect.define<{ pos: number; fullWidth?: boolean }>();
+export const closeEffect = StateEffect.define<null>();
+
+export const openCommand: Command = (view: EditorView) => {
+  if (view.state.field(commandState, false)) {
+    const selection = view.state.selection.main;
+    const line = view.state.doc.lineAt(selection.from);
+    if (line.from === selection.from && line.from === line.to) {
+      view.dispatch({ effects: openEffect.of({ pos: selection.anchor, fullWidth: true }) });
+      return true;
+    }
+  }
+  return false;
+};
+
+export const closeCommand: Command = (view: EditorView) => {
+  if (view.state.field(commandState, false)) {
+    view.dispatch({ effects: closeEffect.of(null) });
+    return true;
+  }
+  return false;
+};
+
+export const commandKeyBindings: readonly KeyBinding[] = [
+  { key: '/', run: openCommand },
+  { key: 'Escape', run: closeCommand },
+];

package/src/extensions/cursor-line-margin.ts

@@ -18,7 +18,8 @@ export const cursorLineMarginFacet = Facet.define<number, number>({
 
 const annotation = 'cursorLineMargin';
 const lineAtPos = (s: EditorState, pos: number) => s.doc.lineAt(pos).number;
-// seems to the best approximation of CM5's `cursorScrollMargin`
+
+// Seems to the best approximation of CM5's `cursorScrollMargin`
 // https://discuss.codemirror.net/t/cursorscrollmargin-for-v6/7448
 export const cursorLineMargin: Extension = EditorView.updateListener.of(
   ({ transactions, state, selectionSet, startState, view }) => {

package/src/extensions/dnd.ts

@@ -0,0 +1,15 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import type { Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+
+// TODO(burdon): DND experiment.
+export const dnd = (): Extension => {
+  return EditorView.domEventHandlers({
+    drop: (event, view) => {
+      console.log(event);
+    },
+  });
+};

package/src/extensions/index.ts

@@ -6,11 +6,12 @@ export * from './annotations';
 export * from './autocomplete';
 export * from './automerge';
 export * from './awareness';
-export * from './basic';
 export * from './blast';
+export * from './command';
 export * from './comments';
 export * from './cursor';
 export * from './cursor-line-margin';
+export * from './dnd';
 export * from './listener';
 export * from './markdown';
 export * from './mention';

package/src/extensions/listener.ts

@@ -6,7 +6,7 @@ import { type Extension } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 
 export type ListenerOptions = {
-  onFocus?: (focused: boolean) => void;
+  onFocus?: (focusing: boolean) => void;
   onChange?: (text: string) => void;
 };
 
@@ -18,8 +18,8 @@ export const listener = ({ onFocus, onChange }: ListenerOptions): Extension => {
 
   onFocus &&
     extensions.push(
-      EditorView.focusChangeEffect.of((_, focused) => {
-        onFocus(focused);
+      EditorView.focusChangeEffect.of((_, focusing) => {
+        onFocus(focusing);
         return null;
       }),
     );

package/src/extensions/markdown/bundle.ts

@@ -10,17 +10,9 @@ import { languages } from '@codemirror/language-data';
 import { searchKeymap } from '@codemirror/search';
 import { EditorState, type Extension } from '@codemirror/state';
 import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
-import {
-  crosshairCursor,
-  drawSelection,
-  dropCursor,
-  EditorView,
-  highlightActiveLine,
-  keymap,
-  placeholder,
-} from '@codemirror/view';
+import { EditorView, drawSelection, dropCursor, keymap, placeholder } from '@codemirror/view';
 
-import type { ThemeMode } from '@dxos/react-ui';
+import { type ThemeMode } from '@dxos/react-ui';
 import { isNotFalsy } from '@dxos/util';
 
 import { markdownHighlightStyle, markdownTagsExtensions } from './highlight';
@@ -28,7 +20,7 @@ import { type TextEditorProps } from '../../components';
 
 export type MarkdownBundleOptions = {
   themeMode?: ThemeMode;
-} & Pick<TextEditorProps, 'placeholder' | 'lineWrapping'>;
+} & Pick<TextEditorProps, 'lineWrapping' | 'placeholder'>;
 
 /**
  * Markdown bundle.
@@ -42,17 +34,15 @@ export const createMarkdownExtensions = ({
   lineWrapping = true,
 }: MarkdownBundleOptions = {}): Extension[] => {
   return [
+    // TODO(burdon): Reconcile with createBasicExtensions.
     lineWrapping && EditorView.lineWrapping,
     EditorState.allowMultipleSelections.of(true),
     EditorState.tabSize.of(2),
 
-    // https://github.com/codemirror/basic-setup
     bracketMatching(),
     closeBrackets(),
-    crosshairCursor(),
     dropCursor(),
     drawSelection(),
-    highlightActiveLine(),
     history(),
     indentOnInput(),
     _placeholder && placeholder(_placeholder),

package/src/extensions/markdown/decorate.ts

@@ -88,7 +88,7 @@ const editingRange = (state: EditorState, range: { from: number; to: number }, f
       main: { head },
     },
   } = state;
-  return focus && !readOnly && head >= range.from && head < range.to;
+  return focus && !readOnly && head >= range.from && head <= range.to;
 };
 
 const MarksByParent = new Set(['CodeMark', 'EmphasisMark', 'StrikethroughMark', 'SubscriptMark', 'SuperscriptMark']);
@@ -114,7 +114,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
               break;
             }
             const first = block.from <= node.from;
-            const last = block.to >= node.to;
+            const last = block.to >= node.to && /^(\s>)*```$/.test(state.doc.sliceString(block.from, block.to));
             deco.add(block.from, block.from, first ? fencedCodeLineFirst : last ? fencedCodeLineLast : fencedCodeLine);
             if (!editing && (first || last)) {
               atomicDeco.add(block.from, block.to, hide);
@@ -186,6 +186,9 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
 
 export interface DecorateOptions {
   renderLinkButton?: (el: Element, url: string) => void;
+  /**
+   * Prevents triggering decorations as the cursor moves through the document.
+   */
   selectionChangeDelay?: number;
 }
 
@@ -195,9 +198,9 @@ export const decorateMarkdown = (options: DecorateOptions = {}) => {
   return [
     ViewPlugin.fromClass(
       class {
-        pendingUpdate = -1;
         deco: DecorationSet;
         atomicDeco: DecorationSet;
+        pendingUpdate?: NodeJS.Timeout;
 
         constructor(view: EditorView) {
           ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations(view, options, view.hasFocus));
@@ -208,31 +211,35 @@ export const decorateMarkdown = (options: DecorateOptions = {}) => {
             update.docChanged ||
             update.viewportChanged ||
             update.focusChanged ||
-            update.transactions.some((tr) => tr.effects.some((e) => e.is(forceUpdate)))
+            update.transactions.some((tr) => tr.effects.some((e) => e.is(forceUpdate))) ||
+            (update.selectionSet && !options.selectionChangeDelay)
           ) {
             ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations(
               update.view,
               options,
               update.view.hasFocus,
             ));
+
             this.clearUpdate();
           } else if (update.selectionSet) {
             this.scheduleUpdate(update.view);
           }
         }
 
-        clearUpdate() {
-          if (this.pendingUpdate > -1) {
-            window.clearTimeout(this.pendingUpdate);
-            this.pendingUpdate = -1;
-          }
-        }
-
+        // TODO(burdon): BUG: If the cursor is at the end of a link at the end of a line,
+        //  the cursor will float in space or be in the wrong position after the decoration is applied.
         scheduleUpdate(view: EditorView) {
           this.clearUpdate();
-          this.pendingUpdate = window.setTimeout(() => {
+          this.pendingUpdate = setTimeout(() => {
             view.dispatch({ effects: forceUpdate.of(null) });
-          }, options.selectionChangeDelay ?? 400);
+          }, options.selectionChangeDelay);
+        }
+
+        clearUpdate() {
+          if (this.pendingUpdate) {
+            clearTimeout(this.pendingUpdate);
+            this.pendingUpdate = undefined;
+          }
         }
 
         destroy() {
@@ -242,8 +249,8 @@ export const decorateMarkdown = (options: DecorateOptions = {}) => {
       {
         provide: (plugin) => [
           EditorView.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration.none),
-          EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration.none),
           EditorView.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration.none),
+          EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration.none),
         ],
       },
     ),

package/src/extensions/util/dom.ts

@@ -0,0 +1,36 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+// Copied from @codemirror/view
+
+export interface Rect {
+  readonly left: number;
+  readonly right: number;
+  readonly top: number;
+  readonly bottom: number;
+}
+
+export const flattenRect = (rect: Rect, left: boolean) => {
+  const x = left ? rect.left : rect.right;
+  return { left: x, right: x, top: rect.top, bottom: rect.bottom };
+};
+
+let scratchRange: Range | null;
+
+export const textRange = (node: Text, from: number, to = from) => {
+  const range = scratchRange || (scratchRange = document.createRange());
+  range.setEnd(node, to);
+  range.setStart(node, from);
+  return range;
+};
+
+export const clientRectsFor = (dom: Node) => {
+  if (dom.nodeType === 3) {
+    return textRange(dom as Text, 0, dom.nodeValue!.length).getClientRects();
+  } else if (dom.nodeType === 1) {
+    return (dom as HTMLElement).getClientRects();
+  } else {
+    return [] as any as DOMRectList;
+  }
+};

package/src/hooks/defs.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type Extension, StateField } from '@codemirror/state';
+import { type Extension } from '@codemirror/state';
 
 import { type DocAccessor } from '@dxos/echo-schema';
 
@@ -18,27 +18,13 @@ export type Comment = {
   cursor?: string;
 };
 
+/**
+ * @deprecated
+ */
+// TODO(burdon): Remove.
 export type EditorModel = {
   id: string;
   text: () => string;
-  extension?: Extension;
-
-  // TODO(burdon): Remove.
   content: string | DocAccessor;
-
-  // TODO(burdon): Remove.
-  peer?: {
-    id: string;
-    name?: string;
-  };
+  extension?: Extension;
 };
-
-/**
- * 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,
-});