@dxos/plugin-markdown 0.8.4-main.72ec0f3 → 0.8.4-main.7996785055

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

@@ -0,0 +1,757 @@
+import {
+  MarkdownCapabilities,
+  Markdown_exports
+} from "./chunk-5VT6IW5B.mjs";
+import {
+  meta
+} from "./chunk-RYZHVXZ5.mjs";
+
+// 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 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 result + "\u2026";
+      }
+      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, (obj) => {
+      obj.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 useMemo5, useState as useState2 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { Surface } from "@dxos/app-framework/ui";
+import { Obj as Obj4 } from "@dxos/echo";
+import { DXN } from "@dxos/keys";
+import { useClient } from "@dxos/react-client";
+import { EditorMenuProvider, useEditorMenu, useEditorToolbar } from "@dxos/react-ui-editor";
+import { composable as composable2, composableProps as composableProps2 } from "@dxos/ui-theme";
+import { isNonNullable } from "@dxos/util";
+
+// src/hooks/useEditorMenuOptions.ts
+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 } = 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: () => {
+        const pressEl = Domino.of("span").text("Press");
+        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;
+      }
+    };
+    return {
+      viewRef,
+      getMenu,
+      trigger,
+      placeholder
+    };
+  }, [
+    getMenu,
+    onLinkQuery
+  ]);
+};
+
+// src/hooks/useExtensions.tsx
+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 { 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 { useThemeContext } from "@dxos/react-ui";
+import { isTruthy, safeUrl } from "@dxos/util";
+import { fromUrlPath } from "@dxos/app-toolkit";
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-markdown/src/hooks/useExtensions.tsx";
+var useExtensions = ({ id, object, settings, compact, viewMode, selectionManager, editorStateStore, previewOptions, onSelectObject }) => {
+  const { platform } = useThemeContext();
+  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 = useMemo2(() => createBaseExtensions({
+    id,
+    object,
+    settings,
+    compact,
+    viewMode,
+    selectionManager,
+    previewOptions,
+    onSelectObject,
+    platform
+  }), [
+    id,
+    object,
+    compact,
+    viewMode,
+    selectionManager,
+    previewOptions,
+    onSelectObject,
+    settings,
+    settings?.debug,
+    settings?.editorInputMode,
+    settings?.folding,
+    settings?.numberedHeadings,
+    platform,
+    settings?.typewriter
+  ]);
+  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.
+    Obj2.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, onSelectObject, settings, compact, viewMode, selectionManager, previewOptions, platform }) => {
+  const extensions = [
+    selectionManager && selectionChange(selectionManager),
+    settings?.editorInputMode && InputModeExtensions[settings.editorInputMode],
+    settings?.folding && !compact && platform !== "mobile" && folding()
+  ].filter(isTruthy);
+  if (viewMode !== "source") {
+    extensions.push(...[
+      formattingKeymap(),
+      decorateMarkdown({
+        selectionChangeDelay: 100,
+        numberedHeadings: settings?.numberedHeadings ? {
+          from: 2
+        } : void 0,
+        // TODO(wittjosiah): For internal links render the label of the object.
+        renderLinkButton: onSelectObject && createRenderLink(onSelectObject)
+      }),
+      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) => {
+  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) {
+      debouncedHandler(update);
+    }
+  });
+};
+var createRenderLink = (onSelectObject) => (el, { url }) => {
+  const isInternal = url.startsWith("/") || url.startsWith(window.location.origin);
+  const qualifiedId = isInternal ? fromUrlPath(new URL(url, window.location.origin).pathname) : void 0;
+  const icon = Domino2.of("span").classNames("dx-link ms-1 inline-block align-[-0.125em]").children(Domino2.svg(isInternal ? "ph--arrow-square-down--regular" : "ph--arrow-square-out--regular"));
+  if (isInternal) {
+    invariant(qualifiedId, "Invalid link format.", {
+      F: __dxlog_file,
+      L: 230,
+      S: void 0,
+      A: [
+        "qualifiedId",
+        "'Invalid link format.'"
+      ]
+    });
+    icon.attributes({
+      role: "button",
+      tabindex: "0"
+    }).on("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      onSelectObject(qualifiedId);
+    }).on("keydown", (event) => {
+      const keyboardEvent = event;
+      if (keyboardEvent.key !== "Enter" && keyboardEvent.key !== " ") {
+        return;
+      }
+      keyboardEvent.preventDefault();
+      keyboardEvent.stopPropagation();
+      onSelectObject(qualifiedId);
+    });
+  }
+  el.appendChild(icon.root);
+};
+var renderLinkTooltip = (el, { url }) => {
+  el.appendChild(Domino2.of("a").attributes({
+    href: url,
+    target: "_blank",
+    rel: "noreferrer"
+  }).classNames("dx-link flex items-center gap-2").text(safeUrl(url)?.toString() ?? url).children(Domino2.svg("ph--arrow-square-out--regular")).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/components/MarkdownEditor/MarkdownEditorContent.tsx
+import { RegistryContext } from "@effect-atom/atom-react";
+import React, { forwardRef, useCallback as useCallback3, useContext, useEffect, useImperativeHandle, useMemo as useMemo4 } from "react";
+import { useCapabilities } from "@dxos/app-framework/ui";
+import { useThemeContext as useThemeContext2, useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { useTextEditor } from "@dxos/react-ui-editor";
+import { compactSlots, createBasicExtensions, createMarkdownExtensions, createThemeExtensions, dropFile, documentSlots, 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, attendableId, role, compact, viewMode, initialValue, editorStateStore, toolbarState, extensions, slots, onFileUpload }, forwardedRef) => {
+  const { t } = useTranslation3(meta.id);
+  const { themeMode } = useThemeContext2();
+  const registry = useContext(RegistryContext);
+  const updateToolbarState = useCallback3((formatting) => {
+    if (toolbarState) {
+      registry.set(toolbarState, {
+        ...registry.get(toolbarState),
+        ...formatting
+      });
+    }
+  }, [
+    registry,
+    toolbarState
+  ]);
+  const { scrollTo, selection } = useMemo4(() => editorStateStore?.getState(id) ?? {}, [
+    id
+  ]);
+  console.log(slots, compact, compactSlots);
+  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: !compact,
+        search: true
+      }),
+      createThemeExtensions({
+        themeMode,
+        slots: slots ?? (compact ? compactSlots : documentSlots),
+        syntaxHighlighting: true
+      }),
+      createMarkdownExtensions(),
+      toolbarState && formattingListener(updateToolbarState),
+      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
+  ]);
+  const [editorViewRegistry] = useCapabilities(MarkdownCapabilities.EditorViews);
+  useEffect(() => {
+    if (editorView && editorViewRegistry) {
+      editorViewRegistry.register(attendableId ?? id, editorView, id);
+      return () => editorViewRegistry.unregister(attendableId ?? id);
+    }
+  }, [
+    editorView,
+    editorViewRegistry,
+    attendableId,
+    id
+  ]);
+  useTest(editorView);
+  return /* @__PURE__ */ React.createElement("div", {
+    ...focusAttributes,
+    role: "none",
+    "data-testid": "composer.markdownRoot",
+    "data-popover-collision-boundary": true,
+    className: mx(stackItemContentEditorClassNames(role), classNames),
+    ref: parentRef
+  });
+});
+var useTest = (view) => {
+  useEffect(() => {
+    const composer = window.composer;
+    if (composer) {
+      composer.editorView = view;
+    }
+  }, [
+    view
+  ]);
+};
+
+// src/components/MarkdownEditor/MarkdownEditorToolbar.tsx
+import React3, { useCallback as useCallback4, useState } from "react";
+import { invariant as invariant2 } from "@dxos/invariant";
+import { EditorToolbar } from "@dxos/react-ui-editor";
+
+// src/components/MarkdownEditor/FileUpload.tsx
+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";
+var IMAGE_FILES = [
+  ".jpg",
+  ".jpeg",
+  ".png",
+  ".gif"
+];
+var FileUpload = /* @__PURE__ */ forwardRef2(({ editorView, onFileUpload }, forwardedRef) => {
+  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__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ createPortal(/* @__PURE__ */ React2.createElement("input", {
+    ref: inputRef
+  }), document.body), " ");
+});
+
+// src/components/MarkdownEditor/MarkdownEditorToolbar.tsx
+import { composable, composableProps } from "@dxos/ui-theme";
+var __dxlog_file2 = "/__w/dxos/dxos/packages/plugins/plugin-markdown/src/components/MarkdownEditor/MarkdownEditorToolbar.tsx";
+var MarkdownEditorToolbar = composable(({ id, role, state, editorView, customActions, onAction, onFileUpload, onViewModeChange, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
+  const [upload, setUpload] = useState(null);
+  const uploadRef = useCallback4((next) => setUpload(() => next), []);
+  const getView = useCallback4(() => {
+    invariant2(editorView, void 0, {
+      F: __dxlog_file2,
+      L: 31,
+      S: void 0,
+      A: [
+        "editorView",
+        ""
+      ]
+    });
+    return editorView;
+  }, [
+    editorView
+  ]);
+  if (!editorView) {
+    return /* @__PURE__ */ React3.createElement("div", {
+      className,
+      ...rest,
+      ref: forwardedRef
+    });
+  }
+  return /* @__PURE__ */ React3.createElement("div", {
+    role: "none",
+    className: "contents",
+    ref: forwardedRef
+  }, /* @__PURE__ */ React3.createElement(EditorToolbar, {
+    ...rest,
+    classNames: className,
+    attendableId: id,
+    role,
+    state,
+    customActions,
+    getView,
+    onAction,
+    onImageUpload: upload ?? void 0,
+    onViewModeChange
+  }), onFileUpload && /* @__PURE__ */ React3.createElement(FileUpload, {
+    ref: uploadRef,
+    editorView,
+    onFileUpload
+  }));
+});
+
+// src/components/MarkdownEditor/MarkdownEditor.tsx
+var [MarkdownEditorContextProvider, useMarkdownEditorContext] = createContext("MarkdownEditor.Context");
+var MarkdownEditorRoot = ({ children, id, attendableId, object, settings, compact, viewMode, selectionManager, editorStateStore, extensions: extensionsProp, slashCommandGroups, onLinkQuery, onSelectObject, ...props }) => {
+  const [editorView, setEditorView] = useState2();
+  const [previewBlocks, setPreviewBlocks] = useState2([]);
+  const previewOptions = useMemo5(() => ({
+    db: Obj4.isObject(object) ? Obj4.getDatabase(object) : void 0,
+    addBlockContainer: (block) => {
+      setPreviewBlocks((prev) => [
+        ...prev,
+        block
+      ]);
+    },
+    removeBlockContainer: ({ link }) => {
+      setPreviewBlocks((prev) => prev.filter(({ link: prevLink }) => prevLink.dxn !== link.dxn));
+    }
+  }), [
+    object
+  ]);
+  const toolbarState = useEditorToolbar({
+    viewMode
+  });
+  const menuOptions = useEditorMenuOptions({
+    editorView,
+    slashCommandGroups,
+    onLinkQuery
+  });
+  const { extension: menuExtension, ...menuProps } = useEditorMenu(menuOptions);
+  const coreExtensions = useExtensions({
+    id,
+    object,
+    compact,
+    viewMode,
+    selectionManager,
+    editorStateStore,
+    previewOptions,
+    settings,
+    onSelectObject
+  });
+  const extensions = useMemo5(() => [
+    coreExtensions,
+    menuExtension,
+    extensionsProp
+  ].filter(isNonNullable), [
+    coreExtensions,
+    menuExtension,
+    extensionsProp
+  ]);
+  return /* @__PURE__ */ React4.createElement(MarkdownEditorContextProvider, {
+    id,
+    attendableId,
+    compact,
+    editorView,
+    setEditorView,
+    extensions,
+    previewBlocks,
+    toolbarState,
+    popoverMenu: menuProps,
+    viewMode,
+    ...props
+  }, children);
+};
+MarkdownEditorRoot.displayName = "MarkdownEditor.Root";
+var MARKDOWN_EDITOR_CONTENT_NAME = "MarkdownEditor.Content";
+var MarkdownEditorContent2 = composable2(({ ...props }, _forwardedRef) => {
+  const { id, attendableId, compact, 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__ */ React4.createElement(MarkdownEditorContent, {
+    ...composableProps2(props),
+    id,
+    attendableId,
+    compact,
+    viewMode,
+    toolbarState,
+    extensions,
+    ref: setEditorView
+  }));
+});
+MarkdownEditorContent2.displayName = MARKDOWN_EDITOR_CONTENT_NAME;
+var MARKDOWN_EDITOR_TOOLBAR_NAME = "MarkdownEditor.Toolbar";
+var MarkdownEditorToolbar2 = (props) => {
+  const { id, attendableId, editorView, toolbarState, onAction, onFileUpload, onViewModeChange } = useMarkdownEditorContext(MARKDOWN_EDITOR_TOOLBAR_NAME);
+  return /* @__PURE__ */ React4.createElement(MarkdownEditorToolbar, {
+    ...props,
+    id: attendableId ?? id,
+    editorView,
+    state: toolbarState,
+    onAction,
+    onFileUpload,
+    onViewModeChange
+  });
+};
+MarkdownEditorToolbar2.displayName = MARKDOWN_EDITOR_TOOLBAR_NAME;
+var MARKDOWN_EDITOR_BLOCKS_NAME = "MarkdownEditor.Blocks";
+var MarkdownEditorBlocks = (_props) => {
+  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 = MARKDOWN_EDITOR_BLOCKS_NAME;
+var PreviewBlock = ({ el, link }) => {
+  const client = useClient();
+  const dxn = DXN.parse(link.dxn);
+  const subject = client.graph.makeRef(dxn).target;
+  const data = useMemo5(() => ({
+    subject
+  }), [
+    subject
+  ]);
+  return /* @__PURE__ */ createPortal2(/* @__PURE__ */ React4.createElement(Surface.Surface, {
+    role: "card--content",
+    data,
+    limit: 1
+  }), el);
+};
+var MarkdownEditor = {
+  Root: MarkdownEditorRoot,
+  Content: MarkdownEditorContent2,
+  Toolbar: MarkdownEditorToolbar2,
+  Blocks: MarkdownEditorBlocks
+};
+
+export {
+  isEditorModel,
+  isMarkdownProperties,
+  getFallbackName,
+  getContentSnippet,
+  setFallbackName,
+  serializer,
+  useLinkQuery,
+  MarkdownEditor
+};
+//# sourceMappingURL=chunk-YALLVET2.mjs.map