editor?.chain().focus().undo().run()} disabled={!canUndo()} class={btnClass(false, !canUndo())} title="Undo" data-testid="format-undo" >
editor?.chain().focus().redo().run()} disabled={!canRedo()} class={btnClass(false, !canRedo())} title="Redo" data-testid="format-redo" >
editor?.chain().focus().toggleBold().run()} class={btnClass(isActive('bold'))} title="Bold (Ctrl+B)" data-testid="format-bold" >
editor?.chain().focus().toggleItalic().run()} class={btnClass(isActive('italic'))} title="Italic (Ctrl+I)" data-testid="format-italic" >
editor?.chain().focus().toggleStrike().run()} class={btnClass(isActive('strike'))} title="Strikethrough (Ctrl+Shift+X)" data-testid="format-strikethrough" >
editor?.chain().focus().toggleUnderline().run()} class={btnClass(isActive('underline'))} title="Underline (Ctrl+U)" data-testid="format-underline" >
toggleDropdown('heading')} class={dropdownBtnClass(isActive('heading'))} title="Heading" data-testid="format-heading" >
{#if openDropdown === 'heading'}
{ editor?.chain().focus().toggleHeading({ level: 1 }).run(); closeDropdowns(); }} class={dropdownItemClass(isActive('heading', { level: 1 }))} data-testid="format-h1" >
H1
Heading 1
{ editor?.chain().focus().toggleHeading({ level: 2 }).run(); closeDropdowns(); }} class={dropdownItemClass(isActive('heading', { level: 2 }))} data-testid="format-h2" >
H2
Heading 2
{ editor?.chain().focus().toggleHeading({ level: 3 }).run(); closeDropdowns(); }} class={dropdownItemClass(isActive('heading', { level: 3 }))} data-testid="format-h3" >
H3
Heading 3
{/if}
toggleDropdown('list')} class={dropdownBtnClass(isActive('bulletList') || isActive('orderedList') || isActive('taskList'))} title="Lists" data-testid="format-list" >
{#if openDropdown === 'list'}
{ editor?.chain().focus().toggleBulletList().run(); closeDropdowns(); }} class={dropdownItemClass(isActive('bulletList'))} data-testid="format-bullet-list" >
Bullet list
{ editor?.chain().focus().toggleOrderedList().run(); closeDropdowns(); }} class={dropdownItemClass(isActive('orderedList'))} data-testid="format-ordered-list" >
Ordered list
{ editor?.chain().focus().toggleTaskList().run(); closeDropdowns(); }} class={dropdownItemClass(isActive('taskList'))} data-testid="format-task-list" >
Task list
{/if}
toggleDropdown('link')} class={btnClass(isActive('link'))} title="Insert link (Ctrl+K)" data-testid="format-link" >
{#if openDropdown === 'link'}
{ e.preventDefault(); applyLink(); }} >
{/if}
toggleDropdown('table')} class={dropdownBtnClass(isActive('table'))} title="Table" data-testid="format-table" >
{#if openDropdown === 'table'}
{ editor?.chain().focus().insertTable({ rows: 3, cols: 3 }).run(); closeDropdowns(); }} class={dropdownItemClass()} data-testid="format-table-insert" >
Insert table
{#if isActive('table')}
{ editor?.chain().focus().addRowAfter().run(); closeDropdowns(); }} class={dropdownItemClass()} data-testid="format-table-add-row" >
Add row
{ editor?.chain().focus().addColumnAfter().run(); closeDropdowns(); }} class={dropdownItemClass()} data-testid="format-table-add-col" >
Add column
{ editor?.chain().focus().deleteRow().run(); closeDropdowns(); }} class={dropdownItemClass()} data-testid="format-table-delete-row" >
Delete row
{ editor?.chain().focus().deleteColumn().run(); closeDropdowns(); }} class={dropdownItemClass()} data-testid="format-table-delete-col" >
Delete column
{ editor?.chain().focus().deleteTable().run(); closeDropdowns(); }} class={`${dropdownItemClass()} text-[var(--destructive)]`} data-testid="format-table-delete" >
Delete table
{/if}
{/if}
toggleDropdown('align')} class={dropdownBtnClass(isActive({ textAlign: 'center' }) || isActive({ textAlign: 'right' }) || isActive({ textAlign: 'justify' }))} title="Text alignment" data-testid="format-align" > {#if isActive({ textAlign: 'center' })}
{:else if isActive({ textAlign: 'right' })}
{:else if isActive({ textAlign: 'justify' })}
{:else}
{/if}
{#if openDropdown === 'align'}
{ editor?.chain().focus().setTextAlign('left').run(); closeDropdowns(); }} class={dropdownItemClass(isActive({ textAlign: 'left' }))} data-testid="format-align-left" >
Left
{ editor?.chain().focus().setTextAlign('center').run(); closeDropdowns(); }} class={dropdownItemClass(isActive({ textAlign: 'center' }))} data-testid="format-align-center" >
Center
{ editor?.chain().focus().setTextAlign('right').run(); closeDropdowns(); }} class={dropdownItemClass(isActive({ textAlign: 'right' }))} data-testid="format-align-right" >
Right
{ editor?.chain().focus().setTextAlign('justify').run(); closeDropdowns(); }} class={dropdownItemClass(isActive({ textAlign: 'justify' }))} data-testid="format-align-justify" >
Justify
{/if}
editor?.chain().focus().toggleCode().run()} class={btnClass(isActive('code'))} title="Inline code" data-testid="format-code" >
editor?.chain().focus().toggleBlockquote().run()} class={btnClass(isActive('blockquote'))} title="Blockquote" data-testid="format-blockquote" >
editor?.chain().focus().toggleCodeBlock().run()} class={btnClass(isActive('codeBlock'))} title="Code block" data-testid="format-code-block" >
editor?.chain().focus().setHorizontalRule().run()} class={btnClass()} title="Divider" data-testid="format-hr" >