@flogeez/angular-tiptap-editor 3.0.1 → 3.0.2
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
|
@@ -138,11 +138,15 @@ interface AteTranslations {
|
|
|
138
138
|
invalidFileType: string;
|
|
139
139
|
dragDropText: string;
|
|
140
140
|
changeImage: string;
|
|
141
|
+
downloadImage: string;
|
|
141
142
|
deleteImage: string;
|
|
142
143
|
resizeSmall: string;
|
|
143
144
|
resizeMedium: string;
|
|
144
145
|
resizeLarge: string;
|
|
145
146
|
resizeOriginal: string;
|
|
147
|
+
alignLeft: string;
|
|
148
|
+
alignCenter: string;
|
|
149
|
+
alignRight: string;
|
|
146
150
|
resizing: string;
|
|
147
151
|
compressing: string;
|
|
148
152
|
compressionError: string;
|
|
@@ -312,11 +316,15 @@ declare class AteI18nService {
|
|
|
312
316
|
invalidFileType: string;
|
|
313
317
|
dragDropText: string;
|
|
314
318
|
changeImage: string;
|
|
319
|
+
downloadImage: string;
|
|
315
320
|
deleteImage: string;
|
|
316
321
|
resizeSmall: string;
|
|
317
322
|
resizeMedium: string;
|
|
318
323
|
resizeLarge: string;
|
|
319
324
|
resizeOriginal: string;
|
|
325
|
+
alignLeft: string;
|
|
326
|
+
alignCenter: string;
|
|
327
|
+
alignRight: string;
|
|
320
328
|
resizing: string;
|
|
321
329
|
compressing: string;
|
|
322
330
|
compressionError: string;
|
|
@@ -690,6 +698,7 @@ declare class AteEditorCommandsService {
|
|
|
690
698
|
insertContent(editor: Editor, content: string): void;
|
|
691
699
|
insertImage(editor: Editor, options?: AteImageUploadOptions): Promise<void>;
|
|
692
700
|
uploadImage(editor: Editor, file: File, options?: AteImageUploadOptions): Promise<void>;
|
|
701
|
+
downloadImage(editor: Editor): void;
|
|
693
702
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AteEditorCommandsService, never>;
|
|
694
703
|
static ɵprov: _angular_core.ɵɵInjectableDeclaration<AteEditorCommandsService>;
|
|
695
704
|
}
|
|
@@ -768,7 +777,7 @@ interface AteCustomBubbleMenuItem {
|
|
|
768
777
|
/**
|
|
769
778
|
* Clés des options du menu bulle d'image
|
|
770
779
|
*/
|
|
771
|
-
declare const ATE_IMAGE_BUBBLE_MENU_KEYS: readonly ["changeImage", "resizeSmall", "resizeMedium", "resizeLarge", "resizeOriginal", "deleteImage", "separator"];
|
|
780
|
+
declare const ATE_IMAGE_BUBBLE_MENU_KEYS: readonly ["changeImage", "downloadImage", "resizeSmall", "resizeMedium", "resizeLarge", "resizeOriginal", "alignLeft", "alignCenter", "alignRight", "deleteImage", "separator"];
|
|
772
781
|
type AteImageBubbleMenuKey = (typeof ATE_IMAGE_BUBBLE_MENU_KEYS)[number];
|
|
773
782
|
type AteImageBubbleMenuConfig = Partial<Record<AteImageBubbleMenuKey, boolean>>;
|
|
774
783
|
/**
|
|
@@ -974,6 +983,8 @@ interface AteEditorConfig {
|
|
|
974
983
|
showTableMenu?: boolean;
|
|
975
984
|
/** Show or hide the cell menu */
|
|
976
985
|
showCellMenu?: boolean;
|
|
986
|
+
/** Whether to allow image downloading from bubble menu */
|
|
987
|
+
downloadImage?: boolean;
|
|
977
988
|
/** Enable or disable slash commands (/) */
|
|
978
989
|
enableSlashCommands?: boolean;
|
|
979
990
|
/** Maximum number of characters allowed */
|
|
@@ -1063,7 +1074,7 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
|
|
|
1063
1074
|
showBubbleMenu: _angular_core.InputSignal<boolean | undefined>;
|
|
1064
1075
|
bubbleMenu: _angular_core.InputSignal<Partial<AteBubbleMenuConfig> | undefined>;
|
|
1065
1076
|
showImageBubbleMenu: _angular_core.InputSignal<boolean | undefined>;
|
|
1066
|
-
imageBubbleMenu: _angular_core.InputSignal<Partial<Partial<Record<"separator" | "changeImage" | "resizeSmall" | "resizeMedium" | "resizeLarge" | "resizeOriginal" | "deleteImage", boolean>>> | undefined>;
|
|
1077
|
+
imageBubbleMenu: _angular_core.InputSignal<Partial<Partial<Record<"separator" | "alignLeft" | "alignCenter" | "alignRight" | "changeImage" | "downloadImage" | "resizeSmall" | "resizeMedium" | "resizeLarge" | "resizeOriginal" | "deleteImage", boolean>>> | undefined>;
|
|
1067
1078
|
toolbar: _angular_core.InputSignal<Partial<AteToolbarConfig> | undefined>;
|
|
1068
1079
|
showTableBubbleMenu: _angular_core.InputSignal<boolean | undefined>;
|
|
1069
1080
|
tableBubbleMenu: _angular_core.InputSignal<Partial<Partial<Record<"addColumnBefore" | "addColumnAfter" | "deleteColumn" | "addRowBefore" | "addRowAfter" | "deleteRow" | "deleteTable" | "toggleHeaderColumn" | "toggleHeaderRow" | "separator", boolean>>> | undefined>;
|
|
@@ -1144,7 +1155,7 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
|
|
|
1144
1155
|
readonly finalShowBubbleMenu: _angular_core.Signal<boolean>;
|
|
1145
1156
|
readonly finalBubbleMenuConfig: _angular_core.Signal<AteBubbleMenuConfig>;
|
|
1146
1157
|
readonly finalShowImageBubbleMenu: _angular_core.Signal<boolean>;
|
|
1147
|
-
readonly finalImageBubbleMenuConfig: _angular_core.Signal<Partial<Record<"separator" | "changeImage" | "resizeSmall" | "resizeMedium" | "resizeLarge" | "resizeOriginal" | "deleteImage", boolean>>>;
|
|
1158
|
+
readonly finalImageBubbleMenuConfig: _angular_core.Signal<Partial<Record<"separator" | "alignLeft" | "alignCenter" | "alignRight" | "changeImage" | "downloadImage" | "resizeSmall" | "resizeMedium" | "resizeLarge" | "resizeOriginal" | "deleteImage", boolean>>>;
|
|
1148
1159
|
readonly finalShowTableBubbleMenu: _angular_core.Signal<boolean>;
|
|
1149
1160
|
readonly finalTableBubbleMenuConfig: _angular_core.Signal<Partial<Record<"addColumnBefore" | "addColumnAfter" | "deleteColumn" | "addRowBefore" | "addRowAfter" | "deleteRow" | "deleteTable" | "toggleHeaderColumn" | "toggleHeaderRow" | "separator", boolean>>>;
|
|
1150
1161
|
readonly finalShowCellBubbleMenu: _angular_core.Signal<boolean>;
|
|
@@ -1162,15 +1173,11 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
|
|
|
1162
1173
|
readonly finalAngularNodesConfig: _angular_core.Signal<AteAngularNode[]>;
|
|
1163
1174
|
readonly finalImageUploadConfig: _angular_core.Signal<{
|
|
1164
1175
|
maxSize: number;
|
|
1165
|
-
quality
|
|
1166
|
-
maxWidth
|
|
1167
|
-
maxHeight
|
|
1168
|
-
allowedTypes
|
|
1176
|
+
quality?: number;
|
|
1177
|
+
maxWidth?: number;
|
|
1178
|
+
maxHeight?: number;
|
|
1179
|
+
allowedTypes?: string[];
|
|
1169
1180
|
handler?: AteImageUploadHandler;
|
|
1170
|
-
enableDragDrop: boolean;
|
|
1171
|
-
showPreview: boolean;
|
|
1172
|
-
multiple: boolean;
|
|
1173
|
-
compressImages: boolean;
|
|
1174
1181
|
}>;
|
|
1175
1182
|
readonly finalImageUploadHandler: _angular_core.Signal<AteImageUploadHandler | undefined>;
|
|
1176
1183
|
readonly currentTranslations: _angular_core.Signal<_flogeez_angular_tiptap_editor.AteTranslations>;
|
|
@@ -1208,6 +1215,7 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
|
|
|
1208
1215
|
showImageBubbleMenu?: boolean;
|
|
1209
1216
|
showTableMenu?: boolean;
|
|
1210
1217
|
showCellMenu?: boolean;
|
|
1218
|
+
downloadImage?: boolean;
|
|
1211
1219
|
enableSlashCommands?: boolean;
|
|
1212
1220
|
maxCharacters?: number;
|
|
1213
1221
|
toolbar?: AteToolbarConfig;
|
|
@@ -1306,6 +1314,8 @@ declare class AteImageService {
|
|
|
1306
1314
|
} | null;
|
|
1307
1315
|
/** Remove the selected image */
|
|
1308
1316
|
deleteImage(editor: Editor): void;
|
|
1317
|
+
/** Download the current image */
|
|
1318
|
+
downloadImage(editor: Editor): void;
|
|
1309
1319
|
private updateSelectedImage;
|
|
1310
1320
|
/** Validate file type and size */
|
|
1311
1321
|
validateImage(file: File, options?: {
|
|
@@ -1463,6 +1473,7 @@ declare const ATE_DEFAULT_BUBBLE_MENU_CONFIG: AteBubbleMenuConfig;
|
|
|
1463
1473
|
declare const ATE_DEFAULT_IMAGE_BUBBLE_MENU_CONFIG: AteImageBubbleMenuConfig;
|
|
1464
1474
|
declare const ATE_DEFAULT_TABLE_MENU_CONFIG: AteTableBubbleMenuConfig;
|
|
1465
1475
|
declare const ATE_DEFAULT_CELL_MENU_CONFIG: AteCellBubbleMenuConfig;
|
|
1476
|
+
declare const ATE_DEFAULT_IMAGE_UPLOAD_CONFIG: AteImageUploadConfig;
|
|
1466
1477
|
|
|
1467
1478
|
/**
|
|
1468
1479
|
* Ultimate default configuration for the Angular Tiptap Editor.
|
|
@@ -1650,5 +1661,5 @@ declare function createAngularComponentExtension<T = unknown>(injector: Injector
|
|
|
1650
1661
|
*/
|
|
1651
1662
|
declare function registerAngularComponent<T = unknown>(injectorOrOptions: Injector | RegisterAngularComponentOptions<T>, maybeOptions?: RegisterAngularComponentOptions<T>): Node$2;
|
|
1652
1663
|
|
|
1653
|
-
export { ATE_BUBBLE_MENU_KEYS, ATE_CELL_BUBBLE_MENU_KEYS, ATE_DEFAULT_BUBBLE_MENU_CONFIG, ATE_DEFAULT_CELL_MENU_CONFIG, ATE_DEFAULT_CONFIG, ATE_DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, ATE_DEFAULT_SLASH_COMMANDS_CONFIG, ATE_DEFAULT_TABLE_MENU_CONFIG, ATE_DEFAULT_TOOLBAR_CONFIG, ATE_GLOBAL_CONFIG, ATE_IMAGE_BUBBLE_MENU_KEYS, ATE_INITIAL_EDITOR_STATE, ATE_SLASH_COMMAND_KEYS, ATE_TABLE_BUBBLE_MENU_KEYS, ATE_TOOLBAR_KEYS, AngularTiptapEditorComponent, AteAngularNodeView, AteColorPickerService, AteDiscoveryCalculator, AteEditorCommandsService, AteI18nService, AteImageCalculator, AteImageService, AteLinkService, AteMarksCalculator, AteNodeViewRenderer, AteNoopValueAccessorDirective, AteSelectionCalculator, AteStructureCalculator, AteTableCalculator, createAngularComponentExtension, createDefaultSlashCommands, filterSlashCommands, provideAteEditor, registerAngularComponent };
|
|
1664
|
+
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, createAngularComponentExtension, createDefaultSlashCommands, filterSlashCommands, provideAteEditor, registerAngularComponent };
|
|
1654
1665
|
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 };
|
package/package.json
CHANGED
|
@@ -14,11 +14,11 @@
|
|
|
14
14
|
.tippy-box .bubble-menu {
|
|
15
15
|
display: flex !important;
|
|
16
16
|
align-items: center;
|
|
17
|
-
gap:
|
|
17
|
+
gap: var(--ate-menu-gap, 2px);
|
|
18
18
|
background: var(--ate-menu-bg, rgb(255, 255, 255)) !important;
|
|
19
19
|
border: 1px solid var(--ate-menu-border, rgba(0, 0, 0, 0.1));
|
|
20
20
|
border-radius: var(--ate-menu-border-radius, 12px);
|
|
21
|
-
padding: var(--ate-menu-padding,
|
|
21
|
+
padding: var(--ate-menu-padding, 4px);
|
|
22
22
|
box-shadow: var(--ate-menu-shadow, 0 8px 32px rgba(0, 0, 0, 0.12));
|
|
23
23
|
z-index: 1000;
|
|
24
24
|
animation: slideUp 0.18s cubic-bezier(0, 0, 0.2, 1);
|
|
@@ -32,13 +32,6 @@
|
|
|
32
32
|
pointer-events: none !important;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
.bubble-menu .ate-separator {
|
|
36
|
-
width: 1px;
|
|
37
|
-
height: 28px;
|
|
38
|
-
background: color-mix(in srgb, var(--ate-menu-border), transparent 50%);
|
|
39
|
-
margin: 0 4px;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
35
|
@keyframes slideUp {
|
|
43
36
|
from {
|
|
44
37
|
opacity: 0;
|
package/src/lib/styles/index.css
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
@import "./ate-bubble-menu.global.css";
|
|
2
2
|
@import "./material-symbols.css";
|
|
3
3
|
|
|
4
|
-
/* Styles
|
|
4
|
+
/* Styles for links */
|
|
5
5
|
.ate-link {
|
|
6
|
-
color: var(--ate-primary, #
|
|
6
|
+
color: var(--ate-primary, #2563eb);
|
|
7
7
|
text-decoration: underline;
|
|
8
8
|
cursor: pointer;
|
|
9
9
|
transition: color 0.2s ease;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
.ate-link:hover {
|
|
13
|
-
color: var(--ate-primary-
|
|
13
|
+
color: var(--ate-primary-hover, #153ca9);
|
|
14
14
|
text-decoration: underline;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
/* Styles
|
|
17
|
+
/* Styles for highlight */
|
|
18
18
|
.ate-highlight {
|
|
19
19
|
background-color: var(--ate-highlight-bg, #fef08a);
|
|
20
20
|
padding: 0.1em 0.2em;
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
color: var(--ate-highlight-color, #854d0e);
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
/* Styles
|
|
25
|
+
/* Styles for text alignment - Tiptap uses classes */
|
|
26
26
|
.ProseMirror .has-text-align-left {
|
|
27
27
|
text-align: left;
|
|
28
28
|
}
|