@dxos/plugin-markdown 0.8.2-staging.7ac8446 → 0.8.2

package/dist/lib/browser/MarkdownContainer-5IEINNQB.mjs

@@ -0,0 +1,588 @@
+import "./chunk-ACAID3XF.mjs";
+import {
+  MarkdownCapabilities
+} from "./chunk-QVJETNGS.mjs";
+import {
+  getFallbackName,
+  setFallbackName
+} from "./chunk-77NGW7EO.mjs";
+import {
+  DocumentType
+} from "./chunk-ECSM56YC.mjs";
+import {
+  MARKDOWN_PLUGIN
+} from "./chunk-JX6XNEHE.mjs";
+
+// packages/plugins/plugin-markdown/src/components/MarkdownContainer.tsx
+import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
+import { Rx } from "@effect-rx/rx-react";
+import React3, { useEffect as useEffect2, useMemo as useMemo4 } from "react";
+import { Capabilities, useAppGraph, useCapabilities as useCapabilities2 } from "@dxos/app-framework";
+import { isInstanceOf } from "@dxos/echo-schema";
+import { fullyQualifiedId as fullyQualifiedId2, getSpace as getSpace2 } from "@dxos/react-client/echo";
+import { DataType } from "@dxos/schema";
+
+// packages/plugins/plugin-markdown/src/components/MarkdownEditor/MarkdownEditor.tsx
+import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
+import React, { useMemo as useMemo2, useEffect, useCallback } from "react";
+import { useDropzone } from "react-dropzone";
+import { invariant as invariant2 } from "@dxos/invariant";
+import { useThemeContext, useTranslation } from "@dxos/react-ui";
+import { EditorToolbar, createBasicExtensions, createMarkdownExtensions, createThemeExtensions, dropFile, editorSlots, editorGutter, processEditorPayload, stackItemContentEditorClassNames, useFormattingState, useTextEditor, useEditorToolbarState, addLink } from "@dxos/react-ui-editor";
+import { StackItem } from "@dxos/react-ui-stack";
+import { isNotFalsy, isNonNullable } from "@dxos/util";
+
+// packages/plugins/plugin-markdown/src/hooks/useSelectCurrentThread.tsx
+import { EditorView } from "@codemirror/view";
+import { Schema } from "effect";
+import { useMemo } from "react";
+import { createResolver, LayoutAction, useIntentResolver } from "@dxos/app-framework";
+import { invariant } from "@dxos/invariant";
+import { Cursor, setSelection } from "@dxos/react-ui-editor";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-markdown/src/hooks/useSelectCurrentThread.tsx";
+var useSelectCurrentThread = (editorView, documentId2) => {
+  const scrollIntoViewResolver = useMemo(() => createResolver({
+    intent: LayoutAction.UpdateLayout,
+    position: "hoist",
+    filter: (data) => {
+      if (!Schema.is(LayoutAction.ScrollIntoView.fields.input)(data)) {
+        return false;
+      }
+      return !!editorView && data.subject === documentId2 && !!data.options?.cursor;
+    },
+    resolve: ({ options: { cursor } }) => {
+      invariant(editorView, "Editor view is not defined.", {
+        F: __dxlog_file,
+        L: 32,
+        S: void 0,
+        A: [
+          "editorView",
+          "'Editor view is not defined.'"
+        ]
+      });
+      const range = 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.
+          EditorView.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(MARKDOWN_PLUGIN, scrollIntoViewResolver);
+};
+
+// packages/plugins/plugin-markdown/src/components/MarkdownEditor/MarkdownEditor.tsx
+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 = _useSignals();
+  try {
+    const { t } = useTranslation(MARKDOWN_PLUGIN);
+    const { themeMode } = useThemeContext();
+    const toolbarState = useEditorToolbarState({
+      viewMode
+    });
+    const formattingObserver = useFormattingState(toolbarState);
+    const { scrollTo, selection } = useMemo2(() => editorStateStore?.getState(id) ?? {}, [
+      id
+    ]);
+    const providerExtensions = useMemo2(() => extensionProviders?.flatMap((provider) => provider({})).filter(isNonNullable), [
+      extensionProviders
+    ]);
+    const handleDrop = 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
+        });
+      }
+    };
+    const { parentRef, view: editorView, focusAttributes } = useTextEditor(() => ({
+      initialValue,
+      extensions: [
+        formattingObserver,
+        createBasicExtensions({
+          readOnly: viewMode === "readonly",
+          placeholder: t("editor placeholder"),
+          scrollPastEnd: role === "section" ? false : scrollPastEnd
+        }),
+        createMarkdownExtensions({
+          themeMode
+        }),
+        createThemeExtensions({
+          themeMode,
+          syntaxHighlighting: true,
+          slots: editorSlots
+        }),
+        editorGutter,
+        role !== "section" && onFileUpload && dropFile({
+          onDrop: handleDrop
+        }),
+        providerExtensions,
+        extensions
+      ].filter(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 } = useDropzone({
+      multiple: false,
+      noDrag: true,
+      accept: {
+        "image/*": [
+          ".jpg",
+          ".jpeg",
+          ".png",
+          ".gif"
+        ]
+      }
+    });
+    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) {
+            addLink({
+              url: info.url,
+              image: true
+            })(editorView);
+          }
+        });
+      }
+    }, [
+      acceptedFiles,
+      editorView,
+      onFileUpload
+    ]);
+    const getView = useCallback(() => {
+      invariant2(editorView, void 0, {
+        F: __dxlog_file2,
+        L: 165,
+        S: void 0,
+        A: [
+          "editorView",
+          ""
+        ]
+      });
+      return editorView;
+    }, [
+      editorView
+    ]);
+    const handleViewModeChange = useCallback((mode) => onViewModeChange?.(id, mode), [
+      id,
+      onViewModeChange
+    ]);
+    const handleImageUpload = useCallback(() => {
+      if (onFileUpload) {
+        open();
+      }
+    }, [
+      onFileUpload
+    ]);
+    return /* @__PURE__ */ React.createElement(StackItem.Content, {
+      toolbar: !!toolbar
+    }, toolbar && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(EditorToolbar, {
+      attendableId: id,
+      role,
+      state: toolbarState,
+      customActions,
+      getView,
+      image: handleImageUpload,
+      viewMode: handleViewModeChange
+    }), /* @__PURE__ */ React.createElement("input", getInputProps())), /* @__PURE__ */ React.createElement("div", {
+      role: "none",
+      ref: parentRef,
+      "data-testid": "composer.markdownRoot",
+      "data-toolbar": toolbar ? "enabled" : "disabled",
+      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
+  ]);
+};
+
+// packages/plugins/plugin-markdown/src/extensions.tsx
+import React2, { useMemo as useMemo3 } from "react";
+import { createRoot } from "react-dom/client";
+import { createIntent, LayoutAction as LayoutAction2, useCapabilities, useIntentDispatcher } from "@dxos/app-framework";
+import { invariant as invariant3 } from "@dxos/invariant";
+import { createDocAccessor, fullyQualifiedId, getSpace } from "@dxos/react-client/echo";
+import { useIdentity } from "@dxos/react-client/halo";
+import { Icon, ThemeProvider } from "@dxos/react-ui";
+import { InputModeExtensions, createDataExtensions, autocomplete, decorateMarkdown, folding, formattingKeymap, linkTooltip, listener, preview, selectionState, typewriter, EditorView as EditorView2, documentId, Cursor as Cursor2 } from "@dxos/react-ui-editor";
+import { defaultTx } from "@dxos/react-ui-theme";
+import { isNotFalsy as isNotFalsy2 } from "@dxos/util";
+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 } = useIntentDispatcher();
+  const identity = useIdentity();
+  const space = getSpace(document) ?? getSpace(text);
+  const baseExtensions = useMemo3(() => 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 = useCapabilities(MarkdownCapabilities.Extensions);
+  const pluginExtensions = useMemo3(() => {
+    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 useMemo3(() => [
+    // NOTE: Data extensions must be first so that automerge is updated before other extensions compute their state.
+    document && createDataExtensions({
+      id: document.id,
+      text: document.content.target && createDocAccessor(document.content.target, [
+        "content"
+      ]),
+      space,
+      identity
+    }),
+    text && id && createDataExtensions({
+      id,
+      text: createDocAccessor(text, [
+        "content"
+      ]),
+      space,
+      identity
+    }),
+    selectionState(editorStateStore),
+    document && listener({
+      onChange: (text2) => setFallbackName(document, text2)
+    }),
+    baseExtensions,
+    pluginExtensions
+  ].filter(isNotFalsy2), [
+    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 && InputModeExtensions[settings.editorInputMode],
+    settings.folding && folding()
+  ].filter(isNotFalsy2);
+  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.
+        renderLinkButton: dispatch && (document || id) ? createLinkRenderer((id2) => {
+          void dispatch(createIntent(LayoutAction2.Open, {
+            part: "main",
+            subject: [
+              id2
+            ],
+            options: {
+              pivotId: document ? fullyQualifiedId(document) : id2
+            }
+          }));
+        }) : void 0
+      }),
+      linkTooltip(renderLinkTooltip),
+      preview()
+    ]);
+  }
+  if (query) {
+    extensions.push(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}](/${fullyQualifiedId(object)})`
+        } : void 0).filter(isNotFalsy2);
+      }
+    }));
+  }
+  if (settings.debug) {
+    const items = settings.typewriter?.split(/[,\n]/) ?? "";
+    if (items) {
+      extensions.push(typewriter({
+        items
+      }));
+    }
+  }
+  return extensions;
+};
+var selectionChange = (selectionManager) => {
+  return EditorView2.updateListener.of((update) => {
+    if (update.selectionSet) {
+      const id = update.state.facet(documentId);
+      const cursorConverter = update.state.facet(Cursor2.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);
+      invariant3(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__ */ React2.createElement("a", {
+    ...options,
+    className: style.hover
+  }, /* @__PURE__ */ React2.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__ */ React2.createElement("a", {
+    href: url,
+    rel: "noreferrer",
+    target: "_blank",
+    className: style.hover
+  }, web.origin, /* @__PURE__ */ React2.createElement(Icon, {
+    icon: "ph--arrow-square-out--bold",
+    size: 4,
+    classNames: style.icon
+  })));
+};
+var renderRoot = (root, node) => {
+  createRoot(root).render(/* @__PURE__ */ React2.createElement(ThemeProvider, {
+    tx: defaultTx
+  }, node));
+  return root;
+};
+
+// packages/plugins/plugin-markdown/src/components/MarkdownContainer.tsx
+var MarkdownContainer = ({ id, role, object, settings, selectionManager, viewMode, editorStateStore, onViewModeChange }) => {
+  var _effect = _useSignals2();
+  try {
+    const scrollPastEnd = role === "article";
+    const doc = isInstanceOf(DocumentType, object) ? object : void 0;
+    const text = isInstanceOf(DataType.Text, object) ? object : void 0;
+    const extensions = useExtensions({
+      document: doc,
+      text,
+      id,
+      settings,
+      selectionManager,
+      viewMode,
+      editorStateStore
+    });
+    if (doc) {
+      return /* @__PURE__ */ React3.createElement(DocumentEditor, {
+        id: fullyQualifiedId2(object),
+        role,
+        document: doc,
+        extensions,
+        viewMode,
+        settings,
+        scrollPastEnd,
+        onViewModeChange
+      });
+    } else if (text) {
+      return /* @__PURE__ */ React3.createElement(MarkdownEditor, {
+        id,
+        role,
+        initialValue: text.content,
+        extensions,
+        viewMode,
+        toolbar: settings.toolbar,
+        inputMode: settings.editorInputMode,
+        scrollPastEnd,
+        onViewModeChange
+      });
+    } else {
+      return /* @__PURE__ */ React3.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 = _useSignals2();
+  try {
+    const space = getSpace2(doc);
+    useEffect2(() => {
+      if (typeof doc.fallbackName === "string") {
+        return;
+      }
+      const fallbackName = doc.content?.target?.content ? getFallbackName(doc.content.target.content) : void 0;
+      if (fallbackName) {
+        doc.fallbackName = fallbackName;
+      }
+    }, [
+      doc,
+      doc.content
+    ]);
+    const [upload] = useCapabilities2(Capabilities.FileUploader);
+    const handleFileUpload = useMemo4(() => {
+      if (space === void 0 || upload === void 0) {
+        return void 0;
+      }
+      return async (file) => upload(file, space);
+    }, [
+      space,
+      upload
+    ]);
+    const { graph } = useAppGraph();
+    const customActions = useMemo4(() => {
+      return 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__ */ React3.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;
+export {
+  DocumentEditor,
+  MarkdownContainer_default as default
+};
+//# sourceMappingURL=MarkdownContainer-5IEINNQB.mjs.map