@dxos/plugin-markdown 0.8.3-main.672df60 → 0.8.3-staging.0fa589b

package/dist/lib/node/{MarkdownContainer-BZK66EQD.cjs → MarkdownContainer-KYGUEZIL.cjs}

@@ -26,30 +26,34 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var MarkdownContainer_BZK66EQD_exports = {};
-__export(MarkdownContainer_BZK66EQD_exports, {
+var MarkdownContainer_KYGUEZIL_exports = {};
+__export(MarkdownContainer_KYGUEZIL_exports, {
   DocumentEditor: () => DocumentEditor,
   default: () => MarkdownContainer_default
 });
-module.exports = __toCommonJS(MarkdownContainer_BZK66EQD_exports);
-var import_chunk_BBDDZLQH = require("./chunk-BBDDZLQH.cjs");
+module.exports = __toCommonJS(MarkdownContainer_KYGUEZIL_exports);
+var import_chunk_FU3XZZCO = require("./chunk-FU3XZZCO.cjs");
 var import_chunk_IFYSBQE5 = require("./chunk-IFYSBQE5.cjs");
-var import_chunk_G7RBJX22 = require("./chunk-G7RBJX22.cjs");
-var import_chunk_RQS4KBMG = require("./chunk-RQS4KBMG.cjs");
+var import_chunk_CJLYFGPI = require("./chunk-CJLYFGPI.cjs");
+var import_chunk_3HHV4MM6 = require("./chunk-3HHV4MM6.cjs");
 var import_chunk_ZU5OIHCY = require("./chunk-ZU5OIHCY.cjs");
 var import_tracking = require("@preact-signals/safe-react/tracking");
 var import_rx_react = require("@effect-rx/rx-react");
 var import_react = __toESM(require("react"));
+var import_react_dom = require("react-dom");
 var import_app_framework = require("@dxos/app-framework");
-var import_echo_schema = require("@dxos/echo-schema");
-var import_echo = require("@dxos/react-client/echo");
+var import_echo = require("@dxos/echo");
+var import_plugin_space = require("@dxos/plugin-space");
+var import_echo2 = require("@dxos/react-client/echo");
+var import_react_ui = require("@dxos/react-ui");
+var import_react_ui_editor = require("@dxos/react-ui-editor");
 var import_schema = require("@dxos/schema");
 var import_tracking2 = require("@preact-signals/safe-react/tracking");
 var import_react2 = __toESM(require("react"));
 var import_react_dropzone = require("react-dropzone");
 var import_invariant = require("@dxos/invariant");
-var import_react_ui = require("@dxos/react-ui");
-var import_react_ui_editor = require("@dxos/react-ui-editor");
+var import_react_ui2 = require("@dxos/react-ui");
+var import_react_ui_editor2 = require("@dxos/react-ui-editor");
 var import_react_ui_stack = require("@dxos/react-ui-stack");
 var import_util = require("@dxos/util");
 var import_view = require("@codemirror/view");
@@ -57,15 +61,15 @@ var import_effect = require("effect");
 var import_react3 = require("react");
 var import_app_framework2 = require("@dxos/app-framework");
 var import_invariant2 = require("@dxos/invariant");
-var import_react_ui_editor2 = require("@dxos/react-ui-editor");
+var import_react_ui_editor3 = require("@dxos/react-ui-editor");
 var import_react4 = __toESM(require("react"));
 var import_client = require("react-dom/client");
 var import_app_framework3 = require("@dxos/app-framework");
 var import_invariant3 = require("@dxos/invariant");
-var import_echo2 = require("@dxos/react-client/echo");
+var import_echo3 = require("@dxos/react-client/echo");
 var import_halo = require("@dxos/react-client/halo");
-var import_react_ui2 = require("@dxos/react-ui");
-var import_react_ui_editor3 = require("@dxos/react-ui-editor");
+var import_react_ui3 = require("@dxos/react-ui");
+var import_react_ui_editor4 = require("@dxos/react-ui-editor");
 var import_react_ui_theme = require("@dxos/react-ui-theme");
 var import_util2 = require("@dxos/util");
 var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-markdown/src/hooks/useSelectCurrentThread.tsx";
@@ -89,7 +93,7 @@ var useSelectCurrentThread = (editorView, documentId2) => {
           "'Editor view is not defined.'"
         ]
       });
-      const range = import_react_ui_editor2.Cursor.getRangeFromCursor(editorView.state, cursor);
+      const range = import_react_ui_editor3.Cursor.getRangeFromCursor(editorView.state, cursor);
       if (range) {
         const selection = editorView.state.selection.main.from !== range.from ? {
           anchor: range.from
@@ -102,7 +106,7 @@ var useSelectCurrentThread = (editorView, documentId2) => {
           })
         ];
         if (selection) {
-          effects.push(import_react_ui_editor2.setSelection.of({
+          effects.push(import_react_ui_editor3.setSelection.of({
             current: documentId2
           }));
         }
@@ -121,15 +125,92 @@ var useSelectCurrentThread = (editorView, documentId2) => {
   (0, import_app_framework2.useIntentResolver)(import_chunk_ZU5OIHCY.MARKDOWN_PLUGIN, scrollIntoViewResolver);
 };
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-markdown/src/components/MarkdownEditor/MarkdownEditor.tsx";
-var MarkdownEditor = ({ id, role = "article", initialValue, extensions, extensionProviders, scrollPastEnd, toolbar, customActions, viewMode, editorStateStore, onFileUpload, onViewModeChange }) => {
+var MarkdownEditor = ({ extensions: _extensions, slashCommandGroups, onLinkQuery, ...props }) => {
   var _effect = (0, import_tracking2.useSignals)();
   try {
-    const { t } = (0, import_react_ui.useTranslation)(import_chunk_ZU5OIHCY.MARKDOWN_PLUGIN);
-    const { themeMode } = (0, import_react_ui.useThemeContext)();
-    const toolbarState = (0, import_react_ui_editor.useEditorToolbarState)({
+    const { t } = (0, import_react_ui2.useTranslation)();
+    const viewRef = (0, import_react2.useRef)();
+    const getMenu = (0, import_react2.useCallback)((trigger, query) => {
+      switch (trigger) {
+        case "@":
+          return onLinkQuery?.(query) ?? [];
+        case "/":
+        default:
+          return (0, import_react_ui_editor2.filterItems)([
+            import_react_ui_editor2.coreSlashCommands,
+            import_react_ui_editor2.linkSlashCommands,
+            ...slashCommandGroups ?? []
+          ], (item) => query ? (0, import_react_ui2.toLocalizedString)(item.label, t).toLowerCase().includes(query.toLowerCase()) : true);
+      }
+    }, [
+      onLinkQuery,
+      slashCommandGroups
+    ]);
+    const options = (0, import_react2.useMemo)(() => {
+      const trigger = onLinkQuery ? [
+        "/",
+        "@"
+      ] : [
+        "/"
+      ];
+      return {
+        viewRef,
+        trigger,
+        placeholder: {
+          delay: 3e3,
+          content: () => {
+            return (0, import_react_ui_editor2.createElement)("div", void 0, [
+              (0, import_react_ui_editor2.createElement)("span", {
+                text: "Press"
+              }),
+              ...trigger.map((text) => (0, import_react_ui_editor2.createElement)("span", {
+                className: "border border-separator rounded-sm mx-1 px-1.5 pt-[1px] pb-[2px]",
+                text
+              })),
+              (0, import_react_ui_editor2.createElement)("span", {
+                text: "for commands."
+              })
+            ]);
+          }
+        },
+        getMenu
+      };
+    }, [
+      getMenu
+    ]);
+    const { commandMenu, groupsRef, currentItem, onSelect, ...refPopoverProps } = (0, import_react_ui_editor2.useCommandMenu)(options);
+    const extensions = (0, import_react2.useMemo)(() => [
+      _extensions,
+      commandMenu
+    ].filter(import_util.isNotFalsy), [
+      _extensions,
+      commandMenu
+    ]);
+    return /* @__PURE__ */ import_react2.default.createElement(import_react_ui_editor2.RefPopover, {
+      modal: false,
+      ...refPopoverProps
+    }, /* @__PURE__ */ import_react2.default.createElement(MarkdownEditorImpl, {
+      ref: viewRef,
+      ...props,
+      extensions
+    }), /* @__PURE__ */ import_react2.default.createElement(import_react_ui_editor2.CommandMenu, {
+      groups: groupsRef.current,
+      currentItem,
+      onSelect
+    }));
+  } finally {
+    _effect.f();
+  }
+};
+var MarkdownEditorImpl = /* @__PURE__ */ (0, import_react2.forwardRef)(({ id, role = "article", initialValue, customActions, editorStateStore, extensions, extensionProviders, scrollPastEnd, toolbar, viewMode, onFileUpload, onViewModeChange }, forwardedRef) => {
+  var _effect = (0, import_tracking2.useSignals)();
+  try {
+    const { t } = (0, import_react_ui2.useTranslation)(import_chunk_ZU5OIHCY.MARKDOWN_PLUGIN);
+    const { themeMode } = (0, import_react_ui2.useThemeContext)();
+    const toolbarState = (0, import_react_ui_editor2.useEditorToolbarState)({
       viewMode
     });
-    const formattingObserver = (0, import_react_ui_editor.useFormattingState)(toolbarState);
+    const formattingObserver = (0, import_react_ui_editor2.useFormattingState)(toolbarState);
     const { scrollTo, selection } = (0, import_react2.useMemo)(() => editorStateStore?.getState(id) ?? {}, [
       id
     ]);
@@ -140,31 +221,31 @@ var MarkdownEditor = ({ id, role = "article", initialValue, extensions, extensio
       const file = files[0];
       const info = file && onFileUpload ? await onFileUpload(file) : void 0;
       if (info) {
-        (0, import_react_ui_editor.processEditorPayload)(view, {
+        (0, import_react_ui_editor2.processEditorPayload)(view, {
           type: "image",
           data: info.url
         });
       }
     };
-    const { parentRef, view: editorView, focusAttributes } = (0, import_react_ui_editor.useTextEditor)(() => ({
+    const { parentRef, view: editorView, focusAttributes } = (0, import_react_ui_editor2.useTextEditor)(() => ({
       initialValue,
       extensions: [
         formattingObserver,
-        (0, import_react_ui_editor.createBasicExtensions)({
+        (0, import_react_ui_editor2.createBasicExtensions)({
           readOnly: viewMode === "readonly",
           placeholder: t("editor placeholder"),
           scrollPastEnd: role === "section" ? false : scrollPastEnd
         }),
-        (0, import_react_ui_editor.createMarkdownExtensions)({
+        (0, import_react_ui_editor2.createMarkdownExtensions)({
           themeMode
         }),
-        (0, import_react_ui_editor.createThemeExtensions)({
+        (0, import_react_ui_editor2.createThemeExtensions)({
           themeMode,
           syntaxHighlighting: true,
-          slots: import_react_ui_editor.editorSlots
+          slots: import_react_ui_editor2.editorSlots
         }),
-        import_react_ui_editor.editorGutter,
-        role !== "section" && onFileUpload && (0, import_react_ui_editor.dropFile)({
+        import_react_ui_editor2.editorGutter,
+        role !== "section" && onFileUpload && (0, import_react_ui_editor2.dropFile)({
           onDrop: handleDrop
         }),
         providerExtensions,
@@ -186,6 +267,9 @@ var MarkdownEditor = ({ id, role = "article", initialValue, extensions, extensio
       extensions,
       providerExtensions
     ]);
+    (0, import_react2.useImperativeHandle)(forwardedRef, () => editorView, [
+      editorView
+    ]);
     useTest(editorView);
     useSelectCurrentThread(editorView, id);
     const { acceptedFiles, getInputProps, open } = (0, import_react_dropzone.useDropzone)({
@@ -212,7 +296,7 @@ var MarkdownEditor = ({ id, role = "article", initialValue, extensions, extensio
           });
           const info = await onFileUpload(file);
           if (info) {
-            (0, import_react_ui_editor.addLink)({
+            (0, import_react_ui_editor2.addLink)({
               url: info.url,
               image: true
             })(editorView);
@@ -227,7 +311,7 @@ var MarkdownEditor = ({ id, role = "article", initialValue, extensions, extensio
     const getView = (0, import_react2.useCallback)(() => {
       (0, import_invariant.invariant)(editorView, void 0, {
         F: __dxlog_file2,
-        L: 165,
+        L: 240,
         S: void 0,
         A: [
           "editorView",
@@ -251,7 +335,7 @@ var MarkdownEditor = ({ id, role = "article", initialValue, extensions, extensio
     ]);
     return /* @__PURE__ */ import_react2.default.createElement(import_react_ui_stack.StackItem.Content, {
       toolbar: !!toolbar
-    }, toolbar && /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui_editor.EditorToolbar, {
+    }, toolbar && /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui_editor2.EditorToolbar, {
       attendableId: id,
       role,
       state: toolbarState,
@@ -264,14 +348,14 @@ var MarkdownEditor = ({ id, role = "article", initialValue, extensions, extensio
       ref: parentRef,
       "data-testid": "composer.markdownRoot",
       "data-toolbar": toolbar ? "enabled" : "disabled",
-      className: (0, import_react_ui_editor.stackItemContentEditorClassNames)(role),
+      className: (0, import_react_ui_editor2.stackItemContentEditorClassNames)(role),
       "data-popover-collision-boundary": true,
       ...focusAttributes
     }));
   } finally {
     _effect.f();
   }
-};
+});
 var useTest = (view) => {
   (0, import_react2.useEffect)(() => {
     const composer = window.composer;
@@ -283,10 +367,10 @@ var useTest = (view) => {
   ]);
 };
 var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-markdown/src/extensions.tsx";
-var useExtensions = ({ document, id, text, settings, selectionManager, viewMode, editorStateStore }) => {
+var useExtensions = ({ document, id, text, settings, selectionManager, viewMode, editorStateStore, previewOptions }) => {
   const { dispatchPromise: dispatch } = (0, import_app_framework3.useIntentDispatcher)();
   const identity = (0, import_halo.useIdentity)();
-  const space = (0, import_echo2.getSpace)(document) ?? (0, import_echo2.getSpace)(text);
+  const space = (0, import_echo3.getSpace)(document) ?? (0, import_echo3.getSpace)(text);
   const baseExtensions = (0, import_react4.useMemo)(() => createBaseExtensions({
     document,
     id,
@@ -294,6 +378,7 @@ var useExtensions = ({ document, id, text, settings, selectionManager, viewMode,
     settings,
     selectionManager,
     viewMode,
+    previewOptions,
     dispatch
   }), [
     document,
@@ -301,6 +386,7 @@ var useExtensions = ({ document, id, text, settings, selectionManager, viewMode,
     text,
     viewMode,
     dispatch,
+    previewOptions,
     settings,
     settings.editorInputMode,
     settings.folding,
@@ -329,25 +415,25 @@ var useExtensions = ({ document, id, text, settings, selectionManager, viewMode,
   ]);
   return (0, import_react4.useMemo)(() => [
     // NOTE: Data extensions must be first so that automerge is updated before other extensions compute their state.
-    document && (0, import_react_ui_editor3.createDataExtensions)({
+    document && (0, import_react_ui_editor4.createDataExtensions)({
       id: document.id,
-      text: document.content.target && (0, import_echo2.createDocAccessor)(document.content.target, [
+      text: document.content.target && (0, import_echo3.createDocAccessor)(document.content.target, [
         "content"
       ]),
       space,
       identity
     }),
-    text && id && (0, import_react_ui_editor3.createDataExtensions)({
+    text && id && (0, import_react_ui_editor4.createDataExtensions)({
       id,
-      text: (0, import_echo2.createDocAccessor)(text, [
+      text: (0, import_echo3.createDocAccessor)(text, [
         "content"
       ]),
       space,
       identity
     }),
-    (0, import_react_ui_editor3.selectionState)(editorStateStore),
-    document && (0, import_react_ui_editor3.listener)({
-      onChange: (text2) => (0, import_chunk_G7RBJX22.setFallbackName)(document, text2)
+    (0, import_react_ui_editor4.selectionState)(editorStateStore),
+    document && (0, import_react_ui_editor4.listener)({
+      onChange: (text2) => (0, import_chunk_CJLYFGPI.setFallbackName)(document, text2)
     }),
     baseExtensions,
     pluginExtensions
@@ -362,16 +448,16 @@ var useExtensions = ({ document, id, text, settings, selectionManager, viewMode,
     identity
   ]);
 };
-var createBaseExtensions = ({ document, id, dispatch, settings, selectionManager, query, viewMode }) => {
+var createBaseExtensions = ({ document, id, dispatch, settings, selectionManager, query, viewMode, previewOptions }) => {
   const extensions = [
     selectionManager && selectionChange(selectionManager),
-    settings.editorInputMode && import_react_ui_editor3.InputModeExtensions[settings.editorInputMode],
-    settings.folding && (0, import_react_ui_editor3.folding)()
+    settings.editorInputMode && import_react_ui_editor4.InputModeExtensions[settings.editorInputMode],
+    settings.folding && (0, import_react_ui_editor4.folding)()
   ].filter(import_util2.isNotFalsy);
   if (viewMode !== "source") {
     extensions.push(...[
-      (0, import_react_ui_editor3.formattingKeymap)(),
-      (0, import_react_ui_editor3.decorateMarkdown)({
+      (0, import_react_ui_editor4.formattingKeymap)(),
+      (0, import_react_ui_editor4.decorateMarkdown)({
         selectionChangeDelay: 100,
         numberedHeadings: settings.numberedHeadings ? {
           from: 2
@@ -384,22 +470,22 @@ var createBaseExtensions = ({ document, id, dispatch, settings, selectionManager
               id2
             ],
             options: {
-              pivotId: document ? (0, import_echo2.fullyQualifiedId)(document) : id2
+              pivotId: document ? (0, import_echo3.fullyQualifiedId)(document) : id2
             }
           }));
         }) : void 0
       }),
-      (0, import_react_ui_editor3.linkTooltip)(renderLinkTooltip),
-      (0, import_react_ui_editor3.preview)()
+      (0, import_react_ui_editor4.linkTooltip)(renderLinkTooltip),
+      (0, import_react_ui_editor4.preview)(previewOptions)
     ]);
   }
   if (query) {
-    extensions.push((0, import_react_ui_editor3.autocomplete)({
+    extensions.push((0, import_react_ui_editor4.autocomplete)({
       onSearch: (text) => {
         return query.objects.map((object) => object.name?.length && object.id !== document?.id ? {
           label: object.name,
           // TODO(burdon): Factor out URL builder.
-          apply: `[${object.name}](/${(0, import_echo2.fullyQualifiedId)(object)})`
+          apply: `[${object.name}](/${(0, import_echo3.fullyQualifiedId)(object)})`
         } : void 0).filter(import_util2.isNotFalsy);
       }
     }));
@@ -407,7 +493,7 @@ var createBaseExtensions = ({ document, id, dispatch, settings, selectionManager
   if (settings.debug) {
     const items = settings.typewriter?.split(/[,\n]/) ?? "";
     if (items) {
-      extensions.push((0, import_react_ui_editor3.typewriter)({
+      extensions.push((0, import_react_ui_editor4.typewriter)({
         items
       }));
     }
@@ -415,10 +501,10 @@ var createBaseExtensions = ({ document, id, dispatch, settings, selectionManager
   return extensions;
 };
 var selectionChange = (selectionManager) => {
-  return import_react_ui_editor3.EditorView.updateListener.of((update) => {
+  return import_react_ui_editor4.EditorView.updateListener.of((update) => {
     if (update.selectionSet) {
-      const id = update.state.facet(import_react_ui_editor3.documentId);
-      const cursorConverter = update.state.facet(import_react_ui_editor3.Cursor.converter);
+      const id = update.state.facet(import_react_ui_editor4.documentId);
+      const cursorConverter = update.state.facet(import_react_ui_editor4.Cursor.converter);
       const selection = update.state.selection;
       const ranges = selection.ranges.map((range) => ({
         from: cursorConverter.toCursor(range.from),
@@ -440,7 +526,7 @@ var createLinkRenderer = (onSelectObject) => (el, { url }) => {
       const qualifiedId = url.split("/").at(-1);
       (0, import_invariant3.invariant)(qualifiedId, "Invalid link format.", {
         F: __dxlog_file3,
-        L: 281,
+        L: 287,
         S: void 0,
         A: [
           "qualifiedId",
@@ -457,7 +543,7 @@ var createLinkRenderer = (onSelectObject) => (el, { url }) => {
   renderRoot(el, /* @__PURE__ */ import_react4.default.createElement("a", {
     ...options,
     className: style.hover
-  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.Icon, {
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Icon, {
     icon: isInternal ? "ph--arrow-square-down--bold" : "ph--arrow-square-out--bold",
     size: 4,
     classNames: style.icon
@@ -470,14 +556,14 @@ var renderLinkTooltip = (el, { url }) => {
     rel: "noreferrer",
     target: "_blank",
     className: style.hover
-  }, web.origin, /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.Icon, {
+  }, web.origin, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Icon, {
     icon: "ph--arrow-square-out--bold",
     size: 4,
     classNames: style.icon
   })));
 };
 var renderRoot = (root, node) => {
-  (0, import_client.createRoot)(root).render(/* @__PURE__ */ import_react4.default.createElement(import_react_ui2.ThemeProvider, {
+  (0, import_client.createRoot)(root).render(/* @__PURE__ */ import_react4.default.createElement(import_react_ui3.ThemeProvider, {
     tx: import_react_ui_theme.defaultTx
   }, node));
   return root;
@@ -485,9 +571,25 @@ var renderRoot = (root, node) => {
 var MarkdownContainer = ({ id, role, object, settings, selectionManager, viewMode, editorStateStore, onViewModeChange }) => {
   var _effect = (0, import_tracking.useSignals)();
   try {
+    const { t } = (0, import_react_ui.useTranslation)();
     const scrollPastEnd = role === "article";
-    const doc = (0, import_echo_schema.isInstanceOf)(import_chunk_RQS4KBMG.DocumentType, object) ? object : void 0;
-    const text = (0, import_echo_schema.isInstanceOf)(import_schema.DataType.Text, object) ? object : void 0;
+    const doc = import_echo.Obj.instanceOf(import_chunk_3HHV4MM6.DocumentType, object) ? object : void 0;
+    const text = import_echo.Obj.instanceOf(import_schema.DataType.Text, object) ? object : void 0;
+    const [previewBlocks, setPreviewBlocks] = (0, import_react.useState)([]);
+    const previewOptions = (0, import_react.useMemo)(() => ({
+      addBlockContainer: (link, el) => {
+        setPreviewBlocks((prev) => [
+          ...prev,
+          {
+            link,
+            el
+          }
+        ]);
+      },
+      removeBlockContainer: (link) => {
+        setPreviewBlocks((prev) => prev.filter(({ link: prevLink }) => prevLink.ref !== link.ref));
+      }
+    }), []);
     const extensions = useExtensions({
       document: doc,
       text,
@@ -495,33 +597,85 @@ var MarkdownContainer = ({ id, role, object, settings, selectionManager, viewMod
       settings,
       selectionManager,
       viewMode,
-      editorStateStore
+      editorStateStore,
+      previewOptions
     });
-    if (doc) {
-      return /* @__PURE__ */ import_react.default.createElement(DocumentEditor, {
-        id: (0, import_echo.fullyQualifiedId)(object),
-        role,
-        document: doc,
-        extensions,
-        viewMode,
-        settings,
-        scrollPastEnd,
-        onViewModeChange
-      });
-    } else if (text) {
-      return /* @__PURE__ */ import_react.default.createElement(MarkdownEditor, {
-        id,
-        role,
-        initialValue: text.content,
-        extensions,
-        viewMode,
-        toolbar: settings.toolbar,
-        inputMode: settings.editorInputMode,
-        scrollPastEnd,
-        onViewModeChange
-      });
-    } else {
-      return /* @__PURE__ */ import_react.default.createElement(MarkdownEditor, {
+    const manager = (0, import_app_framework.usePluginManager)();
+    const resolve = (0, import_react.useCallback)((typename) => manager.context.getCapabilities(import_app_framework.Capabilities.Metadata).find(({ id: id2 }) => id2 === typename)?.metadata ?? {}, [
+      manager
+    ]);
+    const space = (0, import_echo2.getSpace)(object);
+    const objectForms = (0, import_app_framework.useCapabilities)(import_plugin_space.SpaceCapabilities.ObjectForm);
+    const filter = (0, import_react.useMemo)(() => import_echo.Filter.or(...objectForms.map((form) => import_echo.Filter.type(form.objectSchema))), [
+      objectForms
+    ]);
+    const onLinkQuery = (0, import_react.useCallback)(async (query) => {
+      const name = query?.startsWith("@") ? query.slice(1).toLowerCase() : query?.toLowerCase() ?? "";
+      const results = await space?.db.query(import_echo.Query.select(filter)).run();
+      const getLabel = (object2) => {
+        const type = import_echo.Obj.getTypename(object2);
+        const metadata = resolve(type);
+        return metadata.label?.(object2) || object2.name || [
+          "object name placeholder",
+          {
+            ns: type,
+            default: "New object"
+          }
+        ];
+      };
+      const items = results?.objects.filter((object2) => (0, import_react_ui.toLocalizedString)(getLabel(object2), t).toLowerCase().includes(name)).map((object2) => {
+        const metadata = resolve(import_echo.Obj.getTypename(object2));
+        const label = (0, import_react_ui.toLocalizedString)(getLabel(object2), t);
+        return {
+          id: object2.id,
+          label,
+          icon: metadata.icon,
+          onSelect: (view, head) => {
+            const link = `[${label}][${import_echo.Obj.getDXN(object2)}]`;
+            if (query?.startsWith("@")) {
+              (0, import_react_ui_editor.insertAtLineStart)(view, head, `!${link}
+`);
+            } else {
+              (0, import_react_ui_editor.insertAtCursor)(view, head, `${link} `);
+            }
+          }
+        };
+      }) ?? [];
+      return [
+        {
+          id: "echo",
+          items
+        }
+      ];
+    }, [
+      filter,
+      resolve,
+      space
+    ]);
+    const editor = doc ? /* @__PURE__ */ import_react.default.createElement(DocumentEditor, {
+      id: (0, import_echo2.fullyQualifiedId)(object),
+      role,
+      document: doc,
+      extensions,
+      viewMode,
+      settings,
+      scrollPastEnd,
+      onViewModeChange,
+      onLinkQuery: space ? onLinkQuery : void 0
+    }) : text ? /* @__PURE__ */ import_react.default.createElement(MarkdownEditor, {
+      id,
+      role,
+      initialValue: text.content,
+      extensions,
+      viewMode,
+      toolbar: settings.toolbar,
+      inputMode: settings.editorInputMode,
+      scrollPastEnd,
+      onViewModeChange,
+      onLinkQuery: space ? onLinkQuery : void 0
+    }) : (
+      // TODO(burdon): Normalize with above.
+      /* @__PURE__ */ import_react.default.createElement(MarkdownEditor, {
         id,
         role,
         initialValue: object.text,
@@ -530,9 +684,37 @@ var MarkdownContainer = ({ id, role, object, settings, selectionManager, viewMod
         toolbar: settings.toolbar,
         inputMode: settings.editorInputMode,
         scrollPastEnd,
-        onViewModeChange
-      });
-    }
+        onViewModeChange,
+        onLinkQuery: space ? onLinkQuery : void 0
+      })
+    );
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, editor, previewBlocks.map(({ link, el }) => /* @__PURE__ */ import_react.default.createElement(PreviewBlock, {
+      key: link.ref,
+      link,
+      el
+    })));
+  } finally {
+    _effect.f();
+  }
+};
+var PreviewBlock = ({ link, el }) => {
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    const echoDXN = (0, import_react.useMemo)(() => import_echo.DXN.parse(link.ref).asEchoDXN(), [
+      link.ref
+    ]);
+    const space = (0, import_echo2.useSpace)(echoDXN?.spaceId);
+    const [subject] = (0, import_echo2.useQuery)(space, import_echo.Query.select(import_echo.Filter.ids(echoDXN?.echoId ?? "")));
+    const data = (0, import_react.useMemo)(() => ({
+      subject
+    }), [
+      subject
+    ]);
+    return /* @__PURE__ */ (0, import_react_dom.createPortal)(/* @__PURE__ */ import_react.default.createElement(import_app_framework.Surface, {
+      role: "card--document",
+      data,
+      limit: 1
+    }), el);
   } finally {
     _effect.f();
   }
@@ -540,12 +722,12 @@ var MarkdownContainer = ({ id, role, object, settings, selectionManager, viewMod
 var DocumentEditor = ({ id, document: doc, settings, viewMode, ...props }) => {
   var _effect = (0, import_tracking.useSignals)();
   try {
-    const space = (0, import_echo.getSpace)(doc);
+    const space = (0, import_echo2.getSpace)(doc);
     (0, import_react.useEffect)(() => {
       if (typeof doc.fallbackName === "string") {
         return;
       }
-      const fallbackName = doc.content?.target?.content ? (0, import_chunk_G7RBJX22.getFallbackName)(doc.content.target.content) : void 0;
+      const fallbackName = doc.content?.target?.content ? (0, import_chunk_CJLYFGPI.getFallbackName)(doc.content.target.content) : void 0;
       if (fallbackName) {
         doc.fallbackName = fallbackName;
       }
@@ -598,4 +780,4 @@ var MarkdownContainer_default = MarkdownContainer;
 0 && (module.exports = {
   DocumentEditor
 });
-//# sourceMappingURL=MarkdownContainer-BZK66EQD.cjs.map
+//# sourceMappingURL=MarkdownContainer-KYGUEZIL.cjs.map