@mdxeditor/editor 3.17.1 → 3.17.3

package/dist/index.d.ts

@@ -21,6 +21,7 @@ import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin.js';
 import { ListType } from '@lexical/list';
 import * as Mdast from 'mdast';
 import { MdxJsxAttribute } from 'mdast-util-mdx-jsx';
+import { MdxJsxExpressionAttribute } from 'mdast-util-mdx-jsx';
 import { MdxJsxFlowElement } from 'mdast-util-mdx-jsx';
 import { MdxJsxTextElement } from 'mdast-util-mdx-jsx';
 import { Node as Node_2 } from 'unist';
@@ -691,6 +692,7 @@ export declare interface CreateImageNodeParameters {
     height?: number;
     title?: string;
     key?: NodeKey;
+    rest?: (MdxJsxAttribute | MdxJsxExpressionAttribute)[];
     src: string;
 }
 
@@ -1142,6 +1144,7 @@ export declare class FrontmatterNode extends DecoratorNode<JSX.Element> {
     getYaml(): string;
     setYaml(yaml: string): void;
     decorate(editor: LexicalEditor): JSX.Element;
+    isKeyboardSelectable(): boolean;
 }
 
 /**
@@ -1276,6 +1279,7 @@ export declare class ImageNode extends DecoratorNode<JSX.Element> {
     /* Excluded from this release type: __title */
     /* Excluded from this release type: __width */
     /* Excluded from this release type: __height */
+    /* Excluded from this release type: __rest */
     /* Excluded from this release type: getType */
     /* Excluded from this release type: clone */
     /* Excluded from this release type: importJSON */
@@ -1285,7 +1289,7 @@ export declare class ImageNode extends DecoratorNode<JSX.Element> {
      * Constructs a new {@link ImageNode} with the specified image parameters.
      * Use {@link $createImageNode} to construct one.
      */
-    constructor(src: string, altText: string, title: string | undefined, width?: 'inherit' | number, height?: 'inherit' | number, key?: NodeKey);
+    constructor(src: string, altText: string, title: string | undefined, width?: 'inherit' | number, height?: 'inherit' | number, rest?: (MdxJsxAttribute | MdxJsxExpressionAttribute)[], key?: NodeKey);
     /* Excluded from this release type: exportJSON */
     /**
      * Sets the image dimensions
@@ -1298,10 +1302,11 @@ export declare class ImageNode extends DecoratorNode<JSX.Element> {
     getTitle(): string | undefined;
     getHeight(): 'inherit' | number;
     getWidth(): 'inherit' | number;
+    getRest(): (MdxJsxAttribute | MdxJsxExpressionAttribute)[];
     setTitle(title: string | undefined): void;
     setSrc(src: string): void;
     setAltText(altText: string | undefined): void;
-    /* Excluded from this release type: hasExplicitDimensions */
+    /* Excluded from this release type: shouldBeSerializedAsElement */
     /* Excluded from this release type: decorate */
 }
 
@@ -2558,6 +2563,7 @@ export declare type SerializedImageNode = Spread<{
     width?: number;
     height?: number;
     src: string;
+    rest: (MdxJsxAttribute | MdxJsxExpressionAttribute)[];
     type: 'image';
     version: 1;
 }, SerializedLexicalNode>;

package/dist/plugins/core/index.js

@@ -4,7 +4,7 @@ import { $isHeadingNode } from "@lexical/rich-text";
 import { $setBlocksType } from "@lexical/selection";
 import { $findMatchingParent, $wrapNodeInElement, $insertNodeToNearestRoot } from "@lexical/utils";
 import { Cell, withLatestFrom, Signal, filter, map, useCellValue, scan } from "@mdxeditor/gurx";
-import { createCommand, FORMAT_TEXT_COMMAND, $isRootOrShadowRoot, $getRoot, $setSelection, $getSelection, $insertNodes, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_CRITICAL, DecoratorNode, $createParagraphNode, FOCUS_COMMAND, KEY_DOWN_COMMAND, $isDecoratorNode, BLUR_COMMAND, $isRangeSelection, ParagraphNode, TextNode, createEditor } from "lexical";
+import { createCommand, FORMAT_TEXT_COMMAND, $isRootOrShadowRoot, $getRoot, $setSelection, $getSelection, $insertNodes, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_CRITICAL, DecoratorNode, $createParagraphNode, FOCUS_COMMAND, BLUR_COMMAND, $isRangeSelection, ParagraphNode, TextNode, createEditor } from "lexical";
 import { gfmStrikethrough } from "micromark-extension-gfm-strikethrough";
 import { gfmStrikethroughFromMarkdown, gfmStrikethroughToMarkdown } from "mdast-util-gfm-strikethrough";
 import { mdxJsxToMarkdown, mdxJsxFromMarkdown } from "mdast-util-mdx-jsx";
@@ -12,7 +12,6 @@ import { mdxJsx } from "micromark-extension-mdx-jsx";
 import { mdxMd } from "micromark-extension-mdx-md";
 import { exportMarkdownFromLexical } from "../../exportMarkdownFromLexical.js";
 import { importMarkdownToLexical, MarkdownParseError, UnrecognizedMarkdownConstructError } from "../../importMarkdownToLexical.js";
-import { controlOrMeta } from "../../utils/detectMac.js";
 import { noop } from "../../utils/fp.js";
 import { GenericHTMLNode } from "./GenericHTMLNode.js";
 import { $createGenericHTMLNode, $isGenericHTMLNode, TYPE_NAME } from "./GenericHTMLNode.js";
@@ -284,37 +283,41 @@ const createRootEditorSubscription$ = Appender(rootEditorSubscriptions$, (r, sig
         },
         COMMAND_PRIORITY_CRITICAL
       );
-    },
-    // Fixes select all when frontmatter is present
-    (rootEditor) => {
-      return rootEditor.registerCommand(
-        KEY_DOWN_COMMAND,
-        (event) => {
-          const { keyCode, ctrlKey, metaKey } = event;
-          if (keyCode === 65 && controlOrMeta(metaKey, ctrlKey)) {
-            let shouldOverride = false;
-            rootEditor.getEditorState().read(() => {
-              shouldOverride = $isDecoratorNode($getRoot().getFirstChild()) || $isDecoratorNode($getRoot().getLastChild());
-            });
-            if (shouldOverride) {
-              event.preventDefault();
-              event.stopImmediatePropagation();
-              rootEditor.update(() => {
-                var _a;
-                const rootElement = rootEditor.getRootElement();
-                (_a = window.getSelection()) == null ? void 0 : _a.selectAllChildren(rootElement);
-                rootElement.focus({
-                  preventScroll: true
-                });
-              });
-              return true;
-            }
-          }
-          return false;
-        },
-        COMMAND_PRIORITY_CRITICAL
-      );
     }
+    /*
+        // Fixes select all when frontmatter is present
+        (rootEditor) => {
+          return rootEditor.registerCommand<KeyboardEvent>(
+            KEY_DOWN_COMMAND,
+            (event) => {
+              const { keyCode, ctrlKey, metaKey } = event
+              if (keyCode === 65 && controlOrMeta(metaKey, ctrlKey)) {
+                let shouldOverride = false
+    
+                rootEditor.getEditorState().read(() => {
+                  shouldOverride = $isDecoratorNode($getRoot().getFirstChild()) || $isDecoratorNode($getRoot().getLastChild())
+                })
+    
+                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                if (shouldOverride) {
+                  event.preventDefault()
+                  event.stopImmediatePropagation()
+                  rootEditor.update(() => {
+                    const rootElement = rootEditor.getRootElement() as HTMLDivElement
+                    window.getSelection()?.selectAllChildren(rootElement)
+                    rootElement.focus({
+                      preventScroll: true
+                    })
+                  })
+                  return true
+                }
+              }
+    
+              return false
+            },
+            COMMAND_PRIORITY_CRITICAL
+          )
+        }*/
   ]);
 });
 const createActiveEditorSubscription$ = Appender(activeEditorSubscriptions$, (r, sig$) => {

package/dist/plugins/frontmatter/FrontmatterNode.js

@@ -59,6 +59,9 @@ class FrontmatterNode extends DecoratorNode {
       }
     );
   }
+  isKeyboardSelectable() {
+    return false;
+  }
 }
 function $createFrontmatterNode(yaml) {
   return new FrontmatterNode(yaml);

package/dist/plugins/frontmatter/index.js

@@ -1,7 +1,7 @@
 import { realmPlugin } from "../../RealmWithPlugins.js";
 import { rootEditor$, createRootEditorSubscription$, addMdastExtension$, addSyntaxExtension$, addLexicalNode$, addImportVisitor$, addExportVisitor$, addToMarkdownExtension$ } from "../core/index.js";
 import { Cell, Action, withLatestFrom } from "@mdxeditor/gurx";
-import { $getRoot } from "lexical";
+import { $getRoot, KEY_DOWN_COMMAND, $getSelection, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_CRITICAL } from "lexical";
 import { frontmatterFromMarkdown, frontmatterToMarkdown } from "mdast-util-frontmatter";
 import { frontmatter } from "micromark-extension-frontmatter";
 import { $isFrontmatterNode, $createFrontmatterNode, FrontmatterNode } from "./FrontmatterNode.js";
@@ -52,7 +52,49 @@ const frontmatterPlugin = realmPlugin({
       [addLexicalNode$]: FrontmatterNode,
       [addImportVisitor$]: MdastFrontmatterVisitor,
       [addExportVisitor$]: LexicalFrontmatterVisitor,
-      [addToMarkdownExtension$]: frontmatterToMarkdown("yaml")
+      [addToMarkdownExtension$]: frontmatterToMarkdown("yaml"),
+      [createRootEditorSubscription$]: (editor) => {
+        return editor.registerCommand(
+          KEY_DOWN_COMMAND,
+          (event) => {
+            let shouldPrevent = false;
+            editor.read(() => {
+              const selection = $getSelection();
+              if ($isRangeSelection(selection)) {
+                if (selection.isCollapsed() && selection.anchor.offset === 0 && selection.focus.offset === 0 && event.key === "Backspace") {
+                  let node = selection.getNodes()[0];
+                  if ($isTextNode(node)) {
+                    node = node.getParent();
+                  }
+                  const prevSibling = node == null ? void 0 : node.getPreviousSibling();
+                  if ($isFrontmatterNode(prevSibling)) {
+                    shouldPrevent = true;
+                    event.preventDefault();
+                  }
+                } else {
+                  const firstNode = selection.getNodes()[0];
+                  if ($isFrontmatterNode(firstNode)) {
+                    const yaml = firstNode.getYaml();
+                    setTimeout(() => {
+                      editor.update(
+                        () => {
+                          $getRoot().splice(0, 0, [$createFrontmatterNode(yaml)]);
+                        },
+                        { discrete: true }
+                      );
+                    });
+                  }
+                }
+              }
+            });
+            if (shouldPrevent) {
+              return true;
+            }
+            return false;
+          },
+          COMMAND_PRIORITY_CRITICAL
+        );
+      }
     });
   }
 });

package/dist/plugins/image/ImageEditor.js

@@ -47,7 +47,7 @@ function LazyImage({
     }
   );
 }
-function ImageEditor({ src, title, alt, nodeKey, width, height }) {
+function ImageEditor({ src, title, alt, nodeKey, width, height, rest }) {
   const [disableImageResize, disableImageSettingsButton, imagePreviewHandler, iconComponentFor, readOnly] = useCellValues(
     disableImageResize$,
     disableImageSettingsButton$,
@@ -200,14 +200,27 @@ function ImageEditor({ src, title, alt, nodeKey, width, height }) {
   };
   const draggable = $isNodeSelection(selection);
   const isFocused = isSelected;
+  const passedClassName = React__default.useMemo(() => {
+    if (rest.length === 0) {
+      return null;
+    }
+    const className = rest.find((attr) => attr.type === "mdxJsxAttribute" && (attr.name === "class" || attr.name === "className"));
+    if (className) {
+      return className.value;
+    }
+    return null;
+  }, [rest]);
   return imageSource !== null ? /* @__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
-      }),
+      className: classNames(
+        {
+          [styles.focusedImage]: isFocused
+        },
+        passedClassName
+      ),
       src: imageSource,
       title: title ?? "",
       alt: alt ?? "",

package/dist/plugins/image/ImageNode.js

@@ -20,7 +20,7 @@ class ImageNode extends DecoratorNode {
    * Constructs a new {@link ImageNode} with the specified image parameters.
    * Use {@link $createImageNode} to construct one.
    */
-  constructor(src, altText, title, width, height, key) {
+  constructor(src, altText, title, width, height, rest, key) {
     super(key);
     /** @internal */
     __publicField(this, "__src");
@@ -32,11 +32,14 @@ class ImageNode extends DecoratorNode {
     __publicField(this, "__width");
     /** @internal */
     __publicField(this, "__height");
+    /** @internal */
+    __publicField(this, "__rest");
     this.__src = src;
     this.__title = title;
     this.__altText = altText;
     this.__width = width ? width : "inherit";
     this.__height = height ? height : "inherit";
+    this.__rest = rest ?? [];
   }
   /** @internal */
   static getType() {
@@ -44,17 +47,18 @@ class ImageNode extends DecoratorNode {
   }
   /** @internal */
   static clone(node) {
-    return new ImageNode(node.__src, node.__altText, node.__title, node.__width, node.__height, node.__key);
+    return new ImageNode(node.__src, node.__altText, node.__title, node.__width, node.__height, node.__rest, node.__key);
   }
   /** @internal */
   static importJSON(serializedNode) {
-    const { altText, title, src, width, height } = serializedNode;
+    const { altText, title, src, width, rest, height } = serializedNode;
     const node = $createImageNode({
       altText,
       title,
       src,
       height,
-      width
+      width,
+      rest
     });
     return node;
   }
@@ -91,6 +95,7 @@ class ImageNode extends DecoratorNode {
       height: this.__height === "inherit" ? 0 : this.__height,
       width: this.__width === "inherit" ? 0 : this.__width,
       src: this.getSrc(),
+      rest: this.__rest,
       type: "image",
       version: 1
     };
@@ -132,6 +137,9 @@ class ImageNode extends DecoratorNode {
   getWidth() {
     return this.__width;
   }
+  getRest() {
+    return this.__rest;
+  }
   setTitle(title) {
     this.getWritable().__title = title;
   }
@@ -142,8 +150,8 @@ class ImageNode extends DecoratorNode {
     this.getWritable().__altText = altText ?? "";
   }
   /** @internal */
-  hasExplicitDimensions() {
-    return this.__width !== "inherit" || this.__height !== "inherit";
+  shouldBeSerializedAsElement() {
+    return this.__width !== "inherit" || this.__height !== "inherit" || this.__rest.length > 0;
   }
   /** @internal */
   decorate(_parentEditor) {
@@ -155,14 +163,15 @@ class ImageNode extends DecoratorNode {
         nodeKey: this.getKey(),
         width: this.__width,
         height: this.__height,
-        alt: this.__altText
+        alt: this.__altText,
+        rest: this.__rest
       }
     );
   }
 }
 function $createImageNode(params) {
-  const { altText, title, src, key, width, height } = params;
-  return new ImageNode(src, altText, title, width, height, key);
+  const { altText, title, src, key, width, height, rest } = params;
+  return new ImageNode(src, altText, title, width, height, rest, key);
 }
 function $isImageNode(node) {
   return node instanceof ImageNode;

package/dist/plugins/image/LexicalImageVisitor.js

@@ -2,7 +2,7 @@ import { $isImageNode } from "./ImageNode.js";
 const LexicalImageVisitor = {
   testLexicalNode: $isImageNode,
   visitLexicalNode({ mdastParent, lexicalNode, actions }) {
-    if (lexicalNode.hasExplicitDimensions()) {
+    if (lexicalNode.shouldBeSerializedAsElement()) {
       const img = new Image();
       if (lexicalNode.getHeight() !== "inherit") {
         img.height = lexicalNode.getHeight();
@@ -16,6 +16,13 @@ const LexicalImageVisitor = {
       if (lexicalNode.getTitle()) {
         img.title = lexicalNode.getTitle();
       }
+      for (const attr of lexicalNode.getRest()) {
+        if (attr.type === "mdxJsxAttribute") {
+          if (typeof attr.value === "string") {
+            img.setAttribute(attr.name, attr.value);
+          }
+        }
+      }
       actions.appendToParent(mdastParent, {
         type: "html",
         value: img.outerHTML.replace(/>$/, ` src="${lexicalNode.getSrc()}" />`)

package/dist/plugins/image/MdastImageVisitor.js

@@ -64,12 +64,16 @@ const MdastJsxImageVisitor = {
     const title = getAttributeValue(mdastNode, "title");
     const height = getAttributeValue(mdastNode, "height");
     const width = getAttributeValue(mdastNode, "width");
+    const rest = mdastNode.attributes.filter((a) => {
+      return a.type === "mdxJsxAttribute" && !["src", "alt", "title", "height", "width"].includes(a.name);
+    });
     const image = $createImageNode({
       src,
       altText,
       title,
       width: width ? parseInt(width, 10) : void 0,
-      height: height ? parseInt(height, 10) : void 0
+      height: height ? parseInt(height, 10) : void 0,
+      rest
     });
     if (lexicalParent.getType() === "root") {
       const paragraph = $createParagraphNode();

package/package.json

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