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

package/README.md

@@ -88,7 +88,12 @@
     - [Links](#links)
     - [Tables](#tables)
     - [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)
   - [Configuration Reference](#configuration-reference)
     - [Feature Values](#feature-values)
     - [Full Preset Example](#full-preset-example)
@@ -393,20 +398,40 @@ Enables all four alignment buttons (left, center, right, justify).
 }
 ```
 
+### Text Color & Highlight Color
+
+| Key              | Description                       | Toolbar                |
+| ---------------- | --------------------------------- | ---------------------- |
+| `textColor`      | Change the color of selected text | Font color picker      |
+| `highlightColor` | Apply a background highlight      | Highlight color picker |
+
+Both features use a color picker popover that displays the colors defined in the [theme configuration](#colors). If no colors are configured, the buttons will not appear.
+
+```ts
+{
+  textColor: true,
+  highlightColor: true,
+}
+```
+
 ### 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.
 
@@ -416,6 +441,152 @@ 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.
+
+### Colors
+
+Define a `colors` array to populate the text color and highlight color pickers. Each entry needs a `label` (shown as a tooltip) and a `color` value (hex, rgb, rgba, hsl, hsla, or CSS variable).
+
+```ts
+// config/plugins.ts
+
+export default () => ({
+  'tiptap-editor': {
+    config: {
+      theme: {
+        colors: [
+          { label: 'Black', color: '#000000' },
+          { label: 'Dark gray', color: '#4A4A4A' },
+          { label: 'Red', color: '#E53E3E' },
+          { label: 'Orange', color: '#DD6B20' },
+          { label: 'Blue', color: '#3182CE' },
+          { label: 'Green', color: '#38A169' },
+          { label: 'Brand primary', color: 'var(--color-primary)' },
+        ],
+      },
+      presets: {
+        blog: {
+          bold: true,
+          italic: true,
+          textColor: true,
+          highlightColor: true,
+        },
+      },
+    },
+  },
+});
+```
+
+### Custom Stylesheet
+
+You can inject custom CSS to style the editor content area. There are two options — use one or the other, not both.
+
+**Option 1: `css`** — Inline CSS content (recommended for monorepos and production deployments)
+
+Read the file at Strapi startup so the CSS is captured as a string. This works reliably across all environments (local dev, Docker, Azure Container Apps, etc.) because the file is resolved in your app's Node process at boot time.
+
+```ts
+// config/plugins.ts
+import { readFileSync } from 'fs';
+
+export default () => ({
+  'tiptap-editor': {
+    config: {
+      theme: {
+        css: readFileSync(require.resolve('@repo/design-system/strapi-styles.css'), 'utf-8'),
+      },
+    },
+  },
+});
+```
+
+**Option 2: `stylesheet`** — A URL the browser can fetch directly
+
+Use this when the stylesheet is hosted at a known URL (CDN, public path, etc.).
+
+```ts
+// config/plugins.ts
+
+export default () => ({
+  'tiptap-editor': {
+    config: {
+      theme: {
+        stylesheet: 'https://cdn.example.com/editor-styles.css',
+      },
+    },
+  },
+});
+```
+
 ## Configuration Reference
 
 ### Feature Values
@@ -474,8 +645,14 @@ export default () => ({
           // Text alignment (left, center, right, justify)
           textAlign: true,
 
-          // Images from Strapi Media Library
-          mediaLibrary: true,
+          // Text and highlight colors (requires theme.colors)
+          textColor: true,
+          highlightColor: true,
+
+          // Images from Strapi Media Library with resize enabled
+          mediaLibrary: {
+            resize: { enabled: true },
+          },
         },
       },
     },

package/package.json

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