@flogeez/angular-tiptap-editor 3.0.1 → 3.0.3
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 +24 -0
- package/fesm2022/flogeez-angular-tiptap-editor.mjs +642 -384
- package/fesm2022/flogeez-angular-tiptap-editor.mjs.map +1 -1
- package/index.d.ts +70 -23
- package/package.json +1 -1
- package/src/lib/styles/ate-bubble-menu.global.css +15 -18
- package/src/lib/styles/ate-tooltip.global.css +47 -0
- package/src/lib/styles/index.css +6 -5
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { inject, ElementRef, input, computed, effect, Directive, output, ChangeDetectionStrategy, Component, signal, Injectable, viewChild, ApplicationRef, EnvironmentInjector, createComponent, InjectionToken, DestroyRef, Injector, untracked, makeEnvironmentProviders, provideEnvironmentInitializer } from '@angular/core';
|
|
3
3
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
4
4
|
import { Node as Node$1, nodeInputRule, mergeAttributes, Extension, getAttributes, Editor } from '@tiptap/core';
|
|
5
5
|
import StarterKit from '@tiptap/starter-kit';
|
|
@@ -14,9 +14,9 @@ import OfficePaste from '@intevation/tiptap-extension-office-paste';
|
|
|
14
14
|
import { Plugin, PluginKey, TextSelection, NodeSelection } from '@tiptap/pm/state';
|
|
15
15
|
import { DecorationSet, Decoration } from '@tiptap/pm/view';
|
|
16
16
|
import { Table, TableRow, TableHeader, TableCell } from '@tiptap/extension-table';
|
|
17
|
+
import tippy, { sticky } from 'tippy.js';
|
|
17
18
|
import { isObservable, firstValueFrom, Subscription, concat, defer, of, tap } from 'rxjs';
|
|
18
19
|
import { CommonModule } from '@angular/common';
|
|
19
|
-
import tippy, { sticky } from 'tippy.js';
|
|
20
20
|
import * as i1 from '@angular/forms';
|
|
21
21
|
import { FormsModule, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
|
|
22
22
|
import { CellSelection } from '@tiptap/pm/tables';
|
|
@@ -119,6 +119,13 @@ const AteResizableImage = Node$1.create({
|
|
|
119
119
|
},
|
|
120
120
|
addNodeView() {
|
|
121
121
|
return ({ node, getPos, editor }) => {
|
|
122
|
+
const wrapper = document.createElement("div");
|
|
123
|
+
wrapper.className = "resizable-image-wrapper";
|
|
124
|
+
wrapper.style.display = "block";
|
|
125
|
+
if (node.attrs["textAlign"]) {
|
|
126
|
+
wrapper.style.textAlign = node.attrs["textAlign"];
|
|
127
|
+
wrapper.setAttribute("data-align", node.attrs["textAlign"]);
|
|
128
|
+
}
|
|
122
129
|
const container = document.createElement("div");
|
|
123
130
|
container.className = "resizable-image-container";
|
|
124
131
|
container.style.position = "relative";
|
|
@@ -128,20 +135,32 @@ const AteResizableImage = Node$1.create({
|
|
|
128
135
|
img.alt = node.attrs["alt"] || "";
|
|
129
136
|
img.title = node.attrs["title"] || "";
|
|
130
137
|
img.className = "ate-image";
|
|
138
|
+
img.style.display = "inline-block"; // Ensure it respects container text-align
|
|
131
139
|
if (node.attrs["width"]) {
|
|
132
140
|
img.width = node.attrs["width"];
|
|
133
141
|
}
|
|
134
142
|
if (node.attrs["height"]) {
|
|
135
143
|
img.height = node.attrs["height"];
|
|
136
144
|
}
|
|
137
|
-
|
|
145
|
+
wrapper.appendChild(container);
|
|
138
146
|
container.appendChild(img);
|
|
147
|
+
// Allow selection in read-only mode to show bubble menu/download
|
|
148
|
+
img.addEventListener("click", e => {
|
|
149
|
+
if (!editor.isEditable) {
|
|
150
|
+
e.preventDefault();
|
|
151
|
+
e.stopPropagation();
|
|
152
|
+
const pos = getPos();
|
|
153
|
+
if (typeof pos === "number") {
|
|
154
|
+
editor.commands.setNodeSelection(pos);
|
|
155
|
+
editor.view.focus();
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
});
|
|
139
159
|
// Add modern resize controls
|
|
140
160
|
const resizeControls = document.createElement("div");
|
|
141
161
|
resizeControls.className = "resize-controls";
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
const handles = ["nw", "n", "ne", "w", "e", "sw", "s", "se"];
|
|
162
|
+
// Create 2 handles (sides only) for a minimalist UI
|
|
163
|
+
const handles = ["w", "e"];
|
|
145
164
|
handles.forEach(direction => {
|
|
146
165
|
const handle = document.createElement("div");
|
|
147
166
|
handle.className = `resize-handle resize-handle-${direction}`;
|
|
@@ -153,7 +172,6 @@ const AteResizableImage = Node$1.create({
|
|
|
153
172
|
// Variables for resizing
|
|
154
173
|
let isResizing = false;
|
|
155
174
|
let startX = 0;
|
|
156
|
-
let startY = 0;
|
|
157
175
|
let startWidth = 0;
|
|
158
176
|
let startHeight = 0;
|
|
159
177
|
let aspectRatio = 1;
|
|
@@ -167,7 +185,6 @@ const AteResizableImage = Node$1.create({
|
|
|
167
185
|
e.stopPropagation();
|
|
168
186
|
isResizing = true;
|
|
169
187
|
startX = e.clientX;
|
|
170
|
-
startY = e.clientY;
|
|
171
188
|
// Use current image dimensions instead of initial ones
|
|
172
189
|
startWidth =
|
|
173
190
|
parseInt(img.getAttribute("width") || "0") || node.attrs["width"] || img.naturalWidth;
|
|
@@ -180,7 +197,6 @@ const AteResizableImage = Node$1.create({
|
|
|
180
197
|
return;
|
|
181
198
|
}
|
|
182
199
|
const deltaX = e.clientX - startX;
|
|
183
|
-
const deltaY = e.clientY - startY;
|
|
184
200
|
let newWidth = startWidth;
|
|
185
201
|
let newHeight = startHeight;
|
|
186
202
|
// Resize according to direction
|
|
@@ -193,30 +209,6 @@ const AteResizableImage = Node$1.create({
|
|
|
193
209
|
newWidth = startWidth - deltaX;
|
|
194
210
|
newHeight = newWidth / aspectRatio;
|
|
195
211
|
break;
|
|
196
|
-
case "s":
|
|
197
|
-
newHeight = startHeight + deltaY;
|
|
198
|
-
newWidth = newHeight * aspectRatio;
|
|
199
|
-
break;
|
|
200
|
-
case "n":
|
|
201
|
-
newHeight = startHeight - deltaY;
|
|
202
|
-
newWidth = newHeight * aspectRatio;
|
|
203
|
-
break;
|
|
204
|
-
case "se":
|
|
205
|
-
newWidth = startWidth + deltaX;
|
|
206
|
-
newHeight = startHeight + deltaY;
|
|
207
|
-
break;
|
|
208
|
-
case "sw":
|
|
209
|
-
newWidth = startWidth - deltaX;
|
|
210
|
-
newHeight = startHeight + deltaY;
|
|
211
|
-
break;
|
|
212
|
-
case "ne":
|
|
213
|
-
newWidth = startWidth + deltaX;
|
|
214
|
-
newHeight = startHeight - deltaY;
|
|
215
|
-
break;
|
|
216
|
-
case "nw":
|
|
217
|
-
newWidth = startWidth - deltaX;
|
|
218
|
-
newHeight = startHeight - deltaY;
|
|
219
|
-
break;
|
|
220
212
|
}
|
|
221
213
|
// Limits
|
|
222
214
|
newWidth = Math.max(50, Math.min(2000, newWidth));
|
|
@@ -257,17 +249,17 @@ const AteResizableImage = Node$1.create({
|
|
|
257
249
|
});
|
|
258
250
|
// Proper selection management via ProseMirror lifecycle
|
|
259
251
|
const selectNode = () => {
|
|
260
|
-
|
|
252
|
+
wrapper.classList.add("selected");
|
|
261
253
|
container.classList.add("selected");
|
|
262
254
|
img.classList.add("selected");
|
|
263
255
|
};
|
|
264
256
|
const deselectNode = () => {
|
|
265
|
-
|
|
257
|
+
wrapper.classList.remove("selected");
|
|
266
258
|
container.classList.remove("selected");
|
|
267
259
|
img.classList.remove("selected");
|
|
268
260
|
};
|
|
269
261
|
return {
|
|
270
|
-
dom:
|
|
262
|
+
dom: wrapper,
|
|
271
263
|
selectNode,
|
|
272
264
|
deselectNode,
|
|
273
265
|
update: updatedNode => {
|
|
@@ -283,8 +275,21 @@ const AteResizableImage = Node$1.create({
|
|
|
283
275
|
if (updatedNode.attrs["height"]) {
|
|
284
276
|
img.height = updatedNode.attrs["height"];
|
|
285
277
|
}
|
|
278
|
+
if (updatedNode.attrs["textAlign"]) {
|
|
279
|
+
wrapper.style.textAlign = updatedNode.attrs["textAlign"];
|
|
280
|
+
wrapper.setAttribute("data-align", updatedNode.attrs["textAlign"]);
|
|
281
|
+
}
|
|
282
|
+
else {
|
|
283
|
+
wrapper.style.textAlign = "";
|
|
284
|
+
wrapper.removeAttribute("data-align");
|
|
285
|
+
}
|
|
286
286
|
return true;
|
|
287
287
|
},
|
|
288
|
+
stopEvent: (event) => {
|
|
289
|
+
const target = event.target;
|
|
290
|
+
return !!target.closest(".resize-controls");
|
|
291
|
+
},
|
|
292
|
+
ignoreMutation: () => true,
|
|
288
293
|
};
|
|
289
294
|
};
|
|
290
295
|
},
|
|
@@ -678,6 +683,141 @@ const AteTiptapStateExtension = Extension.create({
|
|
|
678
683
|
},
|
|
679
684
|
});
|
|
680
685
|
|
|
686
|
+
// Pre-calculate platform once to avoid repeated checks
|
|
687
|
+
const IS_MAC = typeof window !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
|
|
688
|
+
class AteTooltipDirective {
|
|
689
|
+
constructor() {
|
|
690
|
+
this.el = inject(ElementRef);
|
|
691
|
+
this.tippyInstance = null;
|
|
692
|
+
// Signal Inputs
|
|
693
|
+
this.content = input(null, ...(ngDevMode ? [{ debugName: "content", alias: "ateTooltip" }] : [{ alias: "ateTooltip" }]));
|
|
694
|
+
this.placement = input("top", ...(ngDevMode ? [{ debugName: "placement", alias: "ateTooltipPlacement" }] : [{ alias: "ateTooltipPlacement" }]));
|
|
695
|
+
this.delay = input([200, 50], ...(ngDevMode ? [{ debugName: "delay", alias: "ateTooltipDelay" }] : [{ alias: "ateTooltipDelay" }]));
|
|
696
|
+
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: "ateTooltipDisabled" }] : [{ alias: "ateTooltipDisabled" }]));
|
|
697
|
+
/**
|
|
698
|
+
* Computed logic for ARIA shortcuts.
|
|
699
|
+
*/
|
|
700
|
+
this.ariaShortcut = computed(() => {
|
|
701
|
+
const text = this.content();
|
|
702
|
+
if (!text || !text.includes("\n")) {
|
|
703
|
+
return null;
|
|
704
|
+
}
|
|
705
|
+
return text.split("\n")[1].replace(/\+/g, " ");
|
|
706
|
+
}, ...(ngDevMode ? [{ debugName: "ariaShortcut" }] : []));
|
|
707
|
+
/**
|
|
708
|
+
* Computed logic for Tippy content.
|
|
709
|
+
* Includes strict escaping of dynamic content to prevent XSS.
|
|
710
|
+
*/
|
|
711
|
+
this.processedTooltip = computed(() => {
|
|
712
|
+
const text = this.content();
|
|
713
|
+
if (!text) {
|
|
714
|
+
return { content: "", isHTML: false };
|
|
715
|
+
}
|
|
716
|
+
if (text.includes("\n")) {
|
|
717
|
+
const [label, shortcut] = text.split("\n");
|
|
718
|
+
// Escape dynamic parts to prevent XSS before wrapping in safe HTML
|
|
719
|
+
const safeLabel = this.escapeHtml(label);
|
|
720
|
+
let safeShortcut = this.escapeHtml(shortcut);
|
|
721
|
+
if (IS_MAC) {
|
|
722
|
+
safeShortcut = safeShortcut.replace(/Ctrl\+/g, "⌘").replace(/Mod\+/g, "⌘");
|
|
723
|
+
}
|
|
724
|
+
else {
|
|
725
|
+
safeShortcut = safeShortcut.replace(/Mod\+/g, "Ctrl+");
|
|
726
|
+
}
|
|
727
|
+
return {
|
|
728
|
+
content: `<div class="ate-tooltip-label">${safeLabel}</div><div class="ate-tooltip-shortcut"><kbd>${safeShortcut}</kbd></div>`,
|
|
729
|
+
isHTML: true,
|
|
730
|
+
};
|
|
731
|
+
}
|
|
732
|
+
// No newline? Keep it as plain text (Tippy handles string as text by default)
|
|
733
|
+
return { content: text, isHTML: false };
|
|
734
|
+
}, ...(ngDevMode ? [{ debugName: "processedTooltip" }] : []));
|
|
735
|
+
effect(() => {
|
|
736
|
+
const { content, isHTML } = this.processedTooltip();
|
|
737
|
+
const placement = this.placement();
|
|
738
|
+
const delay = this.delay();
|
|
739
|
+
const isDisabled = this.disabled();
|
|
740
|
+
if (isDisabled || !content) {
|
|
741
|
+
this.destroyTippy();
|
|
742
|
+
return;
|
|
743
|
+
}
|
|
744
|
+
if (!this.tippyInstance) {
|
|
745
|
+
this.initTippy(content, isHTML, placement, delay);
|
|
746
|
+
}
|
|
747
|
+
else {
|
|
748
|
+
this.tippyInstance.setProps({
|
|
749
|
+
content,
|
|
750
|
+
allowHTML: isHTML,
|
|
751
|
+
placement,
|
|
752
|
+
delay,
|
|
753
|
+
});
|
|
754
|
+
}
|
|
755
|
+
});
|
|
756
|
+
}
|
|
757
|
+
ngOnDestroy() {
|
|
758
|
+
this.destroyTippy();
|
|
759
|
+
}
|
|
760
|
+
/**
|
|
761
|
+
* Basic HTML escaping for security.
|
|
762
|
+
* Effectively neutralizes scripts or malicious HTML tags.
|
|
763
|
+
*/
|
|
764
|
+
escapeHtml(unsafe) {
|
|
765
|
+
return unsafe
|
|
766
|
+
.replace(/&/g, "&")
|
|
767
|
+
.replace(/</g, "<")
|
|
768
|
+
.replace(/>/g, ">")
|
|
769
|
+
.replace(/"/g, """)
|
|
770
|
+
.replace(/'/g, "'");
|
|
771
|
+
}
|
|
772
|
+
initTippy(content, allowHTML, placement, delay) {
|
|
773
|
+
const container = this.el.nativeElement.closest(".ate-editor") || document.body;
|
|
774
|
+
this.tippyInstance = tippy(this.el.nativeElement, {
|
|
775
|
+
content,
|
|
776
|
+
allowHTML,
|
|
777
|
+
placement,
|
|
778
|
+
delay,
|
|
779
|
+
duration: [100, 100],
|
|
780
|
+
offset: [0, 6],
|
|
781
|
+
theme: "ate-tooltip",
|
|
782
|
+
touch: ["hold", 500],
|
|
783
|
+
maxWidth: 250,
|
|
784
|
+
appendTo: () => container,
|
|
785
|
+
aria: {
|
|
786
|
+
content: "describedby",
|
|
787
|
+
},
|
|
788
|
+
popperOptions: {
|
|
789
|
+
modifiers: [
|
|
790
|
+
{
|
|
791
|
+
name: "preventOverflow",
|
|
792
|
+
options: {
|
|
793
|
+
boundary: document.body,
|
|
794
|
+
padding: 8,
|
|
795
|
+
},
|
|
796
|
+
},
|
|
797
|
+
],
|
|
798
|
+
},
|
|
799
|
+
});
|
|
800
|
+
}
|
|
801
|
+
destroyTippy() {
|
|
802
|
+
if (this.tippyInstance) {
|
|
803
|
+
this.tippyInstance.destroy();
|
|
804
|
+
this.tippyInstance = null;
|
|
805
|
+
}
|
|
806
|
+
}
|
|
807
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AteTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
808
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.16", type: AteTooltipDirective, isStandalone: true, selector: "[ateTooltip]", inputs: { content: { classPropertyName: "content", publicName: "ateTooltip", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "ateTooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "ateTooltipDelay", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ateTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-keyshortcuts": "ariaShortcut()" } }, ngImport: i0 }); }
|
|
809
|
+
}
|
|
810
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AteTooltipDirective, decorators: [{
|
|
811
|
+
type: Directive,
|
|
812
|
+
args: [{
|
|
813
|
+
selector: "[ateTooltip]",
|
|
814
|
+
standalone: true,
|
|
815
|
+
host: {
|
|
816
|
+
"[attr.aria-keyshortcuts]": "ariaShortcut()",
|
|
817
|
+
},
|
|
818
|
+
}]
|
|
819
|
+
}], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "ateTooltip", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "ateTooltipPlacement", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "ateTooltipDelay", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ateTooltipDisabled", required: false }] }] } });
|
|
820
|
+
|
|
681
821
|
class AteButtonComponent {
|
|
682
822
|
constructor() {
|
|
683
823
|
// Inputs
|
|
@@ -712,7 +852,7 @@ class AteButtonComponent {
|
|
|
712
852
|
[disabled]="disabled()"
|
|
713
853
|
[style.color]="color()"
|
|
714
854
|
[style.background-color]="backgroundColor()"
|
|
715
|
-
[
|
|
855
|
+
[ateTooltip]="title()"
|
|
716
856
|
[attr.aria-label]="title()"
|
|
717
857
|
(mousedown)="onMouseDown($event)"
|
|
718
858
|
(click)="buttonClick.emit($event)"
|
|
@@ -728,11 +868,11 @@ class AteButtonComponent {
|
|
|
728
868
|
}
|
|
729
869
|
<ng-content></ng-content>
|
|
730
870
|
</button>
|
|
731
|
-
`, isInline: true, styles: [".ate-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;border-radius:var(--ate-sub-border-radius, 8px);cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);color:var(--ate-toolbar-button-color, var(--ate-text-secondary));position:relative;overflow:hidden}.ate-button:before{content:\"\";position:absolute;inset:0;background:var(--ate-primary);opacity:0;transition:opacity .2s ease;border-radius:var(--ate-sub-border-radius, 8px)}.ate-button:hover:not(.has-custom-color){color:var(--ate-toolbar-button-active-color, var(--ate-primary));background:var(--ate-toolbar-button-hover-background, transparent);transform:translateY(-1px)}.ate-button.has-custom-color:hover:not(.has-custom-bg){background:var(--ate-toolbar-button-hover-background, transparent);transform:translateY(-1px)}.ate-button.has-custom-bg:hover{transform:translateY(-1px);filter:brightness(.9)}.ate-button:hover:before{opacity:.1}.ate-button:active{transform:translateY(0)}.ate-button.is-active:not(.has-custom-color){color:var(--ate-toolbar-button-active-color, var(--ate-primary));background:var(--ate-toolbar-button-active-background, var(--ate-primary-light))}.ate-button.is-active.has-custom-color{background:var(--ate-toolbar-button-active-background, var(--ate-primary-light))}.ate-button:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.ate-button .material-symbols-outlined{font-size:20px;position:relative;z-index:1}.ate-button .material-symbols-outlined.icon-small{font-size:16px}.ate-button .material-symbols-outlined.icon-medium{font-size:20px}.ate-button .material-symbols-outlined.icon-large{font-size:24px}.ate-button.text-button{width:auto;padding:0 12px;font-size:14px;font-weight:500;gap:8px}.ate-button.color-button{width:28px;height:28px;border-radius:50%;border:2px solid transparent;transition:all .2s ease}.ate-button.color-button:hover{border-color:var(--ate-border);transform:scale(1.1)}.ate-button.color-button.is-active{border-color:var(--ate-primary);box-shadow:0 0 0 2px var(--ate-primary-light)}.ate-button.danger{color:var(--ate-error-color, #ef4444)}.ate-button.danger:hover{color:var(--ate-error-color, #ef4444);background:var(--ate-error-bg, rgba(239, 68, 68, .1))}.ate-button.danger:before{background:var(--ate-error-color, #ef4444)}.ate-button.small{width:24px;height:24px}.ate-button.medium{width:32px;height:32px}.ate-button.large{width:40px;height:40px}@keyframes pulse{0%,to{box-shadow:0 0 0 0 var(--ate-primary-light-alpha)}50%{box-shadow:0 0 0 4px transparent}}.ate-button.is-active.pulse{animation:pulse 2s infinite}@media (max-width: 768px){.ate-button{width:32px;height:32px}.ate-button .material-symbols-outlined{font-size:18px}.ate-button.text-button{padding:0 8px;font-size:13px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
871
|
+
`, isInline: true, styles: [".ate-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;border-radius:var(--ate-sub-border-radius, 8px);cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);color:var(--ate-toolbar-button-color, var(--ate-text-secondary));position:relative;overflow:hidden}.ate-button:before{content:\"\";position:absolute;inset:0;background:var(--ate-primary);opacity:0;transition:opacity .2s ease;border-radius:var(--ate-sub-border-radius, 8px)}.ate-button:hover:not(.has-custom-color){color:var(--ate-toolbar-button-active-color, var(--ate-primary));background:var(--ate-toolbar-button-hover-background, transparent);transform:translateY(-1px)}.ate-button.has-custom-color:hover:not(.has-custom-bg){background:var(--ate-toolbar-button-hover-background, transparent);transform:translateY(-1px)}.ate-button.has-custom-bg:hover{transform:translateY(-1px);filter:brightness(.9)}.ate-button:hover:before{opacity:.1}.ate-button:active{transform:translateY(0)}.ate-button.is-active:not(.has-custom-color){color:var(--ate-toolbar-button-active-color, var(--ate-primary));background:var(--ate-toolbar-button-active-background, var(--ate-primary-light))}.ate-button.is-active.has-custom-color{background:var(--ate-toolbar-button-active-background, var(--ate-primary-light))}.ate-button:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.ate-button .material-symbols-outlined{font-size:20px;position:relative;z-index:1}.ate-button .material-symbols-outlined.icon-small{font-size:16px}.ate-button .material-symbols-outlined.icon-medium{font-size:20px}.ate-button .material-symbols-outlined.icon-large{font-size:24px}.ate-button.text-button{width:auto;padding:0 12px;font-size:14px;font-weight:500;gap:8px}.ate-button.color-button{width:28px;height:28px;border-radius:50%;border:2px solid transparent;transition:all .2s ease}.ate-button.color-button:hover{border-color:var(--ate-border);transform:scale(1.1)}.ate-button.color-button.is-active{border-color:var(--ate-primary);box-shadow:0 0 0 2px var(--ate-primary-light)}.ate-button.danger{color:var(--ate-error-color, #ef4444)}.ate-button.danger:hover{color:var(--ate-error-color, #ef4444);background:var(--ate-error-bg, rgba(239, 68, 68, .1))}.ate-button.danger:before{background:var(--ate-error-color, #ef4444)}.ate-button.small{width:24px;height:24px}.ate-button.medium{width:32px;height:32px}.ate-button.large{width:40px;height:40px}@keyframes pulse{0%,to{box-shadow:0 0 0 0 var(--ate-primary-light-alpha)}50%{box-shadow:0 0 0 4px transparent}}.ate-button.is-active.pulse{animation:pulse 2s infinite}@media (max-width: 768px){.ate-button{width:32px;height:32px}.ate-button .material-symbols-outlined{font-size:18px}.ate-button.text-button{padding:0 8px;font-size:13px}}\n"], dependencies: [{ kind: "directive", type: AteTooltipDirective, selector: "[ateTooltip]", inputs: ["ateTooltip", "ateTooltipPlacement", "ateTooltipDelay", "ateTooltipDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
732
872
|
}
|
|
733
873
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AteButtonComponent, decorators: [{
|
|
734
874
|
type: Component,
|
|
735
|
-
args: [{ selector: "ate-button", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
875
|
+
args: [{ selector: "ate-button", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AteTooltipDirective], template: `
|
|
736
876
|
<button
|
|
737
877
|
class="ate-button"
|
|
738
878
|
[class.is-active]="active()"
|
|
@@ -747,7 +887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
747
887
|
[disabled]="disabled()"
|
|
748
888
|
[style.color]="color()"
|
|
749
889
|
[style.background-color]="backgroundColor()"
|
|
750
|
-
[
|
|
890
|
+
[ateTooltip]="title()"
|
|
751
891
|
[attr.aria-label]="title()"
|
|
752
892
|
(mousedown)="onMouseDown($event)"
|
|
753
893
|
(click)="buttonClick.emit($event)"
|
|
@@ -767,41 +907,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
767
907
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }] } });
|
|
768
908
|
|
|
769
909
|
class AteSeparatorComponent {
|
|
770
|
-
constructor() {
|
|
771
|
-
this.orientation = input("vertical", ...(ngDevMode ? [{ debugName: "orientation" }] : []));
|
|
772
|
-
this.size = input("medium", ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
773
|
-
}
|
|
774
910
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AteSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
775
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
776
|
-
<div
|
|
777
|
-
class="ate-separator"
|
|
778
|
-
[class.vertical]="orientation() === 'vertical'"
|
|
779
|
-
[class.horizontal]="orientation() === 'horizontal'"
|
|
780
|
-
[class.small]="size() === 'small'"
|
|
781
|
-
[class.medium]="size() === 'medium'"
|
|
782
|
-
[class.large]="size() === 'large'"></div>
|
|
783
|
-
`, isInline: true, styles: [".ate-separator{background-color:var(--ate-border, #e2e8f0);margin:0}.ate-separator.vertical{width:1px;height:24px;margin:0 8px}.ate-separator.horizontal{height:1px;width:100%;margin:8px 0}.ate-separator.small.vertical{height:16px;margin:0 4px}.ate-separator.small.horizontal{margin:4px 0}.ate-separator.medium.vertical{height:24px;margin:0 8px}.ate-separator.medium.horizontal{margin:8px 0}.ate-separator.large.vertical{height:32px;margin:0 12px}.ate-separator.large.horizontal{margin:12px 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
911
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AteSeparatorComponent, isStandalone: true, selector: "ate-separator", ngImport: i0, template: `<div class="ate-separator"></div>`, isInline: true, styles: [".ate-separator{width:1px;height:24px;background-color:var(--ate-border, #e2e8f0);margin:0 var(--ate-menu-gap, 2px);flex-shrink:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
784
912
|
}
|
|
785
913
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AteSeparatorComponent, decorators: [{
|
|
786
914
|
type: Component,
|
|
787
|
-
args: [{ selector: "ate-separator", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template:
|
|
788
|
-
|
|
789
|
-
class="ate-separator"
|
|
790
|
-
[class.vertical]="orientation() === 'vertical'"
|
|
791
|
-
[class.horizontal]="orientation() === 'horizontal'"
|
|
792
|
-
[class.small]="size() === 'small'"
|
|
793
|
-
[class.medium]="size() === 'medium'"
|
|
794
|
-
[class.large]="size() === 'large'"></div>
|
|
795
|
-
`, styles: [".ate-separator{background-color:var(--ate-border, #e2e8f0);margin:0}.ate-separator.vertical{width:1px;height:24px;margin:0 8px}.ate-separator.horizontal{height:1px;width:100%;margin:8px 0}.ate-separator.small.vertical{height:16px;margin:0 4px}.ate-separator.small.horizontal{margin:4px 0}.ate-separator.medium.vertical{height:24px;margin:0 8px}.ate-separator.medium.horizontal{margin:8px 0}.ate-separator.large.vertical{height:32px;margin:0 12px}.ate-separator.large.horizontal{margin:12px 0}\n"] }]
|
|
796
|
-
}], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
915
|
+
args: [{ selector: "ate-separator", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `<div class="ate-separator"></div>`, styles: [".ate-separator{width:1px;height:24px;background-color:var(--ate-border, #e2e8f0);margin:0 var(--ate-menu-gap, 2px);flex-shrink:0}\n"] }]
|
|
916
|
+
}] });
|
|
797
917
|
|
|
798
918
|
const ENGLISH_TRANSLATIONS = {
|
|
799
919
|
toolbar: {
|
|
800
|
-
bold: "Bold",
|
|
801
|
-
italic: "Italic",
|
|
802
|
-
underline: "Underline",
|
|
803
|
-
strike: "Strikethrough",
|
|
804
|
-
code: "Inline Code",
|
|
920
|
+
bold: "Bold\nCtrl+B",
|
|
921
|
+
italic: "Italic\nCtrl+I",
|
|
922
|
+
underline: "Underline\nCtrl+U",
|
|
923
|
+
strike: "Strikethrough\nCtrl+Shift+X",
|
|
924
|
+
code: "Inline Code\nCtrl+E",
|
|
805
925
|
codeBlock: "Code Block",
|
|
806
926
|
superscript: "Superscript",
|
|
807
927
|
subscript: "Subscript",
|
|
@@ -821,19 +941,19 @@ const ENGLISH_TRANSLATIONS = {
|
|
|
821
941
|
image: "Add Image",
|
|
822
942
|
horizontalRule: "Horizontal Rule",
|
|
823
943
|
table: "Insert Table",
|
|
824
|
-
undo: "Undo",
|
|
825
|
-
redo: "Redo",
|
|
944
|
+
undo: "Undo\nCtrl+Z",
|
|
945
|
+
redo: "Redo\nCtrl+Shift+Z",
|
|
826
946
|
clear: "Clear",
|
|
827
947
|
textColor: "Text Color",
|
|
828
948
|
customColor: "Custom Color",
|
|
829
949
|
presets: "Presets",
|
|
830
950
|
},
|
|
831
951
|
bubbleMenu: {
|
|
832
|
-
bold: "Bold",
|
|
833
|
-
italic: "Italic",
|
|
834
|
-
underline: "Underline",
|
|
835
|
-
strike: "Strikethrough",
|
|
836
|
-
code: "Code",
|
|
952
|
+
bold: "Bold\nCtrl+B",
|
|
953
|
+
italic: "Italic\nCtrl+I",
|
|
954
|
+
underline: "Underline\nCtrl+U",
|
|
955
|
+
strike: "Strikethrough\nCtrl+Shift+X",
|
|
956
|
+
code: "Code\nCtrl+E",
|
|
837
957
|
superscript: "Superscript",
|
|
838
958
|
subscript: "Subscript",
|
|
839
959
|
highlight: "Highlight",
|
|
@@ -925,11 +1045,15 @@ const ENGLISH_TRANSLATIONS = {
|
|
|
925
1045
|
invalidFileType: "Invalid file type",
|
|
926
1046
|
dragDropText: "Drag and drop images here",
|
|
927
1047
|
changeImage: "Change Image",
|
|
1048
|
+
downloadImage: "Download Image",
|
|
928
1049
|
deleteImage: "Delete Image",
|
|
929
1050
|
resizeSmall: "Small",
|
|
930
1051
|
resizeMedium: "Medium",
|
|
931
1052
|
resizeLarge: "Large",
|
|
932
1053
|
resizeOriginal: "Original",
|
|
1054
|
+
alignLeft: "Align Left",
|
|
1055
|
+
alignCenter: "Align Center",
|
|
1056
|
+
alignRight: "Align Right",
|
|
933
1057
|
resizing: "Resizing...",
|
|
934
1058
|
compressing: "Compressing...",
|
|
935
1059
|
compressionError: "Error during compression",
|
|
@@ -964,11 +1088,11 @@ const ENGLISH_TRANSLATIONS = {
|
|
|
964
1088
|
};
|
|
965
1089
|
const FRENCH_TRANSLATIONS = {
|
|
966
1090
|
toolbar: {
|
|
967
|
-
bold: "Gras",
|
|
968
|
-
italic: "Italique",
|
|
969
|
-
underline: "
|
|
970
|
-
strike: "
|
|
971
|
-
code: "Code en ligne",
|
|
1091
|
+
bold: "Gras\nCtrl+B",
|
|
1092
|
+
italic: "Italique\nCtrl+I",
|
|
1093
|
+
underline: "Souligné\nCtrl+U",
|
|
1094
|
+
strike: "Barré\nCtrl+Shift+X",
|
|
1095
|
+
code: "Code en ligne\nCtrl+E",
|
|
972
1096
|
codeBlock: "Bloc de code",
|
|
973
1097
|
superscript: "Exposant",
|
|
974
1098
|
subscript: "Indice",
|
|
@@ -988,24 +1112,24 @@ const FRENCH_TRANSLATIONS = {
|
|
|
988
1112
|
image: "Ajouter une image",
|
|
989
1113
|
horizontalRule: "Ligne horizontale",
|
|
990
1114
|
table: "Insérer un tableau",
|
|
991
|
-
undo: "Annuler",
|
|
992
|
-
redo: "Refaire",
|
|
1115
|
+
undo: "Annuler\nCtrl+Z",
|
|
1116
|
+
redo: "Refaire\nCtrl+Shift+Z",
|
|
993
1117
|
clear: "Vider",
|
|
994
|
-
textColor: "Couleur texte",
|
|
1118
|
+
textColor: "Couleur du texte",
|
|
995
1119
|
customColor: "Couleur personnalisée",
|
|
996
1120
|
presets: "Préréglages",
|
|
997
1121
|
},
|
|
998
1122
|
bubbleMenu: {
|
|
999
|
-
bold: "Gras",
|
|
1000
|
-
italic: "Italique",
|
|
1001
|
-
underline: "
|
|
1002
|
-
strike: "
|
|
1003
|
-
code: "Code",
|
|
1123
|
+
bold: "Gras\nCtrl+B",
|
|
1124
|
+
italic: "Italique\nCtrl+I",
|
|
1125
|
+
underline: "Souligné\nCtrl+U",
|
|
1126
|
+
strike: "Barré\nCtrl+Shift+X",
|
|
1127
|
+
code: "Code\nCtrl+E",
|
|
1004
1128
|
superscript: "Exposant",
|
|
1005
1129
|
subscript: "Indice",
|
|
1006
1130
|
highlight: "Surligner",
|
|
1007
1131
|
highlightPicker: "Couleur de fond",
|
|
1008
|
-
textColor: "Couleur texte",
|
|
1132
|
+
textColor: "Couleur du texte",
|
|
1009
1133
|
link: "Lien",
|
|
1010
1134
|
addLink: "Ajouter un lien",
|
|
1011
1135
|
editLink: "Modifier le lien",
|
|
@@ -1092,11 +1216,15 @@ const FRENCH_TRANSLATIONS = {
|
|
|
1092
1216
|
invalidFileType: "Type de fichier invalide",
|
|
1093
1217
|
dragDropText: "Glissez et déposez des images ici",
|
|
1094
1218
|
changeImage: "Changer l'image",
|
|
1219
|
+
downloadImage: "Télécharger l'image",
|
|
1095
1220
|
deleteImage: "Supprimer l'image",
|
|
1096
1221
|
resizeSmall: "Petit",
|
|
1097
1222
|
resizeMedium: "Moyen",
|
|
1098
1223
|
resizeLarge: "Grand",
|
|
1099
1224
|
resizeOriginal: "Original",
|
|
1225
|
+
alignLeft: "Aligner à gauche",
|
|
1226
|
+
alignCenter: "Aligner au centre",
|
|
1227
|
+
alignRight: "Aligner à droite",
|
|
1100
1228
|
resizing: "Redimensionnement...",
|
|
1101
1229
|
compressing: "Compression...",
|
|
1102
1230
|
compressionError: "Erreur lors de la compression",
|
|
@@ -1328,6 +1456,46 @@ class AteImageService {
|
|
|
1328
1456
|
this.clearSelection();
|
|
1329
1457
|
}
|
|
1330
1458
|
}
|
|
1459
|
+
/** Download the current image */
|
|
1460
|
+
downloadImage(editor) {
|
|
1461
|
+
const attrs = editor.getAttributes("resizableImage");
|
|
1462
|
+
if (!attrs || !attrs["src"]) {
|
|
1463
|
+
return;
|
|
1464
|
+
}
|
|
1465
|
+
const src = attrs["src"];
|
|
1466
|
+
const fileName = attrs["alt"] || "image";
|
|
1467
|
+
// Detect if it's base64 or remote URL
|
|
1468
|
+
if (src.startsWith("data:") ||
|
|
1469
|
+
src.startsWith("blob:") ||
|
|
1470
|
+
src.startsWith(window.location.origin)) {
|
|
1471
|
+
const link = document.createElement("a");
|
|
1472
|
+
link.href = src;
|
|
1473
|
+
link.download = fileName;
|
|
1474
|
+
document.body.appendChild(link);
|
|
1475
|
+
link.click();
|
|
1476
|
+
document.body.removeChild(link);
|
|
1477
|
+
}
|
|
1478
|
+
else {
|
|
1479
|
+
// For remote URLs, we try to fetch it to bypass cross-origin restrictions on 'download' attribute
|
|
1480
|
+
fetch(src)
|
|
1481
|
+
.then(response => response.blob())
|
|
1482
|
+
.then(blob => {
|
|
1483
|
+
const url = window.URL.createObjectURL(blob);
|
|
1484
|
+
const link = document.createElement("a");
|
|
1485
|
+
link.href = url;
|
|
1486
|
+
link.download = fileName;
|
|
1487
|
+
document.body.appendChild(link);
|
|
1488
|
+
link.click();
|
|
1489
|
+
document.body.removeChild(link);
|
|
1490
|
+
window.URL.revokeObjectURL(url);
|
|
1491
|
+
})
|
|
1492
|
+
.catch(err => {
|
|
1493
|
+
console.error("Error downloading image:", err);
|
|
1494
|
+
// Fallback to opening in new tab
|
|
1495
|
+
window.open(src, "_blank");
|
|
1496
|
+
});
|
|
1497
|
+
}
|
|
1498
|
+
}
|
|
1331
1499
|
updateSelectedImage(attributes) {
|
|
1332
1500
|
const current = this.selectedImage();
|
|
1333
1501
|
if (current) {
|
|
@@ -2404,6 +2572,9 @@ class AteEditorCommandsService {
|
|
|
2404
2572
|
throw error;
|
|
2405
2573
|
}
|
|
2406
2574
|
}
|
|
2575
|
+
downloadImage(editor) {
|
|
2576
|
+
this.imageService.downloadImage(editor);
|
|
2577
|
+
}
|
|
2407
2578
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AteEditorCommandsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2408
2579
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AteEditorCommandsService }); }
|
|
2409
2580
|
}
|
|
@@ -2488,7 +2659,7 @@ class AteColorPickerComponent {
|
|
|
2488
2659
|
<button
|
|
2489
2660
|
class="btn-clear-badge"
|
|
2490
2661
|
type="button"
|
|
2491
|
-
[
|
|
2662
|
+
[ateTooltip]="t().clear"
|
|
2492
2663
|
[attr.aria-label]="t().clear"
|
|
2493
2664
|
(click)="onClear($event)">
|
|
2494
2665
|
<span class="material-symbols-outlined">close</span>
|
|
@@ -2496,11 +2667,11 @@ class AteColorPickerComponent {
|
|
|
2496
2667
|
}
|
|
2497
2668
|
</div>
|
|
2498
2669
|
</div>
|
|
2499
|
-
`, isInline: true, styles: [".color-picker-wrapper{position:relative;display:inline-block}.color-picker-container{position:relative;display:inline-flex;align-items:center}.btn-clear-badge{position:absolute;top:-4px;right:-4px;width:14px;height:14px;padding:0;border:none;border-radius:999px;background:#0f172abf;color:#fff;display:flex;align-items:center;justify-content:center;z-index:10;opacity:0;pointer-events:none;transition:opacity .12s ease}.color-picker-container:hover .btn-clear-badge{opacity:1;pointer-events:auto}.btn-clear-badge .material-symbols-outlined{font-size:10px;line-height:1}\n"], dependencies: [{ kind: "component", type: AteButtonComponent, selector: "ate-button", inputs: ["icon", "title", "active", "disabled", "color", "backgroundColor", "variant", "size", "iconSize"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2670
|
+
`, isInline: true, styles: [".color-picker-wrapper{position:relative;display:inline-block}.color-picker-container{position:relative;display:inline-flex;align-items:center}.btn-clear-badge{position:absolute;top:-4px;right:-4px;width:14px;height:14px;padding:0;border:none;border-radius:999px;background:#0f172abf;color:#fff;display:flex;align-items:center;justify-content:center;z-index:10;opacity:0;pointer-events:none;transition:opacity .12s ease}.color-picker-container:hover .btn-clear-badge{opacity:1;pointer-events:auto}.btn-clear-badge .material-symbols-outlined{font-size:10px;line-height:1}\n"], dependencies: [{ kind: "component", type: AteButtonComponent, selector: "ate-button", inputs: ["icon", "title", "active", "disabled", "color", "backgroundColor", "variant", "size", "iconSize"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: AteTooltipDirective, selector: "[ateTooltip]", inputs: ["ateTooltip", "ateTooltipPlacement", "ateTooltipDelay", "ateTooltipDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2500
2671
|
}
|
|
2501
2672
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AteColorPickerComponent, decorators: [{
|
|
2502
2673
|
type: Component,
|
|
2503
|
-
args: [{ selector: "ate-color-picker", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AteButtonComponent, CommonModule], template: `
|
|
2674
|
+
args: [{ selector: "ate-color-picker", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AteButtonComponent, CommonModule, AteTooltipDirective], template: `
|
|
2504
2675
|
<div class="color-picker-wrapper">
|
|
2505
2676
|
<div class="color-picker-container" [class.is-highlight]="mode() === 'highlight'">
|
|
2506
2677
|
<ate-button
|
|
@@ -2515,7 +2686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
2515
2686
|
<button
|
|
2516
2687
|
class="btn-clear-badge"
|
|
2517
2688
|
type="button"
|
|
2518
|
-
[
|
|
2689
|
+
[ateTooltip]="t().clear"
|
|
2519
2690
|
[attr.aria-label]="t().clear"
|
|
2520
2691
|
(click)="onClear($event)">
|
|
2521
2692
|
<span class="material-symbols-outlined">close</span>
|
|
@@ -2794,7 +2965,7 @@ class AteToolbarComponent {
|
|
|
2794
2965
|
}
|
|
2795
2966
|
}
|
|
2796
2967
|
</div>
|
|
2797
|
-
`, isInline: true, styles: [":host{display:block;transition:opacity .3s ease}:host-context(.floating-toolbar){position:sticky;top:3rem;left:0;right:0;z-index:100;display:flex;height:0;overflow:visible;pointer-events:none;opacity:0}:host-context(.floating-toolbar:focus-within),:host-context(.floating-toolbar:hover){opacity:1}.ate-toolbar{display:flex;align-items:center;gap:
|
|
2968
|
+
`, isInline: true, styles: [":host{display:block;transition:opacity .3s ease}:host-context(.floating-toolbar){position:sticky;top:3rem;left:0;right:0;z-index:100;display:flex;height:0;overflow:visible;pointer-events:none;opacity:0}:host-context(.floating-toolbar:focus-within),:host-context(.floating-toolbar:hover){opacity:1}.ate-toolbar{display:flex;align-items:center;gap:var(--ate-toolbar-gap);padding:var(--ate-toolbar-padding);background:var(--ate-toolbar-background);border-bottom:1px solid var(--ate-toolbar-border-color);flex-wrap:wrap;min-height:32px;position:relative;z-index:50;border-top-left-radius:calc(var(--ate-menu-border-radius, 12px) - var(--ate-border-width, 2px));border-top-right-radius:calc(var(--ate-menu-border-radius, 12px) - var(--ate-border-width, 2px))}.ate-toolbar.floating{pointer-events:auto;border-radius:var(--ate-menu-border-radius, 12px);border:1px solid var(--ate-menu-border)!important;box-shadow:var(--ate-menu-shadow)!important;background:var(--ate-menu-bg)!important;padding:var(--ate-menu-padding)!important;flex-wrap:nowrap;overflow-x:auto;max-width:95vw;scrollbar-width:none;transform:translateY(0);transition:transform .3s cubic-bezier(.4,0,.2,1)}.ate-toolbar.floating::-webkit-scrollbar{display:none}:host-context(.floating-toolbar:focus-within) .ate-toolbar.floating,:host-context(.floating-toolbar:hover) .ate-toolbar.floating{transform:translateY(-2rem)}@keyframes toolbarSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.ate-toolbar{animation:toolbarSlideIn .3s cubic-bezier(.4,0,.2,1)}\n"], dependencies: [{ kind: "component", type: AteButtonComponent, selector: "ate-button", inputs: ["icon", "title", "active", "disabled", "color", "backgroundColor", "variant", "size", "iconSize"], outputs: ["buttonClick"] }, { kind: "component", type: AteSeparatorComponent, selector: "ate-separator" }, { kind: "component", type: AteColorPickerComponent, selector: "ate-color-picker", inputs: ["editor", "mode", "disabled", "anchorToText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2798
2969
|
}
|
|
2799
2970
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AteToolbarComponent, decorators: [{
|
|
2800
2971
|
type: Component,
|
|
@@ -3047,9 +3218,141 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3047
3218
|
}
|
|
3048
3219
|
}
|
|
3049
3220
|
</div>
|
|
3050
|
-
`, styles: [":host{display:block;transition:opacity .3s ease}:host-context(.floating-toolbar){position:sticky;top:3rem;left:0;right:0;z-index:100;display:flex;height:0;overflow:visible;pointer-events:none;opacity:0}:host-context(.floating-toolbar:focus-within),:host-context(.floating-toolbar:hover){opacity:1}.ate-toolbar{display:flex;align-items:center;gap:
|
|
3221
|
+
`, styles: [":host{display:block;transition:opacity .3s ease}:host-context(.floating-toolbar){position:sticky;top:3rem;left:0;right:0;z-index:100;display:flex;height:0;overflow:visible;pointer-events:none;opacity:0}:host-context(.floating-toolbar:focus-within),:host-context(.floating-toolbar:hover){opacity:1}.ate-toolbar{display:flex;align-items:center;gap:var(--ate-toolbar-gap);padding:var(--ate-toolbar-padding);background:var(--ate-toolbar-background);border-bottom:1px solid var(--ate-toolbar-border-color);flex-wrap:wrap;min-height:32px;position:relative;z-index:50;border-top-left-radius:calc(var(--ate-menu-border-radius, 12px) - var(--ate-border-width, 2px));border-top-right-radius:calc(var(--ate-menu-border-radius, 12px) - var(--ate-border-width, 2px))}.ate-toolbar.floating{pointer-events:auto;border-radius:var(--ate-menu-border-radius, 12px);border:1px solid var(--ate-menu-border)!important;box-shadow:var(--ate-menu-shadow)!important;background:var(--ate-menu-bg)!important;padding:var(--ate-menu-padding)!important;flex-wrap:nowrap;overflow-x:auto;max-width:95vw;scrollbar-width:none;transform:translateY(0);transition:transform .3s cubic-bezier(.4,0,.2,1)}.ate-toolbar.floating::-webkit-scrollbar{display:none}:host-context(.floating-toolbar:focus-within) .ate-toolbar.floating,:host-context(.floating-toolbar:hover) .ate-toolbar.floating{transform:translateY(-2rem)}@keyframes toolbarSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.ate-toolbar{animation:toolbarSlideIn .3s cubic-bezier(.4,0,.2,1)}\n"] }]
|
|
3051
3222
|
}], propDecorators: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], imageUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUpload", required: false }] }], floating: [{ type: i0.Input, args: [{ isSignal: true, alias: "floating", required: false }] }] } });
|
|
3052
3223
|
|
|
3224
|
+
// Default toolbar configuration
|
|
3225
|
+
const ATE_DEFAULT_TOOLBAR_CONFIG = {
|
|
3226
|
+
bold: true,
|
|
3227
|
+
italic: true,
|
|
3228
|
+
underline: true,
|
|
3229
|
+
strike: true,
|
|
3230
|
+
code: true,
|
|
3231
|
+
codeBlock: true,
|
|
3232
|
+
superscript: false, // Disabled by default (opt-in)
|
|
3233
|
+
subscript: false, // Disabled by default (opt-in)
|
|
3234
|
+
highlight: false, // Disabled by default (opt-in)
|
|
3235
|
+
highlightPicker: true,
|
|
3236
|
+
heading1: true,
|
|
3237
|
+
heading2: true,
|
|
3238
|
+
heading3: true,
|
|
3239
|
+
bulletList: true,
|
|
3240
|
+
orderedList: true,
|
|
3241
|
+
blockquote: true,
|
|
3242
|
+
alignLeft: false, // Disabled by default (opt-in)
|
|
3243
|
+
alignCenter: false, // Disabled by default (opt-in)
|
|
3244
|
+
alignRight: false, // Disabled by default (opt-in)
|
|
3245
|
+
alignJustify: false, // Disabled by default (opt-in)
|
|
3246
|
+
link: true,
|
|
3247
|
+
image: true,
|
|
3248
|
+
horizontalRule: false, // Disabled by default (opt-in)
|
|
3249
|
+
table: true,
|
|
3250
|
+
undo: true,
|
|
3251
|
+
redo: true,
|
|
3252
|
+
clear: false, // Disabled by default (opt-in)
|
|
3253
|
+
textColor: true,
|
|
3254
|
+
separator: true,
|
|
3255
|
+
};
|
|
3256
|
+
// Default bubble menu configuration
|
|
3257
|
+
const ATE_DEFAULT_BUBBLE_MENU_CONFIG = {
|
|
3258
|
+
bold: true,
|
|
3259
|
+
italic: true,
|
|
3260
|
+
underline: true,
|
|
3261
|
+
strike: true,
|
|
3262
|
+
code: true,
|
|
3263
|
+
superscript: false,
|
|
3264
|
+
subscript: false,
|
|
3265
|
+
highlight: false,
|
|
3266
|
+
highlightPicker: true,
|
|
3267
|
+
textColor: true,
|
|
3268
|
+
link: true,
|
|
3269
|
+
separator: true,
|
|
3270
|
+
};
|
|
3271
|
+
// Default image bubble menu configuration
|
|
3272
|
+
const ATE_DEFAULT_IMAGE_BUBBLE_MENU_CONFIG = {
|
|
3273
|
+
changeImage: true,
|
|
3274
|
+
downloadImage: true,
|
|
3275
|
+
resizeSmall: true,
|
|
3276
|
+
resizeMedium: true,
|
|
3277
|
+
resizeLarge: true,
|
|
3278
|
+
resizeOriginal: true,
|
|
3279
|
+
alignLeft: true,
|
|
3280
|
+
alignCenter: true,
|
|
3281
|
+
alignRight: true,
|
|
3282
|
+
deleteImage: true,
|
|
3283
|
+
separator: true,
|
|
3284
|
+
};
|
|
3285
|
+
// Default table bubble menu configuration
|
|
3286
|
+
const ATE_DEFAULT_TABLE_MENU_CONFIG = {
|
|
3287
|
+
addRowBefore: true,
|
|
3288
|
+
addRowAfter: true,
|
|
3289
|
+
deleteRow: true,
|
|
3290
|
+
addColumnBefore: true,
|
|
3291
|
+
addColumnAfter: true,
|
|
3292
|
+
deleteColumn: true,
|
|
3293
|
+
toggleHeaderRow: true,
|
|
3294
|
+
toggleHeaderColumn: true,
|
|
3295
|
+
deleteTable: true,
|
|
3296
|
+
separator: true,
|
|
3297
|
+
};
|
|
3298
|
+
// Default cell bubble menu configuration
|
|
3299
|
+
const ATE_DEFAULT_CELL_MENU_CONFIG = {
|
|
3300
|
+
mergeCells: true,
|
|
3301
|
+
splitCell: true,
|
|
3302
|
+
};
|
|
3303
|
+
// Default image upload configuration
|
|
3304
|
+
const ATE_DEFAULT_IMAGE_UPLOAD_CONFIG = {
|
|
3305
|
+
maxSize: 5, // 5MB
|
|
3306
|
+
maxWidth: 1920,
|
|
3307
|
+
maxHeight: 1080,
|
|
3308
|
+
allowedTypes: ["image/jpeg", "image/png", "image/gif", "image/webp"],
|
|
3309
|
+
quality: 0.8,
|
|
3310
|
+
};
|
|
3311
|
+
/**
|
|
3312
|
+
* Ultimate default configuration for the Angular Tiptap Editor.
|
|
3313
|
+
* This serves as the 'Level 4' fallback in the configuration hierarchy:
|
|
3314
|
+
* 1. Component Inputs (Le Roi)
|
|
3315
|
+
* 2. Component [config] (Le Prince)
|
|
3316
|
+
* 3. Global provideAteEditor() (Le Duc)
|
|
3317
|
+
* 4. ATE_DEFAULT_CONFIG (Le Peuple)
|
|
3318
|
+
*/
|
|
3319
|
+
const ATE_DEFAULT_CONFIG = {
|
|
3320
|
+
theme: "auto",
|
|
3321
|
+
mode: "classic",
|
|
3322
|
+
height: "auto",
|
|
3323
|
+
minHeight: "200px",
|
|
3324
|
+
maxHeight: "none",
|
|
3325
|
+
fillContainer: false,
|
|
3326
|
+
autofocus: false,
|
|
3327
|
+
editable: true,
|
|
3328
|
+
disabled: false,
|
|
3329
|
+
spellcheck: true,
|
|
3330
|
+
enableOfficePaste: true,
|
|
3331
|
+
showToolbar: true,
|
|
3332
|
+
showFooter: true,
|
|
3333
|
+
showCharacterCount: true,
|
|
3334
|
+
showWordCount: true,
|
|
3335
|
+
showEditToggle: false,
|
|
3336
|
+
showBubbleMenu: true,
|
|
3337
|
+
showImageBubbleMenu: true,
|
|
3338
|
+
downloadImage: true,
|
|
3339
|
+
showTableMenu: true,
|
|
3340
|
+
showCellMenu: true,
|
|
3341
|
+
enableSlashCommands: true,
|
|
3342
|
+
floatingToolbar: false,
|
|
3343
|
+
toolbar: ATE_DEFAULT_TOOLBAR_CONFIG,
|
|
3344
|
+
bubbleMenu: ATE_DEFAULT_BUBBLE_MENU_CONFIG,
|
|
3345
|
+
imageBubbleMenu: ATE_DEFAULT_IMAGE_BUBBLE_MENU_CONFIG,
|
|
3346
|
+
imageUpload: ATE_DEFAULT_IMAGE_UPLOAD_CONFIG,
|
|
3347
|
+
tableBubbleMenu: ATE_DEFAULT_TABLE_MENU_CONFIG,
|
|
3348
|
+
cellBubbleMenu: ATE_DEFAULT_CELL_MENU_CONFIG,
|
|
3349
|
+
slashCommands: {},
|
|
3350
|
+
tiptapExtensions: [],
|
|
3351
|
+
tiptapOptions: {},
|
|
3352
|
+
stateCalculators: [],
|
|
3353
|
+
angularNodes: [],
|
|
3354
|
+
};
|
|
3355
|
+
|
|
3053
3356
|
/**
|
|
3054
3357
|
* Base abstract class for all Bubble Menus (Text, Image, Table, Cell).
|
|
3055
3358
|
* Handles common logic for Tippy.js initialization, positioning, and visibility.
|
|
@@ -3135,6 +3438,7 @@ class AteBaseBubbleMenu {
|
|
|
3135
3438
|
content: this.menuRef().nativeElement,
|
|
3136
3439
|
trigger: "manual",
|
|
3137
3440
|
placement: "top-start",
|
|
3441
|
+
theme: "ate-bubble-menu",
|
|
3138
3442
|
appendTo: () => ed?.options?.element || document.body,
|
|
3139
3443
|
interactive: true,
|
|
3140
3444
|
hideOnClick: false,
|
|
@@ -3259,31 +3563,9 @@ class AteBubbleMenuComponent extends AteBaseBubbleMenu {
|
|
|
3259
3563
|
this.onMouseDown = () => {
|
|
3260
3564
|
this.hideTippy();
|
|
3261
3565
|
};
|
|
3262
|
-
this.config = input({
|
|
3263
|
-
bold: true,
|
|
3264
|
-
italic: true,
|
|
3265
|
-
underline: true,
|
|
3266
|
-
strike: true,
|
|
3267
|
-
code: true,
|
|
3268
|
-
superscript: false,
|
|
3269
|
-
subscript: false,
|
|
3270
|
-
highlight: true,
|
|
3271
|
-
textColor: false,
|
|
3272
|
-
link: true,
|
|
3273
|
-
separator: true,
|
|
3274
|
-
}, ...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
3566
|
+
this.config = input(ATE_DEFAULT_BUBBLE_MENU_CONFIG, ...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
3275
3567
|
this.bubbleMenuConfig = computed(() => ({
|
|
3276
|
-
|
|
3277
|
-
italic: true,
|
|
3278
|
-
underline: true,
|
|
3279
|
-
strike: true,
|
|
3280
|
-
code: true,
|
|
3281
|
-
superscript: false,
|
|
3282
|
-
subscript: false,
|
|
3283
|
-
highlight: true,
|
|
3284
|
-
textColor: false,
|
|
3285
|
-
link: true,
|
|
3286
|
-
separator: true,
|
|
3568
|
+
...ATE_DEFAULT_BUBBLE_MENU_CONFIG,
|
|
3287
3569
|
...this.config(),
|
|
3288
3570
|
}), ...(ngDevMode ? [{ debugName: "bubbleMenuConfig" }] : []));
|
|
3289
3571
|
}
|
|
@@ -3541,41 +3823,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3541
3823
|
}]
|
|
3542
3824
|
}], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
|
|
3543
3825
|
|
|
3826
|
+
/**
|
|
3827
|
+
* Clés des options du menu bulle de texte
|
|
3828
|
+
*/
|
|
3829
|
+
const ATE_BUBBLE_MENU_KEYS = [
|
|
3830
|
+
"bold",
|
|
3831
|
+
"italic",
|
|
3832
|
+
"underline",
|
|
3833
|
+
"strike",
|
|
3834
|
+
"code",
|
|
3835
|
+
"superscript",
|
|
3836
|
+
"subscript",
|
|
3837
|
+
"highlight",
|
|
3838
|
+
"highlightPicker",
|
|
3839
|
+
"textColor",
|
|
3840
|
+
"link",
|
|
3841
|
+
"separator",
|
|
3842
|
+
];
|
|
3843
|
+
/**
|
|
3844
|
+
* Clés des options du menu bulle d'image
|
|
3845
|
+
*/
|
|
3846
|
+
const ATE_IMAGE_BUBBLE_MENU_KEYS = [
|
|
3847
|
+
"changeImage",
|
|
3848
|
+
"downloadImage",
|
|
3849
|
+
"resizeSmall",
|
|
3850
|
+
"resizeMedium",
|
|
3851
|
+
"resizeLarge",
|
|
3852
|
+
"resizeOriginal",
|
|
3853
|
+
"alignLeft",
|
|
3854
|
+
"alignCenter",
|
|
3855
|
+
"alignRight",
|
|
3856
|
+
"deleteImage",
|
|
3857
|
+
"separator",
|
|
3858
|
+
];
|
|
3859
|
+
/**
|
|
3860
|
+
* Clés des options du menu de table
|
|
3861
|
+
*/
|
|
3862
|
+
const ATE_TABLE_BUBBLE_MENU_KEYS = [
|
|
3863
|
+
"addRowBefore",
|
|
3864
|
+
"addRowAfter",
|
|
3865
|
+
"deleteRow",
|
|
3866
|
+
"addColumnBefore",
|
|
3867
|
+
"addColumnAfter",
|
|
3868
|
+
"deleteColumn",
|
|
3869
|
+
"deleteTable",
|
|
3870
|
+
"toggleHeaderRow",
|
|
3871
|
+
"toggleHeaderColumn",
|
|
3872
|
+
"separator",
|
|
3873
|
+
];
|
|
3874
|
+
/**
|
|
3875
|
+
* Clés des options du menu de cellule
|
|
3876
|
+
*/
|
|
3877
|
+
const ATE_CELL_BUBBLE_MENU_KEYS = ["mergeCells", "splitCell"];
|
|
3878
|
+
|
|
3544
3879
|
class AteImageBubbleMenuComponent extends AteBaseBubbleMenu {
|
|
3545
3880
|
constructor() {
|
|
3546
3881
|
super(...arguments);
|
|
3547
3882
|
this.t = this.i18nService.imageUpload;
|
|
3548
3883
|
this.imageService = inject(AteImageService);
|
|
3549
|
-
this.config = input({
|
|
3550
|
-
changeImage: true,
|
|
3551
|
-
resizeSmall: true,
|
|
3552
|
-
resizeMedium: true,
|
|
3553
|
-
resizeLarge: true,
|
|
3554
|
-
resizeOriginal: true,
|
|
3555
|
-
deleteImage: true,
|
|
3556
|
-
separator: true,
|
|
3557
|
-
}, ...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
3884
|
+
this.config = input(ATE_DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, ...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
3558
3885
|
this.imageUpload = input({}, ...(ngDevMode ? [{ debugName: "imageUpload" }] : []));
|
|
3559
|
-
this.imageBubbleMenuConfig = computed(() =>
|
|
3560
|
-
|
|
3561
|
-
|
|
3562
|
-
|
|
3563
|
-
|
|
3564
|
-
|
|
3565
|
-
|
|
3566
|
-
|
|
3567
|
-
|
|
3886
|
+
this.imageBubbleMenuConfig = computed(() => {
|
|
3887
|
+
const c = this.config();
|
|
3888
|
+
const result = {};
|
|
3889
|
+
ATE_IMAGE_BUBBLE_MENU_KEYS.forEach(key => {
|
|
3890
|
+
result[key] = c[key] ?? true;
|
|
3891
|
+
});
|
|
3892
|
+
return result;
|
|
3893
|
+
}, ...(ngDevMode ? [{ debugName: "imageBubbleMenuConfig" }] : []));
|
|
3894
|
+
this.hasAlignmentButtons = computed(() => this.imageBubbleMenuConfig().alignLeft ||
|
|
3895
|
+
this.imageBubbleMenuConfig().alignCenter ||
|
|
3896
|
+
this.imageBubbleMenuConfig().alignRight, ...(ngDevMode ? [{ debugName: "hasAlignmentButtons" }] : []));
|
|
3568
3897
|
this.hasResizeButtons = computed(() => {
|
|
3569
3898
|
const c = this.imageBubbleMenuConfig();
|
|
3570
3899
|
return c.resizeSmall || c.resizeMedium || c.resizeLarge || c.resizeOriginal;
|
|
3571
3900
|
}, ...(ngDevMode ? [{ debugName: "hasResizeButtons" }] : []));
|
|
3572
3901
|
}
|
|
3573
3902
|
shouldShow() {
|
|
3574
|
-
const { nodes, isEditable, isFocused } = this.state();
|
|
3903
|
+
const { nodes, isEditable, isFocused, selection } = this.state();
|
|
3575
3904
|
if (this.editorCommands.linkEditMode() || this.editorCommands.colorEditMode()) {
|
|
3576
3905
|
return false;
|
|
3577
3906
|
}
|
|
3578
|
-
|
|
3907
|
+
// In read-only mode, focus reporting can be unreliable,
|
|
3908
|
+
// so we show the menu as long as an image is selected.
|
|
3909
|
+
if (!isEditable) {
|
|
3910
|
+
return nodes.isImage && selection.type === "node";
|
|
3911
|
+
}
|
|
3912
|
+
return nodes.isImage && isFocused;
|
|
3579
3913
|
}
|
|
3580
3914
|
getSelectionRect() {
|
|
3581
3915
|
const ed = this.editor();
|
|
@@ -3613,6 +3947,9 @@ class AteImageBubbleMenuComponent extends AteBaseBubbleMenu {
|
|
|
3613
3947
|
case "changeImage":
|
|
3614
3948
|
this.changeImage();
|
|
3615
3949
|
break;
|
|
3950
|
+
case "downloadImage":
|
|
3951
|
+
this.editorCommands.downloadImage(editor);
|
|
3952
|
+
break;
|
|
3616
3953
|
case "resizeSmall":
|
|
3617
3954
|
this.imageService.resizeImageToSmall(editor);
|
|
3618
3955
|
break;
|
|
@@ -3628,6 +3965,15 @@ class AteImageBubbleMenuComponent extends AteBaseBubbleMenu {
|
|
|
3628
3965
|
case "deleteImage":
|
|
3629
3966
|
this.deleteImage();
|
|
3630
3967
|
break;
|
|
3968
|
+
case "alignLeft":
|
|
3969
|
+
editor.chain().focus().setTextAlign("left").run();
|
|
3970
|
+
break;
|
|
3971
|
+
case "alignCenter":
|
|
3972
|
+
editor.chain().focus().setTextAlign("center").run();
|
|
3973
|
+
break;
|
|
3974
|
+
case "alignRight":
|
|
3975
|
+
editor.chain().focus().setTextAlign("right").run();
|
|
3976
|
+
break;
|
|
3631
3977
|
}
|
|
3632
3978
|
}
|
|
3633
3979
|
async changeImage() {
|
|
@@ -3652,46 +3998,81 @@ class AteImageBubbleMenuComponent extends AteBaseBubbleMenu {
|
|
|
3652
3998
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AteImageBubbleMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3653
3999
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AteImageBubbleMenuComponent, isStandalone: true, selector: "ate-image-bubble-menu", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, imageUpload: { classPropertyName: "imageUpload", publicName: "imageUpload", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
|
|
3654
4000
|
<div #menuRef class="bubble-menu" (mousedown)="$event.preventDefault()">
|
|
3655
|
-
@if (imageBubbleMenuConfig().changeImage) {
|
|
4001
|
+
@if (imageBubbleMenuConfig().changeImage && editor().isEditable) {
|
|
3656
4002
|
<ate-button
|
|
3657
4003
|
icon="drive_file_rename_outline"
|
|
3658
4004
|
[title]="t().changeImage"
|
|
3659
4005
|
(buttonClick)="onCommand('changeImage', $event)"></ate-button>
|
|
3660
4006
|
}
|
|
3661
|
-
@if (imageBubbleMenuConfig().
|
|
4007
|
+
@if (imageBubbleMenuConfig().downloadImage) {
|
|
4008
|
+
<ate-button
|
|
4009
|
+
icon="download"
|
|
4010
|
+
[title]="t().downloadImage"
|
|
4011
|
+
(buttonClick)="onCommand('downloadImage', $event)"></ate-button>
|
|
4012
|
+
}
|
|
4013
|
+
@if (imageBubbleMenuConfig().separator && hasResizeButtons() && editor().isEditable) {
|
|
3662
4014
|
<ate-separator />
|
|
3663
4015
|
}
|
|
3664
|
-
@if (imageBubbleMenuConfig().resizeSmall) {
|
|
4016
|
+
@if (imageBubbleMenuConfig().resizeSmall && editor().isEditable) {
|
|
3665
4017
|
<ate-button
|
|
3666
4018
|
icon="crop_square"
|
|
3667
4019
|
iconSize="small"
|
|
3668
4020
|
[title]="t().resizeSmall"
|
|
3669
4021
|
(buttonClick)="onCommand('resizeSmall', $event)"></ate-button>
|
|
3670
4022
|
}
|
|
3671
|
-
@if (imageBubbleMenuConfig().resizeMedium) {
|
|
4023
|
+
@if (imageBubbleMenuConfig().resizeMedium && editor().isEditable) {
|
|
3672
4024
|
<ate-button
|
|
3673
4025
|
icon="crop_square"
|
|
3674
4026
|
iconSize="medium"
|
|
3675
4027
|
[title]="t().resizeMedium"
|
|
3676
4028
|
(buttonClick)="onCommand('resizeMedium', $event)"></ate-button>
|
|
3677
4029
|
}
|
|
3678
|
-
@if (imageBubbleMenuConfig().resizeLarge) {
|
|
4030
|
+
@if (imageBubbleMenuConfig().resizeLarge && editor().isEditable) {
|
|
3679
4031
|
<ate-button
|
|
3680
4032
|
icon="crop_square"
|
|
3681
4033
|
iconSize="large"
|
|
3682
4034
|
[title]="t().resizeLarge"
|
|
3683
4035
|
(buttonClick)="onCommand('resizeLarge', $event)"></ate-button>
|
|
3684
4036
|
}
|
|
3685
|
-
@if (imageBubbleMenuConfig().resizeOriginal) {
|
|
4037
|
+
@if (imageBubbleMenuConfig().resizeOriginal && editor().isEditable) {
|
|
3686
4038
|
<ate-button
|
|
3687
4039
|
icon="photo_size_select_actual"
|
|
3688
4040
|
[title]="t().resizeOriginal"
|
|
3689
4041
|
(buttonClick)="onCommand('resizeOriginal', $event)"></ate-button>
|
|
3690
4042
|
}
|
|
3691
|
-
@if (imageBubbleMenuConfig().separator &&
|
|
4043
|
+
@if (imageBubbleMenuConfig().separator && hasAlignmentButtons() && editor().isEditable) {
|
|
3692
4044
|
<ate-separator />
|
|
3693
4045
|
}
|
|
3694
|
-
@if (imageBubbleMenuConfig().
|
|
4046
|
+
@if (imageBubbleMenuConfig().alignLeft && editor().isEditable) {
|
|
4047
|
+
<ate-button
|
|
4048
|
+
icon="format_align_left"
|
|
4049
|
+
[title]="t().alignLeft"
|
|
4050
|
+
[active]="editor().isActive({ textAlign: 'left' })"
|
|
4051
|
+
(buttonClick)="onCommand('alignLeft', $event)"></ate-button>
|
|
4052
|
+
}
|
|
4053
|
+
@if (imageBubbleMenuConfig().alignCenter && editor().isEditable) {
|
|
4054
|
+
<ate-button
|
|
4055
|
+
icon="format_align_center"
|
|
4056
|
+
[title]="t().alignCenter"
|
|
4057
|
+
[active]="editor().isActive({ textAlign: 'center' })"
|
|
4058
|
+
(buttonClick)="onCommand('alignCenter', $event)"></ate-button>
|
|
4059
|
+
}
|
|
4060
|
+
@if (imageBubbleMenuConfig().alignRight && editor().isEditable) {
|
|
4061
|
+
<ate-button
|
|
4062
|
+
icon="format_align_right"
|
|
4063
|
+
[title]="t().alignRight"
|
|
4064
|
+
[active]="editor().isActive({ textAlign: 'right' })"
|
|
4065
|
+
(buttonClick)="onCommand('alignRight', $event)"></ate-button>
|
|
4066
|
+
}
|
|
4067
|
+
|
|
4068
|
+
@if (
|
|
4069
|
+
imageBubbleMenuConfig().separator &&
|
|
4070
|
+
imageBubbleMenuConfig().deleteImage &&
|
|
4071
|
+
editor().isEditable
|
|
4072
|
+
) {
|
|
4073
|
+
<ate-separator />
|
|
4074
|
+
}
|
|
4075
|
+
@if (imageBubbleMenuConfig().deleteImage && editor().isEditable) {
|
|
3695
4076
|
<ate-button
|
|
3696
4077
|
icon="delete"
|
|
3697
4078
|
[title]="t().deleteImage"
|
|
@@ -3699,7 +4080,7 @@ class AteImageBubbleMenuComponent extends AteBaseBubbleMenu {
|
|
|
3699
4080
|
(buttonClick)="onCommand('deleteImage', $event)"></ate-button>
|
|
3700
4081
|
}
|
|
3701
4082
|
</div>
|
|
3702
|
-
`, isInline: true, dependencies: [{ kind: "component", type: AteButtonComponent, selector: "ate-button", inputs: ["icon", "title", "active", "disabled", "color", "backgroundColor", "variant", "size", "iconSize"], outputs: ["buttonClick"] }, { kind: "component", type: AteSeparatorComponent, selector: "ate-separator"
|
|
4083
|
+
`, isInline: true, dependencies: [{ kind: "component", type: AteButtonComponent, selector: "ate-button", inputs: ["icon", "title", "active", "disabled", "color", "backgroundColor", "variant", "size", "iconSize"], outputs: ["buttonClick"] }, { kind: "component", type: AteSeparatorComponent, selector: "ate-separator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3703
4084
|
}
|
|
3704
4085
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AteImageBubbleMenuComponent, decorators: [{
|
|
3705
4086
|
type: Component,
|
|
@@ -3710,46 +4091,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3710
4091
|
imports: [AteButtonComponent, AteSeparatorComponent],
|
|
3711
4092
|
template: `
|
|
3712
4093
|
<div #menuRef class="bubble-menu" (mousedown)="$event.preventDefault()">
|
|
3713
|
-
@if (imageBubbleMenuConfig().changeImage) {
|
|
4094
|
+
@if (imageBubbleMenuConfig().changeImage && editor().isEditable) {
|
|
3714
4095
|
<ate-button
|
|
3715
4096
|
icon="drive_file_rename_outline"
|
|
3716
4097
|
[title]="t().changeImage"
|
|
3717
4098
|
(buttonClick)="onCommand('changeImage', $event)"></ate-button>
|
|
3718
4099
|
}
|
|
3719
|
-
@if (imageBubbleMenuConfig().
|
|
4100
|
+
@if (imageBubbleMenuConfig().downloadImage) {
|
|
4101
|
+
<ate-button
|
|
4102
|
+
icon="download"
|
|
4103
|
+
[title]="t().downloadImage"
|
|
4104
|
+
(buttonClick)="onCommand('downloadImage', $event)"></ate-button>
|
|
4105
|
+
}
|
|
4106
|
+
@if (imageBubbleMenuConfig().separator && hasResizeButtons() && editor().isEditable) {
|
|
3720
4107
|
<ate-separator />
|
|
3721
4108
|
}
|
|
3722
|
-
@if (imageBubbleMenuConfig().resizeSmall) {
|
|
4109
|
+
@if (imageBubbleMenuConfig().resizeSmall && editor().isEditable) {
|
|
3723
4110
|
<ate-button
|
|
3724
4111
|
icon="crop_square"
|
|
3725
4112
|
iconSize="small"
|
|
3726
4113
|
[title]="t().resizeSmall"
|
|
3727
4114
|
(buttonClick)="onCommand('resizeSmall', $event)"></ate-button>
|
|
3728
4115
|
}
|
|
3729
|
-
@if (imageBubbleMenuConfig().resizeMedium) {
|
|
4116
|
+
@if (imageBubbleMenuConfig().resizeMedium && editor().isEditable) {
|
|
3730
4117
|
<ate-button
|
|
3731
4118
|
icon="crop_square"
|
|
3732
4119
|
iconSize="medium"
|
|
3733
4120
|
[title]="t().resizeMedium"
|
|
3734
4121
|
(buttonClick)="onCommand('resizeMedium', $event)"></ate-button>
|
|
3735
4122
|
}
|
|
3736
|
-
@if (imageBubbleMenuConfig().resizeLarge) {
|
|
4123
|
+
@if (imageBubbleMenuConfig().resizeLarge && editor().isEditable) {
|
|
3737
4124
|
<ate-button
|
|
3738
4125
|
icon="crop_square"
|
|
3739
4126
|
iconSize="large"
|
|
3740
4127
|
[title]="t().resizeLarge"
|
|
3741
4128
|
(buttonClick)="onCommand('resizeLarge', $event)"></ate-button>
|
|
3742
4129
|
}
|
|
3743
|
-
@if (imageBubbleMenuConfig().resizeOriginal) {
|
|
4130
|
+
@if (imageBubbleMenuConfig().resizeOriginal && editor().isEditable) {
|
|
3744
4131
|
<ate-button
|
|
3745
4132
|
icon="photo_size_select_actual"
|
|
3746
4133
|
[title]="t().resizeOriginal"
|
|
3747
4134
|
(buttonClick)="onCommand('resizeOriginal', $event)"></ate-button>
|
|
3748
4135
|
}
|
|
3749
|
-
@if (imageBubbleMenuConfig().separator &&
|
|
4136
|
+
@if (imageBubbleMenuConfig().separator && hasAlignmentButtons() && editor().isEditable) {
|
|
3750
4137
|
<ate-separator />
|
|
3751
4138
|
}
|
|
3752
|
-
@if (imageBubbleMenuConfig().
|
|
4139
|
+
@if (imageBubbleMenuConfig().alignLeft && editor().isEditable) {
|
|
4140
|
+
<ate-button
|
|
4141
|
+
icon="format_align_left"
|
|
4142
|
+
[title]="t().alignLeft"
|
|
4143
|
+
[active]="editor().isActive({ textAlign: 'left' })"
|
|
4144
|
+
(buttonClick)="onCommand('alignLeft', $event)"></ate-button>
|
|
4145
|
+
}
|
|
4146
|
+
@if (imageBubbleMenuConfig().alignCenter && editor().isEditable) {
|
|
4147
|
+
<ate-button
|
|
4148
|
+
icon="format_align_center"
|
|
4149
|
+
[title]="t().alignCenter"
|
|
4150
|
+
[active]="editor().isActive({ textAlign: 'center' })"
|
|
4151
|
+
(buttonClick)="onCommand('alignCenter', $event)"></ate-button>
|
|
4152
|
+
}
|
|
4153
|
+
@if (imageBubbleMenuConfig().alignRight && editor().isEditable) {
|
|
4154
|
+
<ate-button
|
|
4155
|
+
icon="format_align_right"
|
|
4156
|
+
[title]="t().alignRight"
|
|
4157
|
+
[active]="editor().isActive({ textAlign: 'right' })"
|
|
4158
|
+
(buttonClick)="onCommand('alignRight', $event)"></ate-button>
|
|
4159
|
+
}
|
|
4160
|
+
|
|
4161
|
+
@if (
|
|
4162
|
+
imageBubbleMenuConfig().separator &&
|
|
4163
|
+
imageBubbleMenuConfig().deleteImage &&
|
|
4164
|
+
editor().isEditable
|
|
4165
|
+
) {
|
|
4166
|
+
<ate-separator />
|
|
4167
|
+
}
|
|
4168
|
+
@if (imageBubbleMenuConfig().deleteImage && editor().isEditable) {
|
|
3753
4169
|
<ate-button
|
|
3754
4170
|
icon="delete"
|
|
3755
4171
|
[title]="t().deleteImage"
|
|
@@ -3766,18 +4182,15 @@ class AteTableBubbleMenuComponent extends AteBaseBubbleMenu {
|
|
|
3766
4182
|
super(...arguments);
|
|
3767
4183
|
// Alias for template
|
|
3768
4184
|
this.t = this.i18nService.table;
|
|
3769
|
-
this.config = input({
|
|
3770
|
-
|
|
3771
|
-
|
|
3772
|
-
|
|
3773
|
-
|
|
3774
|
-
|
|
3775
|
-
|
|
3776
|
-
|
|
3777
|
-
|
|
3778
|
-
toggleHeaderColumn: true,
|
|
3779
|
-
separator: true,
|
|
3780
|
-
}, ...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
4185
|
+
this.config = input(ATE_DEFAULT_TABLE_MENU_CONFIG, ...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
4186
|
+
this.tableBubbleMenuConfig = computed(() => {
|
|
4187
|
+
const c = this.config();
|
|
4188
|
+
const result = {};
|
|
4189
|
+
ATE_TABLE_BUBBLE_MENU_KEYS.forEach(key => {
|
|
4190
|
+
result[key] = c[key] ?? true;
|
|
4191
|
+
});
|
|
4192
|
+
return result;
|
|
4193
|
+
}, ...(ngDevMode ? [{ debugName: "tableBubbleMenuConfig" }] : []));
|
|
3781
4194
|
}
|
|
3782
4195
|
shouldShow() {
|
|
3783
4196
|
const { selection, nodes, isEditable, isFocused } = this.state();
|
|
@@ -3839,21 +4252,21 @@ class AteTableBubbleMenuComponent extends AteBaseBubbleMenu {
|
|
|
3839
4252
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AteTableBubbleMenuComponent, isStandalone: true, selector: "ate-table-bubble-menu", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
|
|
3840
4253
|
<div #menuRef class="bubble-menu" (mousedown)="$event.preventDefault()">
|
|
3841
4254
|
<!-- Row actions -->
|
|
3842
|
-
@if (
|
|
4255
|
+
@if (tableBubbleMenuConfig().addRowBefore !== false) {
|
|
3843
4256
|
<ate-button
|
|
3844
4257
|
icon="add_row_above"
|
|
3845
4258
|
[title]="t().addRowBefore"
|
|
3846
4259
|
[disabled]="!state().can.addRowBefore"
|
|
3847
4260
|
(buttonClick)="onCommand('addRowBefore', $event)"></ate-button>
|
|
3848
4261
|
}
|
|
3849
|
-
@if (
|
|
4262
|
+
@if (tableBubbleMenuConfig().addRowAfter !== false) {
|
|
3850
4263
|
<ate-button
|
|
3851
4264
|
icon="add_row_below"
|
|
3852
4265
|
[title]="t().addRowAfter"
|
|
3853
4266
|
[disabled]="!state().can.addRowAfter"
|
|
3854
4267
|
(buttonClick)="onCommand('addRowAfter', $event)"></ate-button>
|
|
3855
4268
|
}
|
|
3856
|
-
@if (
|
|
4269
|
+
@if (tableBubbleMenuConfig().deleteRow !== false) {
|
|
3857
4270
|
<ate-button
|
|
3858
4271
|
icon="delete"
|
|
3859
4272
|
[title]="t().deleteRow"
|
|
@@ -3861,26 +4274,26 @@ class AteTableBubbleMenuComponent extends AteBaseBubbleMenu {
|
|
|
3861
4274
|
[disabled]="!state().can.deleteRow"
|
|
3862
4275
|
(buttonClick)="onCommand('deleteRow', $event)"></ate-button>
|
|
3863
4276
|
}
|
|
3864
|
-
@if (
|
|
4277
|
+
@if (tableBubbleMenuConfig().separator !== false) {
|
|
3865
4278
|
<ate-separator />
|
|
3866
4279
|
}
|
|
3867
4280
|
|
|
3868
4281
|
<!-- Column actions -->
|
|
3869
|
-
@if (
|
|
4282
|
+
@if (tableBubbleMenuConfig().addColumnBefore !== false) {
|
|
3870
4283
|
<ate-button
|
|
3871
4284
|
icon="add_column_left"
|
|
3872
4285
|
[title]="t().addColumnBefore"
|
|
3873
4286
|
[disabled]="!state().can.addColumnBefore"
|
|
3874
4287
|
(buttonClick)="onCommand('addColumnBefore', $event)"></ate-button>
|
|
3875
4288
|
}
|
|
3876
|
-
@if (
|
|
4289
|
+
@if (tableBubbleMenuConfig().addColumnAfter !== false) {
|
|
3877
4290
|
<ate-button
|
|
3878
4291
|
icon="add_column_right"
|
|
3879
4292
|
[title]="t().addColumnAfter"
|
|
3880
4293
|
[disabled]="!state().can.addColumnAfter"
|
|
3881
4294
|
(buttonClick)="onCommand('addColumnAfter', $event)"></ate-button>
|
|
3882
4295
|
}
|
|
3883
|
-
@if (
|
|
4296
|
+
@if (tableBubbleMenuConfig().deleteColumn !== false) {
|
|
3884
4297
|
<ate-button
|
|
3885
4298
|
icon="delete"
|
|
3886
4299
|
[title]="t().deleteColumn"
|
|
@@ -3888,12 +4301,12 @@ class AteTableBubbleMenuComponent extends AteBaseBubbleMenu {
|
|
|
3888
4301
|
[disabled]="!state().can.deleteColumn"
|
|
3889
4302
|
(buttonClick)="onCommand('deleteColumn', $event)"></ate-button>
|
|
3890
4303
|
}
|
|
3891
|
-
@if (
|
|
4304
|
+
@if (tableBubbleMenuConfig().separator !== false) {
|
|
3892
4305
|
<ate-separator />
|
|
3893
4306
|
}
|
|
3894
4307
|
|
|
3895
4308
|
<!-- Cell actions -->
|
|
3896
|
-
@if (
|
|
4309
|
+
@if (tableBubbleMenuConfig().toggleHeaderRow !== false) {
|
|
3897
4310
|
<ate-button
|
|
3898
4311
|
icon="toolbar"
|
|
3899
4312
|
[title]="t().toggleHeaderRow"
|
|
@@ -3901,7 +4314,7 @@ class AteTableBubbleMenuComponent extends AteBaseBubbleMenu {
|
|
|
3901
4314
|
[disabled]="!state().can.toggleHeaderRow"
|
|
3902
4315
|
(buttonClick)="onCommand('toggleHeaderRow', $event)"></ate-button>
|
|
3903
4316
|
}
|
|
3904
|
-
@if (
|
|
4317
|
+
@if (tableBubbleMenuConfig().toggleHeaderColumn !== false) {
|
|
3905
4318
|
<ate-button
|
|
3906
4319
|
icon="dock_to_right"
|
|
3907
4320
|
[title]="t().toggleHeaderColumn"
|
|
@@ -3909,12 +4322,14 @@ class AteTableBubbleMenuComponent extends AteBaseBubbleMenu {
|
|
|
3909
4322
|
[disabled]="!state().can.toggleHeaderColumn"
|
|
3910
4323
|
(buttonClick)="onCommand('toggleHeaderColumn', $event)"></ate-button>
|
|
3911
4324
|
}
|
|
3912
|
-
@if (
|
|
4325
|
+
@if (
|
|
4326
|
+
tableBubbleMenuConfig().separator !== false && tableBubbleMenuConfig().deleteTable !== false
|
|
4327
|
+
) {
|
|
3913
4328
|
<ate-separator />
|
|
3914
4329
|
}
|
|
3915
4330
|
|
|
3916
4331
|
<!-- Table actions -->
|
|
3917
|
-
@if (
|
|
4332
|
+
@if (tableBubbleMenuConfig().deleteTable !== false) {
|
|
3918
4333
|
<ate-button
|
|
3919
4334
|
icon="delete_forever"
|
|
3920
4335
|
[title]="t().deleteTable"
|
|
@@ -3923,7 +4338,7 @@ class AteTableBubbleMenuComponent extends AteBaseBubbleMenu {
|
|
|
3923
4338
|
(buttonClick)="onCommand('deleteTable', $event)"></ate-button>
|
|
3924
4339
|
}
|
|
3925
4340
|
</div>
|
|
3926
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AteButtonComponent, selector: "ate-button", inputs: ["icon", "title", "active", "disabled", "color", "backgroundColor", "variant", "size", "iconSize"], outputs: ["buttonClick"] }, { kind: "component", type: AteSeparatorComponent, selector: "ate-separator"
|
|
4341
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AteButtonComponent, selector: "ate-button", inputs: ["icon", "title", "active", "disabled", "color", "backgroundColor", "variant", "size", "iconSize"], outputs: ["buttonClick"] }, { kind: "component", type: AteSeparatorComponent, selector: "ate-separator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3927
4342
|
}
|
|
3928
4343
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AteTableBubbleMenuComponent, decorators: [{
|
|
3929
4344
|
type: Component,
|
|
@@ -3935,21 +4350,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3935
4350
|
template: `
|
|
3936
4351
|
<div #menuRef class="bubble-menu" (mousedown)="$event.preventDefault()">
|
|
3937
4352
|
<!-- Row actions -->
|
|
3938
|
-
@if (
|
|
4353
|
+
@if (tableBubbleMenuConfig().addRowBefore !== false) {
|
|
3939
4354
|
<ate-button
|
|
3940
4355
|
icon="add_row_above"
|
|
3941
4356
|
[title]="t().addRowBefore"
|
|
3942
4357
|
[disabled]="!state().can.addRowBefore"
|
|
3943
4358
|
(buttonClick)="onCommand('addRowBefore', $event)"></ate-button>
|
|
3944
4359
|
}
|
|
3945
|
-
@if (
|
|
4360
|
+
@if (tableBubbleMenuConfig().addRowAfter !== false) {
|
|
3946
4361
|
<ate-button
|
|
3947
4362
|
icon="add_row_below"
|
|
3948
4363
|
[title]="t().addRowAfter"
|
|
3949
4364
|
[disabled]="!state().can.addRowAfter"
|
|
3950
4365
|
(buttonClick)="onCommand('addRowAfter', $event)"></ate-button>
|
|
3951
4366
|
}
|
|
3952
|
-
@if (
|
|
4367
|
+
@if (tableBubbleMenuConfig().deleteRow !== false) {
|
|
3953
4368
|
<ate-button
|
|
3954
4369
|
icon="delete"
|
|
3955
4370
|
[title]="t().deleteRow"
|
|
@@ -3957,26 +4372,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3957
4372
|
[disabled]="!state().can.deleteRow"
|
|
3958
4373
|
(buttonClick)="onCommand('deleteRow', $event)"></ate-button>
|
|
3959
4374
|
}
|
|
3960
|
-
@if (
|
|
4375
|
+
@if (tableBubbleMenuConfig().separator !== false) {
|
|
3961
4376
|
<ate-separator />
|
|
3962
4377
|
}
|
|
3963
4378
|
|
|
3964
4379
|
<!-- Column actions -->
|
|
3965
|
-
@if (
|
|
4380
|
+
@if (tableBubbleMenuConfig().addColumnBefore !== false) {
|
|
3966
4381
|
<ate-button
|
|
3967
4382
|
icon="add_column_left"
|
|
3968
4383
|
[title]="t().addColumnBefore"
|
|
3969
4384
|
[disabled]="!state().can.addColumnBefore"
|
|
3970
4385
|
(buttonClick)="onCommand('addColumnBefore', $event)"></ate-button>
|
|
3971
4386
|
}
|
|
3972
|
-
@if (
|
|
4387
|
+
@if (tableBubbleMenuConfig().addColumnAfter !== false) {
|
|
3973
4388
|
<ate-button
|
|
3974
4389
|
icon="add_column_right"
|
|
3975
4390
|
[title]="t().addColumnAfter"
|
|
3976
4391
|
[disabled]="!state().can.addColumnAfter"
|
|
3977
4392
|
(buttonClick)="onCommand('addColumnAfter', $event)"></ate-button>
|
|
3978
4393
|
}
|
|
3979
|
-
@if (
|
|
4394
|
+
@if (tableBubbleMenuConfig().deleteColumn !== false) {
|
|
3980
4395
|
<ate-button
|
|
3981
4396
|
icon="delete"
|
|
3982
4397
|
[title]="t().deleteColumn"
|
|
@@ -3984,12 +4399,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3984
4399
|
[disabled]="!state().can.deleteColumn"
|
|
3985
4400
|
(buttonClick)="onCommand('deleteColumn', $event)"></ate-button>
|
|
3986
4401
|
}
|
|
3987
|
-
@if (
|
|
4402
|
+
@if (tableBubbleMenuConfig().separator !== false) {
|
|
3988
4403
|
<ate-separator />
|
|
3989
4404
|
}
|
|
3990
4405
|
|
|
3991
4406
|
<!-- Cell actions -->
|
|
3992
|
-
@if (
|
|
4407
|
+
@if (tableBubbleMenuConfig().toggleHeaderRow !== false) {
|
|
3993
4408
|
<ate-button
|
|
3994
4409
|
icon="toolbar"
|
|
3995
4410
|
[title]="t().toggleHeaderRow"
|
|
@@ -3997,7 +4412,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3997
4412
|
[disabled]="!state().can.toggleHeaderRow"
|
|
3998
4413
|
(buttonClick)="onCommand('toggleHeaderRow', $event)"></ate-button>
|
|
3999
4414
|
}
|
|
4000
|
-
@if (
|
|
4415
|
+
@if (tableBubbleMenuConfig().toggleHeaderColumn !== false) {
|
|
4001
4416
|
<ate-button
|
|
4002
4417
|
icon="dock_to_right"
|
|
4003
4418
|
[title]="t().toggleHeaderColumn"
|
|
@@ -4005,12 +4420,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
4005
4420
|
[disabled]="!state().can.toggleHeaderColumn"
|
|
4006
4421
|
(buttonClick)="onCommand('toggleHeaderColumn', $event)"></ate-button>
|
|
4007
4422
|
}
|
|
4008
|
-
@if (
|
|
4423
|
+
@if (
|
|
4424
|
+
tableBubbleMenuConfig().separator !== false && tableBubbleMenuConfig().deleteTable !== false
|
|
4425
|
+
) {
|
|
4009
4426
|
<ate-separator />
|
|
4010
4427
|
}
|
|
4011
4428
|
|
|
4012
4429
|
<!-- Table actions -->
|
|
4013
|
-
@if (
|
|
4430
|
+
@if (tableBubbleMenuConfig().deleteTable !== false) {
|
|
4014
4431
|
<ate-button
|
|
4015
4432
|
icon="delete_forever"
|
|
4016
4433
|
[title]="t().deleteTable"
|
|
@@ -4027,7 +4444,11 @@ class AteCellBubbleMenuComponent extends AteBaseBubbleMenu {
|
|
|
4027
4444
|
constructor() {
|
|
4028
4445
|
super(...arguments);
|
|
4029
4446
|
// Inputs
|
|
4030
|
-
this.config = input(
|
|
4447
|
+
this.config = input(ATE_DEFAULT_CELL_MENU_CONFIG, ...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
4448
|
+
this.cellBubbleMenuConfig = computed(() => ({
|
|
4449
|
+
mergeCells: this.config().mergeCells ?? true,
|
|
4450
|
+
splitCell: this.config().splitCell ?? true,
|
|
4451
|
+
}), ...(ngDevMode ? [{ debugName: "cellBubbleMenuConfig" }] : []));
|
|
4031
4452
|
// Signals
|
|
4032
4453
|
this.i18n = () => this.i18nService;
|
|
4033
4454
|
}
|
|
@@ -4093,14 +4514,14 @@ class AteCellBubbleMenuComponent extends AteBaseBubbleMenu {
|
|
|
4093
4514
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AteCellBubbleMenuComponent, isStandalone: true, selector: "ate-cell-bubble-menu", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
|
|
4094
4515
|
<div #menuRef class="bubble-menu" (mousedown)="$event.preventDefault()">
|
|
4095
4516
|
<!-- Cell specific actions -->
|
|
4096
|
-
@if (
|
|
4517
|
+
@if (cellBubbleMenuConfig().mergeCells !== false && !state().selection.isSingleCell) {
|
|
4097
4518
|
<ate-button
|
|
4098
4519
|
icon="cell_merge"
|
|
4099
4520
|
[title]="i18n().table().mergeCells"
|
|
4100
4521
|
[disabled]="!state().can.mergeCells"
|
|
4101
4522
|
(buttonClick)="onCommand('mergeCells', $event)"></ate-button>
|
|
4102
4523
|
}
|
|
4103
|
-
@if (
|
|
4524
|
+
@if (cellBubbleMenuConfig().splitCell !== false && state().selection.isSingleCell) {
|
|
4104
4525
|
<ate-button
|
|
4105
4526
|
icon="split_scene"
|
|
4106
4527
|
[title]="i18n().table().splitCell"
|
|
@@ -4120,14 +4541,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
4120
4541
|
template: `
|
|
4121
4542
|
<div #menuRef class="bubble-menu" (mousedown)="$event.preventDefault()">
|
|
4122
4543
|
<!-- Cell specific actions -->
|
|
4123
|
-
@if (
|
|
4544
|
+
@if (cellBubbleMenuConfig().mergeCells !== false && !state().selection.isSingleCell) {
|
|
4124
4545
|
<ate-button
|
|
4125
4546
|
icon="cell_merge"
|
|
4126
4547
|
[title]="i18n().table().mergeCells"
|
|
4127
4548
|
[disabled]="!state().can.mergeCells"
|
|
4128
4549
|
(buttonClick)="onCommand('mergeCells', $event)"></ate-button>
|
|
4129
4550
|
}
|
|
4130
|
-
@if (
|
|
4551
|
+
@if (cellBubbleMenuConfig().splitCell !== false && state().selection.isSingleCell) {
|
|
4131
4552
|
<ate-button
|
|
4132
4553
|
icon="split_scene"
|
|
4133
4554
|
[title]="i18n().table().splitCell"
|
|
@@ -4208,6 +4629,7 @@ class AteBaseSubBubbleMenu {
|
|
|
4208
4629
|
content: this.menuRef().nativeElement,
|
|
4209
4630
|
trigger: "manual",
|
|
4210
4631
|
placement: "bottom-start",
|
|
4632
|
+
theme: "ate-bubble-menu",
|
|
4211
4633
|
appendTo: () => ed?.options?.element || document.body,
|
|
4212
4634
|
interactive: true,
|
|
4213
4635
|
arrow: false,
|
|
@@ -4454,7 +4876,7 @@ class AteLinkBubbleMenuComponent extends AteBaseSubBubbleMenu {
|
|
|
4454
4876
|
</div>
|
|
4455
4877
|
</div>
|
|
4456
4878
|
</div>
|
|
4457
|
-
`, isInline: true, styles: [".link-input-row{display:flex;align-items:center;gap:6px}.url-input-container{flex:1;display:flex;align-items:center;background:var(--ate-surface-secondary, #f8fafc);border:1px solid var(--ate-border, #e2e8f0);border-radius:8px;padding:0 10px;height:32px;transition:all .15s ease}.url-input-container:focus-within{border-color:var(--ate-primary, #3b82f6);background:var(--ate-surface, #ffffff);box-shadow:0 0 0 2px var(--ate-primary-light, rgba(59, 130, 246, .1))}.icon-link{font-size:16px;color:var(--ate-text-muted, #94a3b8);margin-right:6px}.url-field{background:transparent;border:none;outline:none;color:var(--ate-text, #1e293b);font-size:13px;width:100%;font-family:inherit}.action-buttons{display:flex;align-items:center;gap:2px}\n"], dependencies: [{ kind: "component", type: AteButtonComponent, selector: "ate-button", inputs: ["icon", "title", "active", "disabled", "color", "backgroundColor", "variant", "size", "iconSize"], outputs: ["buttonClick"] }, { kind: "component", type: AteSeparatorComponent, selector: "ate-separator"
|
|
4879
|
+
`, isInline: true, styles: [".link-input-row{display:flex;align-items:center;gap:6px}.url-input-container{flex:1;display:flex;align-items:center;background:var(--ate-surface-secondary, #f8fafc);border:1px solid var(--ate-border, #e2e8f0);border-radius:8px;padding:0 10px;height:32px;transition:all .15s ease}.url-input-container:focus-within{border-color:var(--ate-primary, #3b82f6);background:var(--ate-surface, #ffffff);box-shadow:0 0 0 2px var(--ate-primary-light, rgba(59, 130, 246, .1))}.icon-link{font-size:16px;color:var(--ate-text-muted, #94a3b8);margin-right:6px}.url-field{background:transparent;border:none;outline:none;color:var(--ate-text, #1e293b);font-size:13px;width:100%;font-family:inherit}.action-buttons{display:flex;align-items:center;gap:2px}\n"], dependencies: [{ kind: "component", type: AteButtonComponent, selector: "ate-button", inputs: ["icon", "title", "active", "disabled", "color", "backgroundColor", "variant", "size", "iconSize"], outputs: ["buttonClick"] }, { kind: "component", type: AteSeparatorComponent, selector: "ate-separator" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4458
4880
|
}
|
|
4459
4881
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AteLinkBubbleMenuComponent, decorators: [{
|
|
4460
4882
|
type: Component,
|
|
@@ -4781,7 +5203,7 @@ class AteColorBubbleMenuComponent extends AteBaseSubBubbleMenu {
|
|
|
4781
5203
|
</div>
|
|
4782
5204
|
</div>
|
|
4783
5205
|
</div>
|
|
4784
|
-
`, isInline: true, styles: [".color-picker-container{display:flex;flex-direction:column;gap:8px}.dropdown-row{display:flex;align-items:center;width:100%}.dropdown-row.presets{justify-content:center}.dropdown-row.controls{gap:8px;justify-content:space-between;padding-top:4px;border-top:1px solid var(--ate-border, #e2e8f0)}.color-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;width:100%}:host ::ng-deep .color-swatch-btn .ate-button{width:100%;aspect-ratio:1;height:auto;border-radius:4px;border:1px solid rgba(0,0,0,.1);padding:0}:host ::ng-deep .color-swatch-btn .ate-button.is-active{border-color:var(--ate-primary, #3b82f6);box-shadow:0 0 0 2px #3b82f64d}:host ::ng-deep .btn-native-picker-trigger .ate-button{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2)}.divider-v{width:1px;height:24px;background:var(--ate-border, #e2e8f0)}.hex-input-wrapper{flex:1;display:flex;align-items:center;background:var(--ate-surface-secondary, #f8fafc);border:1px solid var(--ate-border, #e2e8f0);border-radius:8px;padding:0 10px;height:32px;transition:border-color .15s ease}.hex-input-wrapper:focus-within{border-color:var(--ate-primary, #3b82f6);background:var(--ate-menu-bg, #ffffff)}.hex-hash{color:var(--ate-text-muted, #94a3b8);font-family:monospace;font-size:.875rem}.hex-input{background:transparent;border:none;outline:none;color:var(--ate-text, #1e293b);font-family:monospace;font-size:.875rem;width:100%;padding-left:4px}.native-trigger-wrapper{position:relative;width:32px;height:32px}.hidden-native-input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: AteButtonComponent, selector: "ate-button", inputs: ["icon", "title", "active", "disabled", "color", "backgroundColor", "variant", "size", "iconSize"], outputs: ["buttonClick"] }, { kind: "component", type: AteSeparatorComponent, selector: "ate-separator"
|
|
5206
|
+
`, isInline: true, styles: [".color-picker-container{display:flex;flex-direction:column;gap:8px}.dropdown-row{display:flex;align-items:center;width:100%}.dropdown-row.presets{justify-content:center}.dropdown-row.controls{gap:8px;justify-content:space-between;padding-top:4px;border-top:1px solid var(--ate-border, #e2e8f0)}.color-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;width:100%}:host ::ng-deep .color-swatch-btn .ate-button{width:100%;aspect-ratio:1;height:auto;border-radius:4px;border:1px solid rgba(0,0,0,.1);padding:0}:host ::ng-deep .color-swatch-btn .ate-button.is-active{border-color:var(--ate-primary, #3b82f6);box-shadow:0 0 0 2px #3b82f64d}:host ::ng-deep .btn-native-picker-trigger .ate-button{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2)}.divider-v{width:1px;height:24px;background:var(--ate-border, #e2e8f0)}.hex-input-wrapper{flex:1;display:flex;align-items:center;background:var(--ate-surface-secondary, #f8fafc);border:1px solid var(--ate-border, #e2e8f0);border-radius:8px;padding:0 10px;height:32px;transition:border-color .15s ease}.hex-input-wrapper:focus-within{border-color:var(--ate-primary, #3b82f6);background:var(--ate-menu-bg, #ffffff)}.hex-hash{color:var(--ate-text-muted, #94a3b8);font-family:monospace;font-size:.875rem}.hex-input{background:transparent;border:none;outline:none;color:var(--ate-text, #1e293b);font-family:monospace;font-size:.875rem;width:100%;padding-left:4px}.native-trigger-wrapper{position:relative;width:32px;height:32px}.hidden-native-input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: AteButtonComponent, selector: "ate-button", inputs: ["icon", "title", "active", "disabled", "color", "backgroundColor", "variant", "size", "iconSize"], outputs: ["buttonClick"] }, { kind: "component", type: AteSeparatorComponent, selector: "ate-separator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4785
5207
|
}
|
|
4786
5208
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AteColorBubbleMenuComponent, decorators: [{
|
|
4787
5209
|
type: Component,
|
|
@@ -6107,124 +6529,6 @@ const AteLinkClickBehavior = Extension.create({
|
|
|
6107
6529
|
},
|
|
6108
6530
|
});
|
|
6109
6531
|
|
|
6110
|
-
// Default toolbar configuration
|
|
6111
|
-
const ATE_DEFAULT_TOOLBAR_CONFIG = {
|
|
6112
|
-
bold: true,
|
|
6113
|
-
italic: true,
|
|
6114
|
-
underline: true,
|
|
6115
|
-
strike: true,
|
|
6116
|
-
code: true,
|
|
6117
|
-
codeBlock: true,
|
|
6118
|
-
superscript: false, // Disabled by default (opt-in)
|
|
6119
|
-
subscript: false, // Disabled by default (opt-in)
|
|
6120
|
-
highlight: false, // Disabled by default (opt-in)
|
|
6121
|
-
highlightPicker: true,
|
|
6122
|
-
heading1: true,
|
|
6123
|
-
heading2: true,
|
|
6124
|
-
heading3: true,
|
|
6125
|
-
bulletList: true,
|
|
6126
|
-
orderedList: true,
|
|
6127
|
-
blockquote: true,
|
|
6128
|
-
alignLeft: false, // Disabled by default (opt-in)
|
|
6129
|
-
alignCenter: false, // Disabled by default (opt-in)
|
|
6130
|
-
alignRight: false, // Disabled by default (opt-in)
|
|
6131
|
-
alignJustify: false, // Disabled by default (opt-in)
|
|
6132
|
-
link: true,
|
|
6133
|
-
image: true,
|
|
6134
|
-
horizontalRule: false, // Disabled by default (opt-in)
|
|
6135
|
-
table: true,
|
|
6136
|
-
undo: true,
|
|
6137
|
-
redo: true,
|
|
6138
|
-
clear: false, // Disabled by default (opt-in)
|
|
6139
|
-
textColor: true,
|
|
6140
|
-
separator: true,
|
|
6141
|
-
};
|
|
6142
|
-
// Default bubble menu configuration
|
|
6143
|
-
const ATE_DEFAULT_BUBBLE_MENU_CONFIG = {
|
|
6144
|
-
bold: true,
|
|
6145
|
-
italic: true,
|
|
6146
|
-
underline: true,
|
|
6147
|
-
strike: true,
|
|
6148
|
-
code: true,
|
|
6149
|
-
superscript: false,
|
|
6150
|
-
subscript: false,
|
|
6151
|
-
highlight: false,
|
|
6152
|
-
highlightPicker: true,
|
|
6153
|
-
textColor: true,
|
|
6154
|
-
link: true,
|
|
6155
|
-
separator: true,
|
|
6156
|
-
};
|
|
6157
|
-
// Default image bubble menu configuration
|
|
6158
|
-
const ATE_DEFAULT_IMAGE_BUBBLE_MENU_CONFIG = {
|
|
6159
|
-
changeImage: true,
|
|
6160
|
-
resizeSmall: true,
|
|
6161
|
-
resizeMedium: true,
|
|
6162
|
-
resizeLarge: true,
|
|
6163
|
-
resizeOriginal: true,
|
|
6164
|
-
deleteImage: true,
|
|
6165
|
-
separator: true,
|
|
6166
|
-
};
|
|
6167
|
-
// Default table bubble menu configuration
|
|
6168
|
-
const ATE_DEFAULT_TABLE_MENU_CONFIG = {
|
|
6169
|
-
addRowBefore: true,
|
|
6170
|
-
addRowAfter: true,
|
|
6171
|
-
deleteRow: true,
|
|
6172
|
-
addColumnBefore: true,
|
|
6173
|
-
addColumnAfter: true,
|
|
6174
|
-
deleteColumn: true,
|
|
6175
|
-
toggleHeaderRow: true,
|
|
6176
|
-
toggleHeaderColumn: true,
|
|
6177
|
-
deleteTable: true,
|
|
6178
|
-
separator: true,
|
|
6179
|
-
};
|
|
6180
|
-
// Default cell bubble menu configuration
|
|
6181
|
-
const ATE_DEFAULT_CELL_MENU_CONFIG = {
|
|
6182
|
-
mergeCells: true,
|
|
6183
|
-
splitCell: true,
|
|
6184
|
-
};
|
|
6185
|
-
/**
|
|
6186
|
-
* Ultimate default configuration for the Angular Tiptap Editor.
|
|
6187
|
-
* This serves as the 'Level 4' fallback in the configuration hierarchy:
|
|
6188
|
-
* 1. Component Inputs (Le Roi)
|
|
6189
|
-
* 2. Component [config] (Le Prince)
|
|
6190
|
-
* 3. Global provideAteEditor() (Le Duc)
|
|
6191
|
-
* 4. ATE_DEFAULT_CONFIG (Le Peuple)
|
|
6192
|
-
*/
|
|
6193
|
-
const ATE_DEFAULT_CONFIG = {
|
|
6194
|
-
theme: "auto",
|
|
6195
|
-
mode: "classic",
|
|
6196
|
-
height: "auto",
|
|
6197
|
-
minHeight: "200px",
|
|
6198
|
-
maxHeight: "none",
|
|
6199
|
-
fillContainer: false,
|
|
6200
|
-
autofocus: false,
|
|
6201
|
-
editable: true,
|
|
6202
|
-
disabled: false,
|
|
6203
|
-
spellcheck: true,
|
|
6204
|
-
enableOfficePaste: true,
|
|
6205
|
-
showToolbar: true,
|
|
6206
|
-
showFooter: true,
|
|
6207
|
-
showCharacterCount: true,
|
|
6208
|
-
showWordCount: true,
|
|
6209
|
-
showEditToggle: false,
|
|
6210
|
-
showBubbleMenu: true,
|
|
6211
|
-
showImageBubbleMenu: true,
|
|
6212
|
-
showTableMenu: true,
|
|
6213
|
-
showCellMenu: true,
|
|
6214
|
-
enableSlashCommands: true,
|
|
6215
|
-
floatingToolbar: false,
|
|
6216
|
-
toolbar: ATE_DEFAULT_TOOLBAR_CONFIG,
|
|
6217
|
-
bubbleMenu: ATE_DEFAULT_BUBBLE_MENU_CONFIG,
|
|
6218
|
-
imageBubbleMenu: ATE_DEFAULT_IMAGE_BUBBLE_MENU_CONFIG,
|
|
6219
|
-
tableBubbleMenu: ATE_DEFAULT_TABLE_MENU_CONFIG,
|
|
6220
|
-
cellBubbleMenu: ATE_DEFAULT_CELL_MENU_CONFIG,
|
|
6221
|
-
slashCommands: {},
|
|
6222
|
-
tiptapExtensions: [],
|
|
6223
|
-
tiptapOptions: {},
|
|
6224
|
-
stateCalculators: [],
|
|
6225
|
-
angularNodes: [],
|
|
6226
|
-
};
|
|
6227
|
-
|
|
6228
6532
|
// Slash commands configuration is handled dynamically via slashCommandsConfigComputed
|
|
6229
6533
|
/**
|
|
6230
6534
|
* The main rich-text editor component for Angular.
|
|
@@ -6471,22 +6775,15 @@ class AngularTiptapEditorComponent {
|
|
|
6471
6775
|
this.finalImageUploadConfig = computed(() => {
|
|
6472
6776
|
const fromInput = this.imageUpload();
|
|
6473
6777
|
const fromConfig = this.effectiveConfig().imageUpload;
|
|
6778
|
+
const base = ATE_DEFAULT_IMAGE_UPLOAD_CONFIG;
|
|
6474
6779
|
const merged = {
|
|
6475
|
-
|
|
6476
|
-
maxWidth: 1920,
|
|
6477
|
-
maxHeight: 1080,
|
|
6478
|
-
allowedTypes: ["image/jpeg", "image/png", "image/gif", "image/webp"],
|
|
6479
|
-
enableDragDrop: true,
|
|
6480
|
-
showPreview: true,
|
|
6481
|
-
multiple: false,
|
|
6482
|
-
compressImages: true,
|
|
6483
|
-
quality: 0.8,
|
|
6780
|
+
...base,
|
|
6484
6781
|
...fromConfig,
|
|
6485
6782
|
...fromInput,
|
|
6486
6783
|
};
|
|
6487
6784
|
return {
|
|
6488
6785
|
...merged,
|
|
6489
|
-
maxSize: merged.maxSize * 1024 * 1024, // Convert MB to bytes for internal service
|
|
6786
|
+
maxSize: (merged.maxSize ?? 5) * 1024 * 1024, // Convert MB to bytes for internal service
|
|
6490
6787
|
};
|
|
6491
6788
|
}, ...(ngDevMode ? [{ debugName: "finalImageUploadConfig" }] : []));
|
|
6492
6789
|
this.finalImageUploadHandler = computed(() => this.imageUploadHandler() ?? this.effectiveConfig().imageUpload?.handler, ...(ngDevMode ? [{ debugName: "finalImageUploadHandler" }] : []));
|
|
@@ -6636,7 +6933,7 @@ class AngularTiptapEditorComponent {
|
|
|
6636
6933
|
Superscript,
|
|
6637
6934
|
Subscript,
|
|
6638
6935
|
TextAlign.configure({
|
|
6639
|
-
types: ["heading", "paragraph"],
|
|
6936
|
+
types: ["heading", "paragraph", "resizableImage"],
|
|
6640
6937
|
}),
|
|
6641
6938
|
AteLinkClickBehavior,
|
|
6642
6939
|
Highlight.configure({
|
|
@@ -6870,7 +7167,17 @@ class AngularTiptapEditorComponent {
|
|
|
6870
7167
|
}
|
|
6871
7168
|
onEditorClick(event) {
|
|
6872
7169
|
const editor = this.editor();
|
|
6873
|
-
if (!editor
|
|
7170
|
+
if (!editor) {
|
|
7171
|
+
return;
|
|
7172
|
+
}
|
|
7173
|
+
// In read-only mode, handle clearing of node selection
|
|
7174
|
+
if (!this.finalEditable()) {
|
|
7175
|
+
const target = event.target;
|
|
7176
|
+
const editorElement = this.editorElement()?.nativeElement;
|
|
7177
|
+
if (target === editorElement || target.classList.contains("ate-content")) {
|
|
7178
|
+
// Clear selection to hide bubble menus
|
|
7179
|
+
editor.commands.setTextSelection(0);
|
|
7180
|
+
}
|
|
6874
7181
|
return;
|
|
6875
7182
|
}
|
|
6876
7183
|
// Verify if interaction is on the container element and not on the content
|
|
@@ -6930,7 +7237,7 @@ class AngularTiptapEditorComponent {
|
|
|
6930
7237
|
}
|
|
6931
7238
|
|
|
6932
7239
|
<!-- Image Bubble Menu -->
|
|
6933
|
-
@if (
|
|
7240
|
+
@if (finalShowImageBubbleMenu() && editor()) {
|
|
6934
7241
|
<ate-image-bubble-menu
|
|
6935
7242
|
[editor]="editor()!"
|
|
6936
7243
|
[config]="finalImageBubbleMenuConfig()"
|
|
@@ -7005,7 +7312,7 @@ class AngularTiptapEditorComponent {
|
|
|
7005
7312
|
</div>
|
|
7006
7313
|
}
|
|
7007
7314
|
</div>
|
|
7008
|
-
`, isInline: true, styles: [":host{--ate-primary: #2563eb;--ate-primary-contrast: #ffffff;--ate-primary-light: color-mix(in srgb, var(--ate-primary), transparent 90%);--ate-primary-lighter: color-mix(in srgb, var(--ate-primary), transparent 95%);--ate-primary-light-alpha: color-mix(in srgb, var(--ate-primary), transparent 85%);--ate-surface: #ffffff;--ate-surface-secondary: #f8f9fa;--ate-surface-tertiary: #f1f5f9;--ate-text: #2d3748;--ate-text-secondary: #64748b;--ate-text-muted: #a0aec0;--ate-border: #e2e8f0;--ate-highlight-bg: #fef08a;--ate-highlight-color: #854d0e;--ate-button-hover: #f1f5f9;--ate-button-active: #e2e8f0;--ate-error-color: #c53030;--ate-error-bg: #fed7d7;--ate-error-border: #feb2b2;--ate-border-color: var(--ate-border);--ate-border-width: 2px;--ate-border-radius: 12px;--ate-focus-color: var(--ate-primary);--ate-background: var(--ate-surface);--ate-sub-border-radius: 8px;--ate-text-color: var(--ate-text);--ate-placeholder-color: var(--ate-text-muted);--ate-line-height: 1.6;--ate-content-padding: 16px;--ate-menu-bg: var(--ate-surface);--ate-menu-border-radius: var(--ate-border-radius);--ate-menu-border: var(--ate-border);--ate-menu-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--ate-menu-padding: 6px;--ate-toolbar-padding: var(--ate-menu-padding);--ate-toolbar-background: var(--ate-surface-secondary);--ate-toolbar-border-color: var(--ate-border);--ate-toolbar-button-color: var(--ate-text-secondary);--ate-toolbar-button-hover-background: transparent;--ate-toolbar-button-active-background: var(--ate-primary-light);--ate-toolbar-button-active-color: var(--ate-primary);--ate-counter-color: var(--ate-text-secondary);--ate-counter-background: var(--ate-surface-secondary);--ate-counter-border-color: var(--ate-border);--ate-drag-background: #f0f8ff;--ate-drag-border-color: var(--ate-primary);--ate-blockquote-border-color: var(--ate-border);--ate-blockquote-background: var(--ate-surface-secondary);--ate-code-background: var(--ate-surface-secondary);--ate-code-color: var(--ate-code-color);--ate-code-border-color: var(--ate-border);--ate-code-block-background: #0f172a;--ate-code-block-color: #e2e8f0;--ate-code-block-border-color: var(--ate-border);--ate-image-border-radius: 16px;--ate-image-selected-color: var(--ate-primary);--ate-scrollbar-width: 10px;--ate-scrollbar-thumb: var(--ate-border);--ate-scrollbar-thumb-hover: var(--ate-text-muted);--ate-scrollbar-track: transparent;--ate-table-border-color: var(--ate-border);--ate-table-header-background: var(--ate-surface-secondary);--ate-table-header-color: var(--ate-text);--ate-table-cell-background: var(--ate-surface);--ate-table-cell-selected-background: var(--ate-primary-light);--ate-table-resize-handle-color: var(--ate-primary);--ate-table-row-hover-background: var(--ate-primary-lighter)}:host(.dark),:host([data-theme=\"dark\"]){--ate-primary: #3b82f6;--ate-primary-contrast: #ffffff;--ate-primary-light: color-mix(in srgb, var(--ate-primary), transparent 85%);--ate-primary-lighter: color-mix(in srgb, var(--ate-primary), transparent 92%);--ate-primary-light-alpha: color-mix(in srgb, var(--ate-primary), transparent 80%);--ate-surface: #020617;--ate-surface-secondary: #0f172a;--ate-surface-tertiary: #1e293b;--ate-text: #f8fafc;--ate-text-secondary: #94a3b8;--ate-text-muted: #64748b;--ate-border: #1e293b;--ate-highlight-bg: #854d0e;--ate-highlight-color: #fef08a;--ate-button-hover: #1e293b;--ate-button-active: #0f172a;--ate-menu-border: rgba(255, 255, 255, .1);--ate-menu-shadow: 0 20px 25px -5px rgba(0, 0, 0, .3), 0 10px 10px -5px rgba(0, 0, 0, .2);--ate-error-color: #f87171;--ate-error-bg: #450a0a;--ate-error-border: #7f1d1d;--ate-drag-background: var(--ate-surface-tertiary);--ate-drag-border-color: var(--ate-primary);--ate-blockquote-border-color: var(--ate-primary);--ate-toolbar-button-active-background: var(--ate-primary-light);--ate-toolbar-button-active-color: var(--ate-primary);--ate-button-hover: var(--ate-surface-tertiary);--ate-button-active: var(--ate-surface-secondary);--ate-scrollbar-thumb: var(--ate-surface-tertiary);--ate-scrollbar-thumb-hover: var(--ate-text-muted)}:host(.fill-container){display:block;height:100%}.ate-editor{border:var(--ate-border-width) solid var(--ate-border-color);border-radius:var(--ate-border-radius);background:var(--ate-background);overflow:visible;transition:border-color .2s ease;position:relative}:host(.floating-toolbar) .ate-editor{overflow:visible}:host(.fill-container) .ate-editor{display:flex;flex-direction:column;height:100%}:host(.fill-container) .ate-content-wrapper{flex:1;min-height:0}:host(.fill-container) .ate-content{flex:1;min-height:0;overflow-y:auto}.ate-editor:focus-within{border-color:var(--ate-focus-color)}.ate-content{min-height:var(--editor-min-height, 200px);height:var(--editor-height, auto);max-height:var(--editor-max-height, none);overflow-y:var(--editor-overflow, visible);outline:none;position:relative;scrollbar-width:thin;scrollbar-color:var(--ate-scrollbar-thumb) var(--ate-scrollbar-track)}:host(.is-disabled) .ate-content{cursor:not-allowed;opacity:.7;-webkit-user-select:none;user-select:none;pointer-events:none;background-color:var(--ate-surface-tertiary)}:host(.is-readonly) .ate-content{cursor:default;-webkit-user-select:text;user-select:text}:host(.is-readonly) .ate-content ::ng-deep .ate-link{cursor:pointer;pointer-events:auto}.ate-content::-webkit-scrollbar{width:var(--ate-scrollbar-width)}.ate-content-wrapper{position:relative;display:flex;flex-direction:column;min-height:0}.ate-content-wrapper .ate-content{flex:1}.ate-content::-webkit-scrollbar-track{background:var(--ate-scrollbar-track)}.ate-content::-webkit-scrollbar-thumb{background:var(--ate-scrollbar-thumb);border:3px solid transparent;background-clip:content-box;border-radius:10px}.ate-content::-webkit-scrollbar-thumb:hover{background:var(--ate-scrollbar-thumb-hover);background-clip:content-box}.ate-content.drag-over{background:var(--ate-drag-background);border:2px dashed var(--ate-drag-border-color)}.character-count{padding:6px 8px;font-size:12px;color:var(--ate-counter-color);text-align:right;border-top:1px solid var(--ate-counter-border-color);background:var(--ate-counter-background);transition:color .2s ease;border-bottom-left-radius:calc(var(--ate-border-radius) - var(--ate-border-width));border-bottom-right-radius:calc(var(--ate-border-radius) - var(--ate-border-width))}.character-count.limit-reached{color:var(--ate-error-color, #ef4444);font-weight:600}:host ::ng-deep .ProseMirror{padding:var(--ate-content-padding);outline:none;line-height:var(--ate-line-height);color:var(--ate-text-color);min-height:100%;height:100%;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep .ProseMirror h1{font-size:2em;font-weight:700;margin-top:0;margin-bottom:.5em}:host ::ng-deep .ProseMirror h2{font-size:1.5em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror h3{font-size:1.25em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror p{margin:.5em 0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:2em;margin:.5em 0}:host ::ng-deep .ProseMirror blockquote{border-left:4px solid var(--ate-blockquote-border-color);margin:1em 0;background:var(--ate-blockquote-background);padding:.5em 1em;border-radius:0 4px 4px 0}:host ::ng-deep .ProseMirror code{background:var(--ate-code-background);color:var(--ate-code-color);border:1px solid var(--ate-code-border-color);padding:.15em .4em;border-radius:4px;font-family:JetBrains Mono,Fira Code,Monaco,Consolas,monospace;font-size:.85em;font-weight:500}:host ::ng-deep .ProseMirror pre{background:var(--ate-code-block-background);color:var(--ate-code-block-color);border:1px solid var(--ate-code-block-border-color);padding:1em;border-radius:var(--ate-border-radius);overflow-x:auto;margin:1em 0}:host ::ng-deep .ProseMirror pre code{background:none;color:inherit;border:none;padding:0}:host ::ng-deep .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--ate-placeholder-color);pointer-events:none;float:left;height:0}:host ::ng-deep .ProseMirror[contenteditable=false]{pointer-events:none}:host ::ng-deep .ProseMirror[contenteditable=false] img{cursor:default;pointer-events:none}:host ::ng-deep .ProseMirror[contenteditable=false] img:hover{transform:none;box-shadow:0 2px 8px #0000001a}:host ::ng-deep .ProseMirror[contenteditable=false] img.ProseMirror-selectednode{outline:none}:host ::ng-deep .ProseMirror img{position:relative;display:inline-block;max-width:100%;height:auto;cursor:pointer;transition:all .2s ease;border:2px solid transparent;border-radius:var(--ate-image-border-radius)}:host ::ng-deep .ProseMirror img:hover{border-color:var(--ate-border-color);box-shadow:0 2px 4px #0000001a}:host ::ng-deep .ProseMirror img.ProseMirror-selectednode{border-color:var(--ate-image-selected-color);box-shadow:0 0 0 3px var(--ate-primary-light-alpha);transition:all .2s ease}:host ::ng-deep .ProseMirror .tiptap-image{max-width:100%;height:auto;border-radius:var(--ate-image-border-radius);box-shadow:0 4px 20px #00000014;margin:.5em 0;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:block;filter:brightness(1) contrast(1)}:host ::ng-deep .ProseMirror .tiptap-image:hover{box-shadow:0 8px 30px #0000001f;filter:brightness(1.02) contrast(1.02)}:host ::ng-deep .ProseMirror .tiptap-image.ProseMirror-selectednode{outline:2px solid var(--ate-primary);outline-offset:2px;border-radius:var(--ate-image-border-radius);box-shadow:0 0 0 4px var(--ate-primary-light-alpha)}:host ::ng-deep .image-container{margin:.5em 0;text-align:center;border-radius:16px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .image-container.image-align-left{text-align:left}:host ::ng-deep .image-container.image-align-center{text-align:center}:host ::ng-deep .image-container.image-align-right{text-align:right}:host ::ng-deep .image-container img{display:inline-block;max-width:100%;height:auto;border-radius:16px}:host ::ng-deep .resizable-image-container{position:relative;display:inline-block;margin:.5em 0}:host ::ng-deep .resize-controls{position:absolute;inset:0;pointer-events:none;z-index:1000}:host ::ng-deep .resize-handle{position:absolute;width:12px;height:12px;background:var(--ate-primary);border:2px solid var(--ate-surface);border-radius:50%;pointer-events:all;cursor:pointer;z-index:1001;transition:all .15s ease;box-shadow:0 2px 6px #0003}:host ::ng-deep .resize-handle:hover{background:var(--ate-primary);box-shadow:0 3px 8px #0000004d}:host ::ng-deep .resize-handle:active{background:var(--ate-primary)}:host ::ng-deep .resize-handle-n:hover,:host ::ng-deep .resize-handle-s:hover{transform:translate(-50%) scale(1.2)}:host ::ng-deep .resize-handle-w:hover,:host ::ng-deep .resize-handle-e:hover{transform:translateY(-50%) scale(1.2)}:host ::ng-deep .resize-handle-n:active,:host ::ng-deep .resize-handle-s:active{transform:translate(-50%) scale(.9)}:host ::ng-deep .resize-handle-w:active,:host ::ng-deep .resize-handle-e:active{transform:translateY(-50%) scale(.9)}:host ::ng-deep .resize-handle-nw:hover,:host ::ng-deep .resize-handle-ne:hover,:host ::ng-deep .resize-handle-sw:hover,:host ::ng-deep .resize-handle-se:hover{transform:scale(1.2)}:host ::ng-deep .resize-handle-nw:active,:host ::ng-deep .resize-handle-ne:active,:host ::ng-deep .resize-handle-sw:active,:host ::ng-deep .resize-handle-se:active{transform:scale(.9)}:host ::ng-deep .resize-handle-nw{top:0;left:-6px;cursor:nw-resize}:host ::ng-deep .resize-handle-n{top:0;left:50%;transform:translate(-50%);cursor:n-resize}:host ::ng-deep .resize-handle-ne{top:0;right:-6px;cursor:ne-resize}:host ::ng-deep .resize-handle-w{top:50%;left:-6px;transform:translateY(-50%);cursor:w-resize}:host ::ng-deep .resize-handle-e{top:50%;right:-6px;transform:translateY(-50%);cursor:e-resize}:host ::ng-deep .resize-handle-sw{bottom:0;left:-6px;cursor:sw-resize}:host ::ng-deep .resize-handle-s{bottom:0;left:50%;transform:translate(-50%);cursor:s-resize}:host ::ng-deep .resize-handle-se{bottom:0;right:-6px;cursor:se-resize}:host ::ng-deep body.resizing{-webkit-user-select:none;user-select:none;cursor:crosshair}:host ::ng-deep body.resizing .ProseMirror{pointer-events:none}:host ::ng-deep body.resizing .ProseMirror .tiptap-image{pointer-events:none}:host ::ng-deep .image-size-info{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:2px 6px;border-radius:3px;font-size:11px;white-space:nowrap;opacity:0;transition:opacity .2s ease}:host ::ng-deep .image-container:hover .image-size-info{opacity:1}:host ::ng-deep .ProseMirror table{border-collapse:separate;border-spacing:0;margin:0;table-layout:fixed;width:100%;border-radius:8px;overflow:hidden}:host ::ng-deep .ProseMirror table td,:host ::ng-deep .ProseMirror table th{border:none;border-right:1px solid var(--ate-table-border-color);border-bottom:1px solid var(--ate-table-border-color);box-sizing:border-box;min-width:1em;padding:8px 12px;position:relative;vertical-align:top;text-align:left}:host ::ng-deep .ProseMirror table td{background:var(--ate-table-cell-background)}:host ::ng-deep .ProseMirror table td:first-child,:host ::ng-deep .ProseMirror table th:first-child{border-left:1px solid var(--ate-table-border-color)}:host ::ng-deep .ProseMirror table tr:first-child td,:host ::ng-deep .ProseMirror table tr:first-child th{border-top:1px solid var(--ate-table-border-color)}:host ::ng-deep .ProseMirror table tr:first-child th:first-child{border-top-left-radius:8px}:host ::ng-deep .ProseMirror table tr:first-child th:last-child{border-top-right-radius:8px}:host ::ng-deep .ProseMirror table tr:last-child td:first-child{border-bottom-left-radius:8px}:host ::ng-deep .ProseMirror table tr:last-child td:last-child{border-bottom-right-radius:8px}:host ::ng-deep .ProseMirror table th{background:var(--ate-table-header-background);font-weight:600;color:var(--ate-table-header-color)}:host ::ng-deep .ProseMirror table .selectedCell:after{background:var(--ate-table-cell-selected-background);content:\"\";inset:0;pointer-events:none;position:absolute;z-index:2}:host ::ng-deep .ProseMirror table .column-resize-handle{position:absolute;right:-2px;top:0;bottom:0;width:4px;background-color:var(--ate-table-resize-handle-color);opacity:0;transition:opacity .2s ease}:host ::ng-deep .ProseMirror table:hover .column-resize-handle{opacity:1}:host ::ng-deep .ProseMirror table .column-resize-handle:hover{background-color:var(--ate-focus-color)}:host ::ng-deep .ProseMirror .tableWrapper{overflow-x:auto;margin:1em 0;border-radius:8px}:host ::ng-deep .ProseMirror .tableWrapper table{margin:0;border-radius:8px;min-width:600px;overflow:hidden}:host ::ng-deep .ProseMirror table p{margin:0}:host ::ng-deep .ProseMirror table tbody tr:hover td{background-color:var(--ate-table-row-hover-background)}\n"], dependencies: [{ kind: "component", type: AteToolbarComponent, selector: "ate-toolbar", inputs: ["editor", "config", "imageUpload", "floating"] }, { kind: "component", type: AteBubbleMenuComponent, selector: "ate-bubble-menu", inputs: ["config"] }, { kind: "component", type: AteImageBubbleMenuComponent, selector: "ate-image-bubble-menu", inputs: ["config", "imageUpload"] }, { kind: "component", type: AteTableBubbleMenuComponent, selector: "ate-table-bubble-menu", inputs: ["config"] }, { kind: "component", type: AteCellBubbleMenuComponent, selector: "ate-cell-bubble-menu", inputs: ["config"] }, { kind: "component", type: AteSlashCommandsComponent, selector: "ate-slash-commands", inputs: ["editor", "config"] }, { kind: "component", type: AteLinkBubbleMenuComponent, selector: "ate-link-bubble-menu" }, { kind: "component", type: AteColorBubbleMenuComponent, selector: "ate-color-bubble-menu" }, { kind: "component", type: AteEditToggleComponent, selector: "ate-edit-toggle", inputs: ["editable", "translations"], outputs: ["editToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7315
|
+
`, isInline: true, styles: [":host{--ate-primary: #2563eb;--ate-primary-hover: #153ca9;--ate-primary-contrast: #ffffff;--ate-primary-light: color-mix(in srgb, var(--ate-primary), transparent 90%);--ate-primary-lighter: color-mix(in srgb, var(--ate-primary), transparent 95%);--ate-primary-light-alpha: color-mix(in srgb, var(--ate-primary), transparent 85%);--ate-surface: #ffffff;--ate-surface-secondary: #f8f9fa;--ate-surface-tertiary: #f1f5f9;--ate-text: #2d3748;--ate-text-secondary: #64748b;--ate-text-muted: #a0aec0;--ate-border: #e2e8f0;--ate-highlight-bg: #fef08a;--ate-highlight-color: #854d0e;--ate-button-hover: #f1f5f9;--ate-button-active: #e2e8f0;--ate-error-color: #c53030;--ate-error-bg: #fed7d7;--ate-error-border: #feb2b2;--ate-border-color: var(--ate-border);--ate-border-width: 2px;--ate-border-radius: 12px;--ate-focus-color: var(--ate-primary);--ate-background: var(--ate-surface);--ate-sub-border-radius: 8px;--ate-text-color: var(--ate-text);--ate-placeholder-color: var(--ate-text-muted);--ate-line-height: 1.6;--ate-content-padding: 16px;--ate-menu-bg: var(--ate-surface);--ate-menu-border-radius: var(--ate-border-radius);--ate-menu-border: var(--ate-border);--ate-menu-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--ate-menu-padding: 4px;--ate-menu-gap: 2px;--ate-toolbar-padding: var(--ate-menu-padding);--ate-toolbar-gap: var(--ate-menu-gap);--ate-toolbar-background: var(--ate-surface-secondary);--ate-toolbar-border-color: var(--ate-border);--ate-toolbar-button-color: var(--ate-text-secondary);--ate-toolbar-button-hover-background: transparent;--ate-toolbar-button-active-background: var(--ate-primary-light);--ate-toolbar-button-active-color: var(--ate-primary);--ate-counter-color: var(--ate-text-secondary);--ate-counter-background: var(--ate-surface-secondary);--ate-counter-border-color: var(--ate-border);--ate-drag-background: #f0f8ff;--ate-drag-border-color: var(--ate-primary);--ate-blockquote-border-color: var(--ate-border);--ate-blockquote-background: var(--ate-surface-secondary);--ate-code-background: var(--ate-surface-secondary);--ate-code-color: var(--ate-text);--ate-code-border-color: var(--ate-border);--ate-code-block-background: #0f172a;--ate-code-block-color: #e2e8f0;--ate-code-block-border-color: var(--ate-border);--ate-image-border-radius: 16px;--ate-image-selected-color: var(--ate-primary);--ate-scrollbar-width: 10px;--ate-scrollbar-thumb: var(--ate-border);--ate-scrollbar-thumb-hover: var(--ate-text-muted);--ate-scrollbar-track: transparent;--ate-table-border-color: var(--ate-border);--ate-table-header-background: var(--ate-surface-secondary);--ate-table-header-color: var(--ate-text);--ate-table-cell-background: var(--ate-surface);--ate-table-cell-selected-background: var(--ate-primary-light);--ate-table-resize-handle-color: var(--ate-primary);--ate-table-row-hover-background: var(--ate-primary-lighter);--ate-tooltip-bg: var(--ate-code-block-background, #0f172a);--ate-tooltip-color: var(--ate-code-block-color, #e2e8f0)}:host(.dark),:host([data-theme=\"dark\"]){--ate-primary: #3b82f6;--ate-primary-contrast: #ffffff;--ate-primary-light: color-mix(in srgb, var(--ate-primary), transparent 85%);--ate-primary-lighter: color-mix(in srgb, var(--ate-primary), transparent 92%);--ate-primary-light-alpha: color-mix(in srgb, var(--ate-primary), transparent 80%);--ate-surface: #020617;--ate-surface-secondary: #0f172a;--ate-surface-tertiary: #1e293b;--ate-text: #f8fafc;--ate-text-secondary: #94a3b8;--ate-text-muted: #64748b;--ate-border: #1e293b;--ate-highlight-bg: #854d0e;--ate-highlight-color: #fef08a;--ate-button-hover: #1e293b;--ate-button-active: #0f172a;--ate-menu-border: rgba(255, 255, 255, .1);--ate-menu-shadow: 0 20px 25px -5px rgba(0, 0, 0, .3), 0 10px 10px -5px rgba(0, 0, 0, .2);--ate-error-color: #f87171;--ate-error-bg: #450a0a;--ate-error-border: #7f1d1d;--ate-drag-background: var(--ate-surface-tertiary);--ate-drag-border-color: var(--ate-primary);--ate-blockquote-border-color: var(--ate-primary);--ate-toolbar-button-active-background: var(--ate-primary-light);--ate-toolbar-button-active-color: var(--ate-primary);--ate-button-hover: var(--ate-surface-tertiary);--ate-button-active: var(--ate-surface-secondary);--ate-scrollbar-thumb: var(--ate-surface-tertiary);--ate-scrollbar-thumb-hover: var(--ate-text-muted)}:host(.fill-container){display:block;height:100%}.ate-editor{border:var(--ate-border-width) solid var(--ate-border-color);border-radius:var(--ate-border-radius);background:var(--ate-background);overflow:visible;transition:border-color .2s ease;position:relative}:host(.floating-toolbar) .ate-editor{overflow:visible}:host(.fill-container) .ate-editor{display:flex;flex-direction:column;height:100%}:host(.fill-container) .ate-content-wrapper{flex:1;min-height:0}:host(.fill-container) .ate-content{flex:1;min-height:0;overflow-y:auto}.ate-editor:focus-within{border-color:var(--ate-focus-color)}.ate-content{min-height:var(--editor-min-height, 200px);height:var(--editor-height, auto);max-height:var(--editor-max-height, none);overflow-y:var(--editor-overflow, visible);outline:none;position:relative;scrollbar-width:thin;scrollbar-color:var(--ate-scrollbar-thumb) var(--ate-scrollbar-track)}:host(.is-disabled) .ate-content{cursor:not-allowed;opacity:.7;-webkit-user-select:none;user-select:none;pointer-events:none;background-color:var(--ate-surface-tertiary)}:host(.is-readonly) .ate-content{cursor:default;-webkit-user-select:text;user-select:text}:host(.is-readonly) .ate-content ::ng-deep .ate-link{cursor:pointer;pointer-events:auto}.ate-content::-webkit-scrollbar{width:var(--ate-scrollbar-width)}.ate-content-wrapper{position:relative;display:flex;flex-direction:column;min-height:0}.ate-content-wrapper .ate-content{flex:1}.ate-content::-webkit-scrollbar-track{background:var(--ate-scrollbar-track)}.ate-content::-webkit-scrollbar-thumb{background:var(--ate-scrollbar-thumb);border:3px solid transparent;background-clip:content-box;border-radius:10px}.ate-content::-webkit-scrollbar-thumb:hover{background:var(--ate-scrollbar-thumb-hover);background-clip:content-box}.ate-content.drag-over{background:var(--ate-drag-background);border:2px dashed var(--ate-drag-border-color)}.character-count{padding:6px 8px;font-size:12px;color:var(--ate-counter-color);text-align:right;border-top:1px solid var(--ate-counter-border-color);background:var(--ate-counter-background);transition:color .2s ease;border-bottom-left-radius:calc(var(--ate-border-radius) - var(--ate-border-width));border-bottom-right-radius:calc(var(--ate-border-radius) - var(--ate-border-width))}.character-count.limit-reached{color:var(--ate-error-color, #ef4444);font-weight:600}:host ::ng-deep .ProseMirror{padding:var(--ate-content-padding);outline:none;line-height:var(--ate-line-height);color:var(--ate-text-color);min-height:100%;height:100%;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep .ProseMirror h1{font-size:2em;font-weight:700;margin-top:0;margin-bottom:.5em}:host ::ng-deep .ProseMirror h2{font-size:1.5em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror h3{font-size:1.25em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror p{margin:.5em 0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:2em;margin:.5em 0}:host ::ng-deep .ProseMirror blockquote{border-left:4px solid var(--ate-blockquote-border-color);margin:1em 0;background:var(--ate-blockquote-background);padding:.5em 1em;border-radius:0 4px 4px 0}:host ::ng-deep .ProseMirror code{background:var(--ate-code-background);color:var(--ate-code-color);border:1px solid var(--ate-code-border-color);padding:.15em .4em;border-radius:4px;font-family:JetBrains Mono,Fira Code,Monaco,Consolas,monospace;font-size:.85em;font-weight:500}:host ::ng-deep .ProseMirror pre{background:var(--ate-code-block-background);color:var(--ate-code-block-color);border:1px solid var(--ate-code-block-border-color);padding:1em;border-radius:var(--ate-border-radius);overflow-x:auto;margin:1em 0}:host ::ng-deep .ProseMirror pre code{background:none;color:inherit;border:none;padding:0}:host ::ng-deep .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--ate-placeholder-color);pointer-events:none;float:left;height:0}:host ::ng-deep .ProseMirror[contenteditable=false] img{cursor:pointer}:host ::ng-deep .ProseMirror[contenteditable=false] a{cursor:pointer}:host ::ng-deep .ProseMirror[contenteditable=false] img:hover{transform:none;box-shadow:0 2px 8px #0000001a}:host ::ng-deep .ProseMirror[contenteditable=false] img.ProseMirror-selectednode{outline:none}:host ::ng-deep .ProseMirror img{position:relative;display:inline-block;max-width:100%;height:auto;cursor:pointer;transition:all .2s ease;border:2px solid transparent;border-radius:var(--ate-image-border-radius)}:host ::ng-deep .ProseMirror img:hover{border-color:var(--ate-border-color);box-shadow:0 2px 4px #0000001a}:host ::ng-deep .ProseMirror img.ProseMirror-selectednode,:host ::ng-deep .resizable-image-container.selected img{border-color:var(--ate-image-selected-color);transition:all .2s ease}:host ::ng-deep .ProseMirror [data-text-align=center],:host ::ng-deep .ProseMirror [data-align=center]{text-align:center}:host ::ng-deep .ProseMirror [data-text-align=right],:host ::ng-deep .ProseMirror [data-align=right]{text-align:right}:host ::ng-deep .ProseMirror [data-text-align=left],:host ::ng-deep .ProseMirror [data-align=left]{text-align:left}:host ::ng-deep .resizable-image-wrapper{display:block;width:100%;margin:.5em 0}:host ::ng-deep .resizable-image-container{position:relative;display:inline-block;max-width:100%}:host ::ng-deep .resize-controls{position:absolute;inset:0;pointer-events:none;z-index:1000;opacity:0;transition:opacity .2s ease}:host:not(.is-readonly):not(.is-disabled) ::ng-deep .resizable-image-container:hover .resize-controls,:host:not(.is-readonly):not(.is-disabled) ::ng-deep body.resizing .resize-controls{opacity:1}:host ::ng-deep .resize-handle{position:absolute;width:.35rem;height:2rem;background:var(--ate-primary);border:2px solid var(--ate-surface);border-radius:var(--ate-border-radius);pointer-events:all;cursor:pointer;z-index:1001;transition:all .15s ease;box-shadow:0 2px 6px #0003}:host ::ng-deep .resize-handle:hover{background:var(--ate-primary);box-shadow:0 3px 8px #0000004d}:host ::ng-deep .resize-handle:active{background:var(--ate-primary)}:host ::ng-deep .resize-handle-w:hover,:host ::ng-deep .resize-handle-e:hover{background:var(--ate-primary-hover)}:host ::ng-deep .resize-handle-w:active,:host ::ng-deep .resize-handle-e:active{transform:translateY(-50%) scale(.9);background:var(--ate-primary-hover)}:host ::ng-deep .resize-handle-w{top:50%;left:.35rem;transform:translateY(-50%);cursor:w-resize}:host ::ng-deep .resize-handle-e{top:50%;right:.35rem;transform:translateY(-50%);cursor:e-resize}:host ::ng-deep body.resizing{-webkit-user-select:none;user-select:none;cursor:crosshair}:host ::ng-deep body.resizing .ProseMirror{pointer-events:none}:host ::ng-deep body.resizing .ProseMirror .resizable-image-container{pointer-events:none}:host ::ng-deep .image-size-info{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:2px 6px;border-radius:3px;font-size:11px;white-space:nowrap;opacity:0;transition:opacity .2s ease}:host ::ng-deep .resizable-image-container:hover .image-size-info{opacity:1}:host ::ng-deep .ProseMirror table{border-collapse:separate;border-spacing:0;margin:0;table-layout:fixed;width:100%;border-radius:8px;overflow:hidden}:host ::ng-deep .ProseMirror table td,:host ::ng-deep .ProseMirror table th{border:none;border-right:1px solid var(--ate-table-border-color);border-bottom:1px solid var(--ate-table-border-color);box-sizing:border-box;min-width:1em;padding:8px 12px;position:relative;vertical-align:top;text-align:left}:host ::ng-deep .ProseMirror table td{background:var(--ate-table-cell-background)}:host ::ng-deep .ProseMirror table td:first-child,:host ::ng-deep .ProseMirror table th:first-child{border-left:1px solid var(--ate-table-border-color)}:host ::ng-deep .ProseMirror table tr:first-child td,:host ::ng-deep .ProseMirror table tr:first-child th{border-top:1px solid var(--ate-table-border-color)}:host ::ng-deep .ProseMirror table tr:first-child th:first-child{border-top-left-radius:8px}:host ::ng-deep .ProseMirror table tr:first-child th:last-child{border-top-right-radius:8px}:host ::ng-deep .ProseMirror table tr:last-child td:first-child{border-bottom-left-radius:8px}:host ::ng-deep .ProseMirror table tr:last-child td:last-child{border-bottom-right-radius:8px}:host ::ng-deep .ProseMirror table th{background:var(--ate-table-header-background);font-weight:600;color:var(--ate-table-header-color)}:host ::ng-deep .ProseMirror table .selectedCell:after{background:var(--ate-table-cell-selected-background);content:\"\";inset:0;pointer-events:none;position:absolute;z-index:2}:host ::ng-deep .ProseMirror table .column-resize-handle{position:absolute;right:-2px;top:0;bottom:0;width:4px;background-color:var(--ate-table-resize-handle-color);opacity:0;transition:opacity .2s ease}:host ::ng-deep .ProseMirror table:hover .column-resize-handle{opacity:1}:host ::ng-deep .ProseMirror table .column-resize-handle:hover{background-color:var(--ate-focus-color)}:host ::ng-deep .ProseMirror .tableWrapper{overflow-x:auto;margin:1em 0;border-radius:8px}:host ::ng-deep .ProseMirror .tableWrapper table{margin:0;border-radius:8px;min-width:600px;overflow:hidden}:host ::ng-deep .ProseMirror table p{margin:0}:host ::ng-deep .ProseMirror table tbody tr:hover td{background-color:var(--ate-table-row-hover-background)}\n"], dependencies: [{ kind: "component", type: AteToolbarComponent, selector: "ate-toolbar", inputs: ["editor", "config", "imageUpload", "floating"] }, { kind: "component", type: AteBubbleMenuComponent, selector: "ate-bubble-menu", inputs: ["config"] }, { kind: "component", type: AteImageBubbleMenuComponent, selector: "ate-image-bubble-menu", inputs: ["config", "imageUpload"] }, { kind: "component", type: AteTableBubbleMenuComponent, selector: "ate-table-bubble-menu", inputs: ["config"] }, { kind: "component", type: AteCellBubbleMenuComponent, selector: "ate-cell-bubble-menu", inputs: ["config"] }, { kind: "component", type: AteSlashCommandsComponent, selector: "ate-slash-commands", inputs: ["editor", "config"] }, { kind: "component", type: AteLinkBubbleMenuComponent, selector: "ate-link-bubble-menu" }, { kind: "component", type: AteColorBubbleMenuComponent, selector: "ate-color-bubble-menu" }, { kind: "component", type: AteEditToggleComponent, selector: "ate-edit-toggle", inputs: ["editable", "translations"], outputs: ["editToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7009
7316
|
}
|
|
7010
7317
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AngularTiptapEditorComponent, decorators: [{
|
|
7011
7318
|
type: Component,
|
|
@@ -7074,7 +7381,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
7074
7381
|
}
|
|
7075
7382
|
|
|
7076
7383
|
<!-- Image Bubble Menu -->
|
|
7077
|
-
@if (
|
|
7384
|
+
@if (finalShowImageBubbleMenu() && editor()) {
|
|
7078
7385
|
<ate-image-bubble-menu
|
|
7079
7386
|
[editor]="editor()!"
|
|
7080
7387
|
[config]="finalImageBubbleMenuConfig()"
|
|
@@ -7149,7 +7456,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
7149
7456
|
</div>
|
|
7150
7457
|
}
|
|
7151
7458
|
</div>
|
|
7152
|
-
`, styles: [":host{--ate-primary: #2563eb;--ate-primary-contrast: #ffffff;--ate-primary-light: color-mix(in srgb, var(--ate-primary), transparent 90%);--ate-primary-lighter: color-mix(in srgb, var(--ate-primary), transparent 95%);--ate-primary-light-alpha: color-mix(in srgb, var(--ate-primary), transparent 85%);--ate-surface: #ffffff;--ate-surface-secondary: #f8f9fa;--ate-surface-tertiary: #f1f5f9;--ate-text: #2d3748;--ate-text-secondary: #64748b;--ate-text-muted: #a0aec0;--ate-border: #e2e8f0;--ate-highlight-bg: #fef08a;--ate-highlight-color: #854d0e;--ate-button-hover: #f1f5f9;--ate-button-active: #e2e8f0;--ate-error-color: #c53030;--ate-error-bg: #fed7d7;--ate-error-border: #feb2b2;--ate-border-color: var(--ate-border);--ate-border-width: 2px;--ate-border-radius: 12px;--ate-focus-color: var(--ate-primary);--ate-background: var(--ate-surface);--ate-sub-border-radius: 8px;--ate-text-color: var(--ate-text);--ate-placeholder-color: var(--ate-text-muted);--ate-line-height: 1.6;--ate-content-padding: 16px;--ate-menu-bg: var(--ate-surface);--ate-menu-border-radius: var(--ate-border-radius);--ate-menu-border: var(--ate-border);--ate-menu-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--ate-menu-padding: 6px;--ate-toolbar-padding: var(--ate-menu-padding);--ate-toolbar-background: var(--ate-surface-secondary);--ate-toolbar-border-color: var(--ate-border);--ate-toolbar-button-color: var(--ate-text-secondary);--ate-toolbar-button-hover-background: transparent;--ate-toolbar-button-active-background: var(--ate-primary-light);--ate-toolbar-button-active-color: var(--ate-primary);--ate-counter-color: var(--ate-text-secondary);--ate-counter-background: var(--ate-surface-secondary);--ate-counter-border-color: var(--ate-border);--ate-drag-background: #f0f8ff;--ate-drag-border-color: var(--ate-primary);--ate-blockquote-border-color: var(--ate-border);--ate-blockquote-background: var(--ate-surface-secondary);--ate-code-background: var(--ate-surface-secondary);--ate-code-color: var(--ate-code-color);--ate-code-border-color: var(--ate-border);--ate-code-block-background: #0f172a;--ate-code-block-color: #e2e8f0;--ate-code-block-border-color: var(--ate-border);--ate-image-border-radius: 16px;--ate-image-selected-color: var(--ate-primary);--ate-scrollbar-width: 10px;--ate-scrollbar-thumb: var(--ate-border);--ate-scrollbar-thumb-hover: var(--ate-text-muted);--ate-scrollbar-track: transparent;--ate-table-border-color: var(--ate-border);--ate-table-header-background: var(--ate-surface-secondary);--ate-table-header-color: var(--ate-text);--ate-table-cell-background: var(--ate-surface);--ate-table-cell-selected-background: var(--ate-primary-light);--ate-table-resize-handle-color: var(--ate-primary);--ate-table-row-hover-background: var(--ate-primary-lighter)}:host(.dark),:host([data-theme=\"dark\"]){--ate-primary: #3b82f6;--ate-primary-contrast: #ffffff;--ate-primary-light: color-mix(in srgb, var(--ate-primary), transparent 85%);--ate-primary-lighter: color-mix(in srgb, var(--ate-primary), transparent 92%);--ate-primary-light-alpha: color-mix(in srgb, var(--ate-primary), transparent 80%);--ate-surface: #020617;--ate-surface-secondary: #0f172a;--ate-surface-tertiary: #1e293b;--ate-text: #f8fafc;--ate-text-secondary: #94a3b8;--ate-text-muted: #64748b;--ate-border: #1e293b;--ate-highlight-bg: #854d0e;--ate-highlight-color: #fef08a;--ate-button-hover: #1e293b;--ate-button-active: #0f172a;--ate-menu-border: rgba(255, 255, 255, .1);--ate-menu-shadow: 0 20px 25px -5px rgba(0, 0, 0, .3), 0 10px 10px -5px rgba(0, 0, 0, .2);--ate-error-color: #f87171;--ate-error-bg: #450a0a;--ate-error-border: #7f1d1d;--ate-drag-background: var(--ate-surface-tertiary);--ate-drag-border-color: var(--ate-primary);--ate-blockquote-border-color: var(--ate-primary);--ate-toolbar-button-active-background: var(--ate-primary-light);--ate-toolbar-button-active-color: var(--ate-primary);--ate-button-hover: var(--ate-surface-tertiary);--ate-button-active: var(--ate-surface-secondary);--ate-scrollbar-thumb: var(--ate-surface-tertiary);--ate-scrollbar-thumb-hover: var(--ate-text-muted)}:host(.fill-container){display:block;height:100%}.ate-editor{border:var(--ate-border-width) solid var(--ate-border-color);border-radius:var(--ate-border-radius);background:var(--ate-background);overflow:visible;transition:border-color .2s ease;position:relative}:host(.floating-toolbar) .ate-editor{overflow:visible}:host(.fill-container) .ate-editor{display:flex;flex-direction:column;height:100%}:host(.fill-container) .ate-content-wrapper{flex:1;min-height:0}:host(.fill-container) .ate-content{flex:1;min-height:0;overflow-y:auto}.ate-editor:focus-within{border-color:var(--ate-focus-color)}.ate-content{min-height:var(--editor-min-height, 200px);height:var(--editor-height, auto);max-height:var(--editor-max-height, none);overflow-y:var(--editor-overflow, visible);outline:none;position:relative;scrollbar-width:thin;scrollbar-color:var(--ate-scrollbar-thumb) var(--ate-scrollbar-track)}:host(.is-disabled) .ate-content{cursor:not-allowed;opacity:.7;-webkit-user-select:none;user-select:none;pointer-events:none;background-color:var(--ate-surface-tertiary)}:host(.is-readonly) .ate-content{cursor:default;-webkit-user-select:text;user-select:text}:host(.is-readonly) .ate-content ::ng-deep .ate-link{cursor:pointer;pointer-events:auto}.ate-content::-webkit-scrollbar{width:var(--ate-scrollbar-width)}.ate-content-wrapper{position:relative;display:flex;flex-direction:column;min-height:0}.ate-content-wrapper .ate-content{flex:1}.ate-content::-webkit-scrollbar-track{background:var(--ate-scrollbar-track)}.ate-content::-webkit-scrollbar-thumb{background:var(--ate-scrollbar-thumb);border:3px solid transparent;background-clip:content-box;border-radius:10px}.ate-content::-webkit-scrollbar-thumb:hover{background:var(--ate-scrollbar-thumb-hover);background-clip:content-box}.ate-content.drag-over{background:var(--ate-drag-background);border:2px dashed var(--ate-drag-border-color)}.character-count{padding:6px 8px;font-size:12px;color:var(--ate-counter-color);text-align:right;border-top:1px solid var(--ate-counter-border-color);background:var(--ate-counter-background);transition:color .2s ease;border-bottom-left-radius:calc(var(--ate-border-radius) - var(--ate-border-width));border-bottom-right-radius:calc(var(--ate-border-radius) - var(--ate-border-width))}.character-count.limit-reached{color:var(--ate-error-color, #ef4444);font-weight:600}:host ::ng-deep .ProseMirror{padding:var(--ate-content-padding);outline:none;line-height:var(--ate-line-height);color:var(--ate-text-color);min-height:100%;height:100%;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep .ProseMirror h1{font-size:2em;font-weight:700;margin-top:0;margin-bottom:.5em}:host ::ng-deep .ProseMirror h2{font-size:1.5em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror h3{font-size:1.25em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror p{margin:.5em 0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:2em;margin:.5em 0}:host ::ng-deep .ProseMirror blockquote{border-left:4px solid var(--ate-blockquote-border-color);margin:1em 0;background:var(--ate-blockquote-background);padding:.5em 1em;border-radius:0 4px 4px 0}:host ::ng-deep .ProseMirror code{background:var(--ate-code-background);color:var(--ate-code-color);border:1px solid var(--ate-code-border-color);padding:.15em .4em;border-radius:4px;font-family:JetBrains Mono,Fira Code,Monaco,Consolas,monospace;font-size:.85em;font-weight:500}:host ::ng-deep .ProseMirror pre{background:var(--ate-code-block-background);color:var(--ate-code-block-color);border:1px solid var(--ate-code-block-border-color);padding:1em;border-radius:var(--ate-border-radius);overflow-x:auto;margin:1em 0}:host ::ng-deep .ProseMirror pre code{background:none;color:inherit;border:none;padding:0}:host ::ng-deep .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--ate-placeholder-color);pointer-events:none;float:left;height:0}:host ::ng-deep .ProseMirror[contenteditable=false]{pointer-events:none}:host ::ng-deep .ProseMirror[contenteditable=false] img{cursor:default;pointer-events:none}:host ::ng-deep .ProseMirror[contenteditable=false] img:hover{transform:none;box-shadow:0 2px 8px #0000001a}:host ::ng-deep .ProseMirror[contenteditable=false] img.ProseMirror-selectednode{outline:none}:host ::ng-deep .ProseMirror img{position:relative;display:inline-block;max-width:100%;height:auto;cursor:pointer;transition:all .2s ease;border:2px solid transparent;border-radius:var(--ate-image-border-radius)}:host ::ng-deep .ProseMirror img:hover{border-color:var(--ate-border-color);box-shadow:0 2px 4px #0000001a}:host ::ng-deep .ProseMirror img.ProseMirror-selectednode{border-color:var(--ate-image-selected-color);box-shadow:0 0 0 3px var(--ate-primary-light-alpha);transition:all .2s ease}:host ::ng-deep .ProseMirror .tiptap-image{max-width:100%;height:auto;border-radius:var(--ate-image-border-radius);box-shadow:0 4px 20px #00000014;margin:.5em 0;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:block;filter:brightness(1) contrast(1)}:host ::ng-deep .ProseMirror .tiptap-image:hover{box-shadow:0 8px 30px #0000001f;filter:brightness(1.02) contrast(1.02)}:host ::ng-deep .ProseMirror .tiptap-image.ProseMirror-selectednode{outline:2px solid var(--ate-primary);outline-offset:2px;border-radius:var(--ate-image-border-radius);box-shadow:0 0 0 4px var(--ate-primary-light-alpha)}:host ::ng-deep .image-container{margin:.5em 0;text-align:center;border-radius:16px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .image-container.image-align-left{text-align:left}:host ::ng-deep .image-container.image-align-center{text-align:center}:host ::ng-deep .image-container.image-align-right{text-align:right}:host ::ng-deep .image-container img{display:inline-block;max-width:100%;height:auto;border-radius:16px}:host ::ng-deep .resizable-image-container{position:relative;display:inline-block;margin:.5em 0}:host ::ng-deep .resize-controls{position:absolute;inset:0;pointer-events:none;z-index:1000}:host ::ng-deep .resize-handle{position:absolute;width:12px;height:12px;background:var(--ate-primary);border:2px solid var(--ate-surface);border-radius:50%;pointer-events:all;cursor:pointer;z-index:1001;transition:all .15s ease;box-shadow:0 2px 6px #0003}:host ::ng-deep .resize-handle:hover{background:var(--ate-primary);box-shadow:0 3px 8px #0000004d}:host ::ng-deep .resize-handle:active{background:var(--ate-primary)}:host ::ng-deep .resize-handle-n:hover,:host ::ng-deep .resize-handle-s:hover{transform:translate(-50%) scale(1.2)}:host ::ng-deep .resize-handle-w:hover,:host ::ng-deep .resize-handle-e:hover{transform:translateY(-50%) scale(1.2)}:host ::ng-deep .resize-handle-n:active,:host ::ng-deep .resize-handle-s:active{transform:translate(-50%) scale(.9)}:host ::ng-deep .resize-handle-w:active,:host ::ng-deep .resize-handle-e:active{transform:translateY(-50%) scale(.9)}:host ::ng-deep .resize-handle-nw:hover,:host ::ng-deep .resize-handle-ne:hover,:host ::ng-deep .resize-handle-sw:hover,:host ::ng-deep .resize-handle-se:hover{transform:scale(1.2)}:host ::ng-deep .resize-handle-nw:active,:host ::ng-deep .resize-handle-ne:active,:host ::ng-deep .resize-handle-sw:active,:host ::ng-deep .resize-handle-se:active{transform:scale(.9)}:host ::ng-deep .resize-handle-nw{top:0;left:-6px;cursor:nw-resize}:host ::ng-deep .resize-handle-n{top:0;left:50%;transform:translate(-50%);cursor:n-resize}:host ::ng-deep .resize-handle-ne{top:0;right:-6px;cursor:ne-resize}:host ::ng-deep .resize-handle-w{top:50%;left:-6px;transform:translateY(-50%);cursor:w-resize}:host ::ng-deep .resize-handle-e{top:50%;right:-6px;transform:translateY(-50%);cursor:e-resize}:host ::ng-deep .resize-handle-sw{bottom:0;left:-6px;cursor:sw-resize}:host ::ng-deep .resize-handle-s{bottom:0;left:50%;transform:translate(-50%);cursor:s-resize}:host ::ng-deep .resize-handle-se{bottom:0;right:-6px;cursor:se-resize}:host ::ng-deep body.resizing{-webkit-user-select:none;user-select:none;cursor:crosshair}:host ::ng-deep body.resizing .ProseMirror{pointer-events:none}:host ::ng-deep body.resizing .ProseMirror .tiptap-image{pointer-events:none}:host ::ng-deep .image-size-info{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:2px 6px;border-radius:3px;font-size:11px;white-space:nowrap;opacity:0;transition:opacity .2s ease}:host ::ng-deep .image-container:hover .image-size-info{opacity:1}:host ::ng-deep .ProseMirror table{border-collapse:separate;border-spacing:0;margin:0;table-layout:fixed;width:100%;border-radius:8px;overflow:hidden}:host ::ng-deep .ProseMirror table td,:host ::ng-deep .ProseMirror table th{border:none;border-right:1px solid var(--ate-table-border-color);border-bottom:1px solid var(--ate-table-border-color);box-sizing:border-box;min-width:1em;padding:8px 12px;position:relative;vertical-align:top;text-align:left}:host ::ng-deep .ProseMirror table td{background:var(--ate-table-cell-background)}:host ::ng-deep .ProseMirror table td:first-child,:host ::ng-deep .ProseMirror table th:first-child{border-left:1px solid var(--ate-table-border-color)}:host ::ng-deep .ProseMirror table tr:first-child td,:host ::ng-deep .ProseMirror table tr:first-child th{border-top:1px solid var(--ate-table-border-color)}:host ::ng-deep .ProseMirror table tr:first-child th:first-child{border-top-left-radius:8px}:host ::ng-deep .ProseMirror table tr:first-child th:last-child{border-top-right-radius:8px}:host ::ng-deep .ProseMirror table tr:last-child td:first-child{border-bottom-left-radius:8px}:host ::ng-deep .ProseMirror table tr:last-child td:last-child{border-bottom-right-radius:8px}:host ::ng-deep .ProseMirror table th{background:var(--ate-table-header-background);font-weight:600;color:var(--ate-table-header-color)}:host ::ng-deep .ProseMirror table .selectedCell:after{background:var(--ate-table-cell-selected-background);content:\"\";inset:0;pointer-events:none;position:absolute;z-index:2}:host ::ng-deep .ProseMirror table .column-resize-handle{position:absolute;right:-2px;top:0;bottom:0;width:4px;background-color:var(--ate-table-resize-handle-color);opacity:0;transition:opacity .2s ease}:host ::ng-deep .ProseMirror table:hover .column-resize-handle{opacity:1}:host ::ng-deep .ProseMirror table .column-resize-handle:hover{background-color:var(--ate-focus-color)}:host ::ng-deep .ProseMirror .tableWrapper{overflow-x:auto;margin:1em 0;border-radius:8px}:host ::ng-deep .ProseMirror .tableWrapper table{margin:0;border-radius:8px;min-width:600px;overflow:hidden}:host ::ng-deep .ProseMirror table p{margin:0}:host ::ng-deep .ProseMirror table tbody tr:hover td{background-color:var(--ate-table-row-hover-background)}\n"] }]
|
|
7459
|
+
`, styles: [":host{--ate-primary: #2563eb;--ate-primary-hover: #153ca9;--ate-primary-contrast: #ffffff;--ate-primary-light: color-mix(in srgb, var(--ate-primary), transparent 90%);--ate-primary-lighter: color-mix(in srgb, var(--ate-primary), transparent 95%);--ate-primary-light-alpha: color-mix(in srgb, var(--ate-primary), transparent 85%);--ate-surface: #ffffff;--ate-surface-secondary: #f8f9fa;--ate-surface-tertiary: #f1f5f9;--ate-text: #2d3748;--ate-text-secondary: #64748b;--ate-text-muted: #a0aec0;--ate-border: #e2e8f0;--ate-highlight-bg: #fef08a;--ate-highlight-color: #854d0e;--ate-button-hover: #f1f5f9;--ate-button-active: #e2e8f0;--ate-error-color: #c53030;--ate-error-bg: #fed7d7;--ate-error-border: #feb2b2;--ate-border-color: var(--ate-border);--ate-border-width: 2px;--ate-border-radius: 12px;--ate-focus-color: var(--ate-primary);--ate-background: var(--ate-surface);--ate-sub-border-radius: 8px;--ate-text-color: var(--ate-text);--ate-placeholder-color: var(--ate-text-muted);--ate-line-height: 1.6;--ate-content-padding: 16px;--ate-menu-bg: var(--ate-surface);--ate-menu-border-radius: var(--ate-border-radius);--ate-menu-border: var(--ate-border);--ate-menu-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--ate-menu-padding: 4px;--ate-menu-gap: 2px;--ate-toolbar-padding: var(--ate-menu-padding);--ate-toolbar-gap: var(--ate-menu-gap);--ate-toolbar-background: var(--ate-surface-secondary);--ate-toolbar-border-color: var(--ate-border);--ate-toolbar-button-color: var(--ate-text-secondary);--ate-toolbar-button-hover-background: transparent;--ate-toolbar-button-active-background: var(--ate-primary-light);--ate-toolbar-button-active-color: var(--ate-primary);--ate-counter-color: var(--ate-text-secondary);--ate-counter-background: var(--ate-surface-secondary);--ate-counter-border-color: var(--ate-border);--ate-drag-background: #f0f8ff;--ate-drag-border-color: var(--ate-primary);--ate-blockquote-border-color: var(--ate-border);--ate-blockquote-background: var(--ate-surface-secondary);--ate-code-background: var(--ate-surface-secondary);--ate-code-color: var(--ate-text);--ate-code-border-color: var(--ate-border);--ate-code-block-background: #0f172a;--ate-code-block-color: #e2e8f0;--ate-code-block-border-color: var(--ate-border);--ate-image-border-radius: 16px;--ate-image-selected-color: var(--ate-primary);--ate-scrollbar-width: 10px;--ate-scrollbar-thumb: var(--ate-border);--ate-scrollbar-thumb-hover: var(--ate-text-muted);--ate-scrollbar-track: transparent;--ate-table-border-color: var(--ate-border);--ate-table-header-background: var(--ate-surface-secondary);--ate-table-header-color: var(--ate-text);--ate-table-cell-background: var(--ate-surface);--ate-table-cell-selected-background: var(--ate-primary-light);--ate-table-resize-handle-color: var(--ate-primary);--ate-table-row-hover-background: var(--ate-primary-lighter);--ate-tooltip-bg: var(--ate-code-block-background, #0f172a);--ate-tooltip-color: var(--ate-code-block-color, #e2e8f0)}:host(.dark),:host([data-theme=\"dark\"]){--ate-primary: #3b82f6;--ate-primary-contrast: #ffffff;--ate-primary-light: color-mix(in srgb, var(--ate-primary), transparent 85%);--ate-primary-lighter: color-mix(in srgb, var(--ate-primary), transparent 92%);--ate-primary-light-alpha: color-mix(in srgb, var(--ate-primary), transparent 80%);--ate-surface: #020617;--ate-surface-secondary: #0f172a;--ate-surface-tertiary: #1e293b;--ate-text: #f8fafc;--ate-text-secondary: #94a3b8;--ate-text-muted: #64748b;--ate-border: #1e293b;--ate-highlight-bg: #854d0e;--ate-highlight-color: #fef08a;--ate-button-hover: #1e293b;--ate-button-active: #0f172a;--ate-menu-border: rgba(255, 255, 255, .1);--ate-menu-shadow: 0 20px 25px -5px rgba(0, 0, 0, .3), 0 10px 10px -5px rgba(0, 0, 0, .2);--ate-error-color: #f87171;--ate-error-bg: #450a0a;--ate-error-border: #7f1d1d;--ate-drag-background: var(--ate-surface-tertiary);--ate-drag-border-color: var(--ate-primary);--ate-blockquote-border-color: var(--ate-primary);--ate-toolbar-button-active-background: var(--ate-primary-light);--ate-toolbar-button-active-color: var(--ate-primary);--ate-button-hover: var(--ate-surface-tertiary);--ate-button-active: var(--ate-surface-secondary);--ate-scrollbar-thumb: var(--ate-surface-tertiary);--ate-scrollbar-thumb-hover: var(--ate-text-muted)}:host(.fill-container){display:block;height:100%}.ate-editor{border:var(--ate-border-width) solid var(--ate-border-color);border-radius:var(--ate-border-radius);background:var(--ate-background);overflow:visible;transition:border-color .2s ease;position:relative}:host(.floating-toolbar) .ate-editor{overflow:visible}:host(.fill-container) .ate-editor{display:flex;flex-direction:column;height:100%}:host(.fill-container) .ate-content-wrapper{flex:1;min-height:0}:host(.fill-container) .ate-content{flex:1;min-height:0;overflow-y:auto}.ate-editor:focus-within{border-color:var(--ate-focus-color)}.ate-content{min-height:var(--editor-min-height, 200px);height:var(--editor-height, auto);max-height:var(--editor-max-height, none);overflow-y:var(--editor-overflow, visible);outline:none;position:relative;scrollbar-width:thin;scrollbar-color:var(--ate-scrollbar-thumb) var(--ate-scrollbar-track)}:host(.is-disabled) .ate-content{cursor:not-allowed;opacity:.7;-webkit-user-select:none;user-select:none;pointer-events:none;background-color:var(--ate-surface-tertiary)}:host(.is-readonly) .ate-content{cursor:default;-webkit-user-select:text;user-select:text}:host(.is-readonly) .ate-content ::ng-deep .ate-link{cursor:pointer;pointer-events:auto}.ate-content::-webkit-scrollbar{width:var(--ate-scrollbar-width)}.ate-content-wrapper{position:relative;display:flex;flex-direction:column;min-height:0}.ate-content-wrapper .ate-content{flex:1}.ate-content::-webkit-scrollbar-track{background:var(--ate-scrollbar-track)}.ate-content::-webkit-scrollbar-thumb{background:var(--ate-scrollbar-thumb);border:3px solid transparent;background-clip:content-box;border-radius:10px}.ate-content::-webkit-scrollbar-thumb:hover{background:var(--ate-scrollbar-thumb-hover);background-clip:content-box}.ate-content.drag-over{background:var(--ate-drag-background);border:2px dashed var(--ate-drag-border-color)}.character-count{padding:6px 8px;font-size:12px;color:var(--ate-counter-color);text-align:right;border-top:1px solid var(--ate-counter-border-color);background:var(--ate-counter-background);transition:color .2s ease;border-bottom-left-radius:calc(var(--ate-border-radius) - var(--ate-border-width));border-bottom-right-radius:calc(var(--ate-border-radius) - var(--ate-border-width))}.character-count.limit-reached{color:var(--ate-error-color, #ef4444);font-weight:600}:host ::ng-deep .ProseMirror{padding:var(--ate-content-padding);outline:none;line-height:var(--ate-line-height);color:var(--ate-text-color);min-height:100%;height:100%;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep .ProseMirror h1{font-size:2em;font-weight:700;margin-top:0;margin-bottom:.5em}:host ::ng-deep .ProseMirror h2{font-size:1.5em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror h3{font-size:1.25em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror p{margin:.5em 0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:2em;margin:.5em 0}:host ::ng-deep .ProseMirror blockquote{border-left:4px solid var(--ate-blockquote-border-color);margin:1em 0;background:var(--ate-blockquote-background);padding:.5em 1em;border-radius:0 4px 4px 0}:host ::ng-deep .ProseMirror code{background:var(--ate-code-background);color:var(--ate-code-color);border:1px solid var(--ate-code-border-color);padding:.15em .4em;border-radius:4px;font-family:JetBrains Mono,Fira Code,Monaco,Consolas,monospace;font-size:.85em;font-weight:500}:host ::ng-deep .ProseMirror pre{background:var(--ate-code-block-background);color:var(--ate-code-block-color);border:1px solid var(--ate-code-block-border-color);padding:1em;border-radius:var(--ate-border-radius);overflow-x:auto;margin:1em 0}:host ::ng-deep .ProseMirror pre code{background:none;color:inherit;border:none;padding:0}:host ::ng-deep .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--ate-placeholder-color);pointer-events:none;float:left;height:0}:host ::ng-deep .ProseMirror[contenteditable=false] img{cursor:pointer}:host ::ng-deep .ProseMirror[contenteditable=false] a{cursor:pointer}:host ::ng-deep .ProseMirror[contenteditable=false] img:hover{transform:none;box-shadow:0 2px 8px #0000001a}:host ::ng-deep .ProseMirror[contenteditable=false] img.ProseMirror-selectednode{outline:none}:host ::ng-deep .ProseMirror img{position:relative;display:inline-block;max-width:100%;height:auto;cursor:pointer;transition:all .2s ease;border:2px solid transparent;border-radius:var(--ate-image-border-radius)}:host ::ng-deep .ProseMirror img:hover{border-color:var(--ate-border-color);box-shadow:0 2px 4px #0000001a}:host ::ng-deep .ProseMirror img.ProseMirror-selectednode,:host ::ng-deep .resizable-image-container.selected img{border-color:var(--ate-image-selected-color);transition:all .2s ease}:host ::ng-deep .ProseMirror [data-text-align=center],:host ::ng-deep .ProseMirror [data-align=center]{text-align:center}:host ::ng-deep .ProseMirror [data-text-align=right],:host ::ng-deep .ProseMirror [data-align=right]{text-align:right}:host ::ng-deep .ProseMirror [data-text-align=left],:host ::ng-deep .ProseMirror [data-align=left]{text-align:left}:host ::ng-deep .resizable-image-wrapper{display:block;width:100%;margin:.5em 0}:host ::ng-deep .resizable-image-container{position:relative;display:inline-block;max-width:100%}:host ::ng-deep .resize-controls{position:absolute;inset:0;pointer-events:none;z-index:1000;opacity:0;transition:opacity .2s ease}:host:not(.is-readonly):not(.is-disabled) ::ng-deep .resizable-image-container:hover .resize-controls,:host:not(.is-readonly):not(.is-disabled) ::ng-deep body.resizing .resize-controls{opacity:1}:host ::ng-deep .resize-handle{position:absolute;width:.35rem;height:2rem;background:var(--ate-primary);border:2px solid var(--ate-surface);border-radius:var(--ate-border-radius);pointer-events:all;cursor:pointer;z-index:1001;transition:all .15s ease;box-shadow:0 2px 6px #0003}:host ::ng-deep .resize-handle:hover{background:var(--ate-primary);box-shadow:0 3px 8px #0000004d}:host ::ng-deep .resize-handle:active{background:var(--ate-primary)}:host ::ng-deep .resize-handle-w:hover,:host ::ng-deep .resize-handle-e:hover{background:var(--ate-primary-hover)}:host ::ng-deep .resize-handle-w:active,:host ::ng-deep .resize-handle-e:active{transform:translateY(-50%) scale(.9);background:var(--ate-primary-hover)}:host ::ng-deep .resize-handle-w{top:50%;left:.35rem;transform:translateY(-50%);cursor:w-resize}:host ::ng-deep .resize-handle-e{top:50%;right:.35rem;transform:translateY(-50%);cursor:e-resize}:host ::ng-deep body.resizing{-webkit-user-select:none;user-select:none;cursor:crosshair}:host ::ng-deep body.resizing .ProseMirror{pointer-events:none}:host ::ng-deep body.resizing .ProseMirror .resizable-image-container{pointer-events:none}:host ::ng-deep .image-size-info{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:2px 6px;border-radius:3px;font-size:11px;white-space:nowrap;opacity:0;transition:opacity .2s ease}:host ::ng-deep .resizable-image-container:hover .image-size-info{opacity:1}:host ::ng-deep .ProseMirror table{border-collapse:separate;border-spacing:0;margin:0;table-layout:fixed;width:100%;border-radius:8px;overflow:hidden}:host ::ng-deep .ProseMirror table td,:host ::ng-deep .ProseMirror table th{border:none;border-right:1px solid var(--ate-table-border-color);border-bottom:1px solid var(--ate-table-border-color);box-sizing:border-box;min-width:1em;padding:8px 12px;position:relative;vertical-align:top;text-align:left}:host ::ng-deep .ProseMirror table td{background:var(--ate-table-cell-background)}:host ::ng-deep .ProseMirror table td:first-child,:host ::ng-deep .ProseMirror table th:first-child{border-left:1px solid var(--ate-table-border-color)}:host ::ng-deep .ProseMirror table tr:first-child td,:host ::ng-deep .ProseMirror table tr:first-child th{border-top:1px solid var(--ate-table-border-color)}:host ::ng-deep .ProseMirror table tr:first-child th:first-child{border-top-left-radius:8px}:host ::ng-deep .ProseMirror table tr:first-child th:last-child{border-top-right-radius:8px}:host ::ng-deep .ProseMirror table tr:last-child td:first-child{border-bottom-left-radius:8px}:host ::ng-deep .ProseMirror table tr:last-child td:last-child{border-bottom-right-radius:8px}:host ::ng-deep .ProseMirror table th{background:var(--ate-table-header-background);font-weight:600;color:var(--ate-table-header-color)}:host ::ng-deep .ProseMirror table .selectedCell:after{background:var(--ate-table-cell-selected-background);content:\"\";inset:0;pointer-events:none;position:absolute;z-index:2}:host ::ng-deep .ProseMirror table .column-resize-handle{position:absolute;right:-2px;top:0;bottom:0;width:4px;background-color:var(--ate-table-resize-handle-color);opacity:0;transition:opacity .2s ease}:host ::ng-deep .ProseMirror table:hover .column-resize-handle{opacity:1}:host ::ng-deep .ProseMirror table .column-resize-handle:hover{background-color:var(--ate-focus-color)}:host ::ng-deep .ProseMirror .tableWrapper{overflow-x:auto;margin:1em 0;border-radius:8px}:host ::ng-deep .ProseMirror .tableWrapper table{margin:0;border-radius:8px;min-width:600px;overflow:hidden}:host ::ng-deep .ProseMirror table p{margin:0}:host ::ng-deep .ProseMirror table tbody tr:hover td{background-color:var(--ate-table-row-hover-background)}\n"] }]
|
|
7153
7460
|
}], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], fillContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillContainer", required: false }] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolbar", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], showCharacterCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCharacterCount", required: false }] }], showWordCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWordCount", required: false }] }], maxCharacters: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCharacters", required: false }] }], enableOfficePaste: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableOfficePaste", required: false }] }], enableSlashCommands: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSlashCommands", required: false }] }], slashCommands: [{ type: i0.Input, args: [{ isSignal: true, alias: "slashCommands", required: false }] }], customSlashCommands: [{ type: i0.Input, args: [{ isSignal: true, alias: "customSlashCommands", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], seamless: [{ type: i0.Input, args: [{ isSignal: true, alias: "seamless", required: false }] }], floatingToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingToolbar", required: false }] }], showEditToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEditToggle", required: false }] }], spellcheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "spellcheck", required: false }] }], tiptapExtensions: [{ type: i0.Input, args: [{ isSignal: true, alias: "tiptapExtensions", required: false }] }], tiptapOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "tiptapOptions", required: false }] }], showBubbleMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBubbleMenu", required: false }] }], bubbleMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "bubbleMenu", required: false }] }], showImageBubbleMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "showImageBubbleMenu", required: false }] }], imageBubbleMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageBubbleMenu", required: false }] }], toolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar", required: false }] }], showTableBubbleMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTableBubbleMenu", required: false }] }], tableBubbleMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableBubbleMenu", required: false }] }], showCellBubbleMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCellBubbleMenu", required: false }] }], cellBubbleMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellBubbleMenu", required: false }] }], stateCalculators: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateCalculators", required: false }] }], imageUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUpload", required: false }] }], imageUploadHandler: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUploadHandler", required: false }] }], contentChange: [{ type: i0.Output, args: ["contentChange"] }], editorCreated: [{ type: i0.Output, args: ["editorCreated"] }], editorUpdate: [{ type: i0.Output, args: ["editorUpdate"] }], editorFocus: [{ type: i0.Output, args: ["editorFocus"] }], editorBlur: [{ type: i0.Output, args: ["editorBlur"] }], editableChange: [{ type: i0.Output, args: ["editableChange"] }], editorElement: [{ type: i0.ViewChild, args: ["editorElement", { isSignal: true }] }] } });
|
|
7154
7461
|
|
|
7155
7462
|
/**
|
|
@@ -7218,55 +7525,6 @@ const ATE_TOOLBAR_KEYS = [
|
|
|
7218
7525
|
"separator",
|
|
7219
7526
|
];
|
|
7220
7527
|
|
|
7221
|
-
/**
|
|
7222
|
-
* Clés des options du menu bulle de texte
|
|
7223
|
-
*/
|
|
7224
|
-
const ATE_BUBBLE_MENU_KEYS = [
|
|
7225
|
-
"bold",
|
|
7226
|
-
"italic",
|
|
7227
|
-
"underline",
|
|
7228
|
-
"strike",
|
|
7229
|
-
"code",
|
|
7230
|
-
"superscript",
|
|
7231
|
-
"subscript",
|
|
7232
|
-
"highlight",
|
|
7233
|
-
"highlightPicker",
|
|
7234
|
-
"textColor",
|
|
7235
|
-
"link",
|
|
7236
|
-
"separator",
|
|
7237
|
-
];
|
|
7238
|
-
/**
|
|
7239
|
-
* Clés des options du menu bulle d'image
|
|
7240
|
-
*/
|
|
7241
|
-
const ATE_IMAGE_BUBBLE_MENU_KEYS = [
|
|
7242
|
-
"changeImage",
|
|
7243
|
-
"resizeSmall",
|
|
7244
|
-
"resizeMedium",
|
|
7245
|
-
"resizeLarge",
|
|
7246
|
-
"resizeOriginal",
|
|
7247
|
-
"deleteImage",
|
|
7248
|
-
"separator",
|
|
7249
|
-
];
|
|
7250
|
-
/**
|
|
7251
|
-
* Clés des options du menu de table
|
|
7252
|
-
*/
|
|
7253
|
-
const ATE_TABLE_BUBBLE_MENU_KEYS = [
|
|
7254
|
-
"addRowBefore",
|
|
7255
|
-
"addRowAfter",
|
|
7256
|
-
"deleteRow",
|
|
7257
|
-
"addColumnBefore",
|
|
7258
|
-
"addColumnAfter",
|
|
7259
|
-
"deleteColumn",
|
|
7260
|
-
"deleteTable",
|
|
7261
|
-
"toggleHeaderRow",
|
|
7262
|
-
"toggleHeaderColumn",
|
|
7263
|
-
"separator",
|
|
7264
|
-
];
|
|
7265
|
-
/**
|
|
7266
|
-
* Clés des options du menu de cellule
|
|
7267
|
-
*/
|
|
7268
|
-
const ATE_CELL_BUBBLE_MENU_KEYS = ["mergeCells", "splitCell"];
|
|
7269
|
-
|
|
7270
7528
|
/*
|
|
7271
7529
|
* Public API Surface of tiptap-editor
|
|
7272
7530
|
*/
|
|
@@ -7276,5 +7534,5 @@ const ATE_CELL_BUBBLE_MENU_KEYS = ["mergeCells", "splitCell"];
|
|
|
7276
7534
|
* Generated bundle index. Do not edit.
|
|
7277
7535
|
*/
|
|
7278
7536
|
|
|
7279
|
-
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 };
|
|
7537
|
+
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 };
|
|
7280
7538
|
//# sourceMappingURL=flogeez-angular-tiptap-editor.mjs.map
|