@dxos/plugin-markdown 0.9.1-main.c7dcc2e112 → 0.10.0

package/src/components/MarkdownEditor/MarkdownEditor.tsx

@@ -9,11 +9,6 @@ import { createContext } from '@radix-ui/react-context';
 import React, { type ReactNode, useCallback, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 
-import { Surface } from '@dxos/app-framework/ui';
-import { AppSurface } from '@dxos/app-toolkit/ui';
-import { Obj } from '@dxos/echo';
-import { URI } from '@dxos/keys';
-import { useClient } from '@dxos/react-client';
 import { type ThemedClassName } from '@dxos/react-ui';
 import { composable, composableProps } from '@dxos/react-ui';
 import {
@@ -22,7 +17,7 @@ import {
   createEditorController,
   useEditorContext,
 } from '@dxos/react-ui-editor';
-import { type PreviewBlock, type PreviewOptions } from '@dxos/ui-editor';
+import { type XmlWidgetState } from '@dxos/ui-editor';
 import { isNonNullable } from '@dxos/util';
 
 import {
@@ -49,7 +44,7 @@ import {
 type MarkdownEditorContextValue = {
   id: string;
   attendableId?: string;
-  previewBlocks: PreviewBlock[];
+  widgets: XmlWidgetState[];
 } & Pick<ExtensionsOptions, 'compact' | 'viewMode'> &
   Pick<NaturalMarkdownToolbarProps, 'onAction' | 'onFileUpload' | 'onViewModeChange'>;
 
@@ -94,20 +89,8 @@ export const MarkdownEditorProvider = ({
   onFileUpload,
   onViewModeChange,
 }: MarkdownEditorProviderProps) => {
-  // Preview blocks.
-  const [previewBlocks, setPreviewBlocks] = useState<PreviewBlock[]>([]);
-  const previewOptions = useMemo<PreviewOptions>(
-    () => ({
-      db: Obj.isObject(object) ? Obj.getDatabase(object) : undefined,
-      addBlockContainer: (block) => {
-        setPreviewBlocks((prev) => [...prev, block]);
-      },
-      removeBlockContainer: ({ link }) => {
-        setPreviewBlocks((prev) => prev.filter(({ link: prevLink }) => prevLink.dxn !== link.dxn));
-      },
-    }),
-    [object],
-  );
+  // Widget portals driven by xmlTags.
+  const [widgets, setWidgets] = useState<XmlWidgetState[]>([]);
 
   // Context menu options (Editor.Root calls useEditorMenu with these props).
   const menuOptions = useEditorMenuOptions({ slashCommandGroups, onLinkQuery });
@@ -120,7 +103,7 @@ export const MarkdownEditorProvider = ({
     viewMode,
     viewState,
     editorStateStore,
-    previewOptions,
+    setWidgets,
     settings,
     onSelectObject,
   });
@@ -149,12 +132,12 @@ export const MarkdownEditorProvider = ({
       attendableId,
       compact,
       viewMode,
-      previewBlocks,
+      widgets,
       onAction,
       onFileUpload,
       onViewModeChange,
     }),
-    [id, attendableId, compact, viewMode, previewBlocks, onAction, onFileUpload, onViewModeChange],
+    [id, attendableId, compact, viewMode, widgets, onAction, onFileUpload, onViewModeChange],
   );
 
   return (
@@ -251,12 +234,12 @@ const MARKDOWN_EDITOR_BLOCKS_NAME = 'MarkdownEditor.Blocks';
 type MarkdownEditorBlocksProps = {};
 
 const MarkdownEditorBlocks = (_props: MarkdownEditorBlocksProps) => {
-  const { previewBlocks } = useMarkdownEditorContext(MARKDOWN_EDITOR_BLOCKS_NAME);
+  const { widgets } = useMarkdownEditorContext(MARKDOWN_EDITOR_BLOCKS_NAME);
 
   return (
     <>
-      {previewBlocks.map(({ link, el }) => (
-        <PreviewBlock key={link.dxn} link={link} el={el} />
+      {widgets.map(({ id, root, Component, props }) => (
+        <div key={id}>{createPortal(<Component {...props} />, root)}</div>
       ))}
     </>
   );
@@ -264,15 +247,6 @@ const MarkdownEditorBlocks = (_props: MarkdownEditorBlocksProps) => {
 
 MarkdownEditorBlocks.displayName = MARKDOWN_EDITOR_BLOCKS_NAME;
 
-const PreviewBlock = ({ el, link }: PreviewBlock) => {
-  const client = useClient();
-  const dxn = URI.make(link.dxn);
-  const subject = client.graph.makeRef(dxn).target;
-  const data = useMemo(() => ({ subject }), [subject]);
-
-  return createPortal(<Surface.Surface type={AppSurface.CardContent} data={data} limit={1} />, el);
-};
-
 //
 // MarkdownEditor
 //
@@ -284,7 +258,7 @@ export const MarkdownEditor = {
   Blocks: MarkdownEditorBlocks,
 };
 
-export type { MarkdownEditorContentProps, MarkdownEditorToolbarProps, MarkdownEditorBlocksProps };
+export type { MarkdownEditorBlocksProps, MarkdownEditorContentProps, MarkdownEditorToolbarProps };
 
 /** @deprecated Use `MarkdownEditorProviderProps`. */
 export type MarkdownEditorRootProps = MarkdownEditorProviderProps;

package/src/components/MarkdownEditor/MarkdownEditorContent.tsx

@@ -19,15 +19,15 @@ import {
   type EditorSelectionState,
   type EditorStateStore,
   type ThemeExtensionsOptions,
-  mobileSlots,
   createBasicExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
-  dropFile,
   documentSlots,
+  dropFile,
+  editorClassNames,
   formattingListener,
+  mobileSlots,
   processEditorPayload,
-  editorClassNames,
   scrollbarAutohide,
 } from '@dxos/ui-editor';
 import { type EditorViewMode } from '@dxos/ui-editor/types';

package/src/components/PreviewComponent/PreviewComponent.tsx

@@ -0,0 +1,195 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation, Paths } from '@dxos/app-toolkit';
+import { AppSurface } from '@dxos/app-toolkit/ui';
+import { Obj } from '@dxos/echo';
+import { URI } from '@dxos/keys';
+import { useClient } from '@dxos/react-client';
+import { Icon, IconButton } from '@dxos/react-ui';
+import { ResizeHandle, type Size, resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';
+import { type XmlWidgetProps } from '@dxos/ui-editor';
+
+export type PreviewComponentProps = XmlWidgetProps<{
+  label: string;
+  dxn: string;
+  block?: boolean;
+  suggest?: boolean;
+  onOpen?: (dxn: URI.URI) => void;
+}>;
+
+// Persisted height (px) lives in the image alt text after the label, Obsidian-style: `![label|320](dxn)`.
+const HEIGHT_PATTERN = /^(.*)\|(\d+)$/;
+
+const parseEmbedLabel = (alt: string): { baseLabel: string; height?: number } => {
+  const match = HEIGHT_PATTERN.exec(alt ?? '');
+  if (match) {
+    const height = Number.parseInt(match[2], 10);
+    if (Number.isFinite(height) && height > 0) {
+      return { baseLabel: match[1], height };
+    }
+  }
+  return { baseLabel: alt ?? '' };
+};
+
+const formatEmbedLabel = (baseLabel: string, height?: number): string =>
+  height != null ? `${baseLabel}|${height}` : baseLabel;
+
+const MIN_SIZE = 6;
+const FALLBACK_SIZE = 320;
+
+/** Scroll the element's top into view (honoring its `scroll-margin`) only if that top is not already visible. */
+const scrollTopIntoViewIfNeeded = (element: HTMLElement): void => {
+  let parent = element.parentElement;
+  while (parent) {
+    const { overflowY } = getComputedStyle(parent);
+    if (
+      (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') &&
+      parent.scrollHeight > parent.clientHeight
+    ) {
+      break;
+    }
+    parent = parent.parentElement;
+  }
+  const elementTop = element.getBoundingClientRect().top;
+  const viewTop = parent ? parent.getBoundingClientRect().top : 0;
+  const viewBottom = parent ? parent.getBoundingClientRect().bottom : window.innerHeight;
+  if (elementTop < viewTop || elementTop > viewBottom) {
+    element.scrollIntoView({ block: 'start', inline: 'nearest' });
+  }
+};
+
+/**
+ * Registry-backed block widget for URL-scheme preview slots.
+ * Replaces the addBlockContainer callback pattern.
+ * Used as the Component entry in a urlSchemes XmlWidgetDef.
+ */
+export const PreviewComponent = ({ dxn, label: alt, onOpen, view, range }: PreviewComponentProps) => {
+  const client = useClient();
+  const { invokePromise } = useOperationInvoker();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const uri = dxn ? URI.make(dxn) : undefined;
+  const subject = uri ? client.graph.makeRef<Obj.Unknown>(uri).target : undefined;
+
+  // px per rem; ResizeHandle works in rem while the persisted height is in px.
+  const remSize = useMemo(() => parseFloat(getComputedStyle(document.documentElement).fontSize) || 16, []);
+  const { height } = parseEmbedLabel(alt);
+
+  // `min-content` keeps the embed at its intrinsic height until the user resizes it; the handle then
+  // measures the rendered box and switches to an explicit height.
+  const [size, setSize] = useState<Size>(height != null ? height / remSize : 'min-content');
+
+  // Tell the surface it is sized by its container (vs. intrinsic) so content (e.g. an image) can fit.
+  const extrinsic = size !== 'min-content';
+  const data = useMemo(
+    () => (subject ? { subject, attendableId: dxn, extrinsic } : undefined),
+    [subject, dxn, extrinsic],
+  );
+  useEffect(() => {
+    setSize(height != null ? height / remSize : 'min-content');
+  }, [height, remSize]);
+
+  // Persist the height (px) into the alt text on drop by rewriting the image node in the source. The
+  // node bounds and base label are re-derived from the live document (the captured `range`/`label`
+  // can lag a prior edit before React re-renders the widget). When the same object is transcluded
+  // more than once, the node whose start is NEAREST the widget's range is chosen so a duplicate
+  // embed isn't rewritten by mistake.
+  const handleResize = useCallback(
+    (next: Size, commit?: boolean) => {
+      setSize(next);
+      if (!commit || typeof next !== 'number' || !view) {
+        return;
+      }
+      const doc = view.state.doc.toString();
+      const marker = `](${dxn})`;
+      let open = -1;
+      let close = -1;
+      for (let at = doc.indexOf(marker); at >= 0; at = doc.indexOf(marker, at + marker.length)) {
+        const start = doc.lastIndexOf('![', at);
+        if (start >= 0 && (open < 0 || Math.abs(start - range.from) < Math.abs(open - range.from))) {
+          open = start;
+          close = at;
+        }
+      }
+      if (open < 0) {
+        return;
+      }
+      const { baseLabel: currentBaseLabel } = parseEmbedLabel(doc.slice(open + 2, close));
+      const insert = `![${formatEmbedLabel(currentBaseLabel, Math.round(next * remSize))}](${dxn})`;
+      view.dispatch({ changes: { from: open, to: close + marker.length, insert } });
+      // After the resized box has laid out, bring its top into frame — but only if that top scrolled
+      // out of view. Scroll the element itself (not the CM view) so it works whichever ancestor
+      // actually scrolls (cm-scroller or an outer panel); defer a frame so the new height applies first.
+      requestAnimationFrame(() => {
+        if (containerRef.current) {
+          scrollTopIntoViewIfNeeded(containerRef.current);
+        }
+      });
+    },
+    [view, range, dxn, remSize],
+  );
+
+  // Open the referenced object: defer to the caller's handler when provided, else navigate to it.
+  const handleOpen = useCallback(() => {
+    if (!uri || !subject) {
+      return;
+    }
+    if (onOpen) {
+      onOpen(uri);
+    } else {
+      void invokePromise?.(LayoutOperation.Open, {
+        subject: [Paths.getObjectPathFromObject(subject)],
+        navigation: 'immediate',
+      });
+    }
+  }, [uri, subject, onOpen, invokePromise]);
+
+  if (!uri || !subject || !data) {
+    return null;
+  }
+
+  const objectLabel = Obj.getLabel(subject);
+  const objectIcon = Obj.getIcon(subject);
+
+  // Frame transcluded block embeds so they read as a self-contained card within the document flow.
+  // The clip/border live on an inner element so they don't clip the resize handle (which straddles the
+  // bottom edge); the inner grid stretches the surface to fill the resizable box, overriding any
+  // intrinsic aspect.
+  return (
+    <div
+      className='relative grid scroll-mt-16'
+      style={sizeStyle(size, 'vertical')}
+      {...resizeAttributes}
+      ref={containerRef}
+    >
+      <div className='grid overflow-hidden border border-subdued-separator rounded-md'>
+        <Surface.Surface type={AppSurface.Section} data={data} limit={1} />
+      </div>
+      <div className='absolute top-1 right-1 flex items-center justify-end gap-1'>
+        <span className='dx-tag dx-tag--neutral flex items-center gap-1'>
+          {objectIcon && <Icon icon={objectIcon.icon} size={4} />}
+          {objectLabel}
+        </span>
+        <IconButton
+          density='sm'
+          icon='ph--arrow-square-out--regular'
+          iconOnly
+          label='Open'
+          variant='ghost'
+          onClick={handleOpen}
+        />
+      </div>
+      <ResizeHandle
+        side='block-end'
+        fallbackSize={FALLBACK_SIZE}
+        minSize={MIN_SIZE}
+        size={size}
+        onSizeChange={handleResize}
+      />
+    </div>
+  );
+};

package/src/components/PreviewComponent/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './PreviewComponent';

package/src/components/index.ts

@@ -2,8 +2,5 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type ComponentType, lazy } from 'react';
-
 export * from './MarkdownEditor';
-
-export const MarkdownSettings: ComponentType<any> = lazy(() => import('./MarkdownSettings'));
+export * from './PreviewComponent';

package/src/containers/MarkdownArticle/MarkdownArticle.tsx

@@ -19,8 +19,8 @@ import { Text } from '@dxos/schema';
 
 import {
   MarkdownEditor,
-  MarkdownEditorProvider,
   type MarkdownEditorContentProps,
+  MarkdownEditorProvider,
   type MarkdownEditorProviderProps,
 } from '#components';
 import { useLinkQuery } from '#hooks';
@@ -90,7 +90,7 @@ export const MarkdownArticle = forwardRef<HTMLDivElement, MarkdownArticleProps>(
     }, [db, upload]);
 
     // Query for @ refs.
-    const handleLinkQuery = useLinkQuery(db);
+    const handleLinkQuery = useLinkQuery(db, Obj.isObject(object) ? object : undefined);
 
     // Open linked objects.
     const { invokePromise } = useOperationInvoker();
@@ -129,7 +129,7 @@ export const MarkdownArticle = forwardRef<HTMLDivElement, MarkdownArticleProps>(
           <Editor.Root {...editorRootProps}>
             <Panel.Root role={role} ref={forwardedRef}>
               {settings.toolbar && (
-                <Panel.Toolbar classNames='bg-toolbar-surface'>
+                <Panel.Toolbar>
                   <MarkdownEditor.Toolbar classNames='dx-document' customActions={customActions} />
                 </Panel.Toolbar>
               )}

package/src/containers/MarkdownCard/MarkdownCard.tsx

@@ -29,7 +29,7 @@ export const MarkdownCard = ({ subject }: MarkdownCardProps) => {
   return (
     <Card.Body>
       {snippet && (
-        <Card.Section className='relative'>
+        <Card.Section className='aspect-square relative'>
           <Card.Row fullWidth>
             <MarkdownEditorProvider id={subject.id} viewMode='readonly' extensions={extensions}>
               {(editorRootProps) => (

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

@@ -11,7 +11,7 @@ import { translations } from '#translations';
 import { MarkdownSettings } from './MarkdownSettings';
 
 const meta = {
-  title: 'plugins/plugin-markdown/components/MarkdownSettings',
+  title: 'plugins/plugin-markdown/containers/MarkdownSettings',
   tags: ['settings'],
   component: MarkdownSettings,
   decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],

package/src/containers/MarkdownSettings/MarkdownSettings.tsx

@@ -0,0 +1,54 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { Input } from '@dxos/react-ui';
+import { Form, type FormFieldRendererProps, FormRow } from '@dxos/react-ui-form';
+
+import { meta } from '#meta';
+import { Markdown } from '#types';
+
+export type MarkdownSettingsProps = AppSurface.SettingsProps<Markdown.Settings>;
+
+export const MarkdownSettings = ({ settings, onSettingsChange }: MarkdownSettingsProps) => {
+  return (
+    <Form.Root
+      variant='settings'
+      schema={Markdown.Settings}
+      readonly={!onSettingsChange}
+      values={settings}
+      onValuesChanged={(values) => onSettingsChange?.((current) => ({ ...current, ...values }))}
+    >
+      <Form.Viewport scroll>
+        <Form.Content>
+          <Form.Section title={meta.profile.name}>
+            <Form.FieldSet
+              fieldMap={{ snippets: SnippetsField }}
+              filter={(properties) =>
+                settings.debug ? properties : properties.filter((property) => property.name !== 'snippets')
+              }
+            />
+          </Form.Section>
+        </Form.Content>
+      </Form.Viewport>
+    </Form.Root>
+  );
+};
+
+/** Multi-line snippet editor; replaces the single-line text input the schema would otherwise render. */
+const SnippetsField = ({ type, readonly, onValueChange, onBlur, ...props }: FormFieldRendererProps<string>) => (
+  <FormRow<string> readonly={readonly} {...props}>
+    {({ value }) => (
+      <Input.TextArea
+        disabled={!!readonly}
+        rows={5}
+        value={value ?? ''}
+        onBlur={onBlur}
+        onChange={(event) => onValueChange(type, event.target.value)}
+      />
+    )}
+  </FormRow>
+);

package/src/containers/index.ts

@@ -9,3 +9,4 @@ export type { MarkdownArticleProps } from './MarkdownArticle';
 export const MarkdownCard: ComponentType<any> = lazy(() => import('./MarkdownCard'));
 export const EditableMarkdownCard: ComponentType<any> = lazy(() => import('./EditableMarkdownCard'));
 export const MarkdownArticle: ComponentType<any> = lazy(() => import('./MarkdownArticle'));
+export const MarkdownSettings: ComponentType<any> = lazy(() => import('./MarkdownSettings'));

package/src/hooks/useEditorMenuOptions.ts

@@ -39,7 +39,7 @@ export const useEditorMenuOptions = ({
 
         case '/':
         default: {
-          return filterMenuGroups([formattingCommands, linkSlashCommands, ...(slashCommandGroups ?? [])], (item) =>
+          return filterMenuGroups([linkSlashCommands, formattingCommands, ...(slashCommandGroups ?? [])], (item) =>
             text ? toLocalizedString(item.label, t).toLowerCase().includes(text.toLowerCase()) : true,
           );
         }

package/src/hooks/useExtensions.tsx

@@ -8,21 +8,23 @@ import { useMemo } from 'react';
 import { Paths } from '@dxos/app-toolkit';
 import { debounceAndThrottle } from '@dxos/async';
 import { Obj } from '@dxos/echo';
-import { createDocAccessor } from '@dxos/echo-client';
+import { Doc } from '@dxos/echo-doc';
 import { invariant } from '@dxos/invariant';
 import { getSpace, useObject } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { useThemeContext } from '@dxos/react-ui';
-import { selectionAspect, type ViewStateManager } from '@dxos/react-ui-attention';
+import { type ViewStateManager, selectionAspect } from '@dxos/react-ui-attention';
 import { Text } from '@dxos/schema';
 import { Domino } from '@dxos/ui';
 import {
+  AnchorWidget,
   Cursor,
   type EditorStateStore,
   EditorView,
   type Extension,
   InputModeExtensions,
-  type PreviewOptions,
+  type XmlWidgetProps,
+  type XmlWidgetState,
   createDataExtensions,
   decorateMarkdown,
   documentId,
@@ -30,16 +32,17 @@ import {
   formattingKeymap,
   linkTooltip,
   listener,
-  preview,
   replacer,
   selectionState,
   snippets,
+  xmlTags,
 } from '@dxos/ui-editor';
 import { type EditorViewMode, type RenderCallback } from '@dxos/ui-editor/types';
 import { isTruthy, safeUrl } from '@dxos/util';
 
 import { Markdown } from '#types';
 
+import { PreviewComponent } from '../components/PreviewComponent/PreviewComponent';
 import { setFallbackName } from '../util';
 
 export type DocumentType = Markdown.Document | Text.Text | { id: string; text: string };
@@ -53,7 +56,7 @@ export type ExtensionsOptions = {
   editable?: boolean;
   viewState?: ViewStateManager;
   editorStateStore?: EditorStateStore;
-  previewOptions?: PreviewOptions;
+  setWidgets?: (widgets: XmlWidgetState[]) => void;
   platform?: 'mobile' | 'desktop';
   /** Callback when an internal link is clicked. */
   onSelectObject?: (objectId: string) => void;
@@ -68,7 +71,7 @@ export const useExtensions = ({
   viewMode,
   viewState,
   editorStateStore,
-  previewOptions,
+  setWidgets,
   onSelectObject,
 }: ExtensionsOptions): Extension[] => {
   const { platform } = useThemeContext();
@@ -79,7 +82,7 @@ export const useExtensions = ({
   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).
+  // Get the actual live object target via .target (needed for Doc.createAccessor).
   const target = contentRef?.target ?? (Obj.instanceOf(Text.Text, object) ? object : undefined);
 
   // TODO(wittjosiah): Autocomplete is not working and this query is causing performance issues.
@@ -96,7 +99,7 @@ export const useExtensions = ({
         compact,
         viewMode,
         viewState,
-        previewOptions,
+        setWidgets,
         platform,
         onSelectObject,
       }),
@@ -106,7 +109,7 @@ export const useExtensions = ({
       compact,
       viewMode,
       viewState,
-      previewOptions,
+      setWidgets,
       settings,
       settings?.debug,
       settings?.editorInputMode,
@@ -125,7 +128,7 @@ export const useExtensions = ({
         target &&
           createDataExtensions({
             id,
-            text: createDocAccessor(target, ['content']),
+            text: Doc.createAccessor(target, ['content']),
             messenger: space,
             identity,
           }),
@@ -156,7 +159,7 @@ const createBaseExtensions = ({
   compact,
   viewMode,
   viewState,
-  previewOptions,
+  setWidgets,
   platform,
 }: ExtensionsOptions): Extension[] => {
   const extensions: Extension[] = [
@@ -177,9 +180,26 @@ const createBaseExtensions = ({
           numberedHeadings: settings?.numberedHeadings ? { from: 2 } : undefined,
           // TODO(wittjosiah): For internal links render the label of the object.
           renderLinkButton: onSelectObject && createRenderLink(onSelectObject),
+          // xmlTags() handles dxn:/echo: links via url-scheme widgets; skip here to avoid double-processing.
+          skip: ({ url }) => url.startsWith('dxn:') || url.startsWith('echo:'),
         }),
         linkTooltip(renderLinkTooltip),
-        preview(previewOptions),
+        xmlTags({
+          registry: {
+            'dxn-preview': {
+              block: true,
+              urlSchemes: ['dxn:', 'echo:'],
+              Component: PreviewComponent,
+            },
+            'link-preview': {
+              block: false,
+              urlSchemes: ['dxn:', 'echo:'],
+              factory: ({ label, dxn }: XmlWidgetProps<{ label: string; dxn: string }>) =>
+                label && dxn ? new AnchorWidget(label, dxn) : null,
+            },
+          },
+          setWidgets,
+        }),
         replacer(),
       ],
     );

package/src/hooks/useLinkQuery.ts

@@ -14,7 +14,7 @@ import { insertAtCursor, insertAtLineStart } from '@dxos/ui-editor';
 
 import { Markdown } from '../types';
 
-export const useLinkQuery = (db: Database.Database | undefined) => {
+export const useLinkQuery = (db: Database.Database | undefined, current?: Obj.Unknown) => {
   const { t } = useTranslation();
 
   const filter = useMemo(
@@ -41,7 +41,9 @@ export const useLinkQuery = (db: Database.Database | undefined) => {
 
       const items =
         results
-          ?.filter((object) => toLocalizedString(getLabel(object), t).toLowerCase().includes(name))
+          // Exclude the current document; it cannot link to itself.
+          ?.filter((object) => object.id !== current?.id)
+          .filter((object) => toLocalizedString(getLabel(object), t).toLowerCase().includes(name))
           .map((object: Obj.Unknown): EditorMenuItem => {
             const type = Obj.getType(object);
             const icon = type
@@ -87,7 +89,7 @@ export const useLinkQuery = (db: Database.Database | undefined) => {
         { id: 'create', items: [createItem] },
       ];
     },
-    [db, filter, t],
+    [db, filter, t, current],
   );
 
   return handleLinkQuery;

package/src/index.ts

@@ -2,9 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './blueprints';
+export * from './skills';
 export * from './meta';
 export * from './operations';
-export * from './paths';
 export * from './types';
 export * from './util';