feat(dees-input-richtext): use lucide icons

ts_web/elements/dees-input-richtext.ts

@@ -1,6 +1,7 @@
 import * as colors from './00colors.js';
 import { DeesInputBase } from './dees-input-base.js';
 import { demoFunc } from './dees-input-richtext.demo.js';
+import './dees-icon.js';
 
 import {
   customElement,
@@ -29,7 +30,7 @@ declare global {
 
 interface IToolbarButton {
   name: string;
-  icon: string;
+  icon?: string;
   action?: () => void;
   isActive?: () => boolean;
   title: string;
@@ -146,6 +147,11 @@ export class DeesInputRichtext extends DeesInputBase<string> {
         user-select: none;
       }
 
+      .toolbar-button dees-icon {
+        width: 16px;
+        height: 16px;
+      }
+
       .toolbar-button:hover {
         background: ${cssManager.bdTheme('#e5e7eb', '#2c2c2c')};
         color: ${cssManager.bdTheme('#1f2937', '#e4e4e7')};
@@ -412,7 +418,7 @@ export class DeesInputRichtext extends DeesInputBase<string> {
             title=${button.title}
             ?disabled=${this.disabled || !this.editor}
           >
-            ${button.icon}
+            <dees-icon .icon=${button.icon}></dees-icon>
           </button>
         `;
       })}
@@ -425,129 +431,129 @@ export class DeesInputRichtext extends DeesInputBase<string> {
     return [
       {
         name: 'bold',
-        icon: '𝐁',
+        icon: 'lucide:bold',
         title: 'Bold (Ctrl+B)',
         action: () => this.editor.chain().focus().toggleBold().run(),
         isActive: () => this.editor.isActive('bold'),
       },
       {
         name: 'italic',
-        icon: '𝐼',
+        icon: 'lucide:italic',
         title: 'Italic (Ctrl+I)',
         action: () => this.editor.chain().focus().toggleItalic().run(),
         isActive: () => this.editor.isActive('italic'),
       },
       {
         name: 'underline',
-        icon: '𝐔',
+        icon: 'lucide:underline',
         title: 'Underline (Ctrl+U)',
         action: () => this.editor.chain().focus().toggleUnderline().run(),
         isActive: () => this.editor.isActive('underline'),
       },
       {
         name: 'strike',
-        icon: '𝐒',
+        icon: 'lucide:strikethrough',
         title: 'Strikethrough',
         action: () => this.editor.chain().focus().toggleStrike().run(),
         isActive: () => this.editor.isActive('strike'),
       },
-      { name: 'divider1', icon: '', title: '', isDivider: true },
+      { name: 'divider1', title: '', isDivider: true },
       {
         name: 'h1',
-        icon: 'H₁',
+        icon: 'lucide:heading1',
         title: 'Heading 1',
         action: () => this.editor.chain().focus().toggleHeading({ level: 1 }).run(),
         isActive: () => this.editor.isActive('heading', { level: 1 }),
       },
       {
         name: 'h2',
-        icon: 'H₂',
+        icon: 'lucide:heading2',
         title: 'Heading 2',
         action: () => this.editor.chain().focus().toggleHeading({ level: 2 }).run(),
         isActive: () => this.editor.isActive('heading', { level: 2 }),
       },
       {
         name: 'h3',
-        icon: 'H₃',
+        icon: 'lucide:heading3',
         title: 'Heading 3',
         action: () => this.editor.chain().focus().toggleHeading({ level: 3 }).run(),
         isActive: () => this.editor.isActive('heading', { level: 3 }),
       },
-      { name: 'divider2', icon: '', title: '', isDivider: true },
+      { name: 'divider2', title: '', isDivider: true },
       {
         name: 'bulletList',
-        icon: '• ',
+        icon: 'lucide:list',
         title: 'Bullet List',
         action: () => this.editor.chain().focus().toggleBulletList().run(),
         isActive: () => this.editor.isActive('bulletList'),
       },
       {
         name: 'orderedList',
-        icon: '1.',
+        icon: 'lucide:listOrdered',
         title: 'Numbered List',
         action: () => this.editor.chain().focus().toggleOrderedList().run(),
         isActive: () => this.editor.isActive('orderedList'),
       },
       {
         name: 'blockquote',
-        icon: '"',
+        icon: 'lucide:quote',
         title: 'Quote',
         action: () => this.editor.chain().focus().toggleBlockquote().run(),
         isActive: () => this.editor.isActive('blockquote'),
       },
       {
         name: 'code',
-        icon: '<>',
+        icon: 'lucide:code',
         title: 'Code',
         action: () => this.editor.chain().focus().toggleCode().run(),
         isActive: () => this.editor.isActive('code'),
       },
       {
         name: 'codeBlock',
-        icon: '{}',
+        icon: 'lucide:fileCode',
         title: 'Code Block',
         action: () => this.editor.chain().focus().toggleCodeBlock().run(),
         isActive: () => this.editor.isActive('codeBlock'),
       },
-      { name: 'divider3', icon: '', title: '', isDivider: true },
+      { name: 'divider3', title: '', isDivider: true },
       {
         name: 'link',
-        icon: '🔗',
+        icon: 'lucide:link',
         title: 'Add Link',
         action: () => this.toggleLink(),
         isActive: () => this.editor.isActive('link'),
       },
       {
         name: 'alignLeft',
-        icon: '⬅',
+        icon: 'lucide:alignLeft',
         title: 'Align Left',
         action: () => this.editor.chain().focus().setTextAlign('left').run(),
         isActive: () => this.editor.isActive({ textAlign: 'left' }),
       },
       {
         name: 'alignCenter',
-        icon: '⬄',
+        icon: 'lucide:alignCenter',
         title: 'Align Center',
         action: () => this.editor.chain().focus().setTextAlign('center').run(),
         isActive: () => this.editor.isActive({ textAlign: 'center' }),
       },
       {
         name: 'alignRight',
-        icon: '➡',
+        icon: 'lucide:alignRight',
         title: 'Align Right',
         action: () => this.editor.chain().focus().setTextAlign('right').run(),
         isActive: () => this.editor.isActive({ textAlign: 'right' }),
       },
-      { name: 'divider4', icon: '', title: '', isDivider: true },
+      { name: 'divider4', title: '', isDivider: true },
       {
         name: 'undo',
-        icon: '↶',
+        icon: 'lucide:undo',
         title: 'Undo (Ctrl+Z)',
         action: () => this.editor.chain().focus().undo().run(),
       },
       {
         name: 'redo',
-        icon: '↷',
+        icon: 'lucide:redo',
         title: 'Redo (Ctrl+Y)',
         action: () => this.editor.chain().focus().redo().run(),
       },