@leanix/components 0.4.703 → 0.4.705
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/fesm2022/leanix-components.mjs +48 -16
- package/fesm2022/leanix-components.mjs.map +1 -1
- package/lib/forms-ui/components/rich-text-editor/components/rich-text-editor/rich-text-editor.component.d.ts +6 -1
- package/lib/forms-ui/components/rich-text-editor/components/rich-text-editor-toolbar/rich-text-editor-toolbar.component.d.ts +6 -6
- package/package.json +1 -1
|
@@ -10470,37 +10470,42 @@ const ensureHttpProtocol = (url) => {
|
|
|
10470
10470
|
class RichTextEditorToolbarComponent {
|
|
10471
10471
|
constructor() {
|
|
10472
10472
|
this.NAME = 'RichTextEditorToolbarComponent';
|
|
10473
|
+
this.isVisible = input(true);
|
|
10473
10474
|
this.headingLevels = [];
|
|
10474
|
-
this.
|
|
10475
|
-
this.
|
|
10476
|
-
|
|
10477
|
-
this.
|
|
10478
|
-
};
|
|
10475
|
+
this.isLinkModalOpen = signal(false);
|
|
10476
|
+
this.isToolbarVisible = computed(() => {
|
|
10477
|
+
const visibility = this.isVisible();
|
|
10478
|
+
return visibility || this.isLinkModalOpen();
|
|
10479
|
+
});
|
|
10480
|
+
this.isLinkModalOpenSignal = this.isLinkModalOpen.asReadonly();
|
|
10479
10481
|
this.update = (event) => {
|
|
10480
|
-
|
|
10481
|
-
|
|
10482
|
+
const linkMeta = event.transaction.getMeta(linkPluginKey);
|
|
10483
|
+
if (linkMeta) {
|
|
10484
|
+
const isOpen = linkPluginKey.getState(event.editor.state).open;
|
|
10485
|
+
this.isLinkModalOpen.set(isOpen);
|
|
10486
|
+
// Focus editor when modal closes
|
|
10487
|
+
if (!isOpen) {
|
|
10488
|
+
this.editor.commands.focus();
|
|
10489
|
+
}
|
|
10482
10490
|
}
|
|
10483
10491
|
};
|
|
10484
10492
|
}
|
|
10485
10493
|
ngOnInit() {
|
|
10486
10494
|
this.headingLevels = this.editor.extensionManager.extensions.find((ext) => ext.name === 'heading')?.options?.levels || [];
|
|
10487
|
-
this.editor.on('selectionUpdate', this.detectChanges);
|
|
10488
10495
|
this.editor.on('transaction', this.update);
|
|
10489
10496
|
}
|
|
10490
10497
|
ngOnDestroy() {
|
|
10491
|
-
this.editor.off('selectionUpdate', this.detectChanges);
|
|
10492
10498
|
this.editor.off('transaction', this.update);
|
|
10493
10499
|
}
|
|
10494
10500
|
insertTable() {
|
|
10495
10501
|
this.editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: false }).track('INSERT_TABLE').run();
|
|
10496
10502
|
}
|
|
10497
10503
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RichTextEditorToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10498
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: RichTextEditorToolbarComponent, isStandalone: true, selector: "lx-rich-text-editor-toolbar", inputs: { editor: "editor" }, ngImport: i0, template: "<div class=\"toolbar\">\n <div class=\"toolbarItemGroup\">\n @if ('heading' | lxExtensionEnabled: editor) {\n <lx-options-dropdown>\n <button\n class=\"toolbarItem toolbar-heading\"\n lxKeyboardActionSource\n lx-button\n [lxTooltip]=\"NAME + '.textStyles' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [square]=\"false\"\n [pressed]=\"editor.isActive('heading') || editor.isActive('paragraph')\"\n endIcon=\"fa-angle-down\"\n [disabled]=\"!editor.isActive('heading') && !editor.isActive('paragraph')\"\n >\n {{ editor.isActive('heading') ? `${NAME + '.heading' | translate} ${editor.getAttributes('heading')['level']}` : `${NAME + '.paragraph' | translate}` }}\n </button>\n\n @for (level of headingLevels; track headingLevels) {\n <lx-option\n (select)=\"editor.chain().setHeading({ level }).focus().run()\"\n [hasSelectedState]=\"editor.isActive('heading', { level })\"\n [selected]=\"editor.isActive('heading', { level })\"\n >\n @if (!editor.isActive('heading', { level })) {\n <i class=\"far fa-heading dropdown-icon\"></i>\n }\n <span>{{ NAME + '.headingOption' | translate }} {{ level }}</span>\n </lx-option>\n }\n\n <lx-option\n (select)=\"this.editor.chain().setParagraph().focus().run()\"\n [hasSelectedState]=\"editor.isActive('paragraph')\"\n [selected]=\"editor.isActive('paragraph')\"\n >\n @if (!editor.isActive('paragraph')) {\n <i class=\"far fa-paragraph dropdown-icon\"></i>\n }\n <span>{{ NAME + '.paragraphOption' | translate }}</span>\n </lx-option>\n </lx-options-dropdown>\n }\n\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('bold' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.bold' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.bold' | translate\"\n [disabled]=\"editor.isActive('header')\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleBold().focus().run()\"\n [pressed]=\"editor.isActive('bold')\"\n icon=\"fa-bold\"\n ></button>\n }\n\n @if ('italic' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.italic' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.italic' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleItalic().focus().run()\"\n [pressed]=\"editor.isActive('italic')\"\n icon=\"fa-italic\"\n ></button>\n }\n\n @if ('underline' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.underline' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.underline' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleUnderline().focus().run()\"\n [pressed]=\"editor.isActive('underline')\"\n icon=\"fa-underline\"\n ></button>\n }\n\n @if ('strike' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.strikethrough' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.strikethrough' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleStrike().focus().run()\"\n [pressed]=\"editor.isActive('strike')\"\n icon=\"fa-strikethrough\"\n ></button>\n }\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('bulletList' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.bulletList' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.bulletList' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleBulletList().run()\"\n [pressed]=\"editor.isActive('listItem')\"\n icon=\"fa-list\"\n ></button>\n }\n\n @if ('orderedList' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.numberedList' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.numberedList' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleOrderedList().run()\"\n [pressed]=\"editor.isActive('orderedList')\"\n icon=\"fa-list-ol\"\n ></button>\n }\n\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('textAlign' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignLeft' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignLeft' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('left').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'left' })\"\n icon=\"fa-align-left\"\n ></button>\n\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignCenter' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignCenter' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('center').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'center' })\"\n icon=\"fa-align-center\"\n ></button>\n\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignRight' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignRight' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('right').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'right' })\"\n icon=\"fa-align-right\"\n ></button>\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignBlock' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignBlock' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'justify' })\"\n icon=\"fa-align-justify\"\n ></button>\n }\n\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('link' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.link' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.link' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().openLinkModal().run()\"\n [pressed]=\"editor.isActive('link')\"\n icon=\"fa-link\"\n ></button>\n <span class=\"separator\"></span>\n }\n </div>\n\n @let tableEnabled = 'table' | lxExtensionEnabled: editor;\n @let codeEnabled = 'codeBlock' | lxExtensionEnabled: editor;\n\n @if (tableEnabled || codeEnabled) {\n <div class=\"toolbarItemGroup\">\n @if (codeEnabled) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.code' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.code' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().setCodeBlock().run()\"\n [pressed]=\"editor.isActive('codeBlock')\"\n icon=\"fa-code\"\n ></button>\n }\n\n @if ('lxDiagram' | lxExtensionEnabled: editor) {\n <ng-content select=\".diagram-btn\" />\n }\n\n @if (tableEnabled) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.insertTable' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.insertTable' | translate\"\n [square]=\"true\"\n (click)=\"insertTable()\"\n [pressed]=\"editor.isActive('table')\"\n icon=\"fa-table\"\n [disabled]=\"editor.isActive('table')\"\n ></button>\n }\n\n <span class=\"separator\"></span>\n </div>\n }\n</div>\n\n@if (('link' | lxExtensionEnabled: editor) && (isLinkModalOpen$ | async)) {\n <lx-link-modal [editor]=\"editor\" />\n}\n", styles: [":host{width:100%;display:flex;border-bottom:#99a5bb 1px solid;padding:8px}.toolbar{display:flex;flex-wrap:wrap;width:100%}.toolbar .toolbarItemGroup{display:flex;align-items:center;gap:2px}.toolbar .toolbarItemGroup:not(.toolbarItemGroup:has(.toolbarItem)){display:none}.toolbar .toolbarItemGroup:last-child .separator{display:none}.toolbar .dropdown-icon{margin-left:-4px;margin-right:8px}.toolbar .toolbar-heading{width:100px}.toolbar .toolbarItem{text-wrap:nowrap;color:#2a303d;border:none;height:24px}.toolbar .toolbarItem:hover:not(disabled){border:none}.toolbar .toolbarItem.pressed{background:#f0f2f5!important}.toolbar .toolbarItem.square{border:none!important}.toolbar .separator{width:1px;height:16px;margin:0 4px 0 2px;border:#c2c9d6 .5px solid}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight", "closeOnSelect", "overlayPositioning", "dropdownClass", "isFlexEnabledTriggerContainer"], outputs: ["opened", "closed", "closedWithoutSelection"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick", "keyDownAction", "mouseEnter"] }, { kind: "pipe", type: ExtensionEnabledPipe, name: "lxExtensionEnabled" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: LinkModalComponent, selector: "lx-link-modal", inputs: ["editor"] }, { kind: "directive", type: TooltipDirective, selector: "[lxTooltip]", inputs: ["lxTooltip", "lxTooltipPosition", "lxTooltipDelay", "lxTooltipIsHtmlContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10504
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: RichTextEditorToolbarComponent, isStandalone: true, selector: "lx-rich-text-editor-toolbar", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: false, isRequired: true, transformFunction: null }, isVisible: { classPropertyName: "isVisible", publicName: "isVisible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- eslint-disable @nx/workspace-no-font-awesome-icons -->\n<div class=\"toolbar\" [class.toolbarHidden]=\"!isToolbarVisible()\">\n <div class=\"toolbarItemGroup\">\n @if ('heading' | lxExtensionEnabled: editor) {\n <lx-options-dropdown>\n <button\n class=\"toolbarItem toolbar-heading\"\n lxKeyboardActionSource\n lx-button\n [lxTooltip]=\"NAME + '.textStyles' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [square]=\"false\"\n [pressed]=\"editor.isActive('heading') || editor.isActive('paragraph')\"\n endIcon=\"fa-angle-down\"\n [disabled]=\"!editor.isActive('heading') && !editor.isActive('paragraph')\"\n >\n {{ editor.isActive('heading') ? `${NAME + '.heading' | translate} ${editor.getAttributes('heading')['level']}` : `${NAME + '.paragraph' | translate}` }}\n </button>\n\n @for (level of headingLevels; track headingLevels) {\n <lx-option\n (select)=\"editor.chain().setHeading({ level }).focus().run()\"\n [hasSelectedState]=\"editor.isActive('heading', { level })\"\n [selected]=\"editor.isActive('heading', { level })\"\n >\n @if (!editor.isActive('heading', { level })) {\n <i class=\"far fa-heading dropdown-icon\"></i>\n }\n <span>{{ NAME + '.headingOption' | translate }} {{ level }}</span>\n </lx-option>\n }\n\n <lx-option\n (select)=\"this.editor.chain().setParagraph().focus().run()\"\n [hasSelectedState]=\"editor.isActive('paragraph')\"\n [selected]=\"editor.isActive('paragraph')\"\n >\n @if (!editor.isActive('paragraph')) {\n <i class=\"far fa-paragraph dropdown-icon\"></i>\n }\n <span>{{ NAME + '.paragraphOption' | translate }}</span>\n </lx-option>\n </lx-options-dropdown>\n }\n\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('bold' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.bold' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.bold' | translate\"\n [disabled]=\"editor.isActive('header')\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleBold().focus().run()\"\n [pressed]=\"editor.isActive('bold')\"\n icon=\"fa-bold\"\n ></button>\n }\n\n @if ('italic' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.italic' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.italic' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleItalic().focus().run()\"\n [pressed]=\"editor.isActive('italic')\"\n icon=\"fa-italic\"\n ></button>\n }\n\n @if ('underline' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.underline' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.underline' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleUnderline().focus().run()\"\n [pressed]=\"editor.isActive('underline')\"\n icon=\"fa-underline\"\n ></button>\n }\n\n @if ('strike' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.strikethrough' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.strikethrough' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleStrike().focus().run()\"\n [pressed]=\"editor.isActive('strike')\"\n icon=\"fa-strikethrough\"\n ></button>\n }\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('bulletList' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.bulletList' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.bulletList' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleBulletList().run()\"\n [pressed]=\"editor.isActive('listItem')\"\n icon=\"fa-list\"\n ></button>\n }\n\n @if ('orderedList' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.numberedList' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.numberedList' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleOrderedList().run()\"\n [pressed]=\"editor.isActive('orderedList')\"\n icon=\"fa-list-ol\"\n ></button>\n }\n\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('textAlign' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignLeft' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignLeft' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('left').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'left' })\"\n icon=\"fa-align-left\"\n ></button>\n\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignCenter' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignCenter' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('center').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'center' })\"\n icon=\"fa-align-center\"\n ></button>\n\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignRight' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignRight' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('right').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'right' })\"\n icon=\"fa-align-right\"\n ></button>\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignBlock' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignBlock' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'justify' })\"\n icon=\"fa-align-justify\"\n ></button>\n }\n\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('link' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.link' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.link' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().openLinkModal().run()\"\n [pressed]=\"editor.isActive('link')\"\n icon=\"fa-link\"\n ></button>\n <span class=\"separator\"></span>\n }\n </div>\n\n @let tableEnabled = 'table' | lxExtensionEnabled: editor;\n @let codeEnabled = 'codeBlock' | lxExtensionEnabled: editor;\n\n @if (tableEnabled || codeEnabled) {\n <div class=\"toolbarItemGroup\">\n @if (codeEnabled) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.code' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.code' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().setCodeBlock().run()\"\n [pressed]=\"editor.isActive('codeBlock')\"\n icon=\"fa-code\"\n ></button>\n }\n\n @if ('lxDiagram' | lxExtensionEnabled: editor) {\n <ng-content select=\".diagram-btn\" />\n }\n\n @if (tableEnabled) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.insertTable' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.insertTable' | translate\"\n [square]=\"true\"\n (click)=\"insertTable()\"\n [pressed]=\"editor.isActive('table')\"\n icon=\"fa-table\"\n [disabled]=\"editor.isActive('table')\"\n ></button>\n }\n\n <span class=\"separator\"></span>\n </div>\n }\n</div>\n\n@if (('link' | lxExtensionEnabled: editor) && isLinkModalOpenSignal()) {\n <lx-link-modal [editor]=\"editor\" />\n}\n", styles: [":host{width:100%;display:flex}.toolbar{display:flex;flex-wrap:wrap;width:100%;border-bottom:#99a5bb 1px solid;transition:all .18s ease-out;opacity:1;height:auto;padding:8px;overflow:hidden}.toolbar.toolbarHidden{opacity:0;height:0!important;padding:0}.toolbar .toolbarItemGroup{display:flex;align-items:center;gap:2px}.toolbar .toolbarItemGroup:not(.toolbarItemGroup:has(.toolbarItem)){display:none}.toolbar .toolbarItemGroup:last-child .separator{display:none}.toolbar .dropdown-icon{margin-left:-4px;margin-right:8px}.toolbar .toolbar-heading{width:100px}.toolbar .toolbarItem{text-wrap:nowrap;color:#2a303d;border:none;height:24px}.toolbar .toolbarItem:hover:not(disabled){border:none}.toolbar .toolbarItem.pressed{background:#f0f2f5!important}.toolbar .toolbarItem.square{border:none!important}.toolbar .separator{width:1px;height:16px;margin:0 4px 0 2px;border:#c2c9d6 .5px solid}\n"], dependencies: [{ kind: "component", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight", "closeOnSelect", "overlayPositioning", "dropdownClass", "isFlexEnabledTriggerContainer"], outputs: ["opened", "closed", "closedWithoutSelection"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick", "keyDownAction", "mouseEnter"] }, { kind: "pipe", type: ExtensionEnabledPipe, name: "lxExtensionEnabled" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: LinkModalComponent, selector: "lx-link-modal", inputs: ["editor"] }, { kind: "directive", type: TooltipDirective, selector: "[lxTooltip]", inputs: ["lxTooltip", "lxTooltipPosition", "lxTooltipDelay", "lxTooltipIsHtmlContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10499
10505
|
}
|
|
10500
10506
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RichTextEditorToolbarComponent, decorators: [{
|
|
10501
10507
|
type: Component,
|
|
10502
10508
|
args: [{ selector: 'lx-rich-text-editor-toolbar', imports: [
|
|
10503
|
-
AsyncPipe,
|
|
10504
10509
|
OptionsDropdownComponent,
|
|
10505
10510
|
ButtonComponent,
|
|
10506
10511
|
KeyboardActionSourceDirective,
|
|
@@ -10509,7 +10514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
10509
10514
|
TranslatePipe,
|
|
10510
10515
|
LinkModalComponent,
|
|
10511
10516
|
TooltipDirective
|
|
10512
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"toolbar\">\n <div class=\"toolbarItemGroup\">\n @if ('heading' | lxExtensionEnabled: editor) {\n <lx-options-dropdown>\n <button\n class=\"toolbarItem toolbar-heading\"\n lxKeyboardActionSource\n lx-button\n [lxTooltip]=\"NAME + '.textStyles' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [square]=\"false\"\n [pressed]=\"editor.isActive('heading') || editor.isActive('paragraph')\"\n endIcon=\"fa-angle-down\"\n [disabled]=\"!editor.isActive('heading') && !editor.isActive('paragraph')\"\n >\n {{ editor.isActive('heading') ? `${NAME + '.heading' | translate} ${editor.getAttributes('heading')['level']}` : `${NAME + '.paragraph' | translate}` }}\n </button>\n\n @for (level of headingLevels; track headingLevels) {\n <lx-option\n (select)=\"editor.chain().setHeading({ level }).focus().run()\"\n [hasSelectedState]=\"editor.isActive('heading', { level })\"\n [selected]=\"editor.isActive('heading', { level })\"\n >\n @if (!editor.isActive('heading', { level })) {\n <i class=\"far fa-heading dropdown-icon\"></i>\n }\n <span>{{ NAME + '.headingOption' | translate }} {{ level }}</span>\n </lx-option>\n }\n\n <lx-option\n (select)=\"this.editor.chain().setParagraph().focus().run()\"\n [hasSelectedState]=\"editor.isActive('paragraph')\"\n [selected]=\"editor.isActive('paragraph')\"\n >\n @if (!editor.isActive('paragraph')) {\n <i class=\"far fa-paragraph dropdown-icon\"></i>\n }\n <span>{{ NAME + '.paragraphOption' | translate }}</span>\n </lx-option>\n </lx-options-dropdown>\n }\n\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('bold' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.bold' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.bold' | translate\"\n [disabled]=\"editor.isActive('header')\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleBold().focus().run()\"\n [pressed]=\"editor.isActive('bold')\"\n icon=\"fa-bold\"\n ></button>\n }\n\n @if ('italic' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.italic' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.italic' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleItalic().focus().run()\"\n [pressed]=\"editor.isActive('italic')\"\n icon=\"fa-italic\"\n ></button>\n }\n\n @if ('underline' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.underline' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.underline' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleUnderline().focus().run()\"\n [pressed]=\"editor.isActive('underline')\"\n icon=\"fa-underline\"\n ></button>\n }\n\n @if ('strike' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.strikethrough' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.strikethrough' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleStrike().focus().run()\"\n [pressed]=\"editor.isActive('strike')\"\n icon=\"fa-strikethrough\"\n ></button>\n }\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('bulletList' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.bulletList' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.bulletList' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleBulletList().run()\"\n [pressed]=\"editor.isActive('listItem')\"\n icon=\"fa-list\"\n ></button>\n }\n\n @if ('orderedList' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.numberedList' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.numberedList' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleOrderedList().run()\"\n [pressed]=\"editor.isActive('orderedList')\"\n icon=\"fa-list-ol\"\n ></button>\n }\n\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('textAlign' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignLeft' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignLeft' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('left').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'left' })\"\n icon=\"fa-align-left\"\n ></button>\n\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignCenter' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignCenter' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('center').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'center' })\"\n icon=\"fa-align-center\"\n ></button>\n\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignRight' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignRight' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('right').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'right' })\"\n icon=\"fa-align-right\"\n ></button>\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignBlock' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignBlock' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'justify' })\"\n icon=\"fa-align-justify\"\n ></button>\n }\n\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('link' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.link' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.link' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().openLinkModal().run()\"\n [pressed]=\"editor.isActive('link')\"\n icon=\"fa-link\"\n ></button>\n <span class=\"separator\"></span>\n }\n </div>\n\n @let tableEnabled = 'table' | lxExtensionEnabled: editor;\n @let codeEnabled = 'codeBlock' | lxExtensionEnabled: editor;\n\n @if (tableEnabled || codeEnabled) {\n <div class=\"toolbarItemGroup\">\n @if (codeEnabled) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.code' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.code' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().setCodeBlock().run()\"\n [pressed]=\"editor.isActive('codeBlock')\"\n icon=\"fa-code\"\n ></button>\n }\n\n @if ('lxDiagram' | lxExtensionEnabled: editor) {\n <ng-content select=\".diagram-btn\" />\n }\n\n @if (tableEnabled) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.insertTable' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.insertTable' | translate\"\n [square]=\"true\"\n (click)=\"insertTable()\"\n [pressed]=\"editor.isActive('table')\"\n icon=\"fa-table\"\n [disabled]=\"editor.isActive('table')\"\n ></button>\n }\n\n <span class=\"separator\"></span>\n </div>\n }\n</div>\n\n@if (('link' | lxExtensionEnabled: editor) && (isLinkModalOpen$ | async)) {\n <lx-link-modal [editor]=\"editor\" />\n}\n", styles: [":host{width:100%;display:flex;border-bottom:#99a5bb 1px solid;padding:8px}.toolbar{display:flex;flex-wrap:wrap;width:100%}.toolbar .toolbarItemGroup{display:flex;align-items:center;gap:2px}.toolbar .toolbarItemGroup:not(.toolbarItemGroup:has(.toolbarItem)){display:none}.toolbar .toolbarItemGroup:last-child .separator{display:none}.toolbar .dropdown-icon{margin-left:-4px;margin-right:8px}.toolbar .toolbar-heading{width:100px}.toolbar .toolbarItem{text-wrap:nowrap;color:#2a303d;border:none;height:24px}.toolbar .toolbarItem:hover:not(disabled){border:none}.toolbar .toolbarItem.pressed{background:#f0f2f5!important}.toolbar .toolbarItem.square{border:none!important}.toolbar .separator{width:1px;height:16px;margin:0 4px 0 2px;border:#c2c9d6 .5px solid}\n"] }]
|
|
10517
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- eslint-disable @nx/workspace-no-font-awesome-icons -->\n<div class=\"toolbar\" [class.toolbarHidden]=\"!isToolbarVisible()\">\n <div class=\"toolbarItemGroup\">\n @if ('heading' | lxExtensionEnabled: editor) {\n <lx-options-dropdown>\n <button\n class=\"toolbarItem toolbar-heading\"\n lxKeyboardActionSource\n lx-button\n [lxTooltip]=\"NAME + '.textStyles' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [square]=\"false\"\n [pressed]=\"editor.isActive('heading') || editor.isActive('paragraph')\"\n endIcon=\"fa-angle-down\"\n [disabled]=\"!editor.isActive('heading') && !editor.isActive('paragraph')\"\n >\n {{ editor.isActive('heading') ? `${NAME + '.heading' | translate} ${editor.getAttributes('heading')['level']}` : `${NAME + '.paragraph' | translate}` }}\n </button>\n\n @for (level of headingLevels; track headingLevels) {\n <lx-option\n (select)=\"editor.chain().setHeading({ level }).focus().run()\"\n [hasSelectedState]=\"editor.isActive('heading', { level })\"\n [selected]=\"editor.isActive('heading', { level })\"\n >\n @if (!editor.isActive('heading', { level })) {\n <i class=\"far fa-heading dropdown-icon\"></i>\n }\n <span>{{ NAME + '.headingOption' | translate }} {{ level }}</span>\n </lx-option>\n }\n\n <lx-option\n (select)=\"this.editor.chain().setParagraph().focus().run()\"\n [hasSelectedState]=\"editor.isActive('paragraph')\"\n [selected]=\"editor.isActive('paragraph')\"\n >\n @if (!editor.isActive('paragraph')) {\n <i class=\"far fa-paragraph dropdown-icon\"></i>\n }\n <span>{{ NAME + '.paragraphOption' | translate }}</span>\n </lx-option>\n </lx-options-dropdown>\n }\n\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('bold' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.bold' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.bold' | translate\"\n [disabled]=\"editor.isActive('header')\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleBold().focus().run()\"\n [pressed]=\"editor.isActive('bold')\"\n icon=\"fa-bold\"\n ></button>\n }\n\n @if ('italic' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.italic' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.italic' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleItalic().focus().run()\"\n [pressed]=\"editor.isActive('italic')\"\n icon=\"fa-italic\"\n ></button>\n }\n\n @if ('underline' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.underline' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.underline' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleUnderline().focus().run()\"\n [pressed]=\"editor.isActive('underline')\"\n icon=\"fa-underline\"\n ></button>\n }\n\n @if ('strike' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.strikethrough' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.strikethrough' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleStrike().focus().run()\"\n [pressed]=\"editor.isActive('strike')\"\n icon=\"fa-strikethrough\"\n ></button>\n }\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('bulletList' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.bulletList' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.bulletList' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleBulletList().run()\"\n [pressed]=\"editor.isActive('listItem')\"\n icon=\"fa-list\"\n ></button>\n }\n\n @if ('orderedList' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.numberedList' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.numberedList' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().toggleOrderedList().run()\"\n [pressed]=\"editor.isActive('orderedList')\"\n icon=\"fa-list-ol\"\n ></button>\n }\n\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('textAlign' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignLeft' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignLeft' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('left').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'left' })\"\n icon=\"fa-align-left\"\n ></button>\n\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignCenter' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignCenter' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('center').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'center' })\"\n icon=\"fa-align-center\"\n ></button>\n\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignRight' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignRight' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('right').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'right' })\"\n icon=\"fa-align-right\"\n ></button>\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.alignBlock' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.alignBlock' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\n [pressed]=\"editor.isActive({ textAlign: 'justify' })\"\n icon=\"fa-align-justify\"\n ></button>\n }\n\n <span class=\"separator\"></span>\n </div>\n\n <div class=\"toolbarItemGroup\">\n @if ('link' | lxExtensionEnabled: editor) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.link' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.link' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().openLinkModal().run()\"\n [pressed]=\"editor.isActive('link')\"\n icon=\"fa-link\"\n ></button>\n <span class=\"separator\"></span>\n }\n </div>\n\n @let tableEnabled = 'table' | lxExtensionEnabled: editor;\n @let codeEnabled = 'codeBlock' | lxExtensionEnabled: editor;\n\n @if (tableEnabled || codeEnabled) {\n <div class=\"toolbarItemGroup\">\n @if (codeEnabled) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.code' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.code' | translate\"\n [square]=\"true\"\n (click)=\"editor.chain().setCodeBlock().run()\"\n [pressed]=\"editor.isActive('codeBlock')\"\n icon=\"fa-code\"\n ></button>\n }\n\n @if ('lxDiagram' | lxExtensionEnabled: editor) {\n <ng-content select=\".diagram-btn\" />\n }\n\n @if (tableEnabled) {\n <button\n class=\"toolbarItem\"\n lx-button\n [attr.aria-label]=\"NAME + '.insertTable' | translate\"\n [mode]=\"'outline'\"\n [size]=\"'medium'\"\n [lxTooltip]=\"NAME + '.insertTable' | translate\"\n [square]=\"true\"\n (click)=\"insertTable()\"\n [pressed]=\"editor.isActive('table')\"\n icon=\"fa-table\"\n [disabled]=\"editor.isActive('table')\"\n ></button>\n }\n\n <span class=\"separator\"></span>\n </div>\n }\n</div>\n\n@if (('link' | lxExtensionEnabled: editor) && isLinkModalOpenSignal()) {\n <lx-link-modal [editor]=\"editor\" />\n}\n", styles: [":host{width:100%;display:flex}.toolbar{display:flex;flex-wrap:wrap;width:100%;border-bottom:#99a5bb 1px solid;transition:all .18s ease-out;opacity:1;height:auto;padding:8px;overflow:hidden}.toolbar.toolbarHidden{opacity:0;height:0!important;padding:0}.toolbar .toolbarItemGroup{display:flex;align-items:center;gap:2px}.toolbar .toolbarItemGroup:not(.toolbarItemGroup:has(.toolbarItem)){display:none}.toolbar .toolbarItemGroup:last-child .separator{display:none}.toolbar .dropdown-icon{margin-left:-4px;margin-right:8px}.toolbar .toolbar-heading{width:100px}.toolbar .toolbarItem{text-wrap:nowrap;color:#2a303d;border:none;height:24px}.toolbar .toolbarItem:hover:not(disabled){border:none}.toolbar .toolbarItem.pressed{background:#f0f2f5!important}.toolbar .toolbarItem.square{border:none!important}.toolbar .separator{width:1px;height:16px;margin:0 4px 0 2px;border:#c2c9d6 .5px solid}\n"] }]
|
|
10513
10518
|
}], propDecorators: { editor: [{
|
|
10514
10519
|
type: Input,
|
|
10515
10520
|
args: [{ required: true }]
|
|
@@ -10523,13 +10528,38 @@ class RichTextEditorComponent {
|
|
|
10523
10528
|
this.ariaLabelledBy = input(null);
|
|
10524
10529
|
this.maxHeight = input(null);
|
|
10525
10530
|
this.customExtensions = input([]);
|
|
10531
|
+
this.autoHideToolbar = input(false);
|
|
10526
10532
|
this.blur = output();
|
|
10527
10533
|
this.value = null;
|
|
10528
10534
|
this.disabled = false;
|
|
10529
10535
|
this.editor = inject(TipTapEditorDirective).editor;
|
|
10536
|
+
this.toolbarVisibility = computed(() => {
|
|
10537
|
+
if (!this.autoHideToolbar()) {
|
|
10538
|
+
return true;
|
|
10539
|
+
}
|
|
10540
|
+
return this.isToolbarVisible();
|
|
10541
|
+
});
|
|
10542
|
+
this.isToolbarVisible = signal(false);
|
|
10530
10543
|
this.onChange = (_value) => { };
|
|
10531
10544
|
this.onTouched = () => { };
|
|
10532
10545
|
}
|
|
10546
|
+
onFocusIn() {
|
|
10547
|
+
if (this.autoHideToolbar()) {
|
|
10548
|
+
this.isToolbarVisible.set(true);
|
|
10549
|
+
}
|
|
10550
|
+
}
|
|
10551
|
+
onFocusOut(event) {
|
|
10552
|
+
if (this.autoHideToolbar()) {
|
|
10553
|
+
const editorElement = event.currentTarget;
|
|
10554
|
+
// Small delay to allow focus events to complete
|
|
10555
|
+
setTimeout(() => {
|
|
10556
|
+
const focusMovedTo = document.activeElement;
|
|
10557
|
+
if (!editorElement.contains(focusMovedTo)) {
|
|
10558
|
+
this.isToolbarVisible.set(false);
|
|
10559
|
+
}
|
|
10560
|
+
}, 100);
|
|
10561
|
+
}
|
|
10562
|
+
}
|
|
10533
10563
|
ngOnDestroy() {
|
|
10534
10564
|
this.editor().destroy();
|
|
10535
10565
|
}
|
|
@@ -10546,14 +10576,14 @@ class RichTextEditorComponent {
|
|
|
10546
10576
|
this.disabled = isDisabled;
|
|
10547
10577
|
}
|
|
10548
10578
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RichTextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10549
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: RichTextEditorComponent, isStandalone: true, selector: "lx-rich-text-editor", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, outputFormat: { classPropertyName: "outputFormat", publicName: "outputFormat", isSignal: true, isRequired: true, transformFunction: null }, additionalFeatures: { classPropertyName: "additionalFeatures", publicName: "additionalFeatures", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, customExtensions: { classPropertyName: "customExtensions", publicName: "customExtensions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur" }, host: { properties: { "style.--editor-max-height": "maxHeight()" } }, providers: [
|
|
10579
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: RichTextEditorComponent, isStandalone: true, selector: "lx-rich-text-editor", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, outputFormat: { classPropertyName: "outputFormat", publicName: "outputFormat", isSignal: true, isRequired: true, transformFunction: null }, additionalFeatures: { classPropertyName: "additionalFeatures", publicName: "additionalFeatures", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, customExtensions: { classPropertyName: "customExtensions", publicName: "customExtensions", isSignal: true, isRequired: false, transformFunction: null }, autoHideToolbar: { classPropertyName: "autoHideToolbar", publicName: "autoHideToolbar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur" }, host: { listeners: { "focusin": "onFocusIn()", "focusout": "onFocusOut($event)" }, properties: { "style.--editor-max-height": "maxHeight()" } }, providers: [
|
|
10550
10580
|
ExtensionsBuilder,
|
|
10551
10581
|
{
|
|
10552
10582
|
provide: NG_VALUE_ACCESSOR,
|
|
10553
10583
|
useExisting: forwardRef(() => RichTextEditorComponent),
|
|
10554
10584
|
multi: true
|
|
10555
10585
|
}
|
|
10556
|
-
], hostDirectives: [{ directive: TipTapEditorDirective, inputs: ["outputFormat", "outputFormat", "additionalFeatures", "additionalFeatures", "ariaLabelledBy", "ariaLabelledBy", "customExtensions", "customExtensions", "mode", "mode"] }, { directive: TrackingDirective, outputs: ["trackEvent", "trackEvent"] }], ngImport: i0, template: "<div [class.viewMode]=\"mode() === 'view'\" [class.editMode]=\"mode() === 'edit'\" [class.disabled]=\"disabled\">\n @if (mode() === 'edit' && !disabled) {\n <lx-rich-text-editor-toolbar (mousedown)=\"$event.preventDefault()\" [editor]=\"editor()\">\n <ng-content select=\".diagram-btn\" ngProjectAs=\".diagram-btn\" />\n </lx-rich-text-editor-toolbar>\n }\n <tiptap-editor\n [editor]=\"editor()\"\n [outputFormat]=\"outputFormat()\"\n [ngModel]=\"value\"\n (ngModelChange)=\"onChange($event)\"\n (blur)=\"blur.emit()\"\n [disabled]=\"mode() === 'view' || disabled\"\n />\n\n @if (('truncate' | lxExtensionEnabled: editor()) && mode() === 'view') {\n <lx-truncate-button [editor]=\"editor()\" />\n }\n</div>\n\n@if ('table' | lxExtensionEnabled: editor()) {\n <lx-table-bubble-menu [editor]=\"editor()\" />\n}\n\n<ng-content />\n", styles: [":host{display:flex;width:100%}.editorButton{margin:0 5px}.editMode{width:100%;border:1px solid #99a5bb;background-color:#fff;border-radius:2px}:host ::ng-deep .editMode .ProseMirror{padding:15px 18.9px;resize:vertical;max-height:var(--editor-max-height, auto)}.viewMode{width:100%}.disabled{background-color:#f0f2f5;color:#61779d}:host ::ng-deep .ProseMirror{outline-width:0;border-radius:2px;overflow:auto}:host ::ng-deep .ProseMirror-gapcursor:after{width:1px;height:14px;border-left:1px solid #000}:host ::ng-deep .ProseMirror p:first-child{margin-top:0}:host ::ng-deep .ProseMirror p:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1:first-child,:host ::ng-deep .ProseMirror h2:first-child,:host ::ng-deep .ProseMirror h3:first-child,:host ::ng-deep .ProseMirror h4:first-child,:host ::ng-deep .ProseMirror h5:first-child,:host ::ng-deep .ProseMirror h6:first-child{margin-top:0}:host ::ng-deep .ProseMirror h1:last-child,:host ::ng-deep .ProseMirror h2:last-child,:host ::ng-deep .ProseMirror h3:last-child,:host ::ng-deep .ProseMirror h4:last-child,:host ::ng-deep .ProseMirror h5:last-child,:host ::ng-deep .ProseMirror h6:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1{font-size:var(--lxFontHeader1Size)}:host ::ng-deep .ProseMirror h2{font-size:var(--lxFontHeader2Size)}:host ::ng-deep .ProseMirror h3{font-size:var(--lxFontHeader3Size)}:host ::ng-deep .ProseMirror h4{font-size:var(--lxFontHeader4Size)}:host ::ng-deep .ProseMirror .tableWrapper{margin:20px 0}:host ::ng-deep .ProseMirror .tableWrapper h1,:host ::ng-deep .ProseMirror .tableWrapper h2,:host ::ng-deep .ProseMirror .tableWrapper h3,:host ::ng-deep .ProseMirror .tableWrapper h4,:host ::ng-deep .ProseMirror .tableWrapper h5,:host ::ng-deep .ProseMirror .tableWrapper h6{margin-top:0}:host ::ng-deep .ProseMirror .tableWrapper table{border-collapse:collapse;margin:0;table-layout:fixed;width:100%}:host ::ng-deep .ProseMirror .tableWrapper table th,:host ::ng-deep .ProseMirror .tableWrapper table td{border:1px solid #c2c9d6;box-sizing:border-box;min-width:1em;padding:12px;position:relative;vertical-align:top}:host ::ng-deep .ProseMirror .tableWrapper table th>*,:host ::ng-deep .ProseMirror .tableWrapper table td>*{margin-bottom:0}:host ::ng-deep .ProseMirror .tableWrapper table th{background-color:#c2c9d6;font-weight:700;text-align:left}:host ::ng-deep .ProseMirror .tableWrapper table p{margin:0}:host ::ng-deep .ProseMirror .tableWrapper table .selectedCell:after{content:\"\";position:absolute;inset:0;pointer-events:none;z-index:2}:host ::ng-deep .ProseMirror .tableWrapper table .column-resize-handle{background-color:#b2bccc;bottom:-2px;right:-2px;position:absolute;top:0;width:4px;pointer-events:none}:host ::ng-deep .ProseMirror .selectedCell{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column,:host ::ng-deep .ProseMirror .selector-row{all:unset;display:flex;align-items:center;justify-content:center;background-color:#f0f2f5;cursor:pointer;position:absolute;z-index:10;margin-left:-1px;margin-top:-.5px}:host ::ng-deep .ProseMirror .selector-column:hover,:host ::ng-deep .ProseMirror .selector-row:hover{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column{width:calc(100% + 1px);border-left:1px solid #e1e5eb;height:11px;top:-11px;left:0}:host ::ng-deep .ProseMirror .selector-column.first{border-left:none}:host ::ng-deep .ProseMirror .selector-column.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-column.selected:before{content:\"\";border-bottom:2px dotted #fff;width:.6rem}:host ::ng-deep .ProseMirror .selector-column:hover:before{content:\"\";border-bottom:2px dotted #61779d;width:.6rem}:host ::ng-deep .ProseMirror .selector-column.selected:before{border-bottom:2px dotted #fff}:host ::ng-deep .ProseMirror .selector-row{height:calc(100% + 1px);border-top:1px solid #e1e5eb;width:11px;left:-11px;top:0}:host ::ng-deep .ProseMirror .selector-row.first{border-top:none}:host ::ng-deep .ProseMirror .selector-row.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-row.selected:before{content:\"\";border-left:2px dotted #fff;height:.575rem}:host ::ng-deep .ProseMirror .selector-row:hover:before{content:\"\";border-left:2px dotted #61779d;height:.575rem}:host ::ng-deep .ProseMirror .selector-row.selected:before{border-left:2px dotted #fff}:host ::ng-deep .ProseMirror li p{margin:0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:24px}:host ::ng-deep .ProseMirror ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol ol ol{list-style-type:lower-roman}\n"], dependencies: [{ kind: "directive", type: EditorDirective, selector: "tiptap-editor[editor]", inputs: ["editor", "outputFormat"], outputs: ["blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: RichTextEditorToolbarComponent, selector: "lx-rich-text-editor-toolbar", inputs: ["editor"] }, { kind: "component", type: TableBubbleMenuComponent, selector: "lx-table-bubble-menu", inputs: ["editor"] }, { kind: "pipe", type: ExtensionEnabledPipe, name: "lxExtensionEnabled" }, { kind: "component", type: TruncateButtonComponent, selector: "lx-truncate-button", inputs: ["editor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10586
|
+
], hostDirectives: [{ directive: TipTapEditorDirective, inputs: ["outputFormat", "outputFormat", "additionalFeatures", "additionalFeatures", "ariaLabelledBy", "ariaLabelledBy", "customExtensions", "customExtensions", "mode", "mode"] }, { directive: TrackingDirective, outputs: ["trackEvent", "trackEvent"] }], ngImport: i0, template: "<div [class.viewMode]=\"mode() === 'view'\" [class.editMode]=\"mode() === 'edit'\" [class.disabled]=\"disabled\">\n @if (mode() === 'edit' && !disabled) {\n <lx-rich-text-editor-toolbar (mousedown)=\"$event.preventDefault()\" [editor]=\"editor()\" [isVisible]=\"toolbarVisibility()\">\n <ng-content select=\".diagram-btn\" ngProjectAs=\".diagram-btn\" />\n </lx-rich-text-editor-toolbar>\n }\n\n <tiptap-editor\n [editor]=\"editor()\"\n [outputFormat]=\"outputFormat()\"\n [ngModel]=\"value\"\n (ngModelChange)=\"onChange($event)\"\n (blur)=\"blur.emit()\"\n [disabled]=\"mode() === 'view' || disabled\"\n />\n\n @if (('truncate' | lxExtensionEnabled: editor()) && mode() === 'view') {\n <lx-truncate-button [editor]=\"editor()\" />\n }\n</div>\n\n@if ('table' | lxExtensionEnabled: editor()) {\n <lx-table-bubble-menu [editor]=\"editor()\" />\n}\n\n<ng-content />\n", styles: [":host{display:flex;width:100%}.editorButton{margin:0 5px}.editMode{width:100%;border:1px solid #99a5bb;background-color:#fff;border-radius:2px}:host ::ng-deep .editMode .ProseMirror{padding:15px 18.9px;resize:vertical;max-height:var(--editor-max-height, auto)}.viewMode{width:100%}.disabled{background-color:#f0f2f5;color:#61779d}:host ::ng-deep .ProseMirror{outline-width:0;border-radius:2px;overflow:auto}:host ::ng-deep .ProseMirror-gapcursor:after{width:1px;height:14px;border-left:1px solid #000}:host ::ng-deep .ProseMirror p:first-child{margin-top:0}:host ::ng-deep .ProseMirror p:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1:first-child,:host ::ng-deep .ProseMirror h2:first-child,:host ::ng-deep .ProseMirror h3:first-child,:host ::ng-deep .ProseMirror h4:first-child,:host ::ng-deep .ProseMirror h5:first-child,:host ::ng-deep .ProseMirror h6:first-child{margin-top:0}:host ::ng-deep .ProseMirror h1:last-child,:host ::ng-deep .ProseMirror h2:last-child,:host ::ng-deep .ProseMirror h3:last-child,:host ::ng-deep .ProseMirror h4:last-child,:host ::ng-deep .ProseMirror h5:last-child,:host ::ng-deep .ProseMirror h6:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1{font-size:var(--lxFontHeader1Size)}:host ::ng-deep .ProseMirror h2{font-size:var(--lxFontHeader2Size)}:host ::ng-deep .ProseMirror h3{font-size:var(--lxFontHeader3Size)}:host ::ng-deep .ProseMirror h4{font-size:var(--lxFontHeader4Size)}:host ::ng-deep .ProseMirror .tableWrapper{margin:20px 0}:host ::ng-deep .ProseMirror .tableWrapper h1,:host ::ng-deep .ProseMirror .tableWrapper h2,:host ::ng-deep .ProseMirror .tableWrapper h3,:host ::ng-deep .ProseMirror .tableWrapper h4,:host ::ng-deep .ProseMirror .tableWrapper h5,:host ::ng-deep .ProseMirror .tableWrapper h6{margin-top:0}:host ::ng-deep .ProseMirror .tableWrapper table{border-collapse:collapse;margin:0;table-layout:fixed;width:100%}:host ::ng-deep .ProseMirror .tableWrapper table th,:host ::ng-deep .ProseMirror .tableWrapper table td{border:1px solid #c2c9d6;box-sizing:border-box;min-width:1em;padding:12px;position:relative;vertical-align:top}:host ::ng-deep .ProseMirror .tableWrapper table th>*,:host ::ng-deep .ProseMirror .tableWrapper table td>*{margin-bottom:0}:host ::ng-deep .ProseMirror .tableWrapper table th{background-color:#c2c9d6;font-weight:700;text-align:left}:host ::ng-deep .ProseMirror .tableWrapper table p{margin:0}:host ::ng-deep .ProseMirror .tableWrapper table .selectedCell:after{content:\"\";position:absolute;inset:0;pointer-events:none;z-index:2}:host ::ng-deep .ProseMirror .tableWrapper table .column-resize-handle{background-color:#b2bccc;bottom:-2px;right:-2px;position:absolute;top:0;width:4px;pointer-events:none}:host ::ng-deep .ProseMirror .selectedCell{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column,:host ::ng-deep .ProseMirror .selector-row{all:unset;display:flex;align-items:center;justify-content:center;background-color:#f0f2f5;cursor:pointer;position:absolute;z-index:10;margin-left:-1px;margin-top:-.5px}:host ::ng-deep .ProseMirror .selector-column:hover,:host ::ng-deep .ProseMirror .selector-row:hover{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column{width:calc(100% + 1px);border-left:1px solid #e1e5eb;height:11px;top:-11px;left:0}:host ::ng-deep .ProseMirror .selector-column.first{border-left:none}:host ::ng-deep .ProseMirror .selector-column.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-column.selected:before{content:\"\";border-bottom:2px dotted #fff;width:.6rem}:host ::ng-deep .ProseMirror .selector-column:hover:before{content:\"\";border-bottom:2px dotted #61779d;width:.6rem}:host ::ng-deep .ProseMirror .selector-column.selected:before{border-bottom:2px dotted #fff}:host ::ng-deep .ProseMirror .selector-row{height:calc(100% + 1px);border-top:1px solid #e1e5eb;width:11px;left:-11px;top:0}:host ::ng-deep .ProseMirror .selector-row.first{border-top:none}:host ::ng-deep .ProseMirror .selector-row.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-row.selected:before{content:\"\";border-left:2px dotted #fff;height:.575rem}:host ::ng-deep .ProseMirror .selector-row:hover:before{content:\"\";border-left:2px dotted #61779d;height:.575rem}:host ::ng-deep .ProseMirror .selector-row.selected:before{border-left:2px dotted #fff}:host ::ng-deep .ProseMirror li p{margin:0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:24px}:host ::ng-deep .ProseMirror ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol ol ol{list-style-type:lower-roman}\n"], dependencies: [{ kind: "directive", type: EditorDirective, selector: "tiptap-editor[editor]", inputs: ["editor", "outputFormat"], outputs: ["blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: RichTextEditorToolbarComponent, selector: "lx-rich-text-editor-toolbar", inputs: ["editor", "isVisible"] }, { kind: "component", type: TableBubbleMenuComponent, selector: "lx-table-bubble-menu", inputs: ["editor"] }, { kind: "pipe", type: ExtensionEnabledPipe, name: "lxExtensionEnabled" }, { kind: "component", type: TruncateButtonComponent, selector: "lx-truncate-button", inputs: ["editor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10557
10587
|
}
|
|
10558
10588
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RichTextEditorComponent, decorators: [{
|
|
10559
10589
|
type: Component,
|
|
@@ -10581,8 +10611,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
10581
10611
|
multi: true
|
|
10582
10612
|
}
|
|
10583
10613
|
], host: {
|
|
10584
|
-
'[style.--editor-max-height]': 'maxHeight()'
|
|
10585
|
-
|
|
10614
|
+
'[style.--editor-max-height]': 'maxHeight()',
|
|
10615
|
+
'(focusin)': 'onFocusIn()',
|
|
10616
|
+
'(focusout)': 'onFocusOut($event)'
|
|
10617
|
+
}, template: "<div [class.viewMode]=\"mode() === 'view'\" [class.editMode]=\"mode() === 'edit'\" [class.disabled]=\"disabled\">\n @if (mode() === 'edit' && !disabled) {\n <lx-rich-text-editor-toolbar (mousedown)=\"$event.preventDefault()\" [editor]=\"editor()\" [isVisible]=\"toolbarVisibility()\">\n <ng-content select=\".diagram-btn\" ngProjectAs=\".diagram-btn\" />\n </lx-rich-text-editor-toolbar>\n }\n\n <tiptap-editor\n [editor]=\"editor()\"\n [outputFormat]=\"outputFormat()\"\n [ngModel]=\"value\"\n (ngModelChange)=\"onChange($event)\"\n (blur)=\"blur.emit()\"\n [disabled]=\"mode() === 'view' || disabled\"\n />\n\n @if (('truncate' | lxExtensionEnabled: editor()) && mode() === 'view') {\n <lx-truncate-button [editor]=\"editor()\" />\n }\n</div>\n\n@if ('table' | lxExtensionEnabled: editor()) {\n <lx-table-bubble-menu [editor]=\"editor()\" />\n}\n\n<ng-content />\n", styles: [":host{display:flex;width:100%}.editorButton{margin:0 5px}.editMode{width:100%;border:1px solid #99a5bb;background-color:#fff;border-radius:2px}:host ::ng-deep .editMode .ProseMirror{padding:15px 18.9px;resize:vertical;max-height:var(--editor-max-height, auto)}.viewMode{width:100%}.disabled{background-color:#f0f2f5;color:#61779d}:host ::ng-deep .ProseMirror{outline-width:0;border-radius:2px;overflow:auto}:host ::ng-deep .ProseMirror-gapcursor:after{width:1px;height:14px;border-left:1px solid #000}:host ::ng-deep .ProseMirror p:first-child{margin-top:0}:host ::ng-deep .ProseMirror p:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1:first-child,:host ::ng-deep .ProseMirror h2:first-child,:host ::ng-deep .ProseMirror h3:first-child,:host ::ng-deep .ProseMirror h4:first-child,:host ::ng-deep .ProseMirror h5:first-child,:host ::ng-deep .ProseMirror h6:first-child{margin-top:0}:host ::ng-deep .ProseMirror h1:last-child,:host ::ng-deep .ProseMirror h2:last-child,:host ::ng-deep .ProseMirror h3:last-child,:host ::ng-deep .ProseMirror h4:last-child,:host ::ng-deep .ProseMirror h5:last-child,:host ::ng-deep .ProseMirror h6:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1{font-size:var(--lxFontHeader1Size)}:host ::ng-deep .ProseMirror h2{font-size:var(--lxFontHeader2Size)}:host ::ng-deep .ProseMirror h3{font-size:var(--lxFontHeader3Size)}:host ::ng-deep .ProseMirror h4{font-size:var(--lxFontHeader4Size)}:host ::ng-deep .ProseMirror .tableWrapper{margin:20px 0}:host ::ng-deep .ProseMirror .tableWrapper h1,:host ::ng-deep .ProseMirror .tableWrapper h2,:host ::ng-deep .ProseMirror .tableWrapper h3,:host ::ng-deep .ProseMirror .tableWrapper h4,:host ::ng-deep .ProseMirror .tableWrapper h5,:host ::ng-deep .ProseMirror .tableWrapper h6{margin-top:0}:host ::ng-deep .ProseMirror .tableWrapper table{border-collapse:collapse;margin:0;table-layout:fixed;width:100%}:host ::ng-deep .ProseMirror .tableWrapper table th,:host ::ng-deep .ProseMirror .tableWrapper table td{border:1px solid #c2c9d6;box-sizing:border-box;min-width:1em;padding:12px;position:relative;vertical-align:top}:host ::ng-deep .ProseMirror .tableWrapper table th>*,:host ::ng-deep .ProseMirror .tableWrapper table td>*{margin-bottom:0}:host ::ng-deep .ProseMirror .tableWrapper table th{background-color:#c2c9d6;font-weight:700;text-align:left}:host ::ng-deep .ProseMirror .tableWrapper table p{margin:0}:host ::ng-deep .ProseMirror .tableWrapper table .selectedCell:after{content:\"\";position:absolute;inset:0;pointer-events:none;z-index:2}:host ::ng-deep .ProseMirror .tableWrapper table .column-resize-handle{background-color:#b2bccc;bottom:-2px;right:-2px;position:absolute;top:0;width:4px;pointer-events:none}:host ::ng-deep .ProseMirror .selectedCell{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column,:host ::ng-deep .ProseMirror .selector-row{all:unset;display:flex;align-items:center;justify-content:center;background-color:#f0f2f5;cursor:pointer;position:absolute;z-index:10;margin-left:-1px;margin-top:-.5px}:host ::ng-deep .ProseMirror .selector-column:hover,:host ::ng-deep .ProseMirror .selector-row:hover{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column{width:calc(100% + 1px);border-left:1px solid #e1e5eb;height:11px;top:-11px;left:0}:host ::ng-deep .ProseMirror .selector-column.first{border-left:none}:host ::ng-deep .ProseMirror .selector-column.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-column.selected:before{content:\"\";border-bottom:2px dotted #fff;width:.6rem}:host ::ng-deep .ProseMirror .selector-column:hover:before{content:\"\";border-bottom:2px dotted #61779d;width:.6rem}:host ::ng-deep .ProseMirror .selector-column.selected:before{border-bottom:2px dotted #fff}:host ::ng-deep .ProseMirror .selector-row{height:calc(100% + 1px);border-top:1px solid #e1e5eb;width:11px;left:-11px;top:0}:host ::ng-deep .ProseMirror .selector-row.first{border-top:none}:host ::ng-deep .ProseMirror .selector-row.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-row.selected:before{content:\"\";border-left:2px dotted #fff;height:.575rem}:host ::ng-deep .ProseMirror .selector-row:hover:before{content:\"\";border-left:2px dotted #61779d;height:.575rem}:host ::ng-deep .ProseMirror .selector-row.selected:before{border-left:2px dotted #fff}:host ::ng-deep .ProseMirror li p{margin:0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:24px}:host ::ng-deep .ProseMirror ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol ol ol{list-style-type:lower-roman}\n"] }]
|
|
10586
10618
|
}] });
|
|
10587
10619
|
|
|
10588
10620
|
class FocusEditorDirective {
|