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

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.2.0",
+  "version": "1.2.1",
   "keywords": [
     "strapi",
     "plugin",