@dxos/plugin-markdown 0.8.4-main.ae835ea → 0.8.4-main.bc674ce

package/src/components/MarkdownEditor/MarkdownEditorToolbar.tsx

@@ -5,10 +5,11 @@
 import { type EditorView } from '@codemirror/view';
 import React, { useCallback, useState } from 'react';
 
-import { type FileInfo } from '@dxos/app-framework';
+import { type Common } from '@dxos/app-framework';
 import { invariant } from '@dxos/invariant';
 import { type ThemedClassName } from '@dxos/react-ui';
-import { EditorToolbar, type EditorToolbarProps, type EditorViewMode } from '@dxos/react-ui-editor';
+import { EditorToolbar, type EditorToolbarProps } from '@dxos/react-ui-editor';
+import { type EditorViewMode } from '@dxos/ui-editor';
 
 import { FileUpload, type FileUploadAction } from './FileUpload';
 
@@ -16,8 +17,8 @@ export type MarkdownEditorToolbarProps = ThemedClassName<
   {
     id: string;
     editorView?: EditorView;
-    onFileUpload?: (file: File) => Promise<FileInfo | undefined>;
-  } & Pick<EditorToolbarProps, 'role' | 'state' | 'customActions' | 'onViewModeChange'>
+    onFileUpload?: (file: File) => Promise<Common.FileInfo | undefined>;
+  } & Pick<EditorToolbarProps, 'role' | 'state' | 'customActions' | 'onAction' | 'onViewModeChange'>
 >;
 
 export const MarkdownEditorToolbar = ({
@@ -27,11 +28,12 @@ export const MarkdownEditorToolbar = ({
   state,
   editorView,
   customActions,
+  onAction,
   onFileUpload,
   onViewModeChange,
 }: MarkdownEditorToolbarProps) => {
   const [upload, setUpload] = useState<FileUploadAction | null>(null);
-  const handleRef = useCallback((next: FileUploadAction) => setUpload(() => next), []);
+  const uploadRef = useCallback((next: FileUploadAction) => setUpload(() => next), []);
 
   const handleViewModeChange = useCallback((mode: EditorViewMode) => onViewModeChange?.(mode), [onViewModeChange]);
 
@@ -53,11 +55,12 @@ export const MarkdownEditorToolbar = ({
         state={state}
         customActions={customActions}
         getView={getView}
+        onAction={onAction}
         onImageUpload={upload ?? undefined}
         onViewModeChange={handleViewModeChange}
       />
 
-      {onFileUpload && <FileUpload ref={handleRef} editorView={editorView} onFileUpload={onFileUpload} />}
+      {onFileUpload && <FileUpload ref={uploadRef} editorView={editorView} onFileUpload={onFileUpload} />}
     </>
   );
 };

package/src/components/MarkdownSettings/MarkdownSettings.tsx

@@ -5,13 +5,18 @@
 import React from 'react';
 
 import { Input, Select, useTranslation } from '@dxos/react-ui';
-import { type EditorInputMode, EditorInputModes, type EditorViewMode, EditorViewModes } from '@dxos/react-ui-editor';
 import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
+import { type EditorInputMode, EditorInputModes, type EditorViewMode, EditorViewModes } from '@dxos/ui-editor';
 
 import { meta } from '../../meta';
 import { type Markdown } from '../../types';
 
-export const MarkdownSettings = ({ settings }: { settings: Markdown.Settings }) => {
+export type MarkdownSettingsComponentProps = {
+  settings: Markdown.Settings;
+  onSettingsChange: (fn: (current: Markdown.Settings) => Markdown.Settings) => void;
+};
+
+export const MarkdownSettings = ({ settings, onSettingsChange }: MarkdownSettingsComponentProps) => {
   const { t } = useTranslation(meta.id);
 
   // TODO(wittjosiah): Add skill test confirmation for entering vim mode.
@@ -23,7 +28,7 @@ export const MarkdownSettings = ({ settings }: { settings: Markdown.Settings })
             <Select.Root
               value={settings.defaultViewMode}
               onValueChange={(value) => {
-                settings.defaultViewMode = value as EditorViewMode;
+                onSettingsChange((s) => ({ ...s, defaultViewMode: value as EditorViewMode }));
               }}
             >
               <Select.TriggerButton />
@@ -46,7 +51,7 @@ export const MarkdownSettings = ({ settings }: { settings: Markdown.Settings })
             <Select.Root
               value={settings.editorInputMode ?? 'default'}
               onValueChange={(value) => {
-                settings.editorInputMode = value as EditorInputMode;
+                onSettingsChange((s) => ({ ...s, editorInputMode: value as EditorInputMode }));
               }}
             >
               <Select.TriggerButton placeholder={t('select editor input mode placeholder')} />
@@ -66,29 +71,38 @@ export const MarkdownSettings = ({ settings }: { settings: Markdown.Settings })
           </ControlItemInput>
 
           <ControlItemInput title={t('settings toolbar label')}>
-            <Input.Switch checked={settings.toolbar} onCheckedChange={(checked) => (settings.toolbar = !!checked)} />
+            <Input.Switch
+              checked={settings.toolbar}
+              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, toolbar: !!checked }))}
+            />
           </ControlItemInput>
 
           <ControlItemInput title={t('settings numbered headings label')}>
             <Input.Switch
               checked={settings.numberedHeadings}
-              onCheckedChange={(checked) => (settings.numberedHeadings = !!checked)}
+              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, numberedHeadings: !!checked }))}
             />
           </ControlItemInput>
 
           <ControlItemInput title={t('settings folding label')}>
-            <Input.Switch checked={settings.folding} onCheckedChange={(checked) => (settings.folding = !!checked)} />
+            <Input.Switch
+              checked={settings.folding}
+              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, folding: !!checked }))}
+            />
           </ControlItemInput>
 
           <ControlItemInput title={t('settings experimental label')}>
             <Input.Switch
               checked={settings.experimental}
-              onCheckedChange={(checked) => (settings.experimental = !!checked)}
+              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, experimental: !!checked }))}
             />
           </ControlItemInput>
 
           <ControlItemInput title={t('settings debug label')}>
-            <Input.Switch checked={settings.debug} onCheckedChange={(checked) => (settings.debug = !!checked)} />
+            <Input.Switch
+              checked={settings.debug}
+              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, debug: !!checked }))}
+            />
           </ControlItemInput>
 
           {settings.debug && (
@@ -96,7 +110,7 @@ export const MarkdownSettings = ({ settings }: { settings: Markdown.Settings })
               <Input.TextArea
                 rows={5}
                 value={settings.typewriter}
-                onChange={({ target: { value } }) => (settings.typewriter = value)}
+                onChange={({ target: { value } }) => onSettingsChange((s) => ({ ...s, typewriter: value }))}
                 placeholder={t('settings debug placeholder')}
               />
             </ControlItemInput>

package/src/components/Suggestions.stories.tsx

@@ -3,37 +3,34 @@
 //
 
 import { type Meta } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
 import * as Function from 'effect/Function';
 import * as Match from 'effect/Match';
 import * as Option from 'effect/Option';
 import * as Schema from 'effect/Schema';
 import React, { type FC, useEffect, useMemo, useState } from 'react';
 
-import { Capabilities, IntentPlugin, SettingsPlugin, useCapability, useIntentDispatcher } from '@dxos/app-framework';
+import { useAtomCapability, useCapability } from '@dxos/app-framework/react';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Obj, Ref, Type } from '@dxos/echo';
+import { createDocAccessor, toCursorRange } from '@dxos/echo-db';
 import { invariant } from '@dxos/invariant';
 import { ClientPlugin } from '@dxos/plugin-client';
-import { GraphPlugin } from '@dxos/plugin-graph';
 import { PreviewPlugin } from '@dxos/plugin-preview';
-import { SpacePlugin } from '@dxos/plugin-space';
-import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
-import { ThemePlugin } from '@dxos/plugin-theme';
+import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { faker } from '@dxos/random';
-import { createDocAccessor, fullyQualifiedId, toCursorRange, useQueue, useSpace } from '@dxos/react-client/echo';
+import { useQueue, useSpace } from '@dxos/react-client/echo';
 import { IconButton, Toolbar } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
-import { type EditorSelection, type Range, useTextEditor } from '@dxos/react-ui-editor';
-import { StackItem } from '@dxos/react-ui-stack';
-import { defaultTx } from '@dxos/react-ui-theme';
-import { DataType } from '@dxos/schema';
+import { useTextEditor } from '@dxos/react-ui-editor';
+import { Layout } from '@dxos/react-ui-mosaic';
 import { render } from '@dxos/storybook-utils';
+import { Message } from '@dxos/types';
+import { type EditorSelection, type Range } from '@dxos/ui-editor';
 
-import { MarkdownCapabilities } from '../capabilities';
 import { MarkdownPlugin } from '../MarkdownPlugin';
-import { meta } from '../meta';
 import { translations } from '../translations';
-import { Markdown } from '../types';
+import { Markdown, MarkdownCapabilities } from '../types';
 
 import { MarkdownContainer } from './MarkdownContainer';
 
@@ -49,26 +46,25 @@ const TestItem = Schema.Struct({
     description: 'Product description',
   }),
 }).pipe(
-  Type.Obj({
+  Type.object({
     typename: 'dxos.org/type/Test',
     version: '0.1.0',
   }),
 );
 
 const TestChat: FC<{ doc: Markdown.Document; content: string }> = ({ doc, content }) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const { parentRef } = useTextEditor({ initialValue: content });
-  const { editorState } = useCapability(MarkdownCapabilities.State);
+  const editorState = useCapability(MarkdownCapabilities.EditorState);
 
   const space = useSpace();
   const queueDxn = useMemo(() => space && space.queues.create().dxn, [space]);
-  const queue = useQueue<DataType.Message>(queueDxn);
+  const queue = useQueue<Message.Message>(queueDxn);
 
   const handleInsert = async () => {
     invariant(space);
     invariant(queue);
     await queue.append([
-      Obj.make(DataType.Message, {
+      Obj.make(Message.Message, {
         created: new Date().toISOString(),
         sender: { role: 'assistant' },
         blocks: [{ _tag: 'text', text: 'Hello' }],
@@ -80,7 +76,7 @@ const TestChat: FC<{ doc: Markdown.Document; content: string }> = ({ doc, conten
     const text = await doc.content.load();
     const accessor = createDocAccessor(text, ['content']);
     const cursor = Function.pipe(
-      editorState.getState(fullyQualifiedId(doc))?.selection,
+      editorState.getState(Obj.getDXN(doc).toString())?.selection,
       Option.fromNullable,
       Option.map(selectionToRange),
       Option.map((range) => toCursorRange(accessor, range.from, range.to)),
@@ -94,7 +90,7 @@ const TestChat: FC<{ doc: Markdown.Document; content: string }> = ({ doc, conten
 
     // void dispatch(
     //   createIntent(CollaborationActions.InsertContent, {
-    //     target: doc as any as Type.Expando,
+    //     target: doc as any as TestSchema.Expando,
     //     object: Ref.fromDXN(new DXN(DXN.kind.QUEUE, [...queue.dxn.parts, message.id])),
     //     at: cursor,
     //     label: 'Proposal',
@@ -103,20 +99,20 @@ const TestChat: FC<{ doc: Markdown.Document; content: string }> = ({ doc, conten
   };
 
   return (
-    <StackItem.Content toolbar>
+    <Layout.Main toolbar>
       <Toolbar.Root>
         <IconButton icon='ph--plus--regular' disabled={!queue} label='Insert' onClick={handleInsert} />
       </Toolbar.Root>
       <div ref={parentRef} className='p-4' />
-    </StackItem.Content>
+    </Layout.Main>
   );
 };
 
 const DefaultStory = ({ document, chat }: { document: string; chat: string }) => {
   const space = useSpace();
   const [doc, setDoc] = useState<Markdown.Document>();
-  const settings = useCapability(Capabilities.SettingsStore).getStore<Markdown.Settings>(meta.id)!.value;
-  const { editorState } = useCapability(MarkdownCapabilities.State);
+  const settings = useAtomCapability(MarkdownCapabilities.Settings);
+  const editorState = useCapability(MarkdownCapabilities.EditorState);
 
   useEffect(() => {
     if (!space) {
@@ -124,10 +120,15 @@ const DefaultStory = ({ document, chat }: { document: string; chat: string }) =>
     }
 
     const doc = space.db.add(
-      Markdown.makeDocument({
+      Markdown.make({
         name: 'Test',
         content: document.replaceAll(/\[(\w+)\]/g, (_, label) => {
-          const obj = space.db.add(Obj.make(TestItem, { title: label, description: faker.lorem.paragraph() }));
+          const obj = space.db.add(
+            Obj.make(TestItem, {
+              title: label,
+              description: faker.lorem.paragraph(),
+            }),
+          );
           const dxn = Ref.make(obj).dxn.toString();
           return `[${label}](${dxn})`;
         }),
@@ -141,10 +142,9 @@ const DefaultStory = ({ document, chat }: { document: string; chat: string }) =>
     return null;
   }
 
-  // TODO(burdon): Layout issue.
   return (
     <div className='grid grid-cols-2 bs-full overflow-hidden'>
-      <MarkdownContainer id={doc.id} object={doc} settings={settings} editorStateStore={editorState} />
+      <MarkdownContainer id={doc.id} subject={doc} settings={settings} editorStateStore={editorState} />
       <TestChat doc={doc} content={chat} />
     </div>
   );
@@ -157,22 +157,18 @@ const storybook: Meta<typeof DefaultStory> = {
     withTheme,
     withPluginManager({
       plugins: [
+        ...corePlugins(),
+        StorybookPlugin({}),
         ClientPlugin({
           types: [Markdown.Document, TestItem],
-          onClientInitialized: async ({ client }) => {
-            await client.halo.createIdentity();
-          },
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* Effect.promise(() => client.halo.createIdentity());
+            }),
         }),
-        SpacePlugin({}),
-        GraphPlugin(),
-        IntentPlugin(),
-        SettingsPlugin(),
 
-        // UI
-        ThemePlugin({ tx: defaultTx }),
         MarkdownPlugin(),
         PreviewPlugin(),
-        StorybookLayoutPlugin({}),
       ],
     }),
   ],

package/src/components/index.ts

@@ -2,11 +2,16 @@
 // Copyright 2023 DXOS.org
 //
 
-import { lazy } from 'react';
+import { type LazyExoticComponent, lazy } from 'react';
+
+import { type MarkdownCard as MarkdownCardType } from './MarkdownCard';
+import { type MarkdownContainer as MarkdownContainerType } from './MarkdownContainer';
 
 export * from './MarkdownCard';
 export * from './MarkdownContainer';
 export * from './MarkdownSettings';
 
-export const MarkdownCard = lazy(() => import('./MarkdownCard'));
-export const MarkdownContainer = lazy(() => import('./MarkdownContainer'));
+export const MarkdownCard: LazyExoticComponent<typeof MarkdownCardType> = lazy(() => import('./MarkdownCard'));
+export const MarkdownContainer: LazyExoticComponent<typeof MarkdownContainerType> = lazy(
+  () => import('./MarkdownContainer'),
+);

package/src/hooks/index.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+export * from './useEditorMenuOptions';
 export * from './useExtensions';
 export * from './useLinkQuery';
-export * from './usePopoverMenuOptions';
 export * from './useSelectCurrentThread';

package/src/hooks/{usePopoverMenuOptions.ts → useEditorMenuOptions.ts}

@@ -5,31 +5,32 @@
 import { type EditorView } from '@codemirror/view';
 import { useCallback, useMemo, useRef } from 'react';
 
-import { Domino, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { toLocalizedString, useTranslation } from '@dxos/react-ui';
 import {
-  type PopoverMenuGroup,
-  type UsePopoverMenuProps,
+  type EditorMenuGroup,
+  type UseEditorMenuProps,
   filterMenuGroups,
   formattingCommands,
   linkSlashCommands,
 } from '@dxos/react-ui-editor';
+import { Domino } from '@dxos/ui';
 
 import { meta } from '../meta';
 
-export type UsePopoverMenuOptionsProps = {
+export type UseEditorMenuOptionsProps = {
   editorView?: EditorView;
-  slashCommandGroups?: PopoverMenuGroup[];
-  onLinkQuery?: (query?: string) => Promise<PopoverMenuGroup[]>;
+  slashCommandGroups?: EditorMenuGroup[];
+  onLinkQuery?: (query?: string) => Promise<EditorMenuGroup[]>;
 };
 
-export const usePopoverMenuOptions = ({
+export const useEditorMenuOptions = ({
   editorView,
   slashCommandGroups,
   onLinkQuery,
-}: UsePopoverMenuOptionsProps): UsePopoverMenuProps => {
+}: UseEditorMenuOptionsProps): UseEditorMenuProps => {
   const { t } = useTranslation(meta.id);
 
-  const getMenu = useCallback<NonNullable<UsePopoverMenuProps['getMenu']>>(
+  const getMenu = useCallback<NonNullable<UseEditorMenuProps['getMenu']>>(
     ({ text, trigger }) => {
       switch (trigger) {
         case '@': {
@@ -48,22 +49,18 @@ export const usePopoverMenuOptions = ({
   );
 
   const viewRef = useRef(editorView);
-  return useMemo<UsePopoverMenuProps>(() => {
+  return useMemo<UseEditorMenuProps>(() => {
     const trigger = onLinkQuery ? ['/', '@'] : ['/'];
     const placeholder = {
       delay: 3_000,
-      content: () =>
-        Domino.of('div')
-          .children(
-            Domino.of('span').text('Press'),
-            ...trigger.map((text) =>
-              Domino.of('span')
-                .classNames('mx-1 px-1.5 pt-[1px] pb-[2px] border border-separator rounded-sm')
-                .text(text),
-            ),
-            Domino.of('span').text('for commands.'),
-          )
-          .build(),
+      content: () => {
+        const pressEl = Domino.of('span').text('Press');
+        const triggerEls = trigger.map((text) =>
+          Domino.of('span').classNames('mx-1 pli-1.5 pt-[1px] pb-[2px] border border-separator rounded-sm').text(text),
+        );
+        const forCommandsEl = Domino.of('span').text('for commands.');
+        return Domino.of('div').children(pressEl, ...triggerEls, forCommandsEl).root;
+      },
     };
 
     return { viewRef, getMenu, trigger, placeholder };

package/src/hooks/useExtensions.tsx

@@ -6,15 +6,17 @@ import { type ViewUpdate } from '@codemirror/view';
 import React, { type AnchorHTMLAttributes, type ReactNode, useMemo } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { LayoutAction, type PromiseIntentDispatcher, createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { Common } from '@dxos/app-framework';
+import { useOperationInvoker } from '@dxos/app-framework/react';
 import { debounceAndThrottle } from '@dxos/async';
 import { Obj } from '@dxos/echo';
+import { createDocAccessor } from '@dxos/echo-db';
 import { invariant } from '@dxos/invariant';
-import { createDocAccessor, fullyQualifiedId } from '@dxos/react-client/echo';
-import { getSpace } from '@dxos/react-client/echo';
+import { getSpace, useObject } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { Icon, ThemeProvider } from '@dxos/react-ui';
 import { type SelectionManager } from '@dxos/react-ui-attention';
+import { Text } from '@dxos/schema';
 import {
   Cursor,
   type EditorStateStore,
@@ -32,22 +34,22 @@ import {
   linkTooltip,
   listener,
   preview,
+  replacer,
   selectionState,
   typewriter,
-} from '@dxos/react-ui-editor';
-import { defaultTx } from '@dxos/react-ui-theme';
-import { DataType } from '@dxos/schema';
+} from '@dxos/ui-editor';
+import { defaultTx } from '@dxos/ui-theme';
 import { isTruthy } from '@dxos/util';
 
 import { Markdown } from '../types';
 import { setFallbackName } from '../util';
 
-export type DocumentType = Markdown.Document | DataType.Text | { id: string; text: string };
+export type DocumentType = Markdown.Document | Text.Text | { id: string; text: string };
 
 export type ExtensionsOptions = {
   id: string;
   object?: DocumentType;
-  dispatch?: PromiseIntentDispatcher;
+  invokePromise?: Common.Capability.OperationInvoker['invokePromise'];
   settings?: Markdown.Settings;
   selectionManager?: SelectionManager;
   viewMode?: EditorViewMode;
@@ -65,16 +67,16 @@ export const useExtensions = ({
   editorStateStore,
   previewOptions,
 }: ExtensionsOptions): Extension[] => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { invokePromise } = useOperationInvoker();
   const identity = useIdentity();
   const space = getSpace(object);
 
-  let target: Obj.Any | undefined;
-  if (Obj.instanceOf(Markdown.Document, object)) {
-    target = (object as Markdown.Document).content.target;
-  } else if (Obj.instanceOf(DataType.Text, object)) {
-    target = object;
-  }
+  // Get the content reference from Document objects.
+  const contentRef = Obj.instanceOf(Markdown.Document, object) ? (object as Markdown.Document).content : undefined;
+  // Use useObject to trigger re-render when the reference loads (returns snapshot for reactivity).
+  useObject(contentRef);
+  // Get the actual live object target via .target (needed for createDocAccessor).
+  const target = contentRef?.target ?? (Obj.instanceOf(Text.Text, object) ? object : undefined);
 
   // TODO(wittjosiah): Autocomplete is not working and this query is causing performance issues.
   // TODO(burdon): Unsubscribe.
@@ -90,13 +92,13 @@ export const useExtensions = ({
         selectionManager,
         viewMode,
         previewOptions,
-        dispatch,
+        invokePromise,
       }),
     [
       id,
       object,
       viewMode,
-      dispatch,
+      invokePromise,
       previewOptions,
       settings,
       settings?.debug,
@@ -113,7 +115,13 @@ export const useExtensions = ({
       [
         // TODO(burdon): Pass this in?
         // NOTE: Data extensions must be first so that automerge is updated before other extensions compute their state.
-        target && createDataExtensions({ id, text: createDocAccessor(target, ['content']), space, identity }),
+        target &&
+          createDataExtensions({
+            id,
+            text: createDocAccessor(target, ['content']),
+            messenger: space,
+            identity,
+          }),
 
         // TODO(burdon): Reconcile with effect in parent.
         Obj.instanceOf(Markdown.Document, object) &&
@@ -136,7 +144,7 @@ export const useExtensions = ({
 const createBaseExtensions = ({
   id,
   object,
-  dispatch,
+  invokePromise,
   settings,
   selectionManager,
   viewMode,
@@ -161,22 +169,18 @@ const createBaseExtensions = ({
           // TODO(wittjosiah): For internal links, consider ignoring the link text and rendering the label of the object being linked to.
           // TODO(burdon): Create dx-tag.
           renderLinkButton:
-            dispatch && (object || id)
-              ? createLinkRenderer((id: string) => {
-                  void dispatch(
-                    createIntent(LayoutAction.Open, {
-                      part: 'main',
-                      subject: [id],
-                      options: {
-                        pivotId: object ? fullyQualifiedId(object) : id,
-                      },
-                    }),
-                  );
+            invokePromise && (object || id)
+              ? createLinkRenderer((targetId: string) => {
+                  void invokePromise(Common.LayoutOperation.Open, {
+                    subject: [targetId],
+                    pivotId: object && Obj.isObject(object) ? Obj.getDXN(object).toString() : id,
+                  });
                 })
               : undefined,
         }),
         linkTooltip(renderLinkTooltip),
         preview(previewOptions),
+        replacer(),
       ],
     );
   }

package/src/hooks/useLinkQuery.ts

@@ -2,43 +2,44 @@
 // Copyright 2024 DXOS.org
 //
 
+import * as Option from 'effect/Option';
 import { useCallback, useMemo } from 'react';
 
-import { Capabilities, useCapabilities, usePluginManager } from '@dxos/app-framework';
-import { Filter, Obj, Query, Type } from '@dxos/echo';
-import { ClientCapabilities } from '@dxos/plugin-client';
-import { SpaceCapabilities } from '@dxos/plugin-space';
-import { type Space } from '@dxos/react-client/echo';
+import { Common } from '@dxos/app-framework';
+import { usePluginManager } from '@dxos/app-framework/react';
+import { type Database, Filter, Obj, Query, Type } from '@dxos/echo';
+import { EntityKind, SystemTypeAnnotation, getTypeAnnotation } from '@dxos/echo/internal';
 import { toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { type PopoverMenuGroup, type PopoverMenuItem, insertAtCursor, insertAtLineStart } from '@dxos/react-ui-editor';
+import { type EditorMenuGroup, type EditorMenuItem } from '@dxos/react-ui-editor';
+import { insertAtCursor, insertAtLineStart } from '@dxos/ui-editor';
 
-export const useLinkQuery = (space: Space | undefined) => {
+export const useLinkQuery = (db: Database.Database | undefined) => {
   const { t } = useTranslation();
 
   const manager = usePluginManager();
   const resolve = useCallback(
     (typename: string) =>
-      manager.context.getCapabilities(Capabilities.Metadata).find(({ id }) => id === typename)?.metadata ?? {},
+      manager.capabilities.getAll(Common.Capability.Metadata).find(({ id }) => id === typename)?.metadata ?? {},
     [manager],
   );
 
-  const objectForms = useCapabilities(SpaceCapabilities.ObjectForm);
-  const schemaWhiteList = useCapabilities(ClientCapabilities.SchemaWhiteList);
   const filter = useMemo(
     () =>
       Filter.or(
-        ...objectForms.map((form) => Filter.type(form.objectSchema)),
-        ...schemaWhiteList.flat().map((schema) => Filter.typename(Type.getTypename(schema))),
+        ...(db?.schemaRegistry.query({ location: ['database', 'runtime'] }).runSync() ?? [])
+          .filter((schema) => getTypeAnnotation(schema)?.kind !== EntityKind.Relation)
+          .filter((schema) => !SystemTypeAnnotation.get(schema).pipe(Option.getOrElse(() => false)))
+          .map((schema) => Filter.typename(Type.getTypename(schema))),
       ),
-    [objectForms, schemaWhiteList],
+    [db],
   );
 
   const handleLinkQuery = useCallback(
-    async (query?: string): Promise<PopoverMenuGroup[]> => {
+    async (query?: string): Promise<EditorMenuGroup[]> => {
       const name = query?.startsWith('@') ? query.slice(1).toLowerCase() : (query?.toLowerCase() ?? '');
-      const results = await space?.db.query(Query.select(filter)).run();
+      const results = await db?.query(Query.select(filter)).run();
 
-      // TODO(wittjosiah): Use `Obj.Any` type.
+      // TODO(wittjosiah): Use `Obj.Unknown` type.
       const getLabel = (object: any) => {
         const label = Obj.getLabel(object);
         if (label) {
@@ -52,17 +53,17 @@ export const useLinkQuery = (space: Space | undefined) => {
       };
 
       const items =
-        results?.objects
-          .filter((object) => toLocalizedString(getLabel(object), t).toLowerCase().includes(name))
+        results
+          ?.filter((object) => toLocalizedString(getLabel(object), t).toLowerCase().includes(name))
           // TODO(wittjosiah): Remove `any` type.
-          .map((object: any): PopoverMenuItem => {
+          .map((object: any): EditorMenuItem => {
             const metadata = resolve(Obj.getTypename(object)!);
             const label = toLocalizedString(getLabel(object), t);
             return {
               id: object.id,
               label,
               icon: metadata.icon,
-              onSelect: (view, head) => {
+              onSelect: ({ view, head }) => {
                 const link = `[${label}](${Obj.getDXN(object)})`;
                 if (query?.startsWith('@')) {
                   insertAtLineStart(view, head, `!${link}\n`);
@@ -75,7 +76,7 @@ export const useLinkQuery = (space: Space | undefined) => {
 
       return [{ id: 'echo', items }];
     },
-    [space, filter, resolve],
+    [db, filter, resolve],
   );
 
   return handleLinkQuery;