@flogeez/angular-tiptap-editor 0.3.3 → 0.3.5
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/README.md +459 -459
- package/fesm2022/flogeez-angular-tiptap-editor.mjs +364 -384
- package/fesm2022/flogeez-angular-tiptap-editor.mjs.map +1 -1
- package/index.d.ts +2 -1
- package/package.json +1 -1
|
@@ -535,60 +535,60 @@ class TiptapButtonComponent {
|
|
|
535
535
|
event.preventDefault();
|
|
536
536
|
}
|
|
537
537
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
538
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: TiptapButtonComponent, isStandalone: true, selector: "tiptap-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, 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 }, 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: { onClick: "onClick" }, ngImport: i0, template: `
|
|
539
|
-
<button
|
|
540
|
-
class="tiptap-button"
|
|
541
|
-
[class.is-active]="active()"
|
|
542
|
-
[class.is-disabled]="disabled()"
|
|
543
|
-
[class.text-button]="variant() === 'text'"
|
|
544
|
-
[class.danger]="variant() === 'danger'"
|
|
545
|
-
[class.small]="size() === 'small'"
|
|
546
|
-
[class.medium]="size() === 'medium'"
|
|
547
|
-
[class.large]="size() === 'large'"
|
|
548
|
-
[disabled]="disabled()"
|
|
549
|
-
[attr.title]="title()"
|
|
550
|
-
(mousedown)="onMouseDown($event)"
|
|
551
|
-
(click)="onClick.emit($event)"
|
|
552
|
-
type="button"
|
|
553
|
-
>
|
|
554
|
-
<span
|
|
555
|
-
class="material-symbols-outlined"
|
|
556
|
-
[class.icon-small]="iconSize() === 'small'"
|
|
557
|
-
[class.icon-medium]="iconSize() === 'medium'"
|
|
558
|
-
[class.icon-large]="iconSize() === 'large'"
|
|
559
|
-
>{{ icon() }}</span
|
|
560
|
-
>
|
|
561
|
-
<ng-content></ng-content>
|
|
562
|
-
</button>
|
|
538
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: TiptapButtonComponent, isStandalone: true, selector: "tiptap-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, 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 }, 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: { onClick: "onClick" }, ngImport: i0, template: `
|
|
539
|
+
<button
|
|
540
|
+
class="tiptap-button"
|
|
541
|
+
[class.is-active]="active()"
|
|
542
|
+
[class.is-disabled]="disabled()"
|
|
543
|
+
[class.text-button]="variant() === 'text'"
|
|
544
|
+
[class.danger]="variant() === 'danger'"
|
|
545
|
+
[class.small]="size() === 'small'"
|
|
546
|
+
[class.medium]="size() === 'medium'"
|
|
547
|
+
[class.large]="size() === 'large'"
|
|
548
|
+
[disabled]="disabled()"
|
|
549
|
+
[attr.title]="title()"
|
|
550
|
+
(mousedown)="onMouseDown($event)"
|
|
551
|
+
(click)="onClick.emit($event)"
|
|
552
|
+
type="button"
|
|
553
|
+
>
|
|
554
|
+
<span
|
|
555
|
+
class="material-symbols-outlined"
|
|
556
|
+
[class.icon-small]="iconSize() === 'small'"
|
|
557
|
+
[class.icon-medium]="iconSize() === 'medium'"
|
|
558
|
+
[class.icon-large]="iconSize() === 'large'"
|
|
559
|
+
>{{ icon() }}</span
|
|
560
|
+
>
|
|
561
|
+
<ng-content></ng-content>
|
|
562
|
+
</button>
|
|
563
563
|
`, isInline: true, styles: [".tiptap-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;border-radius:8px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);color:#64748b;position:relative;overflow:hidden}.tiptap-button:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,#6366f1,#8b5cf6);opacity:0;transition:opacity .2s ease;border-radius:8px}.tiptap-button:hover{color:#6366f1;transform:translateY(-1px)}.tiptap-button:hover:before{opacity:.1}.tiptap-button:active{transform:translateY(0)}.tiptap-button.is-active{color:#6366f1;background:#6366f11a}.tiptap-button.is-active:before{opacity:.15}.tiptap-button.is-active:hover{background:#6366f126}.tiptap-button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.tiptap-button:disabled:hover{transform:none;color:#64748b}.tiptap-button:disabled:before{opacity:0}.tiptap-button .material-symbols-outlined{font-size:20px;position:relative;z-index:1}.tiptap-button .material-symbols-outlined.icon-small{font-size:16px}.tiptap-button .material-symbols-outlined.icon-medium{font-size:20px}.tiptap-button .material-symbols-outlined.icon-large{font-size:24px}.tiptap-button.text-button{width:auto;padding:0 12px;font-size:14px;font-weight:500}.tiptap-button.color-button{width:28px;height:28px;border-radius:50%;border:2px solid transparent;transition:all .2s ease}.tiptap-button.color-button:hover{border-color:#e2e8f0;transform:scale(1.1)}.tiptap-button.color-button.is-active{border-color:#6366f1;box-shadow:0 0 0 2px #6366f133}.tiptap-button.primary{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff}.tiptap-button.primary:hover{background:linear-gradient(135deg,#5b21b6,#7c3aed);color:#fff}.tiptap-button.secondary{background:#f1f5f9;color:#64748b}.tiptap-button.secondary:hover{background:#e2e8f0;color:#475569}.tiptap-button.danger{color:#ef4444}.tiptap-button.danger:hover{color:#dc2626;background:#ef44441a}.tiptap-button.danger:before{background:linear-gradient(135deg,#ef4444,#dc2626)}.tiptap-button.small{width:24px;height:24px}.tiptap-button.medium{width:32px;height:32px}.tiptap-button.large{width:40px;height:40px}.tiptap-button.has-badge{position:relative}.tiptap-button .badge{position:absolute;top:-4px;right:-4px;background:#ef4444;color:#fff;font-size:10px;padding:2px 4px;border-radius:8px;min-width:16px;text-align:center;line-height:1}.tiptap-button.has-tooltip{position:relative}.tiptap-button .tooltip{position:absolute;bottom:-30px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;white-space:nowrap;opacity:0;visibility:hidden;transition:all .2s ease;z-index:1000}.tiptap-button:hover .tooltip{opacity:1;visibility:visible}@keyframes pulse{0%,to{box-shadow:0 0 #6366f166}50%{box-shadow:0 0 0 4px #6366f100}}.tiptap-button.is-active.pulse{animation:pulse 2s infinite}@media (max-width: 768px){.tiptap-button{width:32px;height:32px}.tiptap-button .material-symbols-outlined{font-size:18px}.tiptap-button.text-button{padding:0 8px;font-size:13px}}\n"] }); }
|
|
564
564
|
}
|
|
565
565
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapButtonComponent, decorators: [{
|
|
566
566
|
type: Component,
|
|
567
|
-
args: [{ selector: "tiptap-button", standalone: true, template: `
|
|
568
|
-
<button
|
|
569
|
-
class="tiptap-button"
|
|
570
|
-
[class.is-active]="active()"
|
|
571
|
-
[class.is-disabled]="disabled()"
|
|
572
|
-
[class.text-button]="variant() === 'text'"
|
|
573
|
-
[class.danger]="variant() === 'danger'"
|
|
574
|
-
[class.small]="size() === 'small'"
|
|
575
|
-
[class.medium]="size() === 'medium'"
|
|
576
|
-
[class.large]="size() === 'large'"
|
|
577
|
-
[disabled]="disabled()"
|
|
578
|
-
[attr.title]="title()"
|
|
579
|
-
(mousedown)="onMouseDown($event)"
|
|
580
|
-
(click)="onClick.emit($event)"
|
|
581
|
-
type="button"
|
|
582
|
-
>
|
|
583
|
-
<span
|
|
584
|
-
class="material-symbols-outlined"
|
|
585
|
-
[class.icon-small]="iconSize() === 'small'"
|
|
586
|
-
[class.icon-medium]="iconSize() === 'medium'"
|
|
587
|
-
[class.icon-large]="iconSize() === 'large'"
|
|
588
|
-
>{{ icon() }}</span
|
|
589
|
-
>
|
|
590
|
-
<ng-content></ng-content>
|
|
591
|
-
</button>
|
|
567
|
+
args: [{ selector: "tiptap-button", standalone: true, template: `
|
|
568
|
+
<button
|
|
569
|
+
class="tiptap-button"
|
|
570
|
+
[class.is-active]="active()"
|
|
571
|
+
[class.is-disabled]="disabled()"
|
|
572
|
+
[class.text-button]="variant() === 'text'"
|
|
573
|
+
[class.danger]="variant() === 'danger'"
|
|
574
|
+
[class.small]="size() === 'small'"
|
|
575
|
+
[class.medium]="size() === 'medium'"
|
|
576
|
+
[class.large]="size() === 'large'"
|
|
577
|
+
[disabled]="disabled()"
|
|
578
|
+
[attr.title]="title()"
|
|
579
|
+
(mousedown)="onMouseDown($event)"
|
|
580
|
+
(click)="onClick.emit($event)"
|
|
581
|
+
type="button"
|
|
582
|
+
>
|
|
583
|
+
<span
|
|
584
|
+
class="material-symbols-outlined"
|
|
585
|
+
[class.icon-small]="iconSize() === 'small'"
|
|
586
|
+
[class.icon-medium]="iconSize() === 'medium'"
|
|
587
|
+
[class.icon-large]="iconSize() === 'large'"
|
|
588
|
+
>{{ icon() }}</span
|
|
589
|
+
>
|
|
590
|
+
<ng-content></ng-content>
|
|
591
|
+
</button>
|
|
592
592
|
`, styles: [".tiptap-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;border-radius:8px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);color:#64748b;position:relative;overflow:hidden}.tiptap-button:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,#6366f1,#8b5cf6);opacity:0;transition:opacity .2s ease;border-radius:8px}.tiptap-button:hover{color:#6366f1;transform:translateY(-1px)}.tiptap-button:hover:before{opacity:.1}.tiptap-button:active{transform:translateY(0)}.tiptap-button.is-active{color:#6366f1;background:#6366f11a}.tiptap-button.is-active:before{opacity:.15}.tiptap-button.is-active:hover{background:#6366f126}.tiptap-button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.tiptap-button:disabled:hover{transform:none;color:#64748b}.tiptap-button:disabled:before{opacity:0}.tiptap-button .material-symbols-outlined{font-size:20px;position:relative;z-index:1}.tiptap-button .material-symbols-outlined.icon-small{font-size:16px}.tiptap-button .material-symbols-outlined.icon-medium{font-size:20px}.tiptap-button .material-symbols-outlined.icon-large{font-size:24px}.tiptap-button.text-button{width:auto;padding:0 12px;font-size:14px;font-weight:500}.tiptap-button.color-button{width:28px;height:28px;border-radius:50%;border:2px solid transparent;transition:all .2s ease}.tiptap-button.color-button:hover{border-color:#e2e8f0;transform:scale(1.1)}.tiptap-button.color-button.is-active{border-color:#6366f1;box-shadow:0 0 0 2px #6366f133}.tiptap-button.primary{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff}.tiptap-button.primary:hover{background:linear-gradient(135deg,#5b21b6,#7c3aed);color:#fff}.tiptap-button.secondary{background:#f1f5f9;color:#64748b}.tiptap-button.secondary:hover{background:#e2e8f0;color:#475569}.tiptap-button.danger{color:#ef4444}.tiptap-button.danger:hover{color:#dc2626;background:#ef44441a}.tiptap-button.danger:before{background:linear-gradient(135deg,#ef4444,#dc2626)}.tiptap-button.small{width:24px;height:24px}.tiptap-button.medium{width:32px;height:32px}.tiptap-button.large{width:40px;height:40px}.tiptap-button.has-badge{position:relative}.tiptap-button .badge{position:absolute;top:-4px;right:-4px;background:#ef4444;color:#fff;font-size:10px;padding:2px 4px;border-radius:8px;min-width:16px;text-align:center;line-height:1}.tiptap-button.has-tooltip{position:relative}.tiptap-button .tooltip{position:absolute;bottom:-30px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;white-space:nowrap;opacity:0;visibility:hidden;transition:all .2s ease;z-index:1000}.tiptap-button:hover .tooltip{opacity:1;visibility:visible}@keyframes pulse{0%,to{box-shadow:0 0 #6366f166}50%{box-shadow:0 0 0 4px #6366f100}}.tiptap-button.is-active.pulse{animation:pulse 2s infinite}@media (max-width: 768px){.tiptap-button{width:32px;height:32px}.tiptap-button .material-symbols-outlined{font-size:18px}.tiptap-button.text-button{padding:0 8px;font-size:13px}}\n"] }]
|
|
593
593
|
}] });
|
|
594
594
|
|
|
@@ -638,16 +638,6 @@ class TiptapBubbleMenuComponent {
|
|
|
638
638
|
const isImageSelected = ed.isActive("image") || ed.isActive("resizableImage");
|
|
639
639
|
const isTableCellSelected = ed.isActive("tableCell") || ed.isActive("tableHeader");
|
|
640
640
|
const hasCellSelection = selection instanceof CellSelection;
|
|
641
|
-
console.log("TextBubbleMenu - updateMenu:", {
|
|
642
|
-
hasTextSelection,
|
|
643
|
-
isImageSelected,
|
|
644
|
-
isTableCellSelected,
|
|
645
|
-
hasCellSelection,
|
|
646
|
-
selectionType: selection.constructor.name,
|
|
647
|
-
selectionEmpty: selection.empty,
|
|
648
|
-
from,
|
|
649
|
-
to,
|
|
650
|
-
});
|
|
651
641
|
// Ne montrer le menu texte que si :
|
|
652
642
|
// - Il y a une sélection de texte (pas une sélection de cellules multiples)
|
|
653
643
|
// - Aucune image n'est sélectionnée (priorité aux images)
|
|
@@ -829,150 +819,150 @@ class TiptapBubbleMenuComponent {
|
|
|
829
819
|
}
|
|
830
820
|
}
|
|
831
821
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapBubbleMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
832
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapBubbleMenuComponent, isStandalone: true, selector: "tiptap-bubble-menu", 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 }], ngImport: i0, template: `
|
|
833
|
-
<div #menuRef class="bubble-menu">
|
|
834
|
-
@if (bubbleMenuConfig().bold) {
|
|
835
|
-
<tiptap-button
|
|
836
|
-
icon="format_bold"
|
|
837
|
-
title="Gras"
|
|
838
|
-
[active]="isActive('bold')"
|
|
839
|
-
(click)="onCommand('bold', $event)"
|
|
840
|
-
></tiptap-button>
|
|
841
|
-
} @if (bubbleMenuConfig().italic) {
|
|
842
|
-
<tiptap-button
|
|
843
|
-
icon="format_italic"
|
|
844
|
-
title="Italique"
|
|
845
|
-
[active]="isActive('italic')"
|
|
846
|
-
(click)="onCommand('italic', $event)"
|
|
847
|
-
></tiptap-button>
|
|
848
|
-
} @if (bubbleMenuConfig().underline) {
|
|
849
|
-
<tiptap-button
|
|
850
|
-
icon="format_underlined"
|
|
851
|
-
title="Souligné"
|
|
852
|
-
[active]="isActive('underline')"
|
|
853
|
-
(click)="onCommand('underline', $event)"
|
|
854
|
-
></tiptap-button>
|
|
855
|
-
} @if (bubbleMenuConfig().strike) {
|
|
856
|
-
<tiptap-button
|
|
857
|
-
icon="strikethrough_s"
|
|
858
|
-
title="Barré"
|
|
859
|
-
[active]="isActive('strike')"
|
|
860
|
-
(click)="onCommand('strike', $event)"
|
|
861
|
-
></tiptap-button>
|
|
862
|
-
} @if (bubbleMenuConfig().superscript) {
|
|
863
|
-
<tiptap-button
|
|
864
|
-
icon="superscript"
|
|
865
|
-
title="Exposant"
|
|
866
|
-
[active]="isActive('superscript')"
|
|
867
|
-
(click)="onCommand('superscript', $event)"
|
|
868
|
-
></tiptap-button>
|
|
869
|
-
} @if (bubbleMenuConfig().subscript) {
|
|
870
|
-
<tiptap-button
|
|
871
|
-
icon="subscript"
|
|
872
|
-
title="Indice"
|
|
873
|
-
[active]="isActive('subscript')"
|
|
874
|
-
(click)="onCommand('subscript', $event)"
|
|
875
|
-
></tiptap-button>
|
|
876
|
-
} @if (bubbleMenuConfig().highlight) {
|
|
877
|
-
<tiptap-button
|
|
878
|
-
icon="highlight"
|
|
879
|
-
title="Surbrillance"
|
|
880
|
-
[active]="isActive('highlight')"
|
|
881
|
-
(click)="onCommand('highlight', $event)"
|
|
882
|
-
></tiptap-button>
|
|
883
|
-
} @if (bubbleMenuConfig().separator && (bubbleMenuConfig().code ||
|
|
884
|
-
bubbleMenuConfig().link)) {
|
|
885
|
-
<div class="tiptap-separator"></div>
|
|
886
|
-
} @if (bubbleMenuConfig().code) {
|
|
887
|
-
<tiptap-button
|
|
888
|
-
icon="code"
|
|
889
|
-
title="Code"
|
|
890
|
-
[active]="isActive('code')"
|
|
891
|
-
(click)="onCommand('code', $event)"
|
|
892
|
-
></tiptap-button>
|
|
893
|
-
} @if (bubbleMenuConfig().link) {
|
|
894
|
-
<tiptap-button
|
|
895
|
-
icon="link"
|
|
896
|
-
title="Lien"
|
|
897
|
-
[active]="isActive('link')"
|
|
898
|
-
(click)="onCommand('link', $event)"
|
|
899
|
-
></tiptap-button>
|
|
900
|
-
}
|
|
901
|
-
</div>
|
|
822
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: TiptapBubbleMenuComponent, isStandalone: true, selector: "tiptap-bubble-menu", 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 }], ngImport: i0, template: `
|
|
823
|
+
<div #menuRef class="bubble-menu">
|
|
824
|
+
@if (bubbleMenuConfig().bold) {
|
|
825
|
+
<tiptap-button
|
|
826
|
+
icon="format_bold"
|
|
827
|
+
title="Gras"
|
|
828
|
+
[active]="isActive('bold')"
|
|
829
|
+
(click)="onCommand('bold', $event)"
|
|
830
|
+
></tiptap-button>
|
|
831
|
+
} @if (bubbleMenuConfig().italic) {
|
|
832
|
+
<tiptap-button
|
|
833
|
+
icon="format_italic"
|
|
834
|
+
title="Italique"
|
|
835
|
+
[active]="isActive('italic')"
|
|
836
|
+
(click)="onCommand('italic', $event)"
|
|
837
|
+
></tiptap-button>
|
|
838
|
+
} @if (bubbleMenuConfig().underline) {
|
|
839
|
+
<tiptap-button
|
|
840
|
+
icon="format_underlined"
|
|
841
|
+
title="Souligné"
|
|
842
|
+
[active]="isActive('underline')"
|
|
843
|
+
(click)="onCommand('underline', $event)"
|
|
844
|
+
></tiptap-button>
|
|
845
|
+
} @if (bubbleMenuConfig().strike) {
|
|
846
|
+
<tiptap-button
|
|
847
|
+
icon="strikethrough_s"
|
|
848
|
+
title="Barré"
|
|
849
|
+
[active]="isActive('strike')"
|
|
850
|
+
(click)="onCommand('strike', $event)"
|
|
851
|
+
></tiptap-button>
|
|
852
|
+
} @if (bubbleMenuConfig().superscript) {
|
|
853
|
+
<tiptap-button
|
|
854
|
+
icon="superscript"
|
|
855
|
+
title="Exposant"
|
|
856
|
+
[active]="isActive('superscript')"
|
|
857
|
+
(click)="onCommand('superscript', $event)"
|
|
858
|
+
></tiptap-button>
|
|
859
|
+
} @if (bubbleMenuConfig().subscript) {
|
|
860
|
+
<tiptap-button
|
|
861
|
+
icon="subscript"
|
|
862
|
+
title="Indice"
|
|
863
|
+
[active]="isActive('subscript')"
|
|
864
|
+
(click)="onCommand('subscript', $event)"
|
|
865
|
+
></tiptap-button>
|
|
866
|
+
} @if (bubbleMenuConfig().highlight) {
|
|
867
|
+
<tiptap-button
|
|
868
|
+
icon="highlight"
|
|
869
|
+
title="Surbrillance"
|
|
870
|
+
[active]="isActive('highlight')"
|
|
871
|
+
(click)="onCommand('highlight', $event)"
|
|
872
|
+
></tiptap-button>
|
|
873
|
+
} @if (bubbleMenuConfig().separator && (bubbleMenuConfig().code ||
|
|
874
|
+
bubbleMenuConfig().link)) {
|
|
875
|
+
<div class="tiptap-separator"></div>
|
|
876
|
+
} @if (bubbleMenuConfig().code) {
|
|
877
|
+
<tiptap-button
|
|
878
|
+
icon="code"
|
|
879
|
+
title="Code"
|
|
880
|
+
[active]="isActive('code')"
|
|
881
|
+
(click)="onCommand('code', $event)"
|
|
882
|
+
></tiptap-button>
|
|
883
|
+
} @if (bubbleMenuConfig().link) {
|
|
884
|
+
<tiptap-button
|
|
885
|
+
icon="link"
|
|
886
|
+
title="Lien"
|
|
887
|
+
[active]="isActive('link')"
|
|
888
|
+
(click)="onCommand('link', $event)"
|
|
889
|
+
></tiptap-button>
|
|
890
|
+
}
|
|
891
|
+
</div>
|
|
902
892
|
`, isInline: true, dependencies: [{ kind: "component", type: TiptapButtonComponent, selector: "tiptap-button", inputs: ["icon", "title", "active", "disabled", "variant", "size", "iconSize"], outputs: ["onClick"] }] }); }
|
|
903
893
|
}
|
|
904
894
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TiptapBubbleMenuComponent, decorators: [{
|
|
905
895
|
type: Component,
|
|
906
|
-
args: [{ selector: "tiptap-bubble-menu", standalone: true, imports: [TiptapButtonComponent], template: `
|
|
907
|
-
<div #menuRef class="bubble-menu">
|
|
908
|
-
@if (bubbleMenuConfig().bold) {
|
|
909
|
-
<tiptap-button
|
|
910
|
-
icon="format_bold"
|
|
911
|
-
title="Gras"
|
|
912
|
-
[active]="isActive('bold')"
|
|
913
|
-
(click)="onCommand('bold', $event)"
|
|
914
|
-
></tiptap-button>
|
|
915
|
-
} @if (bubbleMenuConfig().italic) {
|
|
916
|
-
<tiptap-button
|
|
917
|
-
icon="format_italic"
|
|
918
|
-
title="Italique"
|
|
919
|
-
[active]="isActive('italic')"
|
|
920
|
-
(click)="onCommand('italic', $event)"
|
|
921
|
-
></tiptap-button>
|
|
922
|
-
} @if (bubbleMenuConfig().underline) {
|
|
923
|
-
<tiptap-button
|
|
924
|
-
icon="format_underlined"
|
|
925
|
-
title="Souligné"
|
|
926
|
-
[active]="isActive('underline')"
|
|
927
|
-
(click)="onCommand('underline', $event)"
|
|
928
|
-
></tiptap-button>
|
|
929
|
-
} @if (bubbleMenuConfig().strike) {
|
|
930
|
-
<tiptap-button
|
|
931
|
-
icon="strikethrough_s"
|
|
932
|
-
title="Barré"
|
|
933
|
-
[active]="isActive('strike')"
|
|
934
|
-
(click)="onCommand('strike', $event)"
|
|
935
|
-
></tiptap-button>
|
|
936
|
-
} @if (bubbleMenuConfig().superscript) {
|
|
937
|
-
<tiptap-button
|
|
938
|
-
icon="superscript"
|
|
939
|
-
title="Exposant"
|
|
940
|
-
[active]="isActive('superscript')"
|
|
941
|
-
(click)="onCommand('superscript', $event)"
|
|
942
|
-
></tiptap-button>
|
|
943
|
-
} @if (bubbleMenuConfig().subscript) {
|
|
944
|
-
<tiptap-button
|
|
945
|
-
icon="subscript"
|
|
946
|
-
title="Indice"
|
|
947
|
-
[active]="isActive('subscript')"
|
|
948
|
-
(click)="onCommand('subscript', $event)"
|
|
949
|
-
></tiptap-button>
|
|
950
|
-
} @if (bubbleMenuConfig().highlight) {
|
|
951
|
-
<tiptap-button
|
|
952
|
-
icon="highlight"
|
|
953
|
-
title="Surbrillance"
|
|
954
|
-
[active]="isActive('highlight')"
|
|
955
|
-
(click)="onCommand('highlight', $event)"
|
|
956
|
-
></tiptap-button>
|
|
957
|
-
} @if (bubbleMenuConfig().separator && (bubbleMenuConfig().code ||
|
|
958
|
-
bubbleMenuConfig().link)) {
|
|
959
|
-
<div class="tiptap-separator"></div>
|
|
960
|
-
} @if (bubbleMenuConfig().code) {
|
|
961
|
-
<tiptap-button
|
|
962
|
-
icon="code"
|
|
963
|
-
title="Code"
|
|
964
|
-
[active]="isActive('code')"
|
|
965
|
-
(click)="onCommand('code', $event)"
|
|
966
|
-
></tiptap-button>
|
|
967
|
-
} @if (bubbleMenuConfig().link) {
|
|
968
|
-
<tiptap-button
|
|
969
|
-
icon="link"
|
|
970
|
-
title="Lien"
|
|
971
|
-
[active]="isActive('link')"
|
|
972
|
-
(click)="onCommand('link', $event)"
|
|
973
|
-
></tiptap-button>
|
|
974
|
-
}
|
|
975
|
-
</div>
|
|
896
|
+
args: [{ selector: "tiptap-bubble-menu", standalone: true, imports: [TiptapButtonComponent], template: `
|
|
897
|
+
<div #menuRef class="bubble-menu">
|
|
898
|
+
@if (bubbleMenuConfig().bold) {
|
|
899
|
+
<tiptap-button
|
|
900
|
+
icon="format_bold"
|
|
901
|
+
title="Gras"
|
|
902
|
+
[active]="isActive('bold')"
|
|
903
|
+
(click)="onCommand('bold', $event)"
|
|
904
|
+
></tiptap-button>
|
|
905
|
+
} @if (bubbleMenuConfig().italic) {
|
|
906
|
+
<tiptap-button
|
|
907
|
+
icon="format_italic"
|
|
908
|
+
title="Italique"
|
|
909
|
+
[active]="isActive('italic')"
|
|
910
|
+
(click)="onCommand('italic', $event)"
|
|
911
|
+
></tiptap-button>
|
|
912
|
+
} @if (bubbleMenuConfig().underline) {
|
|
913
|
+
<tiptap-button
|
|
914
|
+
icon="format_underlined"
|
|
915
|
+
title="Souligné"
|
|
916
|
+
[active]="isActive('underline')"
|
|
917
|
+
(click)="onCommand('underline', $event)"
|
|
918
|
+
></tiptap-button>
|
|
919
|
+
} @if (bubbleMenuConfig().strike) {
|
|
920
|
+
<tiptap-button
|
|
921
|
+
icon="strikethrough_s"
|
|
922
|
+
title="Barré"
|
|
923
|
+
[active]="isActive('strike')"
|
|
924
|
+
(click)="onCommand('strike', $event)"
|
|
925
|
+
></tiptap-button>
|
|
926
|
+
} @if (bubbleMenuConfig().superscript) {
|
|
927
|
+
<tiptap-button
|
|
928
|
+
icon="superscript"
|
|
929
|
+
title="Exposant"
|
|
930
|
+
[active]="isActive('superscript')"
|
|
931
|
+
(click)="onCommand('superscript', $event)"
|
|
932
|
+
></tiptap-button>
|
|
933
|
+
} @if (bubbleMenuConfig().subscript) {
|
|
934
|
+
<tiptap-button
|
|
935
|
+
icon="subscript"
|
|
936
|
+
title="Indice"
|
|
937
|
+
[active]="isActive('subscript')"
|
|
938
|
+
(click)="onCommand('subscript', $event)"
|
|
939
|
+
></tiptap-button>
|
|
940
|
+
} @if (bubbleMenuConfig().highlight) {
|
|
941
|
+
<tiptap-button
|
|
942
|
+
icon="highlight"
|
|
943
|
+
title="Surbrillance"
|
|
944
|
+
[active]="isActive('highlight')"
|
|
945
|
+
(click)="onCommand('highlight', $event)"
|
|
946
|
+
></tiptap-button>
|
|
947
|
+
} @if (bubbleMenuConfig().separator && (bubbleMenuConfig().code ||
|
|
948
|
+
bubbleMenuConfig().link)) {
|
|
949
|
+
<div class="tiptap-separator"></div>
|
|
950
|
+
} @if (bubbleMenuConfig().code) {
|
|
951
|
+
<tiptap-button
|
|
952
|
+
icon="code"
|
|
953
|
+
title="Code"
|
|
954
|
+
[active]="isActive('code')"
|
|
955
|
+
(click)="onCommand('code', $event)"
|
|
956
|
+
></tiptap-button>
|
|
957
|
+
} @if (bubbleMenuConfig().link) {
|
|
958
|
+
<tiptap-button
|
|
959
|
+
icon="link"
|
|
960
|
+
title="Lien"
|
|
961
|
+
[active]="isActive('link')"
|
|
962
|
+
(click)="onCommand('link', $event)"
|
|
963
|
+
></tiptap-button>
|
|
964
|
+
}
|
|
965
|
+
</div>
|
|
976
966
|
` }]
|
|
977
967
|
}], ctorParameters: () => [], propDecorators: { menuRef: [{
|
|
978
968
|
type: ViewChild,
|
|
@@ -2779,22 +2769,10 @@ class TiptapCellBubbleMenuComponent {
|
|
|
2779
2769
|
selection.$headCell.pos;
|
|
2780
2770
|
const hasTextSelection = !selection.empty && !(selection instanceof CellSelection);
|
|
2781
2771
|
const isTableCell = ed.isActive("tableCell") || ed.isActive("tableHeader");
|
|
2782
|
-
console.log("CellBubbleMenu - updateMenu:", {
|
|
2783
|
-
hasCellSelection,
|
|
2784
|
-
isSingleCellSelected: this.isSingleCellSelected,
|
|
2785
|
-
hasTextSelection,
|
|
2786
|
-
isTableCell,
|
|
2787
|
-
selectionEmpty: selection.empty,
|
|
2788
|
-
selectionType: selection.constructor.name,
|
|
2789
|
-
from,
|
|
2790
|
-
to,
|
|
2791
|
-
isEditable: ed.isEditable,
|
|
2792
|
-
});
|
|
2793
2772
|
// Le menu de cellule ne s'affiche QUE pour les sélections de cellules multiples
|
|
2794
2773
|
// (pas pour la sélection de texte dans une cellule)
|
|
2795
2774
|
const shouldShow = hasCellSelection && isTableCell && ed.isEditable;
|
|
2796
2775
|
if (shouldShow) {
|
|
2797
|
-
console.log("CellBubbleMenu - Affichage du menu de cellules");
|
|
2798
2776
|
this.showTippy();
|
|
2799
2777
|
}
|
|
2800
2778
|
else {
|
|
@@ -4640,6 +4618,7 @@ class AngularTiptapEditorComponent {
|
|
|
4640
4618
|
this.enableSlashCommands = input(true);
|
|
4641
4619
|
this.slashCommandsConfig = input(undefined);
|
|
4642
4620
|
this.locale = input(undefined);
|
|
4621
|
+
this.autofocus = input(false);
|
|
4643
4622
|
// Nouveaux inputs pour les bubble menus
|
|
4644
4623
|
this.showBubbleMenu = input(true);
|
|
4645
4624
|
this.bubbleMenu = input(DEFAULT_BUBBLE_MENU_CONFIG);
|
|
@@ -4849,6 +4828,7 @@ class AngularTiptapEditorComponent {
|
|
|
4849
4828
|
extensions,
|
|
4850
4829
|
content: this.content(),
|
|
4851
4830
|
editable: this.editable(),
|
|
4831
|
+
autofocus: this.autofocus(),
|
|
4852
4832
|
onUpdate: ({ editor, transaction }) => {
|
|
4853
4833
|
const html = editor.getHTML();
|
|
4854
4834
|
this.contentChange.emit(html);
|
|
@@ -5027,92 +5007,92 @@ class AngularTiptapEditorComponent {
|
|
|
5027
5007
|
}
|
|
5028
5008
|
}
|
|
5029
5009
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AngularTiptapEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5030
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: AngularTiptapEditorComponent, isStandalone: true, selector: "angular-tiptap-editor", inputs: { 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 }, 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 }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showCharacterCount: { classPropertyName: "showCharacterCount", publicName: "showCharacterCount", 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 }, slashCommandsConfig: { classPropertyName: "slashCommandsConfig", publicName: "slashCommandsConfig", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", 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 }, imageUpload: { classPropertyName: "imageUpload", publicName: "imageUpload", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentChange: "contentChange", editorCreated: "editorCreated", editorUpdate: "editorUpdate", editorFocus: "editorFocus", editorBlur: "editorBlur" }, viewQueries: [{ propertyName: "editorElement", first: true, predicate: ["editorElement"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: `
|
|
5031
|
-
<div class="tiptap-editor">
|
|
5032
|
-
<!-- Toolbar -->
|
|
5033
|
-
@if (showToolbar() && editor()) {
|
|
5034
|
-
<tiptap-toolbar [editor]="editor()!" [config]="toolbarConfig()">
|
|
5035
|
-
<div image-upload class="image-upload-container">
|
|
5036
|
-
<tiptap-image-upload
|
|
5037
|
-
[config]="imageUploadConfig()"
|
|
5038
|
-
(imageSelected)="onImageUploaded($event)"
|
|
5039
|
-
(error)="onImageUploadError($event)"
|
|
5040
|
-
/>
|
|
5041
|
-
</div>
|
|
5042
|
-
</tiptap-toolbar>
|
|
5043
|
-
}
|
|
5044
|
-
|
|
5045
|
-
<!-- Contenu de l'éditeur -->
|
|
5046
|
-
<div
|
|
5047
|
-
#editorElement
|
|
5048
|
-
class="tiptap-content"
|
|
5049
|
-
[class.drag-over]="isDragOver()"
|
|
5050
|
-
(dragover)="onDragOver($event)"
|
|
5051
|
-
(drop)="onDrop($event)"
|
|
5052
|
-
(click)="onEditorClick($event)"
|
|
5053
|
-
></div>
|
|
5054
|
-
|
|
5055
|
-
<!-- Bubble Menu pour le texte -->
|
|
5056
|
-
@if (showBubbleMenu() && editor()) {
|
|
5057
|
-
<tiptap-bubble-menu
|
|
5058
|
-
[editor]="editor()!"
|
|
5059
|
-
[config]="bubbleMenuConfig()"
|
|
5060
|
-
[style.display]="editorFullyInitialized() ? 'block' : 'none'"
|
|
5061
|
-
></tiptap-bubble-menu>
|
|
5062
|
-
}
|
|
5063
|
-
|
|
5064
|
-
<!-- Bubble Menu pour les images -->
|
|
5065
|
-
@if (showImageBubbleMenu() && editor()) {
|
|
5066
|
-
<tiptap-image-bubble-menu
|
|
5067
|
-
[editor]="editor()!"
|
|
5068
|
-
[config]="imageBubbleMenuConfig()"
|
|
5069
|
-
[style.display]="editorFullyInitialized() ? 'block' : 'none'"
|
|
5070
|
-
></tiptap-image-bubble-menu>
|
|
5071
|
-
}
|
|
5072
|
-
|
|
5073
|
-
<!-- Slash Commands -->
|
|
5074
|
-
@if (enableSlashCommands() && editor()) {
|
|
5075
|
-
<tiptap-slash-commands
|
|
5076
|
-
[editor]="editor()!"
|
|
5077
|
-
[config]="slashCommandsConfigComputed()"
|
|
5078
|
-
[style.display]="editorFullyInitialized() ? 'block' : 'none'"
|
|
5079
|
-
(imageUploadRequested)="onSlashCommandImageUpload($event)"
|
|
5080
|
-
></tiptap-slash-commands>
|
|
5081
|
-
}
|
|
5082
|
-
|
|
5083
|
-
<!-- Table Menu -->
|
|
5084
|
-
@if (editor()) {
|
|
5085
|
-
<tiptap-table-bubble-menu
|
|
5086
|
-
[editor]="editor()!"
|
|
5087
|
-
[config]="tableBubbleMenuConfig()"
|
|
5088
|
-
[style.display]="editorFullyInitialized() ? 'block' : 'none'"
|
|
5089
|
-
></tiptap-table-bubble-menu>
|
|
5090
|
-
}
|
|
5091
|
-
|
|
5092
|
-
<!-- Cell Menu -->
|
|
5093
|
-
@if (editor()) {
|
|
5094
|
-
<tiptap-cell-bubble-menu
|
|
5095
|
-
[editor]="editor()!"
|
|
5096
|
-
[config]="cellBubbleMenuConfig()"
|
|
5097
|
-
[style.display]="editorFullyInitialized() ? 'block' : 'none'"
|
|
5098
|
-
></tiptap-cell-bubble-menu>
|
|
5099
|
-
}
|
|
5100
|
-
|
|
5101
|
-
<!-- Table Edit Button - Supprimé car remplacé par le menu bubble -->
|
|
5102
|
-
|
|
5103
|
-
<!-- Compteur de caractères -->
|
|
5104
|
-
@if (showCharacterCount()) {
|
|
5105
|
-
<div class="character-count">
|
|
5106
|
-
{{ characterCount() }}
|
|
5107
|
-
{{ i18nService.editor().character
|
|
5108
|
-
}}{{ characterCount() > 1 ? "s" : "" }}, {{ wordCount() }}
|
|
5109
|
-
{{ i18nService.editor().word }}{{ wordCount() > 1 ? "s" : "" }}
|
|
5110
|
-
@if (maxCharacters()) { /
|
|
5111
|
-
{{ maxCharacters() }}
|
|
5112
|
-
}
|
|
5113
|
-
</div>
|
|
5114
|
-
}
|
|
5115
|
-
</div>
|
|
5010
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: AngularTiptapEditorComponent, isStandalone: true, selector: "angular-tiptap-editor", inputs: { 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 }, 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 }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showCharacterCount: { classPropertyName: "showCharacterCount", publicName: "showCharacterCount", 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 }, slashCommandsConfig: { classPropertyName: "slashCommandsConfig", publicName: "slashCommandsConfig", 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 }, 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 }, imageUpload: { classPropertyName: "imageUpload", publicName: "imageUpload", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentChange: "contentChange", editorCreated: "editorCreated", editorUpdate: "editorUpdate", editorFocus: "editorFocus", editorBlur: "editorBlur" }, viewQueries: [{ propertyName: "editorElement", first: true, predicate: ["editorElement"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: `
|
|
5011
|
+
<div class="tiptap-editor">
|
|
5012
|
+
<!-- Toolbar -->
|
|
5013
|
+
@if (showToolbar() && editor()) {
|
|
5014
|
+
<tiptap-toolbar [editor]="editor()!" [config]="toolbarConfig()">
|
|
5015
|
+
<div image-upload class="image-upload-container">
|
|
5016
|
+
<tiptap-image-upload
|
|
5017
|
+
[config]="imageUploadConfig()"
|
|
5018
|
+
(imageSelected)="onImageUploaded($event)"
|
|
5019
|
+
(error)="onImageUploadError($event)"
|
|
5020
|
+
/>
|
|
5021
|
+
</div>
|
|
5022
|
+
</tiptap-toolbar>
|
|
5023
|
+
}
|
|
5024
|
+
|
|
5025
|
+
<!-- Contenu de l'éditeur -->
|
|
5026
|
+
<div
|
|
5027
|
+
#editorElement
|
|
5028
|
+
class="tiptap-content"
|
|
5029
|
+
[class.drag-over]="isDragOver()"
|
|
5030
|
+
(dragover)="onDragOver($event)"
|
|
5031
|
+
(drop)="onDrop($event)"
|
|
5032
|
+
(click)="onEditorClick($event)"
|
|
5033
|
+
></div>
|
|
5034
|
+
|
|
5035
|
+
<!-- Bubble Menu pour le texte -->
|
|
5036
|
+
@if (showBubbleMenu() && editor()) {
|
|
5037
|
+
<tiptap-bubble-menu
|
|
5038
|
+
[editor]="editor()!"
|
|
5039
|
+
[config]="bubbleMenuConfig()"
|
|
5040
|
+
[style.display]="editorFullyInitialized() ? 'block' : 'none'"
|
|
5041
|
+
></tiptap-bubble-menu>
|
|
5042
|
+
}
|
|
5043
|
+
|
|
5044
|
+
<!-- Bubble Menu pour les images -->
|
|
5045
|
+
@if (showImageBubbleMenu() && editor()) {
|
|
5046
|
+
<tiptap-image-bubble-menu
|
|
5047
|
+
[editor]="editor()!"
|
|
5048
|
+
[config]="imageBubbleMenuConfig()"
|
|
5049
|
+
[style.display]="editorFullyInitialized() ? 'block' : 'none'"
|
|
5050
|
+
></tiptap-image-bubble-menu>
|
|
5051
|
+
}
|
|
5052
|
+
|
|
5053
|
+
<!-- Slash Commands -->
|
|
5054
|
+
@if (enableSlashCommands() && editor()) {
|
|
5055
|
+
<tiptap-slash-commands
|
|
5056
|
+
[editor]="editor()!"
|
|
5057
|
+
[config]="slashCommandsConfigComputed()"
|
|
5058
|
+
[style.display]="editorFullyInitialized() ? 'block' : 'none'"
|
|
5059
|
+
(imageUploadRequested)="onSlashCommandImageUpload($event)"
|
|
5060
|
+
></tiptap-slash-commands>
|
|
5061
|
+
}
|
|
5062
|
+
|
|
5063
|
+
<!-- Table Menu -->
|
|
5064
|
+
@if (editor()) {
|
|
5065
|
+
<tiptap-table-bubble-menu
|
|
5066
|
+
[editor]="editor()!"
|
|
5067
|
+
[config]="tableBubbleMenuConfig()"
|
|
5068
|
+
[style.display]="editorFullyInitialized() ? 'block' : 'none'"
|
|
5069
|
+
></tiptap-table-bubble-menu>
|
|
5070
|
+
}
|
|
5071
|
+
|
|
5072
|
+
<!-- Cell Menu -->
|
|
5073
|
+
@if (editor()) {
|
|
5074
|
+
<tiptap-cell-bubble-menu
|
|
5075
|
+
[editor]="editor()!"
|
|
5076
|
+
[config]="cellBubbleMenuConfig()"
|
|
5077
|
+
[style.display]="editorFullyInitialized() ? 'block' : 'none'"
|
|
5078
|
+
></tiptap-cell-bubble-menu>
|
|
5079
|
+
}
|
|
5080
|
+
|
|
5081
|
+
<!-- Table Edit Button - Supprimé car remplacé par le menu bubble -->
|
|
5082
|
+
|
|
5083
|
+
<!-- Compteur de caractères -->
|
|
5084
|
+
@if (showCharacterCount()) {
|
|
5085
|
+
<div class="character-count">
|
|
5086
|
+
{{ characterCount() }}
|
|
5087
|
+
{{ i18nService.editor().character
|
|
5088
|
+
}}{{ characterCount() > 1 ? "s" : "" }}, {{ wordCount() }}
|
|
5089
|
+
{{ i18nService.editor().word }}{{ wordCount() > 1 ? "s" : "" }}
|
|
5090
|
+
@if (maxCharacters()) { /
|
|
5091
|
+
{{ maxCharacters() }}
|
|
5092
|
+
}
|
|
5093
|
+
</div>
|
|
5094
|
+
}
|
|
5095
|
+
</div>
|
|
5116
5096
|
`, isInline: true, styles: [".tiptap-editor{border:2px solid #e2e8f0;border-radius:8px;background:#fff;overflow:hidden;transition:border-color .2s ease}.tiptap-editor:focus-within{border-color:#3182ce}.tiptap-content{padding:16px;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}.tiptap-content.drag-over{background:#f0f8ff;border:2px dashed #3182ce}.character-count{padding:8px 16px;font-size:12px;color:#718096;text-align:right;border-top:1px solid #e2e8f0;background:#f8f9fa}.image-upload-container{position:relative;display:inline-block}:host ::ng-deep .ProseMirror{outline:none;line-height:1.6;color:#2d3748;min-height:100%;height:100%;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep .ProseMirror h1{font-size:2em;font-weight:700;margin-top:0;margin-bottom:.5em}:host ::ng-deep .ProseMirror h2{font-size:1.5em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror h3{font-size:1.25em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror p{margin:.5em 0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:2em;margin:.5em 0}:host ::ng-deep .ProseMirror blockquote{border-left:4px solid #e2e8f0;margin:1em 0;font-style:italic;background:#f8f9fa;padding:.5em 1em;border-radius:0 4px 4px 0}:host ::ng-deep .ProseMirror code{background:#f1f5f9;padding:.2em .4em;border-radius:3px;font-family:Monaco,Consolas,monospace;font-size:.9em}:host ::ng-deep .ProseMirror pre{background:#1a202c;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;margin:1em 0}:host ::ng-deep .ProseMirror pre code{background:none;color:inherit;padding:0}:host ::ng-deep .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:#a0aec0;pointer-events:none;float:left;height:0}:host ::ng-deep .ProseMirror[contenteditable=false]{pointer-events:none}:host ::ng-deep .ProseMirror[contenteditable=false] img{cursor:default;pointer-events:none}:host ::ng-deep .ProseMirror[contenteditable=false] img:hover{transform:none;box-shadow:0 2px 8px #0000001a}:host ::ng-deep .ProseMirror[contenteditable=false] img.ProseMirror-selectednode{outline:none}:host ::ng-deep .ProseMirror img{position:relative;display:inline-block;max-width:100%;height:auto;cursor:pointer;transition:all .2s ease;border:2px solid transparent;border-radius:8px}:host ::ng-deep .ProseMirror img:hover{border-color:#e2e8f0;box-shadow:0 2px 4px #0000001a}:host ::ng-deep .ProseMirror img.ProseMirror-selectednode{border-color:#3182ce;box-shadow:0 0 0 3px #3182ce1a;transition:all .2s ease}:host ::ng-deep .ProseMirror .tiptap-image{max-width:100%;height:auto;border-radius:16px;box-shadow:0 4px 20px #00000014;margin:.5em 0;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:block;filter:brightness(1) contrast(1)}:host ::ng-deep .ProseMirror .tiptap-image:hover{box-shadow:0 8px 30px #0000001f;filter:brightness(1.02) contrast(1.02)}:host ::ng-deep .ProseMirror .tiptap-image.ProseMirror-selectednode{outline:2px solid #6366f1;outline-offset:2px;border-radius:16px;box-shadow:0 0 0 4px #6366f11a}:host ::ng-deep .image-container{margin:.5em 0;text-align:center;border-radius:16px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .image-container.image-align-left{text-align:left}:host ::ng-deep .image-container.image-align-center{text-align:center}:host ::ng-deep .image-container.image-align-right{text-align:right}:host ::ng-deep .image-container img{display:inline-block;max-width:100%;height:auto;border-radius:16px}:host ::ng-deep .resizable-image-container{position:relative;display:inline-block;margin:.5em 0}:host ::ng-deep .resize-controls{position:absolute;inset:0;pointer-events:none;z-index:1000}:host ::ng-deep .resize-handle{position:absolute;width:12px;height:12px;background:#3b82f6;border:2px solid white;border-radius:50%;pointer-events:all;cursor:pointer;z-index:1001;transition:all .15s ease;box-shadow:0 2px 6px #0003}:host ::ng-deep .resize-handle:hover{background:#2563eb;box-shadow:0 3px 8px #0000004d}:host ::ng-deep .resize-handle:active{background:#1d4ed8}:host ::ng-deep .resize-handle-n:hover,:host ::ng-deep .resize-handle-s:hover{transform:translate(-50%) scale(1.2)}:host ::ng-deep .resize-handle-w:hover,:host ::ng-deep .resize-handle-e:hover{transform:translateY(-50%) scale(1.2)}:host ::ng-deep .resize-handle-n:active,:host ::ng-deep .resize-handle-s:active{transform:translate(-50%) scale(.9)}:host ::ng-deep .resize-handle-w:active,:host ::ng-deep .resize-handle-e:active{transform:translateY(-50%) scale(.9)}:host ::ng-deep .resize-handle-nw:hover,:host ::ng-deep .resize-handle-ne:hover,:host ::ng-deep .resize-handle-sw:hover,:host ::ng-deep .resize-handle-se:hover{transform:scale(1.2)}:host ::ng-deep .resize-handle-nw:active,:host ::ng-deep .resize-handle-ne:active,:host ::ng-deep .resize-handle-sw:active,:host ::ng-deep .resize-handle-se:active{transform:scale(.9)}:host ::ng-deep .resize-handle-nw{top:0;left:-6px;cursor:nw-resize}:host ::ng-deep .resize-handle-n{top:0;left:50%;transform:translate(-50%);cursor:n-resize}:host ::ng-deep .resize-handle-ne{top:0;right:-6px;cursor:ne-resize}:host ::ng-deep .resize-handle-w{top:50%;left:-6px;transform:translateY(-50%);cursor:w-resize}:host ::ng-deep .resize-handle-e{top:50%;right:-6px;transform:translateY(-50%);cursor:e-resize}:host ::ng-deep .resize-handle-sw{bottom:0;left:-6px;cursor:sw-resize}:host ::ng-deep .resize-handle-s{bottom:0;left:50%;transform:translate(-50%);cursor:s-resize}:host ::ng-deep .resize-handle-se{bottom:0;right:-6px;cursor:se-resize}:host ::ng-deep body.resizing{-webkit-user-select:none;user-select:none;cursor:crosshair}:host ::ng-deep body.resizing .ProseMirror{pointer-events:none}:host ::ng-deep body.resizing .ProseMirror .tiptap-image{pointer-events:none}:host ::ng-deep .image-size-info{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:2px 6px;border-radius:3px;font-size:11px;white-space:nowrap;opacity:0;transition:opacity .2s ease}:host ::ng-deep .image-container:hover .image-size-info{opacity:1}:host ::ng-deep .ProseMirror table{border-collapse:separate;border-spacing:0;margin:0;table-layout:fixed;width:100%;border-radius:8px;overflow:hidden}:host ::ng-deep .ProseMirror table td,:host ::ng-deep .ProseMirror table th{border:none;border-right:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;box-sizing:border-box;min-width:1em;padding:8px 12px;position:relative;vertical-align:top;background:#fff}:host ::ng-deep .ProseMirror table td:first-child,:host ::ng-deep .ProseMirror table th:first-child{border-left:1px solid #e2e8f0}:host ::ng-deep .ProseMirror table tr:first-child td,:host ::ng-deep .ProseMirror table tr:first-child th{border-top:1px solid #e2e8f0}: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:#f8f9fa;font-weight:600;color:#374151}:host ::ng-deep .ProseMirror table .selectedCell:after{background:#c8c8ff66;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:#6366f1;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:#4f46e5}: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 .selectedCell{background-color:#6366f11a}:host ::ng-deep .ProseMirror table th{background-color:#f8f9fa;font-weight:600;color:#374151;text-align:left}:host ::ng-deep .ProseMirror table tbody tr:nth-child(2n){background-color:#fafbfc}:host ::ng-deep .ProseMirror table tbody tr:hover{background-color:#f1f5f9}\n"], dependencies: [{ kind: "component", type: TiptapToolbarComponent, selector: "tiptap-toolbar", inputs: ["editor", "config"], outputs: ["imageUploaded", "imageError"] }, { kind: "component", type: TiptapImageUploadComponent, selector: "tiptap-image-upload", inputs: ["config"], outputs: ["imageSelected", "error"] }, { kind: "component", type: TiptapBubbleMenuComponent, selector: "tiptap-bubble-menu", inputs: ["editor", "config"] }, { kind: "component", type: TiptapImageBubbleMenuComponent, selector: "tiptap-image-bubble-menu", inputs: ["editor", "config"] }, { kind: "component", type: TiptapTableBubbleMenuComponent, selector: "tiptap-table-bubble-menu", inputs: ["editor", "config"] }, { kind: "component", type: TiptapCellBubbleMenuComponent, selector: "tiptap-cell-bubble-menu", inputs: ["editor", "config"] }, { kind: "component", type: TiptapSlashCommandsComponent, selector: "tiptap-slash-commands", inputs: ["editor", "config"], outputs: ["imageUploadRequested"] }] }); }
|
|
5117
5097
|
}
|
|
5118
5098
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AngularTiptapEditorComponent, decorators: [{
|
|
@@ -5125,92 +5105,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
|
|
|
5125
5105
|
TiptapTableBubbleMenuComponent,
|
|
5126
5106
|
TiptapCellBubbleMenuComponent,
|
|
5127
5107
|
TiptapSlashCommandsComponent,
|
|
5128
|
-
], template: `
|
|
5129
|
-
<div class="tiptap-editor">
|
|
5130
|
-
<!-- Toolbar -->
|
|
5131
|
-
@if (showToolbar() && editor()) {
|
|
5132
|
-
<tiptap-toolbar [editor]="editor()!" [config]="toolbarConfig()">
|
|
5133
|
-
<div image-upload class="image-upload-container">
|
|
5134
|
-
<tiptap-image-upload
|
|
5135
|
-
[config]="imageUploadConfig()"
|
|
5136
|
-
(imageSelected)="onImageUploaded($event)"
|
|
5137
|
-
(error)="onImageUploadError($event)"
|
|
5138
|
-
/>
|
|
5139
|
-
</div>
|
|
5140
|
-
</tiptap-toolbar>
|
|
5141
|
-
}
|
|
5142
|
-
|
|
5143
|
-
<!-- Contenu de l'éditeur -->
|
|
5144
|
-
<div
|
|
5145
|
-
#editorElement
|
|
5146
|
-
class="tiptap-content"
|
|
5147
|
-
[class.drag-over]="isDragOver()"
|
|
5148
|
-
(dragover)="onDragOver($event)"
|
|
5149
|
-
(drop)="onDrop($event)"
|
|
5150
|
-
(click)="onEditorClick($event)"
|
|
5151
|
-
></div>
|
|
5152
|
-
|
|
5153
|
-
<!-- Bubble Menu pour le texte -->
|
|
5154
|
-
@if (showBubbleMenu() && editor()) {
|
|
5155
|
-
<tiptap-bubble-menu
|
|
5156
|
-
[editor]="editor()!"
|
|
5157
|
-
[config]="bubbleMenuConfig()"
|
|
5158
|
-
[style.display]="editorFullyInitialized() ? 'block' : 'none'"
|
|
5159
|
-
></tiptap-bubble-menu>
|
|
5160
|
-
}
|
|
5161
|
-
|
|
5162
|
-
<!-- Bubble Menu pour les images -->
|
|
5163
|
-
@if (showImageBubbleMenu() && editor()) {
|
|
5164
|
-
<tiptap-image-bubble-menu
|
|
5165
|
-
[editor]="editor()!"
|
|
5166
|
-
[config]="imageBubbleMenuConfig()"
|
|
5167
|
-
[style.display]="editorFullyInitialized() ? 'block' : 'none'"
|
|
5168
|
-
></tiptap-image-bubble-menu>
|
|
5169
|
-
}
|
|
5170
|
-
|
|
5171
|
-
<!-- Slash Commands -->
|
|
5172
|
-
@if (enableSlashCommands() && editor()) {
|
|
5173
|
-
<tiptap-slash-commands
|
|
5174
|
-
[editor]="editor()!"
|
|
5175
|
-
[config]="slashCommandsConfigComputed()"
|
|
5176
|
-
[style.display]="editorFullyInitialized() ? 'block' : 'none'"
|
|
5177
|
-
(imageUploadRequested)="onSlashCommandImageUpload($event)"
|
|
5178
|
-
></tiptap-slash-commands>
|
|
5179
|
-
}
|
|
5180
|
-
|
|
5181
|
-
<!-- Table Menu -->
|
|
5182
|
-
@if (editor()) {
|
|
5183
|
-
<tiptap-table-bubble-menu
|
|
5184
|
-
[editor]="editor()!"
|
|
5185
|
-
[config]="tableBubbleMenuConfig()"
|
|
5186
|
-
[style.display]="editorFullyInitialized() ? 'block' : 'none'"
|
|
5187
|
-
></tiptap-table-bubble-menu>
|
|
5188
|
-
}
|
|
5189
|
-
|
|
5190
|
-
<!-- Cell Menu -->
|
|
5191
|
-
@if (editor()) {
|
|
5192
|
-
<tiptap-cell-bubble-menu
|
|
5193
|
-
[editor]="editor()!"
|
|
5194
|
-
[config]="cellBubbleMenuConfig()"
|
|
5195
|
-
[style.display]="editorFullyInitialized() ? 'block' : 'none'"
|
|
5196
|
-
></tiptap-cell-bubble-menu>
|
|
5197
|
-
}
|
|
5198
|
-
|
|
5199
|
-
<!-- Table Edit Button - Supprimé car remplacé par le menu bubble -->
|
|
5200
|
-
|
|
5201
|
-
<!-- Compteur de caractères -->
|
|
5202
|
-
@if (showCharacterCount()) {
|
|
5203
|
-
<div class="character-count">
|
|
5204
|
-
{{ characterCount() }}
|
|
5205
|
-
{{ i18nService.editor().character
|
|
5206
|
-
}}{{ characterCount() > 1 ? "s" : "" }}, {{ wordCount() }}
|
|
5207
|
-
{{ i18nService.editor().word }}{{ wordCount() > 1 ? "s" : "" }}
|
|
5208
|
-
@if (maxCharacters()) { /
|
|
5209
|
-
{{ maxCharacters() }}
|
|
5210
|
-
}
|
|
5211
|
-
</div>
|
|
5212
|
-
}
|
|
5213
|
-
</div>
|
|
5108
|
+
], template: `
|
|
5109
|
+
<div class="tiptap-editor">
|
|
5110
|
+
<!-- Toolbar -->
|
|
5111
|
+
@if (showToolbar() && editor()) {
|
|
5112
|
+
<tiptap-toolbar [editor]="editor()!" [config]="toolbarConfig()">
|
|
5113
|
+
<div image-upload class="image-upload-container">
|
|
5114
|
+
<tiptap-image-upload
|
|
5115
|
+
[config]="imageUploadConfig()"
|
|
5116
|
+
(imageSelected)="onImageUploaded($event)"
|
|
5117
|
+
(error)="onImageUploadError($event)"
|
|
5118
|
+
/>
|
|
5119
|
+
</div>
|
|
5120
|
+
</tiptap-toolbar>
|
|
5121
|
+
}
|
|
5122
|
+
|
|
5123
|
+
<!-- Contenu de l'éditeur -->
|
|
5124
|
+
<div
|
|
5125
|
+
#editorElement
|
|
5126
|
+
class="tiptap-content"
|
|
5127
|
+
[class.drag-over]="isDragOver()"
|
|
5128
|
+
(dragover)="onDragOver($event)"
|
|
5129
|
+
(drop)="onDrop($event)"
|
|
5130
|
+
(click)="onEditorClick($event)"
|
|
5131
|
+
></div>
|
|
5132
|
+
|
|
5133
|
+
<!-- Bubble Menu pour le texte -->
|
|
5134
|
+
@if (showBubbleMenu() && editor()) {
|
|
5135
|
+
<tiptap-bubble-menu
|
|
5136
|
+
[editor]="editor()!"
|
|
5137
|
+
[config]="bubbleMenuConfig()"
|
|
5138
|
+
[style.display]="editorFullyInitialized() ? 'block' : 'none'"
|
|
5139
|
+
></tiptap-bubble-menu>
|
|
5140
|
+
}
|
|
5141
|
+
|
|
5142
|
+
<!-- Bubble Menu pour les images -->
|
|
5143
|
+
@if (showImageBubbleMenu() && editor()) {
|
|
5144
|
+
<tiptap-image-bubble-menu
|
|
5145
|
+
[editor]="editor()!"
|
|
5146
|
+
[config]="imageBubbleMenuConfig()"
|
|
5147
|
+
[style.display]="editorFullyInitialized() ? 'block' : 'none'"
|
|
5148
|
+
></tiptap-image-bubble-menu>
|
|
5149
|
+
}
|
|
5150
|
+
|
|
5151
|
+
<!-- Slash Commands -->
|
|
5152
|
+
@if (enableSlashCommands() && editor()) {
|
|
5153
|
+
<tiptap-slash-commands
|
|
5154
|
+
[editor]="editor()!"
|
|
5155
|
+
[config]="slashCommandsConfigComputed()"
|
|
5156
|
+
[style.display]="editorFullyInitialized() ? 'block' : 'none'"
|
|
5157
|
+
(imageUploadRequested)="onSlashCommandImageUpload($event)"
|
|
5158
|
+
></tiptap-slash-commands>
|
|
5159
|
+
}
|
|
5160
|
+
|
|
5161
|
+
<!-- Table Menu -->
|
|
5162
|
+
@if (editor()) {
|
|
5163
|
+
<tiptap-table-bubble-menu
|
|
5164
|
+
[editor]="editor()!"
|
|
5165
|
+
[config]="tableBubbleMenuConfig()"
|
|
5166
|
+
[style.display]="editorFullyInitialized() ? 'block' : 'none'"
|
|
5167
|
+
></tiptap-table-bubble-menu>
|
|
5168
|
+
}
|
|
5169
|
+
|
|
5170
|
+
<!-- Cell Menu -->
|
|
5171
|
+
@if (editor()) {
|
|
5172
|
+
<tiptap-cell-bubble-menu
|
|
5173
|
+
[editor]="editor()!"
|
|
5174
|
+
[config]="cellBubbleMenuConfig()"
|
|
5175
|
+
[style.display]="editorFullyInitialized() ? 'block' : 'none'"
|
|
5176
|
+
></tiptap-cell-bubble-menu>
|
|
5177
|
+
}
|
|
5178
|
+
|
|
5179
|
+
<!-- Table Edit Button - Supprimé car remplacé par le menu bubble -->
|
|
5180
|
+
|
|
5181
|
+
<!-- Compteur de caractères -->
|
|
5182
|
+
@if (showCharacterCount()) {
|
|
5183
|
+
<div class="character-count">
|
|
5184
|
+
{{ characterCount() }}
|
|
5185
|
+
{{ i18nService.editor().character
|
|
5186
|
+
}}{{ characterCount() > 1 ? "s" : "" }}, {{ wordCount() }}
|
|
5187
|
+
{{ i18nService.editor().word }}{{ wordCount() > 1 ? "s" : "" }}
|
|
5188
|
+
@if (maxCharacters()) { /
|
|
5189
|
+
{{ maxCharacters() }}
|
|
5190
|
+
}
|
|
5191
|
+
</div>
|
|
5192
|
+
}
|
|
5193
|
+
</div>
|
|
5214
5194
|
`, styles: [".tiptap-editor{border:2px solid #e2e8f0;border-radius:8px;background:#fff;overflow:hidden;transition:border-color .2s ease}.tiptap-editor:focus-within{border-color:#3182ce}.tiptap-content{padding:16px;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}.tiptap-content.drag-over{background:#f0f8ff;border:2px dashed #3182ce}.character-count{padding:8px 16px;font-size:12px;color:#718096;text-align:right;border-top:1px solid #e2e8f0;background:#f8f9fa}.image-upload-container{position:relative;display:inline-block}:host ::ng-deep .ProseMirror{outline:none;line-height:1.6;color:#2d3748;min-height:100%;height:100%;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep .ProseMirror h1{font-size:2em;font-weight:700;margin-top:0;margin-bottom:.5em}:host ::ng-deep .ProseMirror h2{font-size:1.5em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror h3{font-size:1.25em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror p{margin:.5em 0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:2em;margin:.5em 0}:host ::ng-deep .ProseMirror blockquote{border-left:4px solid #e2e8f0;margin:1em 0;font-style:italic;background:#f8f9fa;padding:.5em 1em;border-radius:0 4px 4px 0}:host ::ng-deep .ProseMirror code{background:#f1f5f9;padding:.2em .4em;border-radius:3px;font-family:Monaco,Consolas,monospace;font-size:.9em}:host ::ng-deep .ProseMirror pre{background:#1a202c;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;margin:1em 0}:host ::ng-deep .ProseMirror pre code{background:none;color:inherit;padding:0}:host ::ng-deep .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:#a0aec0;pointer-events:none;float:left;height:0}:host ::ng-deep .ProseMirror[contenteditable=false]{pointer-events:none}:host ::ng-deep .ProseMirror[contenteditable=false] img{cursor:default;pointer-events:none}:host ::ng-deep .ProseMirror[contenteditable=false] img:hover{transform:none;box-shadow:0 2px 8px #0000001a}:host ::ng-deep .ProseMirror[contenteditable=false] img.ProseMirror-selectednode{outline:none}:host ::ng-deep .ProseMirror img{position:relative;display:inline-block;max-width:100%;height:auto;cursor:pointer;transition:all .2s ease;border:2px solid transparent;border-radius:8px}:host ::ng-deep .ProseMirror img:hover{border-color:#e2e8f0;box-shadow:0 2px 4px #0000001a}:host ::ng-deep .ProseMirror img.ProseMirror-selectednode{border-color:#3182ce;box-shadow:0 0 0 3px #3182ce1a;transition:all .2s ease}:host ::ng-deep .ProseMirror .tiptap-image{max-width:100%;height:auto;border-radius:16px;box-shadow:0 4px 20px #00000014;margin:.5em 0;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:block;filter:brightness(1) contrast(1)}:host ::ng-deep .ProseMirror .tiptap-image:hover{box-shadow:0 8px 30px #0000001f;filter:brightness(1.02) contrast(1.02)}:host ::ng-deep .ProseMirror .tiptap-image.ProseMirror-selectednode{outline:2px solid #6366f1;outline-offset:2px;border-radius:16px;box-shadow:0 0 0 4px #6366f11a}:host ::ng-deep .image-container{margin:.5em 0;text-align:center;border-radius:16px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .image-container.image-align-left{text-align:left}:host ::ng-deep .image-container.image-align-center{text-align:center}:host ::ng-deep .image-container.image-align-right{text-align:right}:host ::ng-deep .image-container img{display:inline-block;max-width:100%;height:auto;border-radius:16px}:host ::ng-deep .resizable-image-container{position:relative;display:inline-block;margin:.5em 0}:host ::ng-deep .resize-controls{position:absolute;inset:0;pointer-events:none;z-index:1000}:host ::ng-deep .resize-handle{position:absolute;width:12px;height:12px;background:#3b82f6;border:2px solid white;border-radius:50%;pointer-events:all;cursor:pointer;z-index:1001;transition:all .15s ease;box-shadow:0 2px 6px #0003}:host ::ng-deep .resize-handle:hover{background:#2563eb;box-shadow:0 3px 8px #0000004d}:host ::ng-deep .resize-handle:active{background:#1d4ed8}:host ::ng-deep .resize-handle-n:hover,:host ::ng-deep .resize-handle-s:hover{transform:translate(-50%) scale(1.2)}:host ::ng-deep .resize-handle-w:hover,:host ::ng-deep .resize-handle-e:hover{transform:translateY(-50%) scale(1.2)}:host ::ng-deep .resize-handle-n:active,:host ::ng-deep .resize-handle-s:active{transform:translate(-50%) scale(.9)}:host ::ng-deep .resize-handle-w:active,:host ::ng-deep .resize-handle-e:active{transform:translateY(-50%) scale(.9)}:host ::ng-deep .resize-handle-nw:hover,:host ::ng-deep .resize-handle-ne:hover,:host ::ng-deep .resize-handle-sw:hover,:host ::ng-deep .resize-handle-se:hover{transform:scale(1.2)}:host ::ng-deep .resize-handle-nw:active,:host ::ng-deep .resize-handle-ne:active,:host ::ng-deep .resize-handle-sw:active,:host ::ng-deep .resize-handle-se:active{transform:scale(.9)}:host ::ng-deep .resize-handle-nw{top:0;left:-6px;cursor:nw-resize}:host ::ng-deep .resize-handle-n{top:0;left:50%;transform:translate(-50%);cursor:n-resize}:host ::ng-deep .resize-handle-ne{top:0;right:-6px;cursor:ne-resize}:host ::ng-deep .resize-handle-w{top:50%;left:-6px;transform:translateY(-50%);cursor:w-resize}:host ::ng-deep .resize-handle-e{top:50%;right:-6px;transform:translateY(-50%);cursor:e-resize}:host ::ng-deep .resize-handle-sw{bottom:0;left:-6px;cursor:sw-resize}:host ::ng-deep .resize-handle-s{bottom:0;left:50%;transform:translate(-50%);cursor:s-resize}:host ::ng-deep .resize-handle-se{bottom:0;right:-6px;cursor:se-resize}:host ::ng-deep body.resizing{-webkit-user-select:none;user-select:none;cursor:crosshair}:host ::ng-deep body.resizing .ProseMirror{pointer-events:none}:host ::ng-deep body.resizing .ProseMirror .tiptap-image{pointer-events:none}:host ::ng-deep .image-size-info{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:2px 6px;border-radius:3px;font-size:11px;white-space:nowrap;opacity:0;transition:opacity .2s ease}:host ::ng-deep .image-container:hover .image-size-info{opacity:1}:host ::ng-deep .ProseMirror table{border-collapse:separate;border-spacing:0;margin:0;table-layout:fixed;width:100%;border-radius:8px;overflow:hidden}:host ::ng-deep .ProseMirror table td,:host ::ng-deep .ProseMirror table th{border:none;border-right:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;box-sizing:border-box;min-width:1em;padding:8px 12px;position:relative;vertical-align:top;background:#fff}:host ::ng-deep .ProseMirror table td:first-child,:host ::ng-deep .ProseMirror table th:first-child{border-left:1px solid #e2e8f0}:host ::ng-deep .ProseMirror table tr:first-child td,:host ::ng-deep .ProseMirror table tr:first-child th{border-top:1px solid #e2e8f0}: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:#f8f9fa;font-weight:600;color:#374151}:host ::ng-deep .ProseMirror table .selectedCell:after{background:#c8c8ff66;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:#6366f1;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:#4f46e5}: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 .selectedCell{background-color:#6366f11a}:host ::ng-deep .ProseMirror table th{background-color:#f8f9fa;font-weight:600;color:#374151;text-align:left}:host ::ng-deep .ProseMirror table tbody tr:nth-child(2n){background-color:#fafbfc}:host ::ng-deep .ProseMirror table tbody tr:hover{background-color:#f1f5f9}\n"] }]
|
|
5215
5195
|
}], ctorParameters: () => [] });
|
|
5216
5196
|
|