@dxos/plugin-markdown 0.8.4-main.406dc2a → 0.8.4-main.422d1c7879

package/dist/lib/browser/index.mjs

@@ -1,167 +1,626 @@
 import {
-  translations
-} from "./chunk-O6XUPW6S.mjs";
-import {
-  AnchorSort,
-  AppGraphSerializer,
-  BlueprintDefinition,
-  IntentResolver,
-  MarkdownSettings,
-  MarkdownState,
-  ReactSurface,
-  Toolkit
-} from "./chunk-Z5PDJNBV.mjs";
-import {
-  BLUEPRINT_KEY
-} from "./chunk-HBBEHOP3.mjs";
-import {
-  MarkdownCapabilities
-} from "./chunk-OY6CGPOO.mjs";
-import {
-  getContentSnippet,
-  getFallbackName,
-  isEditorModel,
-  isMarkdownProperties,
-  serializer,
-  setFallbackName
-} from "./chunk-6KU5DKP7.mjs";
-import {
-  MarkdownAction_exports,
-  Markdown_exports
-} from "./chunk-XMT6PMU5.mjs";
-import {
-  meta
-} from "./chunk-ODB2PTBP.mjs";
+  MarkdownCapabilities,
+  MarkdownEvents,
+  MarkdownStateSchema,
+  Markdown_exports,
+  Settings_exports
+} from "./chunk-4KOZEH2H.mjs";
+import "./chunk-J5LGTIGS.mjs";
 
-// src/events.ts
-import { Events } from "@dxos/app-framework";
-(function(MarkdownEvents2) {
-  MarkdownEvents2.SetupExtensions = Events.createStateEvent(`${meta.id}/event/setup-extensions`);
-})(MarkdownEvents || (MarkdownEvents = {}));
-var MarkdownEvents;
+// src/meta.ts
+import { trim } from "@dxos/util";
+var meta = {
+  id: "org.dxos.plugin.markdown",
+  name: "Markdown",
+  description: trim`
+    Full-featured collaborative markdown editor with real-time editing, inline comments, and rich formatting.
+    Supports AI-powered editing assistance and seamlessly integrates with other workspace objects.
+  `,
+  icon: "ph--text-aa--regular",
+  iconHue: "indigo",
+  source: "https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-markdown",
+  screenshots: [
+    "https://dxos.network/plugin-details-markdown-dark.png"
+  ]
+};
+
+// src/util.tsx
+import { debounce } from "@dxos/async";
+import { Obj } from "@dxos/echo";
+import { Markdown } from "#types";
+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, (doc2) => {
+      doc2.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.make({
+      name,
+      fallbackName,
+      content
+    });
+  }
+};
 
 // src/MarkdownPlugin.tsx
-import { Capabilities, Events as Events2, contributes, createIntent, defineModule, definePlugin } from "@dxos/app-framework";
-import { Ref } from "@dxos/echo";
-import { ClientCapabilities, ClientEvents } from "@dxos/plugin-client";
-import { SpaceCapabilities } from "@dxos/plugin-space";
-import { defineObjectForm } from "@dxos/plugin-space/types";
-import { createDocAccessor, getTextInRange } from "@dxos/react-client/echo";
+import * as Effect from "effect/Effect";
+import * as Option from "effect/Option";
+import { Plugin } from "@dxos/app-framework";
+import { AppActivationEvents, AppPlugin } from "@dxos/app-toolkit";
+import { Annotation, Ref } from "@dxos/echo";
+import { createDocAccessor, getTextInRange } from "@dxos/echo-db";
+import { Operation } from "@dxos/operation";
+import { SpaceOperation } from "@dxos/plugin-space/operations";
+import { translations as editorTranslations2 } from "@dxos/react-ui-editor";
+import { Text } from "@dxos/schema";
+import { MarkdownBlueprint } from "#blueprints";
+import { AnchorSort, AppGraphSerializer, BlueprintDefinition, MarkdownSettings, MarkdownState, OperationHandler, ReactSurface } from "#capabilities";
+import { meta as meta3 } from "#meta";
+import { MarkdownOperation } from "#operations";
+import { Markdown as Markdown3, MarkdownEvents as MarkdownEvents2 } from "#types";
+
+// src/translations.ts
 import { translations as editorTranslations } from "@dxos/react-ui-editor";
-import { DataType } from "@dxos/schema";
-var MarkdownPlugin = definePlugin(meta, () => [
-  defineModule({
-    id: `${meta.id}/module/translations`,
-    activatesOn: Events2.SetupTranslations,
-    activate: () => contributes(Capabilities.Translations, [
-      ...translations,
-      ...editorTranslations
-    ])
-  }),
-  defineModule({
-    id: `${meta.id}/module/settings`,
-    activatesOn: Events2.SetupSettings,
-    activate: MarkdownSettings
-  }),
-  defineModule({
-    id: `${meta.id}/module/state`,
-    // TODO(wittjosiah): Does not integrate with settings store.
-    //   Should this be a different event?
-    //   Should settings store be renamed to be more generic?
-    activatesOn: Events2.SetupSettings,
-    activate: MarkdownState
-  }),
-  defineModule({
-    id: `${meta.id}/module/metadata`,
-    activatesOn: Events2.SetupMetadata,
-    activate: () => contributes(Capabilities.Metadata, {
-      id: Markdown_exports.Document.typename,
-      metadata: {
-        label: (object) => object.name || object.fallbackName,
-        icon: "ph--text-aa--regular",
-        blueprints: [
-          BLUEPRINT_KEY
-        ],
-        graphProps: {
-          managesAutofocus: true
-        },
-        // TODO(wittjosiah): Move out of metadata.
-        loadReferences: async (doc) => await Ref.Array.loadAll([
-          doc.content
-        ]),
-        serializer,
-        // TODO(wittjosiah): Consider how to do generic comments without these.
-        comments: "anchored",
-        selectionMode: "multi-range",
-        getAnchorLabel: (doc, anchor) => {
-          if (doc.content) {
-            const [start, end] = anchor.split(":");
-            return getTextInRange(createDocAccessor(doc.content.target, [
-              "content"
-            ]), start, end);
+import { meta as meta2 } from "#meta";
+import { Markdown as Markdown2 } from "#types";
+var translations = [
+  {
+    "en-US": {
+      [Markdown2.Document.typename]: {
+        "typename.label": "Document",
+        "typename.label_zero": "Documents",
+        "typename.label_one": "Document",
+        "typename.label_other": "Documents",
+        "object-name.placeholder": "New document",
+        "add-object.label": "Add document",
+        "rename-object.label": "Rename document",
+        "delete-object.label": "Delete document",
+        "object-deleted.label": "Document deleted"
+      },
+      [meta2.id]: {
+        "plugin.name": "Editor",
+        "choose-markdown-from-space-dialog.title": "Choose one or more documents to add",
+        "empty-choose-markdown-from-space.message": "None available; try creating a new one instead?",
+        "chooser-done.label": "Add selected",
+        "editor.placeholder": "Start typing\u2026",
+        "toggle-view-mode.label": "Toggle read-only",
+        "upload-image.label": "Upload image",
+        "fallback.title": "Untitled",
+        "navigate-to-document.label": "Open document",
+        "words.label": "words",
+        "words.label_zero": "words",
+        "words.label_one": "word",
+        "words.label_other": "words"
+      }
+    }
+  },
+  ...editorTranslations
+];
+
+// src/MarkdownPlugin.tsx
+var MarkdownPlugin = Plugin.define(meta3).pipe(AppPlugin.addBlueprintDefinitionModule({
+  activate: BlueprintDefinition
+}), AppPlugin.addMetadataModule({
+  metadata: {
+    id: Markdown3.Document.typename,
+    metadata: {
+      // TODO(dmaretskyi): Remove label, icon and iconHue and query them of schema.
+      label: (object) => object.name || object.fallbackName,
+      icon: Annotation.IconAnnotation.get(Markdown3.Document).pipe(Option.getOrThrow).icon,
+      iconHue: Annotation.IconAnnotation.get(Markdown3.Document).pipe(Option.getOrThrow).hue ?? "white",
+      blueprints: [
+        MarkdownBlueprint.key
+      ],
+      graphProps: {
+        managesAutofocus: true
+      },
+      // TODO(wittjosiah): Move out of metadata.
+      loadReferences: async (doc) => await Ref.Array.loadAll([
+        doc.content
+      ]),
+      serializer,
+      // TODO(wittjosiah): Consider how to do generic comments without these.
+      comments: "anchored",
+      selectionMode: "multi-range",
+      getAnchorLabel: (doc, anchor) => {
+        if (doc.content) {
+          const [start, end] = anchor.split(":");
+          return getTextInRange(createDocAccessor(doc.content.target, [
+            "content"
+          ]), start, end);
+        }
+      },
+      createObject: (props, options) => Effect.gen(function* () {
+        const object = Markdown3.make(props);
+        return yield* Operation.invoke(SpaceOperation.AddObject, {
+          object,
+          target: options.target,
+          hidden: true,
+          targetNodeId: options.targetNodeId
+        });
+      }),
+      scrollToAnchor: MarkdownOperation.ScrollToAnchor
+    }
+  }
+}), AppPlugin.addOperationHandlerModule({
+  activate: OperationHandler
+}), AppPlugin.addSchemaModule({
+  schema: [
+    Markdown3.Document,
+    Text.Text
+  ]
+}), AppPlugin.addSurfaceModule({
+  activate: ReactSurface,
+  firesBeforeActivation: [
+    MarkdownEvents2.SetupExtensions
+  ]
+}), AppPlugin.addTranslationsModule({
+  translations: [
+    ...translations,
+    ...editorTranslations2
+  ]
+}), Plugin.addModule({
+  activatesOn: AppActivationEvents.SetupSettings,
+  activate: MarkdownSettings
+}), Plugin.addModule({
+  id: "state",
+  // TODO(wittjosiah): Does not integrate with settings store.
+  //   Should this be a different event?
+  //   Should settings store be renamed to be more generic?
+  activatesOn: AppActivationEvents.SetupSettings,
+  activate: MarkdownState
+}), Plugin.addModule({
+  activatesOn: AppActivationEvents.AppGraphReady,
+  activate: AppGraphSerializer
+}), Plugin.addModule({
+  // TODO(wittjosiah): More relevant event?
+  activatesOn: AppActivationEvents.AppGraphReady,
+  activate: AnchorSort
+}), Plugin.make);
+
+// src/components/index.ts
+import { lazy } from "react";
+
+// src/components/MarkdownEditor/MarkdownEditor.tsx
+import { createContext } from "@radix-ui/react-context";
+import React4, { useCallback as useCallback3, useMemo as useMemo2, useState as useState2 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { Surface } from "@dxos/app-framework/ui";
+import { AppSurface } from "@dxos/app-toolkit/ui";
+import { Obj as Obj2 } from "@dxos/echo";
+import { DXN } from "@dxos/keys";
+import { useClient } from "@dxos/react-client";
+import { createEditorController, useEditorContext } from "@dxos/react-ui-editor";
+import { composable as composable2, composableProps as composableProps2 } from "@dxos/ui-theme";
+import { isNonNullable } from "@dxos/util";
+import { useEditorMenuOptions, useExtensions } from "#hooks";
+
+// src/components/MarkdownEditor/MarkdownEditorContent.tsx
+import { RegistryContext } from "@effect-atom/atom-react";
+import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo } from "react";
+import { useCapabilities } from "@dxos/app-framework/ui";
+import { useThemeContext, useTranslation } from "@dxos/react-ui";
+import { useTextEditor } from "@dxos/react-ui-editor";
+import { mobileSlots, createBasicExtensions, createMarkdownExtensions, createThemeExtensions, dropFile, documentSlots, formattingListener, processEditorPayload, editorClassNames } from "@dxos/ui-editor";
+import { mx } from "@dxos/ui-theme";
+import { isTruthy } from "@dxos/util";
+import { meta as meta4 } from "#meta";
+import { MarkdownCapabilities as MarkdownCapabilities2 } from "#types";
+var MarkdownEditorContent = /* @__PURE__ */ forwardRef(({ classNames, id, attendableId, role, compact, viewMode, initialValue, editorStateStore, toolbarState, extensions, slots, onFileUpload }, forwardedRef) => {
+  const { t } = useTranslation(meta4.id);
+  const { themeMode } = useThemeContext();
+  const registry = useContext(RegistryContext);
+  const updateToolbarState = useCallback((formatting) => {
+    if (toolbarState) {
+      registry.set(toolbarState, {
+        ...registry.get(toolbarState),
+        ...formatting
+      });
+    }
+  }, [
+    registry,
+    toolbarState
+  ]);
+  const { scrollTo, selection } = useMemo(() => editorStateStore?.getState(id) ?? {}, [
+    id
+  ]);
+  const { parentRef, view: editorView, focusAttributes } = useTextEditor(() => ({
+    ...role !== "section" && {
+      id,
+      scrollTo,
+      selection,
+      selectionEnd: true
+    },
+    initialValue,
+    extensions: [
+      createBasicExtensions({
+        readOnly: viewMode === "readonly",
+        placeholder: t("editor.placeholder"),
+        scrollPastEnd: !compact,
+        search: true
+      }),
+      createThemeExtensions({
+        themeMode,
+        slots: slots ?? (compact ? mobileSlots : 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
+            });
           }
         }
-      }
-    })
-  }),
-  defineModule({
-    id: `${meta.id}/module/object-form`,
-    activatesOn: ClientEvents.SetupSchema,
-    activate: () => contributes(SpaceCapabilities.ObjectForm, defineObjectForm({
-      objectSchema: Markdown_exports.Document,
-      getIntent: () => createIntent(MarkdownAction_exports.Create, {})
-    }))
-  }),
-  defineModule({
-    id: `${meta.id}/module/schema`,
-    activatesOn: ClientEvents.SetupSchema,
-    activate: () => contributes(ClientCapabilities.Schema, [
-      DataType.Text
-    ])
-  }),
-  defineModule({
-    id: `${meta.id}/module/react-surface`,
-    activatesOn: Events2.SetupReactSurface,
-    // TODO(wittjosiah): Should occur before the editor is loaded when surfaces activation is more granular.
-    activatesBefore: [
-      MarkdownEvents.SetupExtensions
-    ],
-    activate: ReactSurface
-  }),
-  defineModule({
-    id: `${meta.id}/module/intent-resolver`,
-    activatesOn: Events2.SetupIntentResolver,
-    activate: IntentResolver
-  }),
-  defineModule({
-    id: `${meta.id}/module/app-graph-serializer`,
-    activatesOn: Events2.AppGraphReady,
-    activate: AppGraphSerializer
-  }),
-  defineModule({
-    id: `${meta.id}/module/anchor-sort`,
-    // TODO(wittjosiah): More relevant event?
-    activatesOn: Events2.AppGraphReady,
-    activate: AnchorSort
-  }),
-  defineModule({
-    id: `${meta.id}/module/blueprint`,
-    activatesOn: Events2.SetupArtifactDefinition,
-    activate: BlueprintDefinition
-  }),
-  defineModule({
-    id: `${meta.id}/module/toolkit`,
-    // TODO(wittjosiah): Use a different event.
-    activatesOn: Events2.Startup,
-    activate: Toolkit
-  })
-]);
+      }),
+      extensions
+    ].filter(isTruthy)
+  }), [
+    id,
+    viewMode,
+    themeMode,
+    extensions
+  ]);
+  useImperativeHandle(forwardedRef, () => editorView, [
+    editorView
+  ]);
+  const [editorViewRegistry] = useCapabilities(MarkdownCapabilities2.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,
+    className: mx(editorClassNames(role), classNames),
+    role: "none",
+    "data-testid": "composer.markdownRoot",
+    "data-popover-collision-boundary": true,
+    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 useCallback2, useState } from "react";
+import { Editor } from "@dxos/react-ui-editor";
+import { composable, composableProps } from "@dxos/ui-theme";
+
+// 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
+var MarkdownEditorToolbar = composable(({ id, role, editorView, customActions, onAction, onFileUpload, onViewModeChange, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
+  const [upload, setUpload] = useState(null);
+  const uploadRef = useCallback2((next) => setUpload(() => next), []);
+  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(Editor.Toolbar, {
+    ...rest,
+    classNames: className,
+    attendableId: id,
+    role,
+    customActions,
+    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 MarkdownEditorProvider = ({ children, id, attendableId, object, settings, compact, viewMode, selectionManager, editorStateStore, extensions: extensionsProp, slashCommandGroups, onLinkQuery, onSelectObject, onAction, onFileUpload, onViewModeChange }) => {
+  const [previewBlocks, setPreviewBlocks] = useState2([]);
+  const previewOptions = useMemo2(() => ({
+    db: Obj2.isObject(object) ? Obj2.getDatabase(object) : void 0,
+    addBlockContainer: (block) => {
+      setPreviewBlocks((prev) => [
+        ...prev,
+        block
+      ]);
+    },
+    removeBlockContainer: ({ link }) => {
+      setPreviewBlocks((prev) => prev.filter(({ link: prevLink }) => prevLink.dxn !== link.dxn));
+    }
+  }), [
+    object
+  ]);
+  const menuOptions = useEditorMenuOptions({
+    slashCommandGroups,
+    onLinkQuery
+  });
+  const coreExtensions = useExtensions({
+    id,
+    object,
+    compact,
+    viewMode,
+    selectionManager,
+    editorStateStore,
+    previewOptions,
+    settings,
+    onSelectObject
+  });
+  const extensions = useMemo2(() => [
+    coreExtensions,
+    extensionsProp
+  ].filter(isNonNullable).flat(), [
+    coreExtensions,
+    extensionsProp
+  ]);
+  const editorRootProps = useMemo2(() => ({
+    extensions,
+    viewMode,
+    getMenu: menuOptions.getMenu,
+    trigger: menuOptions.trigger,
+    placeholder: menuOptions.placeholder,
+    ...menuOptions.filter !== void 0 ? {
+      filter: menuOptions.filter
+    } : {},
+    ...menuOptions.triggerKey !== void 0 ? {
+      triggerKey: menuOptions.triggerKey
+    } : {}
+  }), [
+    extensions,
+    viewMode,
+    menuOptions
+  ]);
+  const markdownContextValue = useMemo2(() => ({
+    id,
+    attendableId,
+    compact,
+    viewMode,
+    previewBlocks,
+    onAction,
+    onFileUpload,
+    onViewModeChange
+  }), [
+    id,
+    attendableId,
+    compact,
+    viewMode,
+    previewBlocks,
+    onAction,
+    onFileUpload,
+    onViewModeChange
+  ]);
+  return /* @__PURE__ */ React4.createElement(MarkdownEditorContextProvider, markdownContextValue, children(editorRootProps));
+};
+MarkdownEditorProvider.displayName = "MarkdownEditor.Provider";
+var MARKDOWN_EDITOR_CONTENT_NAME = "MarkdownEditor.Content";
+var MarkdownEditorContent2 = composable2(({ ...props }, _forwardedRef) => {
+  const { id, attendableId, compact, viewMode, onFileUpload } = useMarkdownEditorContext(MARKDOWN_EDITOR_CONTENT_NAME);
+  const { extensions, setController, state } = useEditorContext(MARKDOWN_EDITOR_CONTENT_NAME);
+  const handleRef = useCallback3((view) => {
+    setController(createEditorController(view));
+  }, [
+    setController
+  ]);
+  return /* @__PURE__ */ React4.createElement(MarkdownEditorContent, {
+    ...composableProps2(props),
+    id,
+    attendableId,
+    compact,
+    viewMode,
+    toolbarState: state,
+    extensions,
+    onFileUpload,
+    ref: handleRef
+  });
+});
+MarkdownEditorContent2.displayName = MARKDOWN_EDITOR_CONTENT_NAME;
+var MARKDOWN_EDITOR_TOOLBAR_NAME = "MarkdownEditor.Toolbar";
+var MarkdownEditorToolbar2 = (props) => {
+  const { id, attendableId, onAction, onFileUpload, onViewModeChange } = useMarkdownEditorContext(MARKDOWN_EDITOR_TOOLBAR_NAME);
+  const { controller } = useEditorContext(MARKDOWN_EDITOR_TOOLBAR_NAME);
+  return /* @__PURE__ */ React4.createElement(MarkdownEditorToolbar, {
+    ...props,
+    id: attendableId ?? id,
+    editorView: controller?.view ?? void 0,
+    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 = useMemo2(() => ({
+    subject
+  }), [
+    subject
+  ]);
+  return /* @__PURE__ */ createPortal2(/* @__PURE__ */ React4.createElement(Surface.Surface, {
+    type: AppSurface.Card,
+    data,
+    limit: 1
+  }), el);
+};
+var MarkdownEditor = {
+  Content: MarkdownEditorContent2,
+  Toolbar: MarkdownEditorToolbar2,
+  Blocks: MarkdownEditorBlocks
+};
+
+// src/components/index.ts
+var MarkdownSettings2 = lazy(() => import("./MarkdownSettings-62YSRY7L.mjs"));
 export {
   Markdown_exports as Markdown,
-  MarkdownAction_exports as MarkdownAction,
   MarkdownCapabilities,
+  MarkdownEditor,
+  MarkdownEditorProvider,
   MarkdownEvents,
   MarkdownPlugin,
+  MarkdownStateSchema,
+  Settings_exports as Settings,
   getContentSnippet,
   getFallbackName,
   isEditorModel,