claritykit-svelte/dist/components/knowledge/RichTextToolbar/types.js

A comprehensive Svelte component library focused on accessibility, ADHD-optimized design, developer experience, and full SSR compatibility

export const DEFAULT_TOOLBAR_COMMANDS = [
    {
        name: 'bold',
        label: 'Bold',
        shortcut: ['Ctrl', 'B'],
        description: 'Make text bold',
        group: 'formatting',
        isActive: (editor) => editor.isActive('bold'),
        execute: (editor) => editor.chain().focus().toggleBold().run(),
    },
    {
        name: 'italic',
        label: 'Italic',
        shortcut: ['Ctrl', 'I'],
        description: 'Make text italic',
        group: 'formatting',
        isActive: (editor) => editor.isActive('italic'),
        execute: (editor) => editor.chain().focus().toggleItalic().run(),
    },
    {
        name: 'underline',
        label: 'Underline',
        shortcut: ['Ctrl', 'U'],
        description: 'Underline text',
        group: 'formatting',
        isActive: (editor) => editor.isActive('underline'),
        execute: (editor) => editor.chain().focus().toggleUnderline().run(),
    },
    {
        name: 'strike',
        label: 'Strikethrough',
        shortcut: ['Ctrl', 'Shift', 'S'],
        description: 'Strike through text',
        group: 'formatting',
        isActive: (editor) => editor.isActive('strike'),
        execute: (editor) => editor.chain().focus().toggleStrike().run(),
    },
    {
        name: 'code',
        label: 'Inline Code',
        shortcut: ['Ctrl', 'E'],
        description: 'Format as inline code',
        group: 'formatting',
        isActive: (editor) => editor.isActive('code'),
        execute: (editor) => editor.chain().focus().toggleCode().run(),
    },
    {
        name: 'bulletList',
        label: 'Bullet List',
        shortcut: ['Ctrl', 'Shift', '8'],
        description: 'Create a bullet list',
        group: 'lists',
        isActive: (editor) => editor.isActive('bulletList'),
        execute: (editor) => editor.chain().focus().toggleBulletList().run(),
    },
    {
        name: 'orderedList',
        label: 'Numbered List',
        shortcut: ['Ctrl', 'Shift', '7'],
        description: 'Create a numbered list',
        group: 'lists',
        isActive: (editor) => editor.isActive('orderedList'),
        execute: (editor) => editor.chain().focus().toggleOrderedList().run(),
    },
    {
        name: 'taskList',
        label: 'Task List',
        shortcut: ['Ctrl', 'Shift', '9'],
        description: 'Create a task list',
        group: 'lists',
        isActive: (editor) => editor.isActive('taskList'),
        execute: (editor) => editor.chain().focus().toggleTaskList().run(),
    },
    {
        name: 'blockquote',
        label: 'Quote',
        shortcut: ['Ctrl', 'Shift', 'B'],
        description: 'Create a quote block',
        group: 'layout',
        isActive: (editor) => editor.isActive('blockquote'),
        execute: (editor) => editor.chain().focus().toggleBlockquote().run(),
    },
    {
        name: 'codeBlock',
        label: 'Code Block',
        shortcut: ['Ctrl', 'Alt', 'C'],
        description: 'Create a code block',
        group: 'layout',
        isActive: (editor) => editor.isActive('codeBlock'),
        execute: (editor) => editor.chain().focus().toggleCodeBlock().run(),
    },
    {
        name: 'horizontalRule',
        label: 'Horizontal Line',
        shortcut: ['Ctrl', 'Alt', '-'],
        description: 'Insert a horizontal line',
        group: 'insert',
        execute: (editor) => editor.chain().focus().setHorizontalRule().run(),
    },
    {
        name: 'undo',
        label: 'Undo',
        shortcut: ['Ctrl', 'Z'],
        description: 'Undo last action',
        group: 'history',
        canExecute: (editor) => editor.can().undo(),
        execute: (editor) => editor.chain().focus().undo().run(),
    },
    {
        name: 'redo',
        label: 'Redo',
        shortcut: ['Ctrl', 'Y'],
        description: 'Redo last undone action',
        group: 'history',
        canExecute: (editor) => editor.can().redo(),
        execute: (editor) => editor.chain().focus().redo().run(),
    },
];
export const TOOLBAR_GROUPS = [
    {
        name: 'formatting',
        label: 'Text Formatting',
        commands: DEFAULT_TOOLBAR_COMMANDS.filter(cmd => cmd.group === 'formatting'),
    },
    {
        name: 'layout',
        label: 'Layout and Alignment',
        commands: DEFAULT_TOOLBAR_COMMANDS.filter(cmd => cmd.group === 'layout'),
    },
    {
        name: 'lists',
        label: 'Lists and Structure',
        commands: DEFAULT_TOOLBAR_COMMANDS.filter(cmd => cmd.group === 'lists'),
    },
    {
        name: 'insert',
        label: 'Insert Elements',
        commands: DEFAULT_TOOLBAR_COMMANDS.filter(cmd => cmd.group === 'insert'),
    },
    {
        name: 'history',
        label: 'History',
        commands: DEFAULT_TOOLBAR_COMMANDS.filter(cmd => cmd.group === 'history'),
    },
];