@nkzw/mdx-editor 0.1.0

package/dist/MarkdownEditor.js

@@ -0,0 +1,281 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useMemo, useEffect, useImperativeHandle, useState } from "react";
+import { horizontalRuleOnEnterPlugin } from "./horizontalRuleShortcut.js";
+import { MDXEditor } from "./MDXEditor.js";
+import { codeBlockPlugin } from "./plugins/codeblock/index.js";
+import { codeMirrorPlugin } from "./plugins/codemirror/index.js";
+import { headingsPlugin } from "./plugins/headings/index.js";
+import { linkDialogPlugin } from "./plugins/link-dialog/index.js";
+import { linkPlugin } from "./plugins/link/index.js";
+import { listsPlugin } from "./plugins/lists/index.js";
+import { markdownShortcutPlugin } from "./plugins/markdown-shortcut/index.js";
+import { quotePlugin } from "./plugins/quote/index.js";
+import { tablePlugin } from "./plugins/table/index.js";
+import { thematicBreakPlugin } from "./plugins/thematic-break/index.js";
+const canonicalMarkdownOptions = {
+  bullet: "-",
+  emphasis: "*",
+  fences: true,
+  listItemIndent: "one",
+  rule: "-",
+  strong: "*"
+};
+const emptyPlugins = [];
+const cx = (...classes) => classes.filter(Boolean).join(" ");
+const getSystemColorScheme = () => {
+  if (typeof window === "undefined") {
+    return "light";
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+};
+const getInheritedColorScheme = () => {
+  if (typeof document === "undefined") {
+    return "light";
+  }
+  const configuredTheme = document.documentElement.dataset.theme;
+  return configuredTheme === "dark" || configuredTheme === "light" ? configuredTheme : getSystemColorScheme();
+};
+const useResolvedColorScheme = (colorScheme) => {
+  const getResolved = () => colorScheme === "system" ? getSystemColorScheme() : colorScheme === "inherit" ? getInheritedColorScheme() : colorScheme;
+  const [resolved, setResolved] = useState(getResolved);
+  useEffect(() => {
+    setResolved(getResolved());
+  }, [colorScheme]);
+  useEffect(() => {
+    if (typeof window === "undefined" || colorScheme !== "system" && colorScheme !== "inherit") {
+      return;
+    }
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const update = () => setResolved(getResolved());
+    const observer = colorScheme === "inherit" && typeof MutationObserver !== "undefined" ? new MutationObserver(update) : null;
+    media.addEventListener("change", update);
+    observer?.observe(document.documentElement, {
+      attributeFilter: ["data-theme"],
+      attributes: true
+    });
+    return () => {
+      media.removeEventListener("change", update);
+      observer?.disconnect();
+    };
+  }, [colorScheme]);
+  return resolved;
+};
+const openHref = (href, {
+  onNavigate,
+  onOpenExternalLink,
+  resolveLink
+}) => {
+  const resolved = resolveLink?.(href);
+  if (resolved) {
+    onNavigate?.(resolved);
+    return;
+  }
+  if (!/^https?:\/\//.test(href)) {
+    return;
+  }
+  if (onOpenExternalLink) {
+    onOpenExternalLink(href);
+  } else if (typeof window !== "undefined") {
+    window.open(href, "_blank", "noopener,noreferrer");
+  }
+};
+const createDefaultPlugins = (onClickLink) => [
+  headingsPlugin(),
+  listsPlugin(),
+  quotePlugin(),
+  linkPlugin(),
+  linkDialogPlugin({
+    onClickLinkCallback: onClickLink
+  }),
+  tablePlugin(),
+  thematicBreakPlugin(),
+  codeBlockPlugin({
+    defaultCodeBlockLanguage: "txt"
+  }),
+  codeMirrorPlugin({
+    autoLoadLanguageSupport: false,
+    codeBlockLanguages: {
+      css: "CSS",
+      html: "HTML",
+      js: "JavaScript",
+      json: "JSON",
+      jsx: "JSX",
+      md: "Markdown",
+      sh: "Shell",
+      ts: "TypeScript",
+      tsx: "TSX",
+      txt: "Plain text"
+    }
+  }),
+  markdownShortcutPlugin(),
+  horizontalRuleOnEnterPlugin()
+];
+const MarkdownEditor = forwardRef(
+  function MarkdownEditor2({
+    additionalPlugins = emptyPlugins,
+    ariaLabel,
+    autoFocus = false,
+    className,
+    colorScheme = "system",
+    contentClassName,
+    defaultValue = "",
+    density = "document",
+    minHeight,
+    onBlur,
+    onChange,
+    onError,
+    onFocus,
+    onHeightChange,
+    onKeyDown,
+    onNavigate,
+    onOpenExternalLink,
+    overlayContainer,
+    placeholder,
+    readOnly = false,
+    resolveLink,
+    spellCheck = true,
+    toMarkdownOptions = canonicalMarkdownOptions,
+    value,
+    variant = "card"
+  }, forwardedRef) {
+    const initialMarkdownRef = useRef(value ?? defaultValue);
+    const currentMarkdownRef = useRef(initialMarkdownRef.current);
+    const editorRef = useRef(null);
+    const shellRef = useRef(null);
+    const handlersRef = useRef({
+      onNavigate,
+      onOpenExternalLink,
+      resolveLink
+    });
+    handlersRef.current = { onNavigate, onOpenExternalLink, resolveLink };
+    const resolvedColorScheme = useResolvedColorScheme(colorScheme);
+    const plugins = useMemo(
+      () => [
+        ...createDefaultPlugins((href) => openHref(href, handlersRef.current)),
+        ...additionalPlugins
+      ],
+      [additionalPlugins]
+    );
+    useEffect(() => {
+      if (value === void 0 || value === currentMarkdownRef.current) {
+        return;
+      }
+      currentMarkdownRef.current = value;
+      editorRef.current?.setMarkdown(value);
+    }, [value]);
+    useEffect(() => {
+      const contentEditable = shellRef.current?.querySelector(
+        ".mdx-editor-content[contenteditable]"
+      );
+      if (contentEditable && ariaLabel) {
+        contentEditable.setAttribute("aria-label", ariaLabel);
+      }
+    }, [ariaLabel]);
+    useEffect(() => {
+      const element = shellRef.current;
+      if (!element || !onHeightChange || typeof ResizeObserver === "undefined") {
+        return;
+      }
+      let previousHeight = -1;
+      const observer = new ResizeObserver(([entry]) => {
+        const height = entry?.borderBoxSize[0]?.blockSize ?? entry?.contentRect.height;
+        if (height !== void 0 && height !== previousHeight) {
+          previousHeight = height;
+          onHeightChange(height);
+        }
+      });
+      observer.observe(element);
+      return () => observer.disconnect();
+    }, [onHeightChange]);
+    useImperativeHandle(
+      forwardedRef,
+      () => ({
+        focus(options) {
+          editorRef.current?.focus(void 0, options);
+        },
+        getMarkdown() {
+          return editorRef.current?.getMarkdown() ?? currentMarkdownRef.current;
+        },
+        getSelectionMarkdown() {
+          return editorRef.current?.getSelectionMarkdown() ?? "";
+        },
+        insertMarkdown(markdown) {
+          editorRef.current?.insertMarkdown(markdown);
+        },
+        setMarkdown(markdown) {
+          currentMarkdownRef.current = markdown;
+          editorRef.current?.setMarkdown(markdown);
+        }
+      }),
+      []
+    );
+    const handleChange = (markdown, initialMarkdownNormalize) => {
+      currentMarkdownRef.current = markdown;
+      if (!initialMarkdownNormalize) {
+        onChange?.(markdown);
+      }
+    };
+    const handleLinkClick = (event) => {
+      const target = event.target;
+      const anchor = target.closest("a");
+      if (!anchor?.closest(".mdx-editor-content")) {
+        return;
+      }
+      event.preventDefault();
+      if (!event.metaKey && !event.ctrlKey) {
+        return;
+      }
+      const href = anchor.getAttribute("href");
+      if (href) {
+        openHref(href, handlersRef.current);
+      }
+    };
+    const rootClassName = cx(
+      "mdx-editor",
+      `mdx-editor-${density}`,
+      `mdx-editor-${variant}`,
+      resolvedColorScheme === "dark" && "dark-theme",
+      className
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cx("mdx-editor-shell", className),
+        "data-color-scheme": resolvedColorScheme,
+        "data-density": density,
+        "data-variant": variant,
+        onClickCapture: handleLinkClick,
+        onFocusCapture: onFocus,
+        onKeyDownCapture: onKeyDown,
+        ref: shellRef,
+        style: minHeight === void 0 ? void 0 : { minHeight },
+        children: /* @__PURE__ */ jsx(
+          MDXEditor,
+          {
+            autoFocus,
+            className: rootClassName,
+            contentEditableClassName: cx(
+              "mdx-editor-content",
+              contentClassName
+            ),
+            markdown: initialMarkdownRef.current,
+            onBlur,
+            onChange: handleChange,
+            onError: ({ error }) => onError?.(new Error(error)),
+            overlayContainer,
+            placeholder,
+            plugins,
+            readOnly,
+            ref: editorRef,
+            spellCheck,
+            toMarkdownOptions,
+            trim: false
+          }
+        )
+      }
+    );
+  }
+);
+export {
+  MarkdownEditor
+};

package/dist/PersistentMarkdownEditor.js

@@ -0,0 +1,358 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, useImperativeHandle, useEffect } from "react";
+import { MarkdownEditor } from "./MarkdownEditor.js";
+const defaultFromStorageContent = (content) => content.endsWith("\n") ? content.slice(0, -1) : content;
+const defaultToStorageContent = (content) => content.endsWith("\n") ? content : `${content}
+`;
+const clearTimer = (timer) => {
+  if (timer) {
+    clearTimeout(timer);
+  }
+};
+function PersistentMarkdownEditorInner({
+  adapter,
+  debounceMs = 50,
+  document,
+  fromStorageContent = defaultFromStorageContent,
+  lifecycleFlush = true,
+  maxWaitMs = 250,
+  onBlur,
+  onDocumentChange,
+  onError,
+  onLocalChange,
+  onStatusChange,
+  toStorageContent = defaultToStorageContent,
+  ...editorProps
+}, forwardedRef) {
+  const editorRef = useRef(null);
+  const callbacksRef = useRef({
+    adapter,
+    fromStorageContent,
+    onDocumentChange,
+    onError,
+    onLocalChange,
+    onStatusChange,
+    toStorageContent
+  });
+  callbacksRef.current = {
+    adapter,
+    fromStorageContent,
+    onDocumentChange,
+    onError,
+    onLocalChange,
+    onStatusChange,
+    toStorageContent
+  };
+  const initialContent = fromStorageContent(document.content);
+  const [value, setValue] = useState(initialContent);
+  const [conflictDocument, setConflictDocument] = useState(null);
+  const [errorMessage, setErrorMessage] = useState(null);
+  const sessionRef = useRef({
+    conflict: null,
+    document,
+    inFlight: null,
+    inFlightContent: null,
+    latestContent: initialContent,
+    maxWaitTimer: null,
+    savedContent: initialContent,
+    trailingTimer: null
+  });
+  const setStatus = (status) => {
+    callbacksRef.current.onStatusChange?.(status);
+  };
+  const clearSaveTimers = () => {
+    const session = sessionRef.current;
+    clearTimer(session.trailingTimer);
+    clearTimer(session.maxWaitTimer);
+    session.trailingTimer = null;
+    session.maxWaitTimer = null;
+  };
+  const hasUnsavedChanges = () => {
+    const session = sessionRef.current;
+    return session.latestContent !== session.savedContent || session.inFlight !== null;
+  };
+  const saveOnce = async (keepalive) => {
+    const session = sessionRef.current;
+    if (session.conflict) {
+      return false;
+    }
+    const editorContent = session.latestContent;
+    if (editorContent === session.savedContent) {
+      setStatus("saved");
+      return true;
+    }
+    setErrorMessage(null);
+    setStatus("saving");
+    session.inFlightContent = editorContent;
+    const request = callbacksRef.current.adapter.save({
+      content: callbacksRef.current.toStorageContent(editorContent),
+      document: session.document,
+      keepalive
+    }).then((result) => {
+      const storedContent = callbacksRef.current.fromStorageContent(
+        result.document.content
+      );
+      if (result.status === "conflict" && storedContent !== editorContent && storedContent !== session.latestContent && storedContent !== session.savedContent) {
+        session.conflict = result.document;
+        setConflictDocument(result.document);
+        setStatus("conflict");
+        return false;
+      }
+      session.document = result.document;
+      session.savedContent = result.status === "saved" ? editorContent : storedContent;
+      callbacksRef.current.onDocumentChange?.(result.document);
+      setStatus(
+        session.latestContent === session.savedContent ? "saved" : "unsaved"
+      );
+      return true;
+    }).catch((error) => {
+      const normalizedError = error instanceof Error ? error : new Error("Failed to save the Markdown document.");
+      setErrorMessage(normalizedError.message);
+      callbacksRef.current.onError?.(normalizedError);
+      setStatus("error");
+      return false;
+    }).finally(() => {
+      session.inFlight = null;
+      session.inFlightContent = null;
+    });
+    session.inFlight = request;
+    return request;
+  };
+  const flush = async ({ keepalive = false } = {}) => {
+    clearSaveTimers();
+    const session = sessionRef.current;
+    while (session.latestContent !== session.savedContent) {
+      if (session.conflict) {
+        return false;
+      }
+      if (session.inFlight) {
+        if (!await session.inFlight) {
+          return false;
+        }
+        continue;
+      }
+      if (!await saveOnce(keepalive)) {
+        return false;
+      }
+    }
+    if (session.inFlight) {
+      return session.inFlight;
+    }
+    setStatus("saved");
+    return true;
+  };
+  const scheduleSave = () => {
+    const session = sessionRef.current;
+    clearTimer(session.trailingTimer);
+    session.trailingTimer = setTimeout(() => {
+      void flush();
+    }, debounceMs);
+    if (!session.maxWaitTimer) {
+      session.maxWaitTimer = setTimeout(() => {
+        void flush();
+      }, maxWaitMs);
+    }
+  };
+  const applyExternalChange = (nextDocument) => {
+    const session = sessionRef.current;
+    const diskContent = callbacksRef.current.fromStorageContent(nextDocument.content);
+    if (nextDocument.version === session.document.version) {
+      return;
+    }
+    if (diskContent === session.savedContent || diskContent === session.latestContent || diskContent === session.inFlightContent) {
+      session.document = nextDocument;
+      session.savedContent = diskContent;
+      callbacksRef.current.onDocumentChange?.(nextDocument);
+      if (session.latestContent === session.savedContent) {
+        clearSaveTimers();
+        setStatus("saved");
+      } else {
+        setStatus(session.inFlight ? "saving" : "unsaved");
+      }
+      return;
+    }
+    if (session.latestContent !== session.savedContent || session.inFlight !== null) {
+      session.conflict = nextDocument;
+      setConflictDocument(nextDocument);
+      setStatus("conflict");
+      return;
+    }
+    clearSaveTimers();
+    session.document = nextDocument;
+    session.latestContent = diskContent;
+    session.savedContent = diskContent;
+    callbacksRef.current.onDocumentChange?.(nextDocument);
+    setValue(diskContent);
+    setStatus("saved");
+  };
+  useImperativeHandle(
+    forwardedRef,
+    () => ({
+      applyExternalChange,
+      flush,
+      focus(options) {
+        editorRef.current?.focus(options);
+      },
+      getMarkdown() {
+        return editorRef.current?.getMarkdown() ?? sessionRef.current.latestContent;
+      },
+      getSelectionMarkdown() {
+        return editorRef.current?.getSelectionMarkdown() ?? "";
+      },
+      hasUnsavedChanges,
+      insertMarkdown(markdown) {
+        editorRef.current?.insertMarkdown(markdown);
+      },
+      setMarkdown(markdown) {
+        sessionRef.current.latestContent = markdown;
+        setValue(markdown);
+      }
+    })
+  );
+  useEffect(() => {
+    const session = sessionRef.current;
+    if (document.id !== session.document.id) {
+      clearSaveTimers();
+      const nextContent = callbacksRef.current.fromStorageContent(document.content);
+      session.conflict = null;
+      session.document = document;
+      session.inFlight = null;
+      session.inFlightContent = null;
+      session.latestContent = nextContent;
+      session.savedContent = nextContent;
+      setConflictDocument(null);
+      setErrorMessage(null);
+      setValue(nextContent);
+      setStatus("saved");
+    } else if (document.version !== session.document.version) {
+      applyExternalChange(document);
+    }
+  }, [document]);
+  useEffect(() => {
+    setStatus("saved");
+    if (!lifecycleFlush || typeof window === "undefined") {
+      return () => clearSaveTimers();
+    }
+    const onVisibilityChange = () => {
+      if (globalThis.document.visibilityState === "hidden" && hasUnsavedChanges()) {
+        void flush({ keepalive: true });
+      }
+    };
+    const onPageHide = () => {
+      if (hasUnsavedChanges()) {
+        void flush({ keepalive: true });
+      }
+    };
+    const onBeforeUnload = (event) => {
+      if (!hasUnsavedChanges()) {
+        return;
+      }
+      void flush({ keepalive: true });
+      event.preventDefault();
+      event.returnValue = "";
+    };
+    globalThis.document.addEventListener("visibilitychange", onVisibilityChange);
+    window.addEventListener("beforeunload", onBeforeUnload);
+    window.addEventListener("pagehide", onPageHide);
+    return () => {
+      globalThis.document.removeEventListener(
+        "visibilitychange",
+        onVisibilityChange
+      );
+      window.removeEventListener("beforeunload", onBeforeUnload);
+      window.removeEventListener("pagehide", onPageHide);
+      clearSaveTimers();
+    };
+  }, [lifecycleFlush]);
+  const handleChange = (markdown) => {
+    const session = sessionRef.current;
+    session.latestContent = markdown;
+    setValue(markdown);
+    callbacksRef.current.onLocalChange?.(markdown);
+    if (markdown === session.savedContent) {
+      clearSaveTimers();
+      setStatus("saved");
+      return;
+    }
+    setStatus("unsaved");
+    scheduleSave();
+  };
+  const useDiskVersion = () => {
+    const remote = conflictDocument;
+    if (!remote) {
+      return;
+    }
+    const session = sessionRef.current;
+    const remoteContent = callbacksRef.current.fromStorageContent(remote.content);
+    clearSaveTimers();
+    session.conflict = null;
+    session.document = remote;
+    session.latestContent = remoteContent;
+    session.savedContent = remoteContent;
+    setConflictDocument(null);
+    setErrorMessage(null);
+    callbacksRef.current.onDocumentChange?.(remote);
+    setValue(remoteContent);
+    setStatus("saved");
+  };
+  const keepMyVersion = () => {
+    const remote = conflictDocument;
+    if (!remote) {
+      return;
+    }
+    const session = sessionRef.current;
+    session.conflict = null;
+    session.document = remote;
+    session.savedContent = callbacksRef.current.fromStorageContent(remote.content);
+    setConflictDocument(null);
+    setErrorMessage(null);
+    setStatus("unsaved");
+    void flush();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: [
+        "mdx-editor-persistent",
+        editorProps.className
+      ].filter(Boolean).join(" "),
+      children: [
+        conflictDocument ? /* @__PURE__ */ jsxs("div", { className: "mdx-editor-notice", "data-kind": "conflict", role: "alert", children: [
+          /* @__PURE__ */ jsx("span", { children: "The file on disk changed while you were editing." }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("button", { onClick: useDiskVersion, type: "button", children: "Use disk version" }),
+            /* @__PURE__ */ jsx("button", { onClick: keepMyVersion, type: "button", children: "Keep my version" })
+          ] })
+        ] }) : null,
+        errorMessage ? /* @__PURE__ */ jsxs("div", { className: "mdx-editor-notice", "data-kind": "error", role: "alert", children: [
+          /* @__PURE__ */ jsx("span", { children: errorMessage }),
+          /* @__PURE__ */ jsx("button", { onClick: () => void flush(), type: "button", children: "Retry" })
+        ] }) : null,
+        /* @__PURE__ */ jsx(
+          MarkdownEditor,
+          {
+            ...editorProps,
+            onBlur: (event) => {
+              onBlur?.(event);
+              void flush();
+            },
+            onChange: handleChange,
+            onError: (error) => {
+              setErrorMessage(error.message);
+              callbacksRef.current.onError?.(error);
+              setStatus("error");
+            },
+            ref: editorRef,
+            value
+          }
+        )
+      ]
+    }
+  );
+}
+const PersistentMarkdownEditor = forwardRef(
+  PersistentMarkdownEditorInner
+);
+export {
+  PersistentMarkdownEditor
+};

package/dist/RealmWithPlugins.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { Realm, RealmContext } from "@mdxeditor/gurx";
+import { tap } from "./utils/fp.js";
+function realmPlugin(plugin) {
+  return function(params) {
+    return {
+      init: (realm) => plugin.init?.(realm, params),
+      postInit: (realm) => plugin.postInit?.(realm, params),
+      update: (realm) => plugin.update?.(realm, params)
+    };
+  };
+}
+function RealmWithPlugins({ children, plugins }) {
+  const theRealm = React.useMemo(() => {
+    return tap(new Realm(), (r) => {
+      for (const plugin of plugins) {
+        plugin.init?.(r);
+      }
+      for (const plugin of plugins) {
+        plugin.postInit?.(r);
+      }
+    });
+  }, []);
+  React.useEffect(() => {
+    for (const plugin of plugins) {
+      plugin.update?.(theRealm);
+    }
+  });
+  return /* @__PURE__ */ jsx(RealmContext.Provider, { value: theRealm, children });
+}
+export {
+  RealmWithPlugins,
+  realmPlugin
+};