@flogeez/angular-tiptap-editor 0.1.0

package/index.d.ts

@@ -0,0 +1,564 @@
+import { Editor } from '@tiptap/core';
+import * as _angular_core from '@angular/core';
+import { OnInit, 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: {
+        bold: string;
+        italic: string;
+        underline: string;
+        strike: string;
+        code: string;
+        superscript: string;
+        subscript: string;
+        highlight: string;
+        heading1: string;
+        heading2: string;
+        heading3: string;
+        bulletList: string;
+        orderedList: string;
+        blockquote: string;
+        alignLeft: string;
+        alignCenter: string;
+        alignRight: string;
+        alignJustify: string;
+        link: string;
+        image: string;
+        horizontalRule: string;
+        undo: string;
+        redo: string;
+    };
+    bubbleMenu: {
+        bold: string;
+        italic: string;
+        underline: string;
+        strike: string;
+        code: string;
+        superscript: string;
+        subscript: string;
+        highlight: string;
+        link: string;
+        addLink: string;
+        editLink: string;
+        removeLink: string;
+        linkUrl: string;
+        linkText: string;
+        openLink: string;
+    };
+    slashCommands: {
+        heading1: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        heading2: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        heading3: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        bulletList: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        orderedList: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        blockquote: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        code: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        image: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        horizontalRule: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+    };
+    imageUpload: {
+        selectImage: string;
+        uploadingImage: string;
+        uploadProgress: string;
+        uploadError: string;
+        uploadSuccess: string;
+        imageTooLarge: string;
+        invalidFileType: string;
+        dragDropText: string;
+        changeImage: string;
+        deleteImage: string;
+        resizeSmall: string;
+        resizeMedium: string;
+        resizeLarge: string;
+        resizeOriginal: string;
+    };
+    editor: {
+        placeholder: string;
+        characters: string;
+        words: string;
+        imageLoadError: string;
+        linkPrompt: string;
+        linkUrlPrompt: string;
+        confirmDelete: string;
+    };
+    common: {
+        cancel: string;
+        confirm: string;
+        apply: string;
+        delete: string;
+        save: string;
+        close: string;
+        loading: string;
+        error: string;
+        success: string;
+    };
+}
+declare class TiptapI18nService {
+    private _currentLocale;
+    private _translations;
+    readonly currentLocale: _angular_core.Signal<SupportedLocale>;
+    readonly translations: _angular_core.Signal<TiptapTranslations>;
+    readonly t: _angular_core.Signal<TiptapTranslations>;
+    readonly toolbar: _angular_core.Signal<{
+        bold: string;
+        italic: string;
+        underline: string;
+        strike: string;
+        code: string;
+        superscript: string;
+        subscript: string;
+        highlight: string;
+        heading1: string;
+        heading2: string;
+        heading3: string;
+        bulletList: string;
+        orderedList: string;
+        blockquote: string;
+        alignLeft: string;
+        alignCenter: string;
+        alignRight: string;
+        alignJustify: string;
+        link: string;
+        image: string;
+        horizontalRule: string;
+        undo: string;
+        redo: string;
+    }>;
+    readonly bubbleMenu: _angular_core.Signal<{
+        bold: string;
+        italic: string;
+        underline: string;
+        strike: string;
+        code: string;
+        superscript: string;
+        subscript: string;
+        highlight: string;
+        link: string;
+        addLink: string;
+        editLink: string;
+        removeLink: string;
+        linkUrl: string;
+        linkText: string;
+        openLink: string;
+    }>;
+    readonly slashCommands: _angular_core.Signal<{
+        heading1: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        heading2: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        heading3: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        bulletList: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        orderedList: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        blockquote: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        code: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        image: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+        horizontalRule: {
+            title: string;
+            description: string;
+            keywords: string[];
+        };
+    }>;
+    readonly imageUpload: _angular_core.Signal<{
+        selectImage: string;
+        uploadingImage: string;
+        uploadProgress: string;
+        uploadError: string;
+        uploadSuccess: string;
+        imageTooLarge: string;
+        invalidFileType: string;
+        dragDropText: string;
+        changeImage: string;
+        deleteImage: string;
+        resizeSmall: string;
+        resizeMedium: string;
+        resizeLarge: string;
+        resizeOriginal: string;
+    }>;
+    readonly editor: _angular_core.Signal<{
+        placeholder: string;
+        characters: string;
+        words: string;
+        imageLoadError: string;
+        linkPrompt: string;
+        linkUrlPrompt: string;
+        confirmDelete: string;
+    }>;
+    readonly common: _angular_core.Signal<{
+        cancel: string;
+        confirm: string;
+        apply: string;
+        delete: string;
+        save: string;
+        close: string;
+        loading: string;
+        error: string;
+        success: string;
+    }>;
+    constructor();
+    setLocale(locale: SupportedLocale): void;
+    autoDetectLocale(): void;
+    getSupportedLocales(): SupportedLocale[];
+    addTranslations(locale: SupportedLocale, translations: Partial<TiptapTranslations>): void;
+    private detectBrowserLanguage;
+    getToolbarTitle(key: keyof TiptapTranslations["toolbar"]): string;
+    getBubbleMenuTitle(key: keyof TiptapTranslations["bubbleMenu"]): string;
+    getSlashCommand(key: keyof TiptapTranslations["slashCommands"]): {
+        title: string;
+        description: string;
+        keywords: string[];
+    } | {
+        title: string;
+        description: string;
+        keywords: string[];
+    } | {
+        title: string;
+        description: string;
+        keywords: string[];
+    } | {
+        title: string;
+        description: string;
+        keywords: string[];
+    } | {
+        title: string;
+        description: string;
+        keywords: string[];
+    } | {
+        title: string;
+        description: string;
+        keywords: string[];
+    } | {
+        title: string;
+        description: string;
+        keywords: string[];
+    } | {
+        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 ToolbarConfig {
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    strike?: boolean;
+    code?: boolean;
+    superscript?: boolean;
+    subscript?: boolean;
+    highlight?: boolean;
+    heading1?: boolean;
+    heading2?: boolean;
+    heading3?: boolean;
+    bulletList?: boolean;
+    orderedList?: boolean;
+    blockquote?: boolean;
+    alignLeft?: boolean;
+    alignCenter?: boolean;
+    alignRight?: boolean;
+    alignJustify?: boolean;
+    link?: boolean;
+    image?: boolean;
+    horizontalRule?: boolean;
+    undo?: boolean;
+    redo?: boolean;
+    separator?: boolean;
+}
+
+interface BubbleMenuConfig {
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    strike?: boolean;
+    code?: boolean;
+    superscript?: boolean;
+    subscript?: boolean;
+    highlight?: boolean;
+    link?: boolean;
+    separator?: boolean;
+}
+interface ImageBubbleMenuConfig {
+    changeImage?: boolean;
+    resizeSmall?: boolean;
+    resizeMedium?: boolean;
+    resizeLarge?: boolean;
+    resizeOriginal?: boolean;
+    deleteImage?: boolean;
+    separator?: boolean;
+}
+
+declare const DEFAULT_TOOLBAR_CONFIG: ToolbarConfig;
+declare const DEFAULT_BUBBLE_MENU_CONFIG: BubbleMenuConfig;
+declare const DEFAULT_IMAGE_BUBBLE_MENU_CONFIG: ImageBubbleMenuConfig;
+declare class AngularTiptapEditorComponent implements OnInit, AfterViewInit, OnDestroy, ControlValueAccessor {
+    private imageService;
+    content: _angular_core.InputSignal<string>;
+    placeholder: _angular_core.InputSignal<string>;
+    editable: _angular_core.InputSignal<boolean>;
+    minHeight: _angular_core.InputSignal<number>;
+    height: _angular_core.InputSignal<number | undefined>;
+    maxHeight: _angular_core.InputSignal<number | undefined>;
+    showToolbar: _angular_core.InputSignal<boolean>;
+    showCharacterCount: _angular_core.InputSignal<boolean>;
+    maxCharacters: _angular_core.InputSignal<number | undefined>;
+    enableOfficePaste: _angular_core.InputSignal<boolean>;
+    enableSlashCommands: _angular_core.InputSignal<boolean>;
+    slashCommandsConfig: _angular_core.InputSignal<SlashCommandsConfig | undefined>;
+    locale: _angular_core.InputSignal<SupportedLocale | undefined>;
+    showBubbleMenu: _angular_core.InputSignal<boolean>;
+    bubbleMenu: _angular_core.InputSignal<Partial<BubbleMenuConfig>>;
+    showImageBubbleMenu: _angular_core.InputSignal<boolean>;
+    imageBubbleMenu: _angular_core.InputSignal<Partial<ImageBubbleMenuConfig>>;
+    toolbar: _angular_core.InputSignal<Partial<ToolbarConfig>>;
+    imageUpload: _angular_core.InputSignal<Partial<any>>;
+    contentChange: _angular_core.OutputEmitterRef<string>;
+    editorCreated: _angular_core.OutputEmitterRef<Editor>;
+    editorUpdate: _angular_core.OutputEmitterRef<{
+        editor: Editor;
+        transaction: any;
+    }>;
+    editorFocus: _angular_core.OutputEmitterRef<{
+        editor: Editor;
+        event: FocusEvent;
+    }>;
+    editorBlur: _angular_core.OutputEmitterRef<{
+        editor: Editor;
+        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>;
+    isEditorReady: _angular_core.Signal<boolean>;
+    toolbarConfig: _angular_core.Signal<ToolbarConfig>;
+    bubbleMenuConfig: _angular_core.Signal<BubbleMenuConfig>;
+    imageBubbleMenuConfig: _angular_core.Signal<ImageBubbleMenuConfig>;
+    imageUploadConfig: _angular_core.Signal<{
+        maxSize: number;
+        maxWidth: number;
+        maxHeight: number;
+        allowedTypes: string[];
+        enableDragDrop: boolean;
+        showPreview: boolean;
+        multiple: boolean;
+        compressImages: boolean;
+        quality: number;
+    }>;
+    slashCommandsConfigComputed: _angular_core.Signal<SlashCommandsConfig>;
+    private onChange;
+    private onTouched;
+    readonly i18nService: TiptapI18nService;
+    constructor(imageService: ImageService);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    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;
+    private insertImageFromFile;
+    getHTML(): string;
+    getJSON(): any;
+    getText(): string;
+    setContent(content: string, emitUpdate?: boolean): void;
+    focus(): void;
+    blur(): void;
+    clearContent(): void;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    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; }; "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, never>;
+}
+
+/**
+ * Factory function pour créer les slash commands traduits
+ */
+declare function createI18nSlashCommands(i18nService: TiptapI18nService): SlashCommandItem[];
+
+type HeightConfig = {
+    minHeight?: number;
+    height?: number;
+    maxHeight?: number;
+};
+
+export { AngularTiptapEditorComponent, DEFAULT_BUBBLE_MENU_CONFIG, DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, DEFAULT_SLASH_COMMANDS, DEFAULT_TOOLBAR_CONFIG, TiptapI18nService, createI18nSlashCommands };
+export type { BubbleMenuConfig, HeightConfig, ImageBubbleMenuConfig, SlashCommandItem, SlashCommandsConfig, SupportedLocale, TiptapTranslations, ToolbarConfig };

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@flogeez/angular-tiptap-editor",
+  "version": "0.1.0",
+  "description": "A modern, customizable rich-text editor for Angular (19+), built with Tiptap and featuring complete internationalization support",
+  "keywords": [
+    "angular",
+    "tiptap",
+    "editor",
+    "rich-text",
+    "wysiwyg",
+    "typescript",
+    "i18n",
+    "internationalization"
+  ],
+  "author": "FloGeez",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/FloGeez/angular-tiptap-editor.git"
+  },
+  "bugs": {
+    "url": "https://github.com/FloGeez/angular-tiptap-editor/issues"
+  },
+  "homepage": "https://flogeez.github.io/angular-tiptap-editor/",
+  "peerDependencies": {
+    "@angular/common": ">=19.0.0",
+    "@angular/core": ">=19.0.0",
+    "@angular/forms": ">=19.0.0",
+    "@tiptap/core": "^2.0.0",
+    "@tiptap/starter-kit": "^2.0.0",
+    "@tiptap/extension-placeholder": "^2.0.0",
+    "@tiptap/extension-character-count": "^2.0.0",
+    "@tiptap/extension-bubble-menu": "^2.0.0",
+    "@tiptap/extension-underline": "^2.0.0",
+    "@tiptap/extension-superscript": "^2.0.0",
+    "@tiptap/extension-subscript": "^2.0.0",
+    "@tiptap/extension-text-align": "^2.0.0",
+    "@tiptap/extension-link": "^2.0.0",
+    "@tiptap/extension-highlight": "^2.0.0",
+    "@intevation/tiptap-extension-office-paste": "^0.1.0",
+    "tippy.js": "^6.3.7"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/flogeez-angular-tiptap-editor.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/flogeez-angular-tiptap-editor.mjs"
+    }
+  }
+}

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

@@ -0,0 +1,32 @@
+/* Styles globaux pour les menus contextuels Tiptap */
+.tippy-box .bubble-menu {
+  display: flex;
+  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;
+  padding: 8px 12px;
+  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);
+}
+
+.bubble-menu .tiptap-separator {
+  width: 1px;
+  height: 28px;
+  background: linear-gradient(to bottom, transparent, #e2e8f0, transparent);
+  margin: 0 4px;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}

package/src/lib/styles/index.css

@@ -0,0 +1,53 @@
+@import "./bubble-menu.global.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-editor p[style*="text-align: center"] {
+  text-align: center;
+}
+
+.tiptap-editor p[style*="text-align: right"] {
+  text-align: right;
+}
+
+.tiptap-editor p[style*="text-align: justify"] {
+  text-align: justify;
+}
+
+.tiptap-editor h1[style*="text-align: center"],
+.tiptap-editor h2[style*="text-align: center"],
+.tiptap-editor h3[style*="text-align: center"] {
+  text-align: center;
+}
+
+.tiptap-editor h1[style*="text-align: right"],
+.tiptap-editor h2[style*="text-align: right"],
+.tiptap-editor h3[style*="text-align: right"] {
+  text-align: right;
+}
+
+.tiptap-editor h1[style*="text-align: justify"],
+.tiptap-editor h2[style*="text-align: justify"],
+.tiptap-editor h3[style*="text-align: justify"] {
+  text-align: justify;
+}