@flogeez/angular-tiptap-editor 3.1.3 → 3.1.4
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 +18 -0
- package/README.md +2 -2
- package/esm2022/flogeez-angular-tiptap-editor.mjs +5 -0
- package/esm2022/lib/ate-editor.provider.mjs +38 -0
- package/esm2022/lib/components/bubble-menus/base/ate-base-bubble-menu.mjs +207 -0
- package/esm2022/lib/components/bubble-menus/base/ate-base-sub-bubble-menu.mjs +137 -0
- package/esm2022/lib/components/bubble-menus/color/ate-color-bubble-menu.component.mjs +365 -0
- package/esm2022/lib/components/bubble-menus/image/ate-image-bubble-menu.component.mjs +309 -0
- package/esm2022/lib/components/bubble-menus/link/ate-link-bubble-menu.component.mjs +247 -0
- package/esm2022/lib/components/bubble-menus/table/ate-cell-bubble-menu.component.mjs +126 -0
- package/esm2022/lib/components/bubble-menus/table/ate-table-bubble-menu.component.mjs +271 -0
- package/esm2022/lib/components/bubble-menus/text/ate-bubble-menu.component.mjs +272 -0
- package/esm2022/lib/components/color-picker/ate-color-picker.component.mjs +123 -0
- package/esm2022/lib/components/edit-toggle/ate-edit-toggle.component.mjs +42 -0
- package/esm2022/lib/components/editor/angular-tiptap-editor.component.mjs +1031 -0
- package/esm2022/lib/components/editor/ate-block-controls.component.mjs +256 -0
- package/esm2022/lib/components/slash-commands/ate-slash-commands.component.mjs +328 -0
- package/esm2022/lib/components/toolbar/ate-toolbar.component.mjs +531 -0
- package/esm2022/lib/components/ui/ate-button.component.mjs +91 -0
- package/esm2022/lib/components/ui/ate-separator.component.mjs +11 -0
- package/esm2022/lib/config/ate-editor.config.mjs +133 -0
- package/esm2022/lib/config/ate-global-config.token.mjs +6 -0
- package/esm2022/lib/config/ate-slash-commands.config.mjs +130 -0
- package/esm2022/lib/directives/ate-noop-value-accessor.directive.mjs +40 -0
- package/esm2022/lib/directives/ate-tooltip.directive.mjs +138 -0
- package/esm2022/lib/extensions/ate-block-controls.extension.mjs +156 -0
- package/esm2022/lib/extensions/ate-link-click-behavior.extension.mjs +32 -0
- package/esm2022/lib/extensions/ate-resizable-image.extension.mjs +277 -0
- package/esm2022/lib/extensions/ate-table.extension.mjs +27 -0
- package/esm2022/lib/extensions/ate-tiptap-state.extension.mjs +85 -0
- package/esm2022/lib/extensions/ate-upload-progress.extension.mjs +195 -0
- package/esm2022/lib/extensions/calculators/ate-discovery.calculator.mjs +62 -0
- package/esm2022/lib/extensions/calculators/ate-image.calculator.mjs +8 -0
- package/esm2022/lib/extensions/calculators/ate-marks.calculator.mjs +75 -0
- package/esm2022/lib/extensions/calculators/ate-selection.calculator.mjs +35 -0
- package/esm2022/lib/extensions/calculators/ate-structure.calculator.mjs +34 -0
- package/esm2022/lib/extensions/calculators/ate-table.calculator.mjs +38 -0
- package/esm2022/lib/models/ate-bubble-menu.model.mjs +53 -0
- package/esm2022/lib/models/ate-editor-config.model.mjs +2 -0
- package/esm2022/lib/models/ate-editor-state.model.mjs +90 -0
- package/esm2022/lib/models/ate-image.model.mjs +2 -0
- package/esm2022/lib/models/ate-slash-command.model.mjs +2 -0
- package/esm2022/lib/models/ate-toolbar.model.mjs +35 -0
- package/esm2022/lib/node-view/ate-angular-node-view.mjs +97 -0
- package/esm2022/lib/node-view/ate-injector.registry.mjs +16 -0
- package/esm2022/lib/node-view/ate-node-view.factory.mjs +125 -0
- package/esm2022/lib/node-view/ate-node-view.models.mjs +2 -0
- package/esm2022/lib/node-view/ate-node-view.renderer.mjs +154 -0
- package/esm2022/lib/node-view/ate-register-angular-component.mjs +49 -0
- package/esm2022/lib/services/ate-color-picker.service.mjs +194 -0
- package/esm2022/lib/services/ate-editor-commands.service.mjs +474 -0
- package/esm2022/lib/services/ate-i18n.service.mjs +422 -0
- package/esm2022/lib/services/ate-image.service.mjs +459 -0
- package/esm2022/lib/services/ate-link.service.mjs +99 -0
- package/esm2022/lib/utils/ate-color.utils.mjs +60 -0
- package/esm2022/public-api.mjs +40 -0
- package/fesm2022/flogeez-angular-tiptap-editor.mjs +319 -352
- package/fesm2022/flogeez-angular-tiptap-editor.mjs.map +1 -1
- package/index.d.ts +3 -1734
- package/lib/ate-editor.provider.d.ts +21 -0
- package/lib/components/bubble-menus/base/ate-base-bubble-menu.d.ts +71 -0
- package/lib/components/bubble-menus/base/ate-base-sub-bubble-menu.d.ts +60 -0
- package/lib/components/bubble-menus/color/ate-color-bubble-menu.component.d.ts +77 -0
- package/lib/components/bubble-menus/image/ate-image-bubble-menu.component.d.ts +49 -0
- package/lib/components/bubble-menus/link/ate-link-bubble-menu.component.d.ts +55 -0
- package/lib/components/bubble-menus/table/ate-cell-bubble-menu.component.d.ts +16 -0
- package/lib/components/bubble-menus/table/ate-table-bubble-menu.component.d.ts +25 -0
- package/lib/components/bubble-menus/text/ate-bubble-menu.component.d.ts +53 -0
- package/lib/components/color-picker/ate-color-picker.component.d.ts +54 -0
- package/lib/components/edit-toggle/ate-edit-toggle.component.d.ts +13 -0
- package/lib/components/editor/angular-tiptap-editor.component.d.ts +242 -0
- package/lib/components/editor/ate-block-controls.component.d.ts +44 -0
- package/lib/components/slash-commands/ate-slash-commands.component.d.ts +34 -0
- package/lib/components/toolbar/ate-toolbar.component.d.ts +47 -0
- package/lib/components/ui/ate-button.component.d.ts +25 -0
- package/lib/components/ui/ate-separator.component.d.ts +5 -0
- package/lib/config/ate-editor.config.d.ts +19 -0
- package/lib/config/ate-global-config.token.d.ts +6 -0
- package/lib/config/ate-slash-commands.config.d.ts +41 -0
- package/lib/directives/ate-noop-value-accessor.directive.d.ts +13 -0
- package/lib/directives/ate-tooltip.directive.d.ts +30 -0
- package/lib/extensions/ate-block-controls.extension.d.ts +10 -0
- package/lib/extensions/ate-link-click-behavior.extension.d.ts +2 -0
- package/lib/extensions/ate-resizable-image.extension.d.ts +27 -0
- package/lib/extensions/ate-table.extension.d.ts +2 -0
- package/lib/extensions/ate-tiptap-state.extension.d.ts +7 -0
- package/lib/extensions/ate-upload-progress.extension.d.ts +7 -0
- package/lib/extensions/calculators/ate-discovery.calculator.d.ts +7 -0
- package/lib/extensions/calculators/ate-image.calculator.d.ts +2 -0
- package/lib/extensions/calculators/ate-marks.calculator.d.ts +2 -0
- package/lib/extensions/calculators/ate-selection.calculator.d.ts +2 -0
- package/lib/extensions/calculators/ate-structure.calculator.d.ts +2 -0
- package/lib/extensions/calculators/ate-table.calculator.d.ts +2 -0
- package/lib/models/ate-bubble-menu.model.d.ts +33 -0
- package/lib/models/ate-editor-config.model.d.ts +113 -0
- package/lib/models/ate-editor-state.model.d.ts +109 -0
- package/lib/models/ate-image.model.d.ts +104 -0
- package/lib/models/ate-slash-command.model.d.ts +17 -0
- package/lib/models/ate-toolbar.model.d.ts +18 -0
- package/lib/node-view/ate-angular-node-view.d.ts +115 -0
- package/lib/node-view/ate-injector.registry.d.ts +3 -0
- package/lib/node-view/ate-node-view.factory.d.ts +10 -0
- package/lib/node-view/ate-node-view.models.d.ts +138 -0
- package/lib/node-view/ate-node-view.renderer.d.ts +23 -0
- package/lib/node-view/ate-register-angular-component.d.ts +35 -0
- package/lib/services/ate-color-picker.service.d.ts +65 -0
- package/lib/services/ate-editor-commands.service.d.ts +75 -0
- package/lib/services/ate-i18n.service.d.ts +406 -0
- package/lib/services/ate-image.service.d.ts +82 -0
- package/lib/services/ate-link.service.d.ts +42 -0
- package/lib/utils/ate-color.utils.d.ts +12 -0
- package/package.json +3 -1
- package/public-api.d.ts +31 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, ElementRef, input, computed, effect, Directive, output,
|
|
2
|
+
import { inject, ElementRef, input, computed, effect, Directive, output, Component, ChangeDetectionStrategy, signal, Injectable, viewChild, ApplicationRef, EnvironmentInjector, createComponent, InjectionToken, DestroyRef, Injector, untracked, makeEnvironmentProviders, APP_INITIALIZER } from '@angular/core';
|
|
3
3
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
4
|
-
import { Node as Node$1,
|
|
4
|
+
import { Node as Node$1, mergeAttributes, nodeInputRule, Extension, getAttributes, Editor } from '@tiptap/core';
|
|
5
5
|
import StarterKit from '@tiptap/starter-kit';
|
|
6
6
|
import { Placeholder, CharacterCount } from '@tiptap/extensions';
|
|
7
7
|
import { Superscript } from '@tiptap/extension-superscript';
|
|
@@ -693,10 +693,10 @@ class AteTooltipDirective {
|
|
|
693
693
|
this.el = inject(ElementRef);
|
|
694
694
|
this.tippyInstance = null;
|
|
695
695
|
// Signal Inputs
|
|
696
|
-
this.content = input(null,
|
|
697
|
-
this.placement = input("top",
|
|
698
|
-
this.delay = input([200, 50],
|
|
699
|
-
this.disabled = input(false,
|
|
696
|
+
this.content = input(null, { alias: "ateTooltip" });
|
|
697
|
+
this.placement = input("top", { alias: "ateTooltipPlacement" });
|
|
698
|
+
this.delay = input([200, 50], { alias: "ateTooltipDelay" });
|
|
699
|
+
this.disabled = input(false, { alias: "ateTooltipDisabled" });
|
|
700
700
|
/**
|
|
701
701
|
* Computed logic for ARIA shortcuts.
|
|
702
702
|
*/
|
|
@@ -706,7 +706,7 @@ class AteTooltipDirective {
|
|
|
706
706
|
return null;
|
|
707
707
|
}
|
|
708
708
|
return text.split("\n")[1].replace(/\+/g, " ");
|
|
709
|
-
}
|
|
709
|
+
});
|
|
710
710
|
/**
|
|
711
711
|
* Computed logic for Tippy content.
|
|
712
712
|
* Includes strict escaping of dynamic content to prevent XSS.
|
|
@@ -734,7 +734,7 @@ class AteTooltipDirective {
|
|
|
734
734
|
}
|
|
735
735
|
// No newline? Keep it as plain text (Tippy handles string as text by default)
|
|
736
736
|
return { content: text, isHTML: false };
|
|
737
|
-
}
|
|
737
|
+
});
|
|
738
738
|
effect(() => {
|
|
739
739
|
const { content, isHTML } = this.processedTooltip();
|
|
740
740
|
const placement = this.placement();
|
|
@@ -807,10 +807,10 @@ class AteTooltipDirective {
|
|
|
807
807
|
this.tippyInstance = null;
|
|
808
808
|
}
|
|
809
809
|
}
|
|
810
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
811
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
810
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
811
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.14", 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 }); }
|
|
812
812
|
}
|
|
813
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
813
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteTooltipDirective, decorators: [{
|
|
814
814
|
type: Directive,
|
|
815
815
|
args: [{
|
|
816
816
|
selector: "[ateTooltip]",
|
|
@@ -819,28 +819,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
819
819
|
"[attr.aria-keyshortcuts]": "ariaShortcut()",
|
|
820
820
|
},
|
|
821
821
|
}]
|
|
822
|
-
}], ctorParameters: () => []
|
|
822
|
+
}], ctorParameters: () => [] });
|
|
823
823
|
|
|
824
824
|
class AteButtonComponent {
|
|
825
825
|
constructor() {
|
|
826
826
|
// Inputs
|
|
827
|
-
this.icon = input(""
|
|
828
|
-
this.title = input.required(
|
|
829
|
-
this.active = input(false
|
|
830
|
-
this.disabled = input(false
|
|
831
|
-
this.color = input(
|
|
832
|
-
this.backgroundColor = input(
|
|
833
|
-
this.variant = input("default"
|
|
834
|
-
this.size = input("medium"
|
|
835
|
-
this.iconSize = input("medium"
|
|
827
|
+
this.icon = input("");
|
|
828
|
+
this.title = input.required();
|
|
829
|
+
this.active = input(false);
|
|
830
|
+
this.disabled = input(false);
|
|
831
|
+
this.color = input();
|
|
832
|
+
this.backgroundColor = input();
|
|
833
|
+
this.variant = input("default");
|
|
834
|
+
this.size = input("medium");
|
|
835
|
+
this.iconSize = input("medium");
|
|
836
836
|
// Outputs
|
|
837
837
|
this.buttonClick = output();
|
|
838
838
|
}
|
|
839
839
|
onMouseDown(event) {
|
|
840
840
|
event.preventDefault();
|
|
841
841
|
}
|
|
842
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
843
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
842
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
843
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AteButtonComponent, isStandalone: true, selector: "ate-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: `
|
|
844
844
|
<button
|
|
845
845
|
class="ate-button"
|
|
846
846
|
[class.is-active]="active()"
|
|
@@ -873,7 +873,7 @@ class AteButtonComponent {
|
|
|
873
873
|
</button>
|
|
874
874
|
`, 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 }); }
|
|
875
875
|
}
|
|
876
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
876
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteButtonComponent, decorators: [{
|
|
877
877
|
type: Component,
|
|
878
878
|
args: [{ selector: "ate-button", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AteTooltipDirective], template: `
|
|
879
879
|
<button
|
|
@@ -907,13 +907,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
907
907
|
<ng-content></ng-content>
|
|
908
908
|
</button>
|
|
909
909
|
`, 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"] }]
|
|
910
|
-
}]
|
|
910
|
+
}] });
|
|
911
911
|
|
|
912
912
|
class AteSeparatorComponent {
|
|
913
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
914
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
913
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
914
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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 }); }
|
|
915
915
|
}
|
|
916
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
916
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteSeparatorComponent, decorators: [{
|
|
917
917
|
type: Component,
|
|
918
918
|
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"] }]
|
|
919
919
|
}] });
|
|
@@ -1266,25 +1266,25 @@ const FRENCH_TRANSLATIONS = {
|
|
|
1266
1266
|
};
|
|
1267
1267
|
class AteI18nService {
|
|
1268
1268
|
constructor() {
|
|
1269
|
-
this._currentLocale = signal("en"
|
|
1269
|
+
this._currentLocale = signal("en");
|
|
1270
1270
|
this._translations = signal({
|
|
1271
1271
|
en: ENGLISH_TRANSLATIONS,
|
|
1272
1272
|
fr: FRENCH_TRANSLATIONS,
|
|
1273
|
-
}
|
|
1273
|
+
});
|
|
1274
1274
|
// Public signals
|
|
1275
1275
|
this.currentLocale = this._currentLocale.asReadonly();
|
|
1276
1276
|
/** All loaded translations (useful for dynamic key access) */
|
|
1277
1277
|
this.allTranslations = this._translations.asReadonly();
|
|
1278
|
-
this.translations = computed(() => this._translations()[this._currentLocale()]
|
|
1278
|
+
this.translations = computed(() => this._translations()[this._currentLocale()]);
|
|
1279
1279
|
// Fast translation methods
|
|
1280
|
-
this.t = computed(() => this.translations()
|
|
1281
|
-
this.toolbar = computed(() => this.translations().toolbar
|
|
1282
|
-
this.bubbleMenu = computed(() => this.translations().bubbleMenu
|
|
1283
|
-
this.slashCommands = computed(() => this.translations().slashCommands
|
|
1284
|
-
this.table = computed(() => this.translations().table
|
|
1285
|
-
this.imageUpload = computed(() => this.translations().imageUpload
|
|
1286
|
-
this.editor = computed(() => this.translations().editor
|
|
1287
|
-
this.common = computed(() => this.translations().common
|
|
1280
|
+
this.t = computed(() => this.translations());
|
|
1281
|
+
this.toolbar = computed(() => this.translations().toolbar);
|
|
1282
|
+
this.bubbleMenu = computed(() => this.translations().bubbleMenu);
|
|
1283
|
+
this.slashCommands = computed(() => this.translations().slashCommands);
|
|
1284
|
+
this.table = computed(() => this.translations().table);
|
|
1285
|
+
this.imageUpload = computed(() => this.translations().imageUpload);
|
|
1286
|
+
this.editor = computed(() => this.translations().editor);
|
|
1287
|
+
this.common = computed(() => this.translations().common);
|
|
1288
1288
|
// Automatically detect browser language
|
|
1289
1289
|
this.detectBrowserLanguage();
|
|
1290
1290
|
}
|
|
@@ -1328,10 +1328,10 @@ class AteI18nService {
|
|
|
1328
1328
|
getSlashCommand(key) {
|
|
1329
1329
|
return this.translations().slashCommands[key];
|
|
1330
1330
|
}
|
|
1331
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1332
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1331
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteI18nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1332
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteI18nService, providedIn: "root" }); }
|
|
1333
1333
|
}
|
|
1334
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1334
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteI18nService, decorators: [{
|
|
1335
1335
|
type: Injectable,
|
|
1336
1336
|
args: [{
|
|
1337
1337
|
providedIn: "root",
|
|
@@ -1341,16 +1341,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
1341
1341
|
class AteImageService {
|
|
1342
1342
|
constructor() {
|
|
1343
1343
|
/** Signals for image state */
|
|
1344
|
-
this.selectedImage = signal(null
|
|
1345
|
-
this.isImageSelected = computed(() => this.selectedImage() !== null
|
|
1344
|
+
this.selectedImage = signal(null);
|
|
1345
|
+
this.isImageSelected = computed(() => this.selectedImage() !== null);
|
|
1346
1346
|
/** Resizing state */
|
|
1347
|
-
this.isResizing = signal(false
|
|
1347
|
+
this.isResizing = signal(false);
|
|
1348
1348
|
this.i18n = inject(AteI18nService);
|
|
1349
1349
|
this.t = this.i18n.imageUpload;
|
|
1350
1350
|
/** Upload state signals */
|
|
1351
|
-
this.isUploading = signal(false
|
|
1352
|
-
this.uploadProgress = signal(0
|
|
1353
|
-
this.uploadMessage = signal(""
|
|
1351
|
+
this.isUploading = signal(false);
|
|
1352
|
+
this.uploadProgress = signal(0);
|
|
1353
|
+
this.uploadMessage = signal("");
|
|
1354
1354
|
/**
|
|
1355
1355
|
* Custom upload handler.
|
|
1356
1356
|
* If set, this handler replaces the default base64 conversion.
|
|
@@ -1786,10 +1786,10 @@ class AteImageService {
|
|
|
1786
1786
|
void this.uploadAndInsertImage(editor, imageFile, options);
|
|
1787
1787
|
return true;
|
|
1788
1788
|
}
|
|
1789
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1790
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1789
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteImageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1790
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteImageService }); }
|
|
1791
1791
|
}
|
|
1792
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1792
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteImageService, decorators: [{
|
|
1793
1793
|
type: Injectable
|
|
1794
1794
|
}] });
|
|
1795
1795
|
|
|
@@ -1860,11 +1860,11 @@ class AteColorPickerService {
|
|
|
1860
1860
|
// State Signals (owned by this service)
|
|
1861
1861
|
// ============================================
|
|
1862
1862
|
/** Current edit mode: null when closed, 'text' or 'highlight' when open */
|
|
1863
|
-
this.editMode = signal(null
|
|
1863
|
+
this.editMode = signal(null);
|
|
1864
1864
|
/** Reference to the element that triggered the menu (for anchoring) */
|
|
1865
|
-
this.menuTrigger = signal(null
|
|
1865
|
+
this.menuTrigger = signal(null);
|
|
1866
1866
|
/** Whether the user is currently interacting with the picker UI (e.g. typing) */
|
|
1867
|
-
this.isInteracting = signal(false
|
|
1867
|
+
this.isInteracting = signal(false);
|
|
1868
1868
|
}
|
|
1869
1869
|
// ============================================
|
|
1870
1870
|
// Menu Lifecycle Methods
|
|
@@ -2037,10 +2037,10 @@ class AteColorPickerService {
|
|
|
2037
2037
|
getContrastColor(color) {
|
|
2038
2038
|
return getContrastColor(color);
|
|
2039
2039
|
}
|
|
2040
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2041
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2040
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteColorPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2041
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteColorPickerService }); }
|
|
2042
2042
|
}
|
|
2043
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2043
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteColorPickerService, decorators: [{
|
|
2044
2044
|
type: Injectable
|
|
2045
2045
|
}] });
|
|
2046
2046
|
|
|
@@ -2050,11 +2050,11 @@ class AteLinkService {
|
|
|
2050
2050
|
// State Signals (owned by this service)
|
|
2051
2051
|
// ============================================
|
|
2052
2052
|
/** Whether link edit mode is active */
|
|
2053
|
-
this.editMode = signal(false
|
|
2053
|
+
this.editMode = signal(false);
|
|
2054
2054
|
/** Reference to the element that triggered the menu (for anchoring) */
|
|
2055
|
-
this.menuTrigger = signal(null
|
|
2055
|
+
this.menuTrigger = signal(null);
|
|
2056
2056
|
/** Whether the user is currently interacting with the link UI (input focus) */
|
|
2057
|
-
this.isInteracting = signal(false
|
|
2057
|
+
this.isInteracting = signal(false);
|
|
2058
2058
|
}
|
|
2059
2059
|
// ============================================
|
|
2060
2060
|
// Menu Lifecycle Methods
|
|
@@ -2134,10 +2134,10 @@ class AteLinkService {
|
|
|
2134
2134
|
editor.chain().focus().extendMarkRange("link").unsetLink().run();
|
|
2135
2135
|
this.close();
|
|
2136
2136
|
}
|
|
2137
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2138
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2137
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteLinkService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2138
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteLinkService }); }
|
|
2139
2139
|
}
|
|
2140
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2140
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteLinkService, decorators: [{
|
|
2141
2141
|
type: Injectable
|
|
2142
2142
|
}] });
|
|
2143
2143
|
|
|
@@ -2146,90 +2146,53 @@ class AteEditorCommandsService {
|
|
|
2146
2146
|
this.imageService = inject(AteImageService);
|
|
2147
2147
|
this.colorPickerSvc = inject(AteColorPickerService);
|
|
2148
2148
|
this.linkSvc = inject(AteLinkService);
|
|
2149
|
-
this._editorState = signal(ATE_INITIAL_EDITOR_STATE,
|
|
2150
|
-
|
|
2151
|
-
|
|
2152
|
-
|
|
2153
|
-
|
|
2154
|
-
|
|
2155
|
-
|
|
2156
|
-
|
|
2157
|
-
|
|
2158
|
-
|
|
2159
|
-
|
|
2160
|
-
|
|
2161
|
-
|
|
2162
|
-
|
|
2163
|
-
|
|
2164
|
-
|
|
2165
|
-
|
|
2166
|
-
|
|
2167
|
-
|
|
2168
|
-
}
|
|
2169
|
-
return keysA.every(key => objA[key] === objB[key]);
|
|
2170
|
-
};
|
|
2171
|
-
// 3. Compare sub-states (marks, can, nodes)
|
|
2172
|
-
if (!isRecordEqual(a.marks, b.marks)) {
|
|
2173
|
-
return false;
|
|
2174
|
-
}
|
|
2175
|
-
if (!isRecordEqual(a.can, b.can)) {
|
|
2176
|
-
return false;
|
|
2177
|
-
}
|
|
2178
|
-
if (!isRecordEqual(a.nodes, b.nodes)) {
|
|
2179
|
-
return false;
|
|
2180
|
-
}
|
|
2181
|
-
// 4. Compare custom extension states
|
|
2182
|
-
if (!isRecordEqual(a.custom, b.custom)) {
|
|
2183
|
-
return false;
|
|
2184
|
-
}
|
|
2185
|
-
return true;
|
|
2186
|
-
} }] : [{
|
|
2187
|
-
equal: (a, b) => {
|
|
2188
|
-
// 1. Primitive global states
|
|
2189
|
-
if (a.isFocused !== b.isFocused || a.isEditable !== b.isEditable) {
|
|
2190
|
-
return false;
|
|
2191
|
-
}
|
|
2192
|
-
// 2. Detailed selection comparison
|
|
2193
|
-
if (a.selection.from !== b.selection.from ||
|
|
2194
|
-
a.selection.to !== b.selection.to ||
|
|
2195
|
-
a.selection.type !== b.selection.type ||
|
|
2196
|
-
a.selection.empty !== b.selection.empty ||
|
|
2197
|
-
a.selection.isSingleCell !== b.selection.isSingleCell) {
|
|
2198
|
-
return false;
|
|
2199
|
-
}
|
|
2200
|
-
// Helper for object comparison
|
|
2201
|
-
const isRecordEqual = (objA, objB) => {
|
|
2202
|
-
const keysA = Object.keys(objA);
|
|
2203
|
-
const keysB = Object.keys(objB);
|
|
2204
|
-
if (keysA.length !== keysB.length) {
|
|
2205
|
-
return false;
|
|
2206
|
-
}
|
|
2207
|
-
return keysA.every(key => objA[key] === objB[key]);
|
|
2208
|
-
};
|
|
2209
|
-
// 3. Compare sub-states (marks, can, nodes)
|
|
2210
|
-
if (!isRecordEqual(a.marks, b.marks)) {
|
|
2211
|
-
return false;
|
|
2212
|
-
}
|
|
2213
|
-
if (!isRecordEqual(a.can, b.can)) {
|
|
2214
|
-
return false;
|
|
2215
|
-
}
|
|
2216
|
-
if (!isRecordEqual(a.nodes, b.nodes)) {
|
|
2217
|
-
return false;
|
|
2218
|
-
}
|
|
2219
|
-
// 4. Compare custom extension states
|
|
2220
|
-
if (!isRecordEqual(a.custom, b.custom)) {
|
|
2149
|
+
this._editorState = signal(ATE_INITIAL_EDITOR_STATE, {
|
|
2150
|
+
equal: (a, b) => {
|
|
2151
|
+
// 1. Primitive global states
|
|
2152
|
+
if (a.isFocused !== b.isFocused || a.isEditable !== b.isEditable) {
|
|
2153
|
+
return false;
|
|
2154
|
+
}
|
|
2155
|
+
// 2. Detailed selection comparison
|
|
2156
|
+
if (a.selection.from !== b.selection.from ||
|
|
2157
|
+
a.selection.to !== b.selection.to ||
|
|
2158
|
+
a.selection.type !== b.selection.type ||
|
|
2159
|
+
a.selection.empty !== b.selection.empty ||
|
|
2160
|
+
a.selection.isSingleCell !== b.selection.isSingleCell) {
|
|
2161
|
+
return false;
|
|
2162
|
+
}
|
|
2163
|
+
// Helper for object comparison
|
|
2164
|
+
const isRecordEqual = (objA, objB) => {
|
|
2165
|
+
const keysA = Object.keys(objA);
|
|
2166
|
+
const keysB = Object.keys(objB);
|
|
2167
|
+
if (keysA.length !== keysB.length) {
|
|
2221
2168
|
return false;
|
|
2222
2169
|
}
|
|
2223
|
-
return
|
|
2224
|
-
}
|
|
2225
|
-
|
|
2170
|
+
return keysA.every(key => objA[key] === objB[key]);
|
|
2171
|
+
};
|
|
2172
|
+
// 3. Compare sub-states (marks, can, nodes)
|
|
2173
|
+
if (!isRecordEqual(a.marks, b.marks)) {
|
|
2174
|
+
return false;
|
|
2175
|
+
}
|
|
2176
|
+
if (!isRecordEqual(a.can, b.can)) {
|
|
2177
|
+
return false;
|
|
2178
|
+
}
|
|
2179
|
+
if (!isRecordEqual(a.nodes, b.nodes)) {
|
|
2180
|
+
return false;
|
|
2181
|
+
}
|
|
2182
|
+
// 4. Compare custom extension states
|
|
2183
|
+
if (!isRecordEqual(a.custom, b.custom)) {
|
|
2184
|
+
return false;
|
|
2185
|
+
}
|
|
2186
|
+
return true;
|
|
2187
|
+
},
|
|
2188
|
+
});
|
|
2226
2189
|
/** Exposed editor state as a readonly signal */
|
|
2227
2190
|
this.editorState = this._editorState.asReadonly();
|
|
2228
2191
|
// ============================================
|
|
2229
2192
|
// Toolbar Interaction State
|
|
2230
2193
|
// ============================================
|
|
2231
2194
|
/** Signal to track when the toolbar is being hovered/interacted with */
|
|
2232
|
-
this._isToolbarInteracting = signal(false
|
|
2195
|
+
this._isToolbarInteracting = signal(false);
|
|
2233
2196
|
this.isToolbarInteracting = this._isToolbarInteracting.asReadonly();
|
|
2234
2197
|
// Access to ImageService states as readonly signals for UI binding
|
|
2235
2198
|
this.isUploading = this.imageService.isUploading.asReadonly();
|
|
@@ -2639,19 +2602,19 @@ class AteEditorCommandsService {
|
|
|
2639
2602
|
handleImagePaste(editor, event, options) {
|
|
2640
2603
|
return this.imageService.handlePaste(editor, event, options);
|
|
2641
2604
|
}
|
|
2642
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2643
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2605
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteEditorCommandsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2606
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteEditorCommandsService }); }
|
|
2644
2607
|
}
|
|
2645
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2608
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteEditorCommandsService, decorators: [{
|
|
2646
2609
|
type: Injectable
|
|
2647
2610
|
}] });
|
|
2648
2611
|
|
|
2649
2612
|
class AteColorPickerComponent {
|
|
2650
2613
|
constructor() {
|
|
2651
|
-
this.editor = input.required(
|
|
2652
|
-
this.mode = input("text"
|
|
2653
|
-
this.disabled = input(false
|
|
2654
|
-
this.anchorToText = input(false
|
|
2614
|
+
this.editor = input.required();
|
|
2615
|
+
this.mode = input("text");
|
|
2616
|
+
this.disabled = input(false);
|
|
2617
|
+
this.anchorToText = input(false);
|
|
2655
2618
|
this.colorPickerSvc = inject(AteColorPickerService);
|
|
2656
2619
|
this.i18nService = inject(AteI18nService);
|
|
2657
2620
|
this.editorCommands = inject(AteEditorCommandsService);
|
|
@@ -2661,14 +2624,14 @@ class AteColorPickerComponent {
|
|
|
2661
2624
|
const marks = this.state().marks;
|
|
2662
2625
|
const color = this.mode() === "text" ? marks.computedColor : marks.computedBackground;
|
|
2663
2626
|
return color || (this.mode() === "text" ? "#000000" : "#ffff00");
|
|
2664
|
-
}
|
|
2627
|
+
});
|
|
2665
2628
|
this.hasColorApplied = computed(() => {
|
|
2666
2629
|
const marks = this.state().marks;
|
|
2667
2630
|
return (this.mode() === "text" ? marks.color : marks.background) !== null;
|
|
2668
|
-
}
|
|
2631
|
+
});
|
|
2669
2632
|
this.buttonIcon = computed(() => {
|
|
2670
2633
|
return this.mode() === "text" ? "format_color_text" : "format_color_fill";
|
|
2671
|
-
}
|
|
2634
|
+
});
|
|
2672
2635
|
this.buttonBgColor = computed(() => {
|
|
2673
2636
|
const color = this.currentColor();
|
|
2674
2637
|
if (this.mode() === "highlight") {
|
|
@@ -2679,7 +2642,7 @@ class AteColorPickerComponent {
|
|
|
2679
2642
|
return "#030617";
|
|
2680
2643
|
}
|
|
2681
2644
|
return "";
|
|
2682
|
-
}
|
|
2645
|
+
});
|
|
2683
2646
|
this.buttonTextColor = computed(() => {
|
|
2684
2647
|
const color = this.currentColor();
|
|
2685
2648
|
if (this.mode() === "text") {
|
|
@@ -2689,7 +2652,7 @@ class AteColorPickerComponent {
|
|
|
2689
2652
|
return this.colorPickerSvc.getLuminance(color) > 128 ? "#000000" : "#ffffff";
|
|
2690
2653
|
}
|
|
2691
2654
|
return "var(--ate-text-secondary)";
|
|
2692
|
-
}
|
|
2655
|
+
});
|
|
2693
2656
|
}
|
|
2694
2657
|
onToggle(event) {
|
|
2695
2658
|
// If anchorToText is true, we don't pass the event so it defaults to text selection anchoring
|
|
@@ -2707,8 +2670,8 @@ class AteColorPickerComponent {
|
|
|
2707
2670
|
}
|
|
2708
2671
|
this.colorPickerSvc.close();
|
|
2709
2672
|
}
|
|
2710
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2711
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2673
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2674
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AteColorPickerComponent, isStandalone: true, selector: "ate-color-picker", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, anchorToText: { classPropertyName: "anchorToText", publicName: "anchorToText", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
2712
2675
|
<div class="color-picker-wrapper">
|
|
2713
2676
|
<div class="color-picker-container" [class.is-highlight]="mode() === 'highlight'">
|
|
2714
2677
|
<ate-button
|
|
@@ -2733,7 +2696,7 @@ class AteColorPickerComponent {
|
|
|
2733
2696
|
</div>
|
|
2734
2697
|
`, 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 }); }
|
|
2735
2698
|
}
|
|
2736
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2699
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteColorPickerComponent, decorators: [{
|
|
2737
2700
|
type: Component,
|
|
2738
2701
|
args: [{ selector: "ate-color-picker", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AteButtonComponent, CommonModule, AteTooltipDirective], template: `
|
|
2739
2702
|
<div class="color-picker-wrapper">
|
|
@@ -2759,14 +2722,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
2759
2722
|
</div>
|
|
2760
2723
|
</div>
|
|
2761
2724
|
`, 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"] }]
|
|
2762
|
-
}]
|
|
2725
|
+
}] });
|
|
2763
2726
|
|
|
2764
2727
|
class AteToolbarComponent {
|
|
2765
2728
|
constructor() {
|
|
2766
|
-
this.editor = input.required(
|
|
2767
|
-
this.config = input.required(
|
|
2768
|
-
this.imageUpload = input({}
|
|
2769
|
-
this.floating = input(false
|
|
2729
|
+
this.editor = input.required();
|
|
2730
|
+
this.config = input.required();
|
|
2731
|
+
this.imageUpload = input({});
|
|
2732
|
+
this.floating = input(false);
|
|
2770
2733
|
this.i18nService = inject(AteI18nService);
|
|
2771
2734
|
this.editorCommands = inject(AteEditorCommandsService);
|
|
2772
2735
|
this.t = this.i18nService.toolbar;
|
|
@@ -2779,8 +2742,8 @@ class AteToolbarComponent {
|
|
|
2779
2742
|
}
|
|
2780
2743
|
this.editorCommands.execute(editor, command, ...args);
|
|
2781
2744
|
}
|
|
2782
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2783
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2745
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2746
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AteToolbarComponent, isStandalone: true, selector: "ate-toolbar", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, imageUpload: { classPropertyName: "imageUpload", publicName: "imageUpload", isSignal: true, isRequired: false, transformFunction: null }, floating: { classPropertyName: "floating", publicName: "floating", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
2784
2747
|
<div class="ate-toolbar" [class.floating]="floating()">
|
|
2785
2748
|
@if (config().bold) {
|
|
2786
2749
|
<ate-button
|
|
@@ -3031,7 +2994,7 @@ class AteToolbarComponent {
|
|
|
3031
2994
|
</div>
|
|
3032
2995
|
`, 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 }); }
|
|
3033
2996
|
}
|
|
3034
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2997
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteToolbarComponent, decorators: [{
|
|
3035
2998
|
type: Component,
|
|
3036
2999
|
args: [{ selector: "ate-toolbar", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AteButtonComponent, AteSeparatorComponent, AteColorPickerComponent], template: `
|
|
3037
3000
|
<div class="ate-toolbar" [class.floating]="floating()">
|
|
@@ -3283,7 +3246,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3283
3246
|
}
|
|
3284
3247
|
</div>
|
|
3285
3248
|
`, 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"] }]
|
|
3286
|
-
}]
|
|
3249
|
+
}] });
|
|
3287
3250
|
|
|
3288
3251
|
// Default toolbar configuration
|
|
3289
3252
|
const ATE_DEFAULT_TOOLBAR_CONFIG = {
|
|
@@ -3427,7 +3390,7 @@ class AteBaseBubbleMenu {
|
|
|
3427
3390
|
this.i18nService = inject(AteI18nService);
|
|
3428
3391
|
this.editorCommands = inject(AteEditorCommandsService);
|
|
3429
3392
|
// Core Inputs
|
|
3430
|
-
this.editor = input.required(
|
|
3393
|
+
this.editor = input.required();
|
|
3431
3394
|
// Required viewChild for the menu container
|
|
3432
3395
|
this.menuRef = viewChild.required("menuRef");
|
|
3433
3396
|
// Internal State
|
|
@@ -3471,7 +3434,7 @@ class AteBaseBubbleMenu {
|
|
|
3471
3434
|
this.editorCommands.linkEditMode();
|
|
3472
3435
|
this.editorCommands.colorEditMode();
|
|
3473
3436
|
this.updateMenu();
|
|
3474
|
-
});
|
|
3437
|
+
}, { allowSignalWrites: true });
|
|
3475
3438
|
}
|
|
3476
3439
|
ngAfterViewInit() {
|
|
3477
3440
|
this.initTippy();
|
|
@@ -3613,12 +3576,12 @@ class AteBaseBubbleMenu {
|
|
|
3613
3576
|
onTippyHide(_instance) {
|
|
3614
3577
|
/* empty */
|
|
3615
3578
|
}
|
|
3616
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3617
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "
|
|
3579
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteBaseBubbleMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3580
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.2.14", type: AteBaseBubbleMenu, inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "menuRef", first: true, predicate: ["menuRef"], descendants: true, isSignal: true }], ngImport: i0 }); }
|
|
3618
3581
|
}
|
|
3619
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3582
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteBaseBubbleMenu, decorators: [{
|
|
3620
3583
|
type: Directive
|
|
3621
|
-
}], ctorParameters: () => []
|
|
3584
|
+
}], ctorParameters: () => [] });
|
|
3622
3585
|
|
|
3623
3586
|
class AteBubbleMenuComponent extends AteBaseBubbleMenu {
|
|
3624
3587
|
constructor() {
|
|
@@ -3627,11 +3590,11 @@ class AteBubbleMenuComponent extends AteBaseBubbleMenu {
|
|
|
3627
3590
|
this.onMouseDown = () => {
|
|
3628
3591
|
this.hideTippy();
|
|
3629
3592
|
};
|
|
3630
|
-
this.config = input(ATE_DEFAULT_BUBBLE_MENU_CONFIG
|
|
3593
|
+
this.config = input(ATE_DEFAULT_BUBBLE_MENU_CONFIG);
|
|
3631
3594
|
this.bubbleMenuConfig = computed(() => ({
|
|
3632
3595
|
...ATE_DEFAULT_BUBBLE_MENU_CONFIG,
|
|
3633
3596
|
...this.config(),
|
|
3634
|
-
})
|
|
3597
|
+
}));
|
|
3635
3598
|
}
|
|
3636
3599
|
ngOnInit() {
|
|
3637
3600
|
const ed = this.editor();
|
|
@@ -3678,8 +3641,8 @@ class AteBubbleMenuComponent extends AteBaseBubbleMenu {
|
|
|
3678
3641
|
// Sub-menus now manage their own state. Clearing them here causes
|
|
3679
3642
|
// premature closing when clicking between 'sibling' menu instances.
|
|
3680
3643
|
}
|
|
3681
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3682
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3644
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteBubbleMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3645
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AteBubbleMenuComponent, isStandalone: true, selector: "ate-bubble-menu", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
|
|
3683
3646
|
<div #menuRef class="bubble-menu" (mousedown)="$event.preventDefault()">
|
|
3684
3647
|
@if (bubbleMenuConfig().bold) {
|
|
3685
3648
|
<ate-button
|
|
@@ -3778,7 +3741,7 @@ class AteBubbleMenuComponent extends AteBaseBubbleMenu {
|
|
|
3778
3741
|
</div>
|
|
3779
3742
|
`, 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: AteColorPickerComponent, selector: "ate-color-picker", inputs: ["editor", "mode", "disabled", "anchorToText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3780
3743
|
}
|
|
3781
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3744
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteBubbleMenuComponent, decorators: [{
|
|
3782
3745
|
type: Component,
|
|
3783
3746
|
args: [{
|
|
3784
3747
|
selector: "ate-bubble-menu",
|
|
@@ -3884,7 +3847,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3884
3847
|
</div>
|
|
3885
3848
|
`,
|
|
3886
3849
|
}]
|
|
3887
|
-
}]
|
|
3850
|
+
}] });
|
|
3888
3851
|
|
|
3889
3852
|
/**
|
|
3890
3853
|
* Clés des options du menu bulle de texte
|
|
@@ -3944,8 +3907,8 @@ class AteImageBubbleMenuComponent extends AteBaseBubbleMenu {
|
|
|
3944
3907
|
super(...arguments);
|
|
3945
3908
|
this.t = this.i18nService.imageUpload;
|
|
3946
3909
|
this.imageService = inject(AteImageService);
|
|
3947
|
-
this.config = input(ATE_DEFAULT_IMAGE_BUBBLE_MENU_CONFIG
|
|
3948
|
-
this.imageUpload = input({}
|
|
3910
|
+
this.config = input(ATE_DEFAULT_IMAGE_BUBBLE_MENU_CONFIG);
|
|
3911
|
+
this.imageUpload = input({});
|
|
3949
3912
|
this.imageBubbleMenuConfig = computed(() => {
|
|
3950
3913
|
const c = this.config();
|
|
3951
3914
|
const result = {};
|
|
@@ -3953,14 +3916,14 @@ class AteImageBubbleMenuComponent extends AteBaseBubbleMenu {
|
|
|
3953
3916
|
result[key] = c[key] ?? true;
|
|
3954
3917
|
});
|
|
3955
3918
|
return result;
|
|
3956
|
-
}
|
|
3919
|
+
});
|
|
3957
3920
|
this.hasAlignmentButtons = computed(() => this.imageBubbleMenuConfig().alignLeft ||
|
|
3958
3921
|
this.imageBubbleMenuConfig().alignCenter ||
|
|
3959
|
-
this.imageBubbleMenuConfig().alignRight
|
|
3922
|
+
this.imageBubbleMenuConfig().alignRight);
|
|
3960
3923
|
this.hasResizeButtons = computed(() => {
|
|
3961
3924
|
const c = this.imageBubbleMenuConfig();
|
|
3962
3925
|
return c.resizeSmall || c.resizeMedium || c.resizeLarge || c.resizeOriginal;
|
|
3963
|
-
}
|
|
3926
|
+
});
|
|
3964
3927
|
}
|
|
3965
3928
|
shouldShow() {
|
|
3966
3929
|
const { nodes, isEditable, isFocused, selection } = this.state();
|
|
@@ -4058,8 +4021,8 @@ class AteImageBubbleMenuComponent extends AteBaseBubbleMenu {
|
|
|
4058
4021
|
ed.chain().focus().deleteSelection().run();
|
|
4059
4022
|
}
|
|
4060
4023
|
}
|
|
4061
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4062
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4024
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteImageBubbleMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4025
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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: `
|
|
4063
4026
|
<div #menuRef class="bubble-menu" (mousedown)="$event.preventDefault()">
|
|
4064
4027
|
@if (imageBubbleMenuConfig().changeImage && editor().isEditable) {
|
|
4065
4028
|
<ate-button
|
|
@@ -4145,7 +4108,7 @@ class AteImageBubbleMenuComponent extends AteBaseBubbleMenu {
|
|
|
4145
4108
|
</div>
|
|
4146
4109
|
`, 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 }); }
|
|
4147
4110
|
}
|
|
4148
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4111
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteImageBubbleMenuComponent, decorators: [{
|
|
4149
4112
|
type: Component,
|
|
4150
4113
|
args: [{
|
|
4151
4114
|
selector: "ate-image-bubble-menu",
|
|
@@ -4238,14 +4201,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
4238
4201
|
</div>
|
|
4239
4202
|
`,
|
|
4240
4203
|
}]
|
|
4241
|
-
}]
|
|
4204
|
+
}] });
|
|
4242
4205
|
|
|
4243
4206
|
class AteTableBubbleMenuComponent extends AteBaseBubbleMenu {
|
|
4244
4207
|
constructor() {
|
|
4245
4208
|
super(...arguments);
|
|
4246
4209
|
// Alias for template
|
|
4247
4210
|
this.t = this.i18nService.table;
|
|
4248
|
-
this.config = input(ATE_DEFAULT_TABLE_MENU_CONFIG
|
|
4211
|
+
this.config = input(ATE_DEFAULT_TABLE_MENU_CONFIG);
|
|
4249
4212
|
this.tableBubbleMenuConfig = computed(() => {
|
|
4250
4213
|
const c = this.config();
|
|
4251
4214
|
const result = {};
|
|
@@ -4253,7 +4216,7 @@ class AteTableBubbleMenuComponent extends AteBaseBubbleMenu {
|
|
|
4253
4216
|
result[key] = c[key] ?? true;
|
|
4254
4217
|
});
|
|
4255
4218
|
return result;
|
|
4256
|
-
}
|
|
4219
|
+
});
|
|
4257
4220
|
}
|
|
4258
4221
|
shouldShow() {
|
|
4259
4222
|
const { selection, nodes, isEditable, isFocused } = this.state();
|
|
@@ -4311,8 +4274,8 @@ class AteTableBubbleMenuComponent extends AteBaseBubbleMenu {
|
|
|
4311
4274
|
executeCommand(editor, command, ...args) {
|
|
4312
4275
|
this.editorCommands.execute(editor, command, ...args);
|
|
4313
4276
|
}
|
|
4314
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4315
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4277
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteTableBubbleMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4278
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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: `
|
|
4316
4279
|
<div #menuRef class="bubble-menu" (mousedown)="$event.preventDefault()">
|
|
4317
4280
|
<!-- Row actions -->
|
|
4318
4281
|
@if (tableBubbleMenuConfig().addRowBefore !== false) {
|
|
@@ -4403,7 +4366,7 @@ class AteTableBubbleMenuComponent extends AteBaseBubbleMenu {
|
|
|
4403
4366
|
</div>
|
|
4404
4367
|
`, 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 }); }
|
|
4405
4368
|
}
|
|
4406
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4369
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteTableBubbleMenuComponent, decorators: [{
|
|
4407
4370
|
type: Component,
|
|
4408
4371
|
args: [{
|
|
4409
4372
|
selector: "ate-table-bubble-menu",
|
|
@@ -4501,17 +4464,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
4501
4464
|
</div>
|
|
4502
4465
|
`,
|
|
4503
4466
|
}]
|
|
4504
|
-
}]
|
|
4467
|
+
}] });
|
|
4505
4468
|
|
|
4506
4469
|
class AteCellBubbleMenuComponent extends AteBaseBubbleMenu {
|
|
4507
4470
|
constructor() {
|
|
4508
4471
|
super(...arguments);
|
|
4509
4472
|
// Inputs
|
|
4510
|
-
this.config = input(ATE_DEFAULT_CELL_MENU_CONFIG
|
|
4473
|
+
this.config = input(ATE_DEFAULT_CELL_MENU_CONFIG);
|
|
4511
4474
|
this.cellBubbleMenuConfig = computed(() => ({
|
|
4512
4475
|
mergeCells: this.config().mergeCells ?? true,
|
|
4513
4476
|
splitCell: this.config().splitCell ?? true,
|
|
4514
|
-
})
|
|
4477
|
+
}));
|
|
4515
4478
|
// Signals
|
|
4516
4479
|
this.i18n = () => this.i18nService;
|
|
4517
4480
|
}
|
|
@@ -4573,8 +4536,8 @@ class AteCellBubbleMenuComponent extends AteBaseBubbleMenu {
|
|
|
4573
4536
|
executeCommand(editor, command, ...args) {
|
|
4574
4537
|
this.editorCommands.execute(editor, command, ...args);
|
|
4575
4538
|
}
|
|
4576
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4577
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4539
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteCellBubbleMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4540
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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: `
|
|
4578
4541
|
<div #menuRef class="bubble-menu" (mousedown)="$event.preventDefault()">
|
|
4579
4542
|
<!-- Cell specific actions -->
|
|
4580
4543
|
@if (cellBubbleMenuConfig().mergeCells !== false && !state().selection.isSingleCell) {
|
|
@@ -4594,7 +4557,7 @@ class AteCellBubbleMenuComponent extends AteBaseBubbleMenu {
|
|
|
4594
4557
|
</div>
|
|
4595
4558
|
`, 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4596
4559
|
}
|
|
4597
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4560
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteCellBubbleMenuComponent, decorators: [{
|
|
4598
4561
|
type: Component,
|
|
4599
4562
|
args: [{
|
|
4600
4563
|
selector: "ate-cell-bubble-menu",
|
|
@@ -4621,7 +4584,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
4621
4584
|
</div>
|
|
4622
4585
|
`,
|
|
4623
4586
|
}]
|
|
4624
|
-
}]
|
|
4587
|
+
}] });
|
|
4625
4588
|
|
|
4626
4589
|
/**
|
|
4627
4590
|
* Base abstract class for Sub-Bubble Menus (Link, Color).
|
|
@@ -4632,7 +4595,7 @@ class AteBaseSubBubbleMenu {
|
|
|
4632
4595
|
this.i18nService = inject(AteI18nService);
|
|
4633
4596
|
this.editorCommands = inject(AteEditorCommandsService);
|
|
4634
4597
|
// Core Inputs
|
|
4635
|
-
this.editor = input.required(
|
|
4598
|
+
this.editor = input.required();
|
|
4636
4599
|
// Required viewChild for the menu container
|
|
4637
4600
|
this.menuRef = viewChild.required("menuRef");
|
|
4638
4601
|
// Internal State
|
|
@@ -4662,7 +4625,7 @@ class AteBaseSubBubbleMenu {
|
|
|
4662
4625
|
this.state();
|
|
4663
4626
|
this.onStateChange();
|
|
4664
4627
|
this.updateMenu();
|
|
4665
|
-
});
|
|
4628
|
+
}, { allowSignalWrites: true });
|
|
4666
4629
|
}
|
|
4667
4630
|
ngAfterViewInit() {
|
|
4668
4631
|
this.initTippy();
|
|
@@ -4748,12 +4711,12 @@ class AteBaseSubBubbleMenu {
|
|
|
4748
4711
|
onTippyHide(_instance) {
|
|
4749
4712
|
/* empty */
|
|
4750
4713
|
}
|
|
4751
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4752
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "
|
|
4714
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteBaseSubBubbleMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4715
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.2.14", type: AteBaseSubBubbleMenu, inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "menuRef", first: true, predicate: ["menuRef"], descendants: true, isSignal: true }], ngImport: i0 }); }
|
|
4753
4716
|
}
|
|
4754
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4717
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteBaseSubBubbleMenu, decorators: [{
|
|
4755
4718
|
type: Directive
|
|
4756
|
-
}], ctorParameters: () => []
|
|
4719
|
+
}], ctorParameters: () => [] });
|
|
4757
4720
|
|
|
4758
4721
|
class AteLinkBubbleMenuComponent extends AteBaseSubBubbleMenu {
|
|
4759
4722
|
constructor() {
|
|
@@ -4761,8 +4724,8 @@ class AteLinkBubbleMenuComponent extends AteBaseSubBubbleMenu {
|
|
|
4761
4724
|
this.linkSvc = inject(AteLinkService);
|
|
4762
4725
|
this.t = this.i18nService.bubbleMenu;
|
|
4763
4726
|
this.common = this.i18nService.common;
|
|
4764
|
-
this.linkInput = viewChild("linkInput"
|
|
4765
|
-
this.editUrl = signal(""
|
|
4727
|
+
this.linkInput = viewChild("linkInput");
|
|
4728
|
+
this.editUrl = signal("");
|
|
4766
4729
|
// Reactive effect for URL sync
|
|
4767
4730
|
effect(() => {
|
|
4768
4731
|
const state = this.state();
|
|
@@ -4774,7 +4737,7 @@ class AteLinkBubbleMenuComponent extends AteBaseSubBubbleMenu {
|
|
|
4774
4737
|
if (!isInteracting) {
|
|
4775
4738
|
this.editUrl.set(currentLinkHref);
|
|
4776
4739
|
}
|
|
4777
|
-
});
|
|
4740
|
+
}, { allowSignalWrites: true });
|
|
4778
4741
|
}
|
|
4779
4742
|
onStateChange() {
|
|
4780
4743
|
this.linkSvc.editMode();
|
|
@@ -4890,8 +4853,8 @@ class AteLinkBubbleMenuComponent extends AteBaseSubBubbleMenu {
|
|
|
4890
4853
|
this.linkSvc.close();
|
|
4891
4854
|
this.hideTippy();
|
|
4892
4855
|
}
|
|
4893
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4894
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
4856
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteLinkBubbleMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4857
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: AteLinkBubbleMenuComponent, isStandalone: true, selector: "ate-link-bubble-menu", viewQueries: [{ propertyName: "linkInput", first: true, predicate: ["linkInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
|
|
4895
4858
|
<div
|
|
4896
4859
|
#menuRef
|
|
4897
4860
|
class="bubble-menu"
|
|
@@ -4941,7 +4904,7 @@ class AteLinkBubbleMenuComponent extends AteBaseSubBubbleMenu {
|
|
|
4941
4904
|
</div>
|
|
4942
4905
|
`, 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 }); }
|
|
4943
4906
|
}
|
|
4944
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4907
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteLinkBubbleMenuComponent, decorators: [{
|
|
4945
4908
|
type: Component,
|
|
4946
4909
|
args: [{ selector: "ate-link-bubble-menu", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AteButtonComponent, AteSeparatorComponent, FormsModule], template: `
|
|
4947
4910
|
<div
|
|
@@ -4992,7 +4955,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
4992
4955
|
</div>
|
|
4993
4956
|
</div>
|
|
4994
4957
|
`, 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"] }]
|
|
4995
|
-
}], ctorParameters: () => []
|
|
4958
|
+
}], ctorParameters: () => [] });
|
|
4996
4959
|
|
|
4997
4960
|
const PRESET_COLORS = [
|
|
4998
4961
|
"#000000",
|
|
@@ -5015,21 +4978,21 @@ class AteColorBubbleMenuComponent extends AteBaseSubBubbleMenu {
|
|
|
5015
4978
|
this.t = this.i18nService.toolbar;
|
|
5016
4979
|
this.common = this.i18nService.common;
|
|
5017
4980
|
this.presets = PRESET_COLORS;
|
|
5018
|
-
this.colorInputRef = viewChild("colorInput"
|
|
4981
|
+
this.colorInputRef = viewChild("colorInput");
|
|
5019
4982
|
/**
|
|
5020
4983
|
* LOCAL MODE: We lock the mode when the menu is shown to avoid race conditions
|
|
5021
4984
|
* where the parent (bubble menu) clears the global signal before we apply the color.
|
|
5022
4985
|
*/
|
|
5023
|
-
this.activeMode = signal("text"
|
|
4986
|
+
this.activeMode = signal("text");
|
|
5024
4987
|
this.currentColor = computed(() => {
|
|
5025
4988
|
const marks = this.state().marks;
|
|
5026
4989
|
const color = this.activeMode() === "text" ? marks.computedColor : marks.computedBackground;
|
|
5027
4990
|
return color || (this.activeMode() === "text" ? "#000000" : "#ffff00");
|
|
5028
|
-
}
|
|
4991
|
+
});
|
|
5029
4992
|
this.hexValue = computed(() => {
|
|
5030
4993
|
const color = this.currentColor();
|
|
5031
4994
|
return color.replace("#", "").toUpperCase();
|
|
5032
|
-
}
|
|
4995
|
+
});
|
|
5033
4996
|
}
|
|
5034
4997
|
onStateChange() {
|
|
5035
4998
|
this.colorPickerSvc.editMode();
|
|
@@ -5187,8 +5150,8 @@ class AteColorBubbleMenuComponent extends AteBaseSubBubbleMenu {
|
|
|
5187
5150
|
this.updateMenu();
|
|
5188
5151
|
}, 150);
|
|
5189
5152
|
}
|
|
5190
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5191
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
5153
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteColorBubbleMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5154
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AteColorBubbleMenuComponent, isStandalone: true, selector: "ate-color-bubble-menu", viewQueries: [{ propertyName: "colorInputRef", first: true, predicate: ["colorInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
|
|
5192
5155
|
<div
|
|
5193
5156
|
#menuRef
|
|
5194
5157
|
class="bubble-menu color-bubble-menu"
|
|
@@ -5268,7 +5231,7 @@ class AteColorBubbleMenuComponent extends AteBaseSubBubbleMenu {
|
|
|
5268
5231
|
</div>
|
|
5269
5232
|
`, 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 }); }
|
|
5270
5233
|
}
|
|
5271
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5234
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteColorBubbleMenuComponent, decorators: [{
|
|
5272
5235
|
type: Component,
|
|
5273
5236
|
args: [{ selector: "ate-color-bubble-menu", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, AteButtonComponent, AteSeparatorComponent], template: `
|
|
5274
5237
|
<div
|
|
@@ -5349,7 +5312,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
5349
5312
|
</div>
|
|
5350
5313
|
</div>
|
|
5351
5314
|
`, 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"] }]
|
|
5352
|
-
}]
|
|
5315
|
+
}] });
|
|
5353
5316
|
|
|
5354
5317
|
/**
|
|
5355
5318
|
* Clés des commandes natives dans l'ordre d'affichage
|
|
@@ -5485,17 +5448,17 @@ function filterSlashCommands(config, i18n, commands, imageOptions) {
|
|
|
5485
5448
|
class AteSlashCommandsComponent {
|
|
5486
5449
|
constructor() {
|
|
5487
5450
|
this.i18nService = inject(AteI18nService);
|
|
5488
|
-
this.editor = input.required(
|
|
5489
|
-
this.config = input(undefined
|
|
5451
|
+
this.editor = input.required();
|
|
5452
|
+
this.config = input(undefined);
|
|
5490
5453
|
this.menuRef = viewChild.required("menuRef");
|
|
5491
5454
|
this.tippyInstance = null;
|
|
5492
5455
|
this.editorCommands = inject(AteEditorCommandsService);
|
|
5493
5456
|
// Local state
|
|
5494
5457
|
this.isActive = false;
|
|
5495
|
-
this.currentQuery = signal(""
|
|
5458
|
+
this.currentQuery = signal("");
|
|
5496
5459
|
this.slashRange = null;
|
|
5497
5460
|
// Signal for selected index
|
|
5498
|
-
this.selectedIndex = signal(0
|
|
5461
|
+
this.selectedIndex = signal(0);
|
|
5499
5462
|
// Toolbar interaction state (from centralized service)
|
|
5500
5463
|
this.isToolbarInteracting = this.editorCommands.isToolbarInteracting;
|
|
5501
5464
|
this.commands = computed(() => {
|
|
@@ -5505,7 +5468,7 @@ class AteSlashCommandsComponent {
|
|
|
5505
5468
|
}
|
|
5506
5469
|
// Fallback to default native commands
|
|
5507
5470
|
return createDefaultSlashCommands(this.i18nService, this.editorCommands);
|
|
5508
|
-
}
|
|
5471
|
+
});
|
|
5509
5472
|
this.filteredCommands = computed(() => {
|
|
5510
5473
|
const query = this.currentQuery().toLowerCase();
|
|
5511
5474
|
const commands = this.commands();
|
|
@@ -5515,7 +5478,7 @@ class AteSlashCommandsComponent {
|
|
|
5515
5478
|
return commands.filter(command => command.title.toLowerCase().includes(query) ||
|
|
5516
5479
|
command.description.toLowerCase().includes(query) ||
|
|
5517
5480
|
command.keywords.some(keyword => keyword.toLowerCase().includes(query)));
|
|
5518
|
-
}
|
|
5481
|
+
});
|
|
5519
5482
|
this.updateMenu = () => {
|
|
5520
5483
|
const ed = this.editor();
|
|
5521
5484
|
if (!ed) {
|
|
@@ -5571,7 +5534,7 @@ class AteSlashCommandsComponent {
|
|
|
5571
5534
|
// Use ProseMirror plugin system to intercept keys
|
|
5572
5535
|
this.addKeyboardPlugin(ed);
|
|
5573
5536
|
// updateMenu() will be called automatically when editor is ready
|
|
5574
|
-
});
|
|
5537
|
+
}, { allowSignalWrites: true });
|
|
5575
5538
|
}
|
|
5576
5539
|
ngAfterViewInit() {
|
|
5577
5540
|
this.initTippy();
|
|
@@ -5758,8 +5721,8 @@ class AteSlashCommandsComponent {
|
|
|
5758
5721
|
plugins: [keyboardPlugin, ...ed.view.state.plugins],
|
|
5759
5722
|
}));
|
|
5760
5723
|
}
|
|
5761
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5762
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
5724
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteSlashCommandsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5725
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AteSlashCommandsComponent, isStandalone: true, selector: "ate-slash-commands", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "menuRef", first: true, predicate: ["menuRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
5763
5726
|
<div #menuRef class="slash-commands-menu">
|
|
5764
5727
|
@for (command of filteredCommands(); track command.title) {
|
|
5765
5728
|
<div
|
|
@@ -5779,7 +5742,7 @@ class AteSlashCommandsComponent {
|
|
|
5779
5742
|
</div>
|
|
5780
5743
|
`, isInline: true, styles: [".slash-commands-menu{background:var(--ate-menu-bg);border:1px solid var(--ate-menu-border);border-radius:var(--ate-menu-border-radius, 12px);box-shadow:var(--ate-menu-shadow);padding:var(--ate-menu-padding);max-height:320px;overflow-y:auto;min-width:280px;outline:none;animation:slashMenuFadeIn .2s cubic-bezier(0,0,.2,1);scrollbar-width:thin;scrollbar-color:var(--ate-scrollbar-thumb) var(--ate-scrollbar-track)}.slash-commands-menu::-webkit-scrollbar{width:var(--ate-scrollbar-width)}.slash-commands-menu::-webkit-scrollbar-track{background:var(--ate-scrollbar-track)}.slash-commands-menu::-webkit-scrollbar-thumb{background:var(--ate-scrollbar-thumb);border:3px solid transparent;background-clip:content-box;border-radius:10px}.slash-commands-menu::-webkit-scrollbar-thumb:hover{background:var(--ate-scrollbar-thumb-hover);background-clip:content-box}@keyframes slashMenuFadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.slash-command-item{display:flex;align-items:center;gap:12px;padding:var(--ate-menu-padding);border-radius:var(--ate-menu-border-radius, 8px);cursor:pointer;transition:all .15s ease;border:var(--ate-border-width, 1px) solid transparent;outline:none;margin-bottom:2px}.slash-command-item:last-child{margin-bottom:0}.slash-command-item:hover{background:var(--ate-surface-secondary)}.slash-command-item.selected{background:var(--ate-primary-light);border-color:var(--ate-primary-light-alpha)}.slash-command-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--ate-surface-tertiary);border-radius:var(--ate-sub-border-radius, 8px);color:var(--ate-primary);flex-shrink:0;transition:all .15s ease}.slash-command-item.selected .slash-command-icon{background:var(--ate-primary);color:var(--ate-primary-contrast, #ffffff)}.slash-command-icon .material-symbols-outlined{font-size:18px}.slash-command-content{flex:1;min-width:0}.slash-command-title{font-weight:500;color:var(--ate-text);font-size:14px;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slash-command-description{color:var(--ate-text-secondary);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5781
5744
|
}
|
|
5782
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5745
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteSlashCommandsComponent, decorators: [{
|
|
5783
5746
|
type: Component,
|
|
5784
5747
|
args: [{ selector: "ate-slash-commands", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
5785
5748
|
<div #menuRef class="slash-commands-menu">
|
|
@@ -5800,7 +5763,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
5800
5763
|
}
|
|
5801
5764
|
</div>
|
|
5802
5765
|
`, styles: [".slash-commands-menu{background:var(--ate-menu-bg);border:1px solid var(--ate-menu-border);border-radius:var(--ate-menu-border-radius, 12px);box-shadow:var(--ate-menu-shadow);padding:var(--ate-menu-padding);max-height:320px;overflow-y:auto;min-width:280px;outline:none;animation:slashMenuFadeIn .2s cubic-bezier(0,0,.2,1);scrollbar-width:thin;scrollbar-color:var(--ate-scrollbar-thumb) var(--ate-scrollbar-track)}.slash-commands-menu::-webkit-scrollbar{width:var(--ate-scrollbar-width)}.slash-commands-menu::-webkit-scrollbar-track{background:var(--ate-scrollbar-track)}.slash-commands-menu::-webkit-scrollbar-thumb{background:var(--ate-scrollbar-thumb);border:3px solid transparent;background-clip:content-box;border-radius:10px}.slash-commands-menu::-webkit-scrollbar-thumb:hover{background:var(--ate-scrollbar-thumb-hover);background-clip:content-box}@keyframes slashMenuFadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.slash-command-item{display:flex;align-items:center;gap:12px;padding:var(--ate-menu-padding);border-radius:var(--ate-menu-border-radius, 8px);cursor:pointer;transition:all .15s ease;border:var(--ate-border-width, 1px) solid transparent;outline:none;margin-bottom:2px}.slash-command-item:last-child{margin-bottom:0}.slash-command-item:hover{background:var(--ate-surface-secondary)}.slash-command-item.selected{background:var(--ate-primary-light);border-color:var(--ate-primary-light-alpha)}.slash-command-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--ate-surface-tertiary);border-radius:var(--ate-sub-border-radius, 8px);color:var(--ate-primary);flex-shrink:0;transition:all .15s ease}.slash-command-item.selected .slash-command-icon{background:var(--ate-primary);color:var(--ate-primary-contrast, #ffffff)}.slash-command-icon .material-symbols-outlined{font-size:18px}.slash-command-content{flex:1;min-width:0}.slash-command-title{font-weight:500;color:var(--ate-text);font-size:14px;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slash-command-description{color:var(--ate-text-secondary);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
|
|
5803
|
-
}], ctorParameters: () => []
|
|
5766
|
+
}], ctorParameters: () => [] });
|
|
5804
5767
|
|
|
5805
5768
|
/**
|
|
5806
5769
|
* Component providing Notion-like block controls (Plus button and Drag Handle).
|
|
@@ -5808,10 +5771,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
5808
5771
|
class AteBlockControlsComponent {
|
|
5809
5772
|
constructor() {
|
|
5810
5773
|
this.i18n = inject(AteI18nService);
|
|
5811
|
-
this.editor = input.required(
|
|
5812
|
-
this.hoveredData = input(null
|
|
5774
|
+
this.editor = input.required();
|
|
5775
|
+
this.hoveredData = input(null);
|
|
5813
5776
|
this.menuRef = viewChild.required("menuRef");
|
|
5814
|
-
this.isInteracting = signal(false
|
|
5777
|
+
this.isInteracting = signal(false);
|
|
5815
5778
|
this.lastValidData = null;
|
|
5816
5779
|
this.lastValidRect = null;
|
|
5817
5780
|
this.tippyInstance = null;
|
|
@@ -5993,8 +5956,8 @@ class AteBlockControlsComponent {
|
|
|
5993
5956
|
onDragEnd() {
|
|
5994
5957
|
this.isInteracting.set(false);
|
|
5995
5958
|
}
|
|
5996
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5997
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
5959
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteBlockControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5960
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: AteBlockControlsComponent, isStandalone: true, selector: "ate-block-controls", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, hoveredData: { classPropertyName: "hoveredData", publicName: "hoveredData", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "menuRef", first: true, predicate: ["menuRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
5998
5961
|
<div
|
|
5999
5962
|
#menuRef
|
|
6000
5963
|
class="ate-block-controls"
|
|
@@ -6022,7 +5985,7 @@ class AteBlockControlsComponent {
|
|
|
6022
5985
|
</div>
|
|
6023
5986
|
`, isInline: true, styles: [".ate-block-controls{display:flex;align-items:center;gap:2px;padding:4px;pointer-events:auto;will-change:transform}.ate-control-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;border:none;background:transparent;color:var(--ate-text-secondary);cursor:pointer;transition:all .15s ease}.ate-control-btn:hover{background:var(--ate-surface-tertiary);color:var(--ate-text)}.ate-control-btn .material-symbols-outlined{font-size:18px}@media (max-width: 768px){:host{display:none!important}}\n"], dependencies: [{ kind: "directive", type: AteTooltipDirective, selector: "[ateTooltip]", inputs: ["ateTooltip", "ateTooltipPlacement", "ateTooltipDelay", "ateTooltipDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6024
5987
|
}
|
|
6025
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5988
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteBlockControlsComponent, decorators: [{
|
|
6026
5989
|
type: Component,
|
|
6027
5990
|
args: [{ selector: "ate-block-controls", standalone: true, imports: [AteTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
6028
5991
|
<div
|
|
@@ -6051,7 +6014,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
6051
6014
|
</div>
|
|
6052
6015
|
</div>
|
|
6053
6016
|
`, styles: [".ate-block-controls{display:flex;align-items:center;gap:2px;padding:4px;pointer-events:auto;will-change:transform}.ate-control-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;border:none;background:transparent;color:var(--ate-text-secondary);cursor:pointer;transition:all .15s ease}.ate-control-btn:hover{background:var(--ate-surface-tertiary);color:var(--ate-text)}.ate-control-btn .material-symbols-outlined{font-size:18px}@media (max-width: 768px){:host{display:none!important}}\n"] }]
|
|
6054
|
-
}], ctorParameters: () => []
|
|
6017
|
+
}], ctorParameters: () => [] });
|
|
6055
6018
|
|
|
6056
6019
|
/**
|
|
6057
6020
|
* Edit Toggle Component
|
|
@@ -6059,12 +6022,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
6059
6022
|
*/
|
|
6060
6023
|
class AteEditToggleComponent {
|
|
6061
6024
|
constructor() {
|
|
6062
|
-
this.editable = input.required(
|
|
6063
|
-
this.translations = input.required(
|
|
6025
|
+
this.editable = input.required();
|
|
6026
|
+
this.translations = input.required();
|
|
6064
6027
|
this.editToggle = output();
|
|
6065
6028
|
}
|
|
6066
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6067
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
6029
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteEditToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6030
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: AteEditToggleComponent, isStandalone: true, selector: "ate-edit-toggle", inputs: { editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: true, transformFunction: null }, translations: { classPropertyName: "translations", publicName: "translations", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { editToggle: "editToggle" }, ngImport: i0, template: `
|
|
6068
6031
|
<div class="ate-edit-toggle-container" [class.is-editable]="editable()">
|
|
6069
6032
|
<ate-button
|
|
6070
6033
|
[icon]="editable() ? 'visibility' : 'edit'"
|
|
@@ -6076,7 +6039,7 @@ class AteEditToggleComponent {
|
|
|
6076
6039
|
</div>
|
|
6077
6040
|
`, isInline: true, styles: [".ate-edit-toggle-container{position:absolute;margin-top:16px;right:16px;z-index:50}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AteButtonComponent, selector: "ate-button", inputs: ["icon", "title", "active", "disabled", "color", "backgroundColor", "variant", "size", "iconSize"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6078
6041
|
}
|
|
6079
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6042
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteEditToggleComponent, decorators: [{
|
|
6080
6043
|
type: Component,
|
|
6081
6044
|
args: [{ selector: "ate-edit-toggle", standalone: true, imports: [CommonModule, AteButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
6082
6045
|
<div class="ate-edit-toggle-container" [class.is-editable]="editable()">
|
|
@@ -6089,7 +6052,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
6089
6052
|
backgroundColor="var(--ate-primary-lighter)" />
|
|
6090
6053
|
</div>
|
|
6091
6054
|
`, styles: [".ate-edit-toggle-container{position:absolute;margin-top:16px;right:16px;z-index:50}\n"] }]
|
|
6092
|
-
}]
|
|
6055
|
+
}] });
|
|
6093
6056
|
|
|
6094
6057
|
/**
|
|
6095
6058
|
* Noop Value Accessor Directive
|
|
@@ -6105,8 +6068,8 @@ class AteNoopValueAccessorDirective {
|
|
|
6105
6068
|
registerOnTouched(_fn) {
|
|
6106
6069
|
/* empty */
|
|
6107
6070
|
}
|
|
6108
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6109
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
6071
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteNoopValueAccessorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
6072
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: AteNoopValueAccessorDirective, isStandalone: true, providers: [
|
|
6110
6073
|
{
|
|
6111
6074
|
provide: NG_VALUE_ACCESSOR,
|
|
6112
6075
|
multi: true,
|
|
@@ -6114,7 +6077,7 @@ class AteNoopValueAccessorDirective {
|
|
|
6114
6077
|
},
|
|
6115
6078
|
], ngImport: i0 }); }
|
|
6116
6079
|
}
|
|
6117
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6080
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteNoopValueAccessorDirective, decorators: [{
|
|
6118
6081
|
type: Directive,
|
|
6119
6082
|
args: [{
|
|
6120
6083
|
standalone: true,
|
|
@@ -6161,11 +6124,11 @@ class AteAngularNodeView {
|
|
|
6161
6124
|
*/
|
|
6162
6125
|
_initNodeView(props) {
|
|
6163
6126
|
// Create signals from the props
|
|
6164
|
-
const editorSignal = signal(props.editor
|
|
6165
|
-
const nodeSignal = signal(props.node
|
|
6166
|
-
const decorationsSignal = signal(props.decorations
|
|
6167
|
-
const selectedSignal = signal(props.selected
|
|
6168
|
-
const extensionSignal = signal(props.extension
|
|
6127
|
+
const editorSignal = signal(props.editor);
|
|
6128
|
+
const nodeSignal = signal(props.node);
|
|
6129
|
+
const decorationsSignal = signal(props.decorations);
|
|
6130
|
+
const selectedSignal = signal(props.selected);
|
|
6131
|
+
const extensionSignal = signal(props.extension);
|
|
6169
6132
|
// Assign to the component
|
|
6170
6133
|
this.editor = editorSignal.asReadonly();
|
|
6171
6134
|
this.node = nodeSignal.asReadonly();
|
|
@@ -6216,10 +6179,10 @@ class AteAngularNodeView {
|
|
|
6216
6179
|
this._writableSignals.selected.set(false);
|
|
6217
6180
|
}
|
|
6218
6181
|
}
|
|
6219
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6220
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
6182
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteAngularNodeView, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
6183
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: AteAngularNodeView, ngImport: i0 }); }
|
|
6221
6184
|
}
|
|
6222
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6185
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteAngularNodeView, decorators: [{
|
|
6223
6186
|
type: Directive
|
|
6224
6187
|
}] });
|
|
6225
6188
|
|
|
@@ -7017,51 +6980,51 @@ class AngularTiptapEditorComponent {
|
|
|
7017
6980
|
}
|
|
7018
6981
|
constructor() {
|
|
7019
6982
|
/** Configuration globale de l'éditeur */
|
|
7020
|
-
this.config = input({}
|
|
7021
|
-
this.content = input(""
|
|
7022
|
-
this.placeholder = input(undefined
|
|
7023
|
-
this.editable = input(undefined
|
|
7024
|
-
this.disabled = input(undefined
|
|
7025
|
-
this.minHeight = input(undefined
|
|
7026
|
-
this.height = input(undefined
|
|
7027
|
-
this.maxHeight = input(undefined
|
|
7028
|
-
this.fillContainer = input(undefined
|
|
7029
|
-
this.showToolbar = input(undefined
|
|
7030
|
-
this.showFooter = input(undefined
|
|
7031
|
-
this.showCharacterCount = input(undefined
|
|
7032
|
-
this.showWordCount = input(undefined
|
|
7033
|
-
this.maxCharacters = input(undefined
|
|
7034
|
-
this.enableOfficePaste = input(undefined
|
|
7035
|
-
this.enableSlashCommands = input(undefined
|
|
7036
|
-
this.slashCommands = input(undefined
|
|
7037
|
-
this.customSlashCommands = input(undefined
|
|
7038
|
-
this.blockControls = input(
|
|
7039
|
-
this.locale = input(undefined
|
|
7040
|
-
this.autofocus = input(undefined
|
|
7041
|
-
this.seamless = input(undefined
|
|
7042
|
-
this.floatingToolbar = input(undefined
|
|
7043
|
-
this.showEditToggle = input(undefined
|
|
7044
|
-
this.spellcheck = input(undefined
|
|
7045
|
-
this.tiptapExtensions = input(undefined
|
|
7046
|
-
this.tiptapOptions = input(undefined
|
|
6983
|
+
this.config = input({});
|
|
6984
|
+
this.content = input("");
|
|
6985
|
+
this.placeholder = input(undefined);
|
|
6986
|
+
this.editable = input(undefined);
|
|
6987
|
+
this.disabled = input(undefined);
|
|
6988
|
+
this.minHeight = input(undefined);
|
|
6989
|
+
this.height = input(undefined);
|
|
6990
|
+
this.maxHeight = input(undefined);
|
|
6991
|
+
this.fillContainer = input(undefined);
|
|
6992
|
+
this.showToolbar = input(undefined);
|
|
6993
|
+
this.showFooter = input(undefined);
|
|
6994
|
+
this.showCharacterCount = input(undefined);
|
|
6995
|
+
this.showWordCount = input(undefined);
|
|
6996
|
+
this.maxCharacters = input(undefined);
|
|
6997
|
+
this.enableOfficePaste = input(undefined);
|
|
6998
|
+
this.enableSlashCommands = input(undefined);
|
|
6999
|
+
this.slashCommands = input(undefined);
|
|
7000
|
+
this.customSlashCommands = input(undefined);
|
|
7001
|
+
this.blockControls = input();
|
|
7002
|
+
this.locale = input(undefined);
|
|
7003
|
+
this.autofocus = input(undefined);
|
|
7004
|
+
this.seamless = input(undefined);
|
|
7005
|
+
this.floatingToolbar = input(undefined);
|
|
7006
|
+
this.showEditToggle = input(undefined);
|
|
7007
|
+
this.spellcheck = input(undefined);
|
|
7008
|
+
this.tiptapExtensions = input(undefined);
|
|
7009
|
+
this.tiptapOptions = input(undefined);
|
|
7047
7010
|
// Nouveaux inputs pour les bubble menus
|
|
7048
|
-
this.showBubbleMenu = input(undefined
|
|
7049
|
-
this.bubbleMenu = input(undefined
|
|
7050
|
-
this.showImageBubbleMenu = input(undefined
|
|
7051
|
-
this.imageBubbleMenu = input(undefined
|
|
7011
|
+
this.showBubbleMenu = input(undefined);
|
|
7012
|
+
this.bubbleMenu = input(undefined);
|
|
7013
|
+
this.showImageBubbleMenu = input(undefined);
|
|
7014
|
+
this.imageBubbleMenu = input(undefined);
|
|
7052
7015
|
// Configuration de la toolbar
|
|
7053
|
-
this.toolbar = input(undefined
|
|
7016
|
+
this.toolbar = input(undefined);
|
|
7054
7017
|
// Configuration des menus de table
|
|
7055
|
-
this.showTableBubbleMenu = input(undefined
|
|
7056
|
-
this.tableBubbleMenu = input(undefined
|
|
7057
|
-
this.showCellBubbleMenu = input(undefined
|
|
7058
|
-
this.cellBubbleMenu = input(undefined
|
|
7018
|
+
this.showTableBubbleMenu = input(undefined);
|
|
7019
|
+
this.tableBubbleMenu = input(undefined);
|
|
7020
|
+
this.showCellBubbleMenu = input(undefined);
|
|
7021
|
+
this.cellBubbleMenu = input(undefined);
|
|
7059
7022
|
/**
|
|
7060
7023
|
* Additionnal state calculators to extend the reactive editor state.
|
|
7061
7024
|
*/
|
|
7062
|
-
this.stateCalculators = input(undefined
|
|
7025
|
+
this.stateCalculators = input(undefined);
|
|
7063
7026
|
// Nouveau input pour la configuration de l'upload d'images
|
|
7064
|
-
this.imageUpload = input(undefined
|
|
7027
|
+
this.imageUpload = input(undefined);
|
|
7065
7028
|
/**
|
|
7066
7029
|
* Custom handler for image uploads.
|
|
7067
7030
|
* When provided, images will be processed through this handler instead of being converted to base64.
|
|
@@ -7081,7 +7044,7 @@ class AngularTiptapEditorComponent {
|
|
|
7081
7044
|
* // <angular-tiptap-editor [imageUploadHandler]="myUploadHandler" />
|
|
7082
7045
|
* ```
|
|
7083
7046
|
*/
|
|
7084
|
-
this.imageUploadHandler = input(undefined
|
|
7047
|
+
this.imageUploadHandler = input(undefined);
|
|
7085
7048
|
// Nouveaux outputs
|
|
7086
7049
|
this.contentChange = output();
|
|
7087
7050
|
this.editorCreated = output();
|
|
@@ -7092,12 +7055,12 @@ class AngularTiptapEditorComponent {
|
|
|
7092
7055
|
// ViewChild with signal
|
|
7093
7056
|
this.editorElement = viewChild.required("editorElement");
|
|
7094
7057
|
// Private signals for internal state
|
|
7095
|
-
this._editor = signal(null
|
|
7096
|
-
this._characterCount = signal(0
|
|
7097
|
-
this._wordCount = signal(0
|
|
7098
|
-
this._isDragOver = signal(false
|
|
7099
|
-
this._editorFullyInitialized = signal(false
|
|
7100
|
-
this._hoveredBlock = signal(null
|
|
7058
|
+
this._editor = signal(null);
|
|
7059
|
+
this._characterCount = signal(0);
|
|
7060
|
+
this._wordCount = signal(0);
|
|
7061
|
+
this._isDragOver = signal(false);
|
|
7062
|
+
this._editorFullyInitialized = signal(false);
|
|
7063
|
+
this._hoveredBlock = signal(null);
|
|
7101
7064
|
// Anti-echo: track last emitted HTML to prevent cursor reset on parent echo
|
|
7102
7065
|
this.lastEmittedHtml = null;
|
|
7103
7066
|
// Read-only access to signals
|
|
@@ -7107,12 +7070,12 @@ class AngularTiptapEditorComponent {
|
|
|
7107
7070
|
this.isDragOver = this._isDragOver.asReadonly();
|
|
7108
7071
|
this.editorFullyInitialized = this._editorFullyInitialized.asReadonly();
|
|
7109
7072
|
this.hoveredBlock = this._hoveredBlock.asReadonly();
|
|
7110
|
-
this._isFormControlDisabled = signal(false
|
|
7073
|
+
this._isFormControlDisabled = signal(false);
|
|
7111
7074
|
this.isFormControlDisabled = this._isFormControlDisabled.asReadonly();
|
|
7112
7075
|
// Combined disabled state (Input + FormControl)
|
|
7113
|
-
this.mergedDisabled = computed(() => (this.disabled() ?? this.effectiveConfig().disabled) || this.isFormControlDisabled()
|
|
7076
|
+
this.mergedDisabled = computed(() => (this.disabled() ?? this.effectiveConfig().disabled) || this.isFormControlDisabled());
|
|
7114
7077
|
// Computed for editor states
|
|
7115
|
-
this.isEditorReady = computed(() => this.editor() !== null
|
|
7078
|
+
this.isEditorReady = computed(() => this.editor() !== null);
|
|
7116
7079
|
// ============================================
|
|
7117
7080
|
// UNIFIED CONFIGURATION COMPUTED PROPERTIES
|
|
7118
7081
|
// ============================================
|
|
@@ -7124,30 +7087,30 @@ class AngularTiptapEditorComponent {
|
|
|
7124
7087
|
}
|
|
7125
7088
|
const fromConfig = this.effectiveConfig().mode;
|
|
7126
7089
|
return fromConfig === "seamless";
|
|
7127
|
-
}
|
|
7128
|
-
this.finalEditable = computed(() => this.editable() ?? this.effectiveConfig().editable ?? true
|
|
7090
|
+
});
|
|
7091
|
+
this.finalEditable = computed(() => this.editable() ?? this.effectiveConfig().editable ?? true);
|
|
7129
7092
|
this.finalPlaceholder = computed(() => this.placeholder() ??
|
|
7130
7093
|
this.effectiveConfig().placeholder ??
|
|
7131
|
-
this.currentTranslations().editor.placeholder
|
|
7132
|
-
this.finalFillContainer = computed(() => this.fillContainer() ?? this.effectiveConfig().fillContainer
|
|
7133
|
-
this.finalShowFooter = computed(() => this.showFooter() ?? this.effectiveConfig().showFooter ?? true
|
|
7134
|
-
this.finalShowEditToggle = computed(() => this.showEditToggle() ?? this.effectiveConfig().showEditToggle ?? false
|
|
7094
|
+
this.currentTranslations().editor.placeholder);
|
|
7095
|
+
this.finalFillContainer = computed(() => this.fillContainer() ?? this.effectiveConfig().fillContainer);
|
|
7096
|
+
this.finalShowFooter = computed(() => this.showFooter() ?? this.effectiveConfig().showFooter ?? true);
|
|
7097
|
+
this.finalShowEditToggle = computed(() => this.showEditToggle() ?? this.effectiveConfig().showEditToggle ?? false);
|
|
7135
7098
|
this.finalHeight = computed(() => {
|
|
7136
7099
|
const h = this.height() ?? this.effectiveConfig().height;
|
|
7137
7100
|
return typeof h === "number" ? `${h}px` : h;
|
|
7138
|
-
}
|
|
7101
|
+
});
|
|
7139
7102
|
this.finalMinHeight = computed(() => {
|
|
7140
7103
|
const mh = this.minHeight() ?? this.effectiveConfig().minHeight;
|
|
7141
7104
|
return typeof mh === "number" ? `${mh}px` : mh;
|
|
7142
|
-
}
|
|
7105
|
+
});
|
|
7143
7106
|
this.finalMaxHeight = computed(() => {
|
|
7144
7107
|
const mh = this.maxHeight() ?? this.effectiveConfig().maxHeight;
|
|
7145
7108
|
return typeof mh === "number" ? `${mh}px` : mh;
|
|
7146
|
-
}
|
|
7147
|
-
this.finalSpellcheck = computed(() => this.spellcheck() ?? this.effectiveConfig().spellcheck ?? true
|
|
7148
|
-
this.finalEnableOfficePaste = computed(() => this.enableOfficePaste() ?? this.effectiveConfig().enableOfficePaste ?? true
|
|
7109
|
+
});
|
|
7110
|
+
this.finalSpellcheck = computed(() => this.spellcheck() ?? this.effectiveConfig().spellcheck ?? true);
|
|
7111
|
+
this.finalEnableOfficePaste = computed(() => this.enableOfficePaste() ?? this.effectiveConfig().enableOfficePaste ?? true);
|
|
7149
7112
|
// Features
|
|
7150
|
-
this.finalShowToolbar = computed(() => this.showToolbar() ?? this.effectiveConfig().showToolbar ?? true
|
|
7113
|
+
this.finalShowToolbar = computed(() => this.showToolbar() ?? this.effectiveConfig().showToolbar ?? true);
|
|
7151
7114
|
this.finalToolbarConfig = computed(() => {
|
|
7152
7115
|
const fromInput = this.toolbar();
|
|
7153
7116
|
const fromConfig = this.effectiveConfig().toolbar;
|
|
@@ -7159,9 +7122,9 @@ class AngularTiptapEditorComponent {
|
|
|
7159
7122
|
return { ...base, ...fromConfig };
|
|
7160
7123
|
}
|
|
7161
7124
|
return base;
|
|
7162
|
-
}
|
|
7163
|
-
this.finalFloatingToolbar = computed(() => this.floatingToolbar() ?? this.effectiveConfig().floatingToolbar ?? false
|
|
7164
|
-
this.finalShowBubbleMenu = computed(() => this.showBubbleMenu() ?? this.effectiveConfig().showBubbleMenu ?? true
|
|
7125
|
+
});
|
|
7126
|
+
this.finalFloatingToolbar = computed(() => this.floatingToolbar() ?? this.effectiveConfig().floatingToolbar ?? false);
|
|
7127
|
+
this.finalShowBubbleMenu = computed(() => this.showBubbleMenu() ?? this.effectiveConfig().showBubbleMenu ?? true);
|
|
7165
7128
|
this.finalBubbleMenuConfig = computed(() => {
|
|
7166
7129
|
const fromInput = this.bubbleMenu();
|
|
7167
7130
|
const fromConfig = this.effectiveConfig().bubbleMenu;
|
|
@@ -7173,8 +7136,8 @@ class AngularTiptapEditorComponent {
|
|
|
7173
7136
|
return { ...base, ...fromConfig };
|
|
7174
7137
|
}
|
|
7175
7138
|
return base;
|
|
7176
|
-
}
|
|
7177
|
-
this.finalShowImageBubbleMenu = computed(() => this.showImageBubbleMenu() ?? this.effectiveConfig().showImageBubbleMenu ?? true
|
|
7139
|
+
});
|
|
7140
|
+
this.finalShowImageBubbleMenu = computed(() => this.showImageBubbleMenu() ?? this.effectiveConfig().showImageBubbleMenu ?? true);
|
|
7178
7141
|
this.finalImageBubbleMenuConfig = computed(() => {
|
|
7179
7142
|
const fromInput = this.imageBubbleMenu();
|
|
7180
7143
|
const fromConfig = this.effectiveConfig().imageBubbleMenu;
|
|
@@ -7186,8 +7149,8 @@ class AngularTiptapEditorComponent {
|
|
|
7186
7149
|
return { ...base, ...fromConfig };
|
|
7187
7150
|
}
|
|
7188
7151
|
return base;
|
|
7189
|
-
}
|
|
7190
|
-
this.finalShowTableBubbleMenu = computed(() => this.showTableBubbleMenu() ?? this.effectiveConfig().showTableMenu ?? true
|
|
7152
|
+
});
|
|
7153
|
+
this.finalShowTableBubbleMenu = computed(() => this.showTableBubbleMenu() ?? this.effectiveConfig().showTableMenu ?? true);
|
|
7191
7154
|
this.finalTableBubbleMenuConfig = computed(() => {
|
|
7192
7155
|
const fromInput = this.tableBubbleMenu();
|
|
7193
7156
|
const fromConfig = this.effectiveConfig().tableBubbleMenu;
|
|
@@ -7199,8 +7162,8 @@ class AngularTiptapEditorComponent {
|
|
|
7199
7162
|
return { ...base, ...fromConfig };
|
|
7200
7163
|
}
|
|
7201
7164
|
return base;
|
|
7202
|
-
}
|
|
7203
|
-
this.finalShowCellBubbleMenu = computed(() => this.showCellBubbleMenu() ?? this.effectiveConfig().showCellMenu ?? true
|
|
7165
|
+
});
|
|
7166
|
+
this.finalShowCellBubbleMenu = computed(() => this.showCellBubbleMenu() ?? this.effectiveConfig().showCellMenu ?? true);
|
|
7204
7167
|
this.finalCellBubbleMenuConfig = computed(() => {
|
|
7205
7168
|
const fromInput = this.cellBubbleMenu();
|
|
7206
7169
|
const fromConfig = this.effectiveConfig().cellBubbleMenu;
|
|
@@ -7212,8 +7175,8 @@ class AngularTiptapEditorComponent {
|
|
|
7212
7175
|
return { ...base, ...fromConfig };
|
|
7213
7176
|
}
|
|
7214
7177
|
return base;
|
|
7215
|
-
}
|
|
7216
|
-
this.finalEnableSlashCommands = computed(() => this.enableSlashCommands() ?? this.effectiveConfig().enableSlashCommands ?? true
|
|
7178
|
+
});
|
|
7179
|
+
this.finalEnableSlashCommands = computed(() => this.enableSlashCommands() ?? this.effectiveConfig().enableSlashCommands ?? true);
|
|
7217
7180
|
this.finalSlashCommandsConfig = computed(() => {
|
|
7218
7181
|
const fromInputComponent = this.customSlashCommands();
|
|
7219
7182
|
const fromConfigComponent = this.effectiveConfig().customSlashCommands;
|
|
@@ -7229,19 +7192,19 @@ class AngularTiptapEditorComponent {
|
|
|
7229
7192
|
return {
|
|
7230
7193
|
commands: filterSlashCommands(baseConfig || {}, this.i18nService, this.editorCommandsService, this.finalImageUploadConfig()),
|
|
7231
7194
|
};
|
|
7232
|
-
}
|
|
7195
|
+
});
|
|
7233
7196
|
// Behavior
|
|
7234
|
-
this.finalAutofocus = computed(() => this.autofocus() ?? this.effectiveConfig().autofocus
|
|
7235
|
-
this.finalMaxCharacters = computed(() => this.maxCharacters() ?? this.effectiveConfig().maxCharacters
|
|
7236
|
-
this.finalBlockControls = computed(() => this.blockControls() ?? this.effectiveConfig().blockControls ?? "none"
|
|
7237
|
-
this.finalShowCharacterCount = computed(() => this.showCharacterCount() ?? this.effectiveConfig().showCharacterCount ?? true
|
|
7238
|
-
this.finalShowWordCount = computed(() => this.showWordCount() ?? this.effectiveConfig().showWordCount ?? true
|
|
7239
|
-
this.finalLocale = computed(() => this.locale() ?? this.effectiveConfig().locale
|
|
7197
|
+
this.finalAutofocus = computed(() => this.autofocus() ?? this.effectiveConfig().autofocus);
|
|
7198
|
+
this.finalMaxCharacters = computed(() => this.maxCharacters() ?? this.effectiveConfig().maxCharacters);
|
|
7199
|
+
this.finalBlockControls = computed(() => this.blockControls() ?? this.effectiveConfig().blockControls ?? "none");
|
|
7200
|
+
this.finalShowCharacterCount = computed(() => this.showCharacterCount() ?? this.effectiveConfig().showCharacterCount ?? true);
|
|
7201
|
+
this.finalShowWordCount = computed(() => this.showWordCount() ?? this.effectiveConfig().showWordCount ?? true);
|
|
7202
|
+
this.finalLocale = computed(() => this.locale() ?? this.effectiveConfig().locale);
|
|
7240
7203
|
// Extensions & Options
|
|
7241
|
-
this.finalTiptapExtensions = computed(() => this.tiptapExtensions() ?? this.effectiveConfig().tiptapExtensions ?? []
|
|
7242
|
-
this.finalTiptapOptions = computed(() => this.tiptapOptions() ?? this.effectiveConfig().tiptapOptions ?? {}
|
|
7243
|
-
this.finalStateCalculators = computed(() => this.stateCalculators() ?? this.effectiveConfig().stateCalculators ?? []
|
|
7244
|
-
this.finalAngularNodesConfig = computed(() => this.effectiveConfig().angularNodes ?? []
|
|
7204
|
+
this.finalTiptapExtensions = computed(() => this.tiptapExtensions() ?? this.effectiveConfig().tiptapExtensions ?? []);
|
|
7205
|
+
this.finalTiptapOptions = computed(() => this.tiptapOptions() ?? this.effectiveConfig().tiptapOptions ?? {});
|
|
7206
|
+
this.finalStateCalculators = computed(() => this.stateCalculators() ?? this.effectiveConfig().stateCalculators ?? []);
|
|
7207
|
+
this.finalAngularNodesConfig = computed(() => this.effectiveConfig().angularNodes ?? []);
|
|
7245
7208
|
// Image Upload
|
|
7246
7209
|
this.finalImageUploadConfig = computed(() => {
|
|
7247
7210
|
const fromInput = this.imageUpload();
|
|
@@ -7256,8 +7219,8 @@ class AngularTiptapEditorComponent {
|
|
|
7256
7219
|
...merged,
|
|
7257
7220
|
maxSize: (merged.maxSize ?? 5) * 1024 * 1024, // Convert MB to bytes for internal service
|
|
7258
7221
|
};
|
|
7259
|
-
}
|
|
7260
|
-
this.finalImageUploadHandler = computed(() => this.imageUploadHandler() ?? this.effectiveConfig().imageUpload?.handler
|
|
7222
|
+
});
|
|
7223
|
+
this.finalImageUploadHandler = computed(() => this.imageUploadHandler() ?? this.effectiveConfig().imageUpload?.handler);
|
|
7261
7224
|
// Computed for current translations (allows per-instance override via config or input)
|
|
7262
7225
|
this.currentTranslations = computed(() => {
|
|
7263
7226
|
const localeOverride = this.finalLocale();
|
|
@@ -7266,7 +7229,7 @@ class AngularTiptapEditorComponent {
|
|
|
7266
7229
|
return allTranslations[localeOverride] || this.i18nService.translations();
|
|
7267
7230
|
}
|
|
7268
7231
|
return this.i18nService.translations();
|
|
7269
|
-
}
|
|
7232
|
+
});
|
|
7270
7233
|
this._destroyRef = inject(DestroyRef);
|
|
7271
7234
|
// NgControl for management of FormControls
|
|
7272
7235
|
this.ngControl = inject(NgControl, { self: true, optional: true });
|
|
@@ -7284,7 +7247,7 @@ class AngularTiptapEditorComponent {
|
|
|
7284
7247
|
const fromInput = this.config();
|
|
7285
7248
|
const fromGlobal = this.globalConfig || {};
|
|
7286
7249
|
return { ...ATE_DEFAULT_CONFIG, ...fromGlobal, ...fromInput };
|
|
7287
|
-
}
|
|
7250
|
+
});
|
|
7288
7251
|
// Effect to update editor content (with anti-echo)
|
|
7289
7252
|
effect(() => {
|
|
7290
7253
|
const content = this.content(); // Sole reactive dependency
|
|
@@ -7308,7 +7271,7 @@ class AngularTiptapEditorComponent {
|
|
|
7308
7271
|
}
|
|
7309
7272
|
editor.commands.setContent(content, { emitUpdate: false });
|
|
7310
7273
|
});
|
|
7311
|
-
});
|
|
7274
|
+
}, { allowSignalWrites: true });
|
|
7312
7275
|
// Effect to update height properties
|
|
7313
7276
|
effect(() => {
|
|
7314
7277
|
const minHeight = this.finalMinHeight();
|
|
@@ -7323,7 +7286,7 @@ class AngularTiptapEditorComponent {
|
|
|
7323
7286
|
element.style.setProperty("--editor-max-height", maxHeight ?? "none");
|
|
7324
7287
|
element.style.setProperty("--editor-overflow", needsScroll ? "auto" : "visible");
|
|
7325
7288
|
}
|
|
7326
|
-
});
|
|
7289
|
+
}, { allowSignalWrites: true });
|
|
7327
7290
|
// Effect to monitor editability changes
|
|
7328
7291
|
effect(() => {
|
|
7329
7292
|
const currentEditor = this.editor();
|
|
@@ -7334,12 +7297,12 @@ class AngularTiptapEditorComponent {
|
|
|
7334
7297
|
if (currentEditor) {
|
|
7335
7298
|
this.editorCommandsService.setEditable(currentEditor, isEditable);
|
|
7336
7299
|
}
|
|
7337
|
-
});
|
|
7300
|
+
}, { allowSignalWrites: true });
|
|
7338
7301
|
// Effect to synchronize image upload handler with the service
|
|
7339
7302
|
effect(() => {
|
|
7340
7303
|
const handler = this.finalImageUploadHandler();
|
|
7341
7304
|
this.editorCommandsService.uploadHandler = handler || null;
|
|
7342
|
-
});
|
|
7305
|
+
}, { allowSignalWrites: true });
|
|
7343
7306
|
// Effect to update character count limit dynamically
|
|
7344
7307
|
effect(() => {
|
|
7345
7308
|
const editor = this.editor();
|
|
@@ -7350,7 +7313,7 @@ class AngularTiptapEditorComponent {
|
|
|
7350
7313
|
characterCountExtension.options.limit = limit;
|
|
7351
7314
|
}
|
|
7352
7315
|
}
|
|
7353
|
-
});
|
|
7316
|
+
}, { allowSignalWrites: true });
|
|
7354
7317
|
// Effect to re-initialize editor when technical configuration changes
|
|
7355
7318
|
effect(() => {
|
|
7356
7319
|
// Monitor technical dependencies
|
|
@@ -7369,7 +7332,7 @@ class AngularTiptapEditorComponent {
|
|
|
7369
7332
|
}
|
|
7370
7333
|
}
|
|
7371
7334
|
});
|
|
7372
|
-
});
|
|
7335
|
+
}, { allowSignalWrites: true });
|
|
7373
7336
|
}
|
|
7374
7337
|
ngAfterViewInit() {
|
|
7375
7338
|
// La vue est déjà complètement initialisée dans ngAfterViewInit
|
|
@@ -7693,8 +7656,8 @@ class AngularTiptapEditorComponent {
|
|
|
7693
7656
|
}, 0);
|
|
7694
7657
|
}
|
|
7695
7658
|
}
|
|
7696
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7697
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
7659
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AngularTiptapEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7660
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AngularTiptapEditorComponent, isStandalone: true, selector: "angular-tiptap-editor", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, fillContainer: { classPropertyName: "fillContainer", publicName: "fillContainer", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, showCharacterCount: { classPropertyName: "showCharacterCount", publicName: "showCharacterCount", isSignal: true, isRequired: false, transformFunction: null }, showWordCount: { classPropertyName: "showWordCount", publicName: "showWordCount", isSignal: true, isRequired: false, transformFunction: null }, maxCharacters: { classPropertyName: "maxCharacters", publicName: "maxCharacters", isSignal: true, isRequired: false, transformFunction: null }, enableOfficePaste: { classPropertyName: "enableOfficePaste", publicName: "enableOfficePaste", isSignal: true, isRequired: false, transformFunction: null }, enableSlashCommands: { classPropertyName: "enableSlashCommands", publicName: "enableSlashCommands", isSignal: true, isRequired: false, transformFunction: null }, slashCommands: { classPropertyName: "slashCommands", publicName: "slashCommands", isSignal: true, isRequired: false, transformFunction: null }, customSlashCommands: { classPropertyName: "customSlashCommands", publicName: "customSlashCommands", isSignal: true, isRequired: false, transformFunction: null }, blockControls: { classPropertyName: "blockControls", publicName: "blockControls", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, seamless: { classPropertyName: "seamless", publicName: "seamless", isSignal: true, isRequired: false, transformFunction: null }, floatingToolbar: { classPropertyName: "floatingToolbar", publicName: "floatingToolbar", isSignal: true, isRequired: false, transformFunction: null }, showEditToggle: { classPropertyName: "showEditToggle", publicName: "showEditToggle", isSignal: true, isRequired: false, transformFunction: null }, spellcheck: { classPropertyName: "spellcheck", publicName: "spellcheck", isSignal: true, isRequired: false, transformFunction: null }, tiptapExtensions: { classPropertyName: "tiptapExtensions", publicName: "tiptapExtensions", isSignal: true, isRequired: false, transformFunction: null }, tiptapOptions: { classPropertyName: "tiptapOptions", publicName: "tiptapOptions", isSignal: true, isRequired: false, transformFunction: null }, showBubbleMenu: { classPropertyName: "showBubbleMenu", publicName: "showBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, bubbleMenu: { classPropertyName: "bubbleMenu", publicName: "bubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, showImageBubbleMenu: { classPropertyName: "showImageBubbleMenu", publicName: "showImageBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, imageBubbleMenu: { classPropertyName: "imageBubbleMenu", publicName: "imageBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, showTableBubbleMenu: { classPropertyName: "showTableBubbleMenu", publicName: "showTableBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, tableBubbleMenu: { classPropertyName: "tableBubbleMenu", publicName: "tableBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, showCellBubbleMenu: { classPropertyName: "showCellBubbleMenu", publicName: "showCellBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, cellBubbleMenu: { classPropertyName: "cellBubbleMenu", publicName: "cellBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, stateCalculators: { classPropertyName: "stateCalculators", publicName: "stateCalculators", isSignal: true, isRequired: false, transformFunction: null }, imageUpload: { classPropertyName: "imageUpload", publicName: "imageUpload", isSignal: true, isRequired: false, transformFunction: null }, imageUploadHandler: { classPropertyName: "imageUploadHandler", publicName: "imageUploadHandler", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentChange: "contentChange", editorCreated: "editorCreated", editorUpdate: "editorUpdate", editorFocus: "editorFocus", editorBlur: "editorBlur", editableChange: "editableChange" }, host: { properties: { "class.fill-container": "finalFillContainer()", "class.floating-toolbar": "finalFloatingToolbar()", "class.is-readonly": "!finalEditable() && !mergedDisabled()", "class.is-disabled": "mergedDisabled()", "style.--ate-border-width": "finalSeamless() || mergedDisabled() ? '0' : null", "style.--ate-background": "finalSeamless() ? 'transparent' : (mergedDisabled() ? 'var(--ate-surface-tertiary)' : null)", "style.--ate-toolbar-border-color": "finalSeamless() ? 'transparent' : null", "style.--ate-counter-background": "finalSeamless() ? 'transparent' : null", "style.--ate-counter-border-color": "finalSeamless() ? 'transparent' : null", "class.dark": "config().theme === 'dark'", "class.ate-blocks-inside": "finalBlockControls() === 'inside'", "class.ate-blocks-outside": "finalBlockControls() === 'outside'", "attr.data-theme": "config().theme" } }, providers: [AteEditorCommandsService, AteImageService, AteColorPickerService, AteLinkService], viewQueries: [{ propertyName: "editorElement", first: true, predicate: ["editorElement"], descendants: true, isSignal: true }], hostDirectives: [{ directive: AteNoopValueAccessorDirective }], ngImport: i0, template: `
|
|
7698
7661
|
<div class="ate-editor">
|
|
7699
7662
|
<!-- Toolbar -->
|
|
7700
7663
|
@if (finalEditable() && !mergedDisabled() && finalShowToolbar() && editor()) {
|
|
@@ -7822,7 +7785,7 @@ class AngularTiptapEditorComponent {
|
|
|
7822
7785
|
</div>
|
|
7823
7786
|
`, 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-selection-bg: var(--ate-primary-light-alpha);--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-block: 16px;--ate-content-padding-inline: 16px;--ate-content-gutter: 0px;--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.ate-blocks-inside{--ate-content-gutter: 54px}@media (max-width: 768px){:host.ate-blocks-inside{--ate-content-gutter: 0px}ate-block-controls{display:none!important}}:host ::ng-deep .ProseMirror{padding-inline:calc(var(--ate-content-padding-inline) + var(--ate-content-gutter));padding-block:var(--ate-content-padding-block);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 ::selection{background-color:var(--ate-selection-bg);color:inherit}:host ::ng-deep .ProseMirror ::-moz-selection{background-color:var(--ate-selection-bg);color:inherit}: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"] }, { kind: "component", type: AteBlockControlsComponent, selector: "ate-block-controls", inputs: ["editor", "hoveredData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7824
7787
|
}
|
|
7825
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7788
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AngularTiptapEditorComponent, decorators: [{
|
|
7826
7789
|
type: Component,
|
|
7827
7790
|
args: [{ selector: "angular-tiptap-editor", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [AteNoopValueAccessorDirective], host: {
|
|
7828
7791
|
"[class.fill-container]": "finalFillContainer()",
|
|
@@ -7976,7 +7939,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
7976
7939
|
}
|
|
7977
7940
|
</div>
|
|
7978
7941
|
`, 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-selection-bg: var(--ate-primary-light-alpha);--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-block: 16px;--ate-content-padding-inline: 16px;--ate-content-gutter: 0px;--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.ate-blocks-inside{--ate-content-gutter: 54px}@media (max-width: 768px){:host.ate-blocks-inside{--ate-content-gutter: 0px}ate-block-controls{display:none!important}}:host ::ng-deep .ProseMirror{padding-inline:calc(var(--ate-content-padding-inline) + var(--ate-content-gutter));padding-block:var(--ate-content-padding-block);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 ::selection{background-color:var(--ate-selection-bg);color:inherit}:host ::ng-deep .ProseMirror ::-moz-selection{background-color:var(--ate-selection-bg);color:inherit}: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"] }]
|
|
7979
|
-
}], ctorParameters: () => []
|
|
7942
|
+
}], ctorParameters: () => [] });
|
|
7980
7943
|
|
|
7981
7944
|
/**
|
|
7982
7945
|
* Provides the necessary configuration and initialization for the Angular TipTap Editor.
|
|
@@ -8002,10 +7965,14 @@ function provideAteEditor(config) {
|
|
|
8002
7965
|
provide: ATE_GLOBAL_CONFIG,
|
|
8003
7966
|
useValue: config || {},
|
|
8004
7967
|
},
|
|
8005
|
-
|
|
8006
|
-
|
|
8007
|
-
|
|
8008
|
-
|
|
7968
|
+
{
|
|
7969
|
+
provide: APP_INITIALIZER,
|
|
7970
|
+
useFactory: (injector) => () => {
|
|
7971
|
+
setGlobalInjector(injector);
|
|
7972
|
+
},
|
|
7973
|
+
deps: [Injector],
|
|
7974
|
+
multi: true,
|
|
7975
|
+
},
|
|
8009
7976
|
]);
|
|
8010
7977
|
}
|
|
8011
7978
|
|