@flogeez/angular-tiptap-editor 0.2.6 → 0.3.1

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,116 @@ 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>;
+}
+
 interface ToolbarConfig {
     bold?: boolean;
     italic?: boolean;
@@ -429,8 +478,10 @@ interface ToolbarConfig {
     link?: boolean;
     image?: boolean;
     horizontalRule?: boolean;
+    table?: boolean;
     undo?: boolean;
     redo?: boolean;
+    clear?: boolean;
     separator?: boolean;
 }
 
@@ -455,6 +506,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 +534,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>;
@@ -503,16 +572,29 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     }>;
     editorElement: _angular_core.Signal<ElementRef<any>>;
     editor: _angular_core.WritableSignal<Editor | null>;
-    characterCountData: _angular_core.WritableSignal<{
-        characters: number;
-        words: number;
-    } | null>;
+    characterCount: _angular_core.WritableSignal<number>;
+    wordCount: _angular_core.WritableSignal<number>;
     isDragOver: _angular_core.WritableSignal<boolean>;
     editorFullyInitialized: _angular_core.WritableSignal<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;
@@ -547,8 +629,6 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     focus(): void;
     blur(): void;
     clearContent(): void;
-    private normalizeHTML;
-    private checkInitialFormValue;
     private setupFormControlSubscription;
     setDisabledState(isDisabled: boolean): void;
     onEditorClick(event: MouseEvent): void;
@@ -567,5 +647,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, NoopValueAccessorDirective, TiptapI18nService, createI18nSlashCommands };
+export type { BubbleMenuConfig, CellBubbleMenuConfig, HeightConfig, ImageBubbleMenuConfig, SlashCommandItem, SlashCommandsConfig, SupportedLocale, TableBubbleMenuConfig, TiptapTranslations, ToolbarConfig };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@flogeez/angular-tiptap-editor",
-  "version": "0.2.6",
-  "description": "A modern, customizable rich-text editor for Angular (19+), built with Tiptap and featuring complete internationalization support",
+  "version": "0.3.1",
+  "description": "A modern, customizable rich-text editor for Angular (18+), built with Tiptap and featuring complete internationalization support",
   "keywords": [
     "angular",
     "tiptap",
@@ -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 {