@flogeez/angular-tiptap-editor 0.3.7 → 0.5.0

package/index.d.ts

@@ -1,4 +1,4 @@
-import { Editor } from '@tiptap/core';
+import { Editor, Extension, Node, Mark, EditorOptions } from '@tiptap/core';
 import * as _angular_core from '@angular/core';
 import { AfterViewInit, OnDestroy, ElementRef } from '@angular/core';
 import { Observable } from 'rxjs';
@@ -32,6 +32,7 @@ interface TiptapTranslations {
         undo: string;
         redo: string;
         clear: string;
+        textColor: string;
     };
     bubbleMenu: {
         bold: string;
@@ -42,6 +43,7 @@ interface TiptapTranslations {
         superscript: string;
         subscript: string;
         highlight: string;
+        textColor: string;
         link: string;
         addLink: string;
         editLink: string;
@@ -117,6 +119,7 @@ interface TiptapTranslations {
     };
     imageUpload: {
         selectImage: string;
+        loadError: string;
         uploadingImage: string;
         uploadProgress: string;
         uploadError: string;
@@ -130,12 +133,20 @@ interface TiptapTranslations {
         resizeMedium: string;
         resizeLarge: string;
         resizeOriginal: string;
+        resizing: string;
+        compressing: string;
+        compressionError: string;
+        validating: string;
+        uploadingToServer: string;
+        replacingImage: string;
+        insertingImage: string;
+        noFileSelected: string;
+        selectionCancelled: string;
     };
     editor: {
         placeholder: string;
         character: string;
         word: string;
-        imageLoadError: string;
         linkPrompt: string;
         linkUrlPrompt: string;
         confirmDelete: string;
@@ -184,6 +195,7 @@ declare class TiptapI18nService {
         undo: string;
         redo: string;
         clear: string;
+        textColor: string;
     }>;
     readonly bubbleMenu: _angular_core.Signal<{
         bold: string;
@@ -194,6 +206,7 @@ declare class TiptapI18nService {
         superscript: string;
         subscript: string;
         highlight: string;
+        textColor: string;
         link: string;
         addLink: string;
         editLink: string;
@@ -269,6 +282,7 @@ declare class TiptapI18nService {
     }>;
     readonly imageUpload: _angular_core.Signal<{
         selectImage: string;
+        loadError: string;
         uploadingImage: string;
         uploadProgress: string;
         uploadError: string;
@@ -282,12 +296,20 @@ declare class TiptapI18nService {
         resizeMedium: string;
         resizeLarge: string;
         resizeOriginal: string;
+        resizing: string;
+        compressing: string;
+        compressionError: string;
+        validating: string;
+        uploadingToServer: string;
+        replacingImage: string;
+        insertingImage: string;
+        noFileSelected: string;
+        selectionCancelled: string;
     }>;
     readonly editor: _angular_core.Signal<{
         placeholder: string;
         character: string;
         word: string;
-        imageLoadError: string;
         linkPrompt: string;
         linkUrlPrompt: string;
         confirmDelete: string;
@@ -368,10 +390,9 @@ interface SlashCommandItem {
     keywords: string[];
     command: (editor: Editor) => void;
 }
-interface SlashCommandsConfig {
+interface CustomSlashCommands {
     commands?: SlashCommandItem[];
 }
-declare const DEFAULT_SLASH_COMMANDS: SlashCommandItem[];
 
 interface ImageData {
     src: string;
@@ -456,6 +477,8 @@ declare class ImageService {
     selectedImage: _angular_core.WritableSignal<ImageData | null>;
     isImageSelected: _angular_core.Signal<boolean>;
     isResizing: _angular_core.WritableSignal<boolean>;
+    private i18n;
+    private readonly t;
     isUploading: _angular_core.WritableSignal<boolean>;
     uploadProgress: _angular_core.WritableSignal<number>;
     uploadMessage: _angular_core.WritableSignal<string>;
@@ -570,10 +593,50 @@ declare class EditorCommandsService {
     blur(editor: Editor): void;
     setContent(editor: Editor, content: string, emitUpdate?: boolean): void;
     setEditable(editor: Editor, editable: boolean): void;
+    insertContent(editor: Editor, content: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EditorCommandsService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<EditorCommandsService>;
 }
 
+/**
+ * Clés des commandes natives dans l'ordre d'affichage
+ */
+declare const SLASH_COMMAND_KEYS: readonly ["heading1", "heading2", "heading3", "bulletList", "orderedList", "blockquote", "code", "image", "horizontalRule", "table"];
+type SlashCommandKey = (typeof SLASH_COMMAND_KEYS)[number];
+/**
+ * Configuration simplifiée pour activer/désactiver les slash commands natives.
+ * Permet aussi d'ajouter des commandes personnalisées.
+ */
+interface SlashCommandsConfig extends Partial<Record<SlashCommandKey, boolean>> {
+    /**
+     * Liste de commandes supplémentaires à ajouter à la fin du menu
+     */
+    custom?: SlashCommandItem[];
+}
+/**
+ * Configuration par défaut : toutes les commandes natives sont activées
+ */
+declare const DEFAULT_SLASH_COMMANDS_CONFIG: Record<SlashCommandKey, boolean>;
+/**
+ * Factory pour créer les commandes natives avec leurs traductions et leur logique d'exécution.
+ * Utilise les services de l'éditeur pour garantir une cohérence de comportement.
+ */
+declare function createDefaultSlashCommands(i18n: TiptapI18nService, commands: EditorCommandsService, images: ImageService, imageOptions?: {
+    quality?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    allowedTypes?: string[];
+}): SlashCommandItem[];
+/**
+ * Filtre et assemble les commandes selon la configuration fournie.
+ */
+declare function filterSlashCommands(config: SlashCommandsConfig, i18n: TiptapI18nService, commands: EditorCommandsService, images: ImageService, imageOptions?: {
+    quality?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    allowedTypes?: string[];
+}): SlashCommandItem[];
+
 interface ToolbarConfig {
     bold?: boolean;
     italic?: boolean;
@@ -600,6 +663,7 @@ interface ToolbarConfig {
     undo?: boolean;
     redo?: boolean;
     clear?: boolean;
+    textColor?: boolean;
     separator?: boolean;
 }
 
@@ -612,6 +676,7 @@ interface BubbleMenuConfig {
     superscript?: boolean;
     subscript?: boolean;
     highlight?: boolean;
+    textColor?: boolean;
     link?: boolean;
     separator?: boolean;
 }
@@ -667,9 +732,12 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     maxCharacters: _angular_core.InputSignal<number | undefined>;
     enableOfficePaste: _angular_core.InputSignal<boolean>;
     enableSlashCommands: _angular_core.InputSignal<boolean>;
-    slashCommandsConfig: _angular_core.InputSignal<SlashCommandsConfig | undefined>;
+    slashCommands: _angular_core.InputSignal<SlashCommandsConfig>;
+    customSlashCommands: _angular_core.InputSignal<CustomSlashCommands | undefined>;
     locale: _angular_core.InputSignal<SupportedLocale | undefined>;
-    autofocus: _angular_core.InputSignal<number | boolean | "end" | "start" | "all">;
+    autofocus: _angular_core.InputSignal<number | boolean | "start" | "end" | "all">;
+    tiptapExtensions: _angular_core.InputSignal<(Extension<any, any> | Node<any, any> | Mark<any, any>)[]>;
+    tiptapOptions: _angular_core.InputSignal<Partial<EditorOptions>>;
     showBubbleMenu: _angular_core.InputSignal<boolean>;
     bubbleMenu: _angular_core.InputSignal<Partial<BubbleMenuConfig>>;
     showImageBubbleMenu: _angular_core.InputSignal<boolean>;
@@ -751,7 +819,7 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
         compressImages: boolean;
         quality: number;
     }>;
-    slashCommandsConfigComputed: _angular_core.Signal<SlashCommandsConfig>;
+    slashCommandsConfigComputed: _angular_core.Signal<CustomSlashCommands>;
     private _destroyRef;
     private ngControl;
     readonly i18nService: TiptapI18nService;
@@ -762,8 +830,6 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     ngOnDestroy(): void;
     private initEditor;
     private updateCharacterCount;
-    onImageUploaded(result: ImageUploadResult): void;
-    onImageUploadError(error: string): void;
     onSlashCommandImageUpload(file: File): Promise<void>;
     onDragOver(event: DragEvent): void;
     onDrop(event: DragEvent): void;
@@ -780,27 +846,14 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     setDisabledState(isDisabled: boolean): void;
     onEditorClick(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AngularTiptapEditorComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AngularTiptapEditorComponent, "angular-tiptap-editor", never, { "content": { "alias": "content"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "fillContainer": { "alias": "fillContainer"; "required": false; "isSignal": true; }; "showToolbar": { "alias": "showToolbar"; "required": false; "isSignal": true; }; "showCharacterCount": { "alias": "showCharacterCount"; "required": false; "isSignal": true; }; "maxCharacters": { "alias": "maxCharacters"; "required": false; "isSignal": true; }; "enableOfficePaste": { "alias": "enableOfficePaste"; "required": false; "isSignal": true; }; "enableSlashCommands": { "alias": "enableSlashCommands"; "required": false; "isSignal": true; }; "slashCommandsConfig": { "alias": "slashCommandsConfig"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "showBubbleMenu": { "alias": "showBubbleMenu"; "required": false; "isSignal": true; }; "bubbleMenu": { "alias": "bubbleMenu"; "required": false; "isSignal": true; }; "showImageBubbleMenu": { "alias": "showImageBubbleMenu"; "required": false; "isSignal": true; }; "imageBubbleMenu": { "alias": "imageBubbleMenu"; "required": false; "isSignal": true; }; "toolbar": { "alias": "toolbar"; "required": false; "isSignal": true; }; "imageUpload": { "alias": "imageUpload"; "required": false; "isSignal": true; }; "imageUploadHandler": { "alias": "imageUploadHandler"; "required": false; "isSignal": true; }; }, { "contentChange": "contentChange"; "editorCreated": "editorCreated"; "editorUpdate": "editorUpdate"; "editorFocus": "editorFocus"; "editorBlur": "editorBlur"; }, never, never, true, [{ directive: typeof NoopValueAccessorDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AngularTiptapEditorComponent, "angular-tiptap-editor", never, { "content": { "alias": "content"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "fillContainer": { "alias": "fillContainer"; "required": false; "isSignal": true; }; "showToolbar": { "alias": "showToolbar"; "required": false; "isSignal": true; }; "showCharacterCount": { "alias": "showCharacterCount"; "required": false; "isSignal": true; }; "maxCharacters": { "alias": "maxCharacters"; "required": false; "isSignal": true; }; "enableOfficePaste": { "alias": "enableOfficePaste"; "required": false; "isSignal": true; }; "enableSlashCommands": { "alias": "enableSlashCommands"; "required": false; "isSignal": true; }; "slashCommands": { "alias": "slashCommands"; "required": false; "isSignal": true; }; "customSlashCommands": { "alias": "customSlashCommands"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "tiptapExtensions": { "alias": "tiptapExtensions"; "required": false; "isSignal": true; }; "tiptapOptions": { "alias": "tiptapOptions"; "required": false; "isSignal": true; }; "showBubbleMenu": { "alias": "showBubbleMenu"; "required": false; "isSignal": true; }; "bubbleMenu": { "alias": "bubbleMenu"; "required": false; "isSignal": true; }; "showImageBubbleMenu": { "alias": "showImageBubbleMenu"; "required": false; "isSignal": true; }; "imageBubbleMenu": { "alias": "imageBubbleMenu"; "required": false; "isSignal": true; }; "toolbar": { "alias": "toolbar"; "required": false; "isSignal": true; }; "imageUpload": { "alias": "imageUpload"; "required": false; "isSignal": true; }; "imageUploadHandler": { "alias": "imageUploadHandler"; "required": false; "isSignal": true; }; }, { "contentChange": "contentChange"; "editorCreated": "editorCreated"; "editorUpdate": "editorUpdate"; "editorFocus": "editorFocus"; "editorBlur": "editorBlur"; }, never, never, true, [{ directive: typeof NoopValueAccessorDirective; inputs: {}; outputs: {}; }]>;
 }
 
-/**
- * Clés des commandes dans l'ordre de création
- */
-declare const SLASH_COMMAND_KEYS: readonly ["heading1", "heading2", "heading3", "bulletList", "orderedList", "blockquote", "code", "image", "horizontalRule", "table"];
-/**
- * Factory function pour créer les slash commands traduits
- */
-declare function createI18nSlashCommands(i18nService: TiptapI18nService): SlashCommandItem[];
-/**
- * Fonction utilitaire pour filtrer les slash commands selon les commandes actives
- */
-declare function filterSlashCommands(activeCommands: Set<string>, i18nService: TiptapI18nService): SlashCommandItem[];
-
 type HeightConfig = {
     minHeight?: number;
     height?: number;
     maxHeight?: number;
 };
 
-export { AngularTiptapEditorComponent, DEFAULT_BUBBLE_MENU_CONFIG, DEFAULT_CELL_MENU_CONFIG, DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, DEFAULT_SLASH_COMMANDS, DEFAULT_TABLE_MENU_CONFIG, DEFAULT_TOOLBAR_CONFIG, EditorCommandsService, ImageService, NoopValueAccessorDirective, SLASH_COMMAND_KEYS, TiptapI18nService, createI18nSlashCommands, filterSlashCommands };
-export type { BubbleMenuConfig, CellBubbleMenuConfig, HeightConfig, ImageBubbleMenuConfig, ImageData, ImageUploadContext, ImageUploadHandler, ImageUploadHandlerResult, ImageUploadResult, ResizeOptions, SlashCommandItem, SlashCommandsConfig, SupportedLocale, TableBubbleMenuConfig, TiptapTranslations, ToolbarConfig };
+export { AngularTiptapEditorComponent, DEFAULT_BUBBLE_MENU_CONFIG, DEFAULT_CELL_MENU_CONFIG, DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, DEFAULT_SLASH_COMMANDS_CONFIG, DEFAULT_TABLE_MENU_CONFIG, DEFAULT_TOOLBAR_CONFIG, EditorCommandsService, ImageService, NoopValueAccessorDirective, SLASH_COMMAND_KEYS, TiptapI18nService, createDefaultSlashCommands, filterSlashCommands };
+export type { BubbleMenuConfig, CellBubbleMenuConfig, CustomSlashCommands, HeightConfig, ImageBubbleMenuConfig, ImageData, ImageUploadContext, ImageUploadHandler, ImageUploadHandlerResult, ImageUploadResult, ResizeOptions, SlashCommandItem, SlashCommandKey, SlashCommandsConfig, SupportedLocale, TableBubbleMenuConfig, TiptapTranslations, ToolbarConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flogeez/angular-tiptap-editor",
-  "version": "0.3.7",
+  "version": "0.5.0",
   "description": "A modern, customizable rich-text editor for Angular (18+), built with Tiptap and featuring complete internationalization support",
   "keywords": [
     "angular",

package/src/lib/styles/bubble-menu.global.css

@@ -2,6 +2,8 @@
 .tippy-box {
   /* Par défaut Tippy limite à 350px */
   max-width: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
 }
 
 .tippy-content {
@@ -10,32 +12,31 @@
 }
 
 .tippy-box .bubble-menu {
-  display: flex;
+  display: flex !important;
   align-items: center;
   gap: 6px;
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(12px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 16px;
+  background: var(--ate-menu-bg, rgba(255, 255, 255, 0.95)) !important;
+  backdrop-filter: blur(var(--ate-menu-blur, 12px));
+  border: 1px solid var(--ate-menu-border, rgba(0, 0, 0, 0.1));
+  border-radius: var(--ate-border-radius, 16px);
   padding: 8px 12px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--ate-menu-shadow, 0 8px 32px rgba(0, 0, 0, 0.12));
   z-index: 1000;
-  animation: slideUp 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  /* Empêcher les retours à la ligne pour des barres d'icônes */
+  animation: slideUp 0.18s cubic-bezier(0, 0, 0.2, 1);
   white-space: nowrap;
 }
 
 .bubble-menu .tiptap-separator {
   width: 1px;
   height: 28px;
-  background: linear-gradient(to bottom, transparent, #e2e8f0, transparent);
+  background: color-mix(in srgb, var(--ate-menu-border), transparent 50%);
   margin: 0 4px;
 }
 
 @keyframes slideUp {
   from {
     opacity: 0;
-    transform: translateY(8px) scale(0.95);
+    transform: translateY(6px) scale(0.98);
   }
   to {
     opacity: 1;

package/src/lib/styles/index.css

@@ -1,40 +1,40 @@
-@import "./bubble-menu.global.css";
-@import "./material-symbols.css";
-
-/* Styles pour les liens */
-.tiptap-link {
-  color: #3b82f6;
-  text-decoration: underline;
-  cursor: pointer;
-  transition: color 0.2s ease;
-}
-
-.tiptap-link:hover {
-  color: #1d4ed8;
-  text-decoration: underline;
-}
-
-/* Styles pour la surbrillance */
-.tiptap-highlight {
-  background-color: #fef08a;
-  padding: 0.1em 0.2em;
-  border-radius: 2px;
-  color: #854d0e;
-}
-
-/* Styles pour les alignements de texte - Tiptap utilise des classes */
-.ProseMirror .has-text-align-left {
-  text-align: left;
-}
-
-.ProseMirror .has-text-align-center {
-  text-align: center;
-}
-
-.ProseMirror .has-text-align-right {
-  text-align: right;
-}
-
-.ProseMirror .has-text-align-justify {
-  text-align: justify;
-}
+@import "./bubble-menu.global.css";
+@import "./material-symbols.css";
+
+/* Styles pour les liens */
+.tiptap-link {
+  color: var(--ate-primary, #1d4ed8);
+  text-decoration: underline;
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+.tiptap-link:hover {
+  color: var(--ate-primary-light-alpha, #1d4ed8);
+  text-decoration: underline;
+}
+
+/* Styles pour la surbrillance */
+.tiptap-highlight {
+  background-color: var(--ate-highlight-bg, #fef08a);
+  padding: 0.1em 0.2em;
+  border-radius: 2px;
+  color: var(--ate-highlight-color, #854d0e);
+}
+
+/* Styles pour les alignements de texte - Tiptap utilise des classes */
+.ProseMirror .has-text-align-left {
+  text-align: left;
+}
+
+.ProseMirror .has-text-align-center {
+  text-align: center;
+}
+
+.ProseMirror .has-text-align-right {
+  text-align: right;
+}
+
+.ProseMirror .has-text-align-justify {
+  text-align: justify;
+}