@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/CHANGELOG.md +14 -0
- package/README.md +132 -93
- package/fesm2022/flogeez-angular-tiptap-editor.mjs +1225 -1114
- package/fesm2022/flogeez-angular-tiptap-editor.mjs.map +1 -1
- package/index.d.ts +265 -154
- package/package.json +1 -1
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$
|
|
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,
|
|
4
|
+
import { Injector, Type, AfterViewInit, OnDestroy, ElementRef, EnvironmentProviders, InjectionToken, Signal } from '@angular/core';
|
|
5
5
|
import { Observable } from 'rxjs';
|
|
6
|
-
import {
|
|
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$
|
|
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$
|
|
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
|
|
1486
|
+
* Base abstract class for custom 'Angular Nodes'.
|
|
1248
1487
|
*
|
|
1249
|
-
* Extend this class in your custom components to
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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
|
|
1518
|
-
* @param
|
|
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
|
-
*
|
|
1629
|
+
* // Modern way (requires provideAteEditor())
|
|
1630
|
+
* registerAngularComponent({
|
|
1524
1631
|
* component: MyComponent,
|
|
1525
|
-
* name: 'myComponent'
|
|
1526
|
-
*
|
|
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>(
|
|
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 {
|
|
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