@notum-cz/strapi-plugin-tiptap-editor 1.1.1 → 1.2.1

package/README.md

@@ -90,6 +90,7 @@
     - [Text Alignment](#text-alignment)
     - [Text Color \& Highlight Color](#text-color--highlight-color)
     - [Images](#images)
+      - [Rendering images on the frontend](#rendering-images-on-the-frontend)
   - [Theme](#theme)
     - [Colors](#colors)
     - [Custom Stylesheet](#custom-stylesheet)
@@ -415,18 +416,22 @@ Both features use a color picker popover that displays the colors defined in the
 
 ### Images
 
-| Key            | Description                      | Toolbar                                     |
-| -------------- | -------------------------------- | ------------------------------------------- |
-| `mediaLibrary` | Images from Strapi Media Library | Image button + alt text popover + alignment |
+| Key            | Description                      | Toolbar                                                   |
+| -------------- | -------------------------------- | --------------------------------------------------------- |
+| `mediaLibrary` | Images from Strapi Media Library | Image button + alt text popover + alignment + resize handle |
 
 Enables image insertion from the Strapi Media Library. When enabled, the toolbar shows an image button that opens the Media Library picker. After selecting an image:
 
 - The image appears in the editor at its natural size (constrained to editor width)
 - Alt text is prefilled from the asset's `alternativeText` metadata
-- Clicking a selected image opens a popover to edit alt text or delete the image
-- Three alignment buttons (left, center, right) allow repositioning the image
+- Clicking a selected image opens a popover with:
+  - Three **alignment** buttons (left, center, right)
+  - **Width** and **Height** inputs (in pixels) for precise sizing
+  - A **reset** button to restore the original dimensions
+  - **Alt text** input and a **delete** button
+- A **resize handle** (blue dot) appears at the bottom-right corner on hover — drag it to resize the image
 
-The image stores both the URL (`src`) and the Strapi asset ID (`data-asset-id`) in the Tiptap JSON output.
+The image stores the URL (`src`), Strapi asset ID (`data-asset-id`), alignment (`data-align`), and dimensions (`width`, `height`) in the Tiptap JSON output.
 
 **Content safety:** If you remove `mediaLibrary` from a preset, existing images in content are preserved and rendered read-only — they are never silently deleted.
 
@@ -436,6 +441,73 @@ The image stores both the URL (`src`) and the Strapi asset ID (`data-asset-id`)
 }
 ```
 
+**Resize** is configured through the `resize` key inside `mediaLibrary`. The options match the standard `@tiptap/extension-image` `resize` configuration. When `resize` is omitted or set to `false`, the resize handle and dimension controls are hidden.
+
+```ts
+{
+  mediaLibrary: {
+    resize: {
+      enabled: true,
+      alwaysPreserveAspectRatio: true,
+      minWidth: 50,
+      minHeight: 50,
+    },
+  },
+}
+```
+
+| Option                              | Default | Description                                           |
+| ----------------------------------- | ------- | ----------------------------------------------------- |
+| `resize`                            | _none_  | Set to `false` or omit to disable resize entirely     |
+| `resize.enabled`                    | `true`  | Enable or disable resize when the object is present   |
+| `resize.alwaysPreserveAspectRatio`  | `true`  | Lock aspect ratio when resizing or editing dimensions |
+| `resize.minWidth`                   | `50`    | Minimum allowed width in pixels                       |
+| `resize.minHeight`                  | `50`    | Minimum allowed height in pixels                      |
+
+#### Rendering images on the frontend
+
+The plugin stores content as **Tiptap/ProseMirror JSON**. The `width`, `height`, `src`, `alt`, and `title` attributes are standard and will render automatically with `@tiptap/extension-image`. However, the custom `data-align` and `data-asset-id` attributes require extending the Image extension on your frontend:
+
+```ts
+import { generateHTML } from '@tiptap/html';
+import StarterKit from '@tiptap/starter-kit';
+import Image from '@tiptap/extension-image';
+
+// Extend with the custom attributes used by this plugin
+const StrapiImage = Image.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      'data-align': { default: null },
+      'data-asset-id': { default: null },
+    };
+  },
+});
+
+// Convert the JSON from the Strapi API to HTML
+const html = generateHTML(apiResponse.content, [
+  StarterKit,
+  StrapiImage,
+  // ...other extensions you use
+]);
+```
+
+Then add CSS for alignment on your frontend:
+
+```css
+img[data-align="center"] {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+img[data-align="right"] {
+  display: block;
+  margin-left: auto;
+  margin-right: 0;
+}
+```
+
 ## Theme
 
 The `theme` key in the plugin config lets you define colors for the color pickers and inject custom CSS into the editor.
@@ -577,8 +649,10 @@ export default () => ({
           textColor: true,
           highlightColor: true,
 
-          // Images from Strapi Media Library
-          mediaLibrary: true,
+          // Images from Strapi Media Library with resize enabled
+          mediaLibrary: {
+            resize: { enabled: true },
+          },
         },
       },
     },

package/dist/_chunks/{RichTextInput-EtL-yFqV.js → RichTextInput-1uZSm3Nc.js}

@@ -8,7 +8,7 @@ const ReactDOM = require("react-dom");
 const styled = require("styled-components");
 const admin = require("@strapi/strapi/admin");
 const icons = require("@strapi/icons");
-const index = require("./index-yXpX_VsO.js");
+const index = require("./index-CTcKIvYv.js");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const React__default = /* @__PURE__ */ _interopDefault(React);
 const ReactDOM__default = /* @__PURE__ */ _interopDefault(ReactDOM);
@@ -19909,19 +19909,53 @@ const TiptapInputStyles = styled__default.default.div`
     margin: 0.75em 0;
   }
 
-  /* Image alignment — margin-based, no float */
-  [data-align="center"] img {
-    margin-left: auto;
-    margin-right: auto;
+  /* Image alignment — text-align on the node wrapper centres the inline-block image container */
+  [data-align="center"] {
+    text-align: center;
   }
 
-  [data-align="right"] img {
-    margin-left: auto;
-    margin-right: 0;
+  [data-align="right"] {
+    text-align: right;
   }
 
   /* data-align="left" and null: natural left flow, no rule needed */
 
+  /* Inline-block wrapper for positioning the resize handle relative to the image */
+  .image-wrapper {
+    position: relative;
+    display: inline-block;
+    max-width: 100%;
+    line-height: 0; /* prevent extra space below img */
+  }
+
+  .image-wrapper img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+  }
+
+  /* Resize handle — bottom-right corner */
+  .image-resize-handle {
+    position: absolute;
+    right: -4px;
+    bottom: -4px;
+    width: 12px;
+    height: 12px;
+    background: #4945ff;
+    border: 2px solid #fff;
+    border-radius: 50%;
+    cursor: nwse-resize;
+    opacity: 0;
+    transition: opacity 0.15s;
+    z-index: 1;
+  }
+
+  .image-wrapper:hover .image-resize-handle,
+  .image-wrapper[data-selected] .image-resize-handle,
+  .ProseMirror-selectednode .image-resize-handle {
+    opacity: 1;
+  }
+
   // Source: https://tiptap.dev/docs/editor/extensions/nodes/table
 
   .ProseMirror {
@@ -20893,19 +20927,43 @@ function TextAlignRight(props) {
     }
   );
 }
-function ImageNodeView({ node, updateAttributes: updateAttributes2, deleteNode: deleteNode2 }) {
+function ImageNodeView({ node, updateAttributes: updateAttributes2, deleteNode: deleteNode2, selected, extension }) {
   const { formatMessage } = reactIntl.useIntl();
   const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
   const [altText, setAltText] = React.useState(node.attrs.alt ?? "");
+  const imgRef = React.useRef(null);
+  const isResizingRef = React.useRef(false);
+  const resizeCleanupRef = React.useRef(null);
+  const rawResize = extension.options.resize;
+  const resizeEnabled = typeof rawResize === "object" && !!rawResize ? rawResize.enabled : !!rawResize;
+  const resizeOpts = resizeEnabled && typeof rawResize === "object" ? rawResize : void 0;
+  const preserveAspectRatio = resizeOpts?.alwaysPreserveAspectRatio ?? true;
+  const minWidth = resizeOpts?.minWidth ?? 50;
+  const minHeight = resizeOpts?.minHeight ?? 50;
+  const currentWidth = node.attrs.width;
+  const currentHeight = node.attrs.height;
+  const [widthInput, setWidthInput] = React.useState(currentWidth ? String(currentWidth) : "");
+  const [heightInput, setHeightInput] = React.useState(currentHeight ? String(currentHeight) : "");
   React.useEffect(() => {
     setAltText(node.attrs.alt ?? "");
   }, [node.attrs.alt]);
+  React.useEffect(() => {
+    setWidthInput(node.attrs.width ? String(node.attrs.width) : "");
+  }, [node.attrs.width]);
+  React.useEffect(() => {
+    setHeightInput(node.attrs.height ? String(node.attrs.height) : "");
+  }, [node.attrs.height]);
   React.useEffect(() => {
     if (!isPopoverOpen) return;
     const handleScroll = () => setIsPopoverOpen(false);
     document.addEventListener("scroll", handleScroll, true);
     return () => document.removeEventListener("scroll", handleScroll, true);
   }, [isPopoverOpen]);
+  React.useEffect(() => {
+    return () => {
+      resizeCleanupRef.current?.();
+    };
+  }, []);
   const currentAlign = node.attrs["data-align"];
   function handleAlign(value) {
     const current = node.attrs["data-align"];
@@ -20920,15 +20978,117 @@ function ImageNodeView({ node, updateAttributes: updateAttributes2, deleteNode:
       e.currentTarget.blur();
     }
   }
+  function getAspectRatio() {
+    const img = imgRef.current;
+    if (!img || !img.naturalWidth || !img.naturalHeight) return null;
+    return img.naturalWidth / img.naturalHeight;
+  }
+  function handleWidthCommit() {
+    if (widthInput === "") {
+      updateAttributes2({ width: null, height: null });
+      return;
+    }
+    const num = parseInt(widthInput, 10);
+    if (!isNaN(num) && num >= minWidth) {
+      const ratio = getAspectRatio();
+      if (preserveAspectRatio && ratio) {
+        const newHeight = Math.round(num / ratio);
+        updateAttributes2({ width: num, height: newHeight });
+      } else {
+        updateAttributes2({ width: num });
+      }
+    } else {
+      setWidthInput(node.attrs.width ? String(node.attrs.width) : "");
+    }
+  }
+  function handleHeightCommit() {
+    if (heightInput === "") {
+      updateAttributes2({ height: null, width: null });
+      return;
+    }
+    const num = parseInt(heightInput, 10);
+    if (!isNaN(num) && num >= minHeight) {
+      const ratio = getAspectRatio();
+      if (preserveAspectRatio && ratio) {
+        const newWidth = Math.round(num * ratio);
+        updateAttributes2({ width: newWidth, height: num });
+      } else {
+        updateAttributes2({ height: num });
+      }
+    } else {
+      setHeightInput(node.attrs.height ? String(node.attrs.height) : "");
+    }
+  }
+  const handleResizeStart = React.useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      isResizingRef.current = true;
+      const startX = e.clientX;
+      const img = imgRef.current;
+      if (!img) return;
+      const startWidth = img.offsetWidth;
+      const ratio = img.naturalWidth && img.naturalHeight ? img.naturalWidth / img.naturalHeight : null;
+      function onMouseMove(moveEvent) {
+        const diff = moveEvent.clientX - startX;
+        const newWidth = Math.max(minWidth, startWidth + diff);
+        if (img) {
+          img.style.width = `${newWidth}px`;
+          if (preserveAspectRatio && ratio) {
+            img.style.height = `${Math.round(newWidth / ratio)}px`;
+          }
+        }
+      }
+      function cleanup() {
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+        resizeCleanupRef.current = null;
+      }
+      function onMouseUp() {
+        cleanup();
+        if (img) {
+          updateAttributes2({
+            width: Math.round(img.offsetWidth),
+            height: Math.round(img.offsetHeight)
+          });
+        }
+        requestAnimationFrame(() => {
+          isResizingRef.current = false;
+        });
+      }
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+      resizeCleanupRef.current = cleanup;
+    },
+    [updateAttributes2, preserveAspectRatio, minWidth]
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(NodeViewWrapper, { "data-drag-handle": true, "data-align": node.attrs["data-align"] ?? void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Popover.Root, { open: isPopoverOpen, onOpenChange: setIsPopoverOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover.Anchor, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      "img",
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover.Anchor, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
       {
-        src: node.attrs.src,
-        alt: node.attrs.alt ?? "",
-        style: { maxWidth: "100%", display: "block" },
-        draggable: false,
-        onClick: () => setIsPopoverOpen(true)
+        className: "image-wrapper",
+        "data-selected": selected || isPopoverOpen || void 0,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              ref: imgRef,
+              src: node.attrs.src,
+              alt: node.attrs.alt ?? "",
+              style: {
+                display: "block",
+                maxWidth: "100%",
+                width: currentWidth ? `${currentWidth}px` : void 0,
+                height: currentHeight ? `${currentHeight}px` : "auto"
+              },
+              draggable: false,
+              onClick: () => {
+                if (!isResizingRef.current) setIsPopoverOpen(true);
+              }
+            }
+          ),
+          resizeEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "image-resize-handle", onMouseDown: handleResizeStart })
+        ]
       }
     ) }),
     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Popover.Content, { side: "bottom", children: [
@@ -20967,6 +21127,43 @@ function ImageNodeView({ node, updateAttributes: updateAttributes2, deleteNode:
           }
         )
       ] }),
+      resizeEnabled && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px", padding: "8px", paddingBottom: "0" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.TextInput,
+          {
+            type: "number",
+            placeholder: "W",
+            value: widthInput,
+            onChange: (e) => setWidthInput(e.target.value),
+            onBlur: handleWidthCommit,
+            onKeyDown: handleKeyDown2,
+            "aria-label": formatMessage({ id: "tiptap-editor.image.width", defaultMessage: "Width (px)" }),
+            style: { minWidth: "62px", flexGrow: 1 }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "1.1rem", color: "#999" }, children: "×" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.TextInput,
+          {
+            type: "number",
+            placeholder: "H",
+            value: heightInput,
+            onChange: (e) => setHeightInput(e.target.value),
+            onBlur: handleHeightCommit,
+            onKeyDown: handleKeyDown2,
+            "aria-label": formatMessage({ id: "tiptap-editor.image.height", defaultMessage: "Height (px)" }),
+            style: { minWidth: "62px", flexGrow: 1 }
+          }
+        ),
+        (currentWidth || currentHeight) && /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.IconButton,
+          {
+            onClick: () => updateAttributes2({ width: null, height: null }),
+            label: formatMessage({ id: "tiptap-editor.image.resetSize", defaultMessage: "Reset size" }),
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {})
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", padding: "8px" }, children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           designSystem.TextInput,
@@ -20992,12 +21189,21 @@ function ImageNodeView({ node, updateAttributes: updateAttributes2, deleteNode:
   ] }) });
 }
 function ImageNodeViewReadOnly({ node }) {
+  const rawWidth = node.attrs.width;
+  const rawHeight = node.attrs.height;
+  const width = typeof rawWidth === "number" ? rawWidth : null;
+  const height = typeof rawHeight === "number" ? rawHeight : null;
   return /* @__PURE__ */ jsxRuntime.jsx(NodeViewWrapper, { "data-drag-handle": true, "data-align": node.attrs["data-align"] ?? void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
     "img",
     {
       src: node.attrs.src,
       alt: node.attrs.alt ?? "",
-      style: { maxWidth: "100%", display: "block" },
+      style: {
+        maxWidth: width ? void 0 : "100%",
+        display: "block",
+        width: width ? `${width}px` : void 0,
+        height: height ? `${height}px` : void 0
+      },
       draggable: false
     }
   ) });
@@ -29500,7 +29706,8 @@ function buildExtensions(config) {
     extensions.push(index_default.configure({ multicolor: true }));
   }
   if (isFeatureEnabled(config.mediaLibrary)) {
-    extensions.push(StrapiImage);
+    const mediaOpts = getFeatureOptions(config.mediaLibrary, {});
+    extensions.push(StrapiImage.configure(mediaOpts ?? {}));
   } else {
     extensions.push(StrapiImage.configure({ enableContentCheck: true }));
   }

package/dist/_chunks/{RichTextInput-B8CLPOyo.mjs → RichTextInput-B4D0Djcf.mjs}

@@ -1,12 +1,12 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
-import React, { useRef, useState, useDebugValue, useEffect, useLayoutEffect, forwardRef, createRef, memo, createElement, createContext, version, useContext, useMemo, Component } from "react";
+import React, { useRef, useState, useDebugValue, useEffect, useLayoutEffect, forwardRef, createRef, memo, createElement, createContext, version, useContext, useMemo, Component, useCallback } from "react";
 import { useIntl } from "react-intl";
 import { Field, Box, Status, Typography, Flex, Button, Tooltip, Dialog, TextInput, SingleSelect, SingleSelectOption, Popover, IconButton } from "@strapi/design-system";
 import ReactDOM, { flushSync } from "react-dom";
 import styled from "styled-components";
 import { useField, useFetchClient } from "@strapi/strapi/admin";
-import { Quotes, Code as Code$1, NumberList, BulletList as BulletList$1, StrikeThrough, Underline as Underline$1, Italic as Italic$1, Bold as Bold$1, Link as Link$1, Trash, Image as Image$1, GridNine } from "@strapi/icons";
-import { g as getMediaLibraryComponent, a as getThemeCache } from "./index-sX8SY6P-.mjs";
+import { Quotes, Code as Code$1, NumberList, BulletList as BulletList$1, StrikeThrough, Underline as Underline$1, Italic as Italic$1, Bold as Bold$1, Link as Link$1, Cross, Trash, Image as Image$1, GridNine } from "@strapi/icons";
+import { g as getMediaLibraryComponent, a as getThemeCache } from "./index-BVPd2eP4.mjs";
 var shim = { exports: {} };
 var useSyncExternalStoreShim_production = {};
 /**
@@ -19903,19 +19903,53 @@ const TiptapInputStyles = styled.div`
     margin: 0.75em 0;
   }
 
-  /* Image alignment — margin-based, no float */
-  [data-align="center"] img {
-    margin-left: auto;
-    margin-right: auto;
+  /* Image alignment — text-align on the node wrapper centres the inline-block image container */
+  [data-align="center"] {
+    text-align: center;
   }
 
-  [data-align="right"] img {
-    margin-left: auto;
-    margin-right: 0;
+  [data-align="right"] {
+    text-align: right;
   }
 
   /* data-align="left" and null: natural left flow, no rule needed */
 
+  /* Inline-block wrapper for positioning the resize handle relative to the image */
+  .image-wrapper {
+    position: relative;
+    display: inline-block;
+    max-width: 100%;
+    line-height: 0; /* prevent extra space below img */
+  }
+
+  .image-wrapper img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+  }
+
+  /* Resize handle — bottom-right corner */
+  .image-resize-handle {
+    position: absolute;
+    right: -4px;
+    bottom: -4px;
+    width: 12px;
+    height: 12px;
+    background: #4945ff;
+    border: 2px solid #fff;
+    border-radius: 50%;
+    cursor: nwse-resize;
+    opacity: 0;
+    transition: opacity 0.15s;
+    z-index: 1;
+  }
+
+  .image-wrapper:hover .image-resize-handle,
+  .image-wrapper[data-selected] .image-resize-handle,
+  .ProseMirror-selectednode .image-resize-handle {
+    opacity: 1;
+  }
+
   // Source: https://tiptap.dev/docs/editor/extensions/nodes/table
 
   .ProseMirror {
@@ -20887,19 +20921,43 @@ function TextAlignRight(props) {
     }
   );
 }
-function ImageNodeView({ node, updateAttributes: updateAttributes2, deleteNode: deleteNode2 }) {
+function ImageNodeView({ node, updateAttributes: updateAttributes2, deleteNode: deleteNode2, selected, extension }) {
   const { formatMessage } = useIntl();
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [altText, setAltText] = useState(node.attrs.alt ?? "");
+  const imgRef = useRef(null);
+  const isResizingRef = useRef(false);
+  const resizeCleanupRef = useRef(null);
+  const rawResize = extension.options.resize;
+  const resizeEnabled = typeof rawResize === "object" && !!rawResize ? rawResize.enabled : !!rawResize;
+  const resizeOpts = resizeEnabled && typeof rawResize === "object" ? rawResize : void 0;
+  const preserveAspectRatio = resizeOpts?.alwaysPreserveAspectRatio ?? true;
+  const minWidth = resizeOpts?.minWidth ?? 50;
+  const minHeight = resizeOpts?.minHeight ?? 50;
+  const currentWidth = node.attrs.width;
+  const currentHeight = node.attrs.height;
+  const [widthInput, setWidthInput] = useState(currentWidth ? String(currentWidth) : "");
+  const [heightInput, setHeightInput] = useState(currentHeight ? String(currentHeight) : "");
   useEffect(() => {
     setAltText(node.attrs.alt ?? "");
   }, [node.attrs.alt]);
+  useEffect(() => {
+    setWidthInput(node.attrs.width ? String(node.attrs.width) : "");
+  }, [node.attrs.width]);
+  useEffect(() => {
+    setHeightInput(node.attrs.height ? String(node.attrs.height) : "");
+  }, [node.attrs.height]);
   useEffect(() => {
     if (!isPopoverOpen) return;
     const handleScroll = () => setIsPopoverOpen(false);
     document.addEventListener("scroll", handleScroll, true);
     return () => document.removeEventListener("scroll", handleScroll, true);
   }, [isPopoverOpen]);
+  useEffect(() => {
+    return () => {
+      resizeCleanupRef.current?.();
+    };
+  }, []);
   const currentAlign = node.attrs["data-align"];
   function handleAlign(value) {
     const current = node.attrs["data-align"];
@@ -20914,15 +20972,117 @@ function ImageNodeView({ node, updateAttributes: updateAttributes2, deleteNode:
       e.currentTarget.blur();
     }
   }
+  function getAspectRatio() {
+    const img = imgRef.current;
+    if (!img || !img.naturalWidth || !img.naturalHeight) return null;
+    return img.naturalWidth / img.naturalHeight;
+  }
+  function handleWidthCommit() {
+    if (widthInput === "") {
+      updateAttributes2({ width: null, height: null });
+      return;
+    }
+    const num = parseInt(widthInput, 10);
+    if (!isNaN(num) && num >= minWidth) {
+      const ratio = getAspectRatio();
+      if (preserveAspectRatio && ratio) {
+        const newHeight = Math.round(num / ratio);
+        updateAttributes2({ width: num, height: newHeight });
+      } else {
+        updateAttributes2({ width: num });
+      }
+    } else {
+      setWidthInput(node.attrs.width ? String(node.attrs.width) : "");
+    }
+  }
+  function handleHeightCommit() {
+    if (heightInput === "") {
+      updateAttributes2({ height: null, width: null });
+      return;
+    }
+    const num = parseInt(heightInput, 10);
+    if (!isNaN(num) && num >= minHeight) {
+      const ratio = getAspectRatio();
+      if (preserveAspectRatio && ratio) {
+        const newWidth = Math.round(num * ratio);
+        updateAttributes2({ width: newWidth, height: num });
+      } else {
+        updateAttributes2({ height: num });
+      }
+    } else {
+      setHeightInput(node.attrs.height ? String(node.attrs.height) : "");
+    }
+  }
+  const handleResizeStart = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      isResizingRef.current = true;
+      const startX = e.clientX;
+      const img = imgRef.current;
+      if (!img) return;
+      const startWidth = img.offsetWidth;
+      const ratio = img.naturalWidth && img.naturalHeight ? img.naturalWidth / img.naturalHeight : null;
+      function onMouseMove(moveEvent) {
+        const diff = moveEvent.clientX - startX;
+        const newWidth = Math.max(minWidth, startWidth + diff);
+        if (img) {
+          img.style.width = `${newWidth}px`;
+          if (preserveAspectRatio && ratio) {
+            img.style.height = `${Math.round(newWidth / ratio)}px`;
+          }
+        }
+      }
+      function cleanup() {
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+        resizeCleanupRef.current = null;
+      }
+      function onMouseUp() {
+        cleanup();
+        if (img) {
+          updateAttributes2({
+            width: Math.round(img.offsetWidth),
+            height: Math.round(img.offsetHeight)
+          });
+        }
+        requestAnimationFrame(() => {
+          isResizingRef.current = false;
+        });
+      }
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+      resizeCleanupRef.current = cleanup;
+    },
+    [updateAttributes2, preserveAspectRatio, minWidth]
+  );
   return /* @__PURE__ */ jsx(NodeViewWrapper, { "data-drag-handle": true, "data-align": node.attrs["data-align"] ?? void 0, children: /* @__PURE__ */ jsxs(Popover.Root, { open: isPopoverOpen, onOpenChange: setIsPopoverOpen, children: [
-    /* @__PURE__ */ jsx(Popover.Anchor, { children: /* @__PURE__ */ jsx(
-      "img",
+    /* @__PURE__ */ jsx(Popover.Anchor, { children: /* @__PURE__ */ jsxs(
+      "div",
       {
-        src: node.attrs.src,
-        alt: node.attrs.alt ?? "",
-        style: { maxWidth: "100%", display: "block" },
-        draggable: false,
-        onClick: () => setIsPopoverOpen(true)
+        className: "image-wrapper",
+        "data-selected": selected || isPopoverOpen || void 0,
+        children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              ref: imgRef,
+              src: node.attrs.src,
+              alt: node.attrs.alt ?? "",
+              style: {
+                display: "block",
+                maxWidth: "100%",
+                width: currentWidth ? `${currentWidth}px` : void 0,
+                height: currentHeight ? `${currentHeight}px` : "auto"
+              },
+              draggable: false,
+              onClick: () => {
+                if (!isResizingRef.current) setIsPopoverOpen(true);
+              }
+            }
+          ),
+          resizeEnabled && /* @__PURE__ */ jsx("div", { className: "image-resize-handle", onMouseDown: handleResizeStart })
+        ]
       }
     ) }),
     /* @__PURE__ */ jsxs(Popover.Content, { side: "bottom", children: [
@@ -20961,6 +21121,43 @@ function ImageNodeView({ node, updateAttributes: updateAttributes2, deleteNode:
           }
         )
       ] }),
+      resizeEnabled && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px", padding: "8px", paddingBottom: "0" }, children: [
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            type: "number",
+            placeholder: "W",
+            value: widthInput,
+            onChange: (e) => setWidthInput(e.target.value),
+            onBlur: handleWidthCommit,
+            onKeyDown: handleKeyDown2,
+            "aria-label": formatMessage({ id: "tiptap-editor.image.width", defaultMessage: "Width (px)" }),
+            style: { minWidth: "62px", flexGrow: 1 }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { style: { fontSize: "1.1rem", color: "#999" }, children: "×" }),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            type: "number",
+            placeholder: "H",
+            value: heightInput,
+            onChange: (e) => setHeightInput(e.target.value),
+            onBlur: handleHeightCommit,
+            onKeyDown: handleKeyDown2,
+            "aria-label": formatMessage({ id: "tiptap-editor.image.height", defaultMessage: "Height (px)" }),
+            style: { minWidth: "62px", flexGrow: 1 }
+          }
+        ),
+        (currentWidth || currentHeight) && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            onClick: () => updateAttributes2({ width: null, height: null }),
+            label: formatMessage({ id: "tiptap-editor.image.resetSize", defaultMessage: "Reset size" }),
+            children: /* @__PURE__ */ jsx(Cross, {})
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", padding: "8px" }, children: [
         /* @__PURE__ */ jsx(
           TextInput,
@@ -20986,12 +21183,21 @@ function ImageNodeView({ node, updateAttributes: updateAttributes2, deleteNode:
   ] }) });
 }
 function ImageNodeViewReadOnly({ node }) {
+  const rawWidth = node.attrs.width;
+  const rawHeight = node.attrs.height;
+  const width = typeof rawWidth === "number" ? rawWidth : null;
+  const height = typeof rawHeight === "number" ? rawHeight : null;
   return /* @__PURE__ */ jsx(NodeViewWrapper, { "data-drag-handle": true, "data-align": node.attrs["data-align"] ?? void 0, children: /* @__PURE__ */ jsx(
     "img",
     {
       src: node.attrs.src,
       alt: node.attrs.alt ?? "",
-      style: { maxWidth: "100%", display: "block" },
+      style: {
+        maxWidth: width ? void 0 : "100%",
+        display: "block",
+        width: width ? `${width}px` : void 0,
+        height: height ? `${height}px` : void 0
+      },
       draggable: false
     }
   ) });
@@ -29494,7 +29700,8 @@ function buildExtensions(config) {
     extensions.push(index_default.configure({ multicolor: true }));
   }
   if (isFeatureEnabled(config.mediaLibrary)) {
-    extensions.push(StrapiImage);
+    const mediaOpts = getFeatureOptions(config.mediaLibrary, {});
+    extensions.push(StrapiImage.configure(mediaOpts ?? {}));
   } else {
     extensions.push(StrapiImage.configure({ enableContentCheck: true }));
   }

package/dist/_chunks/{index-sX8SY6P-.mjs → index-BVPd2eP4.mjs}

@@ -146,7 +146,7 @@ const richTextField = {
   },
   icon: Paragraph,
   components: {
-    Input: async () => import("./RichTextInput-B8CLPOyo.mjs").then((m) => ({ default: m.default }))
+    Input: async () => import("./RichTextInput-B4D0Djcf.mjs").then((m) => ({ default: m.default }))
   },
   options: {
     advanced: [

package/dist/_chunks/{index-yXpX_VsO.js → index-CTcKIvYv.js}

@@ -147,7 +147,7 @@ const richTextField = {
   },
   icon: icons.Paragraph,
   components: {
-    Input: async () => Promise.resolve().then(() => require("./RichTextInput-EtL-yFqV.js")).then((m) => ({ default: m.default }))
+    Input: async () => Promise.resolve().then(() => require("./RichTextInput-1uZSm3Nc.js")).then((m) => ({ default: m.default }))
   },
   options: {
     advanced: [

package/dist/admin/index.js

@@ -1,3 +1,3 @@
 "use strict";
-const index = require("../_chunks/index-yXpX_VsO.js");
+const index = require("../_chunks/index-CTcKIvYv.js");
 module.exports = index.index;

package/dist/admin/index.mjs

@@ -1,4 +1,4 @@
-import { i } from "../_chunks/index-sX8SY6P-.mjs";
+import { i } from "../_chunks/index-BVPd2eP4.mjs";
 export {
   i as default
 };

package/dist/admin/src/components/ImageAltPopover.d.ts

@@ -1,3 +1,3 @@
 import type { NodeViewProps } from '@tiptap/react';
-export declare function ImageNodeView({ node, updateAttributes, deleteNode }: NodeViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function ImageNodeView({ node, updateAttributes, deleteNode, selected, extension }: NodeViewProps): import("react/jsx-runtime").JSX.Element;
 export default ImageNodeView;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.1",
+  "version": "1.2.1",
   "keywords": [
     "strapi",
     "plugin",