@nkzw/mdx-editor 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Petyo Ivanov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,86 @@
+# @nkzw/mdx-editor
+
+A fast, polished inline Markdown editor for React. It is a maintained fork of [`@mdxeditor/editor`](https://github.com/mdx-editor/editor) with upgraded Lexical internals and editing behavior tuned for keyboard-first document and comment authoring.
+
+## Install
+
+```sh
+pnpm add @nkzw/mdx-editor
+```
+
+```tsx
+import { MarkdownEditor } from '@nkzw/mdx-editor'
+import '@nkzw/mdx-editor/styles.css'
+
+export function Editor() {
+  const [markdown, setMarkdown] = useState('# Hello')
+
+  return <MarkdownEditor onChange={setMarkdown} value={markdown} />
+}
+```
+
+The default editor includes headings, lists, quotes, links, tables, thematic breaks, fenced code blocks, Markdown shortcuts, and canonical Markdown serialization. It intentionally has no toolbar.
+
+## Embedded editors
+
+```tsx
+<MarkdownEditor
+  colorScheme="inherit"
+  density="compact"
+  onChange={setDraft}
+  value={draft}
+  variant="embedded"
+/>
+```
+
+Use `onKeyDown` for host application shortcuts and `onHeightChange` when the editor lives inside a virtualized layout.
+
+## Persistence
+
+File and network synchronization are optional:
+
+```tsx
+import {
+  PersistentMarkdownEditor,
+  type MarkdownPersistenceAdapter
+} from '@nkzw/mdx-editor/persistence'
+
+const adapter: MarkdownPersistenceAdapter<Document> = {
+  async save({ content, document, keepalive }) {
+    // Save with document.version as the optimistic concurrency token.
+    return { document: await save(content, document, keepalive), status: 'saved' }
+  }
+}
+```
+
+The persistence layer includes debounced saves, a maximum save wait, lifecycle flushing, optimistic concurrency, same-content conflict suppression, disk update reconciliation, and default conflict/error UI.
+
+## Styling
+
+Defaults reproduce the original Notes document editor. Override variables on the editor class:
+
+```css
+.comment-editor {
+  --mdx-editor-bg: transparent;
+  --mdx-editor-border: transparent;
+  --mdx-editor-font-size: 13px;
+  --mdx-editor-line-height: 1.45;
+  --mdx-editor-padding: 9px 10px 10px;
+}
+```
+
+The primary variables are `--mdx-editor-bg`, `--mdx-editor-border`, `--mdx-editor-text`, `--mdx-editor-muted`, `--mdx-editor-accent`, `--mdx-editor-accent-soft`, `--mdx-editor-code-bg`, `--mdx-editor-hover`, `--mdx-editor-selection`, `--mdx-editor-table-stripe`, `--mdx-editor-font`, `--mdx-editor-mono-font`, `--mdx-editor-radius`, `--mdx-editor-padding`, `--mdx-editor-font-size`, and `--mdx-editor-line-height`.
+
+## Advanced API
+
+The complete low-level fork is available from:
+
+```ts
+import { MDXEditor, realmPlugin } from '@nkzw/mdx-editor/core'
+```
+
+See [UPSTREAM.md](./UPSTREAM.md) for the upstream baseline and maintained patch set.
+
+## License
+
+MIT. Original MDXEditor copyright and license are retained in [LICENSE](./LICENSE).

package/UPSTREAM.md

@@ -0,0 +1,21 @@
+# Upstream
+
+This package is a source fork of [`@mdxeditor/editor`](https://github.com/mdx-editor/editor).
+
+- Upstream version: `4.0.4`
+- Upstream tag: `v4.0.4`
+- Upstream commit: `d0990c33be0441c841232613d03bde16447b8203`
+- License: MIT, retained in `LICENSE`
+
+## Maintained changes
+
+- Upgrade all Lexical packages from `0.35.0` to `0.45.0`.
+- Use TypeScript's `bundler` module resolution for Lexical's package exports.
+- Use the canonical Lexical extension horizontal-rule type during Markdown export.
+- Fix inline-code delimiter conversion, IME completion, boundary-arrow navigation, and undo behavior.
+- Fix first/last list import and caret behavior when removing the first list item.
+- Add the `---` plus Enter horizontal-rule shortcut without an extra blank line.
+- Refine links, icons, and table editing controls.
+- Add a high-level controlled `MarkdownEditor` API and optional persistence adapter.
+
+When syncing upstream, preserve these changes as focused commits and run `pnpm check`.

package/dist/EditorIcon.js

@@ -0,0 +1,75 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import styles from "./styles/ui.module.css.js";
+const EditorIcon = ({ className, name }) => {
+  const paths = {
+    "add-column": /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("rect", { x: "7", y: "3", width: "10", height: "18", rx: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "M3 9v6M1 12h4" })
+    ] }),
+    "add-row": /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("rect", { x: "3", y: "7", width: "18", height: "10", rx: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "M9 21h6M12 19v4" })
+    ] }),
+    "align-center": /* @__PURE__ */ jsx("path", { d: "M4 6h16M7 10h10M4 14h16M7 18h10" }),
+    "align-left": /* @__PURE__ */ jsx("path", { d: "M4 6h16M4 10h10M4 14h16M4 18h10" }),
+    "align-right": /* @__PURE__ */ jsx("path", { d: "M4 6h16M10 10h10M4 14h16M10 18h10" }),
+    check: /* @__PURE__ */ jsx("path", { d: "m5 12 4 4L19 6" }),
+    "chevron-down": /* @__PURE__ */ jsx("path", { d: "m7 9 5 5 5-5" }),
+    copy: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("rect", { width: "13", height: "13", x: "9", y: "9", rx: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+    ] }),
+    delete: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("path", { d: "M4 7h16M9 7V4h6v3M7 7l1 14h8l1-14" }),
+      /* @__PURE__ */ jsx("path", { d: "M10 11v6M14 11v6" })
+    ] }),
+    edit: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("path", { d: "M12 20h9" }),
+      /* @__PURE__ */ jsx("path", { d: "M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4Z" })
+    ] }),
+    external: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("path", { d: "M15 3h6v6" }),
+      /* @__PURE__ */ jsx("path", { d: "m10 14 11-11" }),
+      /* @__PURE__ */ jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })
+    ] }),
+    "insert-column-left": /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("rect", { x: "10", y: "4", width: "10", height: "16", rx: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "M5 8v8M1 12h8" })
+    ] }),
+    "insert-column-right": /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "10", height: "16", rx: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "M19 8v8M15 12h8" })
+    ] }),
+    "insert-row-above": /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("rect", { x: "4", y: "10", width: "16", height: "10", rx: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "M8 5h8M12 1v8" })
+    ] }),
+    "insert-row-below": /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "16", height: "10", rx: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "M8 19h8M12 15v8" })
+    ] }),
+    more: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("circle", { cx: "5", cy: "12", r: "1" }),
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1" }),
+      /* @__PURE__ */ jsx("circle", { cx: "19", cy: "12", r: "1" })
+    ] }),
+    unlink: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("path", { d: "m18.8 18.8-3.6-3.6" }),
+      /* @__PURE__ */ jsx("path", { d: "m8.8 8.8-3.6-3.6" }),
+      /* @__PURE__ */ jsx("path", { d: "M9.9 4.2 11 3.1a5 5 0 0 1 7.1 7.1L17 11.3" }),
+      /* @__PURE__ */ jsx("path", { d: "m14.1 19.8-1.1 1.1a5 5 0 0 1-7.1-7.1L7 12.7" })
+    ] })
+  };
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: className ? `${styles.editorIcon} ${className}` : styles.editorIcon,
+      viewBox: "0 0 24 24",
+      children: paths[name]
+    }
+  );
+};
+export {
+  EditorIcon
+};

package/dist/FormatConstants.js

@@ -0,0 +1,20 @@
+const DEFAULT_FORMAT = 0;
+const IS_BOLD = 1;
+const IS_ITALIC = 2;
+const IS_STRIKETHROUGH = 4;
+const IS_UNDERLINE = 8;
+const IS_CODE = 16;
+const IS_SUBSCRIPT = 32;
+const IS_SUPERSCRIPT = 64;
+const IS_HIGHLIGHT = 128;
+export {
+  DEFAULT_FORMAT,
+  IS_BOLD,
+  IS_CODE,
+  IS_HIGHLIGHT,
+  IS_ITALIC,
+  IS_STRIKETHROUGH,
+  IS_SUBSCRIPT,
+  IS_SUPERSCRIPT,
+  IS_UNDERLINE
+};

package/dist/MDXEditor.js

@@ -0,0 +1,189 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { usePublisher, useCellValue, useCellValues, useRealm } from "@mdxeditor/gurx";
+import React from "react";
+import { corePlugin, editorRootElementRef$, editorWrapperElementRef$, rootEditor$, useTranslation, contentEditableRef$, contentEditableWrapperElement$, contentEditableClassName$, spellCheck$, composerChildren$, topAreaChildren$, editorWrappers$, placeholder$, bottomAreaChildren$, viewMode$, activeEditor$, exportVisitors$, toMarkdownExtensions$, toMarkdownOptions$, jsxComponentDescriptors$, jsxIsAvailable$, insertMarkdown$, setMarkdown$, markdownSourceEditorValue$, markdown$ } from "./plugins/core/index.js";
+import { RealmWithPlugins } from "./RealmWithPlugins.js";
+import { createLexicalComposerContext, LexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import classNames from "classnames";
+import { defaultSvgIcons } from "./defaultSvgIcons.js";
+import { lexicalTheme } from "./styles/lexicalTheme.js";
+import styles from "./styles/ui.module.css.js";
+import { noop } from "./utils/fp.js";
+import { getSelectionAsMarkdown } from "./utils/lexicalHelpers.js";
+const LexicalProvider = ({ children }) => {
+  const rootEditor = useCellValue(rootEditor$);
+  const composerContextValue = React.useMemo(() => {
+    return [rootEditor, createLexicalComposerContext(null, lexicalTheme)];
+  }, [rootEditor]);
+  return /* @__PURE__ */ jsx(LexicalComposerContext.Provider, { value: composerContextValue, children });
+};
+const RichTextEditor = () => {
+  const t = useTranslation();
+  const setContentEditableRef = usePublisher(contentEditableRef$);
+  const setEditorRootWrapperElement = usePublisher(contentEditableWrapperElement$);
+  const onRef = (el) => {
+    setEditorRootWrapperElement(el);
+    setContentEditableRef(el ? { current: el } : null);
+  };
+  const [contentEditableClassName, spellCheck, composerChildren, topAreaChildren, editorWrappers, placeholder, bottomAreaChildren] = useCellValues(
+    contentEditableClassName$,
+    spellCheck$,
+    composerChildren$,
+    topAreaChildren$,
+    editorWrappers$,
+    placeholder$,
+    bottomAreaChildren$
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    topAreaChildren.map((Child, index) => /* @__PURE__ */ jsx(Child, {}, index)),
+    /* @__PURE__ */ jsx(RenderRecursiveWrappers, { wrappers: editorWrappers, children: /* @__PURE__ */ jsx("div", { className: classNames(styles.rootContentEditableWrapper, "mdxeditor-root-contenteditable"), children: /* @__PURE__ */ jsx(
+      RichTextPlugin,
+      {
+        contentEditable: /* @__PURE__ */ jsx("div", { ref: onRef, children: /* @__PURE__ */ jsx(
+          ContentEditable,
+          {
+            className: classNames(styles.contentEditable, contentEditableClassName),
+            ariaLabel: t("contentArea.editableMarkdown", "editable markdown"),
+            spellCheck
+          }
+        ) }),
+        placeholder: /* @__PURE__ */ jsx("div", { className: classNames(styles.contentEditable, styles.placeholder, contentEditableClassName), children: /* @__PURE__ */ jsx("p", { children: placeholder }) }),
+        ErrorBoundary: LexicalErrorBoundary
+      }
+    ) }) }),
+    composerChildren.map((Child, index) => /* @__PURE__ */ jsx(Child, {}, index)),
+    bottomAreaChildren.map((Child, index) => /* @__PURE__ */ jsx(Child, {}, index))
+  ] });
+};
+const DEFAULT_MARKDOWN_OPTIONS = {
+  listItemIndent: "one"
+};
+const defaultIconComponentFor = (name) => {
+  return defaultSvgIcons[name];
+};
+function defaultTranslation(key, defaultValue, interpolations = {}) {
+  let value = defaultValue;
+  for (const [k, v] of Object.entries(interpolations)) {
+    value = value.replaceAll(`{{${k}}}`, String(v));
+  }
+  return value;
+}
+const RenderRecursiveWrappers = ({ wrappers, children }) => {
+  if (wrappers.length === 0) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  const Wrapper = wrappers[0];
+  return /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(RenderRecursiveWrappers, { wrappers: wrappers.slice(1), children }) });
+};
+const EditorRootElement = ({ children, className, overlayContainer }) => {
+  const editorRootElementRef = React.useRef(null);
+  const wrapperElementRef = React.useRef(null);
+  const setEditorRootElementRef = usePublisher(editorRootElementRef$);
+  const setEditorWrapperElementRef = usePublisher(editorWrapperElementRef$);
+  React.useEffect(() => {
+    const popupContainer = document.createElement("div");
+    popupContainer.classList.add(
+      "mdxeditor-popup-container",
+      styles.editorRoot,
+      styles.popupContainer,
+      ...(className ?? "").trim().split(" ").filter(Boolean)
+    );
+    const container = overlayContainer ?? document.body;
+    container.appendChild(popupContainer);
+    editorRootElementRef.current = popupContainer;
+    setEditorRootElementRef(editorRootElementRef);
+    setEditorWrapperElementRef(wrapperElementRef);
+    return () => {
+      popupContainer.remove();
+    };
+  }, [className, editorRootElementRef, overlayContainer, setEditorRootElementRef, setEditorWrapperElementRef]);
+  return /* @__PURE__ */ jsx("div", { className: classNames("mdxeditor", styles.editorRoot, styles.editorWrapper, className), ref: wrapperElementRef, children });
+};
+const Methods = ({ mdxRef }) => {
+  const realm = useRealm();
+  React.useImperativeHandle(
+    mdxRef,
+    () => {
+      return {
+        getMarkdown: () => {
+          const viewMode = realm.getValue(viewMode$);
+          if (viewMode === "source" || viewMode === "diff") {
+            return realm.getValue(markdownSourceEditorValue$);
+          }
+          return realm.getValue(markdown$);
+        },
+        setMarkdown: (markdown) => {
+          realm.pub(setMarkdown$, markdown);
+        },
+        insertMarkdown: (markdown) => {
+          realm.pub(insertMarkdown$, markdown);
+        },
+        focus: (callbackFn, opts) => {
+          realm.getValue(rootEditor$)?.focus(callbackFn, opts);
+        },
+        getContentEditableHTML: () => {
+          return realm.getValue(contentEditableRef$)?.current.innerHTML ?? "";
+        },
+        getSelectionMarkdown: () => {
+          const viewMode = realm.getValue(viewMode$);
+          if (viewMode === "source" || viewMode === "diff") {
+            return "";
+          }
+          const activeEditor = realm.getValue(activeEditor$);
+          if (!activeEditor) {
+            return "";
+          }
+          realm.getValue(exportVisitors$);
+          realm.getValue(toMarkdownExtensions$);
+          realm.getValue(toMarkdownOptions$);
+          realm.getValue(jsxComponentDescriptors$);
+          realm.getValue(jsxIsAvailable$);
+          return getSelectionAsMarkdown(activeEditor);
+        }
+      };
+    },
+    [realm]
+  );
+  return null;
+};
+const MDXEditor = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxs(
+    RealmWithPlugins,
+    {
+      plugins: [
+        corePlugin({
+          contentEditableClassName: props.contentEditableClassName ?? "",
+          spellCheck: props.spellCheck ?? true,
+          initialMarkdown: props.markdown,
+          onChange: props.onChange ?? noop,
+          onBlur: props.onBlur ?? noop,
+          toMarkdownOptions: props.toMarkdownOptions ?? DEFAULT_MARKDOWN_OPTIONS,
+          autoFocus: props.autoFocus ?? false,
+          placeholder: props.placeholder ?? "",
+          readOnly: Boolean(props.readOnly),
+          iconComponentFor: props.iconComponentFor ?? defaultIconComponentFor,
+          suppressHtmlProcessing: props.suppressHtmlProcessing ?? false,
+          onError: props.onError ?? noop,
+          translation: props.translation ?? defaultTranslation,
+          trim: props.trim ?? true,
+          lexicalTheme: props.lexicalTheme,
+          ..."editorState" in props ? { editorState: props.editorState } : {},
+          suppressSharedHistory: props.suppressSharedHistory ?? false,
+          additionalLexicalNodes: props.additionalLexicalNodes ?? [],
+          lexicalEditorNamespace: props.lexicalEditorNamespace ?? "MDXEditor"
+        }),
+        ...props.plugins ?? []
+      ],
+      children: [
+        /* @__PURE__ */ jsx(EditorRootElement, { className: props.className, overlayContainer: props.overlayContainer, children: /* @__PURE__ */ jsx(LexicalProvider, { children: /* @__PURE__ */ jsx(RichTextEditor, {}) }) }),
+        /* @__PURE__ */ jsx(Methods, { mdxRef: ref })
+      ]
+    }
+  );
+});
+export {
+  MDXEditor
+};