@notum-cz/strapi-plugin-tiptap-editor 1.0.3-rc.6 → 1.1.1

package/README.md

@@ -88,7 +88,11 @@
     - [Links](#links)
     - [Tables](#tables)
     - [Text Alignment](#text-alignment)
+    - [Text Color \& Highlight Color](#text-color--highlight-color)
     - [Images](#images)
+  - [Theme](#theme)
+    - [Colors](#colors)
+    - [Custom Stylesheet](#custom-stylesheet)
   - [Configuration Reference](#configuration-reference)
     - [Feature Values](#feature-values)
     - [Full Preset Example](#full-preset-example)
@@ -393,6 +397,22 @@ 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                                     |
@@ -416,6 +436,85 @@ The image stores both the URL (`src`) and the Strapi asset ID (`data-asset-id`)
 }
 ```
 
+## 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,6 +573,10 @@ export default () => ({
           // Text alignment (left, center, right, justify)
           textAlign: true,
 
+          // Text and highlight colors (requires theme.colors)
+          textColor: true,
+          highlightColor: true,
+
           // Images from Strapi Media Library
           mediaLibrary: true,
         },

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

@@ -6,7 +6,7 @@ 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-DB8F5E26.mjs";
+import { g as getMediaLibraryComponent, a as getThemeCache } from "./index-sX8SY6P-.mjs";
 var shim = { exports: {} };
 var useSyncExternalStoreShim_production = {};
 /**

package/dist/_chunks/{RichTextInput-zyphJZp3.js → RichTextInput-EtL-yFqV.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-CsjxcNiy.js");
+const index = require("./index-yXpX_VsO.js");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const React__default = /* @__PURE__ */ _interopDefault(React);
 const ReactDOM__default = /* @__PURE__ */ _interopDefault(ReactDOM);

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

@@ -47,7 +47,13 @@ function reconcileThemeStyles(theme) {
     document.head.appendChild(style);
     return Promise.resolve();
   }
-  const resolved = new URL(stylesheet, document.baseURI).href;
+  let resolved;
+  try {
+    resolved = new URL(stylesheet, document.baseURI).href;
+  } catch {
+    console.warn("[TiptapEditor] Invalid stylesheet URL:", stylesheet);
+    return Promise.resolve();
+  }
   if (existing && existing.tagName === "LINK" && existing.href === resolved && existing.sheet) {
     return Promise.resolve();
   }
@@ -84,8 +90,13 @@ const Initializer = ({ setPlugin }) => {
       } catch (error) {
         console.warn("[TiptapEditor] Failed to fetch theme config:", error);
       }
-      await reconcileThemeStyles(themeStyles);
-      ref.current(PLUGIN_ID);
+      try {
+        await reconcileThemeStyles(themeStyles);
+      } catch (error) {
+        console.warn("[TiptapEditor] Failed to reconcile theme styles:", error);
+      } finally {
+        ref.current(PLUGIN_ID);
+      }
     };
     fetchTheme();
   }, []);
@@ -135,7 +146,7 @@ const richTextField = {
   },
   icon: Paragraph,
   components: {
-    Input: async () => import("./RichTextInput-NZH5L_pW.mjs").then((m) => ({ default: m.default }))
+    Input: async () => import("./RichTextInput-B8CLPOyo.mjs").then((m) => ({ default: m.default }))
   },
   options: {
     advanced: [

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

@@ -48,7 +48,13 @@ function reconcileThemeStyles(theme) {
     document.head.appendChild(style);
     return Promise.resolve();
   }
-  const resolved = new URL(stylesheet, document.baseURI).href;
+  let resolved;
+  try {
+    resolved = new URL(stylesheet, document.baseURI).href;
+  } catch {
+    console.warn("[TiptapEditor] Invalid stylesheet URL:", stylesheet);
+    return Promise.resolve();
+  }
   if (existing && existing.tagName === "LINK" && existing.href === resolved && existing.sheet) {
     return Promise.resolve();
   }
@@ -85,8 +91,13 @@ const Initializer = ({ setPlugin }) => {
       } catch (error) {
         console.warn("[TiptapEditor] Failed to fetch theme config:", error);
       }
-      await reconcileThemeStyles(themeStyles);
-      ref.current(PLUGIN_ID);
+      try {
+        await reconcileThemeStyles(themeStyles);
+      } catch (error) {
+        console.warn("[TiptapEditor] Failed to reconcile theme styles:", error);
+      } finally {
+        ref.current(PLUGIN_ID);
+      }
     };
     fetchTheme();
   }, []);
@@ -136,7 +147,7 @@ const richTextField = {
   },
   icon: icons.Paragraph,
   components: {
-    Input: async () => Promise.resolve().then(() => require("./RichTextInput-zyphJZp3.js")).then((m) => ({ default: m.default }))
+    Input: async () => Promise.resolve().then(() => require("./RichTextInput-EtL-yFqV.js")).then((m) => ({ default: m.default }))
   },
   options: {
     advanced: [

package/dist/admin/index.js

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

package/dist/admin/index.mjs

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

package/dist/shared/types.d.ts

@@ -17,13 +17,18 @@ export type ThemeColorEntry = {
     label: string;
     color: string;
 };
-export type TiptapThemeConfig = {
-    colors?: ThemeColorEntry[];
+type ThemeStyleSource = {
     /** A browser-fetchable URL for an external stylesheet */
     stylesheet?: string;
+    css?: never;
+} | {
+    stylesheet?: never;
     /** Inline CSS content to inject via a <style> tag */
     css?: string;
 };
+export type TiptapThemeConfig = {
+    colors?: ThemeColorEntry[];
+} & ThemeStyleSource;
 export interface TiptapPresetConfig {
     bold?: boolean | Record<string, unknown>;
     italic?: boolean | Record<string, unknown>;
@@ -67,3 +72,4 @@ export declare const isFeatureEnabled: (value: TiptapPresetConfig[keyof TiptapPr
  * NOTE: false returns null — DIVERGES from dist where false returns defaults.
  */
 export declare const getFeatureOptions: <T extends Record<string, unknown>>(value: boolean | T | undefined, defaults: T) => T | null;
+export {};

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.3-rc.6",
+  "version": "1.1.1",
   "keywords": [
     "strapi",
     "plugin",