@flogeez/angular-tiptap-editor 2.1.1 → 2.1.2

package/CHANGELOG.md

@@ -5,6 +5,12 @@ 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).
 
+## [2.1.2] - 2026-01-21
+
+### Fixed
+
+- **Editable State Synchronization**: Fixed an issue where the `editable` state from the `[config]` input was ignored in favor of the standalone `[editable]` input. Both are now correctly merged, with `config.editable` taking precedence.
+
 ## [2.1.1] - 2026-01-20
 
 ### Fixed

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

@@ -5755,6 +5755,7 @@ class AngularTiptapEditorComponent {
                 return fromConfig === 'seamless';
             return this.seamless();
         });
+        this.finalEditable = computed(() => this.config().editable ?? this.editable());
         this.finalPlaceholder = computed(() => this.config().placeholder ?? (this.placeholder() || this.currentTranslations().editor.placeholder));
         this.finalFillContainer = computed(() => this.config().fillContainer ?? this.fillContainer());
         this.finalShowFooter = computed(() => this.config().showFooter ?? this.showFooter());
@@ -5905,9 +5906,9 @@ class AngularTiptapEditorComponent {
         effect(() => {
             const currentEditor = this.editor();
             // An editor is "editable" if it's not disabled and editable mode is ON
-            const isEditable = this.editable() && !this.mergedDisabled();
+            const isEditable = this.finalEditable() && !this.mergedDisabled();
             // An editor is "readonly" if it's explicitly non-editable and not disabled
-            const isReadOnly = !this.editable() && !this.mergedDisabled();
+            const isReadOnly = !this.finalEditable() && !this.mergedDisabled();
             if (currentEditor) {
                 this.editorCommandsService.setEditable(currentEditor, isEditable);
             }
@@ -6030,7 +6031,7 @@ class AngularTiptapEditorComponent {
             element: this.editorElement().nativeElement,
             extensions: extensions,
             content: this.content(),
-            editable: this.editable() && !this.mergedDisabled(),
+            editable: this.finalEditable() && !this.mergedDisabled(),
             autofocus: this.finalAutofocus(),
             editorProps: {
                 attributes: {
@@ -6077,7 +6078,7 @@ class AngularTiptapEditorComponent {
     toggleEditMode(event) {
         event.preventDefault();
         event.stopPropagation();
-        const newEditable = !this.editable();
+        const newEditable = !this.finalEditable();
         this.editableChange.emit(newEditable);
     }
     updateCharacterCount(editor) {
@@ -6182,7 +6183,7 @@ class AngularTiptapEditorComponent {
     }
     onEditorClick(event) {
         const editor = this.editor();
-        if (!editor || !this.editable())
+        if (!editor || !this.finalEditable())
             return;
         // Verify if click is on the container element and not on the content
         const target = event.target;
@@ -6199,7 +6200,7 @@ class AngularTiptapEditorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AngularTiptapEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: AngularTiptapEditorComponent, isStandalone: true, selector: "angular-tiptap-editor", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, fillContainer: { classPropertyName: "fillContainer", publicName: "fillContainer", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, showCharacterCount: { classPropertyName: "showCharacterCount", publicName: "showCharacterCount", isSignal: true, isRequired: false, transformFunction: null }, showWordCount: { classPropertyName: "showWordCount", publicName: "showWordCount", isSignal: true, isRequired: false, transformFunction: null }, maxCharacters: { classPropertyName: "maxCharacters", publicName: "maxCharacters", isSignal: true, isRequired: false, transformFunction: null }, enableOfficePaste: { classPropertyName: "enableOfficePaste", publicName: "enableOfficePaste", isSignal: true, isRequired: false, transformFunction: null }, enableSlashCommands: { classPropertyName: "enableSlashCommands", publicName: "enableSlashCommands", isSignal: true, isRequired: false, transformFunction: null }, slashCommands: { classPropertyName: "slashCommands", publicName: "slashCommands", isSignal: true, isRequired: false, transformFunction: null }, customSlashCommands: { classPropertyName: "customSlashCommands", publicName: "customSlashCommands", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, seamless: { classPropertyName: "seamless", publicName: "seamless", isSignal: true, isRequired: false, transformFunction: null }, floatingToolbar: { classPropertyName: "floatingToolbar", publicName: "floatingToolbar", isSignal: true, isRequired: false, transformFunction: null }, showEditToggle: { classPropertyName: "showEditToggle", publicName: "showEditToggle", isSignal: true, isRequired: false, transformFunction: null }, spellcheck: { classPropertyName: "spellcheck", publicName: "spellcheck", isSignal: true, isRequired: false, transformFunction: null }, tiptapExtensions: { classPropertyName: "tiptapExtensions", publicName: "tiptapExtensions", isSignal: true, isRequired: false, transformFunction: null }, tiptapOptions: { classPropertyName: "tiptapOptions", publicName: "tiptapOptions", isSignal: true, isRequired: false, transformFunction: null }, showBubbleMenu: { classPropertyName: "showBubbleMenu", publicName: "showBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, bubbleMenu: { classPropertyName: "bubbleMenu", publicName: "bubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, showImageBubbleMenu: { classPropertyName: "showImageBubbleMenu", publicName: "showImageBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, imageBubbleMenu: { classPropertyName: "imageBubbleMenu", publicName: "imageBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, showTableBubbleMenu: { classPropertyName: "showTableBubbleMenu", publicName: "showTableBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, tableBubbleMenu: { classPropertyName: "tableBubbleMenu", publicName: "tableBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, showCellBubbleMenu: { classPropertyName: "showCellBubbleMenu", publicName: "showCellBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, cellBubbleMenu: { classPropertyName: "cellBubbleMenu", publicName: "cellBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, stateCalculators: { classPropertyName: "stateCalculators", publicName: "stateCalculators", isSignal: true, isRequired: false, transformFunction: null }, imageUpload: { classPropertyName: "imageUpload", publicName: "imageUpload", isSignal: true, isRequired: false, transformFunction: null }, imageUploadHandler: { classPropertyName: "imageUploadHandler", publicName: "imageUploadHandler", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentChange: "contentChange", editorCreated: "editorCreated", editorUpdate: "editorUpdate", editorFocus: "editorFocus", editorBlur: "editorBlur", editableChange: "editableChange" }, host: { properties: { "class.fill-container": "finalFillContainer()", "class.floating-toolbar": "finalFloatingToolbar()", "class.is-readonly": "!editable() && !mergedDisabled()", "class.is-disabled": "mergedDisabled()", "style.--ate-border-width": "finalSeamless() || mergedDisabled() ? '0' : null", "style.--ate-background": "finalSeamless() ? 'transparent' : (mergedDisabled() ? 'var(--ate-surface-tertiary)' : null)", "style.--ate-toolbar-border-color": "finalSeamless() ? 'transparent' : null", "style.--ate-counter-background": "finalSeamless() ? 'transparent' : null", "style.--ate-counter-border-color": "finalSeamless() ? 'transparent' : null", "class.dark": "config().theme === 'dark'", "attr.data-theme": "config().theme" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: AngularTiptapEditorComponent, isStandalone: true, selector: "angular-tiptap-editor", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, fillContainer: { classPropertyName: "fillContainer", publicName: "fillContainer", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, showCharacterCount: { classPropertyName: "showCharacterCount", publicName: "showCharacterCount", isSignal: true, isRequired: false, transformFunction: null }, showWordCount: { classPropertyName: "showWordCount", publicName: "showWordCount", isSignal: true, isRequired: false, transformFunction: null }, maxCharacters: { classPropertyName: "maxCharacters", publicName: "maxCharacters", isSignal: true, isRequired: false, transformFunction: null }, enableOfficePaste: { classPropertyName: "enableOfficePaste", publicName: "enableOfficePaste", isSignal: true, isRequired: false, transformFunction: null }, enableSlashCommands: { classPropertyName: "enableSlashCommands", publicName: "enableSlashCommands", isSignal: true, isRequired: false, transformFunction: null }, slashCommands: { classPropertyName: "slashCommands", publicName: "slashCommands", isSignal: true, isRequired: false, transformFunction: null }, customSlashCommands: { classPropertyName: "customSlashCommands", publicName: "customSlashCommands", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, seamless: { classPropertyName: "seamless", publicName: "seamless", isSignal: true, isRequired: false, transformFunction: null }, floatingToolbar: { classPropertyName: "floatingToolbar", publicName: "floatingToolbar", isSignal: true, isRequired: false, transformFunction: null }, showEditToggle: { classPropertyName: "showEditToggle", publicName: "showEditToggle", isSignal: true, isRequired: false, transformFunction: null }, spellcheck: { classPropertyName: "spellcheck", publicName: "spellcheck", isSignal: true, isRequired: false, transformFunction: null }, tiptapExtensions: { classPropertyName: "tiptapExtensions", publicName: "tiptapExtensions", isSignal: true, isRequired: false, transformFunction: null }, tiptapOptions: { classPropertyName: "tiptapOptions", publicName: "tiptapOptions", isSignal: true, isRequired: false, transformFunction: null }, showBubbleMenu: { classPropertyName: "showBubbleMenu", publicName: "showBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, bubbleMenu: { classPropertyName: "bubbleMenu", publicName: "bubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, showImageBubbleMenu: { classPropertyName: "showImageBubbleMenu", publicName: "showImageBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, imageBubbleMenu: { classPropertyName: "imageBubbleMenu", publicName: "imageBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, showTableBubbleMenu: { classPropertyName: "showTableBubbleMenu", publicName: "showTableBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, tableBubbleMenu: { classPropertyName: "tableBubbleMenu", publicName: "tableBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, showCellBubbleMenu: { classPropertyName: "showCellBubbleMenu", publicName: "showCellBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, cellBubbleMenu: { classPropertyName: "cellBubbleMenu", publicName: "cellBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, stateCalculators: { classPropertyName: "stateCalculators", publicName: "stateCalculators", isSignal: true, isRequired: false, transformFunction: null }, imageUpload: { classPropertyName: "imageUpload", publicName: "imageUpload", isSignal: true, isRequired: false, transformFunction: null }, imageUploadHandler: { classPropertyName: "imageUploadHandler", publicName: "imageUploadHandler", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentChange: "contentChange", editorCreated: "editorCreated", editorUpdate: "editorUpdate", editorFocus: "editorFocus", editorBlur: "editorBlur", editableChange: "editableChange" }, host: { properties: { "class.fill-container": "finalFillContainer()", "class.floating-toolbar": "finalFloatingToolbar()", "class.is-readonly": "!finalEditable() && !mergedDisabled()", "class.is-disabled": "mergedDisabled()", "style.--ate-border-width": "finalSeamless() || mergedDisabled() ? '0' : null", "style.--ate-background": "finalSeamless() ? 'transparent' : (mergedDisabled() ? 'var(--ate-surface-tertiary)' : null)", "style.--ate-toolbar-border-color": "finalSeamless() ? 'transparent' : null", "style.--ate-counter-background": "finalSeamless() ? 'transparent' : null", "style.--ate-counter-border-color": "finalSeamless() ? 'transparent' : null", "class.dark": "config().theme === 'dark'", "attr.data-theme": "config().theme" } }, providers: [
             EditorCommandsService,
             ImageService,
             ColorPickerService,
@@ -6207,7 +6208,7 @@ class AngularTiptapEditorComponent {
         ], viewQueries: [{ propertyName: "editorElement", first: true, predicate: ["editorElement"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: `
     <div class="tiptap-editor">
       <!-- Toolbar -->
-      @if (editable() && !mergedDisabled() && finalShowToolbar() && editor()) {
+      @if (finalEditable() && !mergedDisabled() && finalShowToolbar() && editor()) {
       <tiptap-toolbar 
         [editor]="editor()!" 
         [config]="finalToolbarConfig()"
@@ -6220,7 +6221,7 @@ class AngularTiptapEditorComponent {
 
       @if (finalShowEditToggle() && !mergedDisabled()) {
       <tiptap-edit-toggle 
-        [editable]="editable()" 
+        [editable]="finalEditable()" 
         [translations]="currentTranslations()"
         (toggle)="toggleEditMode($event)"
       />
@@ -6237,7 +6238,7 @@ class AngularTiptapEditorComponent {
       ></div>
 
       <!-- Text Bubble Menu -->
-      @if (editable() && finalShowBubbleMenu() && editor()) {
+      @if (finalEditable() && finalShowBubbleMenu() && editor()) {
       <tiptap-bubble-menu
         [editor]="editor()!"
         [config]="finalBubbleMenuConfig()"
@@ -6246,7 +6247,7 @@ class AngularTiptapEditorComponent {
       }
 
       <!-- Image Bubble Menu -->
-      @if (editable() && finalShowImageBubbleMenu() && editor()) {
+      @if (finalEditable() && finalShowImageBubbleMenu() && editor()) {
       <tiptap-image-bubble-menu
         [editor]="editor()!"
         [config]="finalImageBubbleMenuConfig()"
@@ -6256,7 +6257,7 @@ class AngularTiptapEditorComponent {
       }
 
       <!-- Link Bubble Menu -->
-      @if (editable() && editor()) {
+      @if (finalEditable() && editor()) {
       <tiptap-link-bubble-menu
         [editor]="editor()!"
         [style.display]="editorFullyInitialized() ? 'block' : 'none'"
@@ -6264,7 +6265,7 @@ class AngularTiptapEditorComponent {
       }
 
       <!-- Color Bubble Menu -->
-      @if (editable() && editor()) {
+      @if (finalEditable() && editor()) {
       <tiptap-color-bubble-menu
         [editor]="editor()!"
         [style.display]="editorFullyInitialized() ? 'block' : 'none'"
@@ -6272,7 +6273,7 @@ class AngularTiptapEditorComponent {
       }
 
       <!-- Slash Commands -->
-      @if (editable() && finalEnableSlashCommands() && editor()) {
+      @if (finalEditable() && finalEnableSlashCommands() && editor()) {
       <tiptap-slash-commands
         [editor]="editor()!"
         [config]="finalSlashCommandsConfig()"
@@ -6281,7 +6282,7 @@ class AngularTiptapEditorComponent {
       }
 
       <!-- Table Menu -->
-      @if (editable() && finalShowTableBubbleMenu() && editor()) {
+      @if (finalEditable() && finalShowTableBubbleMenu() && editor()) {
       <tiptap-table-bubble-menu
         [editor]="editor()!"
         [config]="finalTableBubbleMenuConfig()"
@@ -6290,7 +6291,7 @@ class AngularTiptapEditorComponent {
       }
 
       <!-- Cell Menu -->
-      @if (editable() && finalShowCellBubbleMenu() && editor()) {
+      @if (finalEditable() && finalShowCellBubbleMenu() && editor()) {
       <tiptap-cell-bubble-menu
         [editor]="editor()!"
         [config]="finalCellBubbleMenuConfig()"
@@ -6299,7 +6300,7 @@ class AngularTiptapEditorComponent {
       }
 
       <!-- Counters -->
-      @if (editable() && !mergedDisabled() && finalShowFooter() && (finalShowCharacterCount() || finalShowWordCount())) {
+      @if (finalEditable() && !mergedDisabled() && finalShowFooter() && (finalShowCharacterCount() || finalShowWordCount())) {
       <div class="character-count" [class.limit-reached]="finalMaxCharacters() && characterCount() >= finalMaxCharacters()!">
         @if (finalShowCharacterCount()) {
           {{ characterCount() }}
@@ -6327,7 +6328,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
             args: [{ selector: "angular-tiptap-editor", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [NoopValueAccessorDirective], host: {
                         '[class.fill-container]': 'finalFillContainer()',
                         '[class.floating-toolbar]': 'finalFloatingToolbar()',
-                        '[class.is-readonly]': '!editable() && !mergedDisabled()',
+                        '[class.is-readonly]': '!finalEditable() && !mergedDisabled()',
                         '[class.is-disabled]': 'mergedDisabled()',
                         '[style.--ate-border-width]': "finalSeamless() || mergedDisabled() ? '0' : null",
                         '[style.--ate-background]': "finalSeamless() ? 'transparent' : (mergedDisabled() ? 'var(--ate-surface-tertiary)' : null)",
@@ -6354,7 +6355,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                     ], template: `
     <div class="tiptap-editor">
       <!-- Toolbar -->
-      @if (editable() && !mergedDisabled() && finalShowToolbar() && editor()) {
+      @if (finalEditable() && !mergedDisabled() && finalShowToolbar() && editor()) {
       <tiptap-toolbar 
         [editor]="editor()!" 
         [config]="finalToolbarConfig()"
@@ -6367,7 +6368,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 
       @if (finalShowEditToggle() && !mergedDisabled()) {
       <tiptap-edit-toggle 
-        [editable]="editable()" 
+        [editable]="finalEditable()" 
         [translations]="currentTranslations()"
         (toggle)="toggleEditMode($event)"
       />
@@ -6384,7 +6385,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       ></div>
 
       <!-- Text Bubble Menu -->
-      @if (editable() && finalShowBubbleMenu() && editor()) {
+      @if (finalEditable() && finalShowBubbleMenu() && editor()) {
       <tiptap-bubble-menu
         [editor]="editor()!"
         [config]="finalBubbleMenuConfig()"
@@ -6393,7 +6394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       }
 
       <!-- Image Bubble Menu -->
-      @if (editable() && finalShowImageBubbleMenu() && editor()) {
+      @if (finalEditable() && finalShowImageBubbleMenu() && editor()) {
       <tiptap-image-bubble-menu
         [editor]="editor()!"
         [config]="finalImageBubbleMenuConfig()"
@@ -6403,7 +6404,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       }
 
       <!-- Link Bubble Menu -->
-      @if (editable() && editor()) {
+      @if (finalEditable() && editor()) {
       <tiptap-link-bubble-menu
         [editor]="editor()!"
         [style.display]="editorFullyInitialized() ? 'block' : 'none'"
@@ -6411,7 +6412,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       }
 
       <!-- Color Bubble Menu -->
-      @if (editable() && editor()) {
+      @if (finalEditable() && editor()) {
       <tiptap-color-bubble-menu
         [editor]="editor()!"
         [style.display]="editorFullyInitialized() ? 'block' : 'none'"
@@ -6419,7 +6420,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       }
 
       <!-- Slash Commands -->
-      @if (editable() && finalEnableSlashCommands() && editor()) {
+      @if (finalEditable() && finalEnableSlashCommands() && editor()) {
       <tiptap-slash-commands
         [editor]="editor()!"
         [config]="finalSlashCommandsConfig()"
@@ -6428,7 +6429,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       }
 
       <!-- Table Menu -->
-      @if (editable() && finalShowTableBubbleMenu() && editor()) {
+      @if (finalEditable() && finalShowTableBubbleMenu() && editor()) {
       <tiptap-table-bubble-menu
         [editor]="editor()!"
         [config]="finalTableBubbleMenuConfig()"
@@ -6437,7 +6438,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       }
 
       <!-- Cell Menu -->
-      @if (editable() && finalShowCellBubbleMenu() && editor()) {
+      @if (finalEditable() && finalShowCellBubbleMenu() && editor()) {
       <tiptap-cell-bubble-menu
         [editor]="editor()!"
         [config]="finalCellBubbleMenuConfig()"
@@ -6446,7 +6447,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       }
 
       <!-- Counters -->
-      @if (editable() && !mergedDisabled() && finalShowFooter() && (finalShowCharacterCount() || finalShowWordCount())) {
+      @if (finalEditable() && !mergedDisabled() && finalShowFooter() && (finalShowCharacterCount() || finalShowWordCount())) {
       <div class="character-count" [class.limit-reached]="finalMaxCharacters() && characterCount() >= finalMaxCharacters()!">
         @if (finalShowCharacterCount()) {
           {{ characterCount() }}