@mdxeditor/editor 3.40.1 → 3.41.0

package/README.md

@@ -26,7 +26,7 @@ If you find a bug, check if something similar is not reported already in the [is
 
 If you're integrating the component in your commercial project and need dedicated assistance with your issues in exchange of sponsorship, [contact me over email](mailto:petyo@mdxeditor.dev).
 
-If you want to discuss ideas [join the Discord server](https://discord.gg/4q7U2Hc) or start a discussion in the [Discussions](https://github.com/mdx-editor/editor/discussions) section.
+If you want to discuss ideas start a discussion in the [Discussions](https://github.com/mdx-editor/editor/discussions) section.
 
 ## License
 

package/dist/index.d.ts

@@ -268,6 +268,12 @@ export declare const ALL_HEADING_LEVELS: readonly [1, 2, 3, 4, 5, 6];
  */
 export declare const allowedHeadingLevels$: NodeRef<readonly HEADING_LEVEL[]>;
 
+/**
+ * Allow to set width and height of image through dialog window
+ * @group Image
+ */
+export declare const allowSetImageDimensions$: NodeRef<boolean>;
+
 /**
  * returns a function which when called always returns the passed value
  * @group Utils
@@ -311,6 +317,8 @@ export declare const applyListType$: NodeRef<"" | ListType>;
 declare interface BaseImageParameters {
     altText?: string;
     title?: string;
+    width?: number;
+    height?: number;
 }
 
 /**
@@ -1086,6 +1094,8 @@ declare interface EditImageToolbarProps {
     initialImagePath: string | null;
     title: string;
     alt: string;
+    width?: number | 'inherit';
+    height?: number | 'inherit';
 }
 
 /**
@@ -1416,6 +1426,7 @@ export declare const imagePlugin: (params?: {
     imageAutocompleteSuggestions?: string[] | undefined;
     disableImageResize?: boolean | undefined;
     disableImageSettingsButton?: boolean | undefined;
+    allowSetImageDimensions?: boolean | undefined;
     imagePreviewHandler?: ImagePreviewHandler | undefined;
     ImageDialog?: FC<{}> | (() => JSX.Element) | undefined;
     EditImageToolbar?: FC<{}> | (() => JSX.Element) | undefined;
@@ -2441,6 +2452,8 @@ export declare const openLinkEditDialog$: NodeRef<void>;
  */
 export declare const openNewImageDialog$: NodeRef<void>;
 
+export declare const parseImageDimension: (value: string | number | undefined) => number | undefined;
+
 /* Excluded from this release type: placeholder$ */
 
 /**

package/dist/index.js

@@ -10,7 +10,7 @@ import { insertThematicBreak$, thematicBreakPlugin } from "./plugins/thematic-br
 import { applyListType$, currentListType$, listsPlugin } from "./plugins/lists/index.js";
 import { insertTable$, tablePlugin } from "./plugins/table/index.js";
 import { disableAutoLink$, linkPlugin } from "./plugins/link/index.js";
-import { INSERT_IMAGE_COMMAND, closeImageDialog$, disableImageResize$, disableImageSettingsButton$, editImageToolbarComponent$, imageAutocompleteSuggestions$, imageDialogState$, imagePlaceholder$, imagePlugin, imagePreviewHandler$, imageUploadHandler$, insertImage$, openEditImageDialog$, openNewImageDialog$, saveImage$ } from "./plugins/image/index.js";
+import { INSERT_IMAGE_COMMAND, allowSetImageDimensions$, closeImageDialog$, disableImageResize$, disableImageSettingsButton$, editImageToolbarComponent$, imageAutocompleteSuggestions$, imageDialogState$, imagePlaceholder$, imagePlugin, imagePreviewHandler$, imageUploadHandler$, insertImage$, openEditImageDialog$, openNewImageDialog$, parseImageDimension, saveImage$ } from "./plugins/image/index.js";
 import { frontmatterDialogOpen$, frontmatterPlugin, hasFrontmatter$, insertFrontmatter$, removeFrontmatter$ } from "./plugins/frontmatter/index.js";
 import { quotePlugin } from "./plugins/quote/index.js";
 import { maxLengthPlugin } from "./plugins/maxlength/index.js";
@@ -180,6 +180,7 @@ export {
   addToMarkdownExtension$,
   addTopAreaChild$,
   admonitionLabelsMap,
+  allowSetImageDimensions$,
   allowedHeadingLevels$,
   always,
   appendCodeBlockEditorDescriptor$,
@@ -304,6 +305,7 @@ export {
   openEditImageDialog$,
   openLinkEditDialog$,
   openNewImageDialog$,
+  parseImageDimension,
   placeholder$,
   prop,
   quotePlugin,

package/dist/plugins/image/EditImageToolbar.js

@@ -3,10 +3,11 @@ import { useCellValues, usePublisher } from "@mdxeditor/gurx";
 import classNames from "classnames";
 import { $getNodeByKey } from "lexical";
 import React__default from "react";
-import { disableImageSettingsButton$, openEditImageDialog$ } from "./index.js";
+import { disableImageSettingsButton$, openEditImageDialog$, parseImageDimension } from "./index.js";
 import styles from "../../styles/ui.module.css.js";
 import { iconComponentFor$, readOnly$, useTranslation } from "../core/index.js";
-function EditImageToolbar({ nodeKey, imageSource, initialImagePath, title, alt }) {
+function EditImageToolbar(props) {
+  const { nodeKey, imageSource, initialImagePath, title, alt, width, height } = props;
   const [disableImageSettingsButton, iconComponentFor, readOnly] = useCellValues(disableImageSettingsButton$, iconComponentFor$, readOnly$);
   const [editor] = useLexicalComposerContext();
   const openEditImageDialog = usePublisher(openEditImageDialog$);
@@ -40,7 +41,9 @@ function EditImageToolbar({ nodeKey, imageSource, initialImagePath, title, alt }
           initialValues: {
             src: !initialImagePath ? imageSource : initialImagePath,
             title,
-            altText: alt
+            altText: alt,
+            width: parseImageDimension(width),
+            height: parseImageDimension(height)
           }
         });
       }

package/dist/plugins/image/ImageDialog.js

@@ -4,15 +4,16 @@ import React__default from "react";
 import { useForm } from "react-hook-form";
 import styles from "../../styles/ui.module.css.js";
 import { editorRootElementRef$, useTranslation } from "../core/index.js";
-import { imageAutocompleteSuggestions$, imageDialogState$, imageUploadHandler$, saveImage$, closeImageDialog$ } from "./index.js";
+import { imageAutocompleteSuggestions$, imageDialogState$, imageUploadHandler$, allowSetImageDimensions$, saveImage$, closeImageDialog$ } from "./index.js";
 import { DownshiftAutoComplete } from "../core/ui/DownshiftAutoComplete.js";
 import { useCellValues, usePublisher } from "@mdxeditor/gurx";
 const ImageDialog = () => {
-  const [imageAutocompleteSuggestions, state, editorRootElementRef, imageUploadHandler] = useCellValues(
+  const [imageAutocompleteSuggestions, state, editorRootElementRef, imageUploadHandler, allowSetImageDimensions] = useCellValues(
     imageAutocompleteSuggestions$,
     imageDialogState$,
     editorRootElementRef$,
-    imageUploadHandler$
+    imageUploadHandler$,
+    allowSetImageDimensions$
   );
   const saveImage = usePublisher(saveImage$);
   const closeImageDialog = usePublisher(closeImageDialog$);
@@ -21,6 +22,9 @@ const ImageDialog = () => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     values: state.type === "editing" ? state.initialValues : {}
   });
+  const resetFormState = () => {
+    reset({ src: "", title: "", altText: "", width: void 0, height: void 0 });
+  };
   if (state.type === "inactive")
     return null;
   return /* @__PURE__ */ React__default.createElement(
@@ -30,7 +34,7 @@ const ImageDialog = () => {
       onOpenChange: (open) => {
         if (!open) {
           closeImageDialog();
-          reset({ src: "", title: "", altText: "" });
+          resetFormState();
         }
       }
     },
@@ -50,7 +54,7 @@ const ImageDialog = () => {
             e.preventDefault();
             e.stopPropagation();
             await handleSubmit(saveImage)(e);
-            reset({ src: "", title: "", altText: "" });
+            resetFormState();
           },
           className: styles.multiFieldForm
         },
@@ -69,6 +73,7 @@ const ImageDialog = () => {
         )),
         /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "alt" }, t("uploadImage.alt", "Alt:")), /* @__PURE__ */ React__default.createElement("input", { type: "text", ...register("altText"), className: styles.textInput })),
         /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "title" }, t("uploadImage.title", "Title:")), /* @__PURE__ */ React__default.createElement("input", { type: "text", ...register("title"), className: styles.textInput })),
+        allowSetImageDimensions && /* @__PURE__ */ React__default.createElement("div", { className: styles.imageDimensionsContainer }, /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "width" }, t("uploadImage.width", "Width:")), /* @__PURE__ */ React__default.createElement("input", { type: "number", min: 0, ...register("width"), className: styles.textInput })), /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "height" }, t("uploadImage.height", "Height:")), /* @__PURE__ */ React__default.createElement("input", { type: "number", min: 0, ...register("height"), className: styles.textInput }))),
         /* @__PURE__ */ React__default.createElement("div", { style: { display: "flex", justifyContent: "flex-end", gap: "var(--spacing-2)" } }, /* @__PURE__ */ React__default.createElement(
           "button",
           {

package/dist/plugins/image/ImageEditor.js

@@ -5,7 +5,7 @@ import { mergeRegister } from "@lexical/utils";
 import { useCellValues } from "@mdxeditor/gurx";
 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";
-import { imagePlaceholder$, disableImageResize$, imagePreviewHandler$, editImageToolbarComponent$ } from "./index.js";
+import { imagePlaceholder$, disableImageResize$, allowSetImageDimensions$, imagePreviewHandler$, editImageToolbarComponent$ } from "./index.js";
 import styles from "../../styles/ui.module.css.js";
 import { readOnly$ } from "../core/index.js";
 import { $isImageNode } from "./ImageNode.js";
@@ -66,9 +66,10 @@ function LazyImage({
   );
 }
 function ImageEditor({ src, title, alt, nodeKey, width, height, rest }) {
-  const [ImagePlaceholderComponent, disableImageResize, imagePreviewHandler, readOnly, EditImageToolbar] = useCellValues(
+  const [ImagePlaceholderComponent, disableImageResize, allowSetImageDimensions, imagePreviewHandler, readOnly, EditImageToolbar] = useCellValues(
     imagePlaceholder$,
     disableImageResize$,
+    allowSetImageDimensions$,
     imagePreviewHandler$,
     readOnly$,
     editImageToolbarComponent$
@@ -143,6 +144,13 @@ function ImageEditor({ src, title, alt, nodeKey, width, height, rest }) {
       setImageSource(src);
     }
   }, [src, imagePreviewHandler, initialImagePath]);
+  React__default.useEffect(() => {
+    if (allowSetImageDimensions && imageRef.current) {
+      const { current: image } = imageRef;
+      syncDimensionWithImageResizer(image, "width", width);
+      syncDimensionWithImageResizer(image, "height", height);
+    }
+  }, [allowSetImageDimensions, width, height]);
   React__default.useEffect(() => {
     let isMounted = true;
     const unregister = mergeRegister(
@@ -249,10 +257,19 @@ function ImageEditor({ src, title, alt, nodeKey, width, height, rest }) {
       imageSource,
       initialImagePath,
       title: title ?? "",
-      alt: alt ?? ""
+      alt: alt ?? "",
+      width,
+      height
     }
   ))) : null;
 }
+const syncDimensionWithImageResizer = (image, key, value) => {
+  if (typeof value === "number") {
+    image.style[key] = `${value}px`;
+  } else {
+    image.style.removeProperty(key);
+  }
+};
 export {
   ImageEditor
 };

package/dist/plugins/image/index.js

@@ -13,7 +13,13 @@ import { MdastImageVisitor, MdastHtmlImageVisitor, MdastJsxImageVisitor } from "
 const internalInsertImage$ = Signal((r) => {
   r.sub(r.pipe(internalInsertImage$, withLatestFrom(activeEditor$)), ([values, theEditor]) => {
     theEditor == null ? void 0 : theEditor.update(() => {
-      const imageNode = $createImageNode({ altText: values.altText ?? "", src: values.src, title: values.title ?? "" });
+      const imageNode = $createImageNode({
+        altText: values.altText ?? "",
+        src: values.src,
+        title: values.title ?? "",
+        width: parseImageDimension(values.width),
+        height: parseImageDimension(values.height)
+      });
       $insertNodes([imageNode]);
       if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
         $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
@@ -44,8 +50,8 @@ const imageDialogState$ = Cell(
   { type: "inactive" },
   (r) => {
     r.sub(
-      r.pipe(saveImage$, withLatestFrom(activeEditor$, imageUploadHandler$, imageDialogState$)),
-      ([values, theEditor, imageUploadHandler, dialogState]) => {
+      r.pipe(saveImage$, withLatestFrom(activeEditor$, imageUploadHandler$, imageDialogState$, allowSetImageDimensions$)),
+      ([values, theEditor, imageUploadHandler, dialogState, allowSetImageDimensions]) => {
         const handler = dialogState.type === "editing" ? (src) => {
           theEditor == null ? void 0 : theEditor.update(() => {
             const { nodeKey } = dialogState;
@@ -53,6 +59,11 @@ const imageDialogState$ = Cell(
             imageNode.setTitle(values.title);
             imageNode.setAltText(values.altText);
             imageNode.setSrc(src);
+            if (allowSetImageDimensions) {
+              const width = parseImageDimension(values.width);
+              const height = parseImageDimension(values.height);
+              imageNode.setWidthAndHeight(width ?? "inherit", height ?? "inherit");
+            }
           });
           r.pub(imageDialogState$, { type: "inactive" });
         } : (src) => {
@@ -158,8 +169,15 @@ const closeImageDialog$ = Action((r) => {
   r.link(r.pipe(closeImageDialog$, mapTo({ type: "inactive" })), imageDialogState$);
 });
 const disableImageSettingsButton$ = Cell(false);
+const allowSetImageDimensions$ = Cell(false);
 const saveImage$ = Signal();
 const editImageToolbarComponent$ = Cell(EditImageToolbar);
+const parseImageDimension = (value) => {
+  if (typeof value === "undefined")
+    return void 0;
+  const parsed = parseInt(String(value), 10);
+  return Number.isNaN(parsed) ? void 0 : parsed;
+};
 const imagePlugin = realmPlugin({
   init(realm, params) {
     realm.pubIn({
@@ -171,6 +189,7 @@ const imagePlugin = realmPlugin({
       [imageAutocompleteSuggestions$]: (params == null ? void 0 : params.imageAutocompleteSuggestions) ?? [],
       [disableImageResize$]: Boolean(params == null ? void 0 : params.disableImageResize),
       [disableImageSettingsButton$]: Boolean(params == null ? void 0 : params.disableImageSettingsButton),
+      [allowSetImageDimensions$]: Boolean(params == null ? void 0 : params.allowSetImageDimensions),
       [imagePreviewHandler$]: (params == null ? void 0 : params.imagePreviewHandler) ?? null,
       [editImageToolbarComponent$]: (params == null ? void 0 : params.EditImageToolbar) ?? EditImageToolbar,
       [imagePlaceholder$]: (params == null ? void 0 : params.imagePlaceholder) ?? ImagePlaceholder
@@ -182,6 +201,7 @@ const imagePlugin = realmPlugin({
       [imageAutocompleteSuggestions$]: (params == null ? void 0 : params.imageAutocompleteSuggestions) ?? [],
       [disableImageResize$]: Boolean(params == null ? void 0 : params.disableImageResize),
       [imagePreviewHandler$]: (params == null ? void 0 : params.imagePreviewHandler) ?? null,
+      [allowSetImageDimensions$]: Boolean(params == null ? void 0 : params.allowSetImageDimensions),
       [editImageToolbarComponent$]: (params == null ? void 0 : params.EditImageToolbar) ?? EditImageToolbar,
       [imagePlaceholder$]: (params == null ? void 0 : params.imagePlaceholder) ?? ImagePlaceholder
     });
@@ -331,6 +351,7 @@ export {
   $isImageNode,
   INSERT_IMAGE_COMMAND,
   ImageNode,
+  allowSetImageDimensions$,
   closeImageDialog$,
   disableImageResize$,
   disableImageSettingsButton$,
@@ -344,5 +365,6 @@ export {
   insertImage$,
   openEditImageDialog$,
   openNewImageDialog$,
+  parseImageDimension,
   saveImage$
 };