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

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/package.json

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