@dxos/react-ui-editor 0.8.2-main.f11618f → 0.8.2-staging.7ac8446

package/src/components/EditorToolbar/EditorToolbar.tsx

@@ -26,8 +26,8 @@ import {
   type EditorToolbarProps,
   editorToolbarSearch,
 } from './util';
-import { createViewMode } from './view-mode';
-import { stackItemContentToolbarClassNames } from '../../defaults';
+import { createViewMode } from './viewMode';
+import { stackItemContentToolbarClassNames } from '../../fragments';
 
 const createToolbar = ({
   state,

package/src/components/EditorToolbar/util.ts

@@ -4,7 +4,7 @@
 
 import { useMemo } from 'react';
 
-import { live, type Live } from '@dxos/live-object';
+import { create, type ReactiveObject } from '@dxos/live-object';
 import { type Label, type ThemedClassName } from '@dxos/react-ui';
 import {
   type MenuSeparator,
@@ -23,7 +23,7 @@ export type EditorToolbarState = Formatting &
   Partial<{ comment: boolean; viewMode: EditorViewMode; selection: boolean }>;
 
 export const useEditorToolbarState = (initialState: Partial<EditorToolbarState> = {}) => {
-  return useMemo(() => live<EditorToolbarState>(initialState), []);
+  return useMemo(() => create<EditorToolbarState>(initialState), []);
 };
 
 export type EditorToolbarFeatureFlags = Partial<{
@@ -37,7 +37,7 @@ export type EditorToolbarFeatureFlags = Partial<{
 }>;
 
 export type EditorToolbarActionGraphProps = {
-  state: Live<EditorToolbarState>;
+  state: ReactiveObject<EditorToolbarState>;
   // TODO(wittjosiah): Control positioning.
   customActions?: () => ActionGraphProps;
   onAction: (action: EditorAction) => void;

package/src/defaults.ts

@@ -17,9 +17,7 @@ const margin = '!mt-[1rem]';
  * NOTE: Max width - 4rem = 2rem left/right margin (or 2rem gutter plus 1rem left/right margin).
  */
 // TOOD(burdon): Adjust depending on
-export const editorWidth = '!mli-auto is-full max-is-[min(50rem,100%-4rem)]';
-
-export const editorContent = mx(margin, editorWidth);
+export const editorContent = mx(margin, '!mli-auto w-full max-w-[min(50rem,100%-4rem)]');
 
 /**
  * Margin for numbers.
@@ -52,6 +50,6 @@ export const stackItemContentEditorClassNames = (role?: string) =>
 
 export const stackItemContentToolbarClassNames = (role?: string) =>
   mx(
-    'attention-surface is-full border-be !border-separator relative z-[1]',
-    role === 'section' && 'sticky block-start-0 -mbe-px min-is-0',
+    'attention-surface is-full border-be !border-separator',
+    role === 'section' && 'sticky block-start-0 z-[1] -mbe-px min-is-0',
   );

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

@@ -10,7 +10,15 @@ import React, { useEffect, useState } from 'react';
 import { Repo } from '@dxos/automerge/automerge-repo';
 import { BroadcastChannelNetworkAdapter } from '@dxos/automerge/automerge-repo-network-broadcastchannel';
 import { Expando } from '@dxos/echo-schema';
-import { DocAccessor, Filter, live, createDocAccessor, useQuery, useSpace, type Space } from '@dxos/react-client/echo';
+import {
+  DocAccessor,
+  Filter,
+  create,
+  createDocAccessor,
+  useQuery,
+  useSpace,
+  type Space,
+} from '@dxos/react-client/echo';
 import { useIdentity, type Identity } from '@dxos/react-client/halo';
 import { ClientRepeater, type ClientRepeatedComponentProps } from '@dxos/react-client/testing';
 import { useThemeContext } from '@dxos/react-ui';
@@ -131,9 +139,9 @@ export const WithEcho = {
         createSpace
         onSpaceCreated={async ({ space }) => {
           space.db.add(
-            live({
+            create({
               type: 'test',
-              content: live(Expando, { content: initialContent }),
+              content: create(Expando, { content: initialContent }),
             }),
           );
         }}

package/src/extensions/command/command.ts

@@ -5,25 +5,35 @@
 import { type Extension } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 
-import { closeEffect, commandKeyBindings } from './action';
-import { hintViewPlugin, type HintOptions } from './hint';
-import { floatingMenu, type FloatingMenuOptions } from './menu';
-import { commandConfig, commandState, type PopupOptions } from './state';
+import { hintViewPlugin } from './hint';
+import { floatingMenu } from './menu';
+import { preview, type PreviewOptions } from './preview';
+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 CommandOptions = Partial<PopupOptions & FloatingMenuOptions & HintOptions>;
+// TODO(burdon): Discriminated union.
+export type CommandAction = {
+  insert?: string;
+};
+
+export type CommandOptions = {
+  onHint: () => string | undefined;
+  onRenderDialog: (el: HTMLElement, cb: (action?: CommandAction) => void) => void;
+  onRenderMenu: (el: HTMLElement, cb: () => void) => void;
+} & Pick<PreviewOptions, 'onRenderPreview'>;
 
-export const command = (options: CommandOptions = {}): Extension => {
+export const command = (options: CommandOptions): Extension => {
   return [
-    keymap.of(commandKeyBindings),
     commandConfig.of(options),
     commandState,
-    options.renderMenu ? floatingMenu({ renderMenu: options.renderMenu }) : [],
-    options.onHint ? hintViewPlugin({ onHint: options.onHint }) : [],
+    keymap.of(commandKeyBindings),
+    preview(options),
+    floatingMenu(options),
+    hintViewPlugin(options),
     EditorView.focusChangeEffect.of((_, focusing) => {
       return focusing ? closeEffect.of(null) : null;
     }),
@@ -31,6 +41,14 @@ export const command = (options: CommandOptions = {}): Extension => {
       '.cm-tooltip': {
         background: 'transparent',
       },
+      '.cm-preview': {
+        marginLeft: '-1rem',
+        marginRight: '-1rem',
+        padding: '1rem',
+        borderRadius: '1rem',
+        background: 'var(--dx-modalSurface)',
+        border: '1px solid var(--dx-separator)',
+      },
     }),
   ];
 };

package/src/extensions/command/hint.ts

@@ -5,42 +5,10 @@
 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';
 
-export type HintOptions = {
-  onHint: () => string | undefined;
-};
-
-export const hintViewPlugin = ({ onHint }: HintOptions) =>
-  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)],
-    },
-  );
-
 class CommandHint extends WidgetType {
   constructor(readonly content: string | HTMLElement) {
     super();
@@ -80,3 +48,32 @@ class CommandHint extends WidgetType {
     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

@@ -2,5 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './action';
 export * from './command';

package/src/extensions/command/menu.ts

@@ -4,16 +4,12 @@
 
 import { type BlockInfo, type EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
 
-import { closeEffect, openCommand, openEffect } from './action';
-import { type RenderCallback } from '../../types';
-
-export type FloatingMenuOptions = {
-  renderMenu: RenderCallback<{ onAction: () => void }>;
-};
+import { type CommandOptions } from './command';
+import { closeEffect, openCommand, openEffect } from './state';
 
 // TODO(burdon): Trigger completion on click.
 // TODO(burdon): Hide when dialog is open.
-export const floatingMenu = (options: FloatingMenuOptions) =>
+export const floatingMenu = (options: CommandOptions) =>
   ViewPlugin.fromClass(
     class {
       button: HTMLElement;
@@ -35,11 +31,13 @@ export const floatingMenu = (options: FloatingMenuOptions) =>
         this.button.style.zIndex = '10';
         this.button.style.display = 'none';
 
-        options.renderMenu(this.button, { onAction: () => openCommand(view) }, view);
+        options.onRenderMenu(this.button, () => {
+          openCommand(view);
+        });
         container.appendChild(this.button);
 
         // Listen for scroll events.
-        container.addEventListener('scroll', this.scheduleUpdate.bind(this));
+        container.addEventListener('scroll', this.scheduleUpdate);
         this.scheduleUpdate();
       }
 
@@ -58,8 +56,7 @@ export const floatingMenu = (options: FloatingMenuOptions) =>
         if (this.rafId != null) {
           cancelAnimationFrame(this.rafId);
         }
-
-        this.rafId = requestAnimationFrame(this.updateButtonPosition.bind(this));
+        this.rafId = requestAnimationFrame(() => this.updateButtonPosition());
       }
 
       updateButtonPosition() {

package/src/extensions/command/preview.ts

@@ -0,0 +1,79 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { syntaxTree } from '@codemirror/language';
+import {
+  type EditorState,
+  type Extension,
+  type RangeSet,
+  RangeSetBuilder,
+  StateField,
+  type Transaction,
+} from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView, WidgetType } from '@codemirror/view';
+
+export type PreviewOptions = {
+  onRenderPreview: (el: HTMLElement, props: { url: string; text: string }) => void;
+};
+
+/**
+ * Create image decorations.
+ */
+export const preview = (options: PreviewOptions): Extension => {
+  return [
+    StateField.define<DecorationSet>({
+      create: (state) => buildDecorations(state, options),
+      update: (_: RangeSet<Decoration>, tr: Transaction) => buildDecorations(tr.state, options),
+      // TODO(burdon): Make atomic.
+      provide: (field) => EditorView.decorations.from(field),
+    }),
+  ];
+};
+
+// TODO(burdon): Make atomic.
+const buildDecorations = (state: EditorState, options: PreviewOptions) => {
+  const builder = new RangeSetBuilder<Decoration>();
+  syntaxTree(state).iterate({
+    enter: (node) => {
+      if (node.name === 'Link') {
+        const urlNode = node.node.getChild('URL');
+        if (urlNode) {
+          const text = state.sliceDoc(node.from + 1, urlNode.from - 2);
+          const url = state.sliceDoc(urlNode.from, urlNode.to);
+          builder.add(
+            node.from,
+            node.to,
+            Decoration.replace({
+              block: true, // Prevent cursor from entering.
+              widget: new PreviewWidget(options.onRenderPreview, url, text),
+            }),
+          );
+        }
+      }
+    },
+  });
+
+  return builder.finish();
+};
+
+class PreviewWidget extends WidgetType {
+  constructor(
+    readonly _onRenderPreview: PreviewOptions['onRenderPreview'],
+    readonly _url: string,
+    readonly _text: string,
+  ) {
+    super();
+  }
+
+  override eq(other: this) {
+    return this._url === (other as any as PreviewWidget)._url;
+  }
+
+  override toDOM(view: EditorView) {
+    const root = document.createElement('div');
+    root.classList.add('cm-preview');
+    this._onRenderPreview(root, { url: this._url, text: this._text });
+    return root;
+  }
+}

package/src/extensions/command/state.ts

@@ -2,24 +2,25 @@
 // Copyright 2024 DXOS.org
 //
 
-import { StateField } from '@codemirror/state';
-import { showTooltip, type EditorView, type Tooltip, type TooltipView } from '@codemirror/view';
+import { StateEffect, StateField } from '@codemirror/state';
+import {
+  showTooltip,
+  type Command,
+  type EditorView,
+  type KeyBinding,
+  type Tooltip,
+  type TooltipView,
+} from '@codemirror/view';
 
-import { closeEffect, type Action, openEffect } from './action';
 import { type CommandOptions } from './command';
-import { type RenderCallback } from '../../types';
 import { singleValueFacet } from '../../util';
 
-export const commandConfig = singleValueFacet<CommandOptions>();
-
-export type PopupOptions = {
-  renderDialog: RenderCallback<{ onAction: (action?: Action) => void }>;
-};
-
 type CommandState = {
   tooltip?: Tooltip | null;
 };
 
+export const commandConfig = singleValueFacet<CommandOptions>();
+
 export const commandState = StateField.define<CommandState>({
   create: () => ({}),
   update: (state, tr) => {
@@ -28,8 +29,8 @@ export const commandState = StateField.define<CommandState>({
         return {};
       }
 
-      const { renderDialog } = tr.state.facet(commandConfig);
-      if (effect.is(openEffect) && renderDialog) {
+      if (effect.is(openEffect)) {
+        const options = tr.state.facet(commandConfig);
         const { pos, fullWidth } = effect.value;
         const tooltip: Tooltip = {
           pos,
@@ -37,49 +38,38 @@ export const commandState = StateField.define<CommandState>({
           arrow: false,
           strictSide: true,
           create: (view: EditorView) => {
-            const root = document.createElement('div');
-
+            const dom = document.createElement('div');
             const tooltipView: TooltipView = {
-              dom: root,
+              dom,
               mount: (view: EditorView) => {
                 if (fullWidth) {
-                  const parent = root.parentElement!;
+                  const parent = dom.parentElement!;
                   const { paddingLeft, paddingRight } = window.getComputedStyle(parent);
                   const widthWithoutPadding = parent.clientWidth - parseFloat(paddingLeft) - parseFloat(paddingRight);
-                  root.style.width = `${widthWithoutPadding}px`;
+                  dom.style.width = `${widthWithoutPadding}px`;
                 }
 
                 // Render react component.
-                renderDialog(
-                  root,
-                  {
-                    onAction: (action) => {
-                      view.dispatch({ effects: closeEffect.of(null) });
-                      switch (action?.type) {
-                        case 'insert': {
-                          // Insert into editor.
-                          const text = action.text + '\n';
-                          view.dispatch({
-                            changes: { from: pos, insert: text },
-                            selection: { anchor: pos + text.length },
-                          });
-                          break;
-                        }
-                      }
-
-                      // NOTE: Truncates text if set focus immediately.
-                      requestAnimationFrame(() => view.focus());
-                    },
-                  },
-                  view,
-                );
+                options.onRenderDialog(dom, (action) => {
+                  view.dispatch({ effects: closeEffect.of(null) });
+                  if (action?.insert?.length) {
+                    // Insert into editor.
+                    const text = action.insert + '\n';
+                    view.dispatch({
+                      changes: { from: pos, insert: text },
+                      selection: { anchor: pos + text.length },
+                    });
+                  }
+
+                  // NOTE: Truncates text if set focus immediately.
+                  requestAnimationFrame(() => view.focus());
+                });
               },
             };
 
             return tooltipView;
           },
         };
-
         return { tooltip };
       }
     }
@@ -88,3 +78,33 @@ export const commandState = StateField.define<CommandState>({
   },
   provide: (field) => [showTooltip.from(field, (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/comments.ts

@@ -25,13 +25,13 @@ import sortBy from 'lodash.sortby';
 import { useEffect, useMemo } from 'react';
 
 import { debounce, type CleanupFn } from '@dxos/async';
-import { type Live } from '@dxos/live-object';
+import { type ReactiveObject } from '@dxos/live-object';
 import { log } from '@dxos/log';
 import { isNonNullable } from '@dxos/util';
 
 import { documentId } from './selection';
 import { type EditorToolbarState } from '../components';
-import { type RenderCallback, type Comment, type Range } from '../types';
+import { type Comment, type Range } from '../types';
 import { Cursor, overlap, singleValueFacet, callbackWrapper } from '../util';
 
 //
@@ -345,10 +345,6 @@ export type CommentsOptions = {
    * Key shortcut to create a new thread.
    */
   key?: string;
-  /**
-   * Called to render tooltip.
-   */
-  renderTooltip?: RenderCallback<{ shortcut: string }>;
   /**
    * Called to create a new thread and return the thread id.
    */
@@ -365,6 +361,10 @@ export type CommentsOptions = {
    * Called to notify which thread is currently closest to the cursor.
    */
   onSelect?: (state: CommentsState) => void;
+  /**
+   * Called to render tooltip.
+   */
+  onHover?: (el: Element, shortcut: string) => void;
 };
 
 const optionsFacet = singleValueFacet<CommentsOptions>();
@@ -408,7 +408,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
     // Hover tooltip (for key shortcut hints, etc.)
     // TODO(burdon): Factor out to generic hints extension for current selection/line.
     //
-    options.renderTooltip &&
+    options.onHover &&
       hoverTooltip(
         (view, pos) => {
           const selection = view.state.selection.main;
@@ -419,7 +419,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
               above: true,
               create: () => {
                 const el = document.createElement('div');
-                options.renderTooltip!(el, { shortcut }, view);
+                options.onHover!(el, shortcut);
                 return { dom: el, offset: { x: 0, y: 8 } };
               },
             };
@@ -606,7 +606,7 @@ export const createExternalCommentSync = (
     },
   );
 
-export const useCommentState = (state: Live<EditorToolbarState>): Extension => {
+export const useCommentState = (state: ReactiveObject<EditorToolbarState>): Extension => {
   return useMemo(
     () =>
       EditorView.updateListener.of((update) => {

package/src/extensions/folding.tsx

@@ -29,7 +29,7 @@ export const folding = (_props: FoldingOptions = {}): Extension => [
       const el = createElement('div', { className: 'flex h-full items-center' });
       return renderRoot(
         el,
-        <Icon icon='ph--caret-right--bold' size={3} classNames={['mx-3 cursor-pointer', open && 'rotate-90']} />,
+        <Icon icon='ph--caret-right--regular' size={3} classNames={['mx-3 cursor-pointer', open && 'rotate-90']} />,
       );
     },
   }),

package/src/extensions/index.ts

@@ -18,6 +18,5 @@ export * from './listener';
 export * from './markdown';
 export * from './mention';
 export * from './modes';
-export * from './preview';
 export * from './selection';
 export * from './typewriter';

package/src/extensions/markdown/decorate.ts

@@ -15,7 +15,6 @@ import { image } from './image';
 import { formattingStyles, bulletListIndentationWidth, orderedListIndentationWidth } from './styles';
 import { table } from './table';
 import { theme, type HeadingLevel } from '../../styles';
-import { type RenderCallback } from '../../types';
 import { wrapWithCatch } from '../../util';
 
 /**
@@ -46,7 +45,7 @@ class HorizontalRuleWidget extends WidgetType {
 class LinkButton extends WidgetType {
   constructor(
     private readonly url: string,
-    private readonly render: RenderCallback<{ url: string }>,
+    private readonly render: (el: HTMLElement, url: string) => void,
   ) {
     super();
   }
@@ -58,7 +57,7 @@ class LinkButton extends WidgetType {
   // TODO(burdon): Create icon and link directly without react?
   override toDOM(view: EditorView) {
     const el = document.createElement('span');
-    this.render(el, { url: this.url }, view);
+    this.render(el, this.url);
     return el;
   }
 }
@@ -520,7 +519,7 @@ export interface DecorateOptions {
    */
   selectionChangeDelay?: number;
   numberedHeadings?: { from: number; to?: number };
-  renderLinkButton?: RenderCallback<{ url: string }>;
+  renderLinkButton?: (el: Element, url: string) => void;
 }
 
 export const decorateMarkdown = (options: DecorateOptions = {}) => {

package/src/extensions/markdown/formatting.ts

@@ -17,7 +17,7 @@ import { EditorView, keymap } from '@codemirror/view';
 import { type SyntaxNodeRef, type SyntaxNode } from '@lezer/common';
 import { useMemo } from 'react';
 
-import { type Live } from '@dxos/live-object';
+import { type ReactiveObject } from '@dxos/live-object';
 
 import { type EditorToolbarState } from '../../components';
 
@@ -1250,7 +1250,7 @@ export const getFormatting = (state: EditorState): Formatting => {
 /**
  * Hook provides an extension to compute the current formatting state.
  */
-export const useFormattingState = (state: Live<EditorToolbarState>): Extension => {
+export const useFormattingState = (state: ReactiveObject<EditorToolbarState>): Extension => {
   return useMemo(
     () =>
       EditorView.updateListener.of((update) => {