@phuong-tran-redoc/document-engine-angular 0.0.33 → 0.0.34
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { HostBinding, Input, Directive, inject, Injectable, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, Component, EventEmitter, Output, ChangeDetectorRef, InjectionToken, HostListener, forwardRef, ContentChildren, ViewChild, ViewChildren, NgZone, ViewContainerRef, EnvironmentInjector,
|
|
2
|
+
import { HostBinding, Input, Directive, inject, Injectable, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, Component, EventEmitter, Output, ChangeDetectorRef, InjectionToken, HostListener, forwardRef, ContentChildren, ViewChild, ViewChildren, NgZone, ViewContainerRef, EnvironmentInjector, ApplicationRef, createComponent, Renderer2, NgModule } from '@angular/core';
|
|
3
3
|
import { Extension, Editor } from '@tiptap/core';
|
|
4
4
|
import Blockquote from '@tiptap/extension-blockquote';
|
|
5
5
|
import Bold from '@tiptap/extension-bold';
|
|
@@ -5090,7 +5090,7 @@ class EditorBubbleMenuComponent {
|
|
|
5090
5090
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: EditorBubbleMenuComponent, isStandalone: true, selector: "document-engine-editor-bubble-menu", inputs: { editor: "editor", config: "config" }, viewQueries: [{ propertyName: "viewContainer", first: true, predicate: ["viewContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "bubbleElement", first: true, predicate: ["bubbleElement"], descendants: true }], ngImport: i0, template: `
|
|
5091
5091
|
<div
|
|
5092
5092
|
#bubbleElement
|
|
5093
|
-
class="bubble-menu-wrapper rounded border bg-card text-card-foreground border-border shadow-elevation-2 z-
|
|
5093
|
+
class="bubble-menu-wrapper rounded border bg-card text-card-foreground border-border shadow-elevation-2 z-30"
|
|
5094
5094
|
tiptapBubbleMenu
|
|
5095
5095
|
[editor]="editor"
|
|
5096
5096
|
[props]="config.props!"
|
|
@@ -5111,7 +5111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
5111
5111
|
template: `
|
|
5112
5112
|
<div
|
|
5113
5113
|
#bubbleElement
|
|
5114
|
-
class="bubble-menu-wrapper rounded border bg-card text-card-foreground border-border shadow-elevation-2 z-
|
|
5114
|
+
class="bubble-menu-wrapper rounded border bg-card text-card-foreground border-border shadow-elevation-2 z-30"
|
|
5115
5115
|
tiptapBubbleMenu
|
|
5116
5116
|
[editor]="editor"
|
|
5117
5117
|
[props]="config.props!"
|
|
@@ -5768,7 +5768,7 @@ class ToolbarComponent {
|
|
|
5768
5768
|
this.toolbarService.emit('printValue');
|
|
5769
5769
|
}
|
|
5770
5770
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5771
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: ToolbarComponent, isStandalone: true, selector: "document-engine-toolbar", inputs: { editor: "editor", capabilities: "capabilities", config: "config" }, outputs: { action: "action" }, viewQueries: [{ propertyName: "colorBubbleMenu", first: true, predicate: ["colorBubbleMenu"], descendants: true }, { propertyName: "linkBubbleWrapper", first: true, predicate: ["linkBubbleWrapper"], descendants: true }, { propertyName: "imageBubbleMenu", first: true, predicate: ["imageBubbleMenu"], descendants: true }, { propertyName: "specialCharsBubbleMenu", first: true, predicate: ["specialCharsBubbleMenu"], descendants: true }, { propertyName: "dynamicFieldsBubbleMenu", first: true, predicate: ["dynamicFieldsBubbleMenu"], descendants: true }, { propertyName: "templateBubbleMenu", first: true, predicate: ["templateBubbleMenu"], descendants: true }, { propertyName: "tableCreateBubbleMenu", first: true, predicate: ["tableCreateBubbleMenu"], descendants: true }], ngImport: i0, template: "<div class=\"document-engine-document-editor__toolbar\">\n <div class=\"document-engine-document-editor__toolbar-content\">\n <div class=\"document-engine-document-editor__toolbar-left\">\n <!-- History: Undo/Redo -->\n <div *ngIf=\"capabilities.hasHistory\" class=\"document-engine-document-editor__toolbar-group\" data-group=\"history\">\n <button\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canUndo\"\n (click)=\"runAndEmit('undo', editor.chain().focus().undo().run)\"\n title=\"Undo (Ctrl+Z)\"\n >\n <document-engine-icon name=\"undo\"></document-engine-icon>\n </button>\n\n <button\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canRedo\"\n (click)=\"runAndEmit('redo', editor.chain().focus().redo().run)\"\n title=\"Redo\"\n >\n <document-engine-icon name=\"redo\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Text Formatting: Font Size, Line Height, Text Case, Heading -->\n <div\n *ngIf=\"capabilities.hasTextProperty\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"text-property\"\n >\n <!-- Font Size -->\n <document-engine-select\n *ngIf=\"capabilities.hasFontSize\"\n [value]=\"activeFontSize\"\n placeholder=\"Font Size\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Font Size\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"format_size\"></document-engine-icon>\n\n <button documentEngineSelectOption [value]=\"null\">Default</button>\n\n <button\n *ngFor=\"let option of fontSizeOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"setFontSize(option.value)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n\n <!-- Line Height -->\n <document-engine-select\n *ngIf=\"capabilities.hasLineHeight\"\n [value]=\"activeLineHeight\"\n placeholder=\"Line Height\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Line Height\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"format_line_spacing\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of lineHeightOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"setLineHeight(option.value)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n\n <!-- Text Case -->\n <document-engine-select\n *ngIf=\"capabilities.hasTextCase\"\n placeholder=\"Text Case\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Text Case\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"match_case\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of textCaseOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"runAndEmit('setTextCase', editor.chain().focus().textCase(option.value).run)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n\n <!-- Heading -->\n <document-engine-select\n *ngIf=\"capabilities.hasHeading\"\n [value]=\"activeHeading?.toString() || null\"\n placeholder=\"Normal text\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Heading\"\n >\n <button\n *ngFor=\"let option of headingOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value?.toString() || null\"\n [class]=\"option.class\"\n (click)=\"setHeading(option.value?.toString() || null)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n </div>\n\n <!-- Format Utilities: Reset Formatting & Colors -->\n <div\n *ngIf=\"capabilities.hasFormatUtilities\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"format-utilities\"\n >\n <!-- Reset Formatting -->\n <button\n *ngIf=\"capabilities.hasResetFormat\"\n documentEngineButton\n size=\"icon\"\n (click)=\"runAndEmit('resetFormat', editor.chain().focus().resetFormat().run)\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canResetFormat\"\n title=\"Clear Formatting\"\n >\n <document-engine-icon name=\"format_clear\"></document-engine-icon>\n </button>\n\n <!-- Colors: Text/Background -->\n <button\n *ngIf=\"capabilities.hasColors\"\n documentEngineButton\n size=\"icon\"\n title=\"Text Color\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openColorBubble($event, 'text')\"\n >\n <document-engine-icon name=\"format_color_text\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasColors\"\n documentEngineButton\n size=\"icon\"\n title=\"Background Color\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openColorBubble($event, 'fill')\"\n >\n <document-engine-icon name=\"format_color_fill\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Text Styles: Bold/Italic/Underline/Strike -->\n <div\n *ngIf=\"capabilities.basicInline\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"basic-inline\"\n >\n <button\n *ngIf=\"capabilities.hasBold\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBold\"\n (click)=\"runAndEmit('toggleBold', editor.chain().focus().toggleBold().run)\"\n [class.active]=\"editor.isActive('bold')\"\n title=\"Bold\"\n >\n <document-engine-icon name=\"format_bold\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasItalic\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleItalic\"\n (click)=\"runAndEmit('toggleItalic', editor.chain().focus().toggleItalic().run)\"\n [class.active]=\"editor.isActive('italic')\"\n title=\"Italic\"\n >\n <document-engine-icon name=\"format_italic\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasUnderline\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleUnderline\"\n (click)=\"runAndEmit('toggleUnderline', editor.chain().focus().toggleUnderline().run)\"\n [class.active]=\"editor.isActive('underline')\"\n title=\"Underline\"\n >\n <document-engine-icon name=\"format_underline\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasStrike\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleStrike\"\n (click)=\"runAndEmit('toggleStrike', editor.chain().focus().toggleStrike().run)\"\n [class.active]=\"editor.isActive('strike')\"\n title=\"Strikethrough\"\n >\n <document-engine-icon name=\"format_strikethrough\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Text Styles: Sub/Super/Code/Link -->\n <div\n *ngIf=\"capabilities.advancedInline\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"advanced-inline\"\n >\n <button\n *ngIf=\"capabilities.hasSubscript\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleSubscript\"\n (click)=\"runAndEmit('toggleSubscript', editor.chain().focus().toggleSubscript().run)\"\n [class.active]=\"editor.isActive('subscript')\"\n title=\"Subscript\"\n >\n <document-engine-icon name=\"subscript\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasSuperscript\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleSuperscript\"\n (click)=\"runAndEmit('toggleSuperscript', editor.chain().focus().toggleSuperscript().run)\"\n [class.active]=\"editor.isActive('superscript')\"\n title=\"Superscript\"\n >\n <document-engine-icon name=\"superscript\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasCode\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleCode\"\n (click)=\"runAndEmit('toggleCode', editor.chain().focus().toggleCode().run)\"\n [class.active]=\"editor.isActive('code')\"\n title=\"Code\"\n >\n <document-engine-icon name=\"code\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasLink\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleLink\"\n (click)=\"toggleLink()\"\n [class.active]=\"editor.isActive('link')\"\n [title]=\"editor.isActive('link') ? 'Unlink' : 'Link'\"\n >\n <document-engine-icon [name]=\"editor.isActive('link') ? 'link_off' : 'link'\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Alignment & Layout: Text Align, Indent, Lists -->\n <div\n *ngIf=\"capabilities.hasAlignmentLayout\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"alignment-layout\"\n >\n <!-- Text Alignment -->\n <document-engine-select\n *ngIf=\"capabilities.hasTextAlign\"\n [value]=\"activeTextAlign\"\n (valueChange)=\"setTextAlign($event)\"\n placeholder=\"Text Align\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Text Align\"\n >\n <document-engine-icon documentEngineSelectLabel [name]=\"activeTextAlignIcon\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of textAlignOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n >\n <document-engine-icon [name]=\"option.icon\"></document-engine-icon>\n <span>{{ option.label }}</span>\n </button>\n </document-engine-select>\n\n <!-- Indent -->\n <button\n *ngIf=\"capabilities.hasIndent\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canDecreaseIndent\"\n (click)=\"runAndEmit('decreaseIndent', editor.chain().focus().decreaseIndent().run)\"\n title=\"Decrease Indent\"\n >\n <document-engine-icon name=\"format_indent_decrease\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasIndent\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canIncreaseIndent\"\n (click)=\"runAndEmit('increaseIndent', editor.chain().focus().increaseIndent().run)\"\n title=\"Increase Indent\"\n >\n <document-engine-icon name=\"format_indent_increase\"></document-engine-icon>\n </button>\n\n <!-- Lists: Bullet, Numbered (with style) -->\n <button\n *ngIf=\"capabilities.hasLists\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBulletList\"\n (click)=\"runAndEmit('toggleBulletList', editor.chain().focus().toggleBulletList().run)\"\n [class.active]=\"editor.isActive('bulletList')\"\n title=\"Bullet List\"\n >\n <document-engine-icon name=\"format_list_bulleted\"></document-engine-icon>\n </button>\n\n <!-- Numbered List with Style -->\n <document-engine-select\n *ngIf=\"capabilities.hasLists\"\n placeholder=\"Numbered List\"\n labelMode=\"static\"\n [value]=\"\n editor.isActive('customOrderedList')\n ? editor.getAttributes('customOrderedList')['data-list-style-type'] || 'decimal'\n : null\n \"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Numbered List\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"format_list_numbered\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of listStyleOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"setListStyle(option.value)\"\n [class.active]=\"\n editor.isActive('customOrderedList') &&\n editor.getAttributes('customOrderedList')['data-list-style-type'] === option.value\n \"\n >\n <span>{{ option.example }}</span>\n <span>{{ option.label }}</span>\n </button>\n </document-engine-select>\n </div>\n\n <!-- Block Types: Code Block, Blockquote -->\n <div\n *ngIf=\"capabilities.hasBlockTypes\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"block-types\"\n >\n <!-- Blockquote -->\n <button\n *ngIf=\"capabilities.hasBlockquote\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBlockquote\"\n (click)=\"runAndEmit('toggleBlockquote', editor.chain().focus().toggleBlockquote().run)\"\n [class.active]=\"editor.isActive('blockquote')\"\n title=\"Quote\"\n >\n <document-engine-icon name=\"format_quote\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Insert Object: Table, Images, Special Chars, Page Break -->\n <div\n *ngIf=\"capabilities.hasInsertObject\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"insert-object\"\n >\n <button\n *ngIf=\"capabilities.hasTable\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openCreateTableBubble($event)\"\n [class.active]=\"editor.isActive('table')\"\n title=\"Table\"\n >\n <document-engine-icon name=\"table_rows\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasImages\"\n documentEngineButton\n size=\"icon\"\n title=\"Insert Image\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"insertImage($event)\"\n >\n <document-engine-icon name=\"photo\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasSpecialChars\"\n documentEngineButton\n size=\"icon\"\n title=\"Special Character\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openSpecialCharsBubble($event)\"\n >\n <document-engine-icon name=\"special_character\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasPageBreak\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canInsertPageBreak\"\n (click)=\"runAndEmit('insertPageBreak', editor.chain().focus().insertPageBreak().run)\"\n title=\"Insert page break\"\n >\n <document-engine-icon name=\"insert_page_break\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Business Features: Templates, Dynamic Fields, Editable Region -->\n <div\n *ngIf=\"capabilities.hasBusinessFeatures\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"business-features\"\n >\n <button\n *ngIf=\"capabilities.hasDynamicFields\"\n documentEngineButton\n size=\"icon\"\n title=\"Dynamic Field\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openDynamicFieldsBubble($event)\"\n >\n <document-engine-icon name=\"dynamic_form\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasTemplates\"\n documentEngineButton\n size=\"icon\"\n title=\"Template\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openTemplateBubble($event)\"\n >\n <document-engine-icon name=\"description\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasEditableRegion\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"!toolbarState.canToggleEditableRegion || toolbarState.isReadOnly\"\n (click)=\"runAndEmit('toggleEditableRegion', editor.chain().focus().toggleEditableRegion().run)\"\n [class.active]=\"editor.isActive('editableRegion')\"\n title=\"Toggle editable region\"\n >\n <document-engine-icon name=\"restrict_edit\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Actions: Clear Content, Markdown -->\n <div *ngIf=\"capabilities.hasActions\" class=\"document-engine-document-editor__toolbar-group\" data-group=\"actions\">\n <button\n *ngIf=\"capabilities.hasClearContent\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canClearContent\"\n (click)=\"runAndEmit('clear', editor.chain().focus().clear().run)\"\n title=\"Clear all content\"\n >\n <document-engine-icon name=\"clear_all\"></document-engine-icon>\n </button>\n\n <!-- <button\n *ngIf=\"capabilities.hasMarkdown\"\n documentEngineButton\n size=\"icon\"\n (click)=\"downloadAsMarkdown()\"\n title=\"Download as Markdown\"\n >\n <document-engine-icon name=\"markdown\"></document-engine-icon>\n </button> -->\n </div>\n\n <!-- Custom Toolbar Buttons -->\n <div\n *ngIf=\"customToolbarButtons.length > 0\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"custom-buttons\"\n >\n <ng-container *ngFor=\"let button of customToolbarButtons; trackBy: trackByIndex\">\n <!-- Icon Button -->\n <button\n *ngIf=\"button.type === 'icon-button'\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"handleCustomIconButton(button)\"\n [title]=\"button.label || ''\"\n >\n <document-engine-icon [name]=\"button.icon\"></document-engine-icon>\n </button>\n\n <!-- Select Button -->\n <document-engine-select\n *ngIf=\"button.type === 'select-button'\"\n [value]=\"null\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n [title]=\"button.label\"\n >\n <span documentEngineSelectLabel>{{ button.label }}</span>\n\n <button\n *ngFor=\"let option of button.options; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"handleCustomSelectButton(button, option.value)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n </ng-container>\n </div>\n </div>\n\n <!-- Right side actions -->\n <div class=\"document-engine-document-editor__toolbar-right\">\n <button\n *ngIf=\"capabilities.hasPrintButton\"\n documentEngineButton\n size=\"icon\"\n (click)=\"printValue()\"\n title=\"Print Value\"\n >\n <document-engine-icon name=\"print\"></document-engine-icon>\n </button>\n </div>\n </div>\n\n <!-- Color Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n #colorBubbleMenu\n [editor]=\"editor\"\n [config]=\"colorBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Link Bubble Menu -->\n <document-engine-editor-bubble-menu\n *ngIf=\"capabilities.hasLink\"\n #linkBubbleWrapper\n [editor]=\"editor\"\n [config]=\"linkBubbleConfig\"\n ></document-engine-editor-bubble-menu>\n\n <!-- Table Bubble Menu -->\n <document-engine-editor-bubble-menu\n *ngIf=\"capabilities.hasTable\"\n #tableBubbleWrapper\n [editor]=\"editor\"\n [config]=\"tableBubbleConfig\"\n ></document-engine-editor-bubble-menu>\n\n <!-- Image Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasImages\"\n #imageBubbleMenu\n [editor]=\"editor\"\n [config]=\"imageBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Special Characters Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasSpecialChars\"\n #specialCharsBubbleMenu\n [editor]=\"editor\"\n [config]=\"specialCharsBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Dynamic Fields Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasDynamicFields\"\n #dynamicFieldsBubbleMenu\n [editor]=\"editor\"\n [config]=\"dynamicFieldsBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Template Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasTemplates\"\n #templateBubbleMenu\n [editor]=\"editor\"\n [config]=\"templateBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Table Create Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasTable\"\n #tableCreateBubbleMenu\n [editor]=\"editor\"\n [config]=\"tableCreateBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n</div>\n", styles: [":host{position:sticky;top:0;z-index:20}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "document-engine-icon", inputs: ["name"] }, { kind: "directive", type: ButtonDirective, selector: "button[documentEngineButton]", inputs: ["variant", "size"] }, { kind: "component", type: SelectComponent, selector: "document-engine-select", inputs: ["value", "disabled", "labelMode", "variant"], outputs: ["valueChange"] }, { kind: "directive", type: SelectLabelDirective, selector: "[documentEngineSelectLabel]" }, { kind: "directive", type: SelectOptionDirective, selector: "[documentEngineSelectOption]", inputs: ["value", "label", "disabled"] }, { kind: "component", type: ToolbarBubbleMenuComponent, selector: "document-engine-toolbar-bubble-menu", inputs: ["editor", "config"] }, { kind: "component", type: EditorBubbleMenuComponent, selector: "document-engine-editor-bubble-menu", inputs: ["editor", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5771
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: ToolbarComponent, isStandalone: true, selector: "document-engine-toolbar", inputs: { editor: "editor", capabilities: "capabilities", config: "config" }, outputs: { action: "action" }, viewQueries: [{ propertyName: "colorBubbleMenu", first: true, predicate: ["colorBubbleMenu"], descendants: true }, { propertyName: "linkBubbleWrapper", first: true, predicate: ["linkBubbleWrapper"], descendants: true }, { propertyName: "imageBubbleMenu", first: true, predicate: ["imageBubbleMenu"], descendants: true }, { propertyName: "specialCharsBubbleMenu", first: true, predicate: ["specialCharsBubbleMenu"], descendants: true }, { propertyName: "dynamicFieldsBubbleMenu", first: true, predicate: ["dynamicFieldsBubbleMenu"], descendants: true }, { propertyName: "templateBubbleMenu", first: true, predicate: ["templateBubbleMenu"], descendants: true }, { propertyName: "tableCreateBubbleMenu", first: true, predicate: ["tableCreateBubbleMenu"], descendants: true }], ngImport: i0, template: "<div class=\"document-engine-document-editor__toolbar\">\n <div class=\"document-engine-document-editor__toolbar-content\">\n <div class=\"document-engine-document-editor__toolbar-left\">\n <!-- History: Undo/Redo -->\n <div *ngIf=\"capabilities.hasHistory\" class=\"document-engine-document-editor__toolbar-group\" data-group=\"history\">\n <button\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canUndo\"\n (click)=\"runAndEmit('undo', editor.chain().focus().undo().run)\"\n title=\"Undo (Ctrl+Z)\"\n >\n <document-engine-icon name=\"undo\"></document-engine-icon>\n </button>\n\n <button\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canRedo\"\n (click)=\"runAndEmit('redo', editor.chain().focus().redo().run)\"\n title=\"Redo\"\n >\n <document-engine-icon name=\"redo\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Text Formatting: Font Size, Line Height, Text Case, Heading -->\n <div\n *ngIf=\"capabilities.hasTextProperty\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"text-property\"\n >\n <!-- Font Size -->\n <document-engine-select\n *ngIf=\"capabilities.hasFontSize\"\n [value]=\"activeFontSize\"\n placeholder=\"Font Size\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Font Size\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"format_size\"></document-engine-icon>\n\n <button documentEngineSelectOption [value]=\"null\">Default</button>\n\n <button\n *ngFor=\"let option of fontSizeOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"setFontSize(option.value)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n\n <!-- Line Height -->\n <document-engine-select\n *ngIf=\"capabilities.hasLineHeight\"\n [value]=\"activeLineHeight\"\n placeholder=\"Line Height\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Line Height\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"format_line_spacing\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of lineHeightOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"setLineHeight(option.value)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n\n <!-- Text Case -->\n <document-engine-select\n *ngIf=\"capabilities.hasTextCase\"\n placeholder=\"Text Case\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Text Case\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"match_case\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of textCaseOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"runAndEmit('setTextCase', editor.chain().focus().textCase(option.value).run)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n\n <!-- Heading -->\n <document-engine-select\n *ngIf=\"capabilities.hasHeading\"\n [value]=\"activeHeading?.toString() || null\"\n placeholder=\"Normal text\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Heading\"\n >\n <button\n *ngFor=\"let option of headingOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value?.toString() || null\"\n [class]=\"option.class\"\n (click)=\"setHeading(option.value?.toString() || null)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n </div>\n\n <!-- Format Utilities: Reset Formatting & Colors -->\n <div\n *ngIf=\"capabilities.hasFormatUtilities\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"format-utilities\"\n >\n <!-- Reset Formatting -->\n <button\n *ngIf=\"capabilities.hasResetFormat\"\n documentEngineButton\n size=\"icon\"\n (click)=\"runAndEmit('resetFormat', editor.chain().focus().resetFormat().run)\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canResetFormat\"\n title=\"Clear Formatting\"\n >\n <document-engine-icon name=\"format_clear\"></document-engine-icon>\n </button>\n\n <!-- Colors: Text/Background -->\n <button\n *ngIf=\"capabilities.hasColors\"\n documentEngineButton\n size=\"icon\"\n title=\"Text Color\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openColorBubble($event, 'text')\"\n >\n <document-engine-icon name=\"format_color_text\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasColors\"\n documentEngineButton\n size=\"icon\"\n title=\"Background Color\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openColorBubble($event, 'fill')\"\n >\n <document-engine-icon name=\"format_color_fill\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Text Styles: Bold/Italic/Underline/Strike -->\n <div\n *ngIf=\"capabilities.basicInline\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"basic-inline\"\n >\n <button\n *ngIf=\"capabilities.hasBold\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBold\"\n (click)=\"runAndEmit('toggleBold', editor.chain().focus().toggleBold().run)\"\n [class.active]=\"editor.isActive('bold')\"\n title=\"Bold\"\n >\n <document-engine-icon name=\"format_bold\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasItalic\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleItalic\"\n (click)=\"runAndEmit('toggleItalic', editor.chain().focus().toggleItalic().run)\"\n [class.active]=\"editor.isActive('italic')\"\n title=\"Italic\"\n >\n <document-engine-icon name=\"format_italic\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasUnderline\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleUnderline\"\n (click)=\"runAndEmit('toggleUnderline', editor.chain().focus().toggleUnderline().run)\"\n [class.active]=\"editor.isActive('underline')\"\n title=\"Underline\"\n >\n <document-engine-icon name=\"format_underline\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasStrike\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleStrike\"\n (click)=\"runAndEmit('toggleStrike', editor.chain().focus().toggleStrike().run)\"\n [class.active]=\"editor.isActive('strike')\"\n title=\"Strikethrough\"\n >\n <document-engine-icon name=\"format_strikethrough\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Text Styles: Sub/Super/Code/Link -->\n <div\n *ngIf=\"capabilities.advancedInline\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"advanced-inline\"\n >\n <button\n *ngIf=\"capabilities.hasSubscript\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleSubscript\"\n (click)=\"runAndEmit('toggleSubscript', editor.chain().focus().toggleSubscript().run)\"\n [class.active]=\"editor.isActive('subscript')\"\n title=\"Subscript\"\n >\n <document-engine-icon name=\"subscript\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasSuperscript\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleSuperscript\"\n (click)=\"runAndEmit('toggleSuperscript', editor.chain().focus().toggleSuperscript().run)\"\n [class.active]=\"editor.isActive('superscript')\"\n title=\"Superscript\"\n >\n <document-engine-icon name=\"superscript\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasCode\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleCode\"\n (click)=\"runAndEmit('toggleCode', editor.chain().focus().toggleCode().run)\"\n [class.active]=\"editor.isActive('code')\"\n title=\"Code\"\n >\n <document-engine-icon name=\"code\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasLink\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleLink\"\n (click)=\"toggleLink()\"\n [class.active]=\"editor.isActive('link')\"\n [title]=\"editor.isActive('link') ? 'Unlink' : 'Link'\"\n >\n <document-engine-icon [name]=\"editor.isActive('link') ? 'link_off' : 'link'\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Alignment & Layout: Text Align, Indent -->\n <div\n *ngIf=\"capabilities.hasAlignmentLayout\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"alignment-layout\"\n >\n <!-- Text Alignment -->\n <document-engine-select\n *ngIf=\"capabilities.hasTextAlign\"\n [value]=\"activeTextAlign\"\n (valueChange)=\"setTextAlign($event)\"\n placeholder=\"Text Align\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Text Align\"\n >\n <document-engine-icon documentEngineSelectLabel [name]=\"activeTextAlignIcon\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of textAlignOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n >\n <document-engine-icon [name]=\"option.icon\"></document-engine-icon>\n <span>{{ option.label }}</span>\n </button>\n </document-engine-select>\n\n <!-- Indent -->\n <button\n *ngIf=\"capabilities.hasIndent\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canDecreaseIndent\"\n (click)=\"runAndEmit('decreaseIndent', editor.chain().focus().decreaseIndent().run)\"\n title=\"Decrease Indent\"\n >\n <document-engine-icon name=\"format_indent_decrease\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasIndent\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canIncreaseIndent\"\n (click)=\"runAndEmit('increaseIndent', editor.chain().focus().increaseIndent().run)\"\n title=\"Increase Indent\"\n >\n <document-engine-icon name=\"format_indent_increase\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Lists -->\n <div\n *ngIf=\"capabilities.hasAlignmentLayout\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"alignment-layout\"\n >\n <!-- Lists: Bullet, Numbered (with style) -->\n <button\n *ngIf=\"capabilities.hasLists\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBulletList\"\n (click)=\"runAndEmit('toggleBulletList', editor.chain().focus().toggleBulletList().run)\"\n [class.active]=\"editor.isActive('bulletList')\"\n title=\"Bullet List\"\n >\n <document-engine-icon name=\"format_list_bulleted\"></document-engine-icon>\n </button>\n\n <!-- Numbered List with Style -->\n <document-engine-select\n *ngIf=\"capabilities.hasLists\"\n placeholder=\"Numbered List\"\n labelMode=\"static\"\n [value]=\"\n editor.isActive('customOrderedList')\n ? editor.getAttributes('customOrderedList')['data-list-style-type'] || 'decimal'\n : null\n \"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Numbered List\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"format_list_numbered\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of listStyleOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"setListStyle(option.value)\"\n [class.active]=\"\n editor.isActive('customOrderedList') &&\n editor.getAttributes('customOrderedList')['data-list-style-type'] === option.value\n \"\n >\n <span>{{ option.example }}</span>\n <span>{{ option.label }}</span>\n </button>\n </document-engine-select>\n </div>\n\n <!-- Block Types: Code Block, Blockquote -->\n <div\n *ngIf=\"capabilities.hasBlockTypes\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"block-types\"\n >\n <!-- Blockquote -->\n <button\n *ngIf=\"capabilities.hasBlockquote\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBlockquote\"\n (click)=\"runAndEmit('toggleBlockquote', editor.chain().focus().toggleBlockquote().run)\"\n [class.active]=\"editor.isActive('blockquote')\"\n title=\"Quote\"\n >\n <document-engine-icon name=\"format_quote\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Insert Object: Table, Images, Special Chars, Page Break -->\n <div\n *ngIf=\"capabilities.hasInsertObject\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"insert-object\"\n >\n <button\n *ngIf=\"capabilities.hasTable\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openCreateTableBubble($event)\"\n [class.active]=\"editor.isActive('table')\"\n title=\"Table\"\n >\n <document-engine-icon name=\"table_rows\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasImages\"\n documentEngineButton\n size=\"icon\"\n title=\"Insert Image\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"insertImage($event)\"\n >\n <document-engine-icon name=\"photo\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasSpecialChars\"\n documentEngineButton\n size=\"icon\"\n title=\"Special Character\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openSpecialCharsBubble($event)\"\n >\n <document-engine-icon name=\"special_character\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasPageBreak\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canInsertPageBreak\"\n (click)=\"runAndEmit('insertPageBreak', editor.chain().focus().insertPageBreak().run)\"\n title=\"Insert page break\"\n >\n <document-engine-icon name=\"insert_page_break\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Business Features: Templates, Dynamic Fields, Editable Region -->\n <div\n *ngIf=\"capabilities.hasBusinessFeatures\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"business-features\"\n >\n <button\n *ngIf=\"capabilities.hasDynamicFields\"\n documentEngineButton\n size=\"icon\"\n title=\"Dynamic Field\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openDynamicFieldsBubble($event)\"\n >\n <document-engine-icon name=\"dynamic_form\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasTemplates\"\n documentEngineButton\n size=\"icon\"\n title=\"Template\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openTemplateBubble($event)\"\n >\n <document-engine-icon name=\"description\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasEditableRegion\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"!toolbarState.canToggleEditableRegion || toolbarState.isReadOnly\"\n (click)=\"runAndEmit('toggleEditableRegion', editor.chain().focus().toggleEditableRegion().run)\"\n [class.active]=\"editor.isActive('editableRegion')\"\n title=\"Toggle editable region\"\n >\n <document-engine-icon name=\"restrict_edit\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Actions: Clear Content, Markdown -->\n <div *ngIf=\"capabilities.hasActions\" class=\"document-engine-document-editor__toolbar-group\" data-group=\"actions\">\n <button\n *ngIf=\"capabilities.hasClearContent\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canClearContent\"\n (click)=\"runAndEmit('clear', editor.chain().focus().clear().run)\"\n title=\"Clear all content\"\n >\n <document-engine-icon name=\"clear_all\"></document-engine-icon>\n </button>\n\n <!-- <button\n *ngIf=\"capabilities.hasMarkdown\"\n documentEngineButton\n size=\"icon\"\n (click)=\"downloadAsMarkdown()\"\n title=\"Download as Markdown\"\n >\n <document-engine-icon name=\"markdown\"></document-engine-icon>\n </button> -->\n </div>\n\n <!-- Custom Toolbar Buttons -->\n <div\n *ngIf=\"customToolbarButtons.length > 0\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"custom-buttons\"\n >\n <ng-container *ngFor=\"let button of customToolbarButtons; trackBy: trackByIndex\">\n <!-- Icon Button -->\n <button\n *ngIf=\"button.type === 'icon-button'\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"handleCustomIconButton(button)\"\n [title]=\"button.label || ''\"\n >\n <document-engine-icon [name]=\"button.icon\"></document-engine-icon>\n </button>\n\n <!-- Select Button -->\n <document-engine-select\n *ngIf=\"button.type === 'select-button'\"\n [value]=\"null\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n [title]=\"button.label\"\n >\n <span documentEngineSelectLabel>{{ button.label }}</span>\n\n <button\n *ngFor=\"let option of button.options; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"handleCustomSelectButton(button, option.value)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n </ng-container>\n </div>\n </div>\n\n <!-- Right side actions -->\n <div class=\"document-engine-document-editor__toolbar-right\">\n <button\n *ngIf=\"capabilities.hasPrintButton\"\n documentEngineButton\n size=\"icon\"\n (click)=\"printValue()\"\n title=\"Print Value\"\n >\n <document-engine-icon name=\"print\"></document-engine-icon>\n </button>\n </div>\n </div>\n\n <!-- Color Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n #colorBubbleMenu\n [editor]=\"editor\"\n [config]=\"colorBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Link Bubble Menu -->\n <document-engine-editor-bubble-menu\n *ngIf=\"capabilities.hasLink\"\n #linkBubbleWrapper\n [editor]=\"editor\"\n [config]=\"linkBubbleConfig\"\n ></document-engine-editor-bubble-menu>\n\n <!-- Table Bubble Menu -->\n <document-engine-editor-bubble-menu\n *ngIf=\"capabilities.hasTable\"\n #tableBubbleWrapper\n [editor]=\"editor\"\n [config]=\"tableBubbleConfig\"\n ></document-engine-editor-bubble-menu>\n\n <!-- Image Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasImages\"\n #imageBubbleMenu\n [editor]=\"editor\"\n [config]=\"imageBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Special Characters Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasSpecialChars\"\n #specialCharsBubbleMenu\n [editor]=\"editor\"\n [config]=\"specialCharsBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Dynamic Fields Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasDynamicFields\"\n #dynamicFieldsBubbleMenu\n [editor]=\"editor\"\n [config]=\"dynamicFieldsBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Template Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasTemplates\"\n #templateBubbleMenu\n [editor]=\"editor\"\n [config]=\"templateBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Table Create Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasTable\"\n #tableCreateBubbleMenu\n [editor]=\"editor\"\n [config]=\"tableCreateBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n</div>\n", styles: [":host{position:sticky;top:0;z-index:20}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "document-engine-icon", inputs: ["name"] }, { kind: "directive", type: ButtonDirective, selector: "button[documentEngineButton]", inputs: ["variant", "size"] }, { kind: "component", type: SelectComponent, selector: "document-engine-select", inputs: ["value", "disabled", "labelMode", "variant"], outputs: ["valueChange"] }, { kind: "directive", type: SelectLabelDirective, selector: "[documentEngineSelectLabel]" }, { kind: "directive", type: SelectOptionDirective, selector: "[documentEngineSelectOption]", inputs: ["value", "label", "disabled"] }, { kind: "component", type: ToolbarBubbleMenuComponent, selector: "document-engine-toolbar-bubble-menu", inputs: ["editor", "config"] }, { kind: "component", type: EditorBubbleMenuComponent, selector: "document-engine-editor-bubble-menu", inputs: ["editor", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5772
5772
|
}
|
|
5773
5773
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ToolbarComponent, decorators: [{
|
|
5774
5774
|
type: Component,
|
|
@@ -5781,7 +5781,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
5781
5781
|
SelectOptionDirective,
|
|
5782
5782
|
ToolbarBubbleMenuComponent,
|
|
5783
5783
|
EditorBubbleMenuComponent,
|
|
5784
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"document-engine-document-editor__toolbar\">\n <div class=\"document-engine-document-editor__toolbar-content\">\n <div class=\"document-engine-document-editor__toolbar-left\">\n <!-- History: Undo/Redo -->\n <div *ngIf=\"capabilities.hasHistory\" class=\"document-engine-document-editor__toolbar-group\" data-group=\"history\">\n <button\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canUndo\"\n (click)=\"runAndEmit('undo', editor.chain().focus().undo().run)\"\n title=\"Undo (Ctrl+Z)\"\n >\n <document-engine-icon name=\"undo\"></document-engine-icon>\n </button>\n\n <button\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canRedo\"\n (click)=\"runAndEmit('redo', editor.chain().focus().redo().run)\"\n title=\"Redo\"\n >\n <document-engine-icon name=\"redo\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Text Formatting: Font Size, Line Height, Text Case, Heading -->\n <div\n *ngIf=\"capabilities.hasTextProperty\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"text-property\"\n >\n <!-- Font Size -->\n <document-engine-select\n *ngIf=\"capabilities.hasFontSize\"\n [value]=\"activeFontSize\"\n placeholder=\"Font Size\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Font Size\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"format_size\"></document-engine-icon>\n\n <button documentEngineSelectOption [value]=\"null\">Default</button>\n\n <button\n *ngFor=\"let option of fontSizeOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"setFontSize(option.value)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n\n <!-- Line Height -->\n <document-engine-select\n *ngIf=\"capabilities.hasLineHeight\"\n [value]=\"activeLineHeight\"\n placeholder=\"Line Height\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Line Height\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"format_line_spacing\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of lineHeightOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"setLineHeight(option.value)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n\n <!-- Text Case -->\n <document-engine-select\n *ngIf=\"capabilities.hasTextCase\"\n placeholder=\"Text Case\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Text Case\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"match_case\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of textCaseOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"runAndEmit('setTextCase', editor.chain().focus().textCase(option.value).run)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n\n <!-- Heading -->\n <document-engine-select\n *ngIf=\"capabilities.hasHeading\"\n [value]=\"activeHeading?.toString() || null\"\n placeholder=\"Normal text\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Heading\"\n >\n <button\n *ngFor=\"let option of headingOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value?.toString() || null\"\n [class]=\"option.class\"\n (click)=\"setHeading(option.value?.toString() || null)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n </div>\n\n <!-- Format Utilities: Reset Formatting & Colors -->\n <div\n *ngIf=\"capabilities.hasFormatUtilities\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"format-utilities\"\n >\n <!-- Reset Formatting -->\n <button\n *ngIf=\"capabilities.hasResetFormat\"\n documentEngineButton\n size=\"icon\"\n (click)=\"runAndEmit('resetFormat', editor.chain().focus().resetFormat().run)\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canResetFormat\"\n title=\"Clear Formatting\"\n >\n <document-engine-icon name=\"format_clear\"></document-engine-icon>\n </button>\n\n <!-- Colors: Text/Background -->\n <button\n *ngIf=\"capabilities.hasColors\"\n documentEngineButton\n size=\"icon\"\n title=\"Text Color\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openColorBubble($event, 'text')\"\n >\n <document-engine-icon name=\"format_color_text\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasColors\"\n documentEngineButton\n size=\"icon\"\n title=\"Background Color\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openColorBubble($event, 'fill')\"\n >\n <document-engine-icon name=\"format_color_fill\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Text Styles: Bold/Italic/Underline/Strike -->\n <div\n *ngIf=\"capabilities.basicInline\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"basic-inline\"\n >\n <button\n *ngIf=\"capabilities.hasBold\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBold\"\n (click)=\"runAndEmit('toggleBold', editor.chain().focus().toggleBold().run)\"\n [class.active]=\"editor.isActive('bold')\"\n title=\"Bold\"\n >\n <document-engine-icon name=\"format_bold\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasItalic\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleItalic\"\n (click)=\"runAndEmit('toggleItalic', editor.chain().focus().toggleItalic().run)\"\n [class.active]=\"editor.isActive('italic')\"\n title=\"Italic\"\n >\n <document-engine-icon name=\"format_italic\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasUnderline\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleUnderline\"\n (click)=\"runAndEmit('toggleUnderline', editor.chain().focus().toggleUnderline().run)\"\n [class.active]=\"editor.isActive('underline')\"\n title=\"Underline\"\n >\n <document-engine-icon name=\"format_underline\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasStrike\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleStrike\"\n (click)=\"runAndEmit('toggleStrike', editor.chain().focus().toggleStrike().run)\"\n [class.active]=\"editor.isActive('strike')\"\n title=\"Strikethrough\"\n >\n <document-engine-icon name=\"format_strikethrough\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Text Styles: Sub/Super/Code/Link -->\n <div\n *ngIf=\"capabilities.advancedInline\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"advanced-inline\"\n >\n <button\n *ngIf=\"capabilities.hasSubscript\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleSubscript\"\n (click)=\"runAndEmit('toggleSubscript', editor.chain().focus().toggleSubscript().run)\"\n [class.active]=\"editor.isActive('subscript')\"\n title=\"Subscript\"\n >\n <document-engine-icon name=\"subscript\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasSuperscript\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleSuperscript\"\n (click)=\"runAndEmit('toggleSuperscript', editor.chain().focus().toggleSuperscript().run)\"\n [class.active]=\"editor.isActive('superscript')\"\n title=\"Superscript\"\n >\n <document-engine-icon name=\"superscript\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasCode\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleCode\"\n (click)=\"runAndEmit('toggleCode', editor.chain().focus().toggleCode().run)\"\n [class.active]=\"editor.isActive('code')\"\n title=\"Code\"\n >\n <document-engine-icon name=\"code\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasLink\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleLink\"\n (click)=\"toggleLink()\"\n [class.active]=\"editor.isActive('link')\"\n [title]=\"editor.isActive('link') ? 'Unlink' : 'Link'\"\n >\n <document-engine-icon [name]=\"editor.isActive('link') ? 'link_off' : 'link'\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Alignment & Layout: Text Align, Indent, Lists -->\n <div\n *ngIf=\"capabilities.hasAlignmentLayout\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"alignment-layout\"\n >\n <!-- Text Alignment -->\n <document-engine-select\n *ngIf=\"capabilities.hasTextAlign\"\n [value]=\"activeTextAlign\"\n (valueChange)=\"setTextAlign($event)\"\n placeholder=\"Text Align\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Text Align\"\n >\n <document-engine-icon documentEngineSelectLabel [name]=\"activeTextAlignIcon\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of textAlignOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n >\n <document-engine-icon [name]=\"option.icon\"></document-engine-icon>\n <span>{{ option.label }}</span>\n </button>\n </document-engine-select>\n\n <!-- Indent -->\n <button\n *ngIf=\"capabilities.hasIndent\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canDecreaseIndent\"\n (click)=\"runAndEmit('decreaseIndent', editor.chain().focus().decreaseIndent().run)\"\n title=\"Decrease Indent\"\n >\n <document-engine-icon name=\"format_indent_decrease\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasIndent\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canIncreaseIndent\"\n (click)=\"runAndEmit('increaseIndent', editor.chain().focus().increaseIndent().run)\"\n title=\"Increase Indent\"\n >\n <document-engine-icon name=\"format_indent_increase\"></document-engine-icon>\n </button>\n\n <!-- Lists: Bullet, Numbered (with style) -->\n <button\n *ngIf=\"capabilities.hasLists\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBulletList\"\n (click)=\"runAndEmit('toggleBulletList', editor.chain().focus().toggleBulletList().run)\"\n [class.active]=\"editor.isActive('bulletList')\"\n title=\"Bullet List\"\n >\n <document-engine-icon name=\"format_list_bulleted\"></document-engine-icon>\n </button>\n\n <!-- Numbered List with Style -->\n <document-engine-select\n *ngIf=\"capabilities.hasLists\"\n placeholder=\"Numbered List\"\n labelMode=\"static\"\n [value]=\"\n editor.isActive('customOrderedList')\n ? editor.getAttributes('customOrderedList')['data-list-style-type'] || 'decimal'\n : null\n \"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Numbered List\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"format_list_numbered\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of listStyleOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"setListStyle(option.value)\"\n [class.active]=\"\n editor.isActive('customOrderedList') &&\n editor.getAttributes('customOrderedList')['data-list-style-type'] === option.value\n \"\n >\n <span>{{ option.example }}</span>\n <span>{{ option.label }}</span>\n </button>\n </document-engine-select>\n </div>\n\n <!-- Block Types: Code Block, Blockquote -->\n <div\n *ngIf=\"capabilities.hasBlockTypes\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"block-types\"\n >\n <!-- Blockquote -->\n <button\n *ngIf=\"capabilities.hasBlockquote\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBlockquote\"\n (click)=\"runAndEmit('toggleBlockquote', editor.chain().focus().toggleBlockquote().run)\"\n [class.active]=\"editor.isActive('blockquote')\"\n title=\"Quote\"\n >\n <document-engine-icon name=\"format_quote\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Insert Object: Table, Images, Special Chars, Page Break -->\n <div\n *ngIf=\"capabilities.hasInsertObject\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"insert-object\"\n >\n <button\n *ngIf=\"capabilities.hasTable\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openCreateTableBubble($event)\"\n [class.active]=\"editor.isActive('table')\"\n title=\"Table\"\n >\n <document-engine-icon name=\"table_rows\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasImages\"\n documentEngineButton\n size=\"icon\"\n title=\"Insert Image\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"insertImage($event)\"\n >\n <document-engine-icon name=\"photo\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasSpecialChars\"\n documentEngineButton\n size=\"icon\"\n title=\"Special Character\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openSpecialCharsBubble($event)\"\n >\n <document-engine-icon name=\"special_character\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasPageBreak\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canInsertPageBreak\"\n (click)=\"runAndEmit('insertPageBreak', editor.chain().focus().insertPageBreak().run)\"\n title=\"Insert page break\"\n >\n <document-engine-icon name=\"insert_page_break\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Business Features: Templates, Dynamic Fields, Editable Region -->\n <div\n *ngIf=\"capabilities.hasBusinessFeatures\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"business-features\"\n >\n <button\n *ngIf=\"capabilities.hasDynamicFields\"\n documentEngineButton\n size=\"icon\"\n title=\"Dynamic Field\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openDynamicFieldsBubble($event)\"\n >\n <document-engine-icon name=\"dynamic_form\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasTemplates\"\n documentEngineButton\n size=\"icon\"\n title=\"Template\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openTemplateBubble($event)\"\n >\n <document-engine-icon name=\"description\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasEditableRegion\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"!toolbarState.canToggleEditableRegion || toolbarState.isReadOnly\"\n (click)=\"runAndEmit('toggleEditableRegion', editor.chain().focus().toggleEditableRegion().run)\"\n [class.active]=\"editor.isActive('editableRegion')\"\n title=\"Toggle editable region\"\n >\n <document-engine-icon name=\"restrict_edit\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Actions: Clear Content, Markdown -->\n <div *ngIf=\"capabilities.hasActions\" class=\"document-engine-document-editor__toolbar-group\" data-group=\"actions\">\n <button\n *ngIf=\"capabilities.hasClearContent\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canClearContent\"\n (click)=\"runAndEmit('clear', editor.chain().focus().clear().run)\"\n title=\"Clear all content\"\n >\n <document-engine-icon name=\"clear_all\"></document-engine-icon>\n </button>\n\n <!-- <button\n *ngIf=\"capabilities.hasMarkdown\"\n documentEngineButton\n size=\"icon\"\n (click)=\"downloadAsMarkdown()\"\n title=\"Download as Markdown\"\n >\n <document-engine-icon name=\"markdown\"></document-engine-icon>\n </button> -->\n </div>\n\n <!-- Custom Toolbar Buttons -->\n <div\n *ngIf=\"customToolbarButtons.length > 0\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"custom-buttons\"\n >\n <ng-container *ngFor=\"let button of customToolbarButtons; trackBy: trackByIndex\">\n <!-- Icon Button -->\n <button\n *ngIf=\"button.type === 'icon-button'\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"handleCustomIconButton(button)\"\n [title]=\"button.label || ''\"\n >\n <document-engine-icon [name]=\"button.icon\"></document-engine-icon>\n </button>\n\n <!-- Select Button -->\n <document-engine-select\n *ngIf=\"button.type === 'select-button'\"\n [value]=\"null\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n [title]=\"button.label\"\n >\n <span documentEngineSelectLabel>{{ button.label }}</span>\n\n <button\n *ngFor=\"let option of button.options; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"handleCustomSelectButton(button, option.value)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n </ng-container>\n </div>\n </div>\n\n <!-- Right side actions -->\n <div class=\"document-engine-document-editor__toolbar-right\">\n <button\n *ngIf=\"capabilities.hasPrintButton\"\n documentEngineButton\n size=\"icon\"\n (click)=\"printValue()\"\n title=\"Print Value\"\n >\n <document-engine-icon name=\"print\"></document-engine-icon>\n </button>\n </div>\n </div>\n\n <!-- Color Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n #colorBubbleMenu\n [editor]=\"editor\"\n [config]=\"colorBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Link Bubble Menu -->\n <document-engine-editor-bubble-menu\n *ngIf=\"capabilities.hasLink\"\n #linkBubbleWrapper\n [editor]=\"editor\"\n [config]=\"linkBubbleConfig\"\n ></document-engine-editor-bubble-menu>\n\n <!-- Table Bubble Menu -->\n <document-engine-editor-bubble-menu\n *ngIf=\"capabilities.hasTable\"\n #tableBubbleWrapper\n [editor]=\"editor\"\n [config]=\"tableBubbleConfig\"\n ></document-engine-editor-bubble-menu>\n\n <!-- Image Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasImages\"\n #imageBubbleMenu\n [editor]=\"editor\"\n [config]=\"imageBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Special Characters Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasSpecialChars\"\n #specialCharsBubbleMenu\n [editor]=\"editor\"\n [config]=\"specialCharsBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Dynamic Fields Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasDynamicFields\"\n #dynamicFieldsBubbleMenu\n [editor]=\"editor\"\n [config]=\"dynamicFieldsBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Template Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasTemplates\"\n #templateBubbleMenu\n [editor]=\"editor\"\n [config]=\"templateBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Table Create Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasTable\"\n #tableCreateBubbleMenu\n [editor]=\"editor\"\n [config]=\"tableCreateBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n</div>\n", styles: [":host{position:sticky;top:0;z-index:20}\n"] }]
|
|
5784
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"document-engine-document-editor__toolbar\">\n <div class=\"document-engine-document-editor__toolbar-content\">\n <div class=\"document-engine-document-editor__toolbar-left\">\n <!-- History: Undo/Redo -->\n <div *ngIf=\"capabilities.hasHistory\" class=\"document-engine-document-editor__toolbar-group\" data-group=\"history\">\n <button\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canUndo\"\n (click)=\"runAndEmit('undo', editor.chain().focus().undo().run)\"\n title=\"Undo (Ctrl+Z)\"\n >\n <document-engine-icon name=\"undo\"></document-engine-icon>\n </button>\n\n <button\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canRedo\"\n (click)=\"runAndEmit('redo', editor.chain().focus().redo().run)\"\n title=\"Redo\"\n >\n <document-engine-icon name=\"redo\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Text Formatting: Font Size, Line Height, Text Case, Heading -->\n <div\n *ngIf=\"capabilities.hasTextProperty\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"text-property\"\n >\n <!-- Font Size -->\n <document-engine-select\n *ngIf=\"capabilities.hasFontSize\"\n [value]=\"activeFontSize\"\n placeholder=\"Font Size\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Font Size\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"format_size\"></document-engine-icon>\n\n <button documentEngineSelectOption [value]=\"null\">Default</button>\n\n <button\n *ngFor=\"let option of fontSizeOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"setFontSize(option.value)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n\n <!-- Line Height -->\n <document-engine-select\n *ngIf=\"capabilities.hasLineHeight\"\n [value]=\"activeLineHeight\"\n placeholder=\"Line Height\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Line Height\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"format_line_spacing\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of lineHeightOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"setLineHeight(option.value)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n\n <!-- Text Case -->\n <document-engine-select\n *ngIf=\"capabilities.hasTextCase\"\n placeholder=\"Text Case\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Text Case\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"match_case\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of textCaseOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"runAndEmit('setTextCase', editor.chain().focus().textCase(option.value).run)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n\n <!-- Heading -->\n <document-engine-select\n *ngIf=\"capabilities.hasHeading\"\n [value]=\"activeHeading?.toString() || null\"\n placeholder=\"Normal text\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Heading\"\n >\n <button\n *ngFor=\"let option of headingOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value?.toString() || null\"\n [class]=\"option.class\"\n (click)=\"setHeading(option.value?.toString() || null)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n </div>\n\n <!-- Format Utilities: Reset Formatting & Colors -->\n <div\n *ngIf=\"capabilities.hasFormatUtilities\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"format-utilities\"\n >\n <!-- Reset Formatting -->\n <button\n *ngIf=\"capabilities.hasResetFormat\"\n documentEngineButton\n size=\"icon\"\n (click)=\"runAndEmit('resetFormat', editor.chain().focus().resetFormat().run)\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canResetFormat\"\n title=\"Clear Formatting\"\n >\n <document-engine-icon name=\"format_clear\"></document-engine-icon>\n </button>\n\n <!-- Colors: Text/Background -->\n <button\n *ngIf=\"capabilities.hasColors\"\n documentEngineButton\n size=\"icon\"\n title=\"Text Color\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openColorBubble($event, 'text')\"\n >\n <document-engine-icon name=\"format_color_text\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasColors\"\n documentEngineButton\n size=\"icon\"\n title=\"Background Color\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openColorBubble($event, 'fill')\"\n >\n <document-engine-icon name=\"format_color_fill\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Text Styles: Bold/Italic/Underline/Strike -->\n <div\n *ngIf=\"capabilities.basicInline\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"basic-inline\"\n >\n <button\n *ngIf=\"capabilities.hasBold\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBold\"\n (click)=\"runAndEmit('toggleBold', editor.chain().focus().toggleBold().run)\"\n [class.active]=\"editor.isActive('bold')\"\n title=\"Bold\"\n >\n <document-engine-icon name=\"format_bold\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasItalic\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleItalic\"\n (click)=\"runAndEmit('toggleItalic', editor.chain().focus().toggleItalic().run)\"\n [class.active]=\"editor.isActive('italic')\"\n title=\"Italic\"\n >\n <document-engine-icon name=\"format_italic\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasUnderline\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleUnderline\"\n (click)=\"runAndEmit('toggleUnderline', editor.chain().focus().toggleUnderline().run)\"\n [class.active]=\"editor.isActive('underline')\"\n title=\"Underline\"\n >\n <document-engine-icon name=\"format_underline\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasStrike\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleStrike\"\n (click)=\"runAndEmit('toggleStrike', editor.chain().focus().toggleStrike().run)\"\n [class.active]=\"editor.isActive('strike')\"\n title=\"Strikethrough\"\n >\n <document-engine-icon name=\"format_strikethrough\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Text Styles: Sub/Super/Code/Link -->\n <div\n *ngIf=\"capabilities.advancedInline\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"advanced-inline\"\n >\n <button\n *ngIf=\"capabilities.hasSubscript\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleSubscript\"\n (click)=\"runAndEmit('toggleSubscript', editor.chain().focus().toggleSubscript().run)\"\n [class.active]=\"editor.isActive('subscript')\"\n title=\"Subscript\"\n >\n <document-engine-icon name=\"subscript\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasSuperscript\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleSuperscript\"\n (click)=\"runAndEmit('toggleSuperscript', editor.chain().focus().toggleSuperscript().run)\"\n [class.active]=\"editor.isActive('superscript')\"\n title=\"Superscript\"\n >\n <document-engine-icon name=\"superscript\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasCode\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleCode\"\n (click)=\"runAndEmit('toggleCode', editor.chain().focus().toggleCode().run)\"\n [class.active]=\"editor.isActive('code')\"\n title=\"Code\"\n >\n <document-engine-icon name=\"code\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasLink\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleLink\"\n (click)=\"toggleLink()\"\n [class.active]=\"editor.isActive('link')\"\n [title]=\"editor.isActive('link') ? 'Unlink' : 'Link'\"\n >\n <document-engine-icon [name]=\"editor.isActive('link') ? 'link_off' : 'link'\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Alignment & Layout: Text Align, Indent -->\n <div\n *ngIf=\"capabilities.hasAlignmentLayout\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"alignment-layout\"\n >\n <!-- Text Alignment -->\n <document-engine-select\n *ngIf=\"capabilities.hasTextAlign\"\n [value]=\"activeTextAlign\"\n (valueChange)=\"setTextAlign($event)\"\n placeholder=\"Text Align\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Text Align\"\n >\n <document-engine-icon documentEngineSelectLabel [name]=\"activeTextAlignIcon\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of textAlignOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n >\n <document-engine-icon [name]=\"option.icon\"></document-engine-icon>\n <span>{{ option.label }}</span>\n </button>\n </document-engine-select>\n\n <!-- Indent -->\n <button\n *ngIf=\"capabilities.hasIndent\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canDecreaseIndent\"\n (click)=\"runAndEmit('decreaseIndent', editor.chain().focus().decreaseIndent().run)\"\n title=\"Decrease Indent\"\n >\n <document-engine-icon name=\"format_indent_decrease\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasIndent\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canIncreaseIndent\"\n (click)=\"runAndEmit('increaseIndent', editor.chain().focus().increaseIndent().run)\"\n title=\"Increase Indent\"\n >\n <document-engine-icon name=\"format_indent_increase\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Lists -->\n <div\n *ngIf=\"capabilities.hasAlignmentLayout\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"alignment-layout\"\n >\n <!-- Lists: Bullet, Numbered (with style) -->\n <button\n *ngIf=\"capabilities.hasLists\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBulletList\"\n (click)=\"runAndEmit('toggleBulletList', editor.chain().focus().toggleBulletList().run)\"\n [class.active]=\"editor.isActive('bulletList')\"\n title=\"Bullet List\"\n >\n <document-engine-icon name=\"format_list_bulleted\"></document-engine-icon>\n </button>\n\n <!-- Numbered List with Style -->\n <document-engine-select\n *ngIf=\"capabilities.hasLists\"\n placeholder=\"Numbered List\"\n labelMode=\"static\"\n [value]=\"\n editor.isActive('customOrderedList')\n ? editor.getAttributes('customOrderedList')['data-list-style-type'] || 'decimal'\n : null\n \"\n [disabled]=\"toolbarState.isReadOnly\"\n title=\"Numbered List\"\n >\n <document-engine-icon documentEngineSelectLabel name=\"format_list_numbered\"></document-engine-icon>\n\n <button\n *ngFor=\"let option of listStyleOptions; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"setListStyle(option.value)\"\n [class.active]=\"\n editor.isActive('customOrderedList') &&\n editor.getAttributes('customOrderedList')['data-list-style-type'] === option.value\n \"\n >\n <span>{{ option.example }}</span>\n <span>{{ option.label }}</span>\n </button>\n </document-engine-select>\n </div>\n\n <!-- Block Types: Code Block, Blockquote -->\n <div\n *ngIf=\"capabilities.hasBlockTypes\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"block-types\"\n >\n <!-- Blockquote -->\n <button\n *ngIf=\"capabilities.hasBlockquote\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBlockquote\"\n (click)=\"runAndEmit('toggleBlockquote', editor.chain().focus().toggleBlockquote().run)\"\n [class.active]=\"editor.isActive('blockquote')\"\n title=\"Quote\"\n >\n <document-engine-icon name=\"format_quote\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Insert Object: Table, Images, Special Chars, Page Break -->\n <div\n *ngIf=\"capabilities.hasInsertObject\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"insert-object\"\n >\n <button\n *ngIf=\"capabilities.hasTable\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openCreateTableBubble($event)\"\n [class.active]=\"editor.isActive('table')\"\n title=\"Table\"\n >\n <document-engine-icon name=\"table_rows\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasImages\"\n documentEngineButton\n size=\"icon\"\n title=\"Insert Image\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"insertImage($event)\"\n >\n <document-engine-icon name=\"photo\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasSpecialChars\"\n documentEngineButton\n size=\"icon\"\n title=\"Special Character\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openSpecialCharsBubble($event)\"\n >\n <document-engine-icon name=\"special_character\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasPageBreak\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canInsertPageBreak\"\n (click)=\"runAndEmit('insertPageBreak', editor.chain().focus().insertPageBreak().run)\"\n title=\"Insert page break\"\n >\n <document-engine-icon name=\"insert_page_break\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Business Features: Templates, Dynamic Fields, Editable Region -->\n <div\n *ngIf=\"capabilities.hasBusinessFeatures\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"business-features\"\n >\n <button\n *ngIf=\"capabilities.hasDynamicFields\"\n documentEngineButton\n size=\"icon\"\n title=\"Dynamic Field\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openDynamicFieldsBubble($event)\"\n >\n <document-engine-icon name=\"dynamic_form\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasTemplates\"\n documentEngineButton\n size=\"icon\"\n title=\"Template\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"openTemplateBubble($event)\"\n >\n <document-engine-icon name=\"description\"></document-engine-icon>\n </button>\n\n <button\n *ngIf=\"capabilities.hasEditableRegion\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"!toolbarState.canToggleEditableRegion || toolbarState.isReadOnly\"\n (click)=\"runAndEmit('toggleEditableRegion', editor.chain().focus().toggleEditableRegion().run)\"\n [class.active]=\"editor.isActive('editableRegion')\"\n title=\"Toggle editable region\"\n >\n <document-engine-icon name=\"restrict_edit\"></document-engine-icon>\n </button>\n </div>\n\n <!-- Actions: Clear Content, Markdown -->\n <div *ngIf=\"capabilities.hasActions\" class=\"document-engine-document-editor__toolbar-group\" data-group=\"actions\">\n <button\n *ngIf=\"capabilities.hasClearContent\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly || !toolbarState.canClearContent\"\n (click)=\"runAndEmit('clear', editor.chain().focus().clear().run)\"\n title=\"Clear all content\"\n >\n <document-engine-icon name=\"clear_all\"></document-engine-icon>\n </button>\n\n <!-- <button\n *ngIf=\"capabilities.hasMarkdown\"\n documentEngineButton\n size=\"icon\"\n (click)=\"downloadAsMarkdown()\"\n title=\"Download as Markdown\"\n >\n <document-engine-icon name=\"markdown\"></document-engine-icon>\n </button> -->\n </div>\n\n <!-- Custom Toolbar Buttons -->\n <div\n *ngIf=\"customToolbarButtons.length > 0\"\n class=\"document-engine-document-editor__toolbar-group\"\n data-group=\"custom-buttons\"\n >\n <ng-container *ngFor=\"let button of customToolbarButtons; trackBy: trackByIndex\">\n <!-- Icon Button -->\n <button\n *ngIf=\"button.type === 'icon-button'\"\n documentEngineButton\n size=\"icon\"\n [disabled]=\"toolbarState.isReadOnly\"\n (click)=\"handleCustomIconButton(button)\"\n [title]=\"button.label || ''\"\n >\n <document-engine-icon [name]=\"button.icon\"></document-engine-icon>\n </button>\n\n <!-- Select Button -->\n <document-engine-select\n *ngIf=\"button.type === 'select-button'\"\n [value]=\"null\"\n labelMode=\"static\"\n [disabled]=\"toolbarState.isReadOnly\"\n [title]=\"button.label\"\n >\n <span documentEngineSelectLabel>{{ button.label }}</span>\n\n <button\n *ngFor=\"let option of button.options; trackBy: trackByValue\"\n documentEngineSelectOption\n [value]=\"option.value\"\n (click)=\"handleCustomSelectButton(button, option.value)\"\n >\n {{ option.label }}\n </button>\n </document-engine-select>\n </ng-container>\n </div>\n </div>\n\n <!-- Right side actions -->\n <div class=\"document-engine-document-editor__toolbar-right\">\n <button\n *ngIf=\"capabilities.hasPrintButton\"\n documentEngineButton\n size=\"icon\"\n (click)=\"printValue()\"\n title=\"Print Value\"\n >\n <document-engine-icon name=\"print\"></document-engine-icon>\n </button>\n </div>\n </div>\n\n <!-- Color Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n #colorBubbleMenu\n [editor]=\"editor\"\n [config]=\"colorBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Link Bubble Menu -->\n <document-engine-editor-bubble-menu\n *ngIf=\"capabilities.hasLink\"\n #linkBubbleWrapper\n [editor]=\"editor\"\n [config]=\"linkBubbleConfig\"\n ></document-engine-editor-bubble-menu>\n\n <!-- Table Bubble Menu -->\n <document-engine-editor-bubble-menu\n *ngIf=\"capabilities.hasTable\"\n #tableBubbleWrapper\n [editor]=\"editor\"\n [config]=\"tableBubbleConfig\"\n ></document-engine-editor-bubble-menu>\n\n <!-- Image Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasImages\"\n #imageBubbleMenu\n [editor]=\"editor\"\n [config]=\"imageBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Special Characters Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasSpecialChars\"\n #specialCharsBubbleMenu\n [editor]=\"editor\"\n [config]=\"specialCharsBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Dynamic Fields Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasDynamicFields\"\n #dynamicFieldsBubbleMenu\n [editor]=\"editor\"\n [config]=\"dynamicFieldsBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Template Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasTemplates\"\n #templateBubbleMenu\n [editor]=\"editor\"\n [config]=\"templateBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n\n <!-- Table Create Bubble Menu -->\n <document-engine-toolbar-bubble-menu\n *ngIf=\"capabilities.hasTable\"\n #tableCreateBubbleMenu\n [editor]=\"editor\"\n [config]=\"tableCreateBubbleConfig\"\n ></document-engine-toolbar-bubble-menu>\n</div>\n", styles: [":host{position:sticky;top:0;z-index:20}\n"] }]
|
|
5785
5785
|
}], propDecorators: { editor: [{
|
|
5786
5786
|
type: Input
|
|
5787
5787
|
}], capabilities: [{
|
|
@@ -5987,6 +5987,7 @@ class DocumentEditorComponent {
|
|
|
5987
5987
|
this.editor = new Editor({
|
|
5988
5988
|
editable: this._mergedConfig.editable,
|
|
5989
5989
|
extensions: [DocumentEngineKit.configure(this._mergedConfig)],
|
|
5990
|
+
editorProps: { attributes: { class: 'notum-editor' } },
|
|
5990
5991
|
});
|
|
5991
5992
|
// Emit editorReady event back inside Angular zone
|
|
5992
5993
|
this.ngZone.run(() => {
|
|
@@ -6033,20 +6034,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
6033
6034
|
type: Output
|
|
6034
6035
|
}] } });
|
|
6035
6036
|
|
|
6036
|
-
class DocumentEditorModule {
|
|
6037
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DocumentEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
6038
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: DocumentEditorModule, declarations: [DocumentEditorComponent], imports: [CommonModule, ToolbarComponent, FooterComponent], exports: [DocumentEditorComponent] });
|
|
6039
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DocumentEditorModule, imports: [CommonModule, ToolbarComponent, FooterComponent] });
|
|
6040
|
-
}
|
|
6041
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DocumentEditorModule, decorators: [{
|
|
6042
|
-
type: NgModule,
|
|
6043
|
-
args: [{
|
|
6044
|
-
declarations: [DocumentEditorComponent],
|
|
6045
|
-
imports: [CommonModule, ToolbarComponent, FooterComponent],
|
|
6046
|
-
exports: [DocumentEditorComponent],
|
|
6047
|
-
}]
|
|
6048
|
-
}] });
|
|
6049
|
-
|
|
6050
6037
|
class AngularRenderer {
|
|
6051
6038
|
applicationRef;
|
|
6052
6039
|
componentRef;
|
|
@@ -6194,7 +6181,9 @@ class TiptapEditorDirective {
|
|
|
6194
6181
|
// Needed for ChangeDetectionStrategy.OnPush to get notified about changes
|
|
6195
6182
|
this.changeDetectorRef.markForCheck();
|
|
6196
6183
|
if (this.outputFormat === 'html') {
|
|
6197
|
-
|
|
6184
|
+
const htmlContent = editor.getHTML();
|
|
6185
|
+
const finalContent = `<div class="notum-editor">${htmlContent}</div>`;
|
|
6186
|
+
this.onChange(finalContent);
|
|
6198
6187
|
return;
|
|
6199
6188
|
}
|
|
6200
6189
|
this.onChange(editor.getJSON());
|
|
@@ -6310,6 +6299,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
6310
6299
|
type: Input
|
|
6311
6300
|
}] } });
|
|
6312
6301
|
|
|
6302
|
+
class DocumentEditorModule {
|
|
6303
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DocumentEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
6304
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: DocumentEditorModule, declarations: [DocumentEditorComponent], imports: [CommonModule, ToolbarComponent, FooterComponent, TiptapEditorDirective], exports: [DocumentEditorComponent, TiptapEditorDirective] });
|
|
6305
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DocumentEditorModule, imports: [CommonModule, ToolbarComponent, FooterComponent] });
|
|
6306
|
+
}
|
|
6307
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DocumentEditorModule, decorators: [{
|
|
6308
|
+
type: NgModule,
|
|
6309
|
+
args: [{
|
|
6310
|
+
declarations: [DocumentEditorComponent],
|
|
6311
|
+
imports: [CommonModule, ToolbarComponent, FooterComponent, TiptapEditorDirective],
|
|
6312
|
+
exports: [DocumentEditorComponent, TiptapEditorDirective],
|
|
6313
|
+
}]
|
|
6314
|
+
}] });
|
|
6315
|
+
|
|
6313
6316
|
/**
|
|
6314
6317
|
* Generated bundle index. Do not edit.
|
|
6315
6318
|
*/
|