@dxos/react-ui-editor 0.8.4-main.b97322e → 0.8.4-main.bcb3aa67d6

package/src/components/Popover/RefDropdownMenu.tsx

@@ -1,85 +0,0 @@
-//
-// 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 this file 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(() => {
-    if (!rootRef) {
-      return;
-    }
-
-    return addEventListener(rootRef, 'dx-ref-tag-activate' as any, handleDxRefTagActivate, customEventOptions);
-  }, [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/components/Popover/RefPopover.tsx

@@ -1,99 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { createContext } from '@radix-ui/react-context';
-import React, {
-  type PropsWithChildren,
-  useRef,
-  useState,
-  useEffect,
-  useCallback,
-  type RefObject,
-  forwardRef,
-} from 'react';
-
-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';
-
-const customEventOptions = { capture: true, passive: false };
-
-export type RefPopoverProps = PropsWithChildren<{
-  modal?: boolean;
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  onActivate?: (event: DxRefTagActivate) => void;
-}>;
-
-export const RefPopover = forwardRef<DxRefTag | null, RefPopoverProps>(
-  ({ children, open, onOpenChange, modal, onActivate }, ref) => {
-    const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
-
-    useEffect(() => {
-      if (!rootRef || !onActivate) {
-        return;
-      }
-
-      return addEventListener(rootRef, 'dx-ref-tag-activate' as any, onActivate, customEventOptions);
-    }, [rootRef, onActivate]);
-
-    return (
-      <Popover.Root open={open} onOpenChange={onOpenChange} modal={modal}>
-        <Popover.VirtualTrigger virtualRef={ref as unknown as RefObject<HTMLButtonElement>} />
-        <div role='none' className='contents' ref={setRootRef}>
-          {children}
-        </div>
-      </Popover.Root>
-    );
-  },
-);
-
-// 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, {});
-
-type PreviewProviderProps = PropsWithChildren<{ onLookup?: PreviewLookup }>;
-
-const PreviewProvider = ({ children, onLookup }: PreviewProviderProps) => {
-  const trigger = useRef<DxRefTag | null>(null);
-  const [value, setValue] = useState<RefPopoverValue>({});
-  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],
-  );
-
-  return (
-    <RefPopoverContextProvider pending={value.pending} link={value.link} target={value.target}>
-      <RefPopover ref={trigger} open={open} onOpenChange={setOpen} onActivate={handleDxRefTagActivate}>
-        {children}
-      </RefPopover>
-    </RefPopoverContextProvider>
-  );
-};
-
-export { PreviewProvider, useRefPopover };
-
-export type { PreviewProviderProps, RefPopoverValue };

package/src/components/Popover/index.ts

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

package/src/defaults.ts

@@ -1,49 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { EditorView } from '@codemirror/view';
-
-import { mx } from '@dxos/react-ui-theme';
-
-import { type ThemeExtensionsOptions } from './extensions';
-import { fontMono } from './styles';
-
-/**
- * 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).
- */
-export const editorWidth = '!mli-auto is-full max-is-[min(50rem,100%-4rem)]';
-
-export const editorSlots: ThemeExtensionsOptions['slots'] = {
-  scroll: {
-    className: 'pbs-2',
-  },
-  content: {
-    className: editorWidth,
-  },
-};
-
-export const editorGutter = EditorView.theme({
-  '.cm-gutters': {
-    background: 'var(--dx-baseSurface)',
-    paddingRight: '1rem',
-  },
-});
-
-export const editorMonospace = EditorView.theme({
-  '.cm-content': {
-    fontFamily: fontMono,
-  },
-});
-
-export const editorWithToolbarLayout =
-  'grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden';
-
-export const stackItemContentEditorClassNames = (role?: string) =>
-  mx(
-    'attention-surface dx-focus-ring-inset data-[toolbar=disabled]:pbs-2',
-    role === 'section' ? '[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24' : 'min-bs-0',
-  );

package/src/extensions/annotations.ts

@@ -1,55 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Extension, RangeSetBuilder } from '@codemirror/state';
-import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
-
-const annotationMark = Decoration.mark({ class: 'cm-annotation' });
-
-export type AnnotationOptions = {
-  match?: RegExp; // TODO(burdon): Update via hook (e.g., for search).
-};
-
-/**
- *
- */
-export const annotations = ({ match }: AnnotationOptions = {}): Extension => {
-  return [
-    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)',
-      },
-    }),
-  ];
-};

package/src/extensions/autocomplete.ts

@@ -1,69 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import {
-  autocompletion,
-  completionKeymap,
-  type CompletionSource,
-  type Completion,
-  type CompletionContext,
-  type CompletionResult,
-} from '@codemirror/autocomplete';
-import { markdownLanguage } from '@codemirror/lang-markdown';
-import { type Extension } from '@codemirror/state';
-import { keymap } from '@codemirror/view';
-
-export type AutocompleteResult = Completion;
-
-export type AutocompleteOptions = {
-  activateOnTyping?: boolean;
-  override?: CompletionSource[];
-  onSearch?: (text: string) => Completion[];
-};
-
-// https://codemirror.net/examples/autocompletion
-// https://codemirror.net/docs/ref/#autocomplete.autocompletion
-// https://codemirror.net/docs/ref/#autocomplete.Completion
-
-/**
- * Autocomplete 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
-    // TODO(burdon): Set custom keymap.
-    keymap.of(completionKeymap),
-
-    // https://codemirror.net/examples/autocompletion
-    // https://codemirror.net/docs/ref/#autocomplete.autocompletion
-    autocompletion({
-      override,
-      activateOnTyping,
-      // closeOnBlur: false,
-      // tooltipClass: () => 'rounded-be pbe-1 border-separator',
-    }),
-  ];
-
-  if (onSearch) {
-    extensions.push(
-      // TODO(burdon): Optional decoration via addToOptions.
-      markdownLanguage.data.of({
-        autocomplete: (context: CompletionContext): CompletionResult | null => {
-          const match = context.matchBefore(/\w*/);
-          if (!match || (match.from === match.to && !context.explicit)) {
-            return null;
-          }
-
-          return {
-            from: match.from,
-            options: onSearch(match.text.toLowerCase()),
-          };
-        },
-      }),
-    );
-  }
-
-  return extensions;
-};

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

@@ -1,142 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import '@preact/signals-react';
-
-import { Repo } from '@automerge/automerge-repo';
-import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-network-broadcastchannel';
-import React, { useEffect, useState } from 'react';
-
-import { Obj, Ref, Type } from '@dxos/echo';
-import { DocAccessor, createDocAccessor, useQuery, useSpace, type Space, Query } 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';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { editorSlots } from '../../defaults';
-import { useTextEditor } from '../../hooks';
-import { translations } from '../../translations';
-import { createBasicExtensions, createDataExtensions, createThemeExtensions } from '../factories';
-
-const initialContent = 'Hello world!';
-
-type TestObject = {
-  text: string;
-};
-
-type EditorProps = {
-  source: DocAccessor;
-  autoFocus?: boolean;
-  space?: Space;
-  identity?: Identity;
-};
-
-const Editor = ({ source, autoFocus, space, identity }: EditorProps) => {
-  const { themeMode } = useThemeContext();
-  const { parentRef } = useTextEditor(
-    () => ({
-      initialValue: DocAccessor.getValue(source),
-      extensions: [
-        createBasicExtensions({ placeholder: 'Type here...' }),
-        createThemeExtensions({ themeMode, slots: editorSlots }),
-        createDataExtensions({ id: 'test', text: source, space, identity }),
-      ],
-      autoFocus,
-    }),
-    [source, themeMode],
-  );
-
-  return <div ref={parentRef} className='flex w-full' />;
-};
-
-const Story = () => {
-  const [object1, setObject1] = useState<DocAccessor<TestObject>>();
-  const [object2, setObject2] = useState<DocAccessor<TestObject>>();
-
-  useEffect(() => {
-    queueMicrotask(async () => {
-      const repo1 = new Repo({ network: [new BroadcastChannelNetworkAdapter()] });
-      const repo2 = new Repo({ network: [new BroadcastChannelNetworkAdapter()] });
-
-      const object1 = repo1.create<TestObject>();
-      object1.change((doc: TestObject) => {
-        doc.text = initialContent;
-      });
-
-      const object2 = await repo2.find<TestObject>(object1.url);
-      await object2.whenReady();
-
-      // TODO(mykola): Fix types.
-      setObject1({ handle: object1 as any, path: ['text'] });
-      setObject2({ handle: object2 as any, path: ['text'] });
-    });
-  }, []);
-
-  if (!object1 || !object2) {
-    return null;
-  }
-
-  return (
-    <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>
-  );
-};
-
-export default {
-  title: 'ui/react-ui-editor/Automerge',
-  component: Editor,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  render: () => <Story />,
-  parameters: {
-    translations,
-  },
-};
-
-const EchoStory = ({ spaceKey }: ClientRepeatedComponentProps) => {
-  const identity = useIdentity();
-  const space = useSpace(spaceKey);
-  const [source, setSource] = useState<DocAccessor>();
-  const objects = useQuery(space, Query.type(Type.Expando, { type: 'test' }));
-
-  useEffect(() => {
-    if (!source && objects.length) {
-      const source = createDocAccessor(objects[0].content, ['content']);
-      setSource(source);
-    }
-  }, [objects, source]);
-
-  if (!source) {
-    return null;
-  }
-
-  return <Editor source={source} space={space} identity={identity ?? undefined} />;
-};
-
-export const Default = {};
-
-export const WithEcho = {
-  decorators: [withTheme],
-  render: () => {
-    return (
-      <ClientRepeater
-        count={2}
-        component={EchoStory}
-        createSpace
-        onSpaceCreated={async ({ space }) => {
-          space.db.add(
-            Obj.make(Type.Expando, {
-              type: 'test',
-              content: Ref.make(Obj.make(Type.Expando, { content: initialContent })),
-            }),
-          );
-        }}
-      />
-    );
-  },
-};

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

@@ -1,78 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type DocHandle, Repo } from '@automerge/automerge-repo';
-import { EditorState } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
-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 React, { type FC, useEffect, useRef, useState } from 'react';
-import { describe, test } from 'vitest';
-
-import { get } from '@dxos/util';
-
-import { automerge } from './automerge';
-
-type TestObject = {
-  text: string;
-};
-
-const path = ['text'];
-
-class Generator {
-  constructor(private readonly _handle: DocHandle<TestObject>) {}
-  update(text: string): void {
-    this._handle.change((doc: TestObject) => {
-      doc.text = text;
-    });
-  }
-}
-
-const Test: FC<{ handle: DocHandle<TestObject>; generator: Generator }> = ({ handle, generator }) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const [view, setView] = useState<EditorView>();
-  useEffect(() => {
-    const extensions = [
-      // TODO(mykola): Fix types.
-      automerge({ handle: handle as any, path }),
-      EditorView.updateListener.of((update) => {
-        if (view.state.doc.toString() === 'hello!') {
-          // Update editor.
-          update.view.dispatch({ changes: { from: view.state.doc.length - 1, insert: ' world' } });
-        }
-      }),
-    ];
-
-    const view = new EditorView({
-      state: EditorState.create({ doc: get(handle.doc()!, path), extensions }),
-      parent: ref.current!,
-    });
-
-    setView(view);
-  }, []);
-
-  useEffect(() => {}, [view]);
-
-  return <div ref={ref} />;
-};
-
-chai.use(chaiDom);
-
-describe('Automerge', () => {
-  test('basic sync', () => {
-    const repo = new Repo({ network: [] });
-    const handle = repo.create<TestObject>();
-    const generator = new Generator(handle);
-    render(<Test handle={handle} generator={generator} />);
-    expect(screen.getByRole('textbox')).to.have.text('');
-
-    generator.update('hello!');
-    expect(screen.getByRole('textbox')).to.have.text('hello world!');
-  });
-
-  // TODO(burdon): Test history/undo.
-  // TODO(burdon): https://testing-library.com/docs/react-testing-library/example-intro/
-});

package/src/extensions/automerge/automerge.ts

@@ -1,85 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-// Copyright 2024 Automerge
-// Ref: https://github.com/automerge/automerge-codemirror
-//
-
-import { next as A } from '@automerge/automerge';
-import { StateField, type Extension } from '@codemirror/state';
-import { EditorView, ViewPlugin } from '@codemirror/view';
-
-import { type DocAccessor } from '@dxos/react-client/echo';
-
-import { cursorConverter } from './cursor';
-import { updateHeadsEffect, isReconcile, type State } from './defs';
-import { Syncer } from './sync';
-import { Cursor } from '../../util';
-
-export const automerge = (accessor: DocAccessor): Extension => {
-  const syncState = StateField.define<State>({
-    create: () => ({
-      path: accessor.path.slice(),
-      lastHeads: A.getHeads(accessor.handle.doc()!),
-      unreconciledTransactions: [],
-    }),
-
-    update: (value, tr) => {
-      const result: State = {
-        path: accessor.path.slice(),
-        lastHeads: value.lastHeads,
-        unreconciledTransactions: value.unreconciledTransactions.slice(),
-      };
-
-      let clearUnreconciled = false;
-      for (const effect of tr.effects) {
-        if (effect.is(updateHeadsEffect)) {
-          result.lastHeads = effect.value.newHeads;
-          clearUnreconciled = true;
-        }
-      }
-
-      if (clearUnreconciled) {
-        result.unreconciledTransactions = [];
-      } else {
-        if (!isReconcile(tr)) {
-          result.unreconciledTransactions.push(tr);
-        }
-      }
-
-      return result;
-    },
-  });
-
-  const syncer = new Syncer(accessor.handle, syncState);
-
-  return [
-    Cursor.converter.of(cursorConverter(accessor)),
-
-    // Track heads.
-    syncState,
-
-    // Reconcile external updates.
-    ViewPlugin.fromClass(
-      class {
-        constructor(private readonly _view: EditorView) {
-          accessor.handle.addListener('change', this._handleChange);
-        }
-
-        destroy() {
-          accessor.handle.removeListener('change', this._handleChange);
-        }
-
-        readonly _handleChange = () => {
-          syncer.reconcile(this._view, false);
-        };
-      },
-    ),
-
-    // Reconcile local updates.
-    EditorView.updateListener.of(({ view, changes }) => {
-      if (!changes.empty) {
-        syncer.reconcile(view, true);
-      }
-    }),
-  ];
-};