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

package/src/{components → containers/MarkdownContainer}/MarkdownContainer.stories.tsx

@@ -6,9 +6,10 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Effect from 'effect/Effect';
 import React, { useMemo } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { Surface, useOperationInvoker } from '@dxos/app-framework/react';
+import { Capability, Plugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
+import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
+import { AppActivationEvents, LayoutOperation } from '@dxos/app-toolkit';
 import { Obj, Query } from '@dxos/echo';
 import { ClientPlugin } from '@dxos/plugin-client';
 import { PreviewPlugin } from '@dxos/plugin-preview';
@@ -22,14 +23,24 @@ import { Text } from '@dxos/schema';
 import { type ValueGenerator, createObjectFactory } from '@dxos/schema/testing';
 import { Organization, Person } from '@dxos/types';
 
-import { MarkdownPlugin } from '../MarkdownPlugin';
-import { translations } from '../translations';
-import { Markdown } from '../types';
+import { MarkdownPlugin } from '../../MarkdownPlugin';
+import { translations } from '../../translations';
+import { Markdown, MarkdownCapabilities, MarkdownEvents } from '../../types';
 
 faker.seed(1);
 
 const generator: ValueGenerator = faker as any;
 
+/** Minimal plugin that contributes an empty Extensions capability for stories. */
+const MarkdownExtensionsPlugin = Plugin.define({ id: 'story-markdown-extensions', name: 'Story Extensions' }).pipe(
+  Plugin.addModule({
+    id: 'extensions',
+    activatesOn: MarkdownEvents.SetupExtensions,
+    activate: () => Effect.succeed(Capability.contributes(MarkdownCapabilities.Extensions, [])),
+  }),
+  Plugin.make,
+);
+
 const DefaultStory = () => {
   const { invokePromise } = useOperationInvoker();
   const space = useSpace();
@@ -40,27 +51,29 @@ const DefaultStory = () => {
 
   useAsyncEffect(async () => {
     if (space) {
-      await invokePromise(Common.LayoutOperation.SwitchWorkspace, { subject: space.id });
+      await invokePromise(LayoutOperation.SwitchWorkspace, { subject: space.id });
     }
   }, [space, invokePromise]);
 
   return (
     <div className='contents' {...attentionAttrs}>
-      <Surface role='article' data={data} limit={1} />
+      <Surface.Surface role='article' data={data} limit={1} />
     </div>
   );
 };
 
 const meta = {
-  title: 'plugins/plugin-markdown/MarkdownContainer',
+  title: 'plugins/plugin-markdown/containers/MarkdownContainer',
   render: DefaultStory,
   decorators: [
-    withTheme,
+    withTheme(),
     withLayout({ layout: 'column' }),
     withPluginManager<{ title?: string; content?: string }>((context) => ({
+      setupEvents: [AppActivationEvents.SetupSettings, MarkdownEvents.SetupExtensions],
       plugins: [
         ...corePlugins(),
         StorybookPlugin({}),
+        MarkdownExtensionsPlugin(),
         ClientPlugin({
           types: [Markdown.Document, Text.Text, Person.Person, Organization.Organization],
           onClientInitialized: ({ client }) =>

package/src/{components → containers/MarkdownContainer}/MarkdownContainer.tsx

@@ -4,21 +4,22 @@
 
 import { type Extension } from '@codemirror/state';
 import { Atom } from '@effect-atom/atom-react';
-import React, { forwardRef, useMemo } from 'react';
+import React, { forwardRef, useCallback, useMemo } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { type SurfaceComponentProps, useAppGraph, useCapabilities } from '@dxos/app-framework/react';
+import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
+import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
 import { useActionRunner } from '@dxos/plugin-graph';
 import { useObject } from '@dxos/react-client/echo';
+import { Panel } from '@dxos/react-ui';
 import { type SelectionManager } from '@dxos/react-ui-attention';
-import { Layout } from '@dxos/react-ui-mosaic';
 import { Text } from '@dxos/schema';
 
-import { useLinkQuery } from '../hooks';
-import { Markdown, MarkdownCapabilities, type MarkdownPluginState } from '../types';
-
-import { MarkdownEditor, type MarkdownEditorContentProps, type MarkdownEditorRootProps } from './MarkdownEditor';
+import { MarkdownEditor, type MarkdownEditorContentProps, type MarkdownEditorRootProps } from '../../components';
+import { useLinkQuery } from '../../hooks';
+import { Markdown, MarkdownCapabilities, type MarkdownPluginState } from '../../types';
 
 export type MarkdownContainerProps = SurfaceComponentProps<
   Markdown.Document | Text.Text,
@@ -26,15 +27,17 @@ export type MarkdownContainerProps = SurfaceComponentProps<
     id: string;
     settings: Markdown.Settings;
     selectionManager?: SelectionManager;
-  } & Pick<MarkdownEditorRootProps, 'viewMode' | 'onViewModeChange'> &
-    Pick<MarkdownEditorContentProps, 'editorStateStore'> &
-    Pick<MarkdownPluginState, 'extensionProviders'>
+  } & Pick<MarkdownPluginState, 'extensionProviders'> &
+    Pick<MarkdownEditorRootProps, 'viewMode' | 'onSelectObject' | 'onViewModeChange'> &
+    Pick<MarkdownEditorContentProps, 'editorStateStore'>
 >;
 
 export const MarkdownContainer = forwardRef<HTMLDivElement, MarkdownContainerProps>(
-  ({ role, subject: object, id, settings, extensionProviders, ...props }, forwardedRef) => {
+  (
+    { role, subject: object, id, attendableId, settings, extensionProviders, onSelectObject, ...props },
+    forwardedRef,
+  ) => {
     const db = Obj.isObject(object) ? Obj.getDatabase(object) : undefined;
-    const attendableId = Obj.instanceOf(Markdown.Document, object) ? Obj.getDXN(object).toString() : undefined;
     const [docContent] = useObject(Obj.instanceOf(Markdown.Document, object) ? object.content : undefined, 'content');
     const [textContent] = useObject(Obj.instanceOf(Text.Text, object) ? object : undefined, 'content');
     const initialValue = docContent ?? textContent;
@@ -65,15 +68,15 @@ export const MarkdownContainer = forwardRef<HTMLDivElement, MarkdownContainerPro
     const runAction = useActionRunner();
     const customActions = useMemo(() => {
       return Atom.make((get) => {
-        const actions = get(graph.actions(id));
+        const actions = get(graph.actions(attendableId ?? id));
         const nodes = actions.filter((action) => action.properties.disposition === 'toolbar');
-        const edges = nodes.map((node) => ({ source: 'root', target: node.id }));
+        const edges = nodes.map((node) => ({ source: 'root', target: node.id, relation: 'child' }));
         return { nodes, edges };
       });
     }, [graph]);
 
     // File upload.
-    const [upload] = useCapabilities(Common.Capability.FileUploader);
+    const [upload] = useCapabilities(AppCapabilities.FileUploader);
     const handleFileUpload = useMemo(() => {
       if (!db || !upload) {
         return undefined;
@@ -85,27 +88,47 @@ export const MarkdownContainer = forwardRef<HTMLDivElement, MarkdownContainerPro
     // Query for @ refs.
     const handleLinkQuery = useLinkQuery(db);
 
+    // Open linked objects.
+    const { invokePromise } = useOperationInvoker();
+    const handleSelectObject = useCallback(
+      (targetId: string) => {
+        if (onSelectObject) {
+          onSelectObject(targetId);
+        } else {
+          void invokePromise?.(LayoutOperation.Open, {
+            subject: [targetId],
+            pivotId: attendableId,
+          });
+        }
+      },
+      [onSelectObject, invokePromise, object, id],
+    );
+
     return (
-      <Layout.Main toolbar={settings.toolbar} ref={forwardedRef}>
-        <MarkdownEditor.Root
-          id={attendableId ?? id}
-          object={object}
-          extensions={extensions}
-          settings={settings}
-          onAction={runAction}
-          onFileUpload={handleFileUpload}
-          onLinkQuery={handleLinkQuery}
-          {...props}
-        >
+      <MarkdownEditor.Root
+        id={id}
+        attendableId={attendableId}
+        object={object}
+        extensions={extensions}
+        settings={settings}
+        onAction={runAction}
+        onFileUpload={handleFileUpload}
+        onLinkQuery={handleLinkQuery}
+        onSelectObject={handleSelectObject}
+        {...props}
+      >
+        <Panel.Root role={role} ref={forwardedRef}>
           {settings.toolbar && (
-            <MarkdownEditor.Toolbar id={attendableId ?? id} role={role} customActions={customActions} />
+            <Panel.Toolbar className='bg-toolbar-surface'>
+              <MarkdownEditor.Toolbar classNames='dx-document' customActions={customActions} />
+            </Panel.Toolbar>
           )}
-          <MarkdownEditor.Content initialValue={initialValue} scrollPastEnd={role === 'article'} />
-          <MarkdownEditor.Blocks />
-        </MarkdownEditor.Root>
-      </Layout.Main>
+          <Panel.Content className='pt-2'>
+            <MarkdownEditor.Content initialValue={initialValue} scrollPastEnd={role === 'article'} />
+            <MarkdownEditor.Blocks />
+          </Panel.Content>
+        </Panel.Root>
+      </MarkdownEditor.Root>
     );
   },
 );
-
-export default MarkdownContainer;

package/src/containers/MarkdownContainer/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { MarkdownContainer, type MarkdownContainerProps } from './MarkdownContainer';
+export { MarkdownContainer as default } from './MarkdownContainer';

package/src/{components → containers}/MarkdownSettings/MarkdownSettings.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 
 import { Input, Select, useTranslation } from '@dxos/react-ui';
-import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
+import { Settings } from '@dxos/react-ui-form';
 import { type EditorInputMode, EditorInputModes, type EditorViewMode, EditorViewModes } from '@dxos/ui-editor';
 
 import { meta } from '../../meta';
@@ -21,10 +21,10 @@ export const MarkdownSettings = ({ settings, onSettingsChange }: MarkdownSetting
 
   // TODO(wittjosiah): Add skill test confirmation for entering vim mode.
   return (
-    <ControlPage>
-      <ControlSection title={t('settings title', { ns: meta.id })}>
-        <ControlGroup>
-          <ControlItemInput title={t('default view mode label')}>
+    <Settings.Root>
+      <Settings.Section title={t('settings title', { ns: meta.id })}>
+        <Settings.Group>
+          <Settings.ItemInput title={t('default view mode label')}>
             <Select.Root
               value={settings.defaultViewMode}
               onValueChange={(value) => {
@@ -37,7 +37,7 @@ export const MarkdownSettings = ({ settings, onSettingsChange }: MarkdownSetting
                   <Select.Viewport>
                     {EditorViewModes.map((mode) => (
                       <Select.Option key={mode} value={mode}>
-                        {t(`${mode} mode label`, { ns: 'react-ui-editor' })}
+                        {t(`${mode} mode label`, { ns: '@dxos/react-ui-editor' })}
                       </Select.Option>
                     ))}
                   </Select.Viewport>
@@ -45,9 +45,9 @@ export const MarkdownSettings = ({ settings, onSettingsChange }: MarkdownSetting
                 </Select.Content>
               </Select.Portal>
             </Select.Root>
-          </ControlItemInput>
+          </Settings.ItemInput>
 
-          <ControlItemInput title={t('editor input mode label')}>
+          <Settings.ItemInput title={t('editor input mode label')}>
             <Select.Root
               value={settings.editorInputMode ?? 'default'}
               onValueChange={(value) => {
@@ -68,55 +68,55 @@ export const MarkdownSettings = ({ settings, onSettingsChange }: MarkdownSetting
                 </Select.Content>
               </Select.Portal>
             </Select.Root>
-          </ControlItemInput>
+          </Settings.ItemInput>
 
-          <ControlItemInput title={t('settings toolbar label')}>
+          <Settings.ItemInput title={t('settings toolbar label')}>
             <Input.Switch
               checked={settings.toolbar}
               onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, toolbar: !!checked }))}
             />
-          </ControlItemInput>
+          </Settings.ItemInput>
 
-          <ControlItemInput title={t('settings numbered headings label')}>
+          <Settings.ItemInput title={t('settings numbered headings label')}>
             <Input.Switch
               checked={settings.numberedHeadings}
               onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, numberedHeadings: !!checked }))}
             />
-          </ControlItemInput>
+          </Settings.ItemInput>
 
-          <ControlItemInput title={t('settings folding label')}>
+          <Settings.ItemInput title={t('settings folding label')}>
             <Input.Switch
               checked={settings.folding}
               onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, folding: !!checked }))}
             />
-          </ControlItemInput>
+          </Settings.ItemInput>
 
-          <ControlItemInput title={t('settings experimental label')}>
+          <Settings.ItemInput title={t('settings experimental label')}>
             <Input.Switch
               checked={settings.experimental}
               onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, experimental: !!checked }))}
             />
-          </ControlItemInput>
+          </Settings.ItemInput>
 
-          <ControlItemInput title={t('settings debug label')}>
+          <Settings.ItemInput title={t('settings debug label')}>
             <Input.Switch
               checked={settings.debug}
               onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, debug: !!checked }))}
             />
-          </ControlItemInput>
+          </Settings.ItemInput>
 
           {settings.debug && (
-            <ControlItemInput title={t('settings debug textarea label', { ns: meta.id })}>
+            <Settings.ItemInput title={t('settings debug textarea label', { ns: meta.id })}>
               <Input.TextArea
                 rows={5}
                 value={settings.typewriter}
                 onChange={({ target: { value } }) => onSettingsChange((s) => ({ ...s, typewriter: value }))}
                 placeholder={t('settings debug placeholder')}
               />
-            </ControlItemInput>
+            </Settings.ItemInput>
           )}
-        </ControlGroup>
-      </ControlSection>
-    </ControlPage>
+        </Settings.Group>
+      </Settings.Section>
+    </Settings.Root>
   );
 };

package/src/containers/MarkdownSettings/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { MarkdownSettings } from './MarkdownSettings';
+
+export default MarkdownSettings;

package/src/containers/index.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ComponentType, lazy } from 'react';
+
+export type { MarkdownContainerProps } from './MarkdownContainer';
+
+export const MarkdownCard: ComponentType<any> = lazy(() => import('./MarkdownCard'));
+export const MarkdownContainer: ComponentType<any> = lazy(() => import('./MarkdownContainer'));
+export const MarkdownSettings: ComponentType<any> = lazy(() => import('./MarkdownSettings'));

package/src/hooks/useEditorMenuOptions.ts

@@ -56,7 +56,7 @@ export const useEditorMenuOptions = ({
       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),
+          Domino.of('span').classNames('mx-1 px-1.5 pt-[1px] pb-[2px] border border-separator rounded-xs').text(text),
         );
         const forCommandsEl = Domino.of('span').text('for commands.');
         return Domino.of('div').children(pressEl, ...triggerEls, forCommandsEl).root;

package/src/hooks/useExtensions.tsx

@@ -3,20 +3,16 @@
 //
 
 import { type ViewUpdate } from '@codemirror/view';
-import React, { type AnchorHTMLAttributes, type ReactNode, useMemo } from 'react';
-import { createRoot } from 'react-dom/client';
-
-import { Common } from '@dxos/app-framework';
-import { useOperationInvoker } from '@dxos/app-framework/react';
+import { useMemo } from 'react';
 import { debounceAndThrottle } from '@dxos/async';
 import { Obj } from '@dxos/echo';
 import { createDocAccessor } from '@dxos/echo-db';
 import { invariant } from '@dxos/invariant';
 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 { Domino } from '@dxos/ui';
 import {
   Cursor,
   type EditorStateStore,
@@ -38,8 +34,7 @@ import {
   selectionState,
   typewriter,
 } from '@dxos/ui-editor';
-import { defaultTx } from '@dxos/ui-theme';
-import { isTruthy } from '@dxos/util';
+import { isTruthy, safeUrl } from '@dxos/util';
 
 import { Markdown } from '../types';
 import { setFallbackName } from '../util';
@@ -49,12 +44,13 @@ export type DocumentType = Markdown.Document | Text.Text | { id: string; text: s
 export type ExtensionsOptions = {
   id: string;
   object?: DocumentType;
-  invokePromise?: Common.Capability.OperationInvoker['invokePromise'];
   settings?: Markdown.Settings;
   selectionManager?: SelectionManager;
   viewMode?: EditorViewMode;
   editorStateStore?: EditorStateStore;
   previewOptions?: PreviewOptions;
+  /** Callback when an internal link is clicked. */
+  onSelectObject?: (objectId: string) => void;
 };
 
 // TODO(burdon): Merge with createBaseExtensions below.
@@ -66,8 +62,8 @@ export const useExtensions = ({
   viewMode,
   editorStateStore,
   previewOptions,
+  onSelectObject,
 }: ExtensionsOptions): Extension[] => {
-  const { invokePromise } = useOperationInvoker();
   const identity = useIdentity();
   const space = getSpace(object);
 
@@ -92,14 +88,14 @@ export const useExtensions = ({
         selectionManager,
         viewMode,
         previewOptions,
-        invokePromise,
+        onSelectObject,
       }),
     [
       id,
       object,
       viewMode,
-      invokePromise,
       previewOptions,
+      onSelectObject,
       settings,
       settings?.debug,
       settings?.editorInputMode,
@@ -144,7 +140,7 @@ export const useExtensions = ({
 const createBaseExtensions = ({
   id,
   object,
-  invokePromise,
+  onSelectObject,
   settings,
   selectionManager,
   viewMode,
@@ -166,17 +162,8 @@ const createBaseExtensions = ({
         decorateMarkdown({
           selectionChangeDelay: 100,
           numberedHeadings: settings?.numberedHeadings ? { from: 2 } : undefined,
-          // 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:
-            invokePromise && (object || id)
-              ? createLinkRenderer((targetId: string) => {
-                  void invokePromise(Common.LayoutOperation.Open, {
-                    subject: [targetId],
-                    pivotId: object && Obj.isObject(object) ? Obj.getDXN(object).toString() : id,
-                  });
-                })
-              : undefined,
+          // TODO(wittjosiah): For internal links render the label of the object.
+          renderLinkButton: onSelectObject && createRenderLink(onSelectObject),
         }),
         linkTooltip(renderLinkTooltip),
         preview(previewOptions),
@@ -196,79 +183,55 @@ const createBaseExtensions = ({
 };
 
 const selectionChange = (selectionManager: SelectionManager) => {
-  return EditorView.updateListener.of(
-    debounceAndThrottle((update: ViewUpdate) => {
-      if (update.selectionSet) {
-        const id = update.state.facet(documentId);
-        const cursorConverter = update.state.facet(Cursor.converter);
-        const selection = update.state.selection;
-        const ranges = selection.ranges
-          .map((range) => ({
-            from: cursorConverter.toCursor(range.from),
-            to: cursorConverter.toCursor(range.to),
-          }))
-          .filter(({ from, to }) => to > from);
-
-        selectionManager.updateMultiRange(id, ranges);
-      }
-    }, 100),
-  );
-};
-
-// TODO(burdon): Factor out styles.
-const style = {
-  hover: 'rounded-sm text-primary-500 hover:text-primary-600 dark:text-primary-500 hover:dark:text-primary-400',
-  icon: 'inline-block leading-none mis-1 cursor-pointer',
+  const debouncedHandler = debounceAndThrottle((update: ViewUpdate) => {
+    const id = update.state.facet(documentId);
+    const cursorConverter = update.state.facet(Cursor.converter);
+    const selection = update.state.selection;
+    const ranges = selection.ranges
+      .map((range) => ({
+        from: cursorConverter.toCursor(range.from),
+        to: cursorConverter.toCursor(range.to),
+      }))
+      .filter(({ from, to }) => to > from);
+
+    selectionManager.updateMultiRange(id, ranges);
+  }, 100);
+
+  return EditorView.updateListener.of((update: ViewUpdate) => {
+    if (update.selectionSet) {
+      debouncedHandler(update);
+    }
+  });
 };
 
-const createLinkRenderer =
+const createRenderLink =
   (onSelectObject: (id: string) => void): RenderCallback<{ url: string }> =>
   (el, { url }) => {
     // TODO(burdon): Formalize/document internal link format.
-    const isInternal =
-      url.startsWith('/') ||
-      // TODO(wittjosiah): This should probably be parsed out on paste?
-      url.startsWith(window.location.origin);
-
-    const options: AnchorHTMLAttributes<any> = isInternal
-      ? {
-          onClick: () => {
-            const qualifiedId = url.split('/').at(-1);
-            invariant(qualifiedId, 'Invalid link format.');
-            onSelectObject(qualifiedId);
-          },
-        }
-      : {
-          href: url,
-          rel: 'noreferrer',
-          target: '_blank',
-        };
+    const isInternal = url.startsWith('/') || url.startsWith(window.location.origin);
+    const anchor = Domino.of('a')
+      .classNames('dx-link dx-icon-inline ms-1')
+      .children(Domino.svg(isInternal ? 'ph--arrow-square-down--regular' : 'ph--arrow-square-out--regular'));
+
+    if (isInternal) {
+      anchor.on('click', () => {
+        const qualifiedId = url.split('/').at(-1);
+        invariant(qualifiedId, 'Invalid link format.');
+        onSelectObject(qualifiedId);
+      });
+    } else {
+      anchor.attributes({ href: url, rel: 'noreferrer', target: '_blank' });
+    }
 
-    renderRoot(
-      el,
-      <a {...options} className={style.hover}>
-        <Icon
-          icon={isInternal ? 'ph--arrow-square-down--bold' : 'ph--arrow-square-out--bold'}
-          size={4}
-          classNames={style.icon}
-        />
-      </a>,
-    );
+    el.appendChild(anchor.root);
   };
 
 const renderLinkTooltip: RenderCallback<{ url: string }> = (el, { url }) => {
-  const web = new URL(url);
-  renderRoot(
-    el,
-    <a href={url} rel='noreferrer' target='_blank' className={style.hover}>
-      {web.origin}
-      <Icon icon='ph--arrow-square-out--bold' size={4} classNames={style.icon} />
-    </a>,
+  el.appendChild(
+    Domino.of('a')
+      .attributes({ href: url, target: '_blank', rel: 'noreferrer' })
+      .classNames('dx-link flex items-center gap-2')
+      .text(safeUrl(url)?.origin ?? url)
+      .children(Domino.svg('ph--arrow-square-out--regular')).root,
   );
 };
-
-// TODO(burdon): REMOVE.
-const renderRoot = <T extends Element>(root: T, node: ReactNode): T => {
-  createRoot(root).render(<ThemeProvider tx={defaultTx}>{node}</ThemeProvider>);
-  return root;
-};

package/src/hooks/useLinkQuery.ts

@@ -5,8 +5,8 @@
 import * as Option from 'effect/Option';
 import { useCallback, useMemo } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { usePluginManager } from '@dxos/app-framework/react';
+import { usePluginManager } from '@dxos/app-framework/ui';
+import { AppCapabilities } from '@dxos/app-toolkit';
 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';
@@ -19,7 +19,7 @@ export const useLinkQuery = (db: Database.Database | undefined) => {
   const manager = usePluginManager();
   const resolve = useCallback(
     (typename: string) =>
-      manager.capabilities.getAll(Common.Capability.Metadata).find(({ id }) => id === typename)?.metadata ?? {},
+      manager.capabilities.getAll(AppCapabilities.Metadata).find(({ id }) => id === typename)?.metadata ?? {},
     [manager],
   );
 

package/src/hooks/useSelectCurrentThread.tsx

@@ -6,8 +6,8 @@ import { EditorView } from '@codemirror/view';
 import * as Effect from 'effect/Effect';
 import { useMemo } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { useOperationResolver } from '@dxos/app-framework/react';
+import { useOperationResolver } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
 import { invariant } from '@dxos/invariant';
 import { OperationResolver } from '@dxos/operation';
 import { Cursor, setSelection } from '@dxos/ui-editor';
@@ -17,13 +17,13 @@ import { meta } from '../meta';
 /**
  * Handle scrolling and selection of the current thread in a markdown editor.
  */
-export const useSelectCurrentThread = (editorView: EditorView | null, documentId: string) => {
+export const useSelectCurrentThread = (editorView: EditorView | null, documentId: string, attendableId: string) => {
   const scrollIntoViewHandler = useMemo(
     () =>
       OperationResolver.make({
-        operation: Common.LayoutOperation.ScrollIntoView,
+        operation: LayoutOperation.ScrollIntoView,
         position: 'hoist',
-        filter: (input) => !!editorView && input.subject === documentId && !!input.cursor,
+        filter: (input) => !!editorView && !!input.cursor && input.subject === attendableId,
         handler: (input) =>
           Effect.sync(() => {
             invariant(editorView, 'Editor view is not defined.');
@@ -54,7 +54,7 @@ export const useSelectCurrentThread = (editorView: EditorView | null, documentId
             }
           }),
       }),
-    [documentId, editorView],
+    [documentId, attendableId, editorView],
   );
 
   useOperationResolver(meta.id, scrollIntoViewHandler);

package/src/index.ts

@@ -9,3 +9,5 @@ export * from './types';
 export * from './util';
 
 export * from './MarkdownPlugin';
+
+export { MarkdownEditor } from './components';