@flogeez/angular-tiptap-editor 0.6.0 → 2.0.0

package/index.d.ts

@@ -5,7 +5,7 @@ import { Editor, Node, Mark, Extension, EditorOptions } from '@tiptap/core';
 import { Observable } from 'rxjs';
 import { ControlValueAccessor } from '@angular/forms';
 
-type SupportedLocale = "en" | "fr";
+type SupportedLocale = "en" | "fr" | (string & {});
 interface TiptapTranslations {
     toolbar: {
         bold: string;
@@ -13,6 +13,7 @@ interface TiptapTranslations {
         underline: string;
         strike: string;
         code: string;
+        codeBlock: string;
         superscript: string;
         subscript: string;
         highlight: string;
@@ -174,6 +175,8 @@ declare class TiptapI18nService {
     private _currentLocale;
     private _translations;
     readonly currentLocale: _angular_core.Signal<SupportedLocale>;
+    /** All loaded translations (useful for dynamic key access) */
+    readonly allTranslations: _angular_core.Signal<Record<SupportedLocale, TiptapTranslations>>;
     readonly translations: _angular_core.Signal<TiptapTranslations>;
     readonly t: _angular_core.Signal<TiptapTranslations>;
     readonly toolbar: _angular_core.Signal<{
@@ -182,6 +185,7 @@ declare class TiptapI18nService {
         underline: string;
         strike: string;
         code: string;
+        codeBlock: string;
         superscript: string;
         subscript: string;
         highlight: string;
@@ -342,7 +346,7 @@ declare class TiptapI18nService {
     setLocale(locale: SupportedLocale): void;
     autoDetectLocale(): void;
     getSupportedLocales(): SupportedLocale[];
-    addTranslations(locale: SupportedLocale, translations: Partial<TiptapTranslations>): void;
+    addTranslations(locale: string, translations: TiptapTranslations | Partial<TiptapTranslations>): void;
     private detectBrowserLanguage;
     getToolbarTitle(key: keyof TiptapTranslations["toolbar"]): string;
     getBubbleMenuTitle(key: keyof TiptapTranslations["bubbleMenu"]): string;
@@ -581,6 +585,7 @@ interface EditorStateSnapshot {
         computedColor: string | null;
         background: string | null;
         computedBackground: string | null;
+        linkOpenOnClick: boolean;
     };
     /** Capability states (canExecute) */
     can: {
@@ -616,6 +621,7 @@ interface EditorStateSnapshot {
         toggleBulletList: boolean;
         toggleOrderedList: boolean;
         toggleBlockquote: boolean;
+        toggleCodeBlock: boolean;
         setTextAlignLeft: boolean;
         setTextAlignCenter: boolean;
         setTextAlignRight: boolean;
@@ -686,6 +692,7 @@ declare class EditorCommandsService {
     toggleItalic(editor: Editor): void;
     toggleStrike(editor: Editor): void;
     toggleCode(editor: Editor): void;
+    toggleCodeBlock(editor: Editor): void;
     toggleUnderline(editor: Editor): void;
     toggleSuperscript(editor: Editor): void;
     toggleSubscript(editor: Editor): void;
@@ -776,6 +783,7 @@ interface ToolbarConfig {
     underline?: boolean;
     strike?: boolean;
     code?: boolean;
+    codeBlock?: boolean;
     superscript?: boolean;
     subscript?: boolean;
     highlight?: boolean;
@@ -853,6 +861,7 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     content: _angular_core.InputSignal<string>;
     placeholder: _angular_core.InputSignal<string>;
     editable: _angular_core.InputSignal<boolean>;
+    disabled: _angular_core.InputSignal<boolean>;
     minHeight: _angular_core.InputSignal<number>;
     height: _angular_core.InputSignal<number | undefined>;
     maxHeight: _angular_core.InputSignal<number | undefined>;
@@ -867,6 +876,8 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     customSlashCommands: _angular_core.InputSignal<CustomSlashCommands | undefined>;
     locale: _angular_core.InputSignal<SupportedLocale | undefined>;
     autofocus: _angular_core.InputSignal<number | boolean | "start" | "end" | "all">;
+    seamless: _angular_core.InputSignal<boolean>;
+    floatingToolbar: _angular_core.InputSignal<boolean>;
     tiptapExtensions: _angular_core.InputSignal<(Node<any, any> | Mark<any, any> | Extension<any, any>)[]>;
     tiptapOptions: _angular_core.InputSignal<Partial<EditorOptions>>;
     showBubbleMenu: _angular_core.InputSignal<boolean>;
@@ -874,6 +885,10 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     showImageBubbleMenu: _angular_core.InputSignal<boolean>;
     imageBubbleMenu: _angular_core.InputSignal<Partial<ImageBubbleMenuConfig>>;
     toolbar: _angular_core.InputSignal<Partial<ToolbarConfig>>;
+    showTableBubbleMenu: _angular_core.InputSignal<boolean>;
+    tableBubbleMenu: _angular_core.InputSignal<Partial<TableBubbleMenuConfig>>;
+    showCellBubbleMenu: _angular_core.InputSignal<boolean>;
+    cellBubbleMenu: _angular_core.InputSignal<Partial<CellBubbleMenuConfig>>;
     /**
      * Additionnal state calculators to extend the reactive editor state.
      */
@@ -927,25 +942,15 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     readonly wordCount: _angular_core.Signal<number>;
     readonly isDragOver: _angular_core.Signal<boolean>;
     readonly editorFullyInitialized: _angular_core.Signal<boolean>;
+    private _isFormControlDisabled;
+    readonly isFormControlDisabled: _angular_core.Signal<boolean>;
+    readonly mergedDisabled: _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;
-    }>;
+    tableBubbleMenuConfig: _angular_core.Signal<TableBubbleMenuConfig>;
+    cellBubbleMenuConfig: _angular_core.Signal<CellBubbleMenuConfig>;
     imageUploadConfig: _angular_core.Signal<{
         maxSize: number;
         maxWidth: number;
@@ -958,6 +963,7 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
         quality: number;
     }>;
     slashCommandsConfigComputed: _angular_core.Signal<CustomSlashCommands>;
+    readonly currentTranslations: _angular_core.Signal<_flogeez_angular_tiptap_editor.TiptapTranslations>;
     private _destroyRef;
     private ngControl;
     readonly i18nService: TiptapI18nService;
@@ -980,10 +986,9 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     clearContent(): void;
     getEditor(): Editor | null;
     private setupFormControlSubscription;
-    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; }; "showWordCount": { "alias": "showWordCount"; "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; }; "stateCalculators": { "alias": "stateCalculators"; "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; }; "disabled": { "alias": "disabled"; "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; }; "showWordCount": { "alias": "showWordCount"; "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; }; "seamless": { "alias": "seamless"; "required": false; "isSignal": true; }; "floatingToolbar": { "alias": "floatingToolbar"; "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; }; "showTableBubbleMenu": { "alias": "showTableBubbleMenu"; "required": false; "isSignal": true; }; "tableBubbleMenu": { "alias": "tableBubbleMenu"; "required": false; "isSignal": true; }; "showCellBubbleMenu": { "alias": "showCellBubbleMenu"; "required": false; "isSignal": true; }; "cellBubbleMenu": { "alias": "cellBubbleMenu"; "required": false; "isSignal": true; }; "stateCalculators": { "alias": "stateCalculators"; "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: {}; }]>;
 }
 
 interface ColorPickerSelection {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flogeez/angular-tiptap-editor",
-  "version": "0.6.0",
+  "version": "2.0.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

@@ -15,11 +15,10 @@
   display: flex !important;
   align-items: center;
   gap: 6px;
-  background: var(--ate-menu-bg, rgba(255, 255, 255, 0.95)) !important;
-  backdrop-filter: blur(var(--ate-menu-blur, 12px));
+  background: var(--ate-menu-bg, rgb(255, 255, 255)) !important;
   border: 1px solid var(--ate-menu-border, rgba(0, 0, 0, 0.1));
-  border-radius: var(--ate-border-radius, 16px);
-  padding: 8px 12px;
+  border-radius: var(--ate-menu-border-radius, 16px);
+  padding: var(--ate-menu-padding, 6px 12px);
   box-shadow: var(--ate-menu-shadow, 0 8px 32px rgba(0, 0, 0, 0.12));
   z-index: 1000;
   animation: slideUp 0.18s cubic-bezier(0, 0, 0.2, 1);