@flogeez/angular-tiptap-editor 2.4.0 → 3.0.0

package/CHANGELOG.md

@@ -5,6 +5,22 @@ All notable changes to `@flogeez/angular-tiptap-editor` will be documented in th
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html), with the exception that the major version is specifically aligned with the major version of [Tiptap](https://tiptap.dev).
 
+## [3.0.0] - 2026-02-05
+
+### Changed
+
+- **Upgrade to Tiptap v3**: Full migration from Tiptap v2 to v3, aligning with the latest stable ecosystem.
+- **Consolidated Dependencies**: Transitioned to the unified `@tiptap/extensions` package instead of individual packages, simplifying dependency management and improving performance.
+- **Refined Configuration Hierarchy**: Implemented a more intuitive configuration cascade: **Component Inputs > [config] Object > Global Configuration > Defaults**. Direct inputs now have absolute priority for better DX.
+- **Flexible Height Types**: `height`, `minHeight`, and `maxHeight` inputs now accept both `number` (pixels) and `string` (CSS values like '80vh') interchangeably.
+
+### Breaking Changes
+
+- **Peer Dependencies**: The library now requires `@tiptap/core`, `@tiptap/pm`, and associated extensions to be at version `^3.0.0`.
+- **Input Defaults**: All optional component inputs (except `content`) now default to `undefined` to allow proper inheritance from global or instance-level configurations.
+- **Removal of Deprecated Aliases**: Definitive removal of legacy exported names (without the `Ate` prefix) that were deprecated in v2.2.0.
+- **Office Paste**: Updated `@intevation/tiptap-extension-office-paste` to `^0.1.2` for Tiptap v3 compatibility.
+
 ## [2.4.0] - 2026-01-29
 
 ### Added

package/README.md

@@ -1,5 +1,8 @@
 # Angular Tiptap Editor
 
+> [!IMPORTANT]
+> **New Version Available**: v3.0.0 uses Tiptap v3. If you need to stay on Tiptap v2, please use version `^2.4.0`.
+
 A modern, customizable rich-text editor for Angular, built with Tiptap.
 
 [![NPM Version](https://img.shields.io/npm/v/@flogeez/angular-tiptap-editor?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@flogeez/angular-tiptap-editor) [![Demo](https://img.shields.io/badge/Demo-Live-brightgreen?style=for-the-badge&logo=google-chrome)](https://flogeez.github.io/angular-tiptap-editor/) [![Try it on StackBlitz](https://img.shields.io/badge/Try%20it-StackBlitz-blue?style=for-the-badge&logo=stackblitz)](https://stackblitz.com/edit/angular-tiptap-editor)

package/fesm2022/flogeez-angular-tiptap-editor.mjs

@@ -3,23 +3,19 @@ import { input, output, ChangeDetectionStrategy, Component, signal, computed, In
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Node as Node$1, nodeInputRule, mergeAttributes, Extension, getAttributes, Editor } from '@tiptap/core';
 import StarterKit from '@tiptap/starter-kit';
-import Placeholder from '@tiptap/extension-placeholder';
-import CharacterCount from '@tiptap/extension-character-count';
-import Underline from '@tiptap/extension-underline';
-import Superscript from '@tiptap/extension-superscript';
-import Subscript from '@tiptap/extension-subscript';
-import TextAlign from '@tiptap/extension-text-align';
-import Link from '@tiptap/extension-link';
-import Highlight from '@tiptap/extension-highlight';
-import TextStyle from '@tiptap/extension-text-style';
-import Color from '@tiptap/extension-color';
+import { Placeholder, CharacterCount } from '@tiptap/extensions';
+import { Underline } from '@tiptap/extension-underline';
+import { Superscript } from '@tiptap/extension-superscript';
+import { Subscript } from '@tiptap/extension-subscript';
+import { TextAlign } from '@tiptap/extension-text-align';
+import { Link } from '@tiptap/extension-link';
+import { Highlight } from '@tiptap/extension-highlight';
+import { TextStyle } from '@tiptap/extension-text-style';
+import { Color } from '@tiptap/extension-color';
 import OfficePaste from '@intevation/tiptap-extension-office-paste';
 import { Plugin, PluginKey, TextSelection, NodeSelection } from '@tiptap/pm/state';
 import { DecorationSet, Decoration } from '@tiptap/pm/view';
-import Table from '@tiptap/extension-table';
-import TableRow from '@tiptap/extension-table-row';
-import TableCell from '@tiptap/extension-table-cell';
-import TableHeader from '@tiptap/extension-table-header';
+import { Table, TableRow, TableHeader, TableCell } from '@tiptap/extension-table';
 import { isObservable, firstValueFrom, Subscription, concat, defer, of, tap } from 'rxjs';
 import { CommonModule } from '@angular/common';
 import tippy, { sticky } from 'tippy.js';
@@ -1679,7 +1675,8 @@ class AteColorPickerService {
         let trigger;
         if (event && typeof event !== "string") {
             const target = event.target;
-            trigger = event.currentTarget || target?.closest("button") || target;
+            trigger =
+                event.currentTarget || target?.closest("button") || target;
         }
         this.open(mode, trigger);
     }
@@ -1883,7 +1880,9 @@ class AteLinkService {
         if (urlOrEvent && typeof urlOrEvent !== "string") {
             const target = urlOrEvent.target;
             trigger =
-                urlOrEvent.currentTarget || target?.closest("button") || target;
+                urlOrEvent.currentTarget ||
+                    target?.closest("button") ||
+                    target;
         }
         // Open the edit menu
         this.open(trigger);
@@ -2375,7 +2374,7 @@ class AteEditorCommandsService {
         if (!editor) {
             return;
         }
-        editor.commands.setContent(content, emitUpdate);
+        editor.commands.setContent(content, { emitUpdate });
     }
     setEditable(editor, editable) {
         if (!editor) {
@@ -3138,7 +3137,7 @@ class AteBaseBubbleMenu {
             content: this.menuRef().nativeElement,
             trigger: "manual",
             placement: "top-start",
-            appendTo: () => (ed ? ed.options.element : document.body),
+            appendTo: () => ed?.options?.element || document.body,
             interactive: true,
             hideOnClick: false,
             arrow: false,
@@ -3151,7 +3150,7 @@ class AteBaseBubbleMenu {
                     {
                         name: "preventOverflow",
                         options: {
-                            boundary: this.editor().options.element,
+                            boundary: this.editor().options.element || document.body,
                             padding: 8,
                         },
                     },
@@ -3808,7 +3807,9 @@ class AteTableBubbleMenuComponent extends AteBaseBubbleMenu {
             // 1. Direct ProseMirror approach: get DOM node at position
             const dom = ed.view.domAtPos(from).node;
             // Find closest table element
-            const tableElement = dom instanceof HTMLElement ? dom.closest("table") : dom.parentElement?.closest("table");
+            const tableElement = dom instanceof HTMLElement
+                ? dom.closest("table")
+                : dom.parentElement?.closest("table");
             if (tableElement) {
                 return tableElement.getBoundingClientRect();
             }
@@ -4209,7 +4210,7 @@ class AteBaseSubBubbleMenu {
             content: this.menuRef().nativeElement,
             trigger: "manual",
             placement: "bottom-start",
-            appendTo: () => ed.options.element,
+            appendTo: () => ed?.options?.element || document.body,
             interactive: true,
             arrow: false,
             offset: [0, 8],
@@ -4221,7 +4222,10 @@ class AteBaseSubBubbleMenu {
                 modifiers: [
                     {
                         name: "preventOverflow",
-                        options: { boundary: ed.options.element, padding: 8 },
+                        options: {
+                            boundary: ed?.options?.element || document.body,
+                            padding: 8,
+                        },
                     },
                     {
                         name: "flip",
@@ -5134,7 +5138,7 @@ class AteSlashCommandsComponent {
                     {
                         name: "preventOverflow",
                         options: {
-                            boundary: this.editor().options.element,
+                            boundary: this.editor().options.element || document.body,
                             padding: 8,
                         },
                     },
@@ -6180,6 +6184,48 @@ const ATE_DEFAULT_CELL_MENU_CONFIG = {
     mergeCells: true,
     splitCell: true,
 };
+/**
+ * Ultimate default configuration for the Angular Tiptap Editor.
+ * This serves as the 'Level 4' fallback in the configuration hierarchy:
+ * 1. Component Inputs (Le Roi)
+ * 2. Component [config] (Le Prince)
+ * 3. Global provideAteEditor() (Le Duc)
+ * 4. ATE_DEFAULT_CONFIG (Le Peuple)
+ */
+const ATE_DEFAULT_CONFIG = {
+    theme: "auto",
+    mode: "classic",
+    height: "auto",
+    minHeight: "200px",
+    maxHeight: "none",
+    fillContainer: false,
+    autofocus: false,
+    editable: true,
+    disabled: false,
+    spellcheck: true,
+    enableOfficePaste: true,
+    showToolbar: true,
+    showFooter: true,
+    showCharacterCount: true,
+    showWordCount: true,
+    showEditToggle: false,
+    showBubbleMenu: true,
+    showImageBubbleMenu: true,
+    showTableMenu: true,
+    showCellMenu: true,
+    enableSlashCommands: true,
+    floatingToolbar: false,
+    toolbar: ATE_DEFAULT_TOOLBAR_CONFIG,
+    bubbleMenu: ATE_DEFAULT_BUBBLE_MENU_CONFIG,
+    imageBubbleMenu: ATE_DEFAULT_IMAGE_BUBBLE_MENU_CONFIG,
+    tableBubbleMenu: ATE_DEFAULT_TABLE_MENU_CONFIG,
+    cellBubbleMenu: ATE_DEFAULT_CELL_MENU_CONFIG,
+    slashCommands: {},
+    tiptapExtensions: [],
+    tiptapOptions: {},
+    stateCalculators: [],
+    angularNodes: [],
+};
 
 // Slash commands configuration is handled dynamically via slashCommandsConfigComputed
 /**
@@ -6204,48 +6250,48 @@ class AngularTiptapEditorComponent {
         /** Configuration globale de l'éditeur */
         this.config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
         this.content = input("", ...(ngDevMode ? [{ debugName: "content" }] : []));
-        this.placeholder = input("", ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
-        this.editable = input(true, ...(ngDevMode ? [{ debugName: "editable" }] : []));
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-        this.minHeight = input(200, ...(ngDevMode ? [{ debugName: "minHeight" }] : []));
+        this.placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+        this.editable = input(undefined, ...(ngDevMode ? [{ debugName: "editable" }] : []));
+        this.disabled = input(undefined, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.minHeight = input(undefined, ...(ngDevMode ? [{ debugName: "minHeight" }] : []));
         this.height = input(undefined, ...(ngDevMode ? [{ debugName: "height" }] : []));
         this.maxHeight = input(undefined, ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
-        this.fillContainer = input(false, ...(ngDevMode ? [{ debugName: "fillContainer" }] : []));
-        this.showToolbar = input(true, ...(ngDevMode ? [{ debugName: "showToolbar" }] : []));
-        this.showFooter = input(true, ...(ngDevMode ? [{ debugName: "showFooter" }] : []));
-        this.showCharacterCount = input(true, ...(ngDevMode ? [{ debugName: "showCharacterCount" }] : []));
-        this.showWordCount = input(true, ...(ngDevMode ? [{ debugName: "showWordCount" }] : []));
+        this.fillContainer = input(undefined, ...(ngDevMode ? [{ debugName: "fillContainer" }] : []));
+        this.showToolbar = input(undefined, ...(ngDevMode ? [{ debugName: "showToolbar" }] : []));
+        this.showFooter = input(undefined, ...(ngDevMode ? [{ debugName: "showFooter" }] : []));
+        this.showCharacterCount = input(undefined, ...(ngDevMode ? [{ debugName: "showCharacterCount" }] : []));
+        this.showWordCount = input(undefined, ...(ngDevMode ? [{ debugName: "showWordCount" }] : []));
         this.maxCharacters = input(undefined, ...(ngDevMode ? [{ debugName: "maxCharacters" }] : []));
-        this.enableOfficePaste = input(true, ...(ngDevMode ? [{ debugName: "enableOfficePaste" }] : []));
-        this.enableSlashCommands = input(true, ...(ngDevMode ? [{ debugName: "enableSlashCommands" }] : []));
-        this.slashCommands = input({}, ...(ngDevMode ? [{ debugName: "slashCommands" }] : []));
+        this.enableOfficePaste = input(undefined, ...(ngDevMode ? [{ debugName: "enableOfficePaste" }] : []));
+        this.enableSlashCommands = input(undefined, ...(ngDevMode ? [{ debugName: "enableSlashCommands" }] : []));
+        this.slashCommands = input(undefined, ...(ngDevMode ? [{ debugName: "slashCommands" }] : []));
         this.customSlashCommands = input(undefined, ...(ngDevMode ? [{ debugName: "customSlashCommands" }] : []));
         this.locale = input(undefined, ...(ngDevMode ? [{ debugName: "locale" }] : []));
-        this.autofocus = input(false, ...(ngDevMode ? [{ debugName: "autofocus" }] : []));
-        this.seamless = input(false, ...(ngDevMode ? [{ debugName: "seamless" }] : []));
-        this.floatingToolbar = input(false, ...(ngDevMode ? [{ debugName: "floatingToolbar" }] : []));
-        this.showEditToggle = input(false, ...(ngDevMode ? [{ debugName: "showEditToggle" }] : []));
-        this.spellcheck = input(true, ...(ngDevMode ? [{ debugName: "spellcheck" }] : []));
-        this.tiptapExtensions = input([], ...(ngDevMode ? [{ debugName: "tiptapExtensions" }] : []));
-        this.tiptapOptions = input({}, ...(ngDevMode ? [{ debugName: "tiptapOptions" }] : []));
+        this.autofocus = input(undefined, ...(ngDevMode ? [{ debugName: "autofocus" }] : []));
+        this.seamless = input(undefined, ...(ngDevMode ? [{ debugName: "seamless" }] : []));
+        this.floatingToolbar = input(undefined, ...(ngDevMode ? [{ debugName: "floatingToolbar" }] : []));
+        this.showEditToggle = input(undefined, ...(ngDevMode ? [{ debugName: "showEditToggle" }] : []));
+        this.spellcheck = input(undefined, ...(ngDevMode ? [{ debugName: "spellcheck" }] : []));
+        this.tiptapExtensions = input(undefined, ...(ngDevMode ? [{ debugName: "tiptapExtensions" }] : []));
+        this.tiptapOptions = input(undefined, ...(ngDevMode ? [{ debugName: "tiptapOptions" }] : []));
         // Nouveaux inputs pour les bubble menus
-        this.showBubbleMenu = input(true, ...(ngDevMode ? [{ debugName: "showBubbleMenu" }] : []));
-        this.bubbleMenu = input(ATE_DEFAULT_BUBBLE_MENU_CONFIG, ...(ngDevMode ? [{ debugName: "bubbleMenu" }] : []));
-        this.showImageBubbleMenu = input(true, ...(ngDevMode ? [{ debugName: "showImageBubbleMenu" }] : []));
-        this.imageBubbleMenu = input(ATE_DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, ...(ngDevMode ? [{ debugName: "imageBubbleMenu" }] : []));
+        this.showBubbleMenu = input(undefined, ...(ngDevMode ? [{ debugName: "showBubbleMenu" }] : []));
+        this.bubbleMenu = input(undefined, ...(ngDevMode ? [{ debugName: "bubbleMenu" }] : []));
+        this.showImageBubbleMenu = input(undefined, ...(ngDevMode ? [{ debugName: "showImageBubbleMenu" }] : []));
+        this.imageBubbleMenu = input(undefined, ...(ngDevMode ? [{ debugName: "imageBubbleMenu" }] : []));
         // Configuration de la toolbar
-        this.toolbar = input({}, ...(ngDevMode ? [{ debugName: "toolbar" }] : []));
+        this.toolbar = input(undefined, ...(ngDevMode ? [{ debugName: "toolbar" }] : []));
         // Configuration des menus de table
-        this.showTableBubbleMenu = input(true, ...(ngDevMode ? [{ debugName: "showTableBubbleMenu" }] : []));
-        this.tableBubbleMenu = input(ATE_DEFAULT_TABLE_MENU_CONFIG, ...(ngDevMode ? [{ debugName: "tableBubbleMenu" }] : []));
-        this.showCellBubbleMenu = input(true, ...(ngDevMode ? [{ debugName: "showCellBubbleMenu" }] : []));
-        this.cellBubbleMenu = input(ATE_DEFAULT_CELL_MENU_CONFIG, ...(ngDevMode ? [{ debugName: "cellBubbleMenu" }] : []));
+        this.showTableBubbleMenu = input(undefined, ...(ngDevMode ? [{ debugName: "showTableBubbleMenu" }] : []));
+        this.tableBubbleMenu = input(undefined, ...(ngDevMode ? [{ debugName: "tableBubbleMenu" }] : []));
+        this.showCellBubbleMenu = input(undefined, ...(ngDevMode ? [{ debugName: "showCellBubbleMenu" }] : []));
+        this.cellBubbleMenu = input(undefined, ...(ngDevMode ? [{ debugName: "cellBubbleMenu" }] : []));
         /**
          * Additionnal state calculators to extend the reactive editor state.
          */
-        this.stateCalculators = input([], ...(ngDevMode ? [{ debugName: "stateCalculators" }] : []));
+        this.stateCalculators = input(undefined, ...(ngDevMode ? [{ debugName: "stateCalculators" }] : []));
         // Nouveau input pour la configuration de l'upload d'images
-        this.imageUpload = input({}, ...(ngDevMode ? [{ debugName: "imageUpload" }] : []));
+        this.imageUpload = input(undefined, ...(ngDevMode ? [{ debugName: "imageUpload" }] : []));
         /**
          * Custom handler for image uploads.
          * When provided, images will be processed through this handler instead of being converted to base64.
@@ -6292,7 +6338,7 @@ class AngularTiptapEditorComponent {
         this._isFormControlDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_isFormControlDisabled" }] : []));
         this.isFormControlDisabled = this._isFormControlDisabled.asReadonly();
         // Combined disabled state (Input + FormControl)
-        this.mergedDisabled = computed(() => (this.effectiveConfig().disabled ?? this.disabled()) || this.isFormControlDisabled(), ...(ngDevMode ? [{ debugName: "mergedDisabled" }] : []));
+        this.mergedDisabled = computed(() => (this.disabled() ?? this.effectiveConfig().disabled) || this.isFormControlDisabled(), ...(ngDevMode ? [{ debugName: "mergedDisabled" }] : []));
         // Computed for editor states
         this.isEditorReady = computed(() => this.editor() !== null, ...(ngDevMode ? [{ debugName: "isEditorReady" }] : []));
         // ============================================
@@ -6300,109 +6346,132 @@ class AngularTiptapEditorComponent {
         // ============================================
         // Appearance & Fundamentals
         this.finalSeamless = computed(() => {
+            const inputVal = this.seamless();
+            if (inputVal !== undefined)
+                return inputVal;
             const fromConfig = this.effectiveConfig().mode;
-            if (fromConfig !== undefined) {
-                return fromConfig === "seamless";
-            }
-            return this.seamless();
+            return fromConfig === "seamless";
         }, ...(ngDevMode ? [{ debugName: "finalSeamless" }] : []));
-        this.finalEditable = computed(() => this.effectiveConfig().editable ?? this.editable(), ...(ngDevMode ? [{ debugName: "finalEditable" }] : []));
-        this.finalPlaceholder = computed(() => this.effectiveConfig().placeholder ??
-            (this.placeholder() || this.currentTranslations().editor.placeholder), ...(ngDevMode ? [{ debugName: "finalPlaceholder" }] : []));
-        this.finalFillContainer = computed(() => this.effectiveConfig().fillContainer ?? this.fillContainer(), ...(ngDevMode ? [{ debugName: "finalFillContainer" }] : []));
-        this.finalShowFooter = computed(() => this.effectiveConfig().showFooter ?? this.showFooter(), ...(ngDevMode ? [{ debugName: "finalShowFooter" }] : []));
-        this.finalShowEditToggle = computed(() => this.effectiveConfig().showEditToggle ?? this.showEditToggle(), ...(ngDevMode ? [{ debugName: "finalShowEditToggle" }] : []));
-        this.finalHeight = computed(() => this.effectiveConfig().height ?? (this.height() ? `${this.height()}px` : undefined), ...(ngDevMode ? [{ debugName: "finalHeight" }] : []));
-        this.finalMinHeight = computed(() => this.effectiveConfig().minHeight ?? (this.minHeight() ? `${this.minHeight()}px` : undefined), ...(ngDevMode ? [{ debugName: "finalMinHeight" }] : []));
-        this.finalMaxHeight = computed(() => this.effectiveConfig().maxHeight ?? (this.maxHeight() ? `${this.maxHeight()}px` : undefined), ...(ngDevMode ? [{ debugName: "finalMaxHeight" }] : []));
-        this.finalSpellcheck = computed(() => this.effectiveConfig().spellcheck ?? this.spellcheck(), ...(ngDevMode ? [{ debugName: "finalSpellcheck" }] : []));
-        this.finalEnableOfficePaste = computed(() => this.effectiveConfig().enableOfficePaste ?? this.enableOfficePaste(), ...(ngDevMode ? [{ debugName: "finalEnableOfficePaste" }] : []));
+        this.finalEditable = computed(() => this.editable() ?? this.effectiveConfig().editable, ...(ngDevMode ? [{ debugName: "finalEditable" }] : []));
+        this.finalPlaceholder = computed(() => this.placeholder() ??
+            this.effectiveConfig().placeholder ??
+            this.currentTranslations().editor.placeholder, ...(ngDevMode ? [{ debugName: "finalPlaceholder" }] : []));
+        this.finalFillContainer = computed(() => this.fillContainer() ?? this.effectiveConfig().fillContainer, ...(ngDevMode ? [{ debugName: "finalFillContainer" }] : []));
+        this.finalShowFooter = computed(() => this.showFooter() ?? this.effectiveConfig().showFooter, ...(ngDevMode ? [{ debugName: "finalShowFooter" }] : []));
+        this.finalShowEditToggle = computed(() => this.showEditToggle() ?? this.effectiveConfig().showEditToggle, ...(ngDevMode ? [{ debugName: "finalShowEditToggle" }] : []));
+        this.finalHeight = computed(() => {
+            const h = this.height() ?? this.effectiveConfig().height;
+            return typeof h === "number" ? `${h}px` : h;
+        }, ...(ngDevMode ? [{ debugName: "finalHeight" }] : []));
+        this.finalMinHeight = computed(() => {
+            const mh = this.minHeight() ?? this.effectiveConfig().minHeight;
+            return typeof mh === "number" ? `${mh}px` : mh;
+        }, ...(ngDevMode ? [{ debugName: "finalMinHeight" }] : []));
+        this.finalMaxHeight = computed(() => {
+            const mh = this.maxHeight() ?? this.effectiveConfig().maxHeight;
+            return typeof mh === "number" ? `${mh}px` : mh;
+        }, ...(ngDevMode ? [{ debugName: "finalMaxHeight" }] : []));
+        this.finalSpellcheck = computed(() => this.spellcheck() ?? this.effectiveConfig().spellcheck, ...(ngDevMode ? [{ debugName: "finalSpellcheck" }] : []));
+        this.finalEnableOfficePaste = computed(() => this.enableOfficePaste() ?? this.effectiveConfig().enableOfficePaste, ...(ngDevMode ? [{ debugName: "finalEnableOfficePaste" }] : []));
         // Features
-        this.finalShowToolbar = computed(() => this.effectiveConfig().showToolbar ?? this.showToolbar(), ...(ngDevMode ? [{ debugName: "finalShowToolbar" }] : []));
+        this.finalShowToolbar = computed(() => this.showToolbar() ?? this.effectiveConfig().showToolbar, ...(ngDevMode ? [{ debugName: "finalShowToolbar" }] : []));
         this.finalToolbarConfig = computed(() => {
+            const fromInput = this.toolbar();
             const fromConfig = this.effectiveConfig().toolbar;
             const base = ATE_DEFAULT_TOOLBAR_CONFIG;
+            if (fromInput && Object.keys(fromInput).length > 0) {
+                return { ...base, ...fromInput };
+            }
             if (fromConfig) {
                 return { ...base, ...fromConfig };
             }
-            const fromInput = this.toolbar();
-            return Object.keys(fromInput).length === 0 ? base : { ...base, ...fromInput };
+            return base;
         }, ...(ngDevMode ? [{ debugName: "finalToolbarConfig" }] : []));
-        this.finalFloatingToolbar = computed(() => this.effectiveConfig().floatingToolbar ?? this.floatingToolbar(), ...(ngDevMode ? [{ debugName: "finalFloatingToolbar" }] : []));
-        this.finalShowBubbleMenu = computed(() => this.effectiveConfig().showBubbleMenu ?? this.showBubbleMenu(), ...(ngDevMode ? [{ debugName: "finalShowBubbleMenu" }] : []));
+        this.finalFloatingToolbar = computed(() => this.floatingToolbar() ?? this.effectiveConfig().floatingToolbar, ...(ngDevMode ? [{ debugName: "finalFloatingToolbar" }] : []));
+        this.finalShowBubbleMenu = computed(() => this.showBubbleMenu() ?? this.effectiveConfig().showBubbleMenu, ...(ngDevMode ? [{ debugName: "finalShowBubbleMenu" }] : []));
         this.finalBubbleMenuConfig = computed(() => {
+            const fromInput = this.bubbleMenu();
             const fromConfig = this.effectiveConfig().bubbleMenu;
             const base = ATE_DEFAULT_BUBBLE_MENU_CONFIG;
+            if (fromInput && Object.keys(fromInput).length > 0) {
+                return { ...base, ...fromInput };
+            }
             if (fromConfig) {
                 return { ...base, ...fromConfig };
             }
-            return Object.keys(this.bubbleMenu()).length === 0 ? base : { ...base, ...this.bubbleMenu() };
+            return base;
         }, ...(ngDevMode ? [{ debugName: "finalBubbleMenuConfig" }] : []));
-        this.finalShowImageBubbleMenu = computed(() => this.effectiveConfig().showImageBubbleMenu ?? this.showImageBubbleMenu(), ...(ngDevMode ? [{ debugName: "finalShowImageBubbleMenu" }] : []));
+        this.finalShowImageBubbleMenu = computed(() => this.showImageBubbleMenu() ?? this.effectiveConfig().showImageBubbleMenu, ...(ngDevMode ? [{ debugName: "finalShowImageBubbleMenu" }] : []));
         this.finalImageBubbleMenuConfig = computed(() => {
+            const fromInput = this.imageBubbleMenu();
             const fromConfig = this.effectiveConfig().imageBubbleMenu;
             const base = ATE_DEFAULT_IMAGE_BUBBLE_MENU_CONFIG;
+            if (fromInput && Object.keys(fromInput).length > 0) {
+                return { ...base, ...fromInput };
+            }
             if (fromConfig) {
                 return { ...base, ...fromConfig };
             }
-            return Object.keys(this.imageBubbleMenu()).length === 0
-                ? base
-                : { ...base, ...this.imageBubbleMenu() };
+            return base;
         }, ...(ngDevMode ? [{ debugName: "finalImageBubbleMenuConfig" }] : []));
-        this.finalShowTableBubbleMenu = computed(() => this.effectiveConfig().showTableMenu ?? this.showTableBubbleMenu(), ...(ngDevMode ? [{ debugName: "finalShowTableBubbleMenu" }] : []));
+        this.finalShowTableBubbleMenu = computed(() => this.showTableBubbleMenu() ?? this.effectiveConfig().showTableMenu, ...(ngDevMode ? [{ debugName: "finalShowTableBubbleMenu" }] : []));
         this.finalTableBubbleMenuConfig = computed(() => {
+            const fromInput = this.tableBubbleMenu();
             const fromConfig = this.effectiveConfig().tableBubbleMenu;
             const base = ATE_DEFAULT_TABLE_MENU_CONFIG;
+            if (fromInput && Object.keys(fromInput).length > 0) {
+                return { ...base, ...fromInput };
+            }
             if (fromConfig) {
                 return { ...base, ...fromConfig };
             }
-            return Object.keys(this.tableBubbleMenu()).length === 0
-                ? base
-                : { ...base, ...this.tableBubbleMenu() };
+            return base;
         }, ...(ngDevMode ? [{ debugName: "finalTableBubbleMenuConfig" }] : []));
-        this.finalShowCellBubbleMenu = computed(() => this.effectiveConfig().showCellMenu ?? this.showCellBubbleMenu(), ...(ngDevMode ? [{ debugName: "finalShowCellBubbleMenu" }] : []));
+        this.finalShowCellBubbleMenu = computed(() => this.showCellBubbleMenu() ?? this.effectiveConfig().showCellMenu, ...(ngDevMode ? [{ debugName: "finalShowCellBubbleMenu" }] : []));
         this.finalCellBubbleMenuConfig = computed(() => {
+            const fromInput = this.cellBubbleMenu();
             const fromConfig = this.effectiveConfig().cellBubbleMenu;
             const base = ATE_DEFAULT_CELL_MENU_CONFIG;
+            if (fromInput && Object.keys(fromInput).length > 0) {
+                return { ...base, ...fromInput };
+            }
             if (fromConfig) {
                 return { ...base, ...fromConfig };
             }
-            return Object.keys(this.cellBubbleMenu()).length === 0
-                ? base
-                : { ...base, ...this.cellBubbleMenu() };
+            return base;
         }, ...(ngDevMode ? [{ debugName: "finalCellBubbleMenuConfig" }] : []));
-        this.finalEnableSlashCommands = computed(() => this.effectiveConfig().enableSlashCommands ?? this.enableSlashCommands(), ...(ngDevMode ? [{ debugName: "finalEnableSlashCommands" }] : []));
+        this.finalEnableSlashCommands = computed(() => this.enableSlashCommands() ?? this.effectiveConfig().enableSlashCommands, ...(ngDevMode ? [{ debugName: "finalEnableSlashCommands" }] : []));
         this.finalSlashCommandsConfig = computed(() => {
-            const fromConfig = this.effectiveConfig().slashCommands;
-            const fromGlobalCustom = this.effectiveConfig().customSlashCommands;
-            const fromInputCustom = this.customSlashCommands();
-            const customConfig = fromInputCustom ?? fromGlobalCustom;
+            const fromInputComponent = this.customSlashCommands();
+            const fromConfigComponent = this.effectiveConfig().customSlashCommands;
+            const customConfig = fromInputComponent ?? fromConfigComponent;
             if (customConfig) {
                 return customConfig;
             }
-            let baseConfig = this.slashCommands();
-            if (fromConfig) {
-                baseConfig = fromConfig;
-            }
+            const fromInputOptions = this.slashCommands();
+            const fromConfigOptions = this.effectiveConfig().slashCommands;
+            const baseConfig = fromInputOptions && Object.keys(fromInputOptions).length > 0
+                ? fromInputOptions
+                : fromConfigOptions;
             return {
-                commands: filterSlashCommands(baseConfig, this.i18nService, this.editorCommandsService, this.finalImageUploadConfig()),
+                commands: filterSlashCommands(baseConfig || {}, this.i18nService, this.editorCommandsService, this.finalImageUploadConfig()),
             };
         }, ...(ngDevMode ? [{ debugName: "finalSlashCommandsConfig" }] : []));
         // Behavior
-        this.finalAutofocus = computed(() => this.effectiveConfig().autofocus ?? this.autofocus(), ...(ngDevMode ? [{ debugName: "finalAutofocus" }] : []));
-        this.finalMaxCharacters = computed(() => this.effectiveConfig().maxCharacters ?? this.maxCharacters(), ...(ngDevMode ? [{ debugName: "finalMaxCharacters" }] : []));
-        this.finalShowCharacterCount = computed(() => this.effectiveConfig().showCharacterCount ?? this.showCharacterCount(), ...(ngDevMode ? [{ debugName: "finalShowCharacterCount" }] : []));
-        this.finalShowWordCount = computed(() => this.effectiveConfig().showWordCount ?? this.showWordCount(), ...(ngDevMode ? [{ debugName: "finalShowWordCount" }] : []));
-        this.finalLocale = computed(() => this.effectiveConfig().locale ?? this.locale(), ...(ngDevMode ? [{ debugName: "finalLocale" }] : []));
+        this.finalAutofocus = computed(() => this.autofocus() ?? this.effectiveConfig().autofocus, ...(ngDevMode ? [{ debugName: "finalAutofocus" }] : []));
+        this.finalMaxCharacters = computed(() => this.maxCharacters() ?? this.effectiveConfig().maxCharacters, ...(ngDevMode ? [{ debugName: "finalMaxCharacters" }] : []));
+        this.finalShowCharacterCount = computed(() => this.showCharacterCount() ?? this.effectiveConfig().showCharacterCount, ...(ngDevMode ? [{ debugName: "finalShowCharacterCount" }] : []));
+        this.finalShowWordCount = computed(() => this.showWordCount() ?? this.effectiveConfig().showWordCount, ...(ngDevMode ? [{ debugName: "finalShowWordCount" }] : []));
+        this.finalLocale = computed(() => this.locale() ?? this.effectiveConfig().locale, ...(ngDevMode ? [{ debugName: "finalLocale" }] : []));
         // Extensions & Options
-        this.finalTiptapExtensions = computed(() => this.effectiveConfig().tiptapExtensions ?? this.tiptapExtensions() ?? [], ...(ngDevMode ? [{ debugName: "finalTiptapExtensions" }] : []));
-        this.finalTiptapOptions = computed(() => this.effectiveConfig().tiptapOptions ?? this.tiptapOptions() ?? {}, ...(ngDevMode ? [{ debugName: "finalTiptapOptions" }] : []));
-        this.finalStateCalculators = computed(() => this.effectiveConfig().stateCalculators ?? this.stateCalculators() ?? [], ...(ngDevMode ? [{ debugName: "finalStateCalculators" }] : []));
+        this.finalTiptapExtensions = computed(() => this.tiptapExtensions() ?? this.effectiveConfig().tiptapExtensions ?? [], ...(ngDevMode ? [{ debugName: "finalTiptapExtensions" }] : []));
+        this.finalTiptapOptions = computed(() => this.tiptapOptions() ?? this.effectiveConfig().tiptapOptions ?? {}, ...(ngDevMode ? [{ debugName: "finalTiptapOptions" }] : []));
+        this.finalStateCalculators = computed(() => this.stateCalculators() ?? this.effectiveConfig().stateCalculators ?? [], ...(ngDevMode ? [{ debugName: "finalStateCalculators" }] : []));
         this.finalAngularNodesConfig = computed(() => this.effectiveConfig().angularNodes ?? [], ...(ngDevMode ? [{ debugName: "finalAngularNodesConfig" }] : []));
         // Image Upload
         this.finalImageUploadConfig = computed(() => {
-            const fromConfig = this.effectiveConfig().imageUpload;
             const fromInput = this.imageUpload();
+            const fromConfig = this.effectiveConfig().imageUpload;
             const merged = {
                 maxSize: 5, // Default 5MB
                 maxWidth: 1920,
@@ -6413,15 +6482,15 @@ class AngularTiptapEditorComponent {
                 multiple: false,
                 compressImages: true,
                 quality: 0.8,
-                ...fromInput,
                 ...fromConfig,
+                ...fromInput,
             };
             return {
                 ...merged,
                 maxSize: merged.maxSize * 1024 * 1024, // Convert MB to bytes for internal service
             };
         }, ...(ngDevMode ? [{ debugName: "finalImageUploadConfig" }] : []));
-        this.finalImageUploadHandler = computed(() => this.effectiveConfig().imageUpload?.handler ?? this.imageUploadHandler(), ...(ngDevMode ? [{ debugName: "finalImageUploadHandler" }] : []));
+        this.finalImageUploadHandler = computed(() => this.imageUploadHandler() ?? this.effectiveConfig().imageUpload?.handler, ...(ngDevMode ? [{ debugName: "finalImageUploadHandler" }] : []));
         // Computed for current translations (allows per-instance override via config or input)
         this.currentTranslations = computed(() => {
             const localeOverride = this.finalLocale();
@@ -6447,7 +6516,7 @@ class AngularTiptapEditorComponent {
         this.effectiveConfig = computed(() => {
             const fromInput = this.config();
             const fromGlobal = this.globalConfig || {};
-            return { ...fromGlobal, ...fromInput };
+            return { ...ATE_DEFAULT_CONFIG, ...fromGlobal, ...fromInput };
         }, ...(ngDevMode ? [{ debugName: "effectiveConfig" }] : []));
         // Effect to update editor content (with anti-echo)
         effect(() => {
@@ -6470,7 +6539,7 @@ class AngularTiptapEditorComponent {
                 if (hasFormControl && !content) {
                     return;
                 }
-                editor.commands.setContent(content, false);
+                editor.commands.setContent(content, { emitUpdate: false });
             });
         });
         // Effect to update height properties
@@ -6618,7 +6687,7 @@ class AngularTiptapEditorComponent {
         }
         // Register automatic node views from config
         const autoNodeViews = this.finalAngularNodesConfig();
-        autoNodeViews.forEach(reg => {
+        autoNodeViews.forEach((reg) => {
             const options = typeof reg === "function"
                 ? { component: reg }
                 : reg;
@@ -6634,9 +6703,9 @@ class AngularTiptapEditorComponent {
         const customExtensions = this.finalTiptapExtensions();
         if (customExtensions.length > 0) {
             const existingNames = new Set(extensions
-                .map(ext => ext?.name)
+                .map((ext) => ext?.name)
                 .filter((name) => !!name));
-            const toAdd = customExtensions.filter(ext => {
+            const toAdd = customExtensions.filter((ext) => {
                 const name = ext?.name;
                 return !name || !existingNames.has(name);
             });
@@ -7203,38 +7272,10 @@ const ATE_CELL_BUBBLE_MENU_KEYS = ["mergeCells", "splitCell"];
  * Public API Surface of tiptap-editor
  */
 // Main component & Provider
-/** @deprecated Renamed to `ATE_INITIAL_EDITOR_STATE`. This alias will be removed in v3.0.0. */
-const INITIAL_EDITOR_STATE = ATE_INITIAL_EDITOR_STATE;
-/** @deprecated Renamed to `ATE_SLASH_COMMAND_KEYS`. This alias will be removed in v3.0.0. */
-const SLASH_COMMAND_KEYS = ATE_SLASH_COMMAND_KEYS;
-/** @deprecated Renamed to `ATE_DEFAULT_SLASH_COMMANDS_CONFIG`. This alias will be removed in v3.0.0. */
-const DEFAULT_SLASH_COMMANDS_CONFIG = ATE_DEFAULT_SLASH_COMMANDS_CONFIG;
-/** @deprecated Renamed to `AteDiscoveryCalculator`. This alias will be removed in v3.0.0. */
-const DiscoveryCalculator = AteDiscoveryCalculator;
-/** @deprecated Renamed to `AteImageCalculator`. This alias will be removed in v3.0.0. */
-const ImageCalculator = AteImageCalculator;
-/** @deprecated Renamed to `AteMarksCalculator`. This alias will be removed in v3.0.0. */
-const MarksCalculator = AteMarksCalculator;
-/** @deprecated Renamed to `AteSelectionCalculator`. This alias will be removed in v3.0.0. */
-const SelectionCalculator = AteSelectionCalculator;
-/** @deprecated Renamed to `AteStructureCalculator`. This alias will be removed in v3.0.0. */
-const StructureCalculator = AteStructureCalculator;
-/** @deprecated Renamed to `AteTableCalculator`. This alias will be removed in v3.0.0. */
-const TableCalculator = AteTableCalculator;
-/** @deprecated Renamed to `ATE_DEFAULT_TOOLBAR_CONFIG`. This alias will be removed in v3.0.0. */
-const DEFAULT_TOOLBAR_CONFIG = ATE_DEFAULT_TOOLBAR_CONFIG;
-/** @deprecated Renamed to `ATE_DEFAULT_BUBBLE_MENU_CONFIG`. This alias will be removed in v3.0.0. */
-const DEFAULT_BUBBLE_MENU_CONFIG = ATE_DEFAULT_BUBBLE_MENU_CONFIG;
-/** @deprecated Renamed to `ATE_DEFAULT_IMAGE_BUBBLE_MENU_CONFIG`. This alias will be removed in v3.0.0. */
-const DEFAULT_IMAGE_BUBBLE_MENU_CONFIG = ATE_DEFAULT_IMAGE_BUBBLE_MENU_CONFIG;
-/** @deprecated Renamed to `ATE_DEFAULT_TABLE_MENU_CONFIG`. This alias will be removed in v3.0.0. */
-const DEFAULT_TABLE_MENU_CONFIG = ATE_DEFAULT_TABLE_MENU_CONFIG;
-/** @deprecated Renamed to `ATE_DEFAULT_CELL_MENU_CONFIG`. This alias will be removed in v3.0.0. */
-const DEFAULT_CELL_MENU_CONFIG = ATE_DEFAULT_CELL_MENU_CONFIG;
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ATE_BUBBLE_MENU_KEYS, ATE_CELL_BUBBLE_MENU_KEYS, ATE_DEFAULT_BUBBLE_MENU_CONFIG, ATE_DEFAULT_CELL_MENU_CONFIG, ATE_DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, ATE_DEFAULT_SLASH_COMMANDS_CONFIG, ATE_DEFAULT_TABLE_MENU_CONFIG, ATE_DEFAULT_TOOLBAR_CONFIG, ATE_GLOBAL_CONFIG, ATE_IMAGE_BUBBLE_MENU_KEYS, ATE_INITIAL_EDITOR_STATE, ATE_SLASH_COMMAND_KEYS, ATE_TABLE_BUBBLE_MENU_KEYS, ATE_TOOLBAR_KEYS, AngularTiptapEditorComponent, AteAngularNodeView, AteColorPickerService, AteDiscoveryCalculator, AteEditorCommandsService, AteI18nService, AteImageCalculator, AteImageService, AteLinkService, AteMarksCalculator, AteNodeViewRenderer, AteNoopValueAccessorDirective, AteSelectionCalculator, AteStructureCalculator, AteTableCalculator, AteColorPickerService as ColorPickerService, DEFAULT_BUBBLE_MENU_CONFIG, DEFAULT_CELL_MENU_CONFIG, DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, DEFAULT_SLASH_COMMANDS_CONFIG, DEFAULT_TABLE_MENU_CONFIG, DEFAULT_TOOLBAR_CONFIG, DiscoveryCalculator, AteEditorCommandsService as EditorCommandsService, INITIAL_EDITOR_STATE, ImageCalculator, AteImageService as ImageService, AteLinkService as LinkService, MarksCalculator, SLASH_COMMAND_KEYS, SelectionCalculator, StructureCalculator, TableCalculator, AteI18nService as TiptapI18nService, createAngularComponentExtension, createDefaultSlashCommands, filterSlashCommands, provideAteEditor, registerAngularComponent };
+export { ATE_BUBBLE_MENU_KEYS, ATE_CELL_BUBBLE_MENU_KEYS, ATE_DEFAULT_BUBBLE_MENU_CONFIG, ATE_DEFAULT_CELL_MENU_CONFIG, ATE_DEFAULT_CONFIG, ATE_DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, ATE_DEFAULT_SLASH_COMMANDS_CONFIG, ATE_DEFAULT_TABLE_MENU_CONFIG, ATE_DEFAULT_TOOLBAR_CONFIG, ATE_GLOBAL_CONFIG, ATE_IMAGE_BUBBLE_MENU_KEYS, ATE_INITIAL_EDITOR_STATE, ATE_SLASH_COMMAND_KEYS, ATE_TABLE_BUBBLE_MENU_KEYS, ATE_TOOLBAR_KEYS, AngularTiptapEditorComponent, AteAngularNodeView, AteColorPickerService, AteDiscoveryCalculator, AteEditorCommandsService, AteI18nService, AteImageCalculator, AteImageService, AteLinkService, AteMarksCalculator, AteNodeViewRenderer, AteNoopValueAccessorDirective, AteSelectionCalculator, AteStructureCalculator, AteTableCalculator, createAngularComponentExtension, createDefaultSlashCommands, filterSlashCommands, provideAteEditor, registerAngularComponent };
 //# sourceMappingURL=flogeez-angular-tiptap-editor.mjs.map