@mdxeditor/editor 3.25.1 → 3.27.0

package/dist/MDXEditor.js

@@ -1,16 +1,16 @@
 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 { ContentEditable } from "@lexical/react/LexicalContentEditable.js";
-import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary.js";
-import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin.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";
 import { lexicalTheme } from "./styles/lexicalTheme.js";
 import styles from "./styles/ui.module.css.js";
 import { noop } from "./utils/fp.js";
 import { createLexicalComposerContext, LexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { defaultSvgIcons } from "./defaultSvgIcons.js";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
 const LexicalProvider = ({ children }) => {
   const rootEditor = useCellValue(rootEditor$);
   const composerContextValue = React__default.useMemo(() => {
@@ -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

@@ -1,9 +1,10 @@
 import { Config } from 'mdast-util-from-markdown/lib';
-import { ContentEditable } from '@lexical/react/LexicalContentEditable.js';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
 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';
@@ -18,7 +19,7 @@ import { LexicalCommand } from 'lexical';
 import { LexicalEditor } from 'lexical';
 import { LexicalNode } from 'lexical';
 import { LinkNode } from '@lexical/link';
-import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin.js';
+import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import { ListType } from '@lexical/list';
 import * as Mdast from 'mdast';
 import { MdxJsxAttribute } from 'mdast-util-mdx-jsx';
@@ -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;
@@ -2708,6 +2741,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 +2825,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/NestedLexicalEditor.js

@@ -1,10 +1,10 @@
 import { $addUpdateTag, $getNodeByKey, createEditor, $getRoot, FOCUS_COMMAND, COMMAND_PRIORITY_LOW, BLUR_COMMAND, COMMAND_PRIORITY_EDITOR, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_HIGH, KEY_BACKSPACE_COMMAND, COMMAND_PRIORITY_CRITICAL } from "lexical";
 import React__default from "react";
 import { NESTED_EDITOR_UPDATED_COMMAND, rootEditor$, importVisitors$, exportVisitors$, usedLexicalNodes$, jsxComponentDescriptors$, directiveDescriptors$, codeBlockEditorDescriptors$, jsxIsAvailable$, nestedEditorChildren$, lexicalTheme$, editorInFocus$ } from "./index.js";
-import { ContentEditable } from "@lexical/react/LexicalContentEditable.js";
-import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary.js";
-import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer.js";
-import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin.js";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import classNames from "classnames";
 import { exportLexicalTreeToMdast } from "../../exportMarkdownFromLexical.js";
 import { importMdastTreeToLexical } from "../../importMarkdownToLexical.js";

package/dist/plugins/core/SharedHistoryPlugin.js

@@ -1,4 +1,4 @@
-import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin.js";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
 import React__default from "react";
 import { historyState$ } from "./index.js";
 import { useCellValue } from "@mdxeditor/gurx";

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/image/ImageEditor.js

@@ -1,6 +1,6 @@
 import React__default from "react";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext.js";
-import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection.js";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection";
 import { mergeRegister } from "@lexical/utils";
 import classNames from "classnames";
 import { $isNodeSelection, $getSelection, $getNodeByKey, $setSelection, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_LOW, CLICK_COMMAND, DRAGSTART_COMMAND, KEY_DELETE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND } from "lexical";

package/dist/plugins/link/AutoLinkPlugin.js

@@ -1,4 +1,4 @@
-import { createLinkMatcherWithRegExp, AutoLinkPlugin } from "@lexical/react/LexicalAutoLinkPlugin.js";
+import { createLinkMatcherWithRegExp, AutoLinkPlugin } from "@lexical/react/LexicalAutoLinkPlugin";
 import React__default from "react";
 const URL_REGEX = /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
 const EMAIL_REGEX = /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;

package/dist/plugins/link/index.js

@@ -2,7 +2,7 @@ import React__default from "react";
 import { MdastLinkVisitor } from "./MdastLinkVisitor.js";
 import { LexicalLinkVisitor } from "./LexicalLinkVisitor.js";
 import { LinkNode, AutoLinkNode } from "@lexical/link";
-import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin.js";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
 import { LexicalAutoLinkPlugin } from "./AutoLinkPlugin.js";
 import { Cell } from "@mdxeditor/gurx";
 import { realmPlugin } from "../../RealmWithPlugins.js";

package/dist/plugins/markdown-shortcut/index.js

@@ -1,11 +1,12 @@
 import { QUOTE, LINK, ORDERED_LIST, UNORDERED_LIST, CHECK_LIST, CODE, BOLD_ITALIC_STAR, BOLD_ITALIC_UNDERSCORE, BOLD_STAR, BOLD_UNDERSCORE, INLINE_CODE, ITALIC_STAR, ITALIC_UNDERSCORE } from "@lexical/markdown";
-import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin.js";
+import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
 import { HeadingNode, $isHeadingNode, $createHeadingNode } from "@lexical/rich-text";
 import React__default from "react";
 import { realmPlugin } from "../../RealmWithPlugins.js";
 import { CodeBlockNode, $createCodeBlockNode } from "../codeblock/CodeBlockNode.js";
 import { activePlugins$, addComposerChild$, addNestedEditorChild$ } from "../core/index.js";
 import { allowedHeadingLevels$ } from "../headings/index.js";
+import { HorizontalRuleNode, $isHorizontalRuleNode, $createHorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
 const markdownShortcutPlugin = realmPlugin({
   init(realm) {
     const pluginIds = realm.getValue(activePlugins$);
@@ -25,6 +26,18 @@ const createBlockNode = (createNode) => {
     node.select(0, 0);
   };
 };
+const THEMATIC_BREAK = {
+  dependencies: [HorizontalRuleNode],
+  export: (node) => {
+    return $isHorizontalRuleNode(node) ? "***" : null;
+  },
+  regExp: /^(---|\*\*\*|___)?/,
+  replace: (parentNode) => {
+    const node = $createHorizontalRuleNode();
+    parentNode.replace(node);
+  },
+  type: "element"
+};
 function pickTransformersForActivePlugins(pluginIds, allowedHeadingLevels) {
   const transformers = [
     BOLD_ITALIC_STAR,
@@ -59,6 +72,9 @@ function pickTransformersForActivePlugins(pluginIds, allowedHeadingLevels) {
     };
     transformers.push(HEADING);
   }
+  if (pluginIds.includes("thematicBreak")) {
+    transformers.push(THEMATIC_BREAK);
+  }
   if (pluginIds.includes("quote")) {
     transformers.push(QUOTE);
   }

package/dist/plugins/table/TableEditor.js

@@ -1,14 +1,14 @@
-import { ContentEditable } from "@lexical/react/LexicalContentEditable.js";
-import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary.js";
-import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer.js";
-import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin.js";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import * as RadixPopover from "@radix-ui/react-popover";
 import { $createParagraphNode, createEditor, $getRoot, KEY_TAB_COMMAND, COMMAND_PRIORITY_CRITICAL, FOCUS_COMMAND, COMMAND_PRIORITY_LOW, KEY_ENTER_COMMAND, BLUR_COMMAND, COMMAND_PRIORITY_EDITOR } from "lexical";
 import React__default from "react";
 import { exportLexicalTreeToMdast } from "../../exportMarkdownFromLexical.js";
 import { importMdastTreeToLexical } from "../../importMarkdownToLexical.js";
 import { lexicalTheme } from "../../styles/lexicalTheme.js";
-import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin.js";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
 import { mergeRegister } from "@lexical/utils";
 import * as RadixToolbar from "@radix-ui/react-toolbar";
 import classNames from "classnames";

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/thematic-break/index.js

@@ -2,7 +2,7 @@ import { realmPlugin } from "../../RealmWithPlugins.js";
 import { INSERT_HORIZONTAL_RULE_COMMAND, HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode.js";
 import { HorizontalRulePlugin } from "@lexical/react/LexicalHorizontalRulePlugin.js";
 import { Action, withLatestFrom } from "@mdxeditor/gurx";
-import { activeEditor$, addImportVisitor$, addLexicalNode$, addExportVisitor$, addComposerChild$ } from "../core/index.js";
+import { activeEditor$, addActivePlugin$, addImportVisitor$, addLexicalNode$, addExportVisitor$, addComposerChild$ } from "../core/index.js";
 import { LexicalThematicBreakVisitor } from "./LexicalThematicBreakVisitor.js";
 import { MdastThematicBreakVisitor } from "./MdastThematicBreakVisitor.js";
 const insertThematicBreak$ = Action((r) => {
@@ -13,6 +13,7 @@ const insertThematicBreak$ = Action((r) => {
 const thematicBreakPlugin = realmPlugin({
   init(realm) {
     realm.pubIn({
+      [addActivePlugin$]: "thematicBreak",
       [addImportVisitor$]: MdastThematicBreakVisitor,
       [addLexicalNode$]: HorizontalRuleNode,
       [addExportVisitor$]: LexicalThematicBreakVisitor,

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.25.1",
+  "version": "3.27.0",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",
@@ -43,15 +43,15 @@
     "@codemirror/state": "^6.4.0",
     "@codemirror/view": "^6.23.0",
     "@codesandbox/sandpack-react": "^2.19.11",
-    "@lexical/clipboard": "^0.23.1",
-    "@lexical/link": "^0.23.1",
-    "@lexical/list": "^0.23.1",
-    "@lexical/markdown": "^0.23.1",
-    "@lexical/plain-text": "^0.23.1",
-    "@lexical/react": "^0.23.1",
-    "@lexical/rich-text": "^0.23.1",
-    "@lexical/selection": "^0.23.1",
-    "@lexical/utils": "^0.23.1",
+    "@lexical/clipboard": "^0.27.1",
+    "@lexical/link": "^0.27.1",
+    "@lexical/list": "^0.27.1",
+    "@lexical/markdown": "^0.27.1",
+    "@lexical/plain-text": "^0.27.1",
+    "@lexical/react": "^0.27.1",
+    "@lexical/rich-text": "^0.27.1",
+    "@lexical/selection": "^0.27.1",
+    "@lexical/utils": "^0.27.1",
     "@mdxeditor/gurx": "^1.1.4",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-dialog": "^1.0.5",
@@ -66,7 +66,7 @@
     "codemirror": "^6.0.1",
     "downshift": "^7.6.0",
     "js-yaml": "4.1.0",
-    "lexical": "^0.23.1",
+    "lexical": "^0.27.1",
     "mdast-util-directive": "^3.0.0",
     "mdast-util-from-markdown": "^2.0.0",
     "mdast-util-frontmatter": "^2.0.1",