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

package/dist/lib/browser/{chunk-BX73DASG.mjs → chunk-B6S4YQWZ.mjs}

@@ -1,92 +1,116 @@
 import {
-  setFallbackName
-} from "./chunk-S45ULIOG.mjs";
+  Markdown_exports
+} from "./chunk-4CSOMIT4.mjs";
 import {
-  Markdown_exports,
   meta
-} from "./chunk-LMO5UVKL.mjs";
+} from "./chunk-RYZHVXZ5.mjs";
 
-// src/hooks/useLinkQuery.ts
-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 { Filter, Obj, Query, Type } from "@dxos/echo";
-import { EntityKind, SystemTypeAnnotation, getTypeAnnotation } from "@dxos/echo/internal";
-import { toLocalizedString, useTranslation } from "@dxos/react-ui";
-import { insertAtCursor, insertAtLineStart } from "@dxos/ui-editor";
-var useLinkQuery = (db) => {
-  const { t } = useTranslation();
-  const manager = usePluginManager();
-  const resolve = useCallback((typename) => manager.capabilities.getAll(Common.Capability.Metadata).find(({ id }) => id === typename)?.metadata ?? {}, [
-    manager
-  ]);
-  const filter = useMemo(() => Filter.or(...(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)))), [
-    db
-  ]);
-  const handleLinkQuery = useCallback(async (query) => {
-    const name = query?.startsWith("@") ? query.slice(1).toLowerCase() : query?.toLowerCase() ?? "";
-    const results = await db?.query(Query.select(filter)).run();
-    const getLabel = (object) => {
-      const label = Obj.getLabel(object);
-      if (label) {
-        return label;
-      }
-      const type = Obj.getTypename(object);
-      const metadata = resolve(type);
-      return metadata.label?.(object) || [
-        "object name placeholder",
-        {
-          ns: type,
-          default: "New object"
+// src/util.tsx
+import { debounce } from "@dxos/async";
+import { Obj } from "@dxos/echo";
+var isEditorModel = (data) => data && typeof data === "object" && "id" in data && typeof data.id === "string" && "text" in data && typeof data.text === "string";
+var isMarkdownProperties = (data) => Obj.isObject(data) ? true : data && typeof data === "object" ? "title" in data && typeof data.title === "string" : false;
+var nonTitleChars = /[^\w ]/g;
+var skipPatterns = [
+  /^!\[/,
+  /^---\s*$/,
+  /^```/,
+  /^\s*$/
+];
+var titlePatterns = [
+  /^#{1,6}\s+(.+)/
+];
+var getFallbackName = (content = "") => {
+  const len = content.length;
+  let i = 0;
+  while (i < len) {
+    let lineEnd = i;
+    while (lineEnd < len && content[lineEnd] !== "\n") {
+      lineEnd++;
+    }
+    const line = content.slice(i, lineEnd).trim();
+    i = lineEnd + 1;
+    if (skipPatterns.some((pattern) => pattern.test(line))) {
+      continue;
+    }
+    for (const pattern of titlePatterns) {
+      const match = pattern.exec(line);
+      if (match) {
+        const text2 = match[1].replaceAll(nonTitleChars, "").trim();
+        if (text2.length > 0) {
+          return text2;
         }
-      ];
-    };
-    const items = results?.filter((object) => toLocalizedString(getLabel(object), t).toLowerCase().includes(name)).map((object) => {
-      const metadata = resolve(Obj.getTypename(object));
-      const label = toLocalizedString(getLabel(object), t);
-      return {
-        id: object.id,
-        label,
-        icon: metadata.icon,
-        onSelect: ({ view, head }) => {
-          const link = `[${label}](${Obj.getDXN(object)})`;
-          if (query?.startsWith("@")) {
-            insertAtLineStart(view, head, `!${link}
-`);
-          } else {
-            insertAtCursor(view, head, `${link} `);
+      }
+    }
+    const maxLen = 32;
+    const text = line.replaceAll(nonTitleChars, "").trim();
+    if (text.length > 0) {
+      if (text.length > maxLen) {
+        const words = text.split(/\s+/);
+        let result = "";
+        for (const word of words) {
+          const next = result.length === 0 ? word : result + " " + word;
+          if (next.length > maxLen) {
+            break;
           }
+          result = next;
         }
-      };
-    }) ?? [];
-    return [
-      {
-        id: "echo",
-        items
+        return result + "\u2026";
       }
-    ];
-  }, [
-    db,
-    filter,
-    resolve
-  ]);
-  return handleLinkQuery;
+      return text;
+    }
+  }
+  return "";
 };
+var getContentSnippet = (content = "", maxLines = 3) => {
+  const abstract = content.split("\n").filter((line) => !line.startsWith("!")).filter((line) => line.trim() !== "");
+  return abstract.slice(0, maxLines).join("\n") ?? "";
+};
+var setFallbackName = debounce((doc, content = "") => {
+  const name = getFallbackName(content);
+  if (doc.fallbackName !== name) {
+    Obj.change(doc, (d) => {
+      d.fallbackName = name;
+    });
+  }
+}, 200);
+var serializer = {
+  serialize: async ({ object }) => {
+    const { content } = await object.content.load();
+    return JSON.stringify({
+      name: object.name,
+      fallbackName: object.fallbackName,
+      content
+    });
+  },
+  deserialize: async ({ content: serialized }) => {
+    const { name, fallbackName, content } = JSON.parse(serialized);
+    return Markdown_exports.make({
+      name,
+      fallbackName,
+      content
+    });
+  }
+};
+
+// src/components/MarkdownEditor/MarkdownEditor.tsx
+import { createContext } from "@radix-ui/react-context";
+import React4, { useMemo as useMemo6, useState as useState2 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { Surface } from "@dxos/app-framework/ui";
+import { DXN } from "@dxos/keys";
+import { useClient } from "@dxos/react-client";
+import { EditorMenuProvider, useEditorMenu, useEditorToolbar } from "@dxos/react-ui-editor";
+import { isNonNullable } from "@dxos/util";
 
 // src/hooks/useEditorMenuOptions.ts
-import { useCallback as useCallback2, useMemo as useMemo2, useRef } from "react";
-import { toLocalizedString as toLocalizedString2, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { useCallback, useMemo, useRef } from "react";
+import { toLocalizedString, useTranslation } from "@dxos/react-ui";
 import { filterMenuGroups, formattingCommands, linkSlashCommands } from "@dxos/react-ui-editor";
 import { Domino } from "@dxos/ui";
 var useEditorMenuOptions = ({ editorView, slashCommandGroups, onLinkQuery }) => {
-  const { t } = useTranslation2(meta.id);
-  const getMenu = useCallback2(({ text, trigger }) => {
+  const { t } = useTranslation(meta.id);
+  const getMenu = useCallback(({ text, trigger }) => {
     switch (trigger) {
       case "@": {
         return onLinkQuery?.(text) ?? [];
@@ -97,7 +121,7 @@ var useEditorMenuOptions = ({ editorView, slashCommandGroups, onLinkQuery }) =>
           formattingCommands,
           linkSlashCommands,
           ...slashCommandGroups ?? []
-        ], (item) => text ? toLocalizedString2(item.label, t).toLowerCase().includes(text.toLowerCase()) : true);
+        ], (item) => text ? toLocalizedString(item.label, t).toLowerCase().includes(text.toLowerCase()) : true);
       }
     }
   }, [
@@ -105,7 +129,7 @@ var useEditorMenuOptions = ({ editorView, slashCommandGroups, onLinkQuery }) =>
     onLinkQuery
   ]);
   const viewRef = useRef(editorView);
-  return useMemo2(() => {
+  return useMemo(() => {
     const trigger = onLinkQuery ? [
       "/",
       "@"
@@ -116,7 +140,7 @@ var useEditorMenuOptions = ({ editorView, slashCommandGroups, onLinkQuery }) =>
       delay: 3e3,
       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 triggerEls = trigger.map((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;
       }
@@ -134,43 +158,38 @@ var useEditorMenuOptions = ({ editorView, slashCommandGroups, onLinkQuery }) =>
 };
 
 // src/hooks/useExtensions.tsx
-import React, { useMemo as useMemo3 } from "react";
-import { createRoot } from "react-dom/client";
-import { Common as Common2 } from "@dxos/app-framework";
-import { useOperationInvoker } from "@dxos/app-framework/react";
+import { useMemo as useMemo2 } from "react";
 import { debounceAndThrottle } from "@dxos/async";
 import { Obj as Obj2 } 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 { Text } from "@dxos/schema";
+import { Domino as Domino2 } from "@dxos/ui";
 import { Cursor, EditorView, InputModeExtensions, createDataExtensions, decorateMarkdown, documentId, folding, formattingKeymap, linkTooltip, listener, preview, replacer, selectionState, typewriter } from "@dxos/ui-editor";
-import { defaultTx } from "@dxos/ui-theme";
-import { isTruthy } from "@dxos/util";
+import { isTruthy, safeUrl } from "@dxos/util";
 var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-markdown/src/hooks/useExtensions.tsx";
-var useExtensions = ({ id, object, settings, selectionManager, viewMode, editorStateStore, previewOptions }) => {
-  const { invokePromise } = useOperationInvoker();
+var useExtensions = ({ id, object, settings, selectionManager, viewMode, editorStateStore, previewOptions, onSelectObject }) => {
   const identity = useIdentity();
   const space = getSpace(object);
   const contentRef = Obj2.instanceOf(Markdown_exports.Document, object) ? object.content : void 0;
   useObject(contentRef);
   const target = contentRef?.target ?? (Obj2.instanceOf(Text.Text, object) ? object : void 0);
-  const baseExtensions = useMemo3(() => createBaseExtensions({
+  const baseExtensions = useMemo2(() => createBaseExtensions({
     id,
     object,
     settings,
     selectionManager,
     viewMode,
     previewOptions,
-    invokePromise
+    onSelectObject
   }), [
     id,
     object,
     viewMode,
-    invokePromise,
     previewOptions,
+    onSelectObject,
     settings,
     settings?.debug,
     settings?.editorInputMode,
@@ -179,7 +198,7 @@ var useExtensions = ({ id, object, settings, selectionManager, viewMode, editorS
     settings?.typewriter,
     selectionManager
   ]);
-  return useMemo3(() => [
+  return useMemo2(() => [
     // TODO(burdon): Pass this in?
     // NOTE: Data extensions must be first so that automerge is updated before other extensions compute their state.
     target && createDataExtensions({
@@ -207,7 +226,7 @@ var useExtensions = ({ id, object, settings, selectionManager, viewMode, editorS
     baseExtensions
   ]);
 };
-var createBaseExtensions = ({ id, object, invokePromise, settings, selectionManager, viewMode, previewOptions }) => {
+var createBaseExtensions = ({ id, object, onSelectObject, settings, selectionManager, viewMode, previewOptions }) => {
   const extensions = [
     selectionManager && selectionChange(selectionManager),
     settings?.editorInputMode && InputModeExtensions[settings.editorInputMode],
@@ -221,16 +240,8 @@ var createBaseExtensions = ({ id, object, invokePromise, settings, selectionMana
         numberedHeadings: settings?.numberedHeadings ? {
           from: 2
         } : void 0,
-        // 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) => {
-          void invokePromise(Common2.LayoutOperation.Open, {
-            subject: [
-              targetId
-            ],
-            pivotId: object && Obj2.isObject(object) ? Obj2.getDXN(object).toString() : id
-          });
-        }) : void 0
+        // TODO(wittjosiah): For internal links render the label of the object.
+        renderLinkButton: onSelectObject && createRenderLink(onSelectObject)
       }),
       linkTooltip(renderLinkTooltip),
       preview(previewOptions),
@@ -248,32 +259,31 @@ var createBaseExtensions = ({ id, object, invokePromise, settings, selectionMana
   return extensions;
 };
 var selectionChange = (selectionManager) => {
-  return EditorView.updateListener.of(debounceAndThrottle((update) => {
+  const debouncedHandler = debounceAndThrottle((update) => {
+    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) => {
     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);
+      debouncedHandler(update);
     }
-  }, 100));
-};
-var 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"
+  });
 };
-var createLinkRenderer = (onSelectObject) => (el, { url }) => {
-  const isInternal = url.startsWith("/") || // TODO(wittjosiah): This should probably be parsed out on paste?
-  url.startsWith(window.location.origin);
-  const options = isInternal ? {
-    onClick: () => {
+var createRenderLink = (onSelectObject) => (el, { url }) => {
+  const isInternal = url.startsWith("/") || url.startsWith(window.location.origin);
+  const anchor = Domino2.of("a").classNames("dx-link dx-icon-inline ms-1").children(Domino2.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.", {
         F: __dxlog_file,
-        L: 237,
+        L: 219,
         S: void 0,
         A: [
           "qualifiedId",
@@ -281,56 +291,112 @@ var createLinkRenderer = (onSelectObject) => (el, { url }) => {
         ]
       });
       onSelectObject(qualifiedId);
-    }
-  } : {
-    href: url,
-    rel: "noreferrer",
-    target: "_blank"
-  };
-  renderRoot(el, /* @__PURE__ */ React.createElement("a", {
-    ...options,
-    className: style.hover
-  }, /* @__PURE__ */ React.createElement(Icon, {
-    icon: isInternal ? "ph--arrow-square-down--bold" : "ph--arrow-square-out--bold",
-    size: 4,
-    classNames: style.icon
-  })));
+    });
+  } else {
+    anchor.attributes({
+      href: url,
+      rel: "noreferrer",
+      target: "_blank"
+    });
+  }
+  el.appendChild(anchor.root);
 };
 var renderLinkTooltip = (el, { url }) => {
-  const web = new URL(url);
-  renderRoot(el, /* @__PURE__ */ React.createElement("a", {
+  el.appendChild(Domino2.of("a").attributes({
     href: url,
-    rel: "noreferrer",
     target: "_blank",
-    className: style.hover
-  }, web.origin, /* @__PURE__ */ React.createElement(Icon, {
-    icon: "ph--arrow-square-out--bold",
-    size: 4,
-    classNames: style.icon
-  })));
+    rel: "noreferrer"
+  }).classNames("dx-link flex items-center gap-2").text(safeUrl(url)?.origin ?? url).children(Domino2.svg("ph--arrow-square-out--regular")).root);
 };
-var renderRoot = (root, node) => {
-  createRoot(root).render(/* @__PURE__ */ React.createElement(ThemeProvider, {
-    tx: defaultTx
-  }, node));
-  return root;
+
+// src/hooks/useLinkQuery.ts
+import * as Option from "effect/Option";
+import { useCallback as useCallback2, useMemo as useMemo3 } from "react";
+import { usePluginManager } from "@dxos/app-framework/ui";
+import { AppCapabilities } from "@dxos/app-toolkit";
+import { Filter, Obj as Obj3, Query, Type } from "@dxos/echo";
+import { EntityKind, SystemTypeAnnotation, getTypeAnnotation } from "@dxos/echo/internal";
+import { toLocalizedString as toLocalizedString2, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { insertAtCursor, insertAtLineStart } from "@dxos/ui-editor";
+var useLinkQuery = (db) => {
+  const { t } = useTranslation2();
+  const manager = usePluginManager();
+  const resolve = useCallback2((typename) => manager.capabilities.getAll(AppCapabilities.Metadata).find(({ id }) => id === typename)?.metadata ?? {}, [
+    manager
+  ]);
+  const filter = useMemo3(() => Filter.or(...(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)))), [
+    db
+  ]);
+  const handleLinkQuery = useCallback2(async (query) => {
+    const name = query?.startsWith("@") ? query.slice(1).toLowerCase() : query?.toLowerCase() ?? "";
+    const results = await db?.query(Query.select(filter)).run();
+    const getLabel = (object) => {
+      const label = Obj3.getLabel(object);
+      if (label) {
+        return label;
+      }
+      const type = Obj3.getTypename(object);
+      const metadata = resolve(type);
+      return metadata.label?.(object) || [
+        "object name placeholder",
+        {
+          ns: type,
+          default: "New object"
+        }
+      ];
+    };
+    const items = results?.filter((object) => toLocalizedString2(getLabel(object), t).toLowerCase().includes(name)).map((object) => {
+      const metadata = resolve(Obj3.getTypename(object));
+      const label = toLocalizedString2(getLabel(object), t);
+      return {
+        id: object.id,
+        label,
+        icon: metadata.icon,
+        onSelect: ({ view, head }) => {
+          const link = `[${label}](${Obj3.getDXN(object)})`;
+          if (query?.startsWith("@")) {
+            insertAtLineStart(view, head, `!${link}
+`);
+          } else {
+            insertAtCursor(view, head, `${link} `);
+          }
+        }
+      };
+    }) ?? [];
+    return [
+      {
+        id: "echo",
+        items
+      }
+    ];
+  }, [
+    db,
+    filter,
+    resolve
+  ]);
+  return handleLinkQuery;
 };
 
 // src/hooks/useSelectCurrentThread.tsx
 import { EditorView as EditorView2 } from "@codemirror/view";
 import * as Effect from "effect/Effect";
 import { useMemo as useMemo4 } from "react";
-import { Common as Common3 } 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 as invariant2 } from "@dxos/invariant";
 import { OperationResolver } from "@dxos/operation";
 import { Cursor as Cursor2, setSelection } from "@dxos/ui-editor";
 var __dxlog_file2 = "/__w/dxos/dxos/packages/plugins/plugin-markdown/src/hooks/useSelectCurrentThread.tsx";
-var useSelectCurrentThread = (editorView, documentId2) => {
+var useSelectCurrentThread = (editorView, documentId2, attendableId) => {
   const scrollIntoViewHandler = useMemo4(() => OperationResolver.make({
-    operation: Common3.LayoutOperation.ScrollIntoView,
+    operation: LayoutOperation.ScrollIntoView,
     position: "hoist",
-    filter: (input) => !!editorView && input.subject === documentId2 && !!input.cursor,
+    filter: (input) => !!editorView && !!input.cursor && input.subject === attendableId,
     handler: (input) => Effect.sync(() => {
       invariant2(editorView, "Editor view is not defined.", {
         F: __dxlog_file2,
@@ -372,30 +438,21 @@ var useSelectCurrentThread = (editorView, documentId2) => {
     })
   }), [
     documentId2,
+    attendableId,
     editorView
   ]);
   useOperationResolver(meta.id, scrollIntoViewHandler);
 };
 
-// src/components/MarkdownEditor/MarkdownEditor.tsx
-import { createContext } from "@radix-ui/react-context";
-import React5, { useMemo as useMemo6, useState as useState2 } from "react";
-import { createPortal as createPortal2 } from "react-dom";
-import { Surface } from "@dxos/app-framework/react";
-import { DXN } from "@dxos/keys";
-import { useClient } from "@dxos/react-client";
-import { EditorMenuProvider, useEditorMenu, useEditorToolbar } from "@dxos/react-ui-editor";
-import { isNonNullable } from "@dxos/util";
-
 // src/components/MarkdownEditor/MarkdownEditorContent.tsx
 import { RegistryContext } from "@effect-atom/atom-react";
-import React2, { forwardRef, useCallback as useCallback3, useContext, useEffect, useImperativeHandle, useMemo as useMemo5 } from "react";
+import React, { forwardRef, useCallback as useCallback3, useContext, useEffect, useImperativeHandle, useMemo as useMemo5 } from "react";
 import { useThemeContext, useTranslation as useTranslation3 } from "@dxos/react-ui";
 import { useTextEditor } from "@dxos/react-ui-editor";
 import { createBasicExtensions, createMarkdownExtensions, createThemeExtensions, dropFile, editorSlots, formattingListener, processEditorPayload, stackItemContentEditorClassNames } from "@dxos/ui-editor";
 import { mx } from "@dxos/ui-theme";
 import { isTruthy as isTruthy2 } from "@dxos/util";
-var MarkdownEditorContent = /* @__PURE__ */ forwardRef(({ classNames, id, role, viewMode, initialValue, editorStateStore, toolbarState, extensions, scrollPastEnd, slots = editorSlots, onFileUpload }, forwardedRef) => {
+var MarkdownEditorContent = /* @__PURE__ */ forwardRef(({ classNames, id, attendableId, role, viewMode, initialValue, editorStateStore, toolbarState, extensions, scrollPastEnd, slots = editorSlots, onFileUpload }, forwardedRef) => {
   const { t } = useTranslation3(meta.id);
   const { themeMode } = useThemeContext();
   const registry = useContext(RegistryContext);
@@ -461,15 +518,15 @@ var MarkdownEditorContent = /* @__PURE__ */ forwardRef(({ classNames, id, role,
   useImperativeHandle(forwardedRef, () => editorView, [
     editorView
   ]);
-  useSelectCurrentThread(editorView, id);
+  useSelectCurrentThread(editorView, id, attendableId ?? id);
   useTest(editorView);
-  return /* @__PURE__ */ React2.createElement("div", {
+  return /* @__PURE__ */ React.createElement("div", {
+    ...focusAttributes,
     role: "none",
-    ref: parentRef,
     "data-testid": "composer.markdownRoot",
-    className: mx(stackItemContentEditorClassNames(role), classNames),
     "data-popover-collision-boundary": true,
-    ...focusAttributes
+    className: mx(stackItemContentEditorClassNames(role), classNames),
+    ref: parentRef
   });
 });
 var useTest = (view) => {
@@ -484,12 +541,12 @@ var useTest = (view) => {
 };
 
 // src/components/MarkdownEditor/MarkdownEditorToolbar.tsx
-import React4, { useCallback as useCallback4, useState } from "react";
+import React3, { useCallback as useCallback4, useState } from "react";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { EditorToolbar } from "@dxos/react-ui-editor";
 
 // src/components/MarkdownEditor/FileUpload.tsx
-import React3, { forwardRef as forwardRef2, useEffect as useEffect2, useImperativeHandle as useImperativeHandle2 } from "react";
+import React2, { forwardRef as forwardRef2, useEffect as useEffect2, useImperativeHandle as useImperativeHandle2 } from "react";
 import { createPortal } from "react-dom";
 import { useDropzone } from "react-dropzone";
 import { addLink } from "@dxos/ui-editor";
@@ -536,23 +593,22 @@ var FileUpload = /* @__PURE__ */ forwardRef2(({ editorView, onFileUpload }, forw
   if (!onFileUpload) {
     return null;
   }
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ createPortal(/* @__PURE__ */ React3.createElement("input", {
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ createPortal(/* @__PURE__ */ React2.createElement("input", {
     ref: inputRef
   }), document.body), " ");
 });
 
 // src/components/MarkdownEditor/MarkdownEditorToolbar.tsx
+import { composableProps } from "@dxos/ui-theme";
 var __dxlog_file3 = "/__w/dxos/dxos/packages/plugins/plugin-markdown/src/components/MarkdownEditor/MarkdownEditorToolbar.tsx";
-var MarkdownEditorToolbar = ({ classNames, id, role, state, editorView, customActions, onAction, onFileUpload, onViewModeChange }) => {
+var MarkdownEditorToolbar = ({ id, role, state, editorView, customActions, onAction, onFileUpload, onViewModeChange, ...props }) => {
+  const { className, ...rest } = composableProps(props);
   const [upload, setUpload] = useState(null);
   const uploadRef = useCallback4((next) => setUpload(() => next), []);
-  const handleViewModeChange = useCallback4((mode) => onViewModeChange?.(mode), [
-    onViewModeChange
-  ]);
   const getView = useCallback4(() => {
     invariant3(editorView, void 0, {
       F: __dxlog_file3,
-      L: 41,
+      L: 40,
       S: void 0,
       A: [
         "editorView",
@@ -564,10 +620,17 @@ var MarkdownEditorToolbar = ({ classNames, id, role, state, editorView, customAc
     editorView
   ]);
   if (!editorView) {
-    return /* @__PURE__ */ React4.createElement("div", null);
+    return /* @__PURE__ */ React3.createElement("div", {
+      className,
+      ...rest
+    });
   }
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(EditorToolbar, {
-    classNames,
+  return /* @__PURE__ */ React3.createElement("div", {
+    role: "none",
+    className: "contents"
+  }, /* @__PURE__ */ React3.createElement(EditorToolbar, {
+    ...rest,
+    classNames: className,
     attendableId: id,
     role,
     state,
@@ -575,8 +638,8 @@ var MarkdownEditorToolbar = ({ classNames, id, role, state, editorView, customAc
     getView,
     onAction,
     onImageUpload: upload ?? void 0,
-    onViewModeChange: handleViewModeChange
-  }), onFileUpload && /* @__PURE__ */ React4.createElement(FileUpload, {
+    onViewModeChange
+  }), onFileUpload && /* @__PURE__ */ React3.createElement(FileUpload, {
     ref: uploadRef,
     editorView,
     onFileUpload
@@ -585,7 +648,7 @@ var MarkdownEditorToolbar = ({ classNames, id, role, state, editorView, customAc
 
 // src/components/MarkdownEditor/MarkdownEditor.tsx
 var [MarkdownEditorContextProvider, useMarkdownEditorContext] = createContext("MarkdownEditor.Context");
-var MarkdownEditorRoot = ({ children, id, object, editorStateStore, selectionManager, settings, viewMode, extensions: extensionsProp, slashCommandGroups, onLinkQuery, ...props }) => {
+var MarkdownEditorRoot = ({ children, id, attendableId, object, editorStateStore, selectionManager, settings, viewMode, extensions: extensionsProp, slashCommandGroups, onLinkQuery, onSelectObject, ...props }) => {
   const [editorView, setEditorView] = useState2();
   const [previewBlocks, setPreviewBlocks] = useState2([]);
   const previewOptions = useMemo6(() => ({
@@ -596,7 +659,7 @@ var MarkdownEditorRoot = ({ children, id, object, editorStateStore, selectionMan
       ]);
     },
     removeBlockContainer: ({ link }) => {
-      setPreviewBlocks((prev) => prev.filter(({ link: prevLink }) => prevLink.ref !== link.ref));
+      setPreviewBlocks((prev) => prev.filter(({ link: prevLink }) => prevLink.dxn !== link.dxn));
     }
   }), []);
   const toolbarState = useEditorToolbar({
@@ -615,7 +678,8 @@ var MarkdownEditorRoot = ({ children, id, object, editorStateStore, selectionMan
     previewOptions,
     selectionManager,
     settings,
-    viewMode
+    viewMode,
+    onSelectObject
   });
   const extensions = useMemo6(() => [
     coreExtensions,
@@ -626,8 +690,9 @@ var MarkdownEditorRoot = ({ children, id, object, editorStateStore, selectionMan
     menuExtension,
     extensionsProp
   ]);
-  return /* @__PURE__ */ React5.createElement(MarkdownEditorContextProvider, {
+  return /* @__PURE__ */ React4.createElement(MarkdownEditorContextProvider, {
     id,
+    attendableId,
     editorView,
     setEditorView,
     extensions,
@@ -639,51 +704,59 @@ var MarkdownEditorRoot = ({ children, id, object, editorStateStore, selectionMan
   }, children);
 };
 MarkdownEditorRoot.displayName = "MarkdownEditor.Root";
+var MARKDOWN_EDITOR_CONTENT_NAME = "MarkdownEditor.Content";
 var MarkdownEditorContent2 = (props) => {
-  const { id, editorView, setEditorView, viewMode, toolbarState, extensions, popoverMenu: { groupsRef, ...menuProps } } = useMarkdownEditorContext(MarkdownEditorContent2.displayName);
-  return /* @__PURE__ */ React5.createElement(EditorMenuProvider, {
+  const { id, attendableId, editorView, setEditorView, viewMode, toolbarState, extensions, popoverMenu: { groupsRef, ...menuProps } } = useMarkdownEditorContext(MARKDOWN_EDITOR_CONTENT_NAME);
+  return /* @__PURE__ */ React4.createElement(EditorMenuProvider, {
     view: editorView,
     groups: groupsRef.current,
     ...menuProps
-  }, /* @__PURE__ */ React5.createElement(MarkdownEditorContent, {
+  }, /* @__PURE__ */ React4.createElement(MarkdownEditorContent, {
     ...props,
     id,
+    attendableId,
     viewMode,
     toolbarState,
     extensions,
     ref: setEditorView
   }));
 };
-MarkdownEditorContent2.displayName = "MarkdownEditor.Content";
+MarkdownEditorContent2.displayName = MARKDOWN_EDITOR_CONTENT_NAME;
+var MARKDOWN_EDITOR_TOOLBAR_NAME = "MarkdownEditor.Toolbar";
 var MarkdownEditorToolbar2 = (props) => {
-  const { toolbarState, ...rootProps } = useMarkdownEditorContext(MarkdownEditorToolbar2.displayName);
-  return /* @__PURE__ */ React5.createElement(MarkdownEditorToolbar, {
+  const { id, attendableId, editorView, toolbarState, onAction, onFileUpload, onViewModeChange } = useMarkdownEditorContext(MARKDOWN_EDITOR_TOOLBAR_NAME);
+  return /* @__PURE__ */ React4.createElement(MarkdownEditorToolbar, {
     ...props,
-    ...rootProps,
-    state: toolbarState
+    id: attendableId ?? id,
+    editorView,
+    state: toolbarState,
+    onAction,
+    onFileUpload,
+    onViewModeChange
   });
 };
-MarkdownEditorToolbar2.displayName = "MarkdownEditor.Toolbar";
+MarkdownEditorToolbar2.displayName = MARKDOWN_EDITOR_TOOLBAR_NAME;
+var MARKDOWN_EDITOR_BLOCKS_NAME = "MarkdownEditor.Blocks";
 var MarkdownEditorBlocks = (_props) => {
-  const { previewBlocks } = useMarkdownEditorContext(MarkdownEditorBlocks.displayName);
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, previewBlocks.map(({ link, el }) => /* @__PURE__ */ React5.createElement(PreviewBlock, {
-    key: link.ref,
+  const { previewBlocks } = useMarkdownEditorContext(MARKDOWN_EDITOR_BLOCKS_NAME);
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, previewBlocks.map(({ link, el }) => /* @__PURE__ */ React4.createElement(PreviewBlock, {
+    key: link.dxn,
     link,
     el
   })));
 };
-MarkdownEditorBlocks.displayName = "MarkdownEditor.Blocks";
+MarkdownEditorBlocks.displayName = MARKDOWN_EDITOR_BLOCKS_NAME;
 var PreviewBlock = ({ el, link }) => {
   const client = useClient();
-  const dxn = DXN.parse(link.ref);
+  const dxn = DXN.parse(link.dxn);
   const subject = client.graph.makeRef(dxn).target;
   const data = useMemo6(() => ({
     subject
   }), [
     subject
   ]);
-  return /* @__PURE__ */ createPortal2(/* @__PURE__ */ React5.createElement(Surface, {
-    role: "card--transclusion",
+  return /* @__PURE__ */ createPortal2(/* @__PURE__ */ React4.createElement(Surface.Surface, {
+    role: "card--content",
     data,
     limit: 1
   }), el);
@@ -696,7 +769,13 @@ var MarkdownEditor = {
 };
 
 export {
+  isEditorModel,
+  isMarkdownProperties,
+  getFallbackName,
+  getContentSnippet,
+  setFallbackName,
+  serializer,
   useLinkQuery,
   MarkdownEditor
 };
-//# sourceMappingURL=chunk-BX73DASG.mjs.map
+//# sourceMappingURL=chunk-B6S4YQWZ.mjs.map