feat(dees-input-richtext): use lucide icons
This commit is contained in:
@ -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(),
|
||||
},
|
||||
|
Reference in New Issue
Block a user