@mjml-agent-editor/editor 0.1.12 → 0.1.15

package/dist/index.d.cts

@@ -49,6 +49,29 @@ interface EditorLabels {
     readonly rteBackgroundColor: string;
     readonly documentLoadFailed: string;
     readonly documentSaveFailed: string;
+    readonly retry: string;
+    readonly chooseImage: string;
+    readonly imagePickerTitle: string;
+    readonly imagePickerDrop: string;
+    readonly imagePickerBrowse: string;
+    readonly imagePickerUrlPlaceholder: string;
+    readonly imagePickerUseUrl: string;
+    readonly imagePickerGallery: string;
+    readonly imagePickerEmpty: string;
+    readonly imagePickerQuota: (used: number, limit: number) => string;
+    readonly imagePickerQuotaFull: string;
+    readonly imagePickerDelete: string;
+    readonly imagePickerConfirmDelete: string;
+    readonly imagePickerLoadFailed: string;
+    readonly imageUploadFailed: string;
+    readonly imageDeleteFailed: string;
+    readonly imagePickerUnsupported: (fileName: string) => string;
+    readonly imageFieldRemove: string;
+    readonly colorPickerOpen: string;
+    readonly colorPickerEyedropper: string;
+    readonly colorPickerDocument: string;
+    readonly colorPickerPresets: string;
+    readonly colorPickerTransparent: string;
     readonly commentOnSection: string;
     readonly closeComments: string;
     readonly noCommentsYet: string;
@@ -60,6 +83,8 @@ interface EditorLabels {
     readonly agentWorking: string;
     readonly reasoning: string;
     readonly completedSteps: (count: number, failed: number) => string;
+    /** Under a turn that hit the backend's step ceiling before it could reply. */
+    readonly stepLimitReached: string;
     readonly applyComments: string;
     readonly chatPlaceholder: string;
     readonly stop: string;
@@ -75,9 +100,43 @@ declare const DEFAULT_LABELS: EditorLabels;
  */
 declare function mergeLabels(overrides?: Partial<EditorLabels>): EditorLabels;
 
+/** An image the host has stored on the user's behalf. */
+interface ImageAsset {
+    readonly id: string;
+    readonly url: string;
+    readonly name?: string;
+}
+/**
+ * The user's own images: uploaded once, then picked from a gallery in any email.
+ *
+ * Without one the picker accepts only URLs. GrapesJS would otherwise inline a dropped file
+ * as base64: most mail clients block `data:` images, and every agent turn pays for the bytes.
+ */
+interface ImageLibrary {
+    /** Newest first. `quota` is shown in the picker when given. */
+    list(): Promise<{
+        readonly images: readonly ImageAsset[];
+        readonly quota?: {
+            readonly used: number;
+            readonly limit: number;
+        };
+    }>;
+    upload(file: File): Promise<ImageAsset>;
+    /**
+     * What `upload` takes, as an `<input accept>` value ("image/png,image/jpeg"). The picker
+     * refuses anything else before sending it. Defaults to any image.
+     */
+    readonly accept?: string;
+    /**
+     * Omit to make the gallery read-only — for a host that caps uploads and cannot reclaim
+     * the storage, deleting would only be a way round the cap.
+     */
+    remove?(id: string): Promise<void>;
+}
 interface EditorStores {
     readonly documents: DocumentStore;
     readonly comments: CommentStore;
+    readonly images?: ImageLibrary;
 }
 declare function EditorStoreProvider({ stores, labels, children, }: {
     stores: EditorStores;
@@ -101,6 +160,7 @@ declare function EditorStoreProvider({ stores, labels, children, }: {
 declare function useLabels(): EditorLabels;
 declare function useDocumentStore(): DocumentStore;
 declare function useCommentStore(): CommentStore;
+declare function useImageLibrary(): ImageLibrary | undefined;
 
 declare function EditorHeader({ docId, api, openCount, homeLink, logo, }: {
     docId: string;
@@ -158,7 +218,11 @@ type Props$1 = {
      * means there was nothing to re-attach to — which is the ordinary case and not an error.
      */
     resume?: boolean;
-    /** Flushes unsaved editor changes before the agent starts. */
+    /**
+     * Flushes unsaved editor changes before the agent starts. A rejection stops the turn and
+     * keeps the prompt; its message is shown when it carries a 4xx `status` or an
+     * `{"error": "..."}` body, otherwise `labels.documentSaveFailed`.
+     */
     onBeforeSend: () => Promise<void>;
     /** After the agent's turn finishes (refresh the editor and comments). */
     onAgentFinish: () => void;
@@ -187,4 +251,4 @@ declare function MarkdownImpl({ children }: {
 }): React.JSX.Element;
 declare const Markdown: React.MemoExoticComponent<typeof MarkdownImpl>;
 
-export { CanvasComments, ChatPanel, DEFAULT_LABELS, EditorApi, EditorHeader, type EditorLabels, EditorStoreProvider, type EditorStores, Markdown, mergeLabels, useCommentStore, useDocumentStore, useLabels };
+export { CanvasComments, ChatPanel, DEFAULT_LABELS, EditorApi, EditorHeader, type EditorLabels, EditorStoreProvider, type EditorStores, type ImageAsset, type ImageLibrary, Markdown, mergeLabels, useCommentStore, useDocumentStore, useImageLibrary, useLabels };

package/dist/index.d.ts

@@ -49,6 +49,29 @@ interface EditorLabels {
     readonly rteBackgroundColor: string;
     readonly documentLoadFailed: string;
     readonly documentSaveFailed: string;
+    readonly retry: string;
+    readonly chooseImage: string;
+    readonly imagePickerTitle: string;
+    readonly imagePickerDrop: string;
+    readonly imagePickerBrowse: string;
+    readonly imagePickerUrlPlaceholder: string;
+    readonly imagePickerUseUrl: string;
+    readonly imagePickerGallery: string;
+    readonly imagePickerEmpty: string;
+    readonly imagePickerQuota: (used: number, limit: number) => string;
+    readonly imagePickerQuotaFull: string;
+    readonly imagePickerDelete: string;
+    readonly imagePickerConfirmDelete: string;
+    readonly imagePickerLoadFailed: string;
+    readonly imageUploadFailed: string;
+    readonly imageDeleteFailed: string;
+    readonly imagePickerUnsupported: (fileName: string) => string;
+    readonly imageFieldRemove: string;
+    readonly colorPickerOpen: string;
+    readonly colorPickerEyedropper: string;
+    readonly colorPickerDocument: string;
+    readonly colorPickerPresets: string;
+    readonly colorPickerTransparent: string;
     readonly commentOnSection: string;
     readonly closeComments: string;
     readonly noCommentsYet: string;
@@ -60,6 +83,8 @@ interface EditorLabels {
     readonly agentWorking: string;
     readonly reasoning: string;
     readonly completedSteps: (count: number, failed: number) => string;
+    /** Under a turn that hit the backend's step ceiling before it could reply. */
+    readonly stepLimitReached: string;
     readonly applyComments: string;
     readonly chatPlaceholder: string;
     readonly stop: string;
@@ -75,9 +100,43 @@ declare const DEFAULT_LABELS: EditorLabels;
  */
 declare function mergeLabels(overrides?: Partial<EditorLabels>): EditorLabels;
 
+/** An image the host has stored on the user's behalf. */
+interface ImageAsset {
+    readonly id: string;
+    readonly url: string;
+    readonly name?: string;
+}
+/**
+ * The user's own images: uploaded once, then picked from a gallery in any email.
+ *
+ * Without one the picker accepts only URLs. GrapesJS would otherwise inline a dropped file
+ * as base64: most mail clients block `data:` images, and every agent turn pays for the bytes.
+ */
+interface ImageLibrary {
+    /** Newest first. `quota` is shown in the picker when given. */
+    list(): Promise<{
+        readonly images: readonly ImageAsset[];
+        readonly quota?: {
+            readonly used: number;
+            readonly limit: number;
+        };
+    }>;
+    upload(file: File): Promise<ImageAsset>;
+    /**
+     * What `upload` takes, as an `<input accept>` value ("image/png,image/jpeg"). The picker
+     * refuses anything else before sending it. Defaults to any image.
+     */
+    readonly accept?: string;
+    /**
+     * Omit to make the gallery read-only — for a host that caps uploads and cannot reclaim
+     * the storage, deleting would only be a way round the cap.
+     */
+    remove?(id: string): Promise<void>;
+}
 interface EditorStores {
     readonly documents: DocumentStore;
     readonly comments: CommentStore;
+    readonly images?: ImageLibrary;
 }
 declare function EditorStoreProvider({ stores, labels, children, }: {
     stores: EditorStores;
@@ -101,6 +160,7 @@ declare function EditorStoreProvider({ stores, labels, children, }: {
 declare function useLabels(): EditorLabels;
 declare function useDocumentStore(): DocumentStore;
 declare function useCommentStore(): CommentStore;
+declare function useImageLibrary(): ImageLibrary | undefined;
 
 declare function EditorHeader({ docId, api, openCount, homeLink, logo, }: {
     docId: string;
@@ -158,7 +218,11 @@ type Props$1 = {
      * means there was nothing to re-attach to — which is the ordinary case and not an error.
      */
     resume?: boolean;
-    /** Flushes unsaved editor changes before the agent starts. */
+    /**
+     * Flushes unsaved editor changes before the agent starts. A rejection stops the turn and
+     * keeps the prompt; its message is shown when it carries a 4xx `status` or an
+     * `{"error": "..."}` body, otherwise `labels.documentSaveFailed`.
+     */
     onBeforeSend: () => Promise<void>;
     /** After the agent's turn finishes (refresh the editor and comments). */
     onAgentFinish: () => void;
@@ -187,4 +251,4 @@ declare function MarkdownImpl({ children }: {
 }): React.JSX.Element;
 declare const Markdown: React.MemoExoticComponent<typeof MarkdownImpl>;
 
-export { CanvasComments, ChatPanel, DEFAULT_LABELS, EditorApi, EditorHeader, type EditorLabels, EditorStoreProvider, type EditorStores, Markdown, mergeLabels, useCommentStore, useDocumentStore, useLabels };
+export { CanvasComments, ChatPanel, DEFAULT_LABELS, EditorApi, EditorHeader, type EditorLabels, EditorStoreProvider, type EditorStores, type ImageAsset, type ImageLibrary, Markdown, mergeLabels, useCommentStore, useDocumentStore, useImageLibrary, useLabels };

package/dist/index.js

@@ -10,8 +10,9 @@ import {
   mergeLabels,
   useCommentStore,
   useDocumentStore,
+  useImageLibrary,
   useLabels
-} from "./chunk-4N2OJT22.js";
+} from "./chunk-3RCKZYM4.js";
 import "./chunk-V6RR4VRD.js";
 export {
   CanvasComments,
@@ -24,6 +25,7 @@ export {
   mergeLabels,
   useCommentStore,
   useDocumentStore,
+  useImageLibrary,
   useLabels
 };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mjml-agent-editor/editor",
-  "version": "0.1.12",
+  "version": "0.1.15",
   "description": "React MJML editor with an agent chat panel and canvas comments.",
   "keywords": [
     "mjml",
@@ -66,27 +66,30 @@
     "grapesjs-mjml": "^1.0.8",
     "lucide-react": "^1.25.0",
     "radix-ui": "^1.6.2",
+    "react-colorful": "^5.8.1",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0",
-    "@mjml-agent-editor/core": "0.1.8"
+    "@mjml-agent-editor/core": "0.1.9"
   },
   "peerDependencies": {
+    "ai": "^6.0.230",
     "react": "^19",
-    "react-dom": "^19",
-    "ai": "^6.0.230"
+    "react-dom": "^19"
   },
   "devDependencies": {
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "ai": "^6.0.230",
     "react": "19.2.4",
     "tsup": "^8.3.5",
     "typescript": "^5.7.2",
-    "ai": "^6.0.230"
+    "vitest": "^2.1.8"
   },
   "scripts": {
     "build": "tsup",
+    "test": "vitest run",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit"
   }

package/src/components/editor/editor-theme.css

@@ -409,3 +409,32 @@
   background: transparent;
   cursor: pointer;
 }
+
+/* ── Color picker (react-colorful), compact to fit beside the sidebar ──── */
+.color-field-picker.react-colorful {
+  width: 100%;
+  height: 120px;
+}
+.color-field-picker .react-colorful__saturation {
+  border-radius: 6px 6px 0 0;
+  border-bottom: none;
+}
+.color-field-picker .react-colorful__hue {
+  height: 10px;
+  border-radius: 0 0 6px 6px;
+}
+.color-field-picker .react-colorful__pointer {
+  width: 12px;
+  height: 12px;
+  border-width: 2px;
+}
+
+/* Image properties take the full row: a thumbnail at half the sidebar is too small to judge. */
+.editor-dark .gjs-sm-property.gjs-sm-file {
+  width: 100%;
+  flex-basis: 100%;
+}
+.editor-dark .gjs-sm-property.gjs-sm-file .gjs-fields > * {
+  flex: 1 1 auto;
+  width: 100%;
+}