@dxos/plugin-markdown 0.8.4-main.5acf9ea → 0.8.4-main.66e292d

package/dist/lib/browser/chunk-V7P7EIWG.mjs

@@ -0,0 +1,829 @@
+import {
+  MarkdownCapabilities
+} from "./chunk-IBCHVMZW.mjs";
+import {
+  setFallbackName
+} from "./chunk-OKNQ57GF.mjs";
+import {
+  Markdown_exports
+} from "./chunk-CN35HEBX.mjs";
+import {
+  meta
+} from "./chunk-BQTYJOFB.mjs";
+
+// src/components/MarkdownContainer.tsx
+import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
+import { Atom } from "@effect-atom/atom-react";
+import React6, { useMemo as useMemo7 } from "react";
+import { Capabilities as Capabilities2 } from "@dxos/app-framework";
+import { useAppGraph, useCapabilities } from "@dxos/app-framework/react";
+import { Obj as Obj3 } from "@dxos/echo";
+import { getSpace as getSpace2 } from "@dxos/react-client/echo";
+import { StackItem } from "@dxos/react-ui-stack";
+import { Text as Text2 } from "@dxos/schema";
+
+// src/hooks/useEditorMenuOptions.ts
+import { useCallback, useMemo, useRef } from "react";
+import { Domino, toLocalizedString, useTranslation } from "@dxos/react-ui";
+import { filterMenuGroups, formattingCommands, linkSlashCommands } from "@dxos/react-ui-editor";
+var useEditorMenuOptions = ({ editorView, slashCommandGroups, onLinkQuery }) => {
+  const { t } = useTranslation(meta.id);
+  const getMenu = useCallback(({ text, trigger }) => {
+    switch (trigger) {
+      case "@": {
+        return onLinkQuery?.(text) ?? [];
+      }
+      case "/":
+      default: {
+        return filterMenuGroups([
+          formattingCommands,
+          linkSlashCommands,
+          ...slashCommandGroups ?? []
+        ], (item) => text ? toLocalizedString(item.label, t).toLowerCase().includes(text.toLowerCase()) : true);
+      }
+    }
+  }, [
+    slashCommandGroups,
+    onLinkQuery
+  ]);
+  const viewRef = useRef(editorView);
+  return useMemo(() => {
+    const trigger = onLinkQuery ? [
+      "/",
+      "@"
+    ] : [
+      "/"
+    ];
+    const placeholder = {
+      delay: 3e3,
+      content: () => Domino.of("div").children(Domino.of("span").text("Press"), ...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").text("for commands.")).build()
+    };
+    return {
+      viewRef,
+      getMenu,
+      trigger,
+      placeholder
+    };
+  }, [
+    getMenu,
+    onLinkQuery
+  ]);
+};
+
+// src/hooks/useExtensions.tsx
+import React, { useMemo as useMemo2 } from "react";
+import { createRoot } from "react-dom/client";
+import { LayoutAction, createIntent } from "@dxos/app-framework";
+import { useIntentDispatcher } from "@dxos/app-framework/react";
+import { debounceAndThrottle } from "@dxos/async";
+import { Obj } from "@dxos/echo";
+import { createDocAccessor } from "@dxos/echo-db";
+import { invariant } from "@dxos/invariant";
+import { getSpace } from "@dxos/react-client/echo";
+import { useIdentity } from "@dxos/react-client/halo";
+import { Icon, ThemeProvider } from "@dxos/react-ui";
+import { Cursor, EditorView, InputModeExtensions, createDataExtensions, decorateMarkdown, documentId, folding, formattingKeymap, linkTooltip, listener, preview, replacer, selectionState, typewriter } from "@dxos/react-ui-editor";
+import { defaultTx } from "@dxos/react-ui-theme";
+import { Text } from "@dxos/schema";
+import { isTruthy } 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 { dispatchPromise: dispatch } = useIntentDispatcher();
+  const identity = useIdentity();
+  const space = getSpace(object);
+  let target;
+  if (Obj.instanceOf(Markdown_exports.Document, object)) {
+    target = object.content.target;
+  } else if (Obj.instanceOf(Text.Text, object)) {
+    target = object;
+  }
+  const baseExtensions = useMemo2(() => createBaseExtensions({
+    id,
+    object,
+    settings,
+    selectionManager,
+    viewMode,
+    previewOptions,
+    dispatch
+  }), [
+    id,
+    object,
+    viewMode,
+    dispatch,
+    previewOptions,
+    settings,
+    settings?.debug,
+    settings?.editorInputMode,
+    settings?.folding,
+    settings?.numberedHeadings,
+    settings?.typewriter,
+    selectionManager
+  ]);
+  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({
+      id,
+      text: createDocAccessor(target, [
+        "content"
+      ]),
+      messenger: space,
+      identity
+    }),
+    // TODO(burdon): Reconcile with effect in parent.
+    Obj.instanceOf(Markdown_exports.Document, object) && listener({
+      onChange: ({ text }) => {
+        setFallbackName(object, text);
+      }
+    }),
+    baseExtensions,
+    selectionState(editorStateStore)
+  ].filter(isTruthy), [
+    identity,
+    space,
+    id,
+    object,
+    target,
+    baseExtensions
+  ]);
+};
+var createBaseExtensions = ({ id, object, dispatch, settings, selectionManager, viewMode, previewOptions }) => {
+  const extensions = [
+    selectionManager && selectionChange(selectionManager),
+    settings?.editorInputMode && InputModeExtensions[settings.editorInputMode],
+    settings?.folding && folding()
+  ].filter(isTruthy);
+  if (viewMode !== "source") {
+    extensions.push(...[
+      formattingKeymap(),
+      decorateMarkdown({
+        selectionChangeDelay: 100,
+        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: dispatch && (object || id) ? createLinkRenderer((id2) => {
+          void dispatch(createIntent(LayoutAction.Open, {
+            part: "main",
+            subject: [
+              id2
+            ],
+            options: {
+              pivotId: object && Obj.isObject(object) ? Obj.getDXN(object).toString() : id2
+            }
+          }));
+        }) : void 0
+      }),
+      linkTooltip(renderLinkTooltip),
+      preview(previewOptions),
+      replacer()
+    ]);
+  }
+  if (settings?.debug) {
+    const items = settings.typewriter?.split(/[,\n]/) ?? "";
+    if (items) {
+      extensions.push(typewriter({
+        items
+      }));
+    }
+  }
+  return extensions;
+};
+var selectionChange = (selectionManager) => {
+  return EditorView.updateListener.of(debounceAndThrottle((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);
+    }
+  }, 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: () => {
+      const qualifiedId = url.split("/").at(-1);
+      invariant(qualifiedId, "Invalid link format.", {
+        F: __dxlog_file,
+        L: 242,
+        S: void 0,
+        A: [
+          "qualifiedId",
+          "'Invalid link format.'"
+        ]
+      });
+      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
+  })));
+};
+var renderLinkTooltip = (el, { url }) => {
+  const web = new URL(url);
+  renderRoot(el, /* @__PURE__ */ React.createElement("a", {
+    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
+  })));
+};
+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 { Capabilities } from "@dxos/app-framework";
+import { usePluginManager } from "@dxos/app-framework/react";
+import { Filter, Obj as Obj2, 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/react-ui-editor";
+var useLinkQuery = (space) => {
+  const { t } = useTranslation2();
+  const manager = usePluginManager();
+  const resolve = useCallback2((typename) => manager.context.getCapabilities(Capabilities.Metadata).find(({ id }) => id === typename)?.metadata ?? {}, [
+    manager
+  ]);
+  const filter = useMemo3(() => Filter.or(...(space?.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)))), [
+    space
+  ]);
+  const handleLinkQuery = useCallback2(async (query) => {
+    const name = query?.startsWith("@") ? query.slice(1).toLowerCase() : query?.toLowerCase() ?? "";
+    const results = await space?.db.query(Query.select(filter)).run();
+    const getLabel = (object) => {
+      const label = Obj2.getLabel(object);
+      if (label) {
+        return label;
+      }
+      const type = Obj2.getTypename(object);
+      const metadata = resolve(type);
+      return metadata.label?.(object) || [
+        "object name placeholder",
+        {
+          ns: type,
+          default: "New object"
+        }
+      ];
+    };
+    const items = results?.objects.filter((object) => toLocalizedString2(getLabel(object), t).toLowerCase().includes(name)).map((object) => {
+      const metadata = resolve(Obj2.getTypename(object));
+      const label = toLocalizedString2(getLabel(object), t);
+      return {
+        id: object.id,
+        label,
+        icon: metadata.icon,
+        onSelect: ({ view, head }) => {
+          const link = `[${label}](${Obj2.getDXN(object)})`;
+          if (query?.startsWith("@")) {
+            insertAtLineStart(view, head, `!${link}
+`);
+          } else {
+            insertAtCursor(view, head, `${link} `);
+          }
+        }
+      };
+    }) ?? [];
+    return [
+      {
+        id: "echo",
+        items
+      }
+    ];
+  }, [
+    space,
+    filter,
+    resolve
+  ]);
+  return handleLinkQuery;
+};
+
+// src/hooks/useSelectCurrentThread.tsx
+import { EditorView as EditorView2 } from "@codemirror/view";
+import * as Schema from "effect/Schema";
+import { useMemo as useMemo4 } from "react";
+import { LayoutAction as LayoutAction2, createResolver } from "@dxos/app-framework";
+import { useIntentResolver } from "@dxos/app-framework/react";
+import { invariant as invariant2 } from "@dxos/invariant";
+import { Cursor as Cursor2, setSelection } from "@dxos/react-ui-editor";
+var __dxlog_file2 = "/__w/dxos/dxos/packages/plugins/plugin-markdown/src/hooks/useSelectCurrentThread.tsx";
+var useSelectCurrentThread = (editorView, documentId2) => {
+  const scrollIntoViewResolver = useMemo4(() => createResolver({
+    intent: LayoutAction2.UpdateLayout,
+    position: "hoist",
+    filter: (data) => {
+      if (!Schema.is(LayoutAction2.ScrollIntoView.fields.input)(data)) {
+        return false;
+      }
+      return !!editorView && data.subject === documentId2 && !!data.options?.cursor;
+    },
+    resolve: ({ options: { cursor } }) => {
+      invariant2(editorView, "Editor view is not defined.", {
+        F: __dxlog_file2,
+        L: 39,
+        S: void 0,
+        A: [
+          "editorView",
+          "'Editor view is not defined.'"
+        ]
+      });
+      const range = Cursor2.getRangeFromCursor(editorView.state, cursor);
+      if (range) {
+        const selection = editorView.state.selection.main.from !== range.from ? {
+          anchor: range.from
+        } : void 0;
+        const effects = [
+          // NOTE: This does not use the DOM scrollIntoView function.
+          EditorView2.scrollIntoView(range.from, {
+            y: "start",
+            yMargin: 96
+          })
+        ];
+        if (selection) {
+          effects.push(setSelection.of({
+            current: documentId2
+          }));
+        }
+        editorView.dispatch({
+          effects,
+          selection: selection ? {
+            anchor: range.from
+          } : void 0
+        });
+      }
+    }
+  }), [
+    documentId2,
+    editorView
+  ]);
+  useIntentResolver(meta.id, scrollIntoViewResolver);
+};
+
+// src/components/MarkdownEditor/MarkdownEditor.tsx
+import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
+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 { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
+import React2, { forwardRef, useEffect, useImperativeHandle, useMemo as useMemo5 } from "react";
+import { useDynamicRef, useThemeContext, useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { createBasicExtensions, createMarkdownExtensions, createThemeExtensions, dropFile, editorGutter, editorSlots, formattingListener, processEditorPayload, stackItemContentEditorClassNames, useTextEditor } from "@dxos/react-ui-editor";
+import { isTruthy as isTruthy2 } from "@dxos/util";
+var MarkdownEditorContent = /* @__PURE__ */ forwardRef(({ id, role, initialValue, editorStateStore, toolbarState, extensions, viewMode, scrollPastEnd, onFileUpload }, forwardedRef) => {
+  var _effect = _useSignals();
+  try {
+    const { t } = useTranslation3(meta.id);
+    const { themeMode } = useThemeContext();
+    const toolbarStateRef = useDynamicRef(toolbarState);
+    const { scrollTo, selection } = useMemo5(() => editorStateStore?.getState(id) ?? {}, [
+      id
+    ]);
+    const { parentRef, view: editorView, focusAttributes } = useTextEditor(() => ({
+      ...role !== "section" && {
+        id,
+        scrollTo,
+        selection,
+        // TODO(wittjosiah): Autofocus based on layout is racy.
+        // autoFocus: layoutPlugin?.provides.layout ? layoutPlugin?.provides.layout.scrollIntoView === id : true,
+        selectionEnd: true
+      },
+      initialValue,
+      extensions: [
+        createBasicExtensions({
+          readOnly: viewMode === "readonly",
+          placeholder: t("editor placeholder"),
+          scrollPastEnd: scrollPastEnd && role !== "section",
+          search: true
+        }),
+        createThemeExtensions({
+          themeMode,
+          slots: editorSlots,
+          syntaxHighlighting: true
+        }),
+        createMarkdownExtensions(),
+        formattingListener(() => toolbarStateRef.current),
+        editorGutter,
+        role !== "section" && onFileUpload && dropFile({
+          // TODO(wittjosiah): Factor out to file uploader plugin.
+          onDrop: async (view, { files }) => {
+            const file = files[0];
+            const info = file && onFileUpload ? await onFileUpload(file) : void 0;
+            if (info) {
+              processEditorPayload(view, {
+                type: "image",
+                data: info.url
+              });
+            }
+          }
+        }),
+        extensions
+      ].filter(isTruthy2)
+    }), [
+      id,
+      viewMode,
+      themeMode,
+      extensions
+    ]);
+    useImperativeHandle(forwardedRef, () => editorView, [
+      editorView
+    ]);
+    useSelectCurrentThread(editorView, id);
+    useTest(editorView);
+    return /* @__PURE__ */ React2.createElement("div", {
+      role: "none",
+      ref: parentRef,
+      "data-testid": "composer.markdownRoot",
+      className: stackItemContentEditorClassNames(role),
+      "data-popover-collision-boundary": true,
+      ...focusAttributes
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var useTest = (view) => {
+  useEffect(() => {
+    const composer = window.composer;
+    if (composer) {
+      composer.editorView = view;
+    }
+  }, [
+    view
+  ]);
+};
+
+// src/components/MarkdownEditor/MarkdownEditorToolbar.tsx
+import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
+import React4, { useCallback as useCallback3, useState } from "react";
+import { invariant as invariant3 } from "@dxos/invariant";
+import { EditorToolbar } from "@dxos/react-ui-editor";
+
+// src/components/MarkdownEditor/FileUpload.tsx
+import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
+import React3, { 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/react-ui-editor";
+var IMAGE_FILES = [
+  ".jpg",
+  ".jpeg",
+  ".png",
+  ".gif"
+];
+var FileUpload = /* @__PURE__ */ forwardRef2(({ editorView, onFileUpload }, forwardedRef) => {
+  var _effect = _useSignals2();
+  try {
+    const { acceptedFiles, open, inputRef } = useDropzone({
+      disabled: !onFileUpload,
+      multiple: false,
+      noDrag: true,
+      accept: {
+        "image/*": IMAGE_FILES
+      }
+    });
+    useImperativeHandle2(forwardedRef, () => open, []);
+    useEffect2(() => {
+      if (editorView && acceptedFiles.length && onFileUpload) {
+        requestAnimationFrame(async () => {
+          const f = acceptedFiles[0];
+          const file = new File([
+            f
+          ], f.name, {
+            type: f.type,
+            lastModified: f.lastModified
+          });
+          const info = await onFileUpload(file);
+          if (info) {
+            addLink({
+              url: info.url,
+              image: true
+            })(editorView);
+          }
+        });
+      }
+    }, [
+      editorView,
+      acceptedFiles,
+      onFileUpload
+    ]);
+    if (!onFileUpload) {
+      return null;
+    }
+    return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ createPortal(/* @__PURE__ */ React3.createElement("input", {
+      ref: inputRef
+    }), document.body), " ");
+  } finally {
+    _effect.f();
+  }
+});
+
+// src/components/MarkdownEditor/MarkdownEditorToolbar.tsx
+var __dxlog_file3 = "/__w/dxos/dxos/packages/plugins/plugin-markdown/src/components/MarkdownEditor/MarkdownEditorToolbar.tsx";
+var MarkdownEditorToolbar = ({ classNames, id, role, state, editorView, customActions, onFileUpload, onViewModeChange }) => {
+  var _effect = _useSignals3();
+  try {
+    const [upload, setUpload] = useState(null);
+    const uploadRef = useCallback3((next) => setUpload(() => next), []);
+    const handleViewModeChange = useCallback3((mode) => onViewModeChange?.(mode), [
+      onViewModeChange
+    ]);
+    const getView = useCallback3(() => {
+      invariant3(editorView, void 0, {
+        F: __dxlog_file3,
+        L: 39,
+        S: void 0,
+        A: [
+          "editorView",
+          ""
+        ]
+      });
+      return editorView;
+    }, [
+      editorView
+    ]);
+    if (!editorView) {
+      return /* @__PURE__ */ React4.createElement("div", null);
+    }
+    return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(EditorToolbar, {
+      classNames,
+      attendableId: id,
+      role,
+      state,
+      customActions,
+      getView,
+      onImageUpload: upload ?? void 0,
+      onViewModeChange: handleViewModeChange
+    }), onFileUpload && /* @__PURE__ */ React4.createElement(FileUpload, {
+      ref: uploadRef,
+      editorView,
+      onFileUpload
+    }));
+  } finally {
+    _effect.f();
+  }
+};
+
+// src/components/MarkdownEditor/MarkdownEditor.tsx
+var [MarkdownEditorContextProvider, useMarkdownEditorContext] = createContext("MarkdownEditor.Context");
+var MarkdownEditorRoot = ({ children, id, object, editorStateStore, selectionManager, settings, viewMode, extensions: extensionsParam, slashCommandGroups, onLinkQuery, ...props }) => {
+  var _effect = _useSignals4();
+  try {
+    const [editorView, setEditorView] = useState2();
+    const [previewBlocks, setPreviewBlocks] = useState2([]);
+    const previewOptions = useMemo6(() => ({
+      addBlockContainer: (block) => {
+        setPreviewBlocks((prev) => [
+          ...prev,
+          block
+        ]);
+      },
+      removeBlockContainer: ({ link }) => {
+        setPreviewBlocks((prev) => prev.filter(({ link: prevLink }) => prevLink.ref !== link.ref));
+      }
+    }), []);
+    const toolbarState = useEditorToolbar({
+      viewMode
+    });
+    const menuOptions = useEditorMenuOptions({
+      editorView,
+      slashCommandGroups,
+      onLinkQuery
+    });
+    const { extension: menuExtension, ...menuProps } = useEditorMenu(menuOptions);
+    const coreExtensions = useExtensions({
+      id,
+      object,
+      editorStateStore,
+      previewOptions,
+      selectionManager,
+      settings,
+      viewMode
+    });
+    const extensions = useMemo6(() => [
+      coreExtensions,
+      menuExtension,
+      extensionsParam
+    ].filter(isNonNullable), [
+      coreExtensions,
+      menuExtension,
+      extensionsParam
+    ]);
+    return /* @__PURE__ */ React5.createElement(MarkdownEditorContextProvider, {
+      id,
+      editorView,
+      setEditorView,
+      extensions,
+      previewBlocks,
+      toolbarState,
+      popoverMenu: menuProps,
+      viewMode,
+      ...props
+    }, children);
+  } finally {
+    _effect.f();
+  }
+};
+MarkdownEditorRoot.displayName = "MarkdownEditor.Root";
+var MarkdownEditorContent2 = (props) => {
+  var _effect = _useSignals4();
+  try {
+    const { id, extensions, editorView, setEditorView, toolbarState, viewMode, popoverMenu: { groupsRef, ...menuProps } } = useMarkdownEditorContext(MarkdownEditorContent2.displayName);
+    return /* @__PURE__ */ React5.createElement(EditorMenuProvider, {
+      view: editorView,
+      groups: groupsRef.current,
+      ...menuProps
+    }, /* @__PURE__ */ React5.createElement(MarkdownEditorContent, {
+      ...props,
+      id,
+      extensions,
+      toolbarState,
+      viewMode,
+      ref: setEditorView
+    }));
+  } finally {
+    _effect.f();
+  }
+};
+MarkdownEditorContent2.displayName = "MarkdownEditor.Content";
+var MarkdownEditorToolbar2 = (props) => {
+  var _effect = _useSignals4();
+  try {
+    const { toolbarState, ...rootProps } = useMarkdownEditorContext(MarkdownEditorToolbar2.displayName);
+    return /* @__PURE__ */ React5.createElement(MarkdownEditorToolbar, {
+      ...props,
+      ...rootProps,
+      state: toolbarState
+    });
+  } finally {
+    _effect.f();
+  }
+};
+MarkdownEditorToolbar2.displayName = "MarkdownEditor.Toolbar";
+var MarkdownEditorBlocks = (_props) => {
+  var _effect = _useSignals4();
+  try {
+    const { previewBlocks } = useMarkdownEditorContext(MarkdownEditorBlocks.displayName);
+    return /* @__PURE__ */ React5.createElement(React5.Fragment, null, previewBlocks.map(({ link, el }) => /* @__PURE__ */ React5.createElement(PreviewBlock, {
+      key: link.ref,
+      link,
+      el
+    })));
+  } finally {
+    _effect.f();
+  }
+};
+MarkdownEditorBlocks.displayName = "MarkdownEditor.Blocks";
+var PreviewBlock = ({ el, link }) => {
+  var _effect = _useSignals4();
+  try {
+    const client = useClient();
+    const dxn = DXN.parse(link.ref);
+    const subject = client.graph.ref(dxn).target;
+    const data = useMemo6(() => ({
+      subject
+    }), [
+      subject
+    ]);
+    return /* @__PURE__ */ createPortal2(/* @__PURE__ */ React5.createElement(Surface, {
+      role: "card--transclusion",
+      data,
+      limit: 1
+    }), el);
+  } finally {
+    _effect.f();
+  }
+};
+var MarkdownEditor = {
+  Root: MarkdownEditorRoot,
+  Content: MarkdownEditorContent2,
+  Toolbar: MarkdownEditorToolbar2,
+  Blocks: MarkdownEditorBlocks
+};
+
+// src/components/MarkdownContainer.tsx
+var MarkdownContainer = ({ id, role, object, settings, extensionProviders, ...props }) => {
+  var _effect = _useSignals5();
+  try {
+    const space = getSpace2(object);
+    const isDocument = Obj3.instanceOf(Markdown_exports.Document, object);
+    const isText = Obj3.instanceOf(Text2.Text, object);
+    const attendableId = isDocument ? Obj3.getDXN(object).toString() : void 0;
+    const otherExtensionProviders = useCapabilities(MarkdownCapabilities.Extensions);
+    const extensions = useMemo7(() => {
+      if (!Obj3.instanceOf(Markdown_exports.Document, object)) {
+        return [];
+      }
+      return [
+        ...otherExtensionProviders ?? [],
+        ...extensionProviders ?? []
+      ].flat().reduce((acc, provider) => {
+        const extension = typeof provider === "function" ? provider({
+          document: object
+        }) : provider;
+        if (extension) {
+          acc.push(extension);
+        }
+        return acc;
+      }, []);
+    }, [
+      extensionProviders,
+      otherExtensionProviders,
+      object
+    ]);
+    const { graph } = useAppGraph();
+    const customActions = useMemo7(() => {
+      return Atom.make((get) => {
+        const actions = get(graph.actions(id));
+        const nodes = actions.filter((action) => action.properties.disposition === "toolbar");
+        const edges = nodes.map((node) => ({
+          source: "root",
+          target: node.id
+        }));
+        return {
+          nodes,
+          edges
+        };
+      });
+    }, [
+      graph
+    ]);
+    const [upload] = useCapabilities(Capabilities2.FileUploader);
+    const handleFileUpload = useMemo7(() => {
+      if (!space || !upload) {
+        return void 0;
+      }
+      return async (file) => upload(space, file);
+    }, [
+      space,
+      upload
+    ]);
+    const handleLinkQuery = useLinkQuery(space);
+    return /* @__PURE__ */ React6.createElement(StackItem.Content, {
+      toolbar: settings.toolbar
+    }, /* @__PURE__ */ React6.createElement(MarkdownEditor.Root, {
+      id: attendableId ?? id,
+      object,
+      extensions,
+      onFileUpload: handleFileUpload,
+      onLinkQuery: handleLinkQuery,
+      ...props
+    }, settings.toolbar && /* @__PURE__ */ React6.createElement(MarkdownEditor.Toolbar, {
+      id: attendableId ?? id,
+      role,
+      customActions
+    }), /* @__PURE__ */ React6.createElement(MarkdownEditor.Content, {
+      initialValue: isDocument ? object.content?.target?.content : isText ? object.content : object.text,
+      scrollPastEnd: role === "article"
+    }), /* @__PURE__ */ React6.createElement(MarkdownEditor.Blocks, null)));
+  } finally {
+    _effect.f();
+  }
+};
+var MarkdownContainer_default = MarkdownContainer;
+
+export {
+  MarkdownContainer,
+  MarkdownContainer_default
+};
+//# sourceMappingURL=chunk-V7P7EIWG.mjs.map