@mdxeditor/editor 3.49.2 → 3.50.0

package/dist/MDXEditor.js

@@ -1,6 +1,6 @@
 import { usePublisher, useCellValue, useCellValues, useRealm } from "@mdxeditor/gurx";
 import React__default from "react";
-import { corePlugin, editorRootElementRef$, rootEditor$, useTranslation, contentEditableRef$, contentEditableWrapperElement$, contentEditableClassName$, spellCheck$, composerChildren$, topAreaChildren$, editorWrappers$, placeholder$, bottomAreaChildren$, insertMarkdown$, setMarkdown$, viewMode$, markdownSourceEditorValue$, markdown$ } from "./plugins/core/index.js";
+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";
@@ -11,6 +11,7 @@ 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__default.useMemo(() => {
@@ -73,7 +74,9 @@ const RenderRecursiveWrappers = ({ wrappers, children }) => {
 };
 const EditorRootElement = ({ children, className, overlayContainer }) => {
   const editorRootElementRef = React__default.useRef(null);
+  const wrapperElementRef = React__default.useRef(null);
   const setEditorRootElementRef = usePublisher(editorRootElementRef$);
+  const setEditorWrapperElementRef = usePublisher(editorWrapperElementRef$);
   React__default.useEffect(() => {
     const popupContainer = document.createElement("div");
     popupContainer.classList.add(
@@ -86,11 +89,12 @@ const EditorRootElement = ({ children, className, overlayContainer }) => {
     container.appendChild(popupContainer);
     editorRootElementRef.current = popupContainer;
     setEditorRootElementRef(editorRootElementRef);
+    setEditorWrapperElementRef(wrapperElementRef);
     return () => {
       popupContainer.remove();
     };
-  }, [className, editorRootElementRef, overlayContainer, setEditorRootElementRef]);
-  return /* @__PURE__ */ React__default.createElement("div", { className: classNames("mdxeditor", styles.editorRoot, styles.editorWrapper, className) }, children);
+  }, [className, editorRootElementRef, overlayContainer, setEditorRootElementRef, setEditorWrapperElementRef]);
+  return /* @__PURE__ */ React__default.createElement("div", { className: classNames("mdxeditor", styles.editorRoot, styles.editorWrapper, className), ref: wrapperElementRef }, children);
 };
 const Methods = ({ mdxRef }) => {
   const realm = useRealm();
@@ -114,6 +118,26 @@ const Methods = ({ mdxRef }) => {
         focus: (callbackFn, opts) => {
           var _a;
           (_a = realm.getValue(rootEditor$)) == null ? void 0 : _a.focus(callbackFn, opts);
+        },
+        getContentEditableHTML: () => {
+          var _a, _b;
+          return ((_b = (_a = realm.getValue(contentEditableRef$)) == null ? void 0 : _a.current) == null ? void 0 : _b.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);
         }
       };
     },

package/dist/index.d.ts

@@ -1169,6 +1169,11 @@ export declare const editorSearchTextNodeIndex$: NodeRef<TextNodeIndex>;
  */
 export declare type EditorSubscription = (activeEditor: LexicalEditor) => () => void;
 
+/**
+ * @group Core
+ */
+export declare const editorWrapperElementRef$: NodeRef<default_2.RefObject<HTMLDivElement> | null>;
+
 /* Excluded from this release type: editorWrappers$ */
 
 export declare const EmptyTextNodeIndex: TextNodeIndex;
@@ -1314,6 +1319,15 @@ export declare interface GenericJsxEditorProps extends JsxEditorProps {
  */
 export declare function getSelectedNode(selection: RangeSelection): TextNode | ElementNode | null;
 
+/**
+ * Gets the markdown representation of the current selection in the Lexical editor.
+ * Returns an empty string if there is no selection or if the selection is collapsed.
+ * Converts selected nodes to markdown by recursively processing them and preserving formatting.
+ * Note: Selects entire nodes, not partial selections within nodes.
+ * @group Utils
+ */
+export declare function getSelectionAsMarkdown(editor: LexicalEditor, _exportParams: Omit<ExportMarkdownFromLexicalOptions, 'root'>): string;
+
 /**
  * Gets the coordinates of the selection in the Lexical editor.
  * @group Utils
@@ -2226,6 +2240,15 @@ export declare interface MDXEditorMethods {
         defaultSelection?: 'rootStart' | 'rootEnd';
         preventScroll?: boolean;
     }) => void;
+    /**
+     * gets the underlying Lexical contentEditable HTML content
+     */
+    getContentEditableHTML: () => string;
+    /**
+     * Gets the markdown representation of the current selection.
+     * Returns an empty string if there is no selection, if selection is collapsed, or if editor is in source/diff mode.
+     */
+    getSelectionMarkdown: () => string;
 }
 
 /**

package/dist/index.js

@@ -4,7 +4,7 @@ import { MDXEditor } from "./MDXEditor.js";
 import { defaultSvgIcons } from "./defaultSvgIcons.js";
 import { MarkdownParseError, UnrecognizedMarkdownConstructError, importMarkdownToLexical, importMdastTreeToLexical } from "./importMarkdownToLexical.js";
 import { exportLexicalTreeToMdast, exportMarkdownFromLexical } from "./exportMarkdownFromLexical.js";
-import { Appender, NESTED_EDITOR_UPDATED_COMMAND, activeEditor$, activeEditorSubscriptions$, activePlugins$, addActivePlugin$, addBottomAreaChild$, addComposerChild$, addEditorWrapper$, addExportVisitor$, addImportVisitor$, addLexicalNode$, addMdastExtension$, addNestedEditorChild$, addSyntaxExtension$, addToMarkdownExtension$, addTopAreaChild$, applyBlockType$, applyFormat$, autoFocus$, bottomAreaChildren$, codeBlockEditorDescriptors$, composerChildren$, contentEditableClassName$, contentEditableRef$, contentEditableWrapperElement$, convertSelectionToNode$, corePlugin, createActiveEditorSubscription$, createRootEditorSubscription$, currentBlockType$, currentFormat$, currentSelection$, directiveDescriptors$, editorInFocus$, editorRootElementRef$, editorWrappers$, exportVisitors$, historyState$, iconComponentFor$, importVisitors$, inFocus$, initialMarkdown$, initialMarkdownNormalize$, insertDecoratorNode$, insertMarkdown$, jsxComponentDescriptors$, jsxIsAvailable$, lexicalTheme$, markdown$, markdownErrorSignal$, markdownProcessingError$, markdownSourceEditorValue$, mdastExtensions$, muteChange$, nestedEditorChildren$, onBlur$, placeholder$, readOnly$, rootEditor$, rootEditorSubscriptions$, setMarkdown$, spellCheck$, syntaxExtensions$, toMarkdownExtensions$, toMarkdownOptions$, topAreaChildren$, translation$, useTranslation, usedLexicalNodes$, viewMode$ } from "./plugins/core/index.js";
+import { Appender, NESTED_EDITOR_UPDATED_COMMAND, activeEditor$, activeEditorSubscriptions$, activePlugins$, addActivePlugin$, addBottomAreaChild$, addComposerChild$, addEditorWrapper$, addExportVisitor$, addImportVisitor$, addLexicalNode$, addMdastExtension$, addNestedEditorChild$, addSyntaxExtension$, addToMarkdownExtension$, addTopAreaChild$, applyBlockType$, applyFormat$, autoFocus$, bottomAreaChildren$, codeBlockEditorDescriptors$, composerChildren$, contentEditableClassName$, contentEditableRef$, contentEditableWrapperElement$, convertSelectionToNode$, corePlugin, createActiveEditorSubscription$, createRootEditorSubscription$, currentBlockType$, currentFormat$, currentSelection$, directiveDescriptors$, editorInFocus$, editorRootElementRef$, editorWrapperElementRef$, editorWrappers$, exportVisitors$, historyState$, iconComponentFor$, importVisitors$, inFocus$, initialMarkdown$, initialMarkdownNormalize$, insertDecoratorNode$, insertMarkdown$, jsxComponentDescriptors$, jsxIsAvailable$, lexicalTheme$, markdown$, markdownErrorSignal$, markdownProcessingError$, markdownSourceEditorValue$, mdastExtensions$, muteChange$, nestedEditorChildren$, onBlur$, placeholder$, readOnly$, rootEditor$, rootEditorSubscriptions$, setMarkdown$, spellCheck$, syntaxExtensions$, toMarkdownExtensions$, toMarkdownOptions$, topAreaChildren$, translation$, useTranslation, usedLexicalNodes$, viewMode$ } from "./plugins/core/index.js";
 import { ALL_HEADING_LEVELS, allowedHeadingLevels$, headingsPlugin } from "./plugins/headings/index.js";
 import { insertThematicBreak$, thematicBreakPlugin } from "./plugins/thematic-break/index.js";
 import { applyListType$, currentListType$, listsPlugin } from "./plugins/lists/index.js";
@@ -58,7 +58,7 @@ import { RemoteMDXEditorRealmProvider, remoteRealmPlugin, useRemoteMDXEditorReal
 import { CAN_USE_DOM, IS_APPLE, controlOrMeta } from "./utils/detectMac.js";
 import { always, call, compose, curry1to0, curry2to1, joinProc, noop, prop, tap, thrush } from "./utils/fp.js";
 import { isPartOftheEditorUI } from "./utils/isPartOftheEditorUI.js";
-import { fromWithinEditorRead, getSelectedNode, getSelectionRectangle, getStateAsMarkdown } from "./utils/lexicalHelpers.js";
+import { fromWithinEditorRead, getSelectedNode, getSelectionAsMarkdown, getSelectionRectangle, getStateAsMarkdown } from "./utils/lexicalHelpers.js";
 import { makeHslTransparent } from "./utils/makeHslTransparent.js";
 import { uuidv4 } from "./utils/uuid4.js";
 import { voidEmitter } from "./utils/voidEmitter.js";
@@ -237,6 +237,7 @@ export {
   editorSearchTerm$,
   editorSearchTermDebounced$,
   editorSearchTextNodeIndex$,
+  editorWrapperElementRef$,
   editorWrappers$,
   exportLexicalTreeToMdast,
   exportMarkdownFromLexical,
@@ -245,6 +246,7 @@ export {
   frontmatterDialogOpen$,
   frontmatterPlugin,
   getSelectedNode,
+  getSelectionAsMarkdown,
   getSelectionRectangle,
   getStateAsMarkdown,
   hasFrontmatter$,

package/dist/plugins/codemirror/CodeMirrorEditor.js

@@ -84,7 +84,7 @@ const CodeMirrorEditor = ({ language, nodeKey, code, focusEmitter }) => {
       editorViewRef.current = null;
       el.removeEventListener("keydown", stopPropagationHandler);
     };
-  }, [readOnly, language]);
+  }, [readOnly, language, ...codeMirrorExtensions]);
   return /* @__PURE__ */ React__default.createElement("div", { className: styles.codeMirrorWrapper }, /* @__PURE__ */ React__default.createElement("div", { className: styles.codeMirrorToolbar }, /* @__PURE__ */ React__default.createElement(
     Select,
     {

package/dist/plugins/core/index.js

@@ -116,6 +116,7 @@ const jsxComponentDescriptors$ = Cell([]);
 const directiveDescriptors$ = Cell([]);
 const codeBlockEditorDescriptors$ = Cell([]);
 const editorRootElementRef$ = Cell(null);
+const editorWrapperElementRef$ = Cell(null);
 const contentEditableRef$ = Cell(null);
 const addLexicalNode$ = Appender(usedLexicalNodes$);
 const addImportVisitor$ = Appender(importVisitors$);
@@ -636,6 +637,7 @@ export {
   directiveDescriptors$,
   editorInFocus$,
   editorRootElementRef$,
+  editorWrapperElementRef$,
   editorWrappers$,
   exportVisitors$,
   historyState$,

package/dist/utils/lexicalHelpers.js

@@ -1,4 +1,7 @@
-import { $getSelection, $getRoot } from "lexical";
+import { $getSelection, $getRoot, $isRangeSelection, $isElementNode, $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";
@@ -72,9 +75,85 @@ function getStateAsMarkdown(editor, 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/package.json

@@ -11,7 +11,7 @@
     "*.css"
   ],
   "type": "module",
-  "version": "3.49.2",
+  "version": "3.50.0",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",
@@ -21,6 +21,7 @@
     "typecheck": "tsc --noEmit",
     "lint": "eslint src --ext .ts,.tsx",
     "test": "NODE_ENV=development vitest",
+    "test:once": "NODE_ENV=development vitest --run",
     "semantic-release": "semantic-release",
     "image-upload-backend": "node ./src/examples/file-backend.js",
     "export-icons": "node ./scripts/export-figma-icons.mjs"