@mdxeditor/editor 1.10.2 → 1.11.1

package/dist/exportMarkdownFromLexical.d.ts

@@ -73,6 +73,10 @@ export interface LexicalExportVisitor<LN extends LexicalNode, UN extends Mdast.C
      * For this to be called by the tree walk, shouldJoin must return true.
      */
     join?<T extends Mdast.Content>(prevNode: T, currentNode: T): T;
+    /**
+     * Default 0, optional, sets the priority of the visitor. The higher the number, the earlier it will be called.
+     */
+    priority?: number;
 }
 /**
  * The "any" type for LexicalExportVisitor.

package/dist/exportMarkdownFromLexical.js

@@ -1,5 +1,7 @@
 import { $isElementNode } from "lexical";
 import { toMarkdown } from "mdast-util-to-markdown";
+import { isMdastHTMLNode } from "./plugins/core/MdastHTMLNode.js";
+import { mergeStyleAttributes } from "./utils/mergeStyleAttributes.js";
 function isParent(node) {
   return node.children instanceof Array;
 }
@@ -11,6 +13,7 @@ function exportLexicalTreeToMdast({
 }) {
   let unistRoot = null;
   const referredComponents = /* @__PURE__ */ new Set();
+  visitors = visitors.sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
   visit(root, null);
   function registerReferredComponent(componentName) {
     referredComponents.add(componentName);
@@ -123,11 +126,42 @@ function exportLexicalTreeToMdast({
     typedRoot.children.unshift(...imports);
   }
   fixWrappingWhitespace(typedRoot, []);
+  collapseNestedHtmlTags(typedRoot);
   if (!jsxIsAvailable) {
     convertUnderlineJsxToHtml(typedRoot);
   }
   return typedRoot;
 }
+function collapseNestedHtmlTags(node) {
+  if ("children" in node) {
+    if (isMdastHTMLNode(node) && node.children.length === 1) {
+      const onlyChild = node.children[0];
+      if (onlyChild.type === "mdxJsxTextElement" && onlyChild.name === "span") {
+        (onlyChild.attributes || []).forEach((attribute) => {
+          var _a;
+          if (attribute.type === "mdxJsxAttribute") {
+            const parentAttribute = (_a = node.attributes) == null ? void 0 : _a.find((attr) => attr.type === "mdxJsxAttribute" && attr.name === attribute.name);
+            if (parentAttribute) {
+              if (attribute.name === "className") {
+                const mergedClassesSet = /* @__PURE__ */ new Set([
+                  ...parentAttribute.value.split(" "),
+                  ...attribute.value.split(" ")
+                ]);
+                parentAttribute.value = Array.from(mergedClassesSet).join(" ");
+              } else if (attribute.name === "style") {
+                parentAttribute.value = mergeStyleAttributes(parentAttribute.value, attribute.value);
+              }
+            } else {
+              node.attributes.push(attribute);
+            }
+          }
+        });
+        node.children = onlyChild.children;
+      }
+    }
+    node.children.forEach((child) => collapseNestedHtmlTags(child));
+  }
+}
 function convertUnderlineJsxToHtml(node) {
   if (Object.hasOwn(node, "children")) {
     const nodeAsParent = node;

package/dist/gurx/realmFactory.d.ts

@@ -1,6 +1,6 @@
 import { Realm, RealmNode, Subscription, UnsubscribeHandle } from './realm';
 /**
- * The system interface is the runtime representation of a state management module, a a record of nodes.
+ * The system interface is the runtime representation of a state management module, a record of nodes.
  */
 export interface System {
     [key: string]: RealmNode<any>;

package/dist/importMarkdownToLexical.d.ts

@@ -59,6 +59,10 @@ export interface MdastImportVisitor<UN extends Mdast.Content> {
      * The function that is called when the node is visited. See {@link MdastVisitParams} for details.
      */
     visitNode(params: MdastVisitParams<UN>): void;
+    /**
+     * Default 0, optional, sets the priority of the visitor. The higher the number, the earlier it will be called.
+     */
+    priority?: number;
 }
 /**
  * The options of the tree import utility. Not meant to be used directly.

package/dist/importMarkdownToLexical.js

@@ -18,6 +18,7 @@ function importMarkdownToLexical({ root, markdown, visitors, syntaxExtensions, m
 }
 function importMdastTreeToLexical({ root, mdastRoot, visitors }) {
   const formattingMap = /* @__PURE__ */ new WeakMap();
+  visitors = visitors.sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
   function visitChildren(mdastNode, lexicalParent) {
     if (!isParent(mdastNode)) {
       throw new Error("Attempting to visit children of a non-parent");

package/dist/index.js

@@ -48,13 +48,16 @@ import { TooltipWrap } from "./plugins/toolbar/primitives/TooltipWrap.js";
 import { Select, SelectButtonTrigger, SelectContent, SelectItem, SelectTrigger } from "./plugins/toolbar/primitives/select.js";
 import { NestedEditorsContext, NestedLexicalEditor, useLexicalNodeRemove, useMdastNodeUpdater, useNestedEditorContext } from "./plugins/core/NestedLexicalEditor.js";
 import { PropertyPopover } from "./plugins/core/PropertyPopover.js";
+import { $createGenericHTMLNode, $isGenericHTMLNode, GenericHTMLNode } from "./plugins/core/GenericHTMLNode.js";
 import { $createImageNode, $isImageNode, ImageNode } from "./plugins/image/ImageNode.js";
 import { useCodeBlockEditorContext } from "./plugins/codeblock/CodeBlockNode.js";
 import { RefCount, defaultComparator, realm } from "./gurx/realm.js";
 import { RealmPluginInitializer, RequirePlugin, realmFactoryToComponent, realmPlugin, sysHooks, useHasPlugin } from "./gurx/react.js";
 import { getRealmFactory, realmFactory, system } from "./gurx/realmFactory.js";
 export {
+  $createGenericHTMLNode,
   $createImageNode,
+  $isGenericHTMLNode,
   $isImageNode,
   ADMONITION_TYPES,
   AdmonitionDirectiveDescriptor,
@@ -72,6 +75,7 @@ export {
   DialogButton,
   DiffSourceToggleWrapper,
   GenericDirectiveEditor,
+  GenericHTMLNode,
   GenericJsxEditor,
   INSERT_IMAGE_COMMAND,
   ImageNode,

package/dist/plugins/core/GenericHTMLNode.d.ts

@@ -0,0 +1,38 @@
+import { DOMConversionMap, DOMExportOutput, ElementNode, LexicalEditor, LexicalNode, NodeKey, SerializedElementNode, Spread } from 'lexical';
+import { MdxJsxAttribute } from 'mdast-util-mdx-jsx';
+import { MDX_NODE_TYPES, htmlTags } from './MdastHTMLNode';
+export type KnownHTMLTagType = (typeof htmlTags)[number];
+declare const TYPE_NAME: "generic-html";
+export type SerializedGenericHTMLNode = Spread<{
+    tag: KnownHTMLTagType;
+    type: typeof TYPE_NAME;
+    mdxType: MdxNodeType;
+    attributes: MdxJsxAttribute[];
+    version: 1;
+}, SerializedElementNode>;
+type MdxNodeType = (typeof MDX_NODE_TYPES)[number];
+export declare class GenericHTMLNode extends ElementNode {
+    /** @internal */
+    __tag: KnownHTMLTagType;
+    __nodeType: MdxNodeType;
+    __attributes: MdxJsxAttribute[];
+    static getType(): string;
+    static clone(node: GenericHTMLNode): GenericHTMLNode;
+    constructor(tag: KnownHTMLTagType, type: MdxNodeType, attributes: MdxJsxAttribute[], key?: NodeKey);
+    getTag(): KnownHTMLTagType;
+    getNodeType(): MdxNodeType;
+    getAttributes(): MdxJsxAttribute[];
+    updateAttributes(attributes: MdxJsxAttribute[]): void;
+    getStyle(): string;
+    createDOM(): HTMLElement;
+    updateDOM(): boolean;
+    static importDOM(): DOMConversionMap | null;
+    exportDOM(editor: LexicalEditor): DOMExportOutput;
+    static importJSON(serializedNode: SerializedGenericHTMLNode): GenericHTMLNode;
+    exportJSON(): SerializedGenericHTMLNode;
+    extractWithChild(): boolean;
+    isInline(): boolean;
+}
+export declare function $createGenericHTMLNode(tag: KnownHTMLTagType, type: MdxNodeType, attributes: MdxJsxAttribute[]): GenericHTMLNode;
+export declare function $isGenericHTMLNode(node: LexicalNode | null | undefined): node is GenericHTMLNode;
+export {};

package/dist/plugins/core/GenericHTMLNode.js

@@ -0,0 +1,117 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { ElementNode, $applyNodeReplacement } from "lexical";
+const TYPE_NAME = "generic-html";
+class GenericHTMLNode extends ElementNode {
+  constructor(tag, type, attributes, key) {
+    super(key);
+    /** @internal */
+    __publicField(this, "__tag");
+    __publicField(this, "__nodeType");
+    __publicField(this, "__attributes");
+    this.__tag = tag;
+    this.__nodeType = type;
+    this.__attributes = attributes;
+  }
+  static getType() {
+    return TYPE_NAME;
+  }
+  static clone(node) {
+    return new GenericHTMLNode(node.__tag, node.__nodeType, node.__attributes, node.__key);
+  }
+  getTag() {
+    return this.__tag;
+  }
+  getNodeType() {
+    return this.__nodeType;
+  }
+  getAttributes() {
+    return this.__attributes;
+  }
+  updateAttributes(attributes) {
+    const self = this.getWritable();
+    self.__attributes = attributes;
+  }
+  getStyle() {
+    var _a;
+    return (_a = this.__attributes.find((attribute) => attribute.name === "style")) == null ? void 0 : _a.value;
+  }
+  // View
+  createDOM() {
+    const tag = this.__tag;
+    const element = document.createElement(tag);
+    this.__attributes.forEach((attribute) => {
+      element.setAttribute(attribute.name, attribute.value);
+    });
+    return element;
+  }
+  updateDOM() {
+    return false;
+  }
+  static importDOM() {
+    return {};
+  }
+  exportDOM(editor) {
+    const { element } = super.exportDOM(editor);
+    return {
+      element
+    };
+  }
+  static importJSON(serializedNode) {
+    const node = $createGenericHTMLNode(serializedNode.tag, serializedNode.mdxType, serializedNode.attributes);
+    node.setFormat(serializedNode.format);
+    node.setIndent(serializedNode.indent);
+    node.setDirection(serializedNode.direction);
+    return node;
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      tag: this.getTag(),
+      attributes: this.__attributes,
+      mdxType: this.__nodeType,
+      type: TYPE_NAME,
+      version: 1
+    };
+  }
+  /*
+    // Mutation
+    insertNewAfter(selection?: RangeSelection, restoreSelection = true): ParagraphNode | GenericHTMLNode {
+      const anchorOffet = selection ? selection.anchor.offset : 0
+      const newElement =
+        anchorOffet > 0 && anchorOffet < this.getTextContentSize() ? $createHeadingNode(this.getTag()) : $createParagraphNode()
+      const direction = this.getDirection()
+      newElement.setDirection(direction)
+      this.insertAfter(newElement, restoreSelection)
+      return newElement
+    }
+  
+    collapseAtStart(): true {
+      const newElement = !this.isEmpty() ? $createHeadingNode(this.getTag()) : $createParagraphNode()
+      const children = this.getChildren()
+      children.forEach((child) => newElement.append(child))
+      this.replace(newElement)
+      return true
+    }*/
+  extractWithChild() {
+    return true;
+  }
+  isInline() {
+    return this.__nodeType === "mdxJsxTextElement";
+  }
+}
+function $createGenericHTMLNode(tag, type, attributes) {
+  return $applyNodeReplacement(new GenericHTMLNode(tag, type, attributes));
+}
+function $isGenericHTMLNode(node) {
+  return node instanceof GenericHTMLNode;
+}
+export {
+  $createGenericHTMLNode,
+  $isGenericHTMLNode,
+  GenericHTMLNode
+};

package/dist/plugins/core/LexicalGenericHTMLNodeVisitor.d.ts

@@ -0,0 +1,4 @@
+import { MdxJsxFlowElement, MdxJsxTextElement } from 'mdast-util-mdx-jsx';
+import { GenericHTMLNode } from './GenericHTMLNode';
+import { LexicalExportVisitor } from '../../exportMarkdownFromLexical';
+export declare const LexicalGenericHTMLVisitor: LexicalExportVisitor<GenericHTMLNode, MdxJsxFlowElement | MdxJsxTextElement>;

package/dist/plugins/core/LexicalGenericHTMLNodeVisitor.js

@@ -0,0 +1,15 @@
+import { $isGenericHTMLNode } from "./GenericHTMLNode.js";
+const LexicalGenericHTMLVisitor = {
+  testLexicalNode: $isGenericHTMLNode,
+  visitLexicalNode({ actions, lexicalNode }) {
+    actions.addAndStepInto("mdxJsxTextElement", {
+      name: lexicalNode.getTag(),
+      type: lexicalNode.getNodeType(),
+      attributes: lexicalNode.getAttributes()
+    });
+  },
+  priority: -100
+};
+export {
+  LexicalGenericHTMLVisitor
+};

package/dist/plugins/core/LexicalTextVisitor.js

@@ -5,7 +5,14 @@ function isMdastText(mdastNode) {
 }
 const LexicalTextVisitor = {
   shouldJoin: (prevNode, currentNode) => {
-    return ["text", "emphasis", "strong", "mdxJsxTextElement"].includes(prevNode.type) && prevNode.type === currentNode.type;
+    if (["text", "emphasis", "strong"].includes(prevNode.type)) {
+      return prevNode.type === currentNode.type;
+    }
+    if (prevNode.type === "mdxJsxTextElement" && currentNode.type === "mdxJsxTextElement") {
+      const currentMdxNode = currentNode;
+      return prevNode.name === currentMdxNode.name && JSON.stringify(prevNode.attributes) === JSON.stringify(currentMdxNode.attributes);
+    }
+    return false;
   },
   join(prevNode, currentNode) {
     if (isMdastText(prevNode) && isMdastText(currentNode)) {
@@ -26,6 +33,7 @@ const LexicalTextVisitor = {
     const prevFormat = $isTextNode(previousSibling) ? previousSibling.getFormat() : 0;
     const textContent = lexicalNode.getTextContent();
     const format = lexicalNode.getFormat() ?? 0;
+    const style = lexicalNode.getStyle();
     if (format & IS_CODE) {
       actions.addAndStepInto("inlineCode", {
         value: textContent
@@ -33,6 +41,14 @@ const LexicalTextVisitor = {
       return;
     }
     let localParentNode = mdastParent;
+    if (style) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "mdxJsxTextElement",
+        name: "span",
+        children: [],
+        attributes: [{ type: "mdxJsxAttribute", name: "style", value: style }]
+      });
+    }
     if (prevFormat & format & IS_ITALIC) {
       localParentNode = actions.appendToParent(localParentNode, {
         type: "emphasis",

package/dist/plugins/core/MdastHTMLNode.d.ts

@@ -0,0 +1,13 @@
+import * as Mdast from 'mdast';
+import { MdxJsxFlowElement, MdxJsxTextElement } from 'mdast-util-mdx-jsx';
+interface MdastBlockHTMLNode extends MdxJsxFlowElement {
+    name: (typeof htmlTags)[number];
+}
+interface MdastInlineHTMLNode extends MdxJsxTextElement {
+    name: (typeof htmlTags)[number];
+}
+export type MdastHTMLNode = MdastBlockHTMLNode | MdastInlineHTMLNode;
+export declare const MDX_NODE_TYPES: readonly ["mdxJsxTextElement", "mdxJsxFlowElement"];
+export declare function isMdastHTMLNode(node: Mdast.Parent | Mdast.Content | Mdast.Root): node is MdastHTMLNode;
+export declare const htmlTags: readonly ["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "blockquote", "body", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "u", "ul", "var", "video", "wbr"];
+export {};

package/dist/plugins/core/MdastHTMLNode.js

@@ -0,0 +1,122 @@
+const MDX_NODE_TYPES = ["mdxJsxTextElement", "mdxJsxFlowElement"];
+function isMdastHTMLNode(node) {
+  var _a;
+  return MDX_NODE_TYPES.includes(node.type) && htmlTags.includes(((_a = node.name) == null ? void 0 : _a.toLowerCase()) ?? "");
+}
+const htmlTags = [
+  "a",
+  "abbr",
+  "address",
+  "area",
+  "article",
+  "aside",
+  "audio",
+  "b",
+  "base",
+  "bdi",
+  "bdo",
+  "blockquote",
+  "body",
+  "br",
+  "button",
+  "canvas",
+  "caption",
+  "cite",
+  "code",
+  "col",
+  "colgroup",
+  "data",
+  "datalist",
+  "dd",
+  "del",
+  "details",
+  "dfn",
+  "dialog",
+  "div",
+  "dl",
+  "dt",
+  "em",
+  "embed",
+  "fieldset",
+  "figcaption",
+  "figure",
+  "footer",
+  "form",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "head",
+  "header",
+  "hgroup",
+  "hr",
+  "html",
+  "i",
+  "iframe",
+  // 'img',
+  "input",
+  "ins",
+  "kbd",
+  "label",
+  "legend",
+  "li",
+  "link",
+  "main",
+  "map",
+  "mark",
+  "meta",
+  "meter",
+  "nav",
+  "noscript",
+  "object",
+  "ol",
+  "optgroup",
+  "option",
+  "output",
+  "p",
+  "param",
+  "picture",
+  "pre",
+  "progress",
+  "q",
+  "rp",
+  "rt",
+  "ruby",
+  "s",
+  "samp",
+  "script",
+  "section",
+  "select",
+  "small",
+  "source",
+  "span",
+  "strong",
+  "style",
+  "sub",
+  "summary",
+  "sup",
+  "table",
+  "tbody",
+  "td",
+  "template",
+  "textarea",
+  "tfoot",
+  "th",
+  "thead",
+  "time",
+  "title",
+  "tr",
+  "track",
+  "u",
+  "ul",
+  "var",
+  "video",
+  "wbr"
+];
+export {
+  MDX_NODE_TYPES,
+  htmlTags,
+  isMdastHTMLNode
+};

package/dist/plugins/core/MdastHTMLVisitor.d.ts

@@ -0,0 +1,3 @@
+import { MdastImportVisitor } from '../../importMarkdownToLexical';
+import { MdastHTMLNode } from './MdastHTMLNode';
+export declare const MdastHTMLVisitor: MdastImportVisitor<MdastHTMLNode>;

package/dist/plugins/core/MdastHTMLVisitor.js

@@ -0,0 +1,12 @@
+import { $createGenericHTMLNode } from "./GenericHTMLNode.js";
+import { isMdastHTMLNode } from "./MdastHTMLNode.js";
+const MdastHTMLVisitor = {
+  testNode: isMdastHTMLNode,
+  visitNode: function({ mdastNode, actions }) {
+    actions.addAndStepInto($createGenericHTMLNode(mdastNode.name, mdastNode.type, mdastNode.attributes));
+  },
+  priority: -100
+};
+export {
+  MdastHTMLVisitor
+};

package/dist/plugins/core/index.d.ts

@@ -12,6 +12,7 @@ import type { SystemSpec, Realm, PluginConstructor, TypedRealm, ValueForKey, Sys
 import { MdastImportVisitor } from '../../importMarkdownToLexical';
 import type { JsxComponentDescriptor } from '../jsx';
 import { type IconKey } from './Icon';
+export * from './GenericHTMLNode';
 /** @internal */
 export type EditorSubscription = (activeEditor: LexicalEditor) => () => void;
 /** @internal */
@@ -511,4 +512,3 @@ corePluginHooks: {
         iconComponentFor: RealmNode<(name: IconKey) => React.ReactNode>;
     }, K_2>) => void;
 };
-export {};

package/dist/plugins/core/index.js

@@ -2,7 +2,7 @@ import { createEmptyHistoryState } from "@lexical/react/LexicalHistoryPlugin.js"
 import { $isHeadingNode } from "@lexical/rich-text";
 import { $setBlocksType } from "@lexical/selection";
 import { $findMatchingParent, $wrapNodeInElement, $insertNodeToNearestRoot } from "@lexical/utils";
-import { createCommand, SELECTION_CHANGE_COMMAND, $getRoot, COMMAND_PRIORITY_CRITICAL, $setSelection, BLUR_COMMAND, KEY_DOWN_COMMAND, $isDecoratorNode, FORMAT_TEXT_COMMAND, $isRootOrShadowRoot, $getSelection, $isRangeSelection, $insertNodes, $createParagraphNode, ParagraphNode, TextNode } from "lexical";
+import { createCommand, SELECTION_CHANGE_COMMAND, $getRoot, COMMAND_PRIORITY_CRITICAL, $setSelection, BLUR_COMMAND, FOCUS_COMMAND, KEY_DOWN_COMMAND, $isDecoratorNode, FORMAT_TEXT_COMMAND, $isRootOrShadowRoot, $getSelection, $isRangeSelection, $insertNodes, $createParagraphNode, ParagraphNode, TextNode } from "lexical";
 import { exportMarkdownFromLexical } from "../../exportMarkdownFromLexical.js";
 import { importMarkdownToLexical } from "../../importMarkdownToLexical.js";
 import { LexicalLinebreakVisitor } from "./LexicalLinebreakVisitor.js";
@@ -18,6 +18,12 @@ import { SharedHistoryPlugin } from "./SharedHistoryPlugin.js";
 import { noop } from "../../utils/fp.js";
 import { controlOrMeta } from "../../utils/detectMac.js";
 import { MdastBreakVisitor } from "./MdastBreakVisitor.js";
+import { mdxJsxFromMarkdown, mdxJsxToMarkdown } from "mdast-util-mdx-jsx";
+import { mdxJsx } from "micromark-extension-mdx-jsx";
+import { MdastHTMLVisitor } from "./MdastHTMLVisitor.js";
+import { GenericHTMLNode } from "./GenericHTMLNode.js";
+import { $createGenericHTMLNode, $isGenericHTMLNode } from "./GenericHTMLNode.js";
+import { LexicalGenericHTMLVisitor } from "./LexicalGenericHTMLNodeVisitor.js";
 import { system } from "../../gurx/realmFactory.js";
 import { realmPlugin } from "../../gurx/react.js";
 const NESTED_EDITOR_UPDATED_COMMAND = createCommand("NESTED_EDITOR_UPDATED_COMMAND");
@@ -142,8 +148,14 @@ const coreSystem = system((r) => {
   const addToMarkdownExtension = createAppendNodeFor(toMarkdownExtensions);
   const setMarkdown = r.node();
   r.sub(
-    r.pipe(setMarkdown, r.o.withLatestFrom(rootEditor, importVisitors, mdastExtensions, syntaxExtensions, inFocus)),
-    ([theNewMarkdownValue, editor, importVisitors2, mdastExtensions2, syntaxExtensions2, inFocus2]) => {
+    r.pipe(
+      setMarkdown,
+      r.o.withLatestFrom(markdown, rootEditor, importVisitors, mdastExtensions, syntaxExtensions, inFocus),
+      r.o.filter(([newMarkdown, oldMarkdown]) => {
+        return newMarkdown.trim() !== oldMarkdown.trim();
+      })
+    ),
+    ([theNewMarkdownValue, , editor, importVisitors2, mdastExtensions2, syntaxExtensions2, inFocus2]) => {
       editor == null ? void 0 : editor.update(() => {
         $getRoot().clear();
         importMarkdownToLexical({
@@ -155,6 +167,8 @@ const coreSystem = system((r) => {
         });
         if (!inFocus2) {
           $setSelection(null);
+        } else {
+          editor.focus();
         }
       });
     }
@@ -209,6 +223,16 @@ const coreSystem = system((r) => {
       COMMAND_PRIORITY_CRITICAL
     );
   });
+  r.pub(createRootEditorSubscription, (theEditor) => {
+    return theEditor.registerCommand(
+      FOCUS_COMMAND,
+      () => {
+        r.pub(inFocus, true);
+        return false;
+      },
+      COMMAND_PRIORITY_CRITICAL
+    );
+  });
   r.pub(createRootEditorSubscription, (theRootEditor) => {
     return theRootEditor.registerCommand(
       KEY_DOWN_COMMAND,
@@ -400,22 +424,31 @@ const [
   init(realm, params) {
     realm.pubKey("initialMarkdown", params.initialMarkdown.trim());
     realm.pubKey("iconComponentFor", params.iconComponentFor);
+    realm.pubKey("addMdastExtension", mdxJsxFromMarkdown());
+    realm.pubKey("addSyntaxExtension", mdxJsx());
+    realm.pubKey("addToMarkdownExtension", mdxJsxToMarkdown());
     realm.pubKey("addImportVisitor", MdastRootVisitor);
     realm.pubKey("addImportVisitor", MdastParagraphVisitor);
     realm.pubKey("addImportVisitor", MdastTextVisitor);
     realm.pubKey("addImportVisitor", MdastFormattingVisitor);
     realm.pubKey("addImportVisitor", MdastInlineCodeVisitor);
     realm.pubKey("addImportVisitor", MdastBreakVisitor);
+    realm.pubKey("addImportVisitor", MdastHTMLVisitor);
     realm.pubKey("addLexicalNode", ParagraphNode);
     realm.pubKey("addLexicalNode", TextNode);
+    realm.pubKey("addLexicalNode", GenericHTMLNode);
     realm.pubKey("addExportVisitor", LexicalRootVisitor);
     realm.pubKey("addExportVisitor", LexicalParagraphVisitor);
     realm.pubKey("addExportVisitor", LexicalTextVisitor);
     realm.pubKey("addExportVisitor", LexicalLinebreakVisitor);
+    realm.pubKey("addExportVisitor", LexicalGenericHTMLVisitor);
     realm.pubKey("addComposerChild", SharedHistoryPlugin);
   }
 });
 export {
+  $createGenericHTMLNode,
+  $isGenericHTMLNode,
+  GenericHTMLNode,
   NESTED_EDITOR_UPDATED_COMMAND,
   corePlugin,
   corePluginHooks,

package/dist/plugins/diff-source/SourceEditor.js

@@ -6,7 +6,13 @@ import { basicSetup } from "codemirror";
 import React__default from "react";
 import { diffSourcePluginHooks } from "./index.js";
 import { corePluginHooks } from "../core/index.js";
-const COMMON_STATE_CONFIG_EXTENSIONS = [basicSetup, basicLight, markdown(), lineNumbers()];
+const COMMON_STATE_CONFIG_EXTENSIONS = [
+  basicSetup,
+  basicLight,
+  markdown(),
+  lineNumbers(),
+  EditorView.lineWrapping
+];
 const SourceEditor = () => {
   const [markdown2, readOnly] = corePluginHooks.useEmitterValues("markdown", "readOnly");
   const [cmExtensions] = diffSourcePluginHooks.useEmitterValues("cmExtensions");

package/dist/style.css

@@ -149,6 +149,9 @@
     background: transparent;
     font-size: var(--text-xxs);
   }
+.mdxeditor .cm-activeLine {
+    background: transparent;
+  }
 ._editorRoot_1xgxv_37 {
   --accentBase: var(--blue1);
   --accentBgSubtle: var(--blue2);

package/dist/utils/mergeStyleAttributes.d.ts

@@ -0,0 +1 @@
+export declare function mergeStyleAttributes(style1: string, style2: string): string;

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/package.json

@@ -9,7 +9,7 @@
   "private": false,
   "sideEffects": false,
   "type": "module",
-  "version": "1.10.2",
+  "version": "1.11.1",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",
@@ -79,6 +79,7 @@
     "micromark-extension-frontmatter": "1.1.0",
     "micromark-extension-gfm-table": "^1.0.6",
     "micromark-extension-gfm-task-list-item": "1.0.5",
+    "micromark-extension-mdx-jsx": "^1.0.5",
     "micromark-extension-mdxjs": "1.0.1",
     "react-hook-form": "^7.44.2",
     "unidiff": "^1.0.2"