@nkzw/mdx-editor 0.1.0

package/dist/utils/detectMac.js

@@ -0,0 +1,16 @@
+const CAN_USE_DOM = typeof window !== "undefined" && typeof window.document.createElement !== "undefined";
+const IS_APPLE = CAN_USE_DOM && (() => {
+  const platform = navigator.userAgentData?.platform;
+  return platform ? /mac/i.test(platform) : /Mac|iPod|iPhone|iPad/.test(navigator.userAgent);
+})();
+function controlOrMeta(metaKey, ctrlKey) {
+  if (IS_APPLE) {
+    return metaKey;
+  }
+  return ctrlKey;
+}
+export {
+  CAN_USE_DOM,
+  IS_APPLE,
+  controlOrMeta
+};

package/dist/utils/fp.js

@@ -0,0 +1,44 @@
+function compose(a, b) {
+  return (arg) => a(b(arg));
+}
+function thrush(arg, proc) {
+  return proc(arg);
+}
+function curry2to1(proc, arg1) {
+  return (arg2) => proc(arg1, arg2);
+}
+function curry1to0(proc, arg) {
+  return () => proc(arg);
+}
+function prop(property) {
+  return (object) => object[property];
+}
+function tap(arg, proc) {
+  proc(arg);
+  return arg;
+}
+function call(proc) {
+  proc();
+}
+function always(value) {
+  return () => value;
+}
+function joinProc(...procs) {
+  return () => {
+    procs.map(call);
+  };
+}
+function noop() {
+}
+export {
+  always,
+  call,
+  compose,
+  curry1to0,
+  curry2to1,
+  joinProc,
+  noop,
+  prop,
+  tap,
+  thrush
+};

package/dist/utils/isPartOftheEditorUI.js

@@ -0,0 +1,12 @@
+function isPartOftheEditorUI(element, editorRoot) {
+  if (element === null || element === editorRoot) {
+    return false;
+  }
+  if (element.dataset.editorDialog !== void 0 || element.dataset.toolbarItem !== void 0 || element.dataset.editorDropdown) {
+    return true;
+  }
+  return isPartOftheEditorUI(element.parentElement, editorRoot);
+}
+export {
+  isPartOftheEditorUI
+};

package/dist/utils/lexicalHelpers.js

@@ -0,0 +1,185 @@
+import { $getSelection, $isRangeSelection, $isElementNode, $getRoot, $isTextNode } from "lexical";
+import { $isLinkNode } from "@lexical/link";
+import { $isHeadingNode } from "@lexical/rich-text";
+import { $isListItemNode, $isListNode } from "@lexical/list";
+import { $isAtNodeEnd } from "@lexical/selection";
+import { tap } from "./fp.js";
+import { exportMarkdownFromLexical } from "../exportMarkdownFromLexical.js";
+function fromWithinEditorRead(editor, fn) {
+  let result = null;
+  editor.getEditorState().read(() => {
+    result = fn();
+  });
+  return result;
+}
+function getSelectedNode(selection) {
+  try {
+    const anchor = selection.anchor;
+    const focus = selection.focus;
+    const anchorNode = selection.anchor.getNode();
+    const focusNode = selection.focus.getNode();
+    if (anchorNode === focusNode) {
+      return anchorNode;
+    }
+    const isBackward = selection.isBackward();
+    if (isBackward) {
+      return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+    } else {
+      return $isAtNodeEnd(anchor) ? anchorNode : focusNode;
+    }
+  } catch {
+    return null;
+  }
+}
+const WILL_CHANGE_CONTAINING_BLOCK_PROPS = ["transform", "perspective", "filter", "backdrop-filter", "contain", "container-type"];
+const CONTAIN_VALUES_CREATING_CONTAINING_BLOCK = ["layout", "paint", "strict", "content"];
+function getFixedContainingBlock(element) {
+  let current = element?.parentElement;
+  while (current) {
+    const style = window.getComputedStyle(current);
+    const willChangeProps = style.willChange.split(",").map((v) => v.trim());
+    const hasRelevantWillChange = willChangeProps.some((prop) => WILL_CHANGE_CONTAINING_BLOCK_PROPS.includes(prop));
+    const createsContainingBlock = style.transform !== "none" || style.perspective !== "none" || style.filter !== "none" || style.backdropFilter !== "none" || CONTAIN_VALUES_CREATING_CONTAINING_BLOCK.includes(style.contain) || style.containerType !== "normal" || style.contentVisibility === "auto" || hasRelevantWillChange;
+    if (createsContainingBlock) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return null;
+}
+function getSelectionRectangle(editor) {
+  const selection = $getSelection();
+  const nativeSelection = window.getSelection();
+  const activeElement = document.activeElement;
+  const rootElement = editor.getRootElement();
+  if (selection !== null && nativeSelection !== null && rootElement !== null && rootElement.contains(nativeSelection.anchorNode) && editor.isEditable()) {
+    const domRange = nativeSelection.getRangeAt(0);
+    let rect;
+    if (nativeSelection.isCollapsed) {
+      let node = nativeSelection.anchorNode;
+      if (node?.nodeType == 3) {
+        node = node.parentNode;
+      }
+      rect = node.getBoundingClientRect();
+      rect.width = 0;
+    } else {
+      if (nativeSelection.anchorNode === rootElement) {
+        let inner = rootElement;
+        while (inner.firstElementChild != null) {
+          inner = inner.firstElementChild;
+        }
+        rect = inner.getBoundingClientRect();
+      } else {
+        rect = domRange.getBoundingClientRect();
+      }
+    }
+    const fixedContainer = getFixedContainingBlock(rootElement);
+    if (fixedContainer) {
+      const containerRect = fixedContainer.getBoundingClientRect();
+      return {
+        top: Math.round(rect.top - containerRect.top),
+        left: Math.round(rect.left - containerRect.left),
+        width: Math.round(rect.width),
+        height: Math.round(rect.height)
+      };
+    }
+    return {
+      top: Math.round(rect.top),
+      left: Math.round(rect.left),
+      width: Math.round(rect.width),
+      height: Math.round(rect.height)
+    };
+  } else if (activeElement?.className !== "link-input") {
+    return null;
+  }
+  return null;
+}
+function getStateAsMarkdown(editor, exportParams) {
+  return tap({ markdown: "" }, (result) => {
+    editor.getEditorState().read(() => {
+      result.markdown = exportMarkdownFromLexical({ root: $getRoot(), ...exportParams });
+    });
+  }).markdown;
+}
+function getSelectionAsMarkdown(editor, _exportParams) {
+  let markdown = "";
+  editor.getEditorState().read(() => {
+    const selection = $getSelection();
+    if (!selection || !$isRangeSelection(selection) || selection.isCollapsed()) {
+      return;
+    }
+    const nodes = selection.getNodes();
+    if (nodes.length === 0) {
+      return;
+    }
+    const parentNodes = /* @__PURE__ */ new Set();
+    nodes.forEach((node) => {
+      let current = node;
+      while (current) {
+        if ($isHeadingNode(current) || $isListItemNode(current) || current.getType() === "paragraph" || current.getType() === "quote") {
+          if ($isElementNode(current)) {
+            parentNodes.add(current);
+          }
+          break;
+        }
+        current = current.getParent();
+      }
+    });
+    const nodesToProcess = parentNodes.size > 0 ? Array.from(parentNodes) : nodes;
+    function nodeToMarkdown(node) {
+      if ($isHeadingNode(node)) {
+        const level = parseInt(node.getTag().replace("h", ""));
+        const children = node.getChildren();
+        const headingText = children.map((child) => nodeToMarkdown(child)).join("");
+        return "#".repeat(level) + " " + headingText + "\n\n";
+      } else if ($isListItemNode(node)) {
+        const parent = node.getParent();
+        const prefix = parent && $isListNode(parent) && parent.getListType() === "number" ? "1. " : "- ";
+        const children = node.getChildren();
+        const itemText = children.map((child) => nodeToMarkdown(child)).join("");
+        return prefix + itemText + "\n";
+      } else if ($isListNode(node)) {
+        const children = node.getChildren();
+        return children.map((child) => nodeToMarkdown(child)).join("") + "\n";
+      } else if ($isTextNode(node)) {
+        let text = node.getTextContent();
+        const format = node.getFormat();
+        if (format & 16) {
+          return `\`${text}\``;
+        }
+        if (format & 1) {
+          text = `**${text}**`;
+        }
+        if (format & 2) {
+          text = `*${text}*`;
+        }
+        if (format & 4) {
+          text = `~~${text}~~`;
+        }
+        return text;
+      } else if ($isLinkNode(node)) {
+        const url = node.getURL();
+        const title = node.getTitle();
+        const children = node.getChildren();
+        const linkText = children.map((child) => nodeToMarkdown(child)).join("");
+        if (title) {
+          return `[${linkText}](${url} "${title}")`;
+        }
+        return `[${linkText}](${url})`;
+      } else if ($isElementNode(node)) {
+        const children = node.getChildren();
+        return children.map((child) => nodeToMarkdown(child)).join("");
+      }
+      return node.getTextContent();
+    }
+    markdown = nodesToProcess.map((node) => nodeToMarkdown(node)).join("");
+  });
+  return markdown.trim();
+}
+export {
+  fromWithinEditorRead,
+  getSelectedNode,
+  getSelectionAsMarkdown,
+  getSelectionRectangle,
+  getStateAsMarkdown
+};

package/dist/utils/makeHslTransparent.js

@@ -0,0 +1,6 @@
+function makeHslTransparent(hsl, alpha) {
+  return hsl.replace("hsl", "hsla").replace(")", `, ${alpha})`);
+}
+export {
+  makeHslTransparent
+};

package/dist/utils/mergeStyleAttributes.js

@@ -0,0 +1,22 @@
+function mergeStyleAttributes(style1, style2) {
+  const styleObject1 = styleToObject(style1);
+  const styleObject2 = styleToObject(style2);
+  const mergedStyleObject = { ...styleObject1, ...styleObject2 };
+  const mergedStyleString = objectToStyle(mergedStyleObject);
+  return mergedStyleString;
+}
+function styleToObject(style) {
+  const styleObject = {};
+  const stylePairs = style.split(";").filter((pair) => pair.trim() !== "");
+  stylePairs.forEach((pair) => {
+    const [key, value] = pair.split(":").map((part) => part.trim());
+    styleObject[key] = value;
+  });
+  return styleObject;
+}
+function objectToStyle(styleObject) {
+  return Object.entries(styleObject).map(([key, value]) => `${key}: ${value}`).join("; ");
+}
+export {
+  mergeStyleAttributes
+};

package/dist/utils/uuid4.js

@@ -0,0 +1,10 @@
+function uuidv4() {
+  const hex = [...Array(256).keys()].map((index) => index.toString(16).padStart(2, "0"));
+  const r = crypto.getRandomValues(new Uint8Array(16));
+  r[6] = r[6] & 15 | 64;
+  r[8] = r[8] & 63 | 128;
+  return [...r.entries()].map(([index, int]) => [4, 6, 8, 10].includes(index) ? `-${hex[int]}` : hex[int]).join("");
+}
+export {
+  uuidv4
+};

package/dist/utils/voidEmitter.js

@@ -0,0 +1,15 @@
+import { noop } from "./fp.js";
+function voidEmitter() {
+  let subscription = noop;
+  return {
+    publish: () => {
+      subscription();
+    },
+    subscribe: (cb) => {
+      subscription = cb;
+    }
+  };
+}
+export {
+  voidEmitter
+};

package/package.json

@@ -0,0 +1,133 @@
+{
+  "name": "@nkzw/mdx-editor",
+  "version": "0.1.0",
+  "description": "A fast, polished inline Markdown editor for React.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nkzw-tech/mdx-editor.git"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./core": {
+      "types": "./dist/core.d.ts",
+      "import": "./dist/core.js",
+      "default": "./dist/core.js"
+    },
+    "./persistence": {
+      "types": "./dist/persistence.d.ts",
+      "import": "./dist/persistence.js",
+      "default": "./dist/persistence.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./style.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md",
+    "UPSTREAM.md"
+  ],
+  "dependencies": {
+    "@codemirror/commands": "^6.2.4",
+    "@codemirror/lang-markdown": "^6.2.3",
+    "@codemirror/language-data": "^6.5.1",
+    "@codemirror/merge": "^6.4.0",
+    "@codemirror/state": "^6.4.0",
+    "@codemirror/view": "^6.23.0",
+    "@lexical/clipboard": "0.45.0",
+    "@lexical/extension": "0.45.0",
+    "@lexical/link": "0.45.0",
+    "@lexical/list": "0.45.0",
+    "@lexical/markdown": "0.45.0",
+    "@lexical/plain-text": "0.45.0",
+    "@lexical/react": "0.45.0",
+    "@lexical/rich-text": "0.45.0",
+    "@lexical/selection": "0.45.0",
+    "@lexical/utils": "0.45.0",
+    "@mdxeditor/gurx": "^1.2.4",
+    "@radix-ui/colors": "^3.0.0",
+    "@radix-ui/react-dialog": "^1.1.11",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-popover": "^1.1.11",
+    "@radix-ui/react-popper": "^1.2.4",
+    "@radix-ui/react-select": "^2.2.2",
+    "@radix-ui/react-toggle-group": "^1.1.7",
+    "@radix-ui/react-toolbar": "^1.1.7",
+    "@radix-ui/react-tooltip": "^1.2.4",
+    "classnames": "^2.3.2",
+    "cm6-theme-basic-light": "^0.2.0",
+    "codemirror": "^6.0.1",
+    "downshift": "^7.6.0",
+    "i18next": "^23.10.0",
+    "js-yaml": "4.2.0",
+    "lexical": "0.45.0",
+    "mdast-util-directive": "^3.0.0",
+    "mdast-util-from-markdown": "^2.0.0",
+    "mdast-util-frontmatter": "^2.0.1",
+    "mdast-util-gfm-strikethrough": "^2.0.0",
+    "mdast-util-gfm-table": "^2.0.0",
+    "mdast-util-gfm-task-list-item": "^2.0.0",
+    "mdast-util-highlight-mark": "^1.2.2",
+    "mdast-util-mdx": "^3.0.0",
+    "mdast-util-mdx-jsx": "3.0.0",
+    "mdast-util-to-markdown": "^2.1.0",
+    "micromark-extension-directive": "^3.0.0",
+    "micromark-extension-frontmatter": "^2.0.0",
+    "micromark-extension-gfm-strikethrough": "^2.0.0",
+    "micromark-extension-gfm-table": "^2.0.0",
+    "micromark-extension-gfm-task-list-item": "^2.0.1",
+    "micromark-extension-highlight-mark": "^1.2.0",
+    "micromark-extension-mdx-jsx": "^3.0.0",
+    "micromark-extension-mdx-md": "^2.0.0",
+    "micromark-extension-mdxjs": "^3.0.0",
+    "micromark-factory-space": "^2.0.0",
+    "micromark-util-character": "^2.0.1",
+    "micromark-util-symbol": "^2.0.0",
+    "react-hook-form": "7.56.1",
+    "unidiff": "^1.0.2"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@types/js-yaml": "4.0.5",
+    "@types/mdast": "^4.0.4",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@types/unist": "^3.0.3",
+    "@vitejs/plugin-react": "^5.1.0",
+    "jsdom": "^27.0.0",
+    "micromark-util-types": "^2.0.2",
+    "postcss-mixins": "^12.1.2",
+    "typescript": "^5.9.0",
+    "typescript-plugin-css-modules": "^5.2.0",
+    "user-agent-data-types": "^0.4.2",
+    "vite": "^7.2.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-svgr": "^4.5.0",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^4.1.9"
+  },
+  "scripts": {
+    "build": "vite build",
+    "check": "pnpm typecheck && pnpm test && pnpm build",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  }
+}