@mdxeditor/editor 3.26.0 → 3.28.0

package/dist/MDXEditor.js

@@ -1,7 +1,7 @@
 import { useCellValue, usePublisher, useCellValues, useRealm } from "@mdxeditor/gurx";
 import React__default from "react";
 import { RealmWithPlugins } from "./RealmWithPlugins.js";
-import { corePlugin, rootEditor$, useTranslation, contentEditableRef$, contentEditableClassName$, spellCheck$, composerChildren$, topAreaChildren$, editorWrappers$, placeholder$, editorRootElementRef$, viewMode$, markdownSourceEditorValue$, markdown$, setMarkdown$, insertMarkdown$ } from "./plugins/core/index.js";
+import { corePlugin, rootEditor$, useTranslation, contentEditableRef$, contentEditableClassName$, spellCheck$, composerChildren$, topAreaChildren$, editorWrappers$, placeholder$, bottomAreaChildren$, editorRootElementRef$, viewMode$, markdownSourceEditorValue$, markdown$, setMarkdown$, insertMarkdown$ } from "./plugins/core/index.js";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import classNames from "classnames";
@@ -24,13 +24,14 @@ const RichTextEditor = () => {
   const onRef = (_contentEditableRef) => {
     setContentEditableRef({ current: _contentEditableRef });
   };
-  const [contentEditableClassName, spellCheck, composerChildren, topAreaChildren, editorWrappers, placeholder] = useCellValues(
+  const [contentEditableClassName, spellCheck, composerChildren, topAreaChildren, editorWrappers, placeholder, bottomAreaChildren] = useCellValues(
     contentEditableClassName$,
     spellCheck$,
     composerChildren$,
     topAreaChildren$,
     editorWrappers$,
-    placeholder$
+    placeholder$,
+    bottomAreaChildren$
   );
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, topAreaChildren.map((Child, index) => /* @__PURE__ */ React__default.createElement(Child, { key: index })), /* @__PURE__ */ React__default.createElement(RenderRecursiveWrappers, { wrappers: editorWrappers }, /* @__PURE__ */ React__default.createElement("div", { className: classNames(styles.rootContentEditableWrapper, "mdxeditor-root-contenteditable") }, /* @__PURE__ */ React__default.createElement(
     RichTextPlugin,
@@ -46,7 +47,7 @@ const RichTextEditor = () => {
       placeholder: /* @__PURE__ */ React__default.createElement("div", { className: classNames(styles.contentEditable, styles.placeholder, contentEditableClassName) }, /* @__PURE__ */ React__default.createElement("p", null, placeholder)),
       ErrorBoundary: LexicalErrorBoundary
     }
-  ))), composerChildren.map((Child, index) => /* @__PURE__ */ React__default.createElement(Child, { key: index })));
+  ))), composerChildren.map((Child, index) => /* @__PURE__ */ React__default.createElement(Child, { key: index })), bottomAreaChildren.map((Child, index) => /* @__PURE__ */ React__default.createElement(Child, { key: index })));
 };
 const DEFAULT_MARKDOWN_OPTIONS = {
   listItemIndent: "one"

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import { DecoratorNode } from 'lexical';
 import { default as default_2 } from 'react';
 import { Directives } from 'mdast-util-directive';
 import { DOMConversionMap } from 'lexical';
+import { DOMConversionOutput } from 'lexical';
 import { DOMExportOutput } from 'lexical';
 import { EditorConfig } from 'lexical';
 import { EditorThemeClasses } from 'lexical';
@@ -45,6 +46,29 @@ import { TextFormatType } from 'lexical';
 import { TextNode } from 'lexical';
 import { Options as ToMarkdownOptions } from 'mdast-util-to-markdown';
 
+/**
+ * Converts a <pre> HTML element into a CodeBlockNode.
+ * Extracts the code content, language, and meta information from the element's attributes.
+ * The language is determined from the class attribute (e.g., class="language-javascript") or
+ * the data-language attribute if available.
+ *
+ * @param element - The <pre> HTML element to convert.
+ * @returns A DOMConversionOutput containing the created CodeBlockNode.
+ * @group Code Block
+ */
+export declare function $convertPreElement(element: Element): DOMConversionOutput;
+
+/**
+ * Converts an HTML table element into a {@link TableNode}.
+ * This function is used to transform a DOM table element into a format that can be used by Lexical.
+ * It extracts the rows and cells from the table, converting them into MDAST-compatible nodes.
+ *
+ * @param element - The HTML table element to convert.
+ * @returns A {@link DOMConversionOutput} containing the converted {@link TableNode}.
+ * @group Table
+ */
+export declare function $convertTableElement(element: HTMLElement): DOMConversionOutput;
+
 /**
  * Creates a {@link CodeBlockNode}.
  * @param options - The code contents, the language  (i.e. js, jsx, etc.), and the additional meta data of the block.
@@ -139,6 +163,12 @@ export declare const activePlugins$: NodeRef<string[]>;
  */
 export declare const addActivePlugin$: NodeRef<string | string[]>;
 
+/**
+ * Lets you add React components below the editor.
+ * @group Core
+ */
+export declare const addBottomAreaChild$: NodeRef<default_2.ComponentType<{}> | default_2.ComponentType<{}>[]>;
+
 /**
  * Lets you add React components to the {@link https://lexical.dev/docs/react/plugins | Lexical Composer} element.
  * @group Core
@@ -302,6 +332,8 @@ export declare interface BoldItalicUnderlineTogglesProps {
     options?: ('Bold' | 'Italic' | 'Underline')[];
 }
 
+/* Excluded from this release type: bottomAreaChildren$ */
+
 /**
  * A toolbar button primitive.
  * @group Toolbar Primitives
@@ -501,6 +533,7 @@ export declare class CodeBlockNode extends DecoratorNode<JSX.Element> {
     static getType(): string;
     static clone(node: CodeBlockNode): CodeBlockNode;
     static importJSON(serializedNode: SerializedCodeBlockNode): CodeBlockNode;
+    static importDOM(): DOMConversionMap;
     constructor(code: string, language: string, meta: string, key?: NodeKey);
     exportJSON(): SerializedCodeBlockNode;
     createDOM(_config: EditorConfig): HTMLDivElement;
@@ -1014,6 +1047,11 @@ export declare const directivesPlugin: (params?: {
      * Use this to register your custom directive editors. You can also use the built-in {@link GenericDirectiveEditor}.
      */
     directiveDescriptors: DirectiveDescriptor<any>[];
+    /**
+     * Set this option to display unknown text-directives as normal text nodes.
+     * This is handy when colons are used to separate words, e.g. in german "Schüler:in"
+     */
+    escapeUnknownTextDirectives?: boolean | undefined;
 } | undefined) => RealmPlugin;
 
 /**
@@ -2708,6 +2746,7 @@ export declare class TableNode extends DecoratorNode<JSX.Element> {
     /* Excluded from this release type: getType */
     /* Excluded from this release type: clone */
     /* Excluded from this release type: importJSON */
+    /* Excluded from this release type: importDOM */
     /* Excluded from this release type: exportJSON */
     /**
      * Returns the mdast node that this node is constructed from.
@@ -2791,8 +2830,18 @@ export declare const toolbarContents$: NodeRef<() => default_2.ReactNode>;
  * @group Toolbar
  */
 export declare const toolbarPlugin: (params?: {
+    /**
+     * Contents of the toolbar
+     */
     toolbarContents: () => default_2.ReactNode;
+    /**
+     * The class name to apply to the toolbar element
+     */
     toolbarClassName?: string | undefined;
+    /**
+     * Controls the position of the toolbar (top by default)
+     */
+    toolbarPosition?: "top" | "bottom" | undefined;
 } | undefined) => RealmPlugin;
 
 /* Excluded from this release type: ToolbarToggleItem */

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$, addComposerChild$, addEditorWrapper$, addExportVisitor$, addImportVisitor$, addLexicalNode$, addMdastExtension$, addNestedEditorChild$, addSyntaxExtension$, addToMarkdownExtension$, addTopAreaChild$, applyBlockType$, applyFormat$, autoFocus$, codeBlockEditorDescriptors$, composerChildren$, contentEditableClassName$, contentEditableRef$, 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$, 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 { 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";
@@ -63,12 +63,14 @@ import { DEFAULT_FORMAT, IS_BOLD, IS_CODE, IS_HIGHLIGHT, IS_ITALIC, IS_STRIKETHR
 import { lexicalTheme } from "./styles/lexicalTheme.js";
 import { htmlTags, isMdastHTMLNode } from "./plugins/core/MdastHTMLNode.js";
 import { $createGenericHTMLNode, $isGenericHTMLNode, GenericHTMLNode, TYPE_NAME } from "./plugins/core/GenericHTMLNode.js";
-import { $createTableNode, $isTableNode, TableNode } from "./plugins/table/TableNode.js";
+import { $convertTableElement, $createTableNode, $isTableNode, TableNode } from "./plugins/table/TableNode.js";
 import { $createImageNode, $isImageNode, ImageNode } from "./plugins/image/ImageNode.js";
 import { $createFrontmatterNode, $isFrontmatterNode, FrontmatterNode } from "./plugins/frontmatter/FrontmatterNode.js";
-import { $createCodeBlockNode, $isCodeBlockNode, CodeBlockNode, useCodeBlockEditorContext } from "./plugins/codeblock/CodeBlockNode.js";
+import { $convertPreElement, $createCodeBlockNode, $isCodeBlockNode, CodeBlockNode, useCodeBlockEditorContext } from "./plugins/codeblock/CodeBlockNode.js";
 import { $createDirectiveNode, $isDirectiveNode, DirectiveNode } from "./plugins/directives/DirectiveNode.js";
 export {
+  $convertPreElement,
+  $convertTableElement,
   $createCodeBlockNode,
   $createDirectiveNode,
   $createFrontmatterNode,
@@ -157,6 +159,7 @@ export {
   activeEditorSubscriptions$,
   activePlugins$,
   addActivePlugin$,
+  addBottomAreaChild$,
   addComposerChild$,
   addEditorWrapper$,
   addExportVisitor$,
@@ -176,6 +179,7 @@ export {
   applyLinkChanges$,
   applyListType$,
   autoFocus$,
+  bottomAreaChildren$,
   call,
   cancelLinkEdit$,
   closeImageDialog$,

package/dist/plugins/codeblock/CodeBlockNode.js

@@ -53,6 +53,16 @@ class CodeBlockNode extends DecoratorNode {
       meta
     });
   }
+  static importDOM() {
+    return {
+      pre: () => {
+        return {
+          conversion: $convertPreElement,
+          priority: 3
+        };
+      }
+    };
+  }
   exportJSON() {
     return {
       code: this.getCode(),
@@ -152,7 +162,20 @@ function $createCodeBlockNode(options) {
 function $isCodeBlockNode(node) {
   return node instanceof CodeBlockNode;
 }
+function $convertPreElement(element) {
+  const preElement = element;
+  const code = preElement.textContent ?? "";
+  const classAttribute = element.getAttribute("class") ?? "";
+  const dataLanguageAttribute = element.getAttribute("data-language") ?? "";
+  const languageMatch = classAttribute.match(/language-(\w+)/);
+  const language = languageMatch ? languageMatch[1] : dataLanguageAttribute;
+  const meta = preElement.getAttribute("data-meta") ?? "";
+  return {
+    node: $createCodeBlockNode({ code, language, meta })
+  };
+}
 export {
+  $convertPreElement,
   $createCodeBlockNode,
   $isCodeBlockNode,
   CodeBlockNode,

package/dist/plugins/codeblock/index.js

@@ -2,7 +2,7 @@ import { CodeBlockVisitor } from "./CodeBlockVisitor.js";
 import { MdastCodeVisitor } from "./MdastCodeVisitor.js";
 import { insertDecoratorNode$, Appender, codeBlockEditorDescriptors$, addActivePlugin$, addImportVisitor$, addLexicalNode$, addExportVisitor$ } from "../core/index.js";
 import { $createCodeBlockNode, CodeBlockNode } from "./CodeBlockNode.js";
-import { $isCodeBlockNode, useCodeBlockEditorContext } from "./CodeBlockNode.js";
+import { $convertPreElement, $isCodeBlockNode, useCodeBlockEditorContext } from "./CodeBlockNode.js";
 import { Cell, Signal, withLatestFrom, map } from "@mdxeditor/gurx";
 import { realmPlugin } from "../../RealmWithPlugins.js";
 const defaultCodeBlockLanguage$ = Cell("");
@@ -34,6 +34,7 @@ const codeBlockPlugin = realmPlugin({
   }
 });
 export {
+  $convertPreElement,
   $createCodeBlockNode,
   $isCodeBlockNode,
   CodeBlockNode,

package/dist/plugins/core/index.js

@@ -391,6 +391,8 @@ const composerChildren$ = Cell([]);
 const addComposerChild$ = Appender(composerChildren$);
 const topAreaChildren$ = Cell([]);
 const addTopAreaChild$ = Appender(topAreaChildren$);
+const bottomAreaChildren$ = Cell([]);
+const addBottomAreaChild$ = Appender(bottomAreaChildren$);
 const editorWrappers$ = Cell([]);
 const addEditorWrapper$ = Appender(editorWrappers$);
 const nestedEditorChildren$ = Cell([]);
@@ -588,6 +590,7 @@ export {
   activeEditorSubscriptions$,
   activePlugins$,
   addActivePlugin$,
+  addBottomAreaChild$,
   addComposerChild$,
   addEditorWrapper$,
   addExportVisitor$,
@@ -601,6 +604,7 @@ export {
   applyBlockType$,
   applyFormat$,
   autoFocus$,
+  bottomAreaChildren$,
   codeBlockEditorDescriptors$,
   composerChildren$,
   contentEditableClassName$,

package/dist/plugins/directives/MdastDirectiveVisitor.js

@@ -1,20 +1,29 @@
+import { $createTextNode } from "lexical";
 import { $createDirectiveNode } from "./DirectiveNode.js";
 const DIRECTIVE_TYPES = ["leafDirective", "containerDirective", "textDirective"];
 function isMdastDirectivesNode(node) {
   return DIRECTIVE_TYPES.includes(node.type);
 }
-const MdastDirectiveVisitor = {
+const MdastDirectiveVisitor = (escapeUnknownTextDirectives) => ({
   testNode: (node, { directiveDescriptors }) => {
     if (isMdastDirectivesNode(node)) {
       const descriptor = directiveDescriptors.find((descriptor2) => descriptor2.testNode(node));
+      if (escapeUnknownTextDirectives && !descriptor && node.type === "textDirective") {
+        return true;
+      }
       return descriptor !== void 0;
     }
     return false;
   },
-  visitNode({ lexicalParent, mdastNode }) {
-    lexicalParent.append($createDirectiveNode(mdastNode));
+  visitNode({ lexicalParent, mdastNode, descriptors }) {
+    const isKnown = !escapeUnknownTextDirectives || descriptors.directiveDescriptors.some((d) => d.testNode(mdastNode));
+    if (isKnown) {
+      lexicalParent.append($createDirectiveNode(mdastNode));
+    } else {
+      lexicalParent.append($createTextNode(`:${mdastNode.name}`));
+    }
   }
-};
+});
 export {
   MdastDirectiveVisitor,
   isMdastDirectivesNode

package/dist/plugins/directives/index.js

@@ -28,7 +28,7 @@ const directivesPlugin = realmPlugin({
       // import
       [addMdastExtension$]: directiveFromMarkdown(),
       [addSyntaxExtension$]: directive(),
-      [addImportVisitor$]: MdastDirectiveVisitor,
+      [addImportVisitor$]: MdastDirectiveVisitor(params == null ? void 0 : params.escapeUnknownTextDirectives),
       // export
       [addLexicalNode$]: DirectiveNode,
       [addExportVisitor$]: DirectiveVisitor,

package/dist/plugins/table/TableNode.js

@@ -46,6 +46,17 @@ class TableNode extends DecoratorNode {
     return $createTableNode(serializedNode.mdastNode);
   }
   /** @internal */
+  static importDOM() {
+    return {
+      table: () => {
+        return {
+          conversion: $convertTableElement,
+          priority: 3
+        };
+      }
+    };
+  }
+  /** @internal */
   exportJSON() {
     return {
       mdastNode: structuredClone(this.__mdastNode),
@@ -173,7 +184,33 @@ function $isTableNode(node) {
 function $createTableNode(mdastNode) {
   return new TableNode(mdastNode);
 }
+function $convertTableElement(element) {
+  const rows = element.querySelectorAll("tr");
+  const children = Array.from(rows).map((row) => {
+    return {
+      type: "tableRow",
+      children: Array.from(row.querySelectorAll("td, th")).map((cell) => {
+        return {
+          type: "tableCell",
+          children: [
+            {
+              type: "text",
+              value: cell.textContent ?? ""
+            }
+          ]
+        };
+      })
+    };
+  });
+  return {
+    node: new TableNode({
+      type: "table",
+      children
+    })
+  };
+}
 export {
+  $convertTableElement,
   $createTableNode,
   $isTableNode,
   TableNode

package/dist/plugins/table/index.js

@@ -6,7 +6,7 @@ import { insertDecoratorNode$, addMdastExtension$, addSyntaxExtension$, addImpor
 import { LexicalTableVisitor } from "./LexicalTableVisitor.js";
 import { MdastTableVisitor } from "./MdastTableVisitor.js";
 import { $createTableNode, TableNode } from "./TableNode.js";
-import { $isTableNode } from "./TableNode.js";
+import { $convertTableElement, $isTableNode } from "./TableNode.js";
 function seedTable(rows = 1, columns = 1) {
   const table = {
     type: "table",
@@ -57,6 +57,7 @@ const tablePlugin = realmPlugin({
   }
 });
 export {
+  $convertTableElement,
   $createTableNode,
   $isTableNode,
   TableNode,

package/dist/plugins/toolbar/index.js

@@ -1,7 +1,7 @@
 import { realmPlugin } from "../../RealmWithPlugins.js";
 import { Cell, useCellValues } from "@mdxeditor/gurx";
 import React__default from "react";
-import { addTopAreaChild$, readOnly$ } from "../core/index.js";
+import { addBottomAreaChild$, addTopAreaChild$, readOnly$ } from "../core/index.js";
 import { Root } from "./primitives/toolbar.js";
 const toolbarContents$ = Cell(() => null);
 const toolbarClassName$ = Cell("");
@@ -10,10 +10,11 @@ const DEFAULT_TOOLBAR_CONTENTS = () => {
 };
 const toolbarPlugin = realmPlugin({
   init(realm, params) {
+    const toolbarPositionSymbol = (params == null ? void 0 : params.toolbarPosition) === "bottom" ? addBottomAreaChild$ : addTopAreaChild$;
     realm.pubIn({
       [toolbarContents$]: (params == null ? void 0 : params.toolbarContents) ?? DEFAULT_TOOLBAR_CONTENTS,
       [toolbarClassName$]: (params == null ? void 0 : params.toolbarClassName) ?? "",
-      [addTopAreaChild$]: () => {
+      [toolbarPositionSymbol]: () => {
         const [toolbarContents, readOnly, toolbarClassName] = useCellValues(toolbarContents$, readOnly$, toolbarClassName$);
         return /* @__PURE__ */ React__default.createElement(Root, { className: toolbarClassName, readOnly }, toolbarContents());
       }

package/package.json

@@ -11,7 +11,7 @@
     "*.css"
   ],
   "type": "module",
-  "version": "3.26.0",
+  "version": "3.28.0",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",