@flogeez/angular-tiptap-editor 2.3.0 → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  import * as _flogeez_angular_tiptap_editor from '@flogeez/angular-tiptap-editor';
2
- import { Editor, Node as Node$1, Mark, Extension, EditorOptions, JSONContent, NodeConfig } from '@tiptap/core';
2
+ import { Editor, NodeConfig, Extension, Node as Node$2, Mark, EditorOptions, JSONContent } from '@tiptap/core';
3
3
  import * as _angular_core from '@angular/core';
4
- import { AfterViewInit, OnDestroy, ElementRef, Signal, Injector, Type } from '@angular/core';
4
+ import { Injector, Type, AfterViewInit, OnDestroy, ElementRef, EnvironmentProviders, InjectionToken, Signal } from '@angular/core';
5
5
  import { Observable } from 'rxjs';
6
- import { ControlValueAccessor } from '@angular/forms';
7
- import { Node as Node$2 } from '@tiptap/pm/model';
6
+ import { Node as Node$1 } from '@tiptap/pm/model';
8
7
  import { Decoration, EditorView, NodeView } from '@tiptap/pm/view';
8
+ import { ControlValueAccessor } from '@angular/forms';
9
9
 
10
10
  type SupportedLocale = "en" | "fr" | (string & {});
11
11
  interface AteTranslations {
@@ -784,6 +784,147 @@ declare const ATE_CELL_BUBBLE_MENU_KEYS: readonly ["mergeCells", "splitCell"];
784
784
  type AteCellBubbleMenuKey = (typeof ATE_CELL_BUBBLE_MENU_KEYS)[number];
785
785
  type AteCellBubbleMenuConfig = Partial<Record<AteCellBubbleMenuKey, boolean>>;
786
786
 
787
+ /**
788
+ * Common options for rendering any Angular component as a TipTap NodeView
789
+ */
790
+ interface AteComponentRenderOptions {
791
+ /**
792
+ * Angular injector to use for creating the component
793
+ */
794
+ injector: Injector;
795
+ /**
796
+ * Additional inputs to pass to the component
797
+ */
798
+ inputs?: Record<string, unknown>;
799
+ /**
800
+ * Custom wrapper element tag (default: 'div')
801
+ */
802
+ wrapperTag?: string;
803
+ /**
804
+ * CSS classes to add to the wrapper element
805
+ */
806
+ wrapperClass?: string;
807
+ /**
808
+ * Whether the node should be treated as an atom (not editable)
809
+ * Default: true
810
+ */
811
+ atom?: boolean;
812
+ /**
813
+ * Enables editable content for <ng-content>.
814
+ * If true, TipTap will treat the component's content as editable.
815
+ * @default false
816
+ */
817
+ editableContent?: boolean;
818
+ /**
819
+ * Optional CSS selector to target an internal element of the component as the editable area.
820
+ */
821
+ contentSelector?: string;
822
+ /**
823
+ * Type of content allowed in the editable area.
824
+ */
825
+ contentMode?: "block" | "inline";
826
+ /**
827
+ * Whether to ignore mutations in the component's DOM.
828
+ * If true, TipTap won't try to sync changes from the component's DOM back to the editor state.
829
+ * @default true
830
+ */
831
+ ignoreMutation?: boolean | ((mutation: MutationRecord | {
832
+ type: "selection";
833
+ target: Node;
834
+ }) => boolean);
835
+ /**
836
+ * Callback called when an Output event is emitted by the component.
837
+ */
838
+ onOutput?: (outputName: string, value: unknown) => void;
839
+ /**
840
+ * Callback called when the node is updated.
841
+ */
842
+ onUpdate?: (node: Node$1) => void;
843
+ /**
844
+ * Callback called when the component is destroyed.
845
+ */
846
+ onDestroy?: () => void;
847
+ }
848
+ /**
849
+ * Unified configuration for registering an Angular component as an interactive 'Angular Node'.
850
+ * This provides high-level options to map Angular component logic (inputs, outputs, lifestyle)
851
+ * directly to TipTap's document structure.
852
+ */
853
+ interface RegisterAngularComponentOptions<T = unknown> {
854
+ /**
855
+ * The Angular component to register
856
+ */
857
+ component: Type<T>;
858
+ /**
859
+ * Unique name for the TipTap node
860
+ */
861
+ name?: string;
862
+ /**
863
+ * Default inputs (for standard components)
864
+ */
865
+ defaultInputs?: Record<string, unknown>;
866
+ /**
867
+ * TipTap attributes (for TipTap-aware components)
868
+ */
869
+ attributes?: Record<string, {
870
+ default?: unknown;
871
+ parseHTML?: (element: HTMLElement) => unknown;
872
+ renderHTML?: (attributes: Record<string, unknown>) => Record<string, unknown> | null;
873
+ }>;
874
+ /**
875
+ * CSS selector for the editable area inside the component
876
+ */
877
+ contentSelector?: string;
878
+ /**
879
+ * Content mode for the editable area
880
+ */
881
+ contentMode?: "block" | "inline";
882
+ /**
883
+ * Enable editable content via <ng-content> or contentSelector
884
+ * @default false
885
+ */
886
+ editableContent?: boolean;
887
+ /**
888
+ * Node group (block or inline)
889
+ * @default 'block'
890
+ */
891
+ group?: "block" | "inline";
892
+ /**
893
+ * Is the node draggable?
894
+ * @default true
895
+ */
896
+ draggable?: boolean;
897
+ /**
898
+ * Whether to ignore mutations in the component's DOM.
899
+ * @default true
900
+ */
901
+ ignoreMutation?: boolean | ((mutation: MutationRecord | {
902
+ type: "selection";
903
+ target: Node;
904
+ }) => boolean);
905
+ /**
906
+ * Custom HTML attributes for the wrapper
907
+ */
908
+ HTMLAttributes?: Record<string, unknown>;
909
+ /**
910
+ * Custom parseHTML rules
911
+ */
912
+ parseHTML?: NodeConfig["parseHTML"];
913
+ /**
914
+ * Custom renderHTML function
915
+ */
916
+ renderHTML?: NodeConfig["renderHTML"];
917
+ /**
918
+ * Callback called when an Output event is emitted by the component.
919
+ */
920
+ onOutput?: (outputName: string, value: unknown) => void;
921
+ }
922
+
923
+ /**
924
+ * Type representing an Angular component that can be registered as an editor node.
925
+ * Can be a direct Component class or a full registration options object.
926
+ */
927
+ type AteAngularNode = Type<unknown> | RegisterAngularComponentOptions<unknown>;
787
928
  /**
788
929
  * Global configuration interface for Angular Tiptap Editor.
789
930
  * Uses a flat structure for common settings and objects for complex configurations.
@@ -853,6 +994,22 @@ interface AteEditorConfig {
853
994
  floatingToolbar?: boolean;
854
995
  /** Technical configuration for image uploads */
855
996
  imageUpload?: AteImageUploadConfig;
997
+ /**
998
+ * List of Angular components to automatically register as interactive editor nodes.
999
+ * This is the preferred way to extend the editor with custom Angular logic.
1000
+ */
1001
+ angularNodes?: AteAngularNode[];
1002
+ /** Standard TipTap extensions (Nodes, Marks, or Plugins) */
1003
+ tiptapExtensions?: (Extension | Node$2 | Mark)[];
1004
+ /** Raw TipTap editor options (e.g., enableInputRules, injectCSS, etc.) */
1005
+ tiptapOptions?: Partial<EditorOptions>;
1006
+ /** Reactive state calculators to extend the editor's live state */
1007
+ stateCalculators?: AteStateCalculator[];
1008
+ /**
1009
+ * Fully custom slash commands configuration.
1010
+ * When provided, it replaces the default groups based on toolbar toggles.
1011
+ */
1012
+ customSlashCommands?: AteCustomSlashCommands;
856
1013
  }
857
1014
 
858
1015
  /**
@@ -867,6 +1024,14 @@ declare class AteNoopValueAccessorDirective implements ControlValueAccessor {
867
1024
  static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AteNoopValueAccessorDirective, never, never, {}, {}, never, never, true, never>;
868
1025
  }
869
1026
 
1027
+ /**
1028
+ * The main rich-text editor component for Angular.
1029
+ *
1030
+ * Powered by Tiptap and built with a native Signal-based architecture, it provides
1031
+ * a seamless, high-performance editing experience. Supports automatic registration
1032
+ * of Angular components as interactive nodes ('Angular Nodes'), full Reactive Forms
1033
+ * integration, and extensive customization via the AteEditorConfig.
1034
+ */
870
1035
  declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
871
1036
  /** Configuration globale de l'éditeur */
872
1037
  config: _angular_core.InputSignal<AteEditorConfig>;
@@ -893,7 +1058,7 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
893
1058
  floatingToolbar: _angular_core.InputSignal<boolean>;
894
1059
  showEditToggle: _angular_core.InputSignal<boolean>;
895
1060
  spellcheck: _angular_core.InputSignal<boolean>;
896
- tiptapExtensions: _angular_core.InputSignal<(Node$1<any, any> | Mark<any, any> | Extension<any, any>)[]>;
1061
+ tiptapExtensions: _angular_core.InputSignal<(Node$2<any, any> | Mark<any, any> | Extension<any, any>)[]>;
897
1062
  tiptapOptions: _angular_core.InputSignal<Partial<EditorOptions>>;
898
1063
  showBubbleMenu: _angular_core.InputSignal<boolean>;
899
1064
  bubbleMenu: _angular_core.InputSignal<Partial<AteBubbleMenuConfig>>;
@@ -991,6 +1156,10 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
991
1156
  readonly finalShowCharacterCount: _angular_core.Signal<boolean>;
992
1157
  readonly finalShowWordCount: _angular_core.Signal<boolean>;
993
1158
  readonly finalLocale: _angular_core.Signal<SupportedLocale>;
1159
+ readonly finalTiptapExtensions: _angular_core.Signal<(Node$2<any, any> | Mark<any, any> | Extension<any, any>)[]>;
1160
+ readonly finalTiptapOptions: _angular_core.Signal<Partial<EditorOptions>>;
1161
+ readonly finalStateCalculators: _angular_core.Signal<AteStateCalculator[]>;
1162
+ readonly finalAngularNodesConfig: _angular_core.Signal<_flogeez_angular_tiptap_editor.AteAngularNode[]>;
994
1163
  readonly finalImageUploadConfig: _angular_core.Signal<{
995
1164
  maxSize: number;
996
1165
  handler?: AteImageUploadHandler;
@@ -1010,6 +1179,51 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
1010
1179
  readonly i18nService: AteI18nService;
1011
1180
  readonly editorCommandsService: AteEditorCommandsService;
1012
1181
  readonly editorState: _angular_core.Signal<_flogeez_angular_tiptap_editor.EditorStateSnapshot>;
1182
+ private injector;
1183
+ private globalConfig;
1184
+ /**
1185
+ * Final merged configuration.
1186
+ * Priority: Input [config] > Global config via provideAteEditor()
1187
+ */
1188
+ readonly effectiveConfig: _angular_core.Signal<{
1189
+ theme?: "light" | "dark" | "auto";
1190
+ mode?: "classic" | "seamless";
1191
+ height?: string;
1192
+ autofocus?: "start" | "end" | "all" | boolean | number;
1193
+ placeholder?: string;
1194
+ editable?: boolean;
1195
+ minHeight?: string;
1196
+ maxHeight?: string;
1197
+ fillContainer?: boolean;
1198
+ disabled?: boolean;
1199
+ locale?: string;
1200
+ spellcheck?: boolean;
1201
+ enableOfficePaste?: boolean;
1202
+ showToolbar?: boolean;
1203
+ showFooter?: boolean;
1204
+ showCharacterCount?: boolean;
1205
+ showWordCount?: boolean;
1206
+ showEditToggle?: boolean;
1207
+ showBubbleMenu?: boolean;
1208
+ showImageBubbleMenu?: boolean;
1209
+ showTableMenu?: boolean;
1210
+ showCellMenu?: boolean;
1211
+ enableSlashCommands?: boolean;
1212
+ maxCharacters?: number;
1213
+ toolbar?: AteToolbarConfig;
1214
+ bubbleMenu?: AteBubbleMenuConfig;
1215
+ imageBubbleMenu?: AteImageBubbleMenuConfig;
1216
+ tableBubbleMenu?: AteTableBubbleMenuConfig;
1217
+ cellBubbleMenu?: AteCellBubbleMenuConfig;
1218
+ slashCommands?: AteSlashCommandsConfig;
1219
+ floatingToolbar?: boolean;
1220
+ imageUpload?: _flogeez_angular_tiptap_editor.AteImageUploadConfig;
1221
+ angularNodes?: _flogeez_angular_tiptap_editor.AteAngularNode[];
1222
+ tiptapExtensions?: (Extension | Node$2 | Mark)[];
1223
+ tiptapOptions?: Partial<EditorOptions>;
1224
+ stateCalculators?: AteStateCalculator[];
1225
+ customSlashCommands?: AteCustomSlashCommands;
1226
+ }>;
1013
1227
  constructor();
1014
1228
  ngAfterViewInit(): void;
1015
1229
  ngOnDestroy(): void;
@@ -1033,6 +1247,26 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
1033
1247
  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: {}; }]>;
1034
1248
  }
1035
1249
 
1250
+ /**
1251
+ * Provides the necessary configuration and initialization for the Angular TipTap Editor.
1252
+ * This should be called in your app.config.ts (for standalone) or main.ts.
1253
+ *
1254
+ * This provider is essential for 'Angular Nodes' to work correctly, as it captures the
1255
+ * root Injector required to instantiate custom Angular components within the editor.
1256
+ * @example
1257
+ * ```ts
1258
+ * bootstrapApplication(AppComponent, {
1259
+ * providers: [
1260
+ * provideAteEditor({
1261
+ * theme: 'dark',
1262
+ * mode: 'seamless'
1263
+ * })
1264
+ * ]
1265
+ * });
1266
+ * ```
1267
+ */
1268
+ declare function provideAteEditor(config?: AteEditorConfig): EnvironmentProviders;
1269
+
1036
1270
  declare class AteImageService {
1037
1271
  /** Signals for image state */
1038
1272
  selectedImage: _angular_core.WritableSignal<AteImageData | null>;
@@ -1230,12 +1464,17 @@ declare const ATE_DEFAULT_IMAGE_BUBBLE_MENU_CONFIG: AteImageBubbleMenuConfig;
1230
1464
  declare const ATE_DEFAULT_TABLE_MENU_CONFIG: AteTableBubbleMenuConfig;
1231
1465
  declare const ATE_DEFAULT_CELL_MENU_CONFIG: AteCellBubbleMenuConfig;
1232
1466
 
1467
+ /**
1468
+ * Injection Token for global editor configuration.
1469
+ */
1470
+ declare const ATE_GLOBAL_CONFIG: InjectionToken<AteEditorConfig>;
1471
+
1233
1472
  /**
1234
1473
  * Props that are injected into Angular NodeView components
1235
1474
  */
1236
1475
  interface AteAngularNodeViewProps {
1237
1476
  editor: Editor;
1238
- node: Node$2;
1477
+ node: Node$1;
1239
1478
  decorations: readonly Decoration[];
1240
1479
  selected: boolean;
1241
1480
  extension: unknown;
@@ -1244,9 +1483,10 @@ interface AteAngularNodeViewProps {
1244
1483
  deleteNode: () => void;
1245
1484
  }
1246
1485
  /**
1247
- * Base abstract class for Angular components used as TipTap NodeViews.
1486
+ * Base abstract class for custom 'Angular Nodes'.
1248
1487
  *
1249
- * Extend this class in your custom components to get access to the TipTap node properties.
1488
+ * Extend this class in your custom components to automatically receive TipTap editor
1489
+ * properties (node attributes, selection state, etc.) as reactive Signals.
1250
1490
  *
1251
1491
  * @example
1252
1492
  * ```typescript
@@ -1274,7 +1514,7 @@ declare abstract class AteAngularNodeView {
1274
1514
  /**
1275
1515
  * The ProseMirror node
1276
1516
  */
1277
- node: Signal<Node$2>;
1517
+ node: Signal<Node$1>;
1278
1518
  /**
1279
1519
  * Decorations applied to this node
1280
1520
  */
@@ -1321,7 +1561,7 @@ declare abstract class AteAngularNodeView {
1321
1561
  *
1322
1562
  * @internal
1323
1563
  */
1324
- _updateNodeView(node: Node$2, decorations: readonly Decoration[]): void;
1564
+ _updateNodeView(node: Node$1, decorations: readonly Decoration[]): void;
1325
1565
  /**
1326
1566
  * Internal method to update the selection state.
1327
1567
  * This is called by the AngularNodeViewRenderer.
@@ -1340,140 +1580,6 @@ declare abstract class AteAngularNodeView {
1340
1580
  static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AteAngularNodeView, never, never, {}, {}, never, never, true, never>;
1341
1581
  }
1342
1582
 
1343
- /**
1344
- * Common options for rendering any Angular component as a TipTap NodeView
1345
- */
1346
- interface AteComponentRenderOptions {
1347
- /**
1348
- * Angular injector to use for creating the component
1349
- */
1350
- injector: Injector;
1351
- /**
1352
- * Additional inputs to pass to the component
1353
- */
1354
- inputs?: Record<string, unknown>;
1355
- /**
1356
- * Custom wrapper element tag (default: 'div')
1357
- */
1358
- wrapperTag?: string;
1359
- /**
1360
- * CSS classes to add to the wrapper element
1361
- */
1362
- wrapperClass?: string;
1363
- /**
1364
- * Whether the node should be treated as an atom (not editable)
1365
- * Default: true
1366
- */
1367
- atom?: boolean;
1368
- /**
1369
- * Enables editable content for <ng-content>.
1370
- * If true, TipTap will treat the component's content as editable.
1371
- * @default false
1372
- */
1373
- editableContent?: boolean;
1374
- /**
1375
- * Optional CSS selector to target an internal element of the component as the editable area.
1376
- */
1377
- contentSelector?: string;
1378
- /**
1379
- * Type of content allowed in the editable area.
1380
- */
1381
- contentMode?: "block" | "inline";
1382
- /**
1383
- * Whether to ignore mutations in the component's DOM.
1384
- * If true, TipTap won't try to sync changes from the component's DOM back to the editor state.
1385
- * @default true
1386
- */
1387
- ignoreMutation?: boolean | ((mutation: MutationRecord | {
1388
- type: "selection";
1389
- target: Node;
1390
- }) => boolean);
1391
- /**
1392
- * Callback called when an Output event is emitted by the component.
1393
- */
1394
- onOutput?: (outputName: string, value: unknown) => void;
1395
- /**
1396
- * Callback called when the node is updated.
1397
- */
1398
- onUpdate?: (node: Node$2) => void;
1399
- /**
1400
- * Callback called when the component is destroyed.
1401
- */
1402
- onDestroy?: () => void;
1403
- }
1404
- /**
1405
- * Unified configuration for registering ANY Angular component.
1406
- */
1407
- interface RegisterAngularComponentOptions<T = unknown> {
1408
- /**
1409
- * The Angular component to register
1410
- */
1411
- component: Type<T>;
1412
- /**
1413
- * Unique name for the TipTap node
1414
- */
1415
- name?: string;
1416
- /**
1417
- * Default inputs (for standard components)
1418
- */
1419
- defaultInputs?: Record<string, unknown>;
1420
- /**
1421
- * TipTap attributes (for TipTap-aware components)
1422
- */
1423
- attributes?: Record<string, {
1424
- default?: unknown;
1425
- parseHTML?: (element: HTMLElement) => unknown;
1426
- renderHTML?: (attributes: Record<string, unknown>) => Record<string, unknown> | null;
1427
- }>;
1428
- /**
1429
- * CSS selector for the editable area inside the component
1430
- */
1431
- contentSelector?: string;
1432
- /**
1433
- * Content mode for the editable area
1434
- */
1435
- contentMode?: "block" | "inline";
1436
- /**
1437
- * Enable editable content via <ng-content> or contentSelector
1438
- * @default false
1439
- */
1440
- editableContent?: boolean;
1441
- /**
1442
- * Node group (block or inline)
1443
- * @default 'block'
1444
- */
1445
- group?: "block" | "inline";
1446
- /**
1447
- * Is the node draggable?
1448
- * @default true
1449
- */
1450
- draggable?: boolean;
1451
- /**
1452
- * Whether to ignore mutations in the component's DOM.
1453
- * @default true
1454
- */
1455
- ignoreMutation?: boolean | ((mutation: MutationRecord | {
1456
- type: "selection";
1457
- target: Node;
1458
- }) => boolean);
1459
- /**
1460
- * Custom HTML attributes for the wrapper
1461
- */
1462
- HTMLAttributes?: Record<string, unknown>;
1463
- /**
1464
- * Custom parseHTML rules
1465
- */
1466
- parseHTML?: NodeConfig["parseHTML"];
1467
- /**
1468
- * Custom renderHTML function
1469
- */
1470
- renderHTML?: NodeConfig["renderHTML"];
1471
- /**
1472
- * Callback called when an Output event is emitted by the component.
1473
- */
1474
- onOutput?: (outputName: string, value: unknown) => void;
1475
- }
1476
-
1477
1583
  /**
1478
1584
  * Universal Renderer for Angular Components as TipTap NodeViews.
1479
1585
  *
@@ -1485,7 +1591,7 @@ interface RegisterAngularComponentOptions<T = unknown> {
1485
1591
  * - Unified lifecycle and event management
1486
1592
  */
1487
1593
  declare function AteNodeViewRenderer<T>(component: Type<T>, options: AteComponentRenderOptions): (props: {
1488
- node: Node$2;
1594
+ node: Node$1;
1489
1595
  view: EditorView;
1490
1596
  getPos: () => number | undefined;
1491
1597
  decorations: readonly Decoration[];
@@ -1499,7 +1605,7 @@ declare function AteNodeViewRenderer<T>(component: Type<T>, options: AteComponen
1499
1605
  *
1500
1606
  * @internal
1501
1607
  */
1502
- declare function createAngularComponentExtension<T = unknown>(injector: Injector, options: RegisterAngularComponentOptions<T>): Node$1;
1608
+ declare function createAngularComponentExtension<T = unknown>(injector: Injector, options: RegisterAngularComponentOptions<T>): Node$2;
1503
1609
 
1504
1610
  /**
1505
1611
  * Registers ANY Angular component as a TipTap node extension.
@@ -1514,20 +1620,25 @@ declare function createAngularComponentExtension<T = unknown>(injector: Injector
1514
1620
  * Allows using any existing Angular component. Its `@Input()` properties are automatically
1515
1621
  * synchronized with TipTap node attributes.
1516
1622
  *
1517
- * @param injector - The Angular Injector (obtained via `inject(Injector)`)
1518
- * @param options - Configuration options for the component extension
1623
+ * @param injectorOrOptions - The Angular Injector OR the configuration options
1624
+ * @param maybeOptions - Configuration options (if the first param was an injector)
1519
1625
  * @returns A TipTap Node extension ready to be used
1520
1626
  *
1521
1627
  * @example
1522
1628
  * ```typescript
1523
- * registerAngularComponent(injector, {
1629
+ * // Modern way (requires provideAteEditor())
1630
+ * registerAngularComponent({
1524
1631
  * component: MyComponent,
1525
- * name: 'myComponent',
1526
- * defaultInputs: { color: 'blue' }
1632
+ * name: 'myComponent'
1633
+ * });
1634
+ *
1635
+ * // Classic way
1636
+ * registerAngularComponent(injector, {
1637
+ * component: MyComponent
1527
1638
  * });
1528
1639
  * ```
1529
1640
  */
1530
- declare function registerAngularComponent<T = unknown>(injector: Injector, options: RegisterAngularComponentOptions<T>): Node$1;
1641
+ declare function registerAngularComponent<T = unknown>(injectorOrOptions: Injector | RegisterAngularComponentOptions<T>, maybeOptions?: RegisterAngularComponentOptions<T>): Node$2;
1531
1642
 
1532
1643
  /** @deprecated Renamed to `ATE_INITIAL_EDITOR_STATE`. This alias will be removed in v3.0.0. */
1533
1644
  declare const INITIAL_EDITOR_STATE: AteEditorStateSnapshot;
@@ -1560,5 +1671,5 @@ declare const DEFAULT_TABLE_MENU_CONFIG: Partial<Record<"addColumnBefore" | "add
1560
1671
  /** @deprecated Renamed to `ATE_DEFAULT_CELL_MENU_CONFIG`. This alias will be removed in v3.0.0. */
1561
1672
  declare const DEFAULT_CELL_MENU_CONFIG: Partial<Record<"mergeCells" | "splitCell", boolean>>;
1562
1673
 
1563
- 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_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, registerAngularComponent };
1564
- export type { AteAngularNodeViewProps, 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, AteBubbleMenuConfig as BubbleMenuConfig, AteCellBubbleMenuConfig as CellBubbleMenuConfig, AteCustomSlashCommands as CustomSlashCommands, AteEditorConfig as EditorConfig, AteEditorStateSnapshot as EditorStateSnapshot, AteImageBubbleMenuConfig as ImageBubbleMenuConfig, AteImageData as ImageData, AteImageUploadHandler as ImageUploadHandler, AteImageUploadOptions as ImageUploadOptions, AteImageUploadResult as ImageUploadResult, RegisterAngularComponentOptions, AteResizeOptions as ResizeOptions, AteSlashCommandItem as SlashCommandItem, AteSlashCommandKey as SlashCommandKey, AteSlashCommandsConfig as SlashCommandsConfig, SupportedLocale, AteTableBubbleMenuConfig as TableBubbleMenuConfig, AteToolbarConfig as ToolbarConfig };
1674
+ 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 };
1675
+ 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, AteBubbleMenuConfig as BubbleMenuConfig, AteCellBubbleMenuConfig as CellBubbleMenuConfig, AteCustomSlashCommands as CustomSlashCommands, AteEditorConfig as EditorConfig, AteEditorStateSnapshot as EditorStateSnapshot, AteImageBubbleMenuConfig as ImageBubbleMenuConfig, AteImageData as ImageData, AteImageUploadHandler as ImageUploadHandler, AteImageUploadOptions as ImageUploadOptions, AteImageUploadResult as ImageUploadResult, RegisterAngularComponentOptions, AteResizeOptions as ResizeOptions, AteSlashCommandItem as SlashCommandItem, AteSlashCommandKey as SlashCommandKey, AteSlashCommandsConfig as SlashCommandsConfig, SupportedLocale, AteTableBubbleMenuConfig as TableBubbleMenuConfig, AteToolbarConfig as ToolbarConfig };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flogeez/angular-tiptap-editor",
3
- "version": "2.3.0",
3
+ "version": "2.4.0",
4
4
  "description": "A modern, customizable rich-text editor for Angular (18+), built with Tiptap and featuring complete internationalization support",
5
5
  "keywords": [
6
6
  "angular",