@flogeez/angular-tiptap-editor 3.0.3 → 3.1.0

package/index.d.ts

@@ -2,8 +2,8 @@ import * as _flogeez_angular_tiptap_editor from '@flogeez/angular-tiptap-editor'
 import * as _angular_core from '@angular/core';
 import { Injector, Type, AfterViewInit, OnDestroy, ElementRef, EnvironmentProviders, InjectionToken, Signal } from '@angular/core';
 import { Editor, NodeConfig, Extension, Node as Node$2, Mark, EditorOptions, JSONContent } from '@tiptap/core';
-import { Observable } from 'rxjs';
 import { Node as Node$1 } from '@tiptap/pm/model';
+import { Observable } from 'rxjs';
 import { ControlValueAccessor } from '@angular/forms';
 import * as _popperjs_core from '@popperjs/core';
 import { Decoration, EditorView, NodeView } from '@tiptap/pm/view';
@@ -184,6 +184,8 @@ interface AteTranslations {
         confirmDelete: string;
         toggleEdit: string;
         viewMode: string;
+        blockAdd: string;
+        blockDrag: string;
     };
     common: {
         cancel: string;
@@ -362,6 +364,8 @@ declare class AteI18nService {
         confirmDelete: string;
         toggleEdit: string;
         viewMode: string;
+        blockAdd: string;
+        blockDrag: string;
     }>;
     readonly common: _angular_core.Signal<{
         cancel: string;
@@ -941,6 +945,10 @@ interface RegisterAngularComponentOptions<T = unknown> {
  * Can be a direct Component class or a full registration options object.
  */
 type AteAngularNode = Type<unknown> | RegisterAngularComponentOptions<unknown>;
+/** Possible display modes for block level controls */
+type AteBlockControlsMode = "inside" | "outside" | "none";
+/** Possible values for editor autofocus */
+type AteAutofocusMode = "start" | "end" | "all" | boolean | number;
 /**
  * Global configuration interface for Angular Tiptap Editor.
  * Uses a flat structure for common settings and objects for complex configurations.
@@ -953,7 +961,7 @@ interface AteEditorConfig {
     /** Editor height (e.g., '300px', 300, 'auto') */
     height?: string | number;
     /** Focus position on initialization */
-    autofocus?: "start" | "end" | "all" | boolean | number;
+    autofocus?: AteAutofocusMode;
     /** Placeholder text displayed when the editor is empty */
     placeholder?: string;
     /** Initial editing state (if false, the editor is read-only) */
@@ -996,6 +1004,13 @@ interface AteEditorConfig {
     enableSlashCommands?: boolean;
     /** Maximum number of characters allowed */
     maxCharacters?: number;
+    /**
+     * Block level controls (plus button and drag handle) display mode.
+     * - 'inside': Elements are placed inside the editor (reserves space via padding).
+     * - 'outside': Elements float outside the editor boundary (no layout shift).
+     * - 'none': Disabled (not displayed).
+     */
+    blockControls?: AteBlockControlsMode;
     /** Detailed toolbar configuration (items, groups) */
     toolbar?: AteToolbarConfig;
     /** Text context menu configuration */
@@ -1070,8 +1085,9 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     enableSlashCommands: _angular_core.InputSignal<boolean | undefined>;
     slashCommands: _angular_core.InputSignal<AteSlashCommandsConfig | undefined>;
     customSlashCommands: _angular_core.InputSignal<AteCustomSlashCommands | undefined>;
+    blockControls: _angular_core.InputSignal<AteBlockControlsMode | undefined>;
     locale: _angular_core.InputSignal<SupportedLocale | undefined>;
-    autofocus: _angular_core.InputSignal<number | boolean | "start" | "end" | "all" | undefined>;
+    autofocus: _angular_core.InputSignal<AteAutofocusMode | undefined>;
     seamless: _angular_core.InputSignal<boolean | undefined>;
     floatingToolbar: _angular_core.InputSignal<boolean | undefined>;
     showEditToggle: _angular_core.InputSignal<boolean | undefined>;
@@ -1135,12 +1151,18 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     private _wordCount;
     private _isDragOver;
     private _editorFullyInitialized;
+    private _hoveredBlock;
     private lastEmittedHtml;
     readonly editor: _angular_core.Signal<Editor | null>;
     readonly characterCount: _angular_core.Signal<number>;
     readonly wordCount: _angular_core.Signal<number>;
     readonly isDragOver: _angular_core.Signal<boolean>;
     readonly editorFullyInitialized: _angular_core.Signal<boolean>;
+    readonly hoveredBlock: _angular_core.Signal<{
+        node: Node$1;
+        element: HTMLElement;
+        pos: number;
+    } | null>;
     private _isFormControlDisabled;
     readonly isFormControlDisabled: _angular_core.Signal<boolean>;
     readonly mergedDisabled: _angular_core.Signal<boolean>;
@@ -1169,8 +1191,9 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     readonly finalCellBubbleMenuConfig: _angular_core.Signal<Partial<Record<"mergeCells" | "splitCell", boolean>>>;
     readonly finalEnableSlashCommands: _angular_core.Signal<boolean>;
     readonly finalSlashCommandsConfig: _angular_core.Signal<AteCustomSlashCommands>;
-    readonly finalAutofocus: _angular_core.Signal<number | boolean | "start" | "end" | "all" | undefined>;
+    readonly finalAutofocus: _angular_core.Signal<AteAutofocusMode | undefined>;
     readonly finalMaxCharacters: _angular_core.Signal<number | undefined>;
+    readonly finalBlockControls: _angular_core.Signal<AteBlockControlsMode>;
     readonly finalShowCharacterCount: _angular_core.Signal<boolean>;
     readonly finalShowWordCount: _angular_core.Signal<boolean>;
     readonly finalLocale: _angular_core.Signal<SupportedLocale>;
@@ -1203,7 +1226,7 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
         theme?: "light" | "dark" | "auto";
         mode?: "classic" | "seamless";
         height?: string | number;
-        autofocus?: "start" | "end" | "all" | boolean | number;
+        autofocus?: AteAutofocusMode;
         placeholder?: string;
         editable?: boolean;
         minHeight?: string | number;
@@ -1225,6 +1248,7 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
         downloadImage?: boolean;
         enableSlashCommands?: boolean;
         maxCharacters?: number;
+        blockControls?: AteBlockControlsMode;
         toolbar?: AteToolbarConfig;
         bubbleMenu?: AteBubbleMenuConfig;
         imageBubbleMenu?: AteImageBubbleMenuConfig;
@@ -1259,7 +1283,7 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
     private setupFormControlSubscription;
     onEditorClick(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AngularTiptapEditorComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AngularTiptapEditorComponent, "angular-tiptap-editor", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "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; }; "showFooter": { "alias": "showFooter"; "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; }; "showEditToggle": { "alias": "showEditToggle"; "required": false; "isSignal": true; }; "spellcheck": { "alias": "spellcheck"; "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"; "editableChange": "editableChange"; }, never, never, true, [{ directive: typeof AteNoopValueAccessorDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AngularTiptapEditorComponent, "angular-tiptap-editor", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "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; }; "showFooter": { "alias": "showFooter"; "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; }; "blockControls": { "alias": "blockControls"; "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; }; "showEditToggle": { "alias": "showEditToggle"; "required": false; "isSignal": true; }; "spellcheck": { "alias": "spellcheck"; "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"; "editableChange": "editableChange"; }, never, never, true, [{ directive: typeof AteNoopValueAccessorDirective; inputs: {}; outputs: {}; }]>;
 }
 
 /**
@@ -1698,4 +1722,4 @@ declare function createAngularComponentExtension<T = unknown>(injector: Injector
 declare function registerAngularComponent<T = unknown>(injectorOrOptions: Injector | RegisterAngularComponentOptions<T>, maybeOptions?: RegisterAngularComponentOptions<T>): Node$2;
 
 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_IMAGE_UPLOAD_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, AteTooltipDirective, createAngularComponentExtension, createDefaultSlashCommands, filterSlashCommands, provideAteEditor, registerAngularComponent };
-export type { AteAngularNode, AteBubbleMenuConfig, AteBubbleMenuKey, AteCellBubbleMenuConfig, AteCellBubbleMenuKey, AteColorEditMode, AteColorPickerSelection, AteComponentRenderOptions, AteCustomBubbleMenuItem, AteCustomSlashCommands, AteCustomToolbarItem, AteEditorConfig, AteEditorStateSnapshot, AteImageBubbleMenuConfig, AteImageBubbleMenuKey, AteImageData, AteImageUploadConfig, AteImageUploadContext, AteImageUploadHandler, AteImageUploadHandlerResult, AteImageUploadOptions, AteImageUploadResult, AteResizeOptions, AteSlashCommandItem, AteSlashCommandKey, AteSlashCommandsConfig, AteStateCalculator, AteTableBubbleMenuConfig, AteTableBubbleMenuKey, AteToolbarConfig, AteToolbarKey, AteTranslations, RegisterAngularComponentOptions, SupportedLocale };
+export type { AteAngularNode, AteAutofocusMode, AteBlockControlsMode, AteBubbleMenuConfig, AteBubbleMenuKey, AteCellBubbleMenuConfig, AteCellBubbleMenuKey, AteColorEditMode, AteColorPickerSelection, AteComponentRenderOptions, AteCustomBubbleMenuItem, AteCustomSlashCommands, AteCustomToolbarItem, AteEditorConfig, AteEditorStateSnapshot, AteImageBubbleMenuConfig, AteImageBubbleMenuKey, AteImageData, AteImageUploadConfig, AteImageUploadContext, AteImageUploadHandler, AteImageUploadHandlerResult, AteImageUploadOptions, AteImageUploadResult, AteResizeOptions, AteSlashCommandItem, AteSlashCommandKey, AteSlashCommandsConfig, AteStateCalculator, AteTableBubbleMenuConfig, AteTableBubbleMenuKey, AteToolbarConfig, AteToolbarKey, AteTranslations, RegisterAngularComponentOptions, SupportedLocale };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flogeez/angular-tiptap-editor",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "description": "A modern, customizable rich-text editor for Angular (18+), built with Tiptap and featuring complete internationalization support",
   "keywords": [
     "angular",