feat: allow setting image dimensions in dialog (#834)

atellmer · web-flow · commit ee9cf677af59 · 2025-08-16T18:00:46.000+03:00
diff --git a/locales/en/translation.json b/locales/en/translation.json
@@ -15,7 +15,9 @@
     "addViaUrlInstructions": "Or add an image from an URL:",
     "autoCompletePlaceholder": "Select or paste an image src",
     "alt": "Alt:",
-    "title": "Title:"
+    "title": "Title:",
+    "width": "Width:",
+    "height": "Height:"
   },
   "imageEditor": {
     "deleteImage": "Delete image",
diff --git a/locales/es-es/translation.json b/locales/es-es/translation.json
@@ -15,7 +15,9 @@
     "addViaUrlInstructions": "O añade una imagen desde una URL:",
     "autoCompletePlaceholder": "Selecciona o pega el src de la imagen",
     "alt": "Alt:",
-    "title": "Título:"
+    "title": "Título:",
+    "width": "Ancho:",
+    "height": "Alto:"
   },
   "imageEditor": {
     "deleteImage": "Borrar imagen",
diff --git a/locales/fr/translation.json b/locales/fr/translation.json
@@ -15,7 +15,9 @@
     "addViaUrlInstructions": "Ou ajouter une image depuis une URL :",
     "autoCompletePlaceholder": "Sélectionner ou coller la source de l’image",
     "alt": "Texte alternatif :",
-    "title": "Titre :"
+    "title": "Titre :",
+    "width": "Largeur :",
+    "height": "Hauteur :"
   },
   "imageEditor": {
     "deleteImage": "Supprimer l’image",
diff --git a/locales/ko-kr/translation.json b/locales/ko-kr/translation.json
@@ -15,7 +15,9 @@
     "addViaUrlInstructions": "URL로 이미지 가져오기:",
     "autoCompletePlaceholder": "이미지 소스를 선택하거나 붙여넣으세요.",
     "alt": "Alt:",
-    "title": "제목:"
+    "title": "제목:",
+    "width": "너비:",
+    "height": "높이:"
   },
   "imageEditor": {
     "deleteImage": "이미지 삭제",
diff --git a/locales/pt-br/translation.json b/locales/pt-br/translation.json
@@ -15,7 +15,9 @@
     "addViaUrlInstructions": "Ou adicionar uma imagem a partir de um URL:",
     "autoCompletePlaceholder": "Insira um link de imagem",
     "alt": "Texto alternativo:",
-    "title": "Título:"
+    "title": "Título:",
+    "width": "Largura:",
+    "height": "Altura:"
   },
   "imageEditor": {
     "deleteImage": "Deletar imagem",
diff --git a/locales/ru-ru/translation.json b/locales/ru-ru/translation.json
@@ -15,7 +15,9 @@
         "addViaUrlInstructions": "Или добавить изображение по URL:",
         "autoCompletePlaceholder": "Выбрать или вставить ссылку на изображение",
         "alt": "Альтернативный заголовок:",
-        "title": "Заголовок:"
+        "title": "Заголовок:",
+        "width": "Ширина:",
+        "height": "Высота:"
     },
     "imageEditor": {
         "deleteImage": "Удалить изображение",
diff --git a/locales/uk-ua/translation.json b/locales/uk-ua/translation.json
@@ -15,7 +15,9 @@
       "addViaUrlInstructions": "Або додайте зображення з URL посилання:",
       "autoCompletePlaceholder": "Виберіть або вставте джерело зображення",
       "alt": "Альтернативна назва:",
-      "title": "Назва:"
+      "title": "Назва:",
+      "width": "Ширина:",
+      "height": "Висота:"
     },
     "imageEditor": {
       "deleteImage": "Видалити зображення",
diff --git a/locales/zh-cn/translation.json b/locales/zh-cn/translation.json
@@ -15,7 +15,9 @@
     "addViaUrlInstructions": "或从网址新增图片：",
     "autoCompletePlaceholder": "选择或粘贴图片",
     "alt": "替代文本：",
-    "title": "标题："
+    "title": "标题：",
+    "width": "宽度：",
+    "height": "高度："
   },
   "imageEditor": {
     "deleteImage": "删除图片",
diff --git a/locales/zh-tw/translation.json b/locales/zh-tw/translation.json
@@ -15,7 +15,9 @@
     "addViaUrlInstructions": "或從網址新增圖片：",
     "autoCompletePlaceholder": "選擇或貼上圖片網址",
     "alt": "替代文字：",
-    "title": "標題："
+    "title": "標題：",
+    "width": "寬度：",
+    "height": "高度："
   },
   "imageEditor": {
     "deleteImage": "刪除圖片",
diff --git a/src/examples/images.tsx b/src/examples/images.tsx
@@ -242,3 +242,28 @@ export function ImageDialogButtonExample() {
     </>
   )
 }
+
+export const ImageDimensionsExample: Story = () => {
+  return (
+    <>
+      <MDXEditor
+        markdown=""
+        plugins={[
+          imagePlugin({
+            imageUploadHandler: async () => Promise.resolve('https://picsum.photos/200/300'),
+            allowSetImageDimensions: true
+          }),
+          diffSourcePlugin(),
+          toolbarPlugin({
+            toolbarContents: () => (
+              <DiffSourceToggleWrapper>
+                <InsertImage />
+              </DiffSourceToggleWrapper>
+            )
+          })
+        ]}
+        onChange={console.log}
+      />
+    </>
+  )
+}
diff --git a/src/plugins/image/EditImageToolbar.tsx b/src/plugins/image/EditImageToolbar.tsx
@@ -3,7 +3,7 @@ import { useCellValues, usePublisher } from '@mdxeditor/gurx'
 import classNames from 'classnames'
 import { $getNodeByKey } from 'lexical'
 import React from 'react'
-import { disableImageSettingsButton$, openEditImageDialog$ } from '.'
+import { disableImageSettingsButton$, openEditImageDialog$, parseImageDimension } from '.'
 import styles from '../../styles/ui.module.css'
 import { iconComponentFor$, readOnly$, useTranslation } from '../core'
 
@@ -13,9 +13,12 @@ export interface EditImageToolbarProps {
   initialImagePath: string | null
   title: string
   alt: string
+  width?: number | 'inherit'
+  height?: number | 'inherit'
 }
 
-export function EditImageToolbar({ nodeKey, imageSource, initialImagePath, title, alt }: EditImageToolbarProps): JSX.Element {
+export function EditImageToolbar(props: EditImageToolbarProps): JSX.Element {
+  const { nodeKey, imageSource, initialImagePath, title, alt, width, height } = props
   const [disableImageSettingsButton, iconComponentFor, readOnly] = useCellValues(disableImageSettingsButton$, iconComponentFor$, readOnly$)
   const [editor] = useLexicalComposerContext()
   const openEditImageDialog = usePublisher(openEditImageDialog$)
@@ -49,7 +52,9 @@ export function EditImageToolbar({ nodeKey, imageSource, initialImagePath, title
               initialValues: {
                 src: !initialImagePath ? imageSource : initialImagePath,
                 title,
-                altText: alt
+                altText: alt,
+                width: parseImageDimension(width),
+                height: parseImageDimension(height)
               }
             })
           }}
diff --git a/src/plugins/image/ImageDialog.tsx b/src/plugins/image/ImageDialog.tsx
@@ -4,23 +4,33 @@ import React from 'react'
 import { useForm } from 'react-hook-form'
 import styles from '../../styles/ui.module.css'
 import { editorRootElementRef$, useTranslation } from '../core/index'
-import { closeImageDialog$, imageAutocompleteSuggestions$, imageDialogState$, imageUploadHandler$, saveImage$ } from './index'
+import {
+  closeImageDialog$,
+  imageAutocompleteSuggestions$,
+  imageDialogState$,
+  imageUploadHandler$,
+  saveImage$,
+  allowSetImageDimensions$
+} from './index'
 import { DownshiftAutoComplete } from '../core/ui/DownshiftAutoComplete'
 import { useCellValues, usePublisher } from '@mdxeditor/gurx'
 
 interface ImageFormFields {
   src: string
   title: string
   altText: string
+  width?: number
+  height?: number
   file: FileList
 }
 
 export const ImageDialog: React.FC = () => {
-  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$)
@@ -31,6 +41,10 @@ export const ImageDialog: React.FC = () => {
     values: state.type === 'editing' ? (state.initialValues as any) : {}
   })
 
+  const resetFormState = () => {
+    reset({ src: '', title: '', altText: '', width: undefined, height: undefined })
+  }
+
   if (state.type === 'inactive') return null
 
   return (
@@ -39,7 +53,7 @@ export const ImageDialog: React.FC = () => {
       onOpenChange={(open) => {
         if (!open) {
           closeImageDialog()
-          reset({ src: '', title: '', altText: '' })
+          resetFormState()
         }
       }}
     >
@@ -57,7 +71,7 @@ export const ImageDialog: React.FC = () => {
               e.preventDefault()
               e.stopPropagation()
               await handleSubmit(saveImage)(e)
-              reset({ src: '', title: '', altText: '' })
+              resetFormState()
             }}
             className={styles.multiFieldForm}
           >
@@ -97,6 +111,20 @@ export const ImageDialog: React.FC = () => {
               <input type="text" {...register('title')} className={styles.textInput} />
             </div>
 
+            {allowSetImageDimensions && (
+              <div className={styles.imageDimensionsContainer}>
+                <div className={styles.formField}>
+                  <label htmlFor="width">{t('uploadImage.width', 'Width:')}</label>
+                  <input type="number" min={0} {...register('width')} className={styles.textInput} />
+                </div>
+
+                <div className={styles.formField}>
+                  <label htmlFor="height">{t('uploadImage.height', 'Height:')}</label>
+                  <input type="number" min={0} {...register('height')} className={styles.textInput} />
+                </div>
+              </div>
+            )}
+
             <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 'var(--spacing-2)' }}>
               <button
                 type="submit"
diff --git a/src/plugins/image/ImageEditor.tsx b/src/plugins/image/ImageEditor.tsx
@@ -22,7 +22,13 @@ import {
   SELECTION_CHANGE_COMMAND
 } from 'lexical'
 import { MdxJsxAttribute, MdxJsxExpressionAttribute } from 'mdast-util-mdx-jsx'
-import { disableImageResize$, editImageToolbarComponent$, imagePlaceholder$ as imagePlaceholderComponent$, imagePreviewHandler$ } from '.'
+import {
+  disableImageResize$,
+  editImageToolbarComponent$,
+  imagePlaceholder$ as imagePlaceholderComponent$,
+  imagePreviewHandler$,
+  allowSetImageDimensions$
+} from '.'
 import styles from '../../styles/ui.module.css'
 import { readOnly$ } from '../core'
 import { $isImageNode } from './ImageNode'
@@ -105,13 +111,15 @@ function LazyImage({
 }
 
 export function ImageEditor({ src, title, alt, nodeKey, width, height, rest }: ImageEditorProps): JSX.Element | null {
-  const [ImagePlaceholderComponent, disableImageResize, imagePreviewHandler, readOnly, EditImageToolbar] = useCellValues(
-    imagePlaceholderComponent$,
-    disableImageResize$,
-    imagePreviewHandler$,
-    readOnly$,
-    editImageToolbarComponent$
-  )
+  const [ImagePlaceholderComponent, disableImageResize, allowSetImageDimensions, imagePreviewHandler, readOnly, EditImageToolbar] =
+    useCellValues(
+      imagePlaceholderComponent$,
+      disableImageResize$,
+      allowSetImageDimensions$,
+      imagePreviewHandler$,
+      readOnly$,
+      editImageToolbarComponent$
+    )
 
   const imageRef = React.useRef<null | HTMLImageElement>(null)
   const buttonRef = React.useRef<HTMLButtonElement | null>(null)
@@ -187,6 +195,15 @@ export function ImageEditor({ src, title, alt, nodeKey, width, height, rest }: I
     }
   }, [src, imagePreviewHandler, initialImagePath])
 
+  React.useEffect(() => {
+    if (allowSetImageDimensions && imageRef.current) {
+      const { current: image } = imageRef
+
+      syncDimensionWithImageResizer(image, 'width', width)
+      syncDimensionWithImageResizer(image, 'height', height)
+    }
+  }, [allowSetImageDimensions, width, height])
+
   React.useEffect(() => {
     let isMounted = true
     const unregister = mergeRegister(
@@ -310,9 +327,19 @@ export function ImageEditor({ src, title, alt, nodeKey, width, height, rest }: I
             initialImagePath={initialImagePath}
             title={title ?? ''}
             alt={alt ?? ''}
+            width={width}
+            height={height}
           />
         )}
       </div>
     </React.Suspense>
   ) : null
 }
+
+const syncDimensionWithImageResizer = (image: HTMLImageElement, key: 'width' | 'height', value: number | 'inherit') => {
+  if (typeof value === 'number') {
+    image.style[key] = `${value}px`
+  } else {
+    image.style.removeProperty(key)
+  }
+}
diff --git a/src/plugins/image/index.ts b/src/plugins/image/index.ts
diff --git a/src/styles/ui.module.css b/src/styles/ui.module.css
