@flogeez/angular-tiptap-editor 0.2.7 → 0.3.2

package/index.d.ts

@@ -3,102 +3,6 @@ import * as _angular_core from '@angular/core';
 import { AfterViewInit, OnDestroy, ElementRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 
-interface SlashCommandItem {
-    title: string;
-    description: string;
-    icon: string;
-    keywords: string[];
-    command: (editor: Editor) => void;
-}
-interface SlashCommandsConfig {
-    commands?: SlashCommandItem[];
-}
-declare const DEFAULT_SLASH_COMMANDS: SlashCommandItem[];
-
-interface ImageData {
-    src: string;
-    alt?: string;
-    title?: string;
-    width?: number;
-    height?: number;
-}
-interface ImageUploadResult {
-    src: string;
-    name: string;
-    size: number;
-    type: string;
-    width?: number;
-    height?: number;
-    originalSize?: number;
-}
-interface ResizeOptions {
-    width?: number;
-    height?: number;
-    maintainAspectRatio?: boolean;
-}
-declare class ImageService {
-    selectedImage: _angular_core.WritableSignal<ImageData | null>;
-    isImageSelected: _angular_core.Signal<boolean>;
-    isResizing: _angular_core.WritableSignal<boolean>;
-    isUploading: _angular_core.WritableSignal<boolean>;
-    uploadProgress: _angular_core.WritableSignal<number>;
-    uploadMessage: _angular_core.WritableSignal<string>;
-    private currentEditor;
-    selectImage(editor: Editor): void;
-    clearSelection(): void;
-    insertImage(editor: Editor, imageData: ImageData): void;
-    updateImageAttributes(editor: Editor, attributes: Partial<ImageData>): void;
-    resizeImage(editor: Editor, options: ResizeOptions): void;
-    resizeImageByPercentage(editor: Editor, percentage: number): void;
-    resizeImageToSmall(editor: Editor): void;
-    resizeImageToMedium(editor: Editor): void;
-    resizeImageToLarge(editor: Editor): void;
-    resizeImageToOriginal(editor: Editor): void;
-    resizeImageFreely(editor: Editor, width: number, height: number): void;
-    getImageDimensions(editor: Editor): {
-        width: number;
-        height: number;
-    } | null;
-    getNaturalImageDimensions(src: string): Promise<{
-        width: number;
-        height: number;
-    }>;
-    deleteImage(editor: Editor): void;
-    private updateSelectedImage;
-    validateImage(file: File, maxSize?: number): {
-        valid: boolean;
-        error?: string;
-    };
-    compressImage(file: File, quality?: number, maxWidth?: number, maxHeight?: number): Promise<ImageUploadResult>;
-    private uploadImageWithProgress;
-    uploadAndInsertImage(editor: Editor, file: File, options?: {
-        quality?: number;
-        maxWidth?: number;
-        maxHeight?: number;
-    }): Promise<void>;
-    private forceEditorUpdate;
-    private selectFileAndProcess;
-    selectAndUploadImage(editor: Editor, options?: {
-        quality?: number;
-        maxWidth?: number;
-        maxHeight?: number;
-        accept?: string;
-    }): Promise<void>;
-    selectAndReplaceImage(editor: Editor, options?: {
-        quality?: number;
-        maxWidth?: number;
-        maxHeight?: number;
-        accept?: string;
-    }): Promise<void>;
-    uploadAndReplaceImage(editor: Editor, file: File, options?: {
-        quality?: number;
-        maxWidth?: number;
-        maxHeight?: number;
-    }): Promise<void>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ImageService, never>;
-    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ImageService>;
-}
-
 type SupportedLocale = "en" | "fr";
 interface TiptapTranslations {
     toolbar: {
@@ -123,8 +27,10 @@ interface TiptapTranslations {
         link: string;
         image: string;
         horizontalRule: string;
+        table: string;
         undo: string;
         redo: string;
+        clear: string;
     };
     bubbleMenu: {
         bold: string;
@@ -189,6 +95,24 @@ interface TiptapTranslations {
             description: string;
             keywords: string[];
         };
+        table: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+    };
+    table: {
+        addRowBefore: string;
+        addRowAfter: string;
+        deleteRow: string;
+        addColumnBefore: string;
+        addColumnAfter: string;
+        deleteColumn: string;
+        deleteTable: string;
+        toggleHeaderRow: string;
+        toggleHeaderColumn: string;
+        mergeCells: string;
+        splitCell: string;
     };
     imageUpload: {
         selectImage: string;
@@ -208,8 +132,8 @@ interface TiptapTranslations {
     };
     editor: {
         placeholder: string;
-        characters: string;
-        words: string;
+        character: string;
+        word: string;
         imageLoadError: string;
         linkPrompt: string;
         linkUrlPrompt: string;
@@ -255,8 +179,10 @@ declare class TiptapI18nService {
         link: string;
         image: string;
         horizontalRule: string;
+        table: string;
         undo: string;
         redo: string;
+        clear: string;
     }>;
     readonly bubbleMenu: _angular_core.Signal<{
         bold: string;
@@ -321,6 +247,24 @@ declare class TiptapI18nService {
             description: string;
             keywords: string[];
         };
+        table: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+    }>;
+    readonly table: _angular_core.Signal<{
+        addRowBefore: string;
+        addRowAfter: string;
+        deleteRow: string;
+        addColumnBefore: string;
+        addColumnAfter: string;
+        deleteColumn: string;
+        deleteTable: string;
+        toggleHeaderRow: string;
+        toggleHeaderColumn: string;
+        mergeCells: string;
+        splitCell: string;
     }>;
     readonly imageUpload: _angular_core.Signal<{
         selectImage: string;
@@ -340,8 +284,8 @@ declare class TiptapI18nService {
     }>;
     readonly editor: _angular_core.Signal<{
         placeholder: string;
-        characters: string;
-        words: string;
+        character: string;
+        word: string;
         imageLoadError: string;
         linkPrompt: string;
         linkUrlPrompt: string;
@@ -402,11 +346,158 @@ declare class TiptapI18nService {
         title: string;
         description: string;
         keywords: string[];
+    } | {
+        title: string;
+        description: string;
+        keywords: string[];
     };
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TiptapI18nService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<TiptapI18nService>;
 }
 
+interface CellBubbleMenuConfig$1 {
+    mergeCells?: boolean;
+    splitCell?: boolean;
+}
+
+interface SlashCommandItem {
+    title: string;
+    description: string;
+    icon: string;
+    keywords: string[];
+    command: (editor: Editor) => void;
+}
+interface SlashCommandsConfig {
+    commands?: SlashCommandItem[];
+}
+declare const DEFAULT_SLASH_COMMANDS: SlashCommandItem[];
+
+interface ImageData {
+    src: string;
+    alt?: string;
+    title?: string;
+    width?: number;
+    height?: number;
+}
+interface ImageUploadResult {
+    src: string;
+    name: string;
+    size: number;
+    type: string;
+    width?: number;
+    height?: number;
+    originalSize?: number;
+}
+interface ResizeOptions {
+    width?: number;
+    height?: number;
+    maintainAspectRatio?: boolean;
+}
+declare class ImageService {
+    selectedImage: _angular_core.WritableSignal<ImageData | null>;
+    isImageSelected: _angular_core.Signal<boolean>;
+    isResizing: _angular_core.WritableSignal<boolean>;
+    isUploading: _angular_core.WritableSignal<boolean>;
+    uploadProgress: _angular_core.WritableSignal<number>;
+    uploadMessage: _angular_core.WritableSignal<string>;
+    private currentEditor;
+    selectImage(editor: Editor): void;
+    clearSelection(): void;
+    insertImage(editor: Editor, imageData: ImageData): void;
+    updateImageAttributes(editor: Editor, attributes: Partial<ImageData>): void;
+    resizeImage(editor: Editor, options: ResizeOptions): void;
+    resizeImageByPercentage(editor: Editor, percentage: number): void;
+    resizeImageToSmall(editor: Editor): void;
+    resizeImageToMedium(editor: Editor): void;
+    resizeImageToLarge(editor: Editor): void;
+    resizeImageToOriginal(editor: Editor): void;
+    resizeImageFreely(editor: Editor, width: number, height: number): void;
+    getImageDimensions(editor: Editor): {
+        width: number;
+        height: number;
+    } | null;
+    getNaturalImageDimensions(src: string): Promise<{
+        width: number;
+        height: number;
+    }>;
+    deleteImage(editor: Editor): void;
+    private updateSelectedImage;
+    validateImage(file: File, maxSize?: number): {
+        valid: boolean;
+        error?: string;
+    };
+    compressImage(file: File, quality?: number, maxWidth?: number, maxHeight?: number): Promise<ImageUploadResult>;
+    private uploadImageWithProgress;
+    uploadAndInsertImage(editor: Editor, file: File, options?: {
+        quality?: number;
+        maxWidth?: number;
+        maxHeight?: number;
+    }): Promise<void>;
+    private forceEditorUpdate;
+    private selectFileAndProcess;
+    selectAndUploadImage(editor: Editor, options?: {
+        quality?: number;
+        maxWidth?: number;
+        maxHeight?: number;
+        accept?: string;
+    }): Promise<void>;
+    selectAndReplaceImage(editor: Editor, options?: {
+        quality?: number;
+        maxWidth?: number;
+        maxHeight?: number;
+        accept?: string;
+    }): Promise<void>;
+    uploadAndReplaceImage(editor: Editor, file: File, options?: {
+        quality?: number;
+        maxWidth?: number;
+        maxHeight?: number;
+    }): Promise<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ImageService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ImageService>;
+}
+
+declare class EditorCommandsService {
+    isActive(editor: Editor, name: string, attributes?: Record<string, any>): boolean;
+    canExecute(editor: Editor, command: string): boolean;
+    toggleBold(editor: Editor): void;
+    toggleItalic(editor: Editor): void;
+    toggleStrike(editor: Editor): void;
+    toggleCode(editor: Editor): void;
+    toggleHeading(editor: Editor, level: 1 | 2 | 3): void;
+    toggleBulletList(editor: Editor): void;
+    toggleOrderedList(editor: Editor): void;
+    toggleBlockquote(editor: Editor): void;
+    undo(editor: Editor): void;
+    redo(editor: Editor): void;
+    toggleUnderline(editor: Editor): void;
+    toggleSuperscript(editor: Editor): void;
+    toggleSubscript(editor: Editor): void;
+    setTextAlign(editor: Editor, alignment: "left" | "center" | "right" | "justify"): void;
+    toggleLink(editor: Editor, url?: string): void;
+    insertHorizontalRule(editor: Editor): void;
+    toggleHighlight(editor: Editor, color?: string): void;
+    insertTable(editor: Editor, rows?: number, cols?: number): void;
+    addColumnBefore(editor: Editor): void;
+    addColumnAfter(editor: Editor): void;
+    deleteColumn(editor: Editor): void;
+    addRowBefore(editor: Editor): void;
+    addRowAfter(editor: Editor): void;
+    deleteRow(editor: Editor): void;
+    deleteTable(editor: Editor): void;
+    mergeCells(editor: Editor): void;
+    splitCell(editor: Editor): void;
+    toggleHeaderColumn(editor: Editor): void;
+    toggleHeaderRow(editor: Editor): void;
+    toggleHeaderCell(editor: Editor): void;
+    clearContent(editor: Editor): void;
+    focus(editor: Editor): void;
+    blur(editor: Editor): void;
+    setContent(editor: Editor, content: string, emitUpdate?: boolean): void;
+    setEditable(editor: Editor, editable: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EditorCommandsService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<EditorCommandsService>;
+}
+
 interface ToolbarConfig {
     bold?: boolean;
     italic?: boolean;
@@ -429,8 +520,10 @@ interface ToolbarConfig {
     link?: boolean;
     image?: boolean;
     horizontalRule?: boolean;
+    table?: boolean;
     undo?: boolean;
     redo?: boolean;
+    clear?: boolean;
     separator?: boolean;
 }
 
@@ -455,6 +548,22 @@ interface ImageBubbleMenuConfig {
     deleteImage?: boolean;
     separator?: boolean;
 }
+interface TableBubbleMenuConfig {
+    addRowBefore?: boolean;
+    addRowAfter?: boolean;
+    deleteRow?: boolean;
+    addColumnBefore?: boolean;
+    addColumnAfter?: boolean;
+    deleteColumn?: boolean;
+    deleteTable?: boolean;
+    toggleHeaderRow?: boolean;
+    toggleHeaderColumn?: boolean;
+    separator?: boolean;
+}
+interface CellBubbleMenuConfig {
+    mergeCells?: boolean;
+    splitCell?: boolean;
+}
 
 declare class NoopValueAccessorDirective implements ControlValueAccessor {
     writeValue(obj: any): void;
@@ -467,6 +576,8 @@ declare class NoopValueAccessorDirective implements ControlValueAccessor {
 declare const DEFAULT_TOOLBAR_CONFIG: ToolbarConfig;
 declare const DEFAULT_BUBBLE_MENU_CONFIG: BubbleMenuConfig;
 declare const DEFAULT_IMAGE_BUBBLE_MENU_CONFIG: ImageBubbleMenuConfig;
+declare const DEFAULT_TABLE_MENU_CONFIG: TableBubbleMenuConfig;
+declare const DEFAULT_CELL_MENU_CONFIG: CellBubbleMenuConfig$1;
 declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     content: _angular_core.InputSignal<string>;
     placeholder: _angular_core.InputSignal<string>;
@@ -502,17 +613,35 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
         event: FocusEvent;
     }>;
     editorElement: _angular_core.Signal<ElementRef<any>>;
-    editor: _angular_core.WritableSignal<Editor | null>;
-    characterCountData: _angular_core.WritableSignal<{
-        characters: number;
-        words: number;
-    } | null>;
-    isDragOver: _angular_core.WritableSignal<boolean>;
-    editorFullyInitialized: _angular_core.WritableSignal<boolean>;
+    private _editor;
+    private _characterCount;
+    private _wordCount;
+    private _isDragOver;
+    private _editorFullyInitialized;
+    readonly editor: _angular_core.Signal<Editor | null>;
+    readonly characterCount: _angular_core.Signal<number>;
+    readonly wordCount: _angular_core.Signal<number>;
+    readonly isDragOver: _angular_core.Signal<boolean>;
+    readonly editorFullyInitialized: _angular_core.Signal<boolean>;
     isEditorReady: _angular_core.Signal<boolean>;
     toolbarConfig: _angular_core.Signal<ToolbarConfig>;
     bubbleMenuConfig: _angular_core.Signal<BubbleMenuConfig>;
     imageBubbleMenuConfig: _angular_core.Signal<ImageBubbleMenuConfig>;
+    tableBubbleMenuConfig: _angular_core.Signal<{
+        addRowBefore: boolean;
+        addRowAfter: boolean;
+        deleteRow: boolean;
+        addColumnBefore: boolean;
+        addColumnAfter: boolean;
+        deleteColumn: boolean;
+        deleteTable: boolean;
+        toggleHeaderRow: boolean;
+        toggleHeaderColumn: boolean;
+    }>;
+    cellBubbleMenuConfig: _angular_core.Signal<{
+        mergeCells: boolean;
+        splitCell: boolean;
+    }>;
     imageUploadConfig: _angular_core.Signal<{
         maxSize: number;
         maxWidth: number;
@@ -529,6 +658,7 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     private ngControl;
     readonly i18nService: TiptapI18nService;
     readonly imageService: ImageService;
+    readonly editorCommandsService: EditorCommandsService;
     constructor();
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
@@ -547,6 +677,7 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     focus(): void;
     blur(): void;
     clearContent(): void;
+    getEditor(): Editor | null;
     private setupFormControlSubscription;
     setDisabledState(isDisabled: boolean): void;
     onEditorClick(event: MouseEvent): void;
@@ -554,10 +685,19 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     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; }; "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; }; "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; }; }, { "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
+ * Utilise le service i18n injecté en interne
+ */
+declare function filterSlashCommands(activeCommands: Set<string>): SlashCommandItem[];
 
 type HeightConfig = {
     minHeight?: number;
@@ -565,5 +705,5 @@ type HeightConfig = {
     maxHeight?: number;
 };
 
-export { AngularTiptapEditorComponent, DEFAULT_BUBBLE_MENU_CONFIG, DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, DEFAULT_SLASH_COMMANDS, DEFAULT_TOOLBAR_CONFIG, NoopValueAccessorDirective, TiptapI18nService, createI18nSlashCommands };
-export type { BubbleMenuConfig, HeightConfig, ImageBubbleMenuConfig, SlashCommandItem, SlashCommandsConfig, SupportedLocale, TiptapTranslations, ToolbarConfig };
+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, ImageUploadResult, ResizeOptions, SlashCommandItem, SlashCommandsConfig, SupportedLocale, TableBubbleMenuConfig, TiptapTranslations, ToolbarConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flogeez/angular-tiptap-editor",
-  "version": "0.2.7",
+  "version": "0.3.2",
   "description": "A modern, customizable rich-text editor for Angular (18+), built with Tiptap and featuring complete internationalization support",
   "keywords": [
     "angular",
@@ -38,6 +38,11 @@
     "@tiptap/extension-text-align": "^2.0.0",
     "@tiptap/extension-link": "^2.0.0",
     "@tiptap/extension-highlight": "^2.0.0",
+    "@tiptap/extension-image": "^2.0.0",
+    "@tiptap/extension-table": "^2.0.0",
+    "@tiptap/extension-table-cell": "^2.0.0",
+    "@tiptap/extension-table-header": "^2.0.0",
+    "@tiptap/extension-table-row": "^2.0.0",
     "@intevation/tiptap-extension-office-paste": "^0.1.0",
     "tippy.js": "^6.3.7"
   },

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

@@ -1,4 +1,14 @@
 /* Styles globaux pour les menus contextuels Tiptap */
+.tippy-box {
+  /* Par défaut Tippy limite à 350px */
+  max-width: none !important;
+}
+
+.tippy-content {
+  /* Le container interne ne doit pas rajouter de padding, on gère dans .bubble-menu */
+  padding: 0;
+}
+
 .tippy-box .bubble-menu {
   display: flex;
   align-items: center;
@@ -11,6 +21,8 @@
   box-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 */
+  white-space: nowrap;
 }
 
 .bubble-menu .tiptap-separator {