Lexical: Added button icon system

[bookstack] / resources / js / wysiwyg / ui / framework / buttons.ts

diff --git a/resources/js/wysiwyg/ui/framework/buttons.ts b/resources/js/wysiwyg/ui/framework/buttons.ts
index c3ba533b32534e2dccd378d9f64fdc63a0b4f151..332b350997384237ffd18c072658aedda317776d 100644 (file)
--- a/resources/js/wysiwyg/ui/framework/buttons.ts
+++ b/resources/js/wysiwyg/ui/framework/buttons.ts
@@ -4,6 +4,7 @@ import {el} from "../../helpers";
 
 export interface EditorBasicButtonDefinition {
     label: string;
+    icon?: string|undefined;
 }
 
 export interface EditorButtonDefinition extends EditorBasicButtonDefinition {
@@ -21,10 +22,19 @@ export class EditorButton extends EditorUiElement {
     }
 
     protected buildDOM(): HTMLButtonElement {
+
+        const label = this.getLabel();
+        let child: string|HTMLElement = label;
+        if (this.definition.icon) {
+            child = el('span', {class: 'editor-button-icon'});
+            child.innerHTML = this.definition.icon;
+        }
+
         const button = el('button', {
             type: 'button',
             class: 'editor-button',
-        }, [this.getLabel()]) as HTMLButtonElement;
+            title: this.definition.icon ? label : null,
+        }, [child]) as HTMLButtonElement;
 
         button.addEventListener('click', this.onClick.bind(this));