@mdxeditor/editor 0.10.0-alpha.1 → 0.10.0-alpha.2

package/dist/MDXEditor.js

@@ -62,7 +62,7 @@ const EditorRootElement = ({ children, className }) => {
   React__default.useEffect(() => {
     setEditorRootElementRef(editorRootElementRef);
   }, [editorRootElementRef, setEditorRootElementRef]);
-  return /* @__PURE__ */ React__default.createElement("div", { className: classNames(styles.editorRoot, styles.editorWrapper, className), ref: editorRootElementRef }, children);
+  return /* @__PURE__ */ React__default.createElement("div", { className: classNames(styles.editorRoot, styles.editorWrapper, className, "mdxeditor"), ref: editorRootElementRef }, children);
 };
 const Methods = ({ mdxRef }) => {
   const realm = corePluginHooks.useRealmContext();

package/dist/importMarkdownToLexical.js

@@ -28,7 +28,7 @@ function importMdastTreeToLexical({ root, mdastRoot, visitors }) {
       return visitor2.testNode(mdastNode);
     });
     if (!visitor) {
-      throw new Error(`no MdastImportVisitor found for ${mdastNode.type}`, {
+      throw new Error(`no MdastImportVisitor found for ${mdastNode.type} ${JSON.stringify(mdastNode)}`, {
         cause: mdastNode
       });
     }

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

@@ -3,6 +3,7 @@ import { SandpackProvider, CodeEditor } from "@codesandbox/sandpack-react";
 import React__default from "react";
 import { diffSourcePluginHooks } from "./index.js";
 import { corePluginHooks } from "../core/index.js";
+import { EditorView } from "@codemirror/view";
 const SourceEditor = () => {
   const [markdown$1] = corePluginHooks.useEmitterValues("markdown");
   const updateMarkdown = diffSourcePluginHooks.usePublisher("markdownSourceEditorValue");
@@ -10,6 +11,7 @@ const SourceEditor = () => {
   return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: null }, /* @__PURE__ */ React__default.createElement(SandpackProvider, null, /* @__PURE__ */ React__default.createElement(
     CodeEditor,
     {
+      extensions: [EditorView.lineWrapping],
       showLineNumbers: true,
       additionalLanguages: [{ name: "markdown", extensions: ["md"], language: markdown() }],
       initMode: "lazy",

package/dist/plugins/image/ImageEditor.d.ts

@@ -3,5 +3,7 @@ export interface ImageEditorProps {
     nodeKey: string;
     src: string;
     title?: string;
+    width: number | 'inherit';
+    height: number | 'inherit';
 }
-export declare function ImageEditor({ src, title, nodeKey }: ImageEditorProps): JSX.Element;
+export declare function ImageEditor({ src, title, nodeKey, width, height }: ImageEditorProps): JSX.Element;

package/dist/plugins/image/ImageEditor.js

@@ -6,6 +6,7 @@ import { $isNodeSelection, $getSelection, $getNodeByKey, $setSelection, SELECTIO
 import styles from "../../styles/ui.module.css.js";
 import classNames from "classnames";
 import { $isImageNode } from "./ImageNode.js";
+import ImageResizer from "./ImageResizer.js";
 const imageCache = /* @__PURE__ */ new Set();
 function useSuspenseImage(src) {
   if (!imageCache.has(src)) {
@@ -23,18 +24,21 @@ function LazyImage({
   title,
   className,
   imageRef,
-  src
+  src,
+  width,
+  height
 }) {
   useSuspenseImage(src);
-  return /* @__PURE__ */ React__default.createElement("img", { className: className || void 0, src, title, ref: imageRef, draggable: "false" });
+  return /* @__PURE__ */ React__default.createElement("img", { className: className || void 0, src, title, ref: imageRef, draggable: "false", width, height });
 }
-function ImageEditor({ src, title, nodeKey }) {
+function ImageEditor({ src, title, nodeKey, width, height }) {
   const imageRef = React__default.useRef(null);
   const buttonRef = React__default.useRef(null);
   const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
   const [editor] = useLexicalComposerContext();
   const [selection, setSelection] = React__default.useState(null);
   const activeEditorRef = React__default.useRef(null);
+  const [isResizing, setIsResizing] = React__default.useState(false);
   const onDelete = React__default.useCallback(
     (payload) => {
       if (isSelected && $isNodeSelection($getSelection())) {
@@ -101,6 +105,9 @@ function ImageEditor({ src, title, nodeKey }) {
         CLICK_COMMAND,
         (payload) => {
           const event = payload;
+          if (isResizing) {
+            return true;
+          }
           if (event.target === imageRef.current) {
             if (event.shiftKey) {
               setSelected(!isSelected);
@@ -134,12 +141,28 @@ function ImageEditor({ src, title, nodeKey }) {
       isMounted = false;
       unregister();
     };
-  }, [clearSelection, editor, isSelected, nodeKey, onDelete, onEnter, onEscape, setSelected]);
+  }, [clearSelection, editor, isResizing, isSelected, nodeKey, onDelete, onEnter, onEscape, setSelected]);
+  const onResizeEnd = (nextWidth, nextHeight) => {
+    setTimeout(() => {
+      setIsResizing(false);
+    }, 200);
+    editor.update(() => {
+      const node = $getNodeByKey(nodeKey);
+      if ($isImageNode(node)) {
+        node.setWidthAndHeight(nextWidth, nextHeight);
+      }
+    });
+  };
+  const onResizeStart = () => {
+    setIsResizing(true);
+  };
   const draggable = $isNodeSelection(selection);
   const isFocused = isSelected;
-  return /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: null }, /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { draggable, className: styles.imageWrapper, "data-editor-block-type": "image" }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: null }, /* @__PURE__ */ React__default.createElement("div", { className: styles.imageWrapper, "data-editor-block-type": "image" }, /* @__PURE__ */ React__default.createElement("div", { draggable }, /* @__PURE__ */ React__default.createElement(
     LazyImage,
     {
+      width,
+      height,
       className: classNames({
         [styles.focusedImage]: isFocused
       }),
@@ -147,7 +170,7 @@ function ImageEditor({ src, title, nodeKey }) {
       title: title || "",
       imageRef
     }
-  ))));
+  )), draggable && isFocused && /* @__PURE__ */ React__default.createElement(ImageResizer, { editor, imageRef, onResizeStart, onResizeEnd })));
 }
 export {
   ImageEditor

package/dist/plugins/image/ImageNode.d.ts

@@ -7,6 +7,8 @@ import { DecoratorNode } from 'lexical';
 export type SerializedImageNode = Spread<{
     altText: string;
     title?: string;
+    width?: number;
+    height?: number;
     src: string;
     type: 'image';
     version: 1;
@@ -18,18 +20,24 @@ export declare class ImageNode extends DecoratorNode<JSX.Element> {
     __src: string;
     __altText: string;
     __title: string | undefined;
+    __width: 'inherit' | number;
+    __height: 'inherit' | number;
     static getType(): string;
     static clone(node: ImageNode): ImageNode;
     static importJSON(serializedNode: SerializedImageNode): ImageNode;
     exportDOM(): DOMExportOutput;
     static importDOM(): DOMConversionMap | null;
-    constructor(src: string, altText: string, title: string | undefined, key?: NodeKey);
+    constructor(src: string, altText: string, title: string | undefined, width?: 'inherit' | number, height?: 'inherit' | number, key?: NodeKey);
     exportJSON(): SerializedImageNode;
+    setWidthAndHeight(width: 'inherit' | number, height: 'inherit' | number): void;
     createDOM(config: EditorConfig): HTMLElement;
     updateDOM(): false;
     getSrc(): string;
     getAltText(): string;
     getTitle(): string | undefined;
+    getHeight(): 'inherit' | number;
+    getWidth(): 'inherit' | number;
+    hasExplicitDimensions(): boolean;
     setTitle(title: string | undefined): void;
     decorate(_parentEditor: LexicalEditor): JSX.Element;
 }
@@ -38,6 +46,8 @@ export declare class ImageNode extends DecoratorNode<JSX.Element> {
  */
 export interface CreateImageNodeOptions {
     altText: string;
+    width?: number;
+    height?: number;
     title?: string;
     key?: NodeKey;
     src: string;

package/dist/plugins/image/ImageNode.js

@@ -9,34 +9,40 @@ import { DecoratorNode } from "lexical";
 import { ImageEditor } from "./ImageEditor.js";
 function convertImageElement(domNode) {
   if (domNode instanceof HTMLImageElement) {
-    const { alt: altText, src, title } = domNode;
-    const node = $createImageNode({ altText, src, title });
+    const { alt: altText, src, title, width, height } = domNode;
+    const node = $createImageNode({ altText, src, title, width, height });
     return { node };
   }
   return null;
 }
 class ImageNode extends DecoratorNode {
-  constructor(src, altText, title, key) {
+  constructor(src, altText, title, width, height, key) {
     super(key);
     __publicField(this, "__src");
     __publicField(this, "__altText");
     __publicField(this, "__title");
+    __publicField(this, "__width");
+    __publicField(this, "__height");
     this.__src = src;
     this.__title = title;
     this.__altText = altText;
+    this.__width = width || "inherit";
+    this.__height = height || "inherit";
   }
   static getType() {
     return "image";
   }
   static clone(node) {
-    return new ImageNode(node.__src, node.__altText, node.__title, node.__key);
+    return new ImageNode(node.__src, node.__altText, node.__title, node.__width, node.__height, node.__key);
   }
   static importJSON(serializedNode) {
-    const { altText, title, src } = serializedNode;
+    const { altText, title, src, width, height } = serializedNode;
     const node = $createImageNode({
       altText,
       title,
-      src
+      src,
+      height,
+      width
     });
     return node;
   }
@@ -47,6 +53,12 @@ class ImageNode extends DecoratorNode {
     if (this.__title) {
       element.setAttribute("title", this.__title);
     }
+    if (this.__width) {
+      element.setAttribute("width", this.__width.toString());
+    }
+    if (this.__height) {
+      element.setAttribute("height", this.__height.toString());
+    }
     return { element };
   }
   static importDOM() {
@@ -61,11 +73,18 @@ class ImageNode extends DecoratorNode {
     return {
       altText: this.getAltText(),
       title: this.getTitle(),
+      height: this.__height === "inherit" ? 0 : this.__height,
+      width: this.__width === "inherit" ? 0 : this.__width,
       src: this.getSrc(),
       type: "image",
       version: 1
     };
   }
+  setWidthAndHeight(width, height) {
+    const writable = this.getWritable();
+    writable.__width = width;
+    writable.__height = height;
+  }
   createDOM(config) {
     const span = document.createElement("span");
     const theme = config.theme;
@@ -87,16 +106,25 @@ class ImageNode extends DecoratorNode {
   getTitle() {
     return this.__title;
   }
+  getHeight() {
+    return this.__height;
+  }
+  getWidth() {
+    return this.__width;
+  }
+  hasExplicitDimensions() {
+    return this.__width !== "inherit" || this.__height !== "inherit";
+  }
   setTitle(title) {
     this.getWritable().__title = title;
   }
   decorate(_parentEditor) {
-    return /* @__PURE__ */ React__default.createElement(ImageEditor, { src: this.getSrc(), title: this.getTitle(), nodeKey: this.getKey() });
+    return /* @__PURE__ */ React__default.createElement(ImageEditor, { src: this.getSrc(), title: this.getTitle(), nodeKey: this.getKey(), width: this.__width, height: this.__height });
   }
 }
 function $createImageNode(options) {
-  const { altText, title, src, key } = options;
-  return new ImageNode(src, altText, title, key);
+  const { altText, title, src, key, width, height } = options;
+  return new ImageNode(src, altText, title, width, height, key);
 }
 function $isImageNode(node) {
   return node instanceof ImageNode;

package/dist/plugins/image/ImageResizer.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+/// <reference types="react" />
+import type { LexicalEditor } from 'lexical';
+export default function ImageResizer({ onResizeStart, onResizeEnd, imageRef, maxWidth, editor }: {
+    editor: LexicalEditor;
+    imageRef: {
+        current: null | HTMLElement;
+    };
+    maxWidth?: number;
+    onResizeEnd: (width: 'inherit' | number, height: 'inherit' | number) => void;
+    onResizeStart: () => void;
+}): JSX.Element;

package/dist/plugins/image/ImageResizer.js

@@ -0,0 +1,214 @@
+import * as React from "react";
+import { useRef } from "react";
+import styles from "../../styles/ui.module.css.js";
+import classNames from "classnames";
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+const Direction = {
+  east: 1 << 0,
+  north: 1 << 3,
+  south: 1 << 1,
+  west: 1 << 2
+};
+function ImageResizer({
+  onResizeStart,
+  onResizeEnd,
+  imageRef,
+  maxWidth,
+  editor
+}) {
+  const controlWrapperRef = useRef(null);
+  const userSelect = useRef({
+    priority: "",
+    value: "default"
+  });
+  const positioningRef = useRef({
+    currentHeight: 0,
+    currentWidth: 0,
+    direction: 0,
+    isResizing: false,
+    ratio: 0,
+    startHeight: 0,
+    startWidth: 0,
+    startX: 0,
+    startY: 0
+  });
+  const editorRootElement = editor.getRootElement();
+  const maxWidthContainer = maxWidth ? maxWidth : editorRootElement !== null ? editorRootElement.getBoundingClientRect().width - 20 : 100;
+  const maxHeightContainer = editorRootElement !== null ? editorRootElement.getBoundingClientRect().height - 20 : 100;
+  const minWidth = 100;
+  const minHeight = 100;
+  const setStartCursor = (direction) => {
+    const ew = direction === Direction.east || direction === Direction.west;
+    const ns = direction === Direction.north || direction === Direction.south;
+    const nwse = direction & Direction.north && direction & Direction.west || direction & Direction.south && direction & Direction.east;
+    const cursorDir = ew ? "ew" : ns ? "ns" : nwse ? "nwse" : "nesw";
+    if (editorRootElement !== null) {
+      editorRootElement.style.setProperty("cursor", `${cursorDir}-resize`, "important");
+    }
+    if (document.body !== null) {
+      document.body.style.setProperty("cursor", `${cursorDir}-resize`, "important");
+      userSelect.current.value = document.body.style.getPropertyValue("-webkit-user-select");
+      userSelect.current.priority = document.body.style.getPropertyPriority("-webkit-user-select");
+      document.body.style.setProperty("-webkit-user-select", `none`, "important");
+    }
+  };
+  const setEndCursor = () => {
+    if (editorRootElement !== null) {
+      editorRootElement.style.setProperty("cursor", "text");
+    }
+    if (document.body !== null) {
+      document.body.style.setProperty("cursor", "default");
+      document.body.style.setProperty("-webkit-user-select", userSelect.current.value, userSelect.current.priority);
+    }
+  };
+  const handlePointerDown = (event, direction) => {
+    if (!editor.isEditable()) {
+      return;
+    }
+    const image = imageRef.current;
+    const controlWrapper = controlWrapperRef.current;
+    if (image !== null && controlWrapper !== null) {
+      event.preventDefault();
+      const { width, height } = image.getBoundingClientRect();
+      const positioning = positioningRef.current;
+      positioning.startWidth = width;
+      positioning.startHeight = height;
+      positioning.ratio = width / height;
+      positioning.currentWidth = width;
+      positioning.currentHeight = height;
+      positioning.startX = event.clientX;
+      positioning.startY = event.clientY;
+      positioning.isResizing = true;
+      positioning.direction = direction;
+      setStartCursor(direction);
+      onResizeStart();
+      controlWrapper.classList.add(styles.imageControlWrapperResizing);
+      image.style.height = `${height}px`;
+      image.style.width = `${width}px`;
+      document.addEventListener("pointermove", handlePointerMove);
+      document.addEventListener("pointerup", handlePointerUp);
+    }
+  };
+  const handlePointerMove = (event) => {
+    const image = imageRef.current;
+    const positioning = positioningRef.current;
+    const isHorizontal = positioning.direction & (Direction.east | Direction.west);
+    const isVertical = positioning.direction & (Direction.south | Direction.north);
+    if (image !== null && positioning.isResizing) {
+      if (isHorizontal && isVertical) {
+        let diff = Math.floor(positioning.startX - event.clientX);
+        diff = positioning.direction & Direction.east ? -diff : diff;
+        const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);
+        const height = width / positioning.ratio;
+        image.style.width = `${width}px`;
+        image.style.height = `${height}px`;
+        positioning.currentHeight = height;
+        positioning.currentWidth = width;
+      } else if (isVertical) {
+        let diff = Math.floor(positioning.startY - event.clientY);
+        diff = positioning.direction & Direction.south ? -diff : diff;
+        const height = clamp(positioning.startHeight + diff, minHeight, maxHeightContainer);
+        image.style.height = `${height}px`;
+        positioning.currentHeight = height;
+      } else {
+        let diff = Math.floor(positioning.startX - event.clientX);
+        diff = positioning.direction & Direction.east ? -diff : diff;
+        const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);
+        image.style.width = `${width}px`;
+        positioning.currentWidth = width;
+      }
+    }
+  };
+  const handlePointerUp = () => {
+    const image = imageRef.current;
+    const positioning = positioningRef.current;
+    const controlWrapper = controlWrapperRef.current;
+    if (image !== null && controlWrapper !== null && positioning.isResizing) {
+      const width = positioning.currentWidth;
+      const height = positioning.currentHeight;
+      positioning.startWidth = 0;
+      positioning.startHeight = 0;
+      positioning.ratio = 0;
+      positioning.startX = 0;
+      positioning.startY = 0;
+      positioning.currentWidth = 0;
+      positioning.currentHeight = 0;
+      positioning.isResizing = false;
+      controlWrapper.classList.remove(styles.imageControlWrapperResizing);
+      setEndCursor();
+      onResizeEnd(width, height);
+      document.removeEventListener("pointermove", handlePointerMove);
+      document.removeEventListener("pointerup", handlePointerUp);
+    }
+  };
+  return /* @__PURE__ */ React.createElement("div", { ref: controlWrapperRef }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(styles.imageResizer, styles.imageResizerN),
+      onPointerDown: (event) => {
+        handlePointerDown(event, Direction.north);
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(styles.imageResizer, styles.imageResizerNe),
+      onPointerDown: (event) => {
+        handlePointerDown(event, Direction.north | Direction.east);
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(styles.imageResizer, styles.imageResizerE),
+      onPointerDown: (event) => {
+        handlePointerDown(event, Direction.east);
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(styles.imageResizer, styles.imageResizerSe),
+      onPointerDown: (event) => {
+        handlePointerDown(event, Direction.south | Direction.east);
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(styles.imageResizer, styles.imageResizerS),
+      onPointerDown: (event) => {
+        handlePointerDown(event, Direction.south);
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(styles.imageResizer, styles.imageResizerSw),
+      onPointerDown: (event) => {
+        handlePointerDown(event, Direction.south | Direction.west);
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(styles.imageResizer, styles.imageResizerW),
+      onPointerDown: (event) => {
+        handlePointerDown(event, Direction.west);
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(styles.imageResizer, styles.imageResizerNw),
+      onPointerDown: (event) => {
+        handlePointerDown(event, Direction.north | Direction.west);
+      }
+    }
+  ));
+}
+export {
+  ImageResizer as default
+};

package/dist/plugins/image/LexicalImageVisitor.js

@@ -2,12 +2,33 @@ import { $isImageNode } from "./ImageNode.js";
 const LexicalImageVisitor = {
   testLexicalNode: $isImageNode,
   visitLexicalNode({ mdastParent, lexicalNode, actions }) {
-    actions.appendToParent(mdastParent, {
-      type: "image",
-      url: lexicalNode.getSrc(),
-      alt: lexicalNode.getAltText(),
-      title: lexicalNode.getTitle()
-    });
+    if (lexicalNode.hasExplicitDimensions()) {
+      const img = new Image();
+      if (lexicalNode.getHeight() !== "inherit") {
+        img.height = lexicalNode.getHeight();
+      }
+      if (lexicalNode.getWidth() !== "inherit") {
+        img.width = lexicalNode.getWidth();
+      }
+      img.src = lexicalNode.getSrc();
+      if (lexicalNode.getAltText()) {
+        img.alt = lexicalNode.getAltText();
+      }
+      if (lexicalNode.getTitle()) {
+        img.title = lexicalNode.getTitle();
+      }
+      actions.appendToParent(mdastParent, {
+        type: "html",
+        value: img.outerHTML.replace(/>$/, "/>")
+      });
+    } else {
+      actions.appendToParent(mdastParent, {
+        type: "image",
+        url: lexicalNode.getSrc(),
+        alt: lexicalNode.getAltText(),
+        title: lexicalNode.getTitle()
+      });
+    }
   }
 };
 export {

package/dist/plugins/image/MdastImageVisitor.d.ts

@@ -1,3 +1,6 @@
 import * as Mdast from 'mdast';
 import { MdastImportVisitor } from '../../importMarkdownToLexical';
+import { MdxJsxTextElement, MdxJsxFlowElement } from 'mdast-util-mdx';
 export declare const MdastImageVisitor: MdastImportVisitor<Mdast.Image>;
+export declare const MdastHtmlImageVisitor: MdastImportVisitor<Mdast.HTML>;
+export declare const MdastJsxImageVisitor: MdastImportVisitor<MdxJsxTextElement | MdxJsxFlowElement>;

package/dist/plugins/image/MdastImageVisitor.js

@@ -1,4 +1,5 @@
 import { $createImageNode } from "./ImageNode.js";
+import { $createParagraphNode } from "lexical";
 const MdastImageVisitor = {
   testNode: "image",
   visitNode({ mdastNode, actions }) {
@@ -11,6 +12,76 @@ const MdastImageVisitor = {
     );
   }
 };
+const MdastHtmlImageVisitor = {
+  testNode: (node) => {
+    return node.type === "html" && node.value.trim().startsWith("<img");
+  },
+  visitNode({ mdastNode, lexicalParent }) {
+    const wrapper = document.createElement("div");
+    wrapper.innerHTML = mdastNode.value;
+    const img = wrapper.querySelector("img");
+    if (!img) {
+      throw new Error("Invalid HTML image");
+    }
+    const src = img.src;
+    const altText = img.alt;
+    const title = img.title;
+    const width = img.width;
+    const height = img.height;
+    const image = $createImageNode({
+      src: src || "",
+      altText,
+      title,
+      width,
+      height
+    });
+    if (lexicalParent.getType() === "root") {
+      const paragraph = $createParagraphNode();
+      paragraph.append(image);
+      lexicalParent.append(paragraph);
+    } else {
+      lexicalParent.append(image);
+    }
+  }
+};
+function getAttributeValue(node, attributeName) {
+  const attribute = node.attributes.find((a) => a.type === "mdxJsxAttribute" && a.name === attributeName);
+  if (!attribute) {
+    return void 0;
+  }
+  return attribute.value;
+}
+const MdastJsxImageVisitor = {
+  testNode: (node) => {
+    return (node.type === "mdxJsxTextElement" || node.type === "mdxJsxFlowElement") && node.name === "img";
+  },
+  visitNode({ mdastNode, lexicalParent }) {
+    const src = getAttributeValue(mdastNode, "src");
+    if (!src) {
+      return;
+    }
+    const altText = getAttributeValue(mdastNode, "alt") || "";
+    const title = getAttributeValue(mdastNode, "title");
+    const height = getAttributeValue(mdastNode, "height");
+    const width = getAttributeValue(mdastNode, "width");
+    const image = $createImageNode({
+      src,
+      altText,
+      title,
+      width: width ? parseInt(width, 10) : void 0,
+      height: height ? parseInt(height, 10) : void 0
+    });
+    if (lexicalParent.getType() === "root") {
+      const paragraph = $createParagraphNode();
+      paragraph.append(image);
+      lexicalParent.append(paragraph);
+    } else {
+      lexicalParent.append(image);
+    }
+  }
+};
 export {
-  MdastImageVisitor
+  MdastHtmlImageVisitor,
+  MdastImageVisitor,
+  MdastJsxImageVisitor
 };

package/dist/plugins/image/index.js

@@ -3,7 +3,7 @@ import { createCommand, $insertNodes, $isRootOrShadowRoot, $createParagraphNode,
 import { coreSystem } from "../core/index.js";
 import { $createImageNode, $isImageNode, ImageNode } from "./ImageNode.js";
 import { LexicalImageVisitor } from "./LexicalImageVisitor.js";
-import { MdastImageVisitor } from "./MdastImageVisitor.js";
+import { MdastImageVisitor, MdastHtmlImageVisitor, MdastJsxImageVisitor } from "./MdastImageVisitor.js";
 import { CAN_USE_DOM } from "../../utils/detectMac.js";
 import { system } from "../../gurx/realmFactory.js";
 import { realmPlugin } from "../../gurx/react.js";
@@ -106,6 +106,8 @@ const [
   },
   init: (realm) => {
     realm.pubKey("addImportVisitor", MdastImageVisitor);
+    realm.pubKey("addImportVisitor", MdastHtmlImageVisitor);
+    realm.pubKey("addImportVisitor", MdastJsxImageVisitor);
     realm.pubKey("addLexicalNode", ImageNode);
     realm.pubKey("addExportVisitor", LexicalImageVisitor);
   }

package/dist/plugins/jsx/MdastMdxJsxElementVisitor.js

@@ -1,7 +1,7 @@
 import { $createLexicalJsxNode } from "./LexicalJsxNode.js";
 const MdastMdxJsxElementVisitor = {
   testNode: (node) => {
-    return node.type === "mdxJsxTextElement" || node.type === "mdxJsxFlowElement";
+    return (node.type === "mdxJsxTextElement" || node.type === "mdxJsxFlowElement") && node.name !== "img";
   },
   visitNode({ lexicalParent, mdastNode }) {
     lexicalParent.append($createLexicalJsxNode(mdastNode));