@dxos/plugin-markdown 0.8.2-staging.7ac8446 → 0.8.3-main.672df60

package/dist/lib/node/MarkdownContainer-BZK66EQD.cjs

@@ -0,0 +1,601 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var MarkdownContainer_BZK66EQD_exports = {};
+__export(MarkdownContainer_BZK66EQD_exports, {
+  DocumentEditor: () => DocumentEditor,
+  default: () => MarkdownContainer_default
+});
+module.exports = __toCommonJS(MarkdownContainer_BZK66EQD_exports);
+var import_chunk_BBDDZLQH = require("./chunk-BBDDZLQH.cjs");
+var import_chunk_IFYSBQE5 = require("./chunk-IFYSBQE5.cjs");
+var import_chunk_G7RBJX22 = require("./chunk-G7RBJX22.cjs");
+var import_chunk_RQS4KBMG = require("./chunk-RQS4KBMG.cjs");
+var import_chunk_ZU5OIHCY = require("./chunk-ZU5OIHCY.cjs");
+var import_tracking = require("@preact-signals/safe-react/tracking");
+var import_rx_react = require("@effect-rx/rx-react");
+var import_react = __toESM(require("react"));
+var import_app_framework = require("@dxos/app-framework");
+var import_echo_schema = require("@dxos/echo-schema");
+var import_echo = require("@dxos/react-client/echo");
+var import_schema = require("@dxos/schema");
+var import_tracking2 = require("@preact-signals/safe-react/tracking");
+var import_react2 = __toESM(require("react"));
+var import_react_dropzone = require("react-dropzone");
+var import_invariant = require("@dxos/invariant");
+var import_react_ui = require("@dxos/react-ui");
+var import_react_ui_editor = require("@dxos/react-ui-editor");
+var import_react_ui_stack = require("@dxos/react-ui-stack");
+var import_util = require("@dxos/util");
+var import_view = require("@codemirror/view");
+var import_effect = require("effect");
+var import_react3 = require("react");
+var import_app_framework2 = require("@dxos/app-framework");
+var import_invariant2 = require("@dxos/invariant");
+var import_react_ui_editor2 = require("@dxos/react-ui-editor");
+var import_react4 = __toESM(require("react"));
+var import_client = require("react-dom/client");
+var import_app_framework3 = require("@dxos/app-framework");
+var import_invariant3 = require("@dxos/invariant");
+var import_echo2 = require("@dxos/react-client/echo");
+var import_halo = require("@dxos/react-client/halo");
+var import_react_ui2 = require("@dxos/react-ui");
+var import_react_ui_editor3 = require("@dxos/react-ui-editor");
+var import_react_ui_theme = require("@dxos/react-ui-theme");
+var import_util2 = require("@dxos/util");
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-markdown/src/hooks/useSelectCurrentThread.tsx";
+var useSelectCurrentThread = (editorView, documentId2) => {
+  const scrollIntoViewResolver = (0, import_react3.useMemo)(() => (0, import_app_framework2.createResolver)({
+    intent: import_app_framework2.LayoutAction.UpdateLayout,
+    position: "hoist",
+    filter: (data) => {
+      if (!import_effect.Schema.is(import_app_framework2.LayoutAction.ScrollIntoView.fields.input)(data)) {
+        return false;
+      }
+      return !!editorView && data.subject === documentId2 && !!data.options?.cursor;
+    },
+    resolve: ({ options: { cursor } }) => {
+      (0, import_invariant2.invariant)(editorView, "Editor view is not defined.", {
+        F: __dxlog_file,
+        L: 32,
+        S: void 0,
+        A: [
+          "editorView",
+          "'Editor view is not defined.'"
+        ]
+      });
+      const range = import_react_ui_editor2.Cursor.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.
+          import_view.EditorView.scrollIntoView(range.from, {
+            y: "start",
+            yMargin: 96
+          })
+        ];
+        if (selection) {
+          effects.push(import_react_ui_editor2.setSelection.of({
+            current: documentId2
+          }));
+        }
+        editorView.dispatch({
+          effects,
+          selection: selection ? {
+            anchor: range.from
+          } : void 0
+        });
+      }
+    }
+  }), [
+    documentId2,
+    editorView
+  ]);
+  (0, import_app_framework2.useIntentResolver)(import_chunk_ZU5OIHCY.MARKDOWN_PLUGIN, scrollIntoViewResolver);
+};
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-markdown/src/components/MarkdownEditor/MarkdownEditor.tsx";
+var MarkdownEditor = ({ id, role = "article", initialValue, extensions, extensionProviders, scrollPastEnd, toolbar, customActions, viewMode, editorStateStore, onFileUpload, onViewModeChange }) => {
+  var _effect = (0, import_tracking2.useSignals)();
+  try {
+    const { t } = (0, import_react_ui.useTranslation)(import_chunk_ZU5OIHCY.MARKDOWN_PLUGIN);
+    const { themeMode } = (0, import_react_ui.useThemeContext)();
+    const toolbarState = (0, import_react_ui_editor.useEditorToolbarState)({
+      viewMode
+    });
+    const formattingObserver = (0, import_react_ui_editor.useFormattingState)(toolbarState);
+    const { scrollTo, selection } = (0, import_react2.useMemo)(() => editorStateStore?.getState(id) ?? {}, [
+      id
+    ]);
+    const providerExtensions = (0, import_react2.useMemo)(() => extensionProviders?.flatMap((provider) => provider({})).filter(import_util.isNonNullable), [
+      extensionProviders
+    ]);
+    const handleDrop = async (view, { files }) => {
+      const file = files[0];
+      const info = file && onFileUpload ? await onFileUpload(file) : void 0;
+      if (info) {
+        (0, import_react_ui_editor.processEditorPayload)(view, {
+          type: "image",
+          data: info.url
+        });
+      }
+    };
+    const { parentRef, view: editorView, focusAttributes } = (0, import_react_ui_editor.useTextEditor)(() => ({
+      initialValue,
+      extensions: [
+        formattingObserver,
+        (0, import_react_ui_editor.createBasicExtensions)({
+          readOnly: viewMode === "readonly",
+          placeholder: t("editor placeholder"),
+          scrollPastEnd: role === "section" ? false : scrollPastEnd
+        }),
+        (0, import_react_ui_editor.createMarkdownExtensions)({
+          themeMode
+        }),
+        (0, import_react_ui_editor.createThemeExtensions)({
+          themeMode,
+          syntaxHighlighting: true,
+          slots: import_react_ui_editor.editorSlots
+        }),
+        import_react_ui_editor.editorGutter,
+        role !== "section" && onFileUpload && (0, import_react_ui_editor.dropFile)({
+          onDrop: handleDrop
+        }),
+        providerExtensions,
+        extensions
+      ].filter(import_util.isNotFalsy),
+      ...role !== "section" && {
+        id,
+        scrollTo,
+        selection,
+        // TODO(wittjosiah): Autofocus based on layout is racy.
+        // autoFocus: layoutPlugin?.provides.layout ? layoutPlugin?.provides.layout.scrollIntoView === id : true,
+        moveToEndOfLine: true
+      }
+    }), [
+      id,
+      formattingObserver,
+      viewMode,
+      themeMode,
+      extensions,
+      providerExtensions
+    ]);
+    useTest(editorView);
+    useSelectCurrentThread(editorView, id);
+    const { acceptedFiles, getInputProps, open } = (0, import_react_dropzone.useDropzone)({
+      multiple: false,
+      noDrag: true,
+      accept: {
+        "image/*": [
+          ".jpg",
+          ".jpeg",
+          ".png",
+          ".gif"
+        ]
+      }
+    });
+    (0, import_react2.useEffect)(() => {
+      if (editorView && onFileUpload && acceptedFiles.length) {
+        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) {
+            (0, import_react_ui_editor.addLink)({
+              url: info.url,
+              image: true
+            })(editorView);
+          }
+        });
+      }
+    }, [
+      acceptedFiles,
+      editorView,
+      onFileUpload
+    ]);
+    const getView = (0, import_react2.useCallback)(() => {
+      (0, import_invariant.invariant)(editorView, void 0, {
+        F: __dxlog_file2,
+        L: 165,
+        S: void 0,
+        A: [
+          "editorView",
+          ""
+        ]
+      });
+      return editorView;
+    }, [
+      editorView
+    ]);
+    const handleViewModeChange = (0, import_react2.useCallback)((mode) => onViewModeChange?.(id, mode), [
+      id,
+      onViewModeChange
+    ]);
+    const handleImageUpload = (0, import_react2.useCallback)(() => {
+      if (onFileUpload) {
+        open();
+      }
+    }, [
+      onFileUpload
+    ]);
+    return /* @__PURE__ */ import_react2.default.createElement(import_react_ui_stack.StackItem.Content, {
+      toolbar: !!toolbar
+    }, toolbar && /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui_editor.EditorToolbar, {
+      attendableId: id,
+      role,
+      state: toolbarState,
+      customActions,
+      getView,
+      image: handleImageUpload,
+      viewMode: handleViewModeChange
+    }), /* @__PURE__ */ import_react2.default.createElement("input", getInputProps())), /* @__PURE__ */ import_react2.default.createElement("div", {
+      role: "none",
+      ref: parentRef,
+      "data-testid": "composer.markdownRoot",
+      "data-toolbar": toolbar ? "enabled" : "disabled",
+      className: (0, import_react_ui_editor.stackItemContentEditorClassNames)(role),
+      "data-popover-collision-boundary": true,
+      ...focusAttributes
+    }));
+  } finally {
+    _effect.f();
+  }
+};
+var useTest = (view) => {
+  (0, import_react2.useEffect)(() => {
+    const composer = window.composer;
+    if (composer) {
+      composer.editorView = view;
+    }
+  }, [
+    view
+  ]);
+};
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-markdown/src/extensions.tsx";
+var useExtensions = ({ document, id, text, settings, selectionManager, viewMode, editorStateStore }) => {
+  const { dispatchPromise: dispatch } = (0, import_app_framework3.useIntentDispatcher)();
+  const identity = (0, import_halo.useIdentity)();
+  const space = (0, import_echo2.getSpace)(document) ?? (0, import_echo2.getSpace)(text);
+  const baseExtensions = (0, import_react4.useMemo)(() => createBaseExtensions({
+    document,
+    id,
+    text,
+    settings,
+    selectionManager,
+    viewMode,
+    dispatch
+  }), [
+    document,
+    id,
+    text,
+    viewMode,
+    dispatch,
+    settings,
+    settings.editorInputMode,
+    settings.folding,
+    settings.numberedHeadings,
+    settings.debug,
+    settings.typewriter,
+    selectionManager
+  ]);
+  const extensionProviders = (0, import_app_framework3.useCapabilities)(import_chunk_IFYSBQE5.MarkdownCapabilities.Extensions);
+  const pluginExtensions = (0, import_react4.useMemo)(() => {
+    if (!document) {
+      return [];
+    }
+    return extensionProviders.flat().reduce((acc, provider) => {
+      const extension = typeof provider === "function" ? provider({
+        document
+      }) : provider;
+      if (extension) {
+        acc.push(extension);
+      }
+      return acc;
+    }, []);
+  }, [
+    extensionProviders,
+    document
+  ]);
+  return (0, import_react4.useMemo)(() => [
+    // NOTE: Data extensions must be first so that automerge is updated before other extensions compute their state.
+    document && (0, import_react_ui_editor3.createDataExtensions)({
+      id: document.id,
+      text: document.content.target && (0, import_echo2.createDocAccessor)(document.content.target, [
+        "content"
+      ]),
+      space,
+      identity
+    }),
+    text && id && (0, import_react_ui_editor3.createDataExtensions)({
+      id,
+      text: (0, import_echo2.createDocAccessor)(text, [
+        "content"
+      ]),
+      space,
+      identity
+    }),
+    (0, import_react_ui_editor3.selectionState)(editorStateStore),
+    document && (0, import_react_ui_editor3.listener)({
+      onChange: (text2) => (0, import_chunk_G7RBJX22.setFallbackName)(document, text2)
+    }),
+    baseExtensions,
+    pluginExtensions
+  ].filter(import_util2.isNotFalsy), [
+    baseExtensions,
+    pluginExtensions,
+    document,
+    document?.content?.target,
+    text,
+    id,
+    space,
+    identity
+  ]);
+};
+var createBaseExtensions = ({ document, id, dispatch, settings, selectionManager, query, viewMode }) => {
+  const extensions = [
+    selectionManager && selectionChange(selectionManager),
+    settings.editorInputMode && import_react_ui_editor3.InputModeExtensions[settings.editorInputMode],
+    settings.folding && (0, import_react_ui_editor3.folding)()
+  ].filter(import_util2.isNotFalsy);
+  if (viewMode !== "source") {
+    extensions.push(...[
+      (0, import_react_ui_editor3.formattingKeymap)(),
+      (0, import_react_ui_editor3.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.
+        renderLinkButton: dispatch && (document || id) ? createLinkRenderer((id2) => {
+          void dispatch((0, import_app_framework3.createIntent)(import_app_framework3.LayoutAction.Open, {
+            part: "main",
+            subject: [
+              id2
+            ],
+            options: {
+              pivotId: document ? (0, import_echo2.fullyQualifiedId)(document) : id2
+            }
+          }));
+        }) : void 0
+      }),
+      (0, import_react_ui_editor3.linkTooltip)(renderLinkTooltip),
+      (0, import_react_ui_editor3.preview)()
+    ]);
+  }
+  if (query) {
+    extensions.push((0, import_react_ui_editor3.autocomplete)({
+      onSearch: (text) => {
+        return query.objects.map((object) => object.name?.length && object.id !== document?.id ? {
+          label: object.name,
+          // TODO(burdon): Factor out URL builder.
+          apply: `[${object.name}](/${(0, import_echo2.fullyQualifiedId)(object)})`
+        } : void 0).filter(import_util2.isNotFalsy);
+      }
+    }));
+  }
+  if (settings.debug) {
+    const items = settings.typewriter?.split(/[,\n]/) ?? "";
+    if (items) {
+      extensions.push((0, import_react_ui_editor3.typewriter)({
+        items
+      }));
+    }
+  }
+  return extensions;
+};
+var selectionChange = (selectionManager) => {
+  return import_react_ui_editor3.EditorView.updateListener.of((update) => {
+    if (update.selectionSet) {
+      const id = update.state.facet(import_react_ui_editor3.documentId);
+      const cursorConverter = update.state.facet(import_react_ui_editor3.Cursor.converter);
+      const 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);
+    }
+  });
+};
+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);
+      (0, import_invariant3.invariant)(qualifiedId, "Invalid link format.", {
+        F: __dxlog_file3,
+        L: 281,
+        S: void 0,
+        A: [
+          "qualifiedId",
+          "'Invalid link format.'"
+        ]
+      });
+      onSelectObject(qualifiedId);
+    }
+  } : {
+    href: url,
+    rel: "noreferrer",
+    target: "_blank"
+  };
+  renderRoot(el, /* @__PURE__ */ import_react4.default.createElement("a", {
+    ...options,
+    className: style.hover
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.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__ */ import_react4.default.createElement("a", {
+    href: url,
+    rel: "noreferrer",
+    target: "_blank",
+    className: style.hover
+  }, web.origin, /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.Icon, {
+    icon: "ph--arrow-square-out--bold",
+    size: 4,
+    classNames: style.icon
+  })));
+};
+var renderRoot = (root, node) => {
+  (0, import_client.createRoot)(root).render(/* @__PURE__ */ import_react4.default.createElement(import_react_ui2.ThemeProvider, {
+    tx: import_react_ui_theme.defaultTx
+  }, node));
+  return root;
+};
+var MarkdownContainer = ({ id, role, object, settings, selectionManager, viewMode, editorStateStore, onViewModeChange }) => {
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    const scrollPastEnd = role === "article";
+    const doc = (0, import_echo_schema.isInstanceOf)(import_chunk_RQS4KBMG.DocumentType, object) ? object : void 0;
+    const text = (0, import_echo_schema.isInstanceOf)(import_schema.DataType.Text, object) ? object : void 0;
+    const extensions = useExtensions({
+      document: doc,
+      text,
+      id,
+      settings,
+      selectionManager,
+      viewMode,
+      editorStateStore
+    });
+    if (doc) {
+      return /* @__PURE__ */ import_react.default.createElement(DocumentEditor, {
+        id: (0, import_echo.fullyQualifiedId)(object),
+        role,
+        document: doc,
+        extensions,
+        viewMode,
+        settings,
+        scrollPastEnd,
+        onViewModeChange
+      });
+    } else if (text) {
+      return /* @__PURE__ */ import_react.default.createElement(MarkdownEditor, {
+        id,
+        role,
+        initialValue: text.content,
+        extensions,
+        viewMode,
+        toolbar: settings.toolbar,
+        inputMode: settings.editorInputMode,
+        scrollPastEnd,
+        onViewModeChange
+      });
+    } else {
+      return /* @__PURE__ */ import_react.default.createElement(MarkdownEditor, {
+        id,
+        role,
+        initialValue: object.text,
+        extensions,
+        viewMode,
+        toolbar: settings.toolbar,
+        inputMode: settings.editorInputMode,
+        scrollPastEnd,
+        onViewModeChange
+      });
+    }
+  } finally {
+    _effect.f();
+  }
+};
+var DocumentEditor = ({ id, document: doc, settings, viewMode, ...props }) => {
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    const space = (0, import_echo.getSpace)(doc);
+    (0, import_react.useEffect)(() => {
+      if (typeof doc.fallbackName === "string") {
+        return;
+      }
+      const fallbackName = doc.content?.target?.content ? (0, import_chunk_G7RBJX22.getFallbackName)(doc.content.target.content) : void 0;
+      if (fallbackName) {
+        doc.fallbackName = fallbackName;
+      }
+    }, [
+      doc,
+      doc.content
+    ]);
+    const [upload] = (0, import_app_framework.useCapabilities)(import_app_framework.Capabilities.FileUploader);
+    const handleFileUpload = (0, import_react.useMemo)(() => {
+      if (space === void 0 || upload === void 0) {
+        return void 0;
+      }
+      return async (file) => upload(file, space);
+    }, [
+      space,
+      upload
+    ]);
+    const { graph } = (0, import_app_framework.useAppGraph)();
+    const customActions = (0, import_react.useMemo)(() => {
+      return import_rx_react.Rx.make((get) => {
+        const actions = get(graph.actions(id));
+        const nodes = actions.filter((action) => action.properties.disposition === "toolbar");
+        return {
+          nodes,
+          edges: nodes.map((node) => ({
+            source: "root",
+            target: node.id
+          }))
+        };
+      });
+    }, [
+      graph
+    ]);
+    return /* @__PURE__ */ import_react.default.createElement(MarkdownEditor, {
+      id,
+      initialValue: doc.content?.target?.content,
+      viewMode,
+      toolbar: settings.toolbar,
+      customActions,
+      inputMode: settings.editorInputMode,
+      onFileUpload: handleFileUpload,
+      ...props
+    });
+  } finally {
+    _effect.f();
+  }
+};
+var MarkdownContainer_default = MarkdownContainer;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DocumentEditor
+});
+//# sourceMappingURL=MarkdownContainer-BZK66EQD.cjs.map