@dxos/react-ui-editor 0.8.2-main.fbd8ed0 → 0.8.2-staging.42af850

package/src/components/EditorToolbar/EditorToolbar.tsx

@@ -2,15 +2,15 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { memo, useCallback } from 'react';
+import { Rx } from '@effect-rx/rx-react';
+import React, { memo, useMemo } from 'react';
 
-import { type NodeArg } from '@dxos/app-graph';
+import { rxFromSignal, type NodeArg } from '@dxos/app-graph';
 import { ElevationProvider } from '@dxos/react-ui';
 import { MenuProvider, ToolbarMenu, createGapSeparator, useMenuActions } from '@dxos/react-ui-menu';
 import { textBlockWidth } from '@dxos/react-ui-theme';
 
 import { createBlocks } from './blocks';
-import { createComment } from './comment';
 import { createFormatting } from './formatting';
 import { createHeadings } from './headings';
 import { createImageUpload } from './image';
@@ -25,68 +25,92 @@ const createToolbar = ({
   state,
   customActions,
   ...features
-}: EditorToolbarFeatureFlags & Pick<EditorToolbarActionGraphProps, 'getView' | 'state' | 'customActions'>): {
+}: EditorToolbarFeatureFlags & Pick<EditorToolbarActionGraphProps, 'getView' | 'state' | 'customActions'>): Rx.Rx<{
   nodes: NodeArg<any>[];
   edges: { source: string; target: string }[];
-} => {
-  const nodes = [];
-  const edges = [];
-  if (features.headings ?? true) {
-    const headings = createHeadings(state, getView);
-    nodes.push(...headings.nodes);
-    edges.push(...headings.edges);
-  }
-  if (features.formatting ?? true) {
-    const formatting = createFormatting(state, getView);
-    nodes.push(...formatting.nodes);
-    edges.push(...formatting.edges);
-  }
-  if (features.lists ?? true) {
-    const lists = createLists(state, getView);
-    nodes.push(...lists.nodes);
-    edges.push(...lists.edges);
-  }
-  if (features.blocks ?? true) {
-    const blocks = createBlocks(state, getView);
-    nodes.push(...blocks.nodes);
-    edges.push(...blocks.edges);
-  }
-  if (features.image) {
-    const image = createImageUpload(features.image);
-    nodes.push(...image.nodes);
-    edges.push(...image.edges);
-  }
-  if (customActions) {
-    const custom = customActions();
-    nodes.push(...custom.nodes);
-    edges.push(...custom.edges);
-  }
-  const editorToolbarGap = createGapSeparator();
-  nodes.push(...editorToolbarGap.nodes);
-  edges.push(...editorToolbarGap.edges);
-  if (features.comment) {
-    const comment = createComment(state, getView);
-    nodes.push(...comment.nodes);
-    edges.push(...comment.edges);
-  }
-  if (features.search ?? true) {
-    const search = createSearch(getView);
-    nodes.push(...search.nodes);
-    edges.push(...search.edges);
-  }
-  if (features.viewMode) {
-    const viewMode = createViewMode(state, features.viewMode);
-    nodes.push(...viewMode.nodes);
-    edges.push(...viewMode.edges);
-  }
-  return { nodes, edges };
+}> => {
+  return Rx.make((get) => {
+    const nodes = [];
+    const edges = [];
+    if (features.headings ?? true) {
+      const headings = get(rxFromSignal(() => createHeadings(state, getView)));
+      nodes.push(...headings.nodes);
+      edges.push(...headings.edges);
+    }
+    if (features.formatting ?? true) {
+      const formatting = get(rxFromSignal(() => createFormatting(state, getView)));
+      nodes.push(...formatting.nodes);
+      edges.push(...formatting.edges);
+    }
+    if (features.lists ?? true) {
+      const lists = get(rxFromSignal(() => createLists(state, getView)));
+      nodes.push(...lists.nodes);
+      edges.push(...lists.edges);
+    }
+    if (features.blocks ?? true) {
+      const blocks = get(rxFromSignal(() => createBlocks(state, getView)));
+      nodes.push(...blocks.nodes);
+      edges.push(...blocks.edges);
+    }
+    if (features.image) {
+      const image = get(rxFromSignal(() => createImageUpload(features.image!)));
+      nodes.push(...image.nodes);
+      edges.push(...image.edges);
+    }
+    const editorToolbarGap = createGapSeparator();
+    nodes.push(...editorToolbarGap.nodes);
+    edges.push(...editorToolbarGap.edges);
+    if (customActions) {
+      const custom = get(customActions);
+      nodes.push(...custom.nodes);
+      edges.push(...custom.edges);
+    }
+    if (features.search ?? true) {
+      const search = get(rxFromSignal(() => createSearch(getView)));
+      nodes.push(...search.nodes);
+      edges.push(...search.edges);
+    }
+    if (features.viewMode) {
+      const viewMode = get(rxFromSignal(() => createViewMode(state, features.viewMode!)));
+      nodes.push(...viewMode.nodes);
+      edges.push(...viewMode.edges);
+    }
+    return { nodes, edges };
+  });
 };
 
 // TODO(wittjosiah): Toolbar re-rendering is causing this graph to be recreated and breaking reactivity in some cases.
 //   E.g. for toolbar dropdowns which use active icon, the icon is not updated when the active item changes.
 //   This is currently only happening in the markdown plugin usage and should be reproduced in an editor story.
 const useEditorToolbarActionGraph = (props: EditorToolbarProps) => {
-  const menuCreator = useCallback(() => createToolbar(props), [props]);
+  const menuCreator = useMemo(
+    () =>
+      createToolbar({
+        getView: props.getView,
+        state: props.state,
+        customActions: props.customActions,
+        headings: props.headings,
+        formatting: props.formatting,
+        lists: props.lists,
+        blocks: props.blocks,
+        image: props.image,
+        search: props.search,
+        viewMode: props.viewMode,
+      }),
+    [
+      props.getView,
+      props.state,
+      props.customActions,
+      props.headings,
+      props.formatting,
+      props.lists,
+      props.blocks,
+      props.image,
+      props.search,
+      props.viewMode,
+    ],
+  );
+
   return useMenuActions(menuCreator);
 };
 

package/src/components/EditorToolbar/index.ts

@@ -3,4 +3,10 @@
 //
 
 export * from './EditorToolbar';
-export { type EditorToolbarState, useEditorToolbarState, createEditorAction, createEditorActionGroup } from './util';
+export {
+  type EditorToolbarState,
+  type EditorToolbarActionGraphProps,
+  useEditorToolbarState,
+  createEditorAction,
+  createEditorActionGroup,
+} from './util';

package/src/components/EditorToolbar/util.ts

@@ -3,6 +3,7 @@
 //
 
 import { type EditorView } from '@codemirror/view';
+import { type Rx } from '@effect-rx/rx-react';
 import { useMemo } from 'react';
 
 import { type Action } from '@dxos/app-graph';
@@ -21,8 +22,7 @@ import {
 import type { EditorAction, EditorViewMode, Formatting } from '../../extensions';
 import { translationKey } from '../../translations';
 
-export type EditorToolbarState = Formatting &
-  Partial<{ comment: boolean; viewMode: EditorViewMode; selection: boolean }>;
+export type EditorToolbarState = Formatting & Partial<{ viewMode: EditorViewMode }>;
 
 export const useEditorToolbarState = (initialState: Partial<EditorToolbarState> = {}) => {
   return useMemo(() => live<EditorToolbarState>(initialState), []);
@@ -35,7 +35,6 @@ export type EditorToolbarFeatureFlags = Partial<{
   blocks: boolean;
   search: boolean;
   // TODO(wittjosiah): Factor out. Depend on plugin-level capabilities.
-  comment: boolean;
   image: () => void;
   viewMode: (mode: EditorViewMode) => void;
 }>;
@@ -44,7 +43,7 @@ export type EditorToolbarActionGraphProps = {
   state: Live<EditorToolbarState>;
   getView: () => EditorView;
   // TODO(wittjosiah): Control positioning.
-  customActions?: () => ActionGraphProps;
+  customActions?: Rx.Rx<ActionGraphProps>;
 };
 
 export type EditorToolbarProps = ThemedClassName<

package/src/components/Popover/RefDropdownMenu.tsx

@@ -0,0 +1,77 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import React, { type PropsWithChildren, useRef, useState, useEffect, useCallback, type RefObject } from 'react';
+
+import { addEventListener } from '@dxos/async';
+import { type DxRefTag, type DxRefTagActivate } from '@dxos/lit-ui';
+import { DropdownMenu } from '@dxos/react-ui';
+
+import { type PreviewLinkRef, type PreviewLinkTarget, type PreviewLookup } from '../../extensions';
+
+// TODO(burdon): Reconcile with RefPopover?
+
+const customEventOptions = { capture: true, passive: false };
+
+// Create a context for the dxn value.
+type RefDropdownMenuValue = Partial<{ link: PreviewLinkRef; target: PreviewLinkTarget; pending: boolean }>;
+
+const REF_DROPDOWN_MENU = 'RefDropdownMenu';
+const [RefDropdownMenuContextProvider, useRefDropdownMenu] = createContext<RefDropdownMenuValue>(REF_DROPDOWN_MENU, {});
+
+type RefDropdownMenuProviderProps = PropsWithChildren<{ onLookup?: PreviewLookup }>;
+
+const RefDropdownMenuProvider = ({ children, onLookup }: RefDropdownMenuProviderProps) => {
+  const trigger = useRef<DxRefTag | null>(null);
+  const [value, setValue] = useState<RefDropdownMenuValue>({});
+  const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
+  const [open, setOpen] = useState(false);
+
+  const handleDxRefTagActivate = useCallback(
+    (event: DxRefTagActivate) => {
+      const { refId, label, trigger: dxTrigger } = event;
+      setValue((value) => ({
+        ...value,
+        link: { label, ref: refId },
+        pending: true,
+      }));
+      trigger.current = dxTrigger;
+      queueMicrotask(() => setOpen(true));
+      void onLookup?.({ label, ref: refId }).then((target) =>
+        setValue((value) => ({
+          ...value,
+          target: target ?? undefined,
+          pending: false,
+        })),
+      );
+    },
+    [onLookup],
+  );
+
+  useEffect(() => {
+    return rootRef
+      ? addEventListener(rootRef, 'dx-ref-tag-activate', handleDxRefTagActivate, customEventOptions)
+      : undefined;
+  }, [rootRef]);
+
+  return (
+    <RefDropdownMenuContextProvider pending={value.pending} link={value.link} target={value.target}>
+      <DropdownMenu.Root open={open} onOpenChange={setOpen}>
+        <DropdownMenu.VirtualTrigger virtualRef={trigger as unknown as RefObject<HTMLButtonElement>} />
+        <div role='none' className='contents' ref={setRootRef}>
+          {children}
+        </div>
+      </DropdownMenu.Root>
+    </RefDropdownMenuContextProvider>
+  );
+};
+
+export const RefDropdownMenu = {
+  Provider: RefDropdownMenuProvider,
+};
+
+export { useRefDropdownMenu };
+
+export type { RefDropdownMenuProviderProps, RefDropdownMenuValue };

package/src/{testing → components/Popover}/RefPopover.tsx

@@ -9,12 +9,13 @@ import { addEventListener } from '@dxos/async';
 import { type DxRefTag, type DxRefTagActivate } from '@dxos/lit-ui';
 import { Popover } from '@dxos/react-ui';
 
-import { type PreviewLinkRef, type PreviewLinkTarget, type PreviewLookup } from '../extensions';
+import { type PreviewLinkRef, type PreviewLinkTarget, type PreviewLookup } from '../../extensions';
 
 const customEventOptions = { capture: true, passive: false };
 
 // Create a context for the dxn value.
 type RefPopoverValue = Partial<{ link: PreviewLinkRef; target: PreviewLinkTarget; pending: boolean }>;
+
 const REF_POPOVER = 'RefPopover';
 const [RefPopoverContextProvider, useRefPopover] = createContext<RefPopoverValue>(REF_POPOVER, {});
 
@@ -28,15 +29,15 @@ const RefPopoverProvider = ({ children, onLookup }: RefPopoverProviderProps) =>
 
   const handleDxRefTagActivate = useCallback(
     (event: DxRefTagActivate) => {
-      const { ref, label, trigger: dxTrigger } = event;
+      const { refId, label, trigger: dxTrigger } = event;
       setValue((value) => ({
         ...value,
-        link: { label, ref },
+        link: { label, ref: refId },
         pending: true,
       }));
       trigger.current = dxTrigger;
       queueMicrotask(() => setOpen(true));
-      void onLookup?.({ label, ref }).then((target) =>
+      void onLookup?.({ label, ref: refId }).then((target) =>
         setValue((value) => ({
           ...value,
           target: target ?? undefined,

package/src/components/Popover/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './RefPopover';
+export * from './RefDropdownMenu';

package/src/components/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './EditorToolbar';
+export * from './Popover';

package/src/defaults.ts

@@ -6,31 +6,28 @@ import { EditorView } from '@codemirror/view';
 
 import { mx } from '@dxos/react-ui-theme';
 
+import { type ThemeExtensionsOptions } from './extensions';
 import { fontMono } from './styles';
 
-const margin = '!mt-[1rem]';
-
 /**
  * CodeMirror content width.
  * 40rem = 640px. Corresponds to initial plank width (Google docs, Stashpad, etc.)
  * 50rem = 800px. Maximum content width for solo mode.
  * 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);
-
-/**
- * Margin for numbers.
- */
-export const editorFullWidth = mx(margin);
+export const editorSlots: ThemeExtensionsOptions['slots'] = {
+  scroll: {
+    className: 'pbs-2',
+  },
+  content: {
+    className: editorWidth,
+  },
+};
 
 export const editorGutter = EditorView.theme({
-  // Match margin from content.
-  // Gutter = 2rem + 1rem margin.
   '.cm-gutters': {
-    marginTop: '1rem',
     paddingRight: '1rem',
   },
 });
@@ -52,6 +49,6 @@ export const stackItemContentEditorClassNames = (role?: string) =>
 
 export const stackItemContentToolbarClassNames = (role?: string) =>
   mx(
-    'relative z-[1] flex is-full bg-toolbarSurface border-be border-separator',
+    'relative z-[1] flex is-full bg-toolbarSurface border-be border-subduedSeparator',
     role === 'section' && 'sticky block-start-0 -mbe-px min-is-0',
   );

package/src/extensions/annotations.ts

@@ -2,77 +2,54 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type EditorState, type Extension, StateField } from '@codemirror/state';
-import { Decoration, EditorView } from '@codemirror/view';
+import { type Extension, RangeSetBuilder } from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
 
-import { isNotFalsy } from '@dxos/util';
-
-import { Cursor } from '../util';
-
-type Annotation = {
-  cursor: string;
-};
+const annotationMark = Decoration.mark({ class: 'cm-annotation' });
 
 export type AnnotationOptions = {
   match?: RegExp; // TODO(burdon): Update via hook (e.g., for search).
 };
 
-const annotationMark = Decoration.mark({ class: 'cm-annotation' });
-
-export const annotations = (options: AnnotationOptions = {}): Extension => {
-  // TODO(burdon): Build index of matches and cursors (in background function).
-  //  Define annotation action in prompt. E.g., extract company names. Find links, etc.
-  //  Show popover card. A16Z chain demo. Identify, extract, research, link. Multi-agent.
-  const match = (state: EditorState) => {
-    const annotations: Annotation[] = [];
-    const text = state.doc.toString();
-    if (options.match) {
-      const matches = text.matchAll(options.match);
-      for (const match of matches) {
-        const from = match.index!;
-        const to = from + match[0].length;
-        const cursor = Cursor.getCursorFromRange(state, { from, to });
-        annotations.push({ cursor });
-      }
-    }
-
-    return annotations;
-  };
-
-  const annotationsState = StateField.define<Annotation[]>({
-    create: (state) => {
-      return match(state);
-    },
-    update: (value, tr) => {
-      if (!tr.changes.empty) {
-        return match(tr.state);
-      }
-
-      return value;
-    },
-  });
-
+/**
+ *
+ */
+export const annotations = ({ match }: AnnotationOptions = {}): Extension => {
   return [
-    annotationsState,
-    EditorView.decorations.compute([annotationsState], (state) => {
-      const annotations = state.field(annotationsState);
-      const decorations = annotations
-        .map((annotation) => {
-          const range = Cursor.getRangeFromCursor(state, annotation.cursor);
-          return range && annotationMark.range(range.from, range.to);
-        })
-        .filter(isNotFalsy);
-
-      return Decoration.set(decorations);
+    ViewPlugin.fromClass(
+      class {
+        decorations: DecorationSet = Decoration.none;
+        update(update: ViewUpdate) {
+          const builder = new RangeSetBuilder<Decoration>();
+          if (match) {
+            // Only process visible lines.
+            const { from, to } = update.view.viewport;
+            const text = update.state.doc.sliceString(from, to);
+            const matches = text.matchAll(match);
+            for (const m of matches) {
+              if (m.index !== undefined) {
+                // Adjust match position relative to viewport.
+                const start = from + m.index;
+                const end = start + m[0].length;
+                builder.add(start, end, annotationMark);
+              }
+            }
+          }
+
+          this.decorations = builder.finish();
+        }
+      },
+      {
+        decorations: (v) => v.decorations,
+      },
+    ),
+
+    EditorView.theme({
+      '.cm-annotation': {
+        textDecoration: 'underline',
+        textDecorationStyle: 'wavy',
+        textDecorationColor: 'var(--dx-errorText)',
+      },
     }),
-    styles,
   ];
 };
-
-const styles = EditorView.theme({
-  '.cm-annotation': {
-    textDecoration: 'underline',
-    textDecorationStyle: 'wavy',
-    textDecorationColor: 'var(--dx-error)',
-  },
-});

package/src/extensions/autocomplete.ts

@@ -17,7 +17,6 @@ import { keymap } from '@codemirror/view';
 export type AutocompleteResult = Completion;
 
 export type AutocompleteOptions = {
-  debug?: boolean;
   activateOnTyping?: boolean;
   override?: CompletionSource[];
   onSearch?: (text: string) => Completion[];
@@ -30,7 +29,7 @@ export type AutocompleteOptions = {
 /**
  * Autocomplete extension.
  */
-export const autocomplete = ({ debug, activateOnTyping, override, onSearch }: AutocompleteOptions = {}): Extension => {
+export const autocomplete = ({ activateOnTyping, override, onSearch }: AutocompleteOptions = {}): Extension => {
   const extensions: Extension[] = [
     // https://codemirror.net/docs/ref/#view.keymap
     // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
@@ -40,16 +39,16 @@ export const autocomplete = ({ debug, activateOnTyping, override, onSearch }: Au
     // https://codemirror.net/examples/autocompletion
     // https://codemirror.net/docs/ref/#autocomplete.autocompletion
     autocompletion({
-      activateOnTyping,
       override,
-      closeOnBlur: !debug,
-      tooltipClass: () => 'shadow rounded',
+      activateOnTyping,
+      // closeOnBlur: false,
+      // tooltipClass: () => 'rounded-be pbe-1 border-separator',
     }),
   ];
 
   if (onSearch) {
     extensions.push(
-      // TODO(burdon): Optional decoration via addToOptions
+      // TODO(burdon): Optional decoration via addToOptions.
       markdownLanguage.data.of({
         autocomplete: (context: CompletionContext): CompletionResult | null => {
           const match = context.matchBefore(/\w*/);

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

@@ -17,7 +17,7 @@ import { ClientRepeater, type ClientRepeatedComponentProps } from '@dxos/react-c
 import { useThemeContext } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { editorContent } from '../../defaults';
+import { editorSlots } from '../../defaults';
 import { useTextEditor } from '../../hooks';
 import translations from '../../translations';
 import { createBasicExtensions, createDataExtensions, createThemeExtensions } from '../factories';
@@ -42,12 +42,7 @@ const Editor = ({ source, autoFocus, space, identity }: EditorProps) => {
       initialValue: DocAccessor.getValue(source),
       extensions: [
         createBasicExtensions({ placeholder: 'Type here...' }),
-        createThemeExtensions({
-          themeMode,
-          slots: {
-            editor: { className: editorContent },
-          },
-        }),
+        createThemeExtensions({ themeMode, slots: editorSlots }),
         createDataExtensions({ id: 'test', text: source, space, identity }),
       ],
       autoFocus,

package/src/extensions/automerge/automerge.test.tsx

@@ -9,10 +9,11 @@ import { render, screen } from '@testing-library/react';
 // TODO(wittjosiah): Move to vitest expect (and remove from package.json).
 import chai, { expect } from 'chai';
 import chaiDom from 'chai-dom';
-import get from 'lodash.get';
 import React, { type FC, useEffect, useRef, useState } from 'react';
 import { describe, test } from 'vitest';
 
+import { get } from '@dxos/util';
+
 import { automerge } from './automerge';
 
 type TestObject = {
@@ -23,7 +24,7 @@ const path = ['text'];
 
 class Generator {
   constructor(private readonly _handle: DocHandle<TestObject>) {}
-  update(text: string) {
+  update(text: string): void {
     this._handle.change((doc: TestObject) => {
       doc.text = text;
     });

package/src/extensions/automerge/sync.ts

@@ -26,7 +26,7 @@ export class Syncer {
     private readonly _state: StateField<State>
   ) {}
 
-  reconcile(view: EditorView, editor: boolean) {
+  reconcile(view: EditorView, editor: boolean): void {
     // TODO(burdon): Better way to do mutex?
     if (this._pending) {
       return;
@@ -41,7 +41,7 @@ export class Syncer {
     this._pending = false;
   }
 
-  onEditorChange(view: EditorView) {
+  onEditorChange(view: EditorView): void {
     // Apply the unreconciled transactions to the document.
     const transactions = view.state.field(this._state).unreconciledTransactions.filter((tx) => !isReconcile(tx));
     const newHeads = updateAutomerge(this._state, this._handle, transactions, view.state);
@@ -54,7 +54,7 @@ export class Syncer {
     }
   }
 
-  onAutomergeChange(view: EditorView) {
+  onAutomergeChange(view: EditorView): void {
     // Get the diff between the updated state of the document and the heads and apply that to the codemirror doc.
     const oldHeads = getLastHeads(view.state, this._state);
     const newHeads = A.getHeads(this._handle.doc()!);

package/src/extensions/awareness/awareness-provider.ts

@@ -53,7 +53,7 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
     this._info = params.info;
   }
 
-  open() {
+  open(): void {
     this._ctx = new Context();
     this._postTask = new DeferredTask(this._ctx, async () => {
       if (this._localState) {
@@ -92,7 +92,7 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
       });
   }
 
-  close() {
+  close(): void {
     void this._ctx?.dispose();
     this._ctx = undefined;
     this._postTask = undefined;
@@ -113,12 +113,12 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
     this._postTask.schedule();
   }
 
-  private _handleQueryMessage() {
+  private _handleQueryMessage(): void {
     invariant(this._postTask);
     this._postTask.schedule();
   }
 
-  private _handlePostMessage(message: ProtocolMessage) {
+  private _handlePostMessage(message: ProtocolMessage): void {
     invariant(message.kind === 'post');
     // TODO(wittjosiah): Is it helpful or confusing to show cursors for self on other devices?
     this._remoteStates.set(message.state.peerId, message.state);