goodteditor-ui 1.0.26 → 1.0.28

package/src/components/ui/WysiwygEditor/tools-and-commands.js

@@ -1,702 +1,709 @@
-import {
-    NodeType,
-    MarkType,
-    CommandType,
-    ToolType,
-    createButtonTool,
-    createColorPickerTool,
-    createCommand,
-    createInputUnitsTool,
-    createSelectTool,
-    createToolbarPopoverTool,
-    createInputAutoTool,
-    createLinkTool,
-    createImageTool,
-} from './constants';
-
-export const CommandMap = {
-    [CommandType.PARAGRAPH]: createCommand({
-        name: CommandType.PARAGRAPH,
-        title: 'Абзац',
-        exec() {
-            this.editor
-                .chain()
-                .focus()
-                .setParagraph()
-                .setParagraphClass('p')
-                .resetAttributes(MarkType.TEXT_STYLE, 'fontSize')
-                .run();
-        },
-        isActive() {
-            return this.editor.isActive(NodeType.PARAGRAPH, { class: 'p' });
-        }
-    }),
-    [CommandType.HEADING_1]: createCommand({
-        name: CommandType.HEADING_1,
-        title: 'Заголовок 1 (h1)',
-        exec() {
-            this.editor
-                .chain()
-                .focus()
-                .setHeading({ level: 1 })
-                .resetAttributes(MarkType.TEXT_STYLE, 'fontSize')
-                .run();
-        },
-        isActive() {
-            return this.editor.isActive(NodeType.HEADING, { level: 1 });
-        }
-    }),
-    [CommandType.HEADING_2]: createCommand({
-        name: CommandType.HEADING_2,
-        title: 'Заголовок 2 (h2)',
-        exec() {
-            this.editor
-                .chain()
-                .focus()
-                .setHeading({ level: 2 })
-                .resetAttributes(MarkType.TEXT_STYLE, 'fontSize')
-                .run();
-        },
-        isActive() {
-            return this.editor.isActive(NodeType.HEADING, { level: 2 });
-        }
-    }),
-    [CommandType.HEADING_3]: createCommand({
-        name: CommandType.HEADING_3,
-        title: 'Заголовок 3 (h3)',
-        exec() {
-            this.editor
-                .chain()
-                .focus()
-                .setHeading({ level: 3 })
-                .resetAttributes(MarkType.TEXT_STYLE, 'fontSize')
-                .run();
-        },
-        isActive() {
-            return this.editor.isActive(NodeType.HEADING, { level: 3 });
-        }
-    }),
-    [CommandType.HEADING_4]: createCommand({
-        name: CommandType.HEADING_4,
-        title: 'Заголовок 4 (h4)',
-        exec() {
-            this.editor
-                .chain()
-                .focus()
-                .setHeading({ level: 4 })
-                .resetAttributes(MarkType.TEXT_STYLE, 'fontSize')
-                .run();
-        },
-        isActive() {
-            return this.editor.isActive(NodeType.HEADING, { level: 4 });
-        }
-    }),
-    [CommandType.TEXT_SMALL]: createCommand({
-        name: CommandType.TEXT_SMALL,
-        title: 'Small',
-        exec() {
-            this.editor
-                .chain()
-                .focus()
-                .setParagraph()
-                .setParagraphClass('text-small')
-                .resetAttributes(MarkType.TEXT_STYLE, 'fontSize')
-                .run();
-        },
-        isActive() {
-            return this.editor.isActive(NodeType.PARAGRAPH, { class: 'text-small' });
-        }
-    }),
-    [CommandType.TEXT_XSMALL]: createCommand({
-        name: CommandType.TEXT_XSMALL,
-        title: 'Xsmall',
-        exec() {
-            this.editor
-                .chain()
-                .focus()
-                .setParagraph()
-                .setParagraphClass('text-xsmall')
-                .resetAttributes(MarkType.TEXT_STYLE, 'fontSize')
-                .run();
-        },
-        isActive() {
-            return this.editor.isActive(NodeType.PARAGRAPH, { class: 'text-xsmall' });
-        }
-    }),
-    [CommandType.CODE_BLOCK]: createCommand({
-        name: CommandType.CODE_BLOCK,
-        title: 'Код',
-        exec() {
-            this.editor
-                .chain()
-                .focus()
-                .setCodeBlock()
-                .run();
-        },
-        isActive() {
-            return this.editor.isActive(NodeType.CODE_BLOCK);
-        }
-    }),
-    [CommandType.SINK_LIST_ITEM]: createCommand({
-        name: CommandType.SINK_LIST_ITEM,
-        title: 'Опустить элемент списка',
-        exec() {
-            this.editor
-                .chain()
-                .focus()
-                .sinkListItem(NodeType.LIST_ITEM)
-                .run();
-        },
-        isEnabled() {
-            return this.editor.can().sinkListItem(NodeType.LIST_ITEM);
-        }
-    }),
-    [CommandType.LIFT_LIST_ITEM]: createCommand({
-        name: CommandType.LIFT_LIST_ITEM,
-        title: 'Поднять элемент списка',
-        exec() {
-            this.editor.chain().focus().liftListItem(NodeType.LIST_ITEM).run();
-        },
-        isEnabled() {
-            return this.editor.can().liftListItem(NodeType.LIST_ITEM);
-        }
-    })
-};
-
-export const TableOptionsMap = {
-    [ToolType.INSERT_TABLE]: createButtonTool({
-        name: ToolType.INSERT_TABLE,
-        icon: 'table',
-        title: 'Вставить таблицу',
-        exec() {
-            this.editor
-                .chain()
-                .focus()
-                .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
-                .run();
-        },
-        isEnabled() {
-            return this.editor.can().insertTable();
-        }
-    }),
-    [ToolType.DELETE_TABLE]: createButtonTool({
-        name: ToolType.DELETE_TABLE,
-        icon: 'table-remove',
-        title: 'Удалить таблицу',
-        exec() {
-            this.editor.chain().focus().deleteTable().run();
-        },
-        isEnabled() {
-            return this.editor.can().deleteTable();
-        }
-    }),
-    [ToolType.ADD_COLUMN_BEFORE]: createButtonTool({
-        name: ToolType.ADD_COLUMN_BEFORE,
-        icon: 'table-column-plus-before',
-        title: 'Добавить колонку перед',
-        exec() {
-            this.editor.chain().focus().addColumnBefore().run();
-        },
-        isEnabled() {
-            return this.editor.can().addColumnBefore();
-        }
-    }),
-    [ToolType.ADD_COLUMN_AFTER]: createButtonTool({
-        name: ToolType.ADD_COLUMN_AFTER,
-        icon: 'table-column-plus-after',
-        title: 'Добавить колонку после',
-        exec() {
-            this.editor.chain().focus().addColumnAfter().run();
-        },
-        isEnabled() {
-            return this.editor.can().addColumnAfter();
-        }
-    }),
-    [ToolType.DELETE_COLUMN]: createButtonTool({
-        name: ToolType.DELETE_COLUMN,
-        icon: 'table-column-remove',
-        title: 'Удалить колонку',
-        exec() {
-            this.editor.chain().focus().deleteColumn().run();
-        },
-        isEnabled() {
-            return this.editor.can().deleteColumn();
-        }
-    }),
-    [ToolType.ADD_ROW_BEFORE]: createButtonTool({
-        name: ToolType.ADD_ROW_BEFORE,
-        icon: 'table-row-plus-before',
-        title: 'Добавить строку перед',
-        exec() {
-            this.editor.chain().focus().addRowBefore().run();
-        },
-        isEnabled() {
-            return this.editor.can().addRowBefore();
-        }
-    }),
-    [ToolType.ADD_ROW_AFTER]: createButtonTool({
-        name: ToolType.ADD_ROW_AFTER,
-        icon: 'table-row-plus-after',
-        title: 'Добавить строку после',
-        exec() {
-            this.editor.chain().focus().addRowAfter().run();
-        },
-        isEnabled() {
-            return this.editor.can().addRowAfter();
-        }
-    }),
-    [ToolType.DELETE_ROW]: createButtonTool({
-        name: ToolType.DELETE_ROW,
-        icon: 'table-row-remove',
-        title: 'Удалить строку',
-        exec() {
-            this.editor.chain().focus().deleteRow().run();
-        },
-        isEnabled() {
-            return this.editor.can().deleteRow();
-        }
-    }),
-    [ToolType.MERGE_CELLS]: createButtonTool({
-        name: ToolType.MERGE_CELLS,
-        icon: 'table-merge-cells',
-        title: 'Объединить ячейки',
-        exec() {
-            this.editor.chain().focus().mergeCells().run();
-        },
-        isEnabled() {
-            return this.editor.can().mergeCells();
-        }
-    }),
-    [ToolType.SPLIT_CELL]: createButtonTool({
-        name: ToolType.SPLIT_CELL,
-        icon: 'table-split-cell',
-        title: 'Разделить ячейки',
-        exec() {
-            this.editor.chain().focus().splitCell().run();
-        },
-        isEnabled() {
-            return this.editor.can().splitCell();
-        }
-    }),
-    [ToolType.TOGGLE_HEADER_ROW]: createButtonTool({
-        name: ToolType.TOGGLE_HEADER_ROW,
-        icon: 'table-row-height',
-        title: 'Переключить строку заголовка',
-        exec() {
-            this.editor.chain().focus().toggleHeaderRow().run();
-        },
-        isEnabled() {
-            return this.editor.can().toggleHeaderRow();
-        }
-    }),
-    [ToolType.TOGGLE_HEADER_COLUMN]: createButtonTool({
-        name: ToolType.TOGGLE_HEADER_COLUMN,
-        icon: 'table-column-width',
-        title: 'Переключить колонку заголовка',
-        exec() {
-            this.editor.chain().focus().toggleHeaderColumn().run();
-        },
-        isEnabled() {
-            return this.editor.can().toggleHeaderColumn();
-        }
-    }),
-    [ToolType.ALIGN_V_TOP]: createButtonTool({
-        name: ToolType.ALIGN_V_TOP,
-        icon: 'align-vertical-top',
-        title: 'Выровнять по верхнему краю',
-        exec() {
-            const classNames = this.editor.getAttributes(NodeType.TABLE).class;
-            this.editor.chain().focus().toggleTableAlignment('table-vtop', classNames).run();
-        },
-        isEnabled() {
-            return this.editor.isActive(NodeType.TABLE);
-        },
-        isActive() {
-            const classNames = this.editor.getAttributes(NodeType.TABLE).class;
-            return classNames?.includes('table-vtop') ?? false;
-        }
-    }),
-    [ToolType.ALIGN_V_MID]: createButtonTool({
-        name: ToolType.ALIGN_V_MID,
-        icon: 'align-vertical-center',
-        title: 'Выровнять по центру',
-        exec() {
-            const classNames = this.editor.getAttributes(NodeType.TABLE).class;
-            this.editor.chain().focus().toggleTableAlignment('table-vmid', classNames).run();
-        },
-        isEnabled() {
-            return this.editor.isActive(NodeType.TABLE);
-        },
-        isActive() {
-            const classNames = this.editor.getAttributes(NodeType.TABLE).class;
-            return classNames?.includes('table-vmid') ?? false;
-        }
-    }),
-    [ToolType.ALIGN_V_BOT]: createButtonTool({
-        name: ToolType.ALIGN_V_BOT,
-        icon: 'align-vertical-bottom',
-        title: 'Выровнять по нижнему краю',
-        exec() {
-            const classNames = this.editor.getAttributes(NodeType.TABLE).class;
-            this.editor.chain().focus().toggleTableAlignment('table-vbot', classNames).run();
-        },
-        isEnabled() {
-            return this.editor.isActive(NodeType.TABLE);
-        },
-        isActive() {
-            const classNames = this.editor.getAttributes(NodeType.TABLE).class;
-            return classNames?.includes('table-vbot') ?? false;
-        }
-    }),
-    [ToolType.TOGGLE_BORDERS]: createButtonTool({
-        name: ToolType.TOGGLE_BORDERS,
-        icon: 'border-all',
-        title: 'Границы',
-        exec() {
-            const classNames = this.editor.getAttributes(NodeType.TABLE).class;
-            this.editor.chain().focus().toggleTableClass('table-borders', classNames).run();
-        },
-        isEnabled() {
-            return this.editor.isActive(NodeType.TABLE);
-        },
-        isActive() {
-            const classNames = this.editor.getAttributes(NodeType.TABLE).class;
-            return classNames?.includes('table-borders') ?? false;
-        }
-    }),
-    [ToolType.TOGGLE_ZEBRA]: createButtonTool({
-        name: ToolType.TOGGLE_ZEBRA,
-        icon: 'view-stream',
-        title: 'Стиль "зебра"',
-        exec() {
-            const classNames = this.editor.getAttributes(NodeType.TABLE).class;
-            this.editor.chain().focus().toggleTableClass('table-zebra', classNames).run();
-        },
-        isEnabled() {
-            return this.editor.isActive(NodeType.TABLE);
-        },
-        isActive() {
-            const classNames = this.editor.getAttributes(NodeType.TABLE).class;
-            return classNames?.includes('table-zebra') ?? false;
-        }
-    })
-};
-
-export const ToolsMap = {
-    [ToolType.UNDO]: createButtonTool({
-        name: ToolType.UNDO,
-        icon: 'undo-variant',
-        title: 'Назад',
-        exec() {
-            this.editor.commands.undo();
-        },
-        isEnabled() {
-            return this.editor.can().undo();
-        }
-    }),
-    [ToolType.REDO]: createButtonTool({
-        name: ToolType.REDO,
-        icon: 'redo-variant',
-        title: 'Вперед',
-        exec() {
-            this.editor.commands.redo();
-        },
-        isEnabled() {
-            return this.editor.can().redo();
-        }
-    }),
-    [ToolType.SAVE]: createButtonTool({
-        name: ToolType.SAVE,
-        icon: 'content-save',
-        title: 'Сохранить',
-        exec() {
-            this.onChange();
-        }
-    }),
-    [ToolType.PARAGRAPH_STYLE]: createSelectTool({
-        name: ToolType.PARAGRAPH_STYLE,
-        title: 'Стиль параграфа',
-        exec(command) {
-            if (command.name in CommandMap && command.isEnabled()) {
-                command.exec();
-            }
-        },
-        getValue(options) {
-            return options.find(({ value }) => value.isActive()) ?? null;
-        },
-        options: [
-            CommandMap[CommandType.PARAGRAPH],
-            CommandMap[CommandType.HEADING_1],
-            CommandMap[CommandType.HEADING_2],
-            CommandMap[CommandType.HEADING_3],
-            CommandMap[CommandType.HEADING_4],
-            CommandMap[CommandType.TEXT_SMALL],
-            CommandMap[CommandType.TEXT_XSMALL],
-            CommandMap[CommandType.CODE_BLOCK]
-        ]
-    }),
-    [ToolType.FONT_SIZE]: createInputUnitsTool({
-        name: ToolType.FONT_SIZE,
-        title: 'Размер шрифта',
-        exec(value) {
-            this.editor.commands.setFontSize(value);
-        },
-        isEnabled() {
-            const { editor } = this;
-    
-            return (
-                editor.isActive(NodeType.HEADING) ||
-                editor.isActive(NodeType.PARAGRAPH, { class: 'text-small' }) ||
-                editor.isActive(NodeType.PARAGRAPH, { class: 'text-xsmall' })
-            ) === false;
-        },
-        getValue() {
-            return this.editor.getAttributes(MarkType.TEXT_STYLE).fontSize;
-        },
-        units: ["rem", "em", "%", "px", "vh", "vw"]
-    }),
-    [ToolType.TEXT_COLOR]: createColorPickerTool({
-        name: ToolType.TEXT_COLOR,
-        icon: 'format-color-fill',
-        title: 'Цвет',
-        exec(value) {
-            this.editor.chain().focus().setColor(value).run();
-        },
-        getValue() {
-            return this.editor.getAttributes(MarkType.TEXT_STYLE).color;
-        }
-    }),
-    [ToolType.FONT_FAMILY]: createInputAutoTool({
-        name: ToolType.FONT_FAMILY,
-        title: 'Семейство шрифта',
-        exec(value) {
-            this.editor.commands.setFontFamily(value);
-        },
-        getValue() {
-            return this.editor.getAttributes(MarkType.TEXT_STYLE).fontFamily;
-        },
-        options: ['serif', 'sans-serif']
-    }),
-    [ToolType.BLOCKQUOTE]: createButtonTool({
-        name: ToolType.BLOCKQUOTE,
-        icon: 'format-quote-close-outline',
-        title: 'Цитата',
-        exec() {
-            this.editor
-                .chain()
-                .focus()
-                .toggleBlockquote()
-                .run();
-        },
-        isActive() {
-            return this.editor.isActive(NodeType.BLOCKQUOTE);
-        }
-    }),
-    [ToolType.HARD_BREAK]: createButtonTool({
-        name: ToolType.HARD_BREAK,
-        title: 'Перевод строки',
-        icon: 'keyboard-return',
-        exec() {
-            this.editor.chain().focus().setHardBreak().run();
-        }
-    }),
-    [ToolType.CODE]: createButtonTool({
-        name: ToolType.CODE,
-        icon: 'code-not-equal-variant',
-        title: 'Код',
-        exec() {
-            this.editor.chain().focus().toggleCode().run();
-        },
-        isActive() {
-            return this.editor.isActive(MarkType.CODE);
-        }
-    }),
-    [ToolType.IMAGE]: createImageTool({
-        name: ToolType.IMAGE,
-        icon: 'image-plus',
-        title: 'Изображение',
-        async exec({ url = null, isResponsive, width, height }) {
-            const setImage = (src) => {
-                const editor = this.editor.chain().setImage({ src });
-            
-                if (isResponsive === false) {
-                    editor.setStyles({ width, height }).toggleResponsive().run();
-                    return;
-                }
-                editor.run();
-            };
-        
-            if ([null, ''].includes(url) === false) {
-                setImage(url);
-                return;
-            }
-        
-            const imageUrl = await this.getImageUrl();
-        
-            if (imageUrl != null) {
-                setImage(imageUrl);
-            }
-        },
-        getValue() {
-            return this.editor.getAttributes(NodeType.IMAGE);
-        }
-    }),
-    [ToolType.ORDERED_LIST]: createButtonTool({
-        name: ToolType.ORDERED_LIST,
-        icon: 'format-list-numbered',
-        title: 'Нумерованный список',
-        exec() {
-            this.editor.chain().focus().toggleOrderedList().run();
-        },
-        isActive() {
-            return this.editor.isActive(NodeType.ORDERED_LIST);
-        }
-    }),
-    [ToolType.BULLET_LIST]: createButtonTool({
-        name: ToolType.BULLET_LIST,
-        icon: 'format-list-bulleted',
-        title: 'Маркированный список',
-        exec() {
-            this.editor.chain().focus().toggleBulletList().run();
-        },
-        isActive() {
-            return this.editor.isActive(NodeType.BULLET_LIST);
-        }
-    }),
-    [ToolType.TEXT_ALIGN_LEFT]: createButtonTool({
-        name: ToolType.TEXT_ALIGN_LEFT,
-        icon: 'format-align-left',
-        title: 'По левому краю',
-        exec() {
-            this.editor.chain().focus().setTextAlign('left').run();
-        },
-        isActive() {
-            return this.editor.isActive({ textAlign: 'left' });
-        }
-    }),
-    [ToolType.TEXT_ALIGN_CENTER]: createButtonTool({
-        name: ToolType.TEXT_ALIGN_CENTER,
-        icon: 'format-align-center',
-        title: 'По центру',
-        exec() {
-            this.editor.chain().focus().setTextAlign('center').run();
-        },
-        isActive() {
-            return this.editor.isActive({ textAlign: 'center' });
-        }
-    }),
-    [ToolType.TEXT_ALIGN_RIGHT]: createButtonTool({
-        name: ToolType.TEXT_ALIGN_RIGHT,
-        icon: 'format-align-right',
-        title: 'По правому краю',
-        exec() {
-            this.editor.chain().focus().setTextAlign('right').run();
-        },
-        isActive() {
-            return this.editor.isActive({ textAlign: 'right' });
-        }
-    }),
-    [ToolType.HORIZONTAL_RULE]: createButtonTool({
-        name: ToolType.HORIZONTAL_RULE,
-        icon: 'minus',
-        title: 'Вертикальный разделитель',
-        exec() {
-            this.editor.chain().focus().setHorizontalRule().run();
-        },
-        isEnabled() {
-            return this.editor.can().setHorizontalRule();
-        }
-    }),
-    [ToolType.LINK]: createLinkTool({
-        name: ToolType.LINK,
-        icon: 'link-plus',
-        title: 'Ссылка',
-        getValue() {
-            const linkAttrs = this.editor.getAttributes(MarkType.LINK);
-            const { href: url, target } = linkAttrs;
-            return { url, target };
-        },
-        isEnabled() {
-            return this.editor.can().setLink();
-        },
-        exec({ url, target }) {
-            const { editor } = this;
-        
-            if (url === '') {
-                editor
-                    .chain()
-                    .focus()
-                    .extendMarkRange(MarkType.LINK)
-                    .unsetLink()
-                    .run();
-            
-                return;
-            }
-        
-            editor
-                .chain()
-                .focus()
-                .extendMarkRange(MarkType.LINK)
-                .setLink({ href: url, ...(target && { target }) })
-                .run();
-        }
-    }),
-    [ToolType.BOLD]: createButtonTool({
-        name: ToolType.BOLD,
-        icon: 'format-bold',
-        title: 'Жирный',
-        exec() {
-            this.editor.chain().focus().toggleBold().run();
-        },
-        isActive() {
-            return this.editor.isActive(MarkType.BOLD);
-        }
-    }),
-    [ToolType.ITALIC]: createButtonTool({
-        name: ToolType.ITALIC,
-        icon: 'format-italic',
-        title: 'Курсив',
-        exec() {
-            this.editor.chain().focus().toggleItalic().run();
-        },
-        isActive() {
-            return this.editor.isActive(MarkType.ITALIC);
-        }
-    }),
-    [ToolType.STRIKE]: createButtonTool({
-        name: ToolType.STRIKE,
-        icon: 'format-strikethrough-variant',
-        title: 'Зачеркивание',
-        exec() {
-            this.editor.chain().focus().toggleStrike().run();
-        },
-        isActive() {
-            return this.editor.isActive(MarkType.STRIKE);
-        }
-    }),
-    [ToolType.UNDERLINE]: createButtonTool({
-        name: ToolType.UNDERLINE,
-        icon: 'format-underline',
-        title: 'Подчеркивание',
-        exec() {
-            this.editor.chain().focus().toggleUnderline().run();
-        },
-        isActive() {
-            return this.editor.isActive(MarkType.UNDERLINE);
-        }
-    }),
-    [ToolType.TABLE]: createToolbarPopoverTool({
-        name: ToolType.TABLE,
-        icon: 'table-plus',
-        title: 'таблица',
-        options: Object.values(TableOptionsMap)
-    }),
-    [ToolType.CLEAR_FORMATTING]: createButtonTool({
-        name: ToolType.CLEAR_FORMATTING,
-        icon: 'eraser',
-        title: 'Очистить форматирование',
-        exec() {
-            this.editor.chain().focus().clearFormatting().run();
-        }
-    })
-};
+import {
+    NodeType,
+    MarkType,
+    CommandType,
+    ToolType,
+    createButtonTool,
+    createColorPickerTool,
+    createCommand,
+    createInputUnitsTool,
+    createSelectTool,
+    createToolbarPopoverTool,
+    createInputAutoTool,
+    createLinkTool,
+    createImageTool,
+} from './constants';
+
+export const CommandMap = {
+    [CommandType.PARAGRAPH]: createCommand({
+        name: CommandType.PARAGRAPH,
+        title: 'Абзац',
+        exec() {
+            this.editor
+                .chain()
+                .focus()
+                .setParagraph()
+                .setParagraphClass('p')
+                .resetAttributes(MarkType.TEXT_STYLE, 'fontSize')
+                .run();
+        },
+        isActive() {
+            return this.editor.isActive(NodeType.PARAGRAPH, { class: 'p' });
+        }
+    }),
+    [CommandType.HEADING_1]: createCommand({
+        name: CommandType.HEADING_1,
+        title: 'Заголовок 1 (h1)',
+        exec() {
+            this.editor
+                .chain()
+                .focus()
+                .setHeading({ level: 1 })
+                .resetAttributes(MarkType.TEXT_STYLE, 'fontSize')
+                .run();
+        },
+        isActive() {
+            return this.editor.isActive(NodeType.HEADING, { level: 1 });
+        }
+    }),
+    [CommandType.HEADING_2]: createCommand({
+        name: CommandType.HEADING_2,
+        title: 'Заголовок 2 (h2)',
+        exec() {
+            this.editor
+                .chain()
+                .focus()
+                .setHeading({ level: 2 })
+                .resetAttributes(MarkType.TEXT_STYLE, 'fontSize')
+                .run();
+        },
+        isActive() {
+            return this.editor.isActive(NodeType.HEADING, { level: 2 });
+        }
+    }),
+    [CommandType.HEADING_3]: createCommand({
+        name: CommandType.HEADING_3,
+        title: 'Заголовок 3 (h3)',
+        exec() {
+            this.editor
+                .chain()
+                .focus()
+                .setHeading({ level: 3 })
+                .resetAttributes(MarkType.TEXT_STYLE, 'fontSize')
+                .run();
+        },
+        isActive() {
+            return this.editor.isActive(NodeType.HEADING, { level: 3 });
+        }
+    }),
+    [CommandType.HEADING_4]: createCommand({
+        name: CommandType.HEADING_4,
+        title: 'Заголовок 4 (h4)',
+        exec() {
+            this.editor
+                .chain()
+                .focus()
+                .setHeading({ level: 4 })
+                .resetAttributes(MarkType.TEXT_STYLE, 'fontSize')
+                .run();
+        },
+        isActive() {
+            return this.editor.isActive(NodeType.HEADING, { level: 4 });
+        }
+    }),
+    [CommandType.TEXT_SMALL]: createCommand({
+        name: CommandType.TEXT_SMALL,
+        title: 'Small',
+        exec() {
+            this.editor
+                .chain()
+                .focus()
+                .setParagraph()
+                .setParagraphClass('text-small')
+                .resetAttributes(MarkType.TEXT_STYLE, 'fontSize')
+                .run();
+        },
+        isActive() {
+            return this.editor.isActive(NodeType.PARAGRAPH, { class: 'text-small' });
+        }
+    }),
+    [CommandType.TEXT_XSMALL]: createCommand({
+        name: CommandType.TEXT_XSMALL,
+        title: 'Xsmall',
+        exec() {
+            this.editor
+                .chain()
+                .focus()
+                .setParagraph()
+                .setParagraphClass('text-xsmall')
+                .resetAttributes(MarkType.TEXT_STYLE, 'fontSize')
+                .run();
+        },
+        isActive() {
+            return this.editor.isActive(NodeType.PARAGRAPH, { class: 'text-xsmall' });
+        }
+    }),
+    [CommandType.CODE_BLOCK]: createCommand({
+        name: CommandType.CODE_BLOCK,
+        title: 'Код',
+        exec() {
+            this.editor
+                .chain()
+                .focus()
+                .setCodeBlock()
+                .run();
+        },
+        isActive() {
+            return this.editor.isActive(NodeType.CODE_BLOCK);
+        }
+    }),
+    [CommandType.SINK_LIST_ITEM]: createCommand({
+        name: CommandType.SINK_LIST_ITEM,
+        title: 'Опустить элемент списка',
+        exec() {
+            this.editor
+                .chain()
+                .focus()
+                .sinkListItem(NodeType.LIST_ITEM)
+                .run();
+        },
+        isEnabled() {
+            return this.editor.can().sinkListItem(NodeType.LIST_ITEM);
+        }
+    }),
+    [CommandType.LIFT_LIST_ITEM]: createCommand({
+        name: CommandType.LIFT_LIST_ITEM,
+        title: 'Поднять элемент списка',
+        exec() {
+            this.editor.chain().focus().liftListItem(NodeType.LIST_ITEM).run();
+        },
+        isEnabled() {
+            return this.editor.can().liftListItem(NodeType.LIST_ITEM);
+        }
+    })
+};
+
+export const TableOptionsMap = {
+    [ToolType.INSERT_TABLE]: createButtonTool({
+        name: ToolType.INSERT_TABLE,
+        icon: 'table',
+        title: 'Вставить таблицу',
+        exec() {
+            this.editor
+                .chain()
+                .focus()
+                .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+                .run();
+        },
+        isEnabled() {
+            return this.editor.can().insertTable();
+        }
+    }),
+    [ToolType.DELETE_TABLE]: createButtonTool({
+        name: ToolType.DELETE_TABLE,
+        icon: 'table-remove',
+        title: 'Удалить таблицу',
+        exec() {
+            this.editor.chain().focus().deleteTable().run();
+        },
+        isEnabled() {
+            return this.editor.can().deleteTable();
+        }
+    }),
+    [ToolType.ADD_COLUMN_BEFORE]: createButtonTool({
+        name: ToolType.ADD_COLUMN_BEFORE,
+        icon: 'table-column-plus-before',
+        title: 'Добавить колонку перед',
+        exec() {
+            this.editor.chain().focus().addColumnBefore().run();
+        },
+        isEnabled() {
+            return this.editor.can().addColumnBefore();
+        }
+    }),
+    [ToolType.ADD_COLUMN_AFTER]: createButtonTool({
+        name: ToolType.ADD_COLUMN_AFTER,
+        icon: 'table-column-plus-after',
+        title: 'Добавить колонку после',
+        exec() {
+            this.editor.chain().focus().addColumnAfter().run();
+        },
+        isEnabled() {
+            return this.editor.can().addColumnAfter();
+        }
+    }),
+    [ToolType.DELETE_COLUMN]: createButtonTool({
+        name: ToolType.DELETE_COLUMN,
+        icon: 'table-column-remove',
+        title: 'Удалить колонку',
+        exec() {
+            this.editor.chain().focus().deleteColumn().run();
+        },
+        isEnabled() {
+            return this.editor.can().deleteColumn();
+        }
+    }),
+    [ToolType.ADD_ROW_BEFORE]: createButtonTool({
+        name: ToolType.ADD_ROW_BEFORE,
+        icon: 'table-row-plus-before',
+        title: 'Добавить строку перед',
+        exec() {
+            this.editor.chain().focus().addRowBefore().run();
+        },
+        isEnabled() {
+            return this.editor.can().addRowBefore();
+        }
+    }),
+    [ToolType.ADD_ROW_AFTER]: createButtonTool({
+        name: ToolType.ADD_ROW_AFTER,
+        icon: 'table-row-plus-after',
+        title: 'Добавить строку после',
+        exec() {
+            this.editor.chain().focus().addRowAfter().run();
+        },
+        isEnabled() {
+            return this.editor.can().addRowAfter();
+        }
+    }),
+    [ToolType.DELETE_ROW]: createButtonTool({
+        name: ToolType.DELETE_ROW,
+        icon: 'table-row-remove',
+        title: 'Удалить строку',
+        exec() {
+            this.editor.chain().focus().deleteRow().run();
+        },
+        isEnabled() {
+            return this.editor.can().deleteRow();
+        }
+    }),
+    [ToolType.MERGE_CELLS]: createButtonTool({
+        name: ToolType.MERGE_CELLS,
+        icon: 'table-merge-cells',
+        title: 'Объединить ячейки',
+        exec() {
+            this.editor.chain().focus().mergeCells().run();
+        },
+        isEnabled() {
+            return this.editor.can().mergeCells();
+        }
+    }),
+    [ToolType.SPLIT_CELL]: createButtonTool({
+        name: ToolType.SPLIT_CELL,
+        icon: 'table-split-cell',
+        title: 'Разделить ячейки',
+        exec() {
+            this.editor.chain().focus().splitCell().run();
+        },
+        isEnabled() {
+            return this.editor.can().splitCell();
+        }
+    }),
+    [ToolType.TOGGLE_HEADER_ROW]: createButtonTool({
+        name: ToolType.TOGGLE_HEADER_ROW,
+        icon: 'table-row-height',
+        title: 'Переключить строку заголовка',
+        exec() {
+            this.editor.chain().focus().toggleHeaderRow().run();
+        },
+        isEnabled() {
+            return this.editor.can().toggleHeaderRow();
+        }
+    }),
+    [ToolType.TOGGLE_HEADER_COLUMN]: createButtonTool({
+        name: ToolType.TOGGLE_HEADER_COLUMN,
+        icon: 'table-column-width',
+        title: 'Переключить колонку заголовка',
+        exec() {
+            this.editor.chain().focus().toggleHeaderColumn().run();
+        },
+        isEnabled() {
+            return this.editor.can().toggleHeaderColumn();
+        }
+    }),
+    [ToolType.ALIGN_V_TOP]: createButtonTool({
+        name: ToolType.ALIGN_V_TOP,
+        icon: 'align-vertical-top',
+        title: 'Выровнять по верхнему краю',
+        exec() {
+            const classNames = this.editor.getAttributes(NodeType.TABLE).class;
+            this.editor.chain().focus().toggleTableAlignment('table-vtop', classNames).run();
+        },
+        isEnabled() {
+            return this.editor.isActive(NodeType.TABLE);
+        },
+        isActive() {
+            const classNames = this.editor.getAttributes(NodeType.TABLE).class;
+            return classNames?.includes('table-vtop') ?? false;
+        }
+    }),
+    [ToolType.ALIGN_V_MID]: createButtonTool({
+        name: ToolType.ALIGN_V_MID,
+        icon: 'align-vertical-center',
+        title: 'Выровнять по центру',
+        exec() {
+            const classNames = this.editor.getAttributes(NodeType.TABLE).class;
+            this.editor.chain().focus().toggleTableAlignment('table-vmid', classNames).run();
+        },
+        isEnabled() {
+            return this.editor.isActive(NodeType.TABLE);
+        },
+        isActive() {
+            const classNames = this.editor.getAttributes(NodeType.TABLE).class;
+            return classNames?.includes('table-vmid') ?? false;
+        }
+    }),
+    [ToolType.ALIGN_V_BOT]: createButtonTool({
+        name: ToolType.ALIGN_V_BOT,
+        icon: 'align-vertical-bottom',
+        title: 'Выровнять по нижнему краю',
+        exec() {
+            const classNames = this.editor.getAttributes(NodeType.TABLE).class;
+            this.editor.chain().focus().toggleTableAlignment('table-vbot', classNames).run();
+        },
+        isEnabled() {
+            return this.editor.isActive(NodeType.TABLE);
+        },
+        isActive() {
+            const classNames = this.editor.getAttributes(NodeType.TABLE).class;
+            return classNames?.includes('table-vbot') ?? false;
+        }
+    }),
+    [ToolType.TOGGLE_BORDERS]: createButtonTool({
+        name: ToolType.TOGGLE_BORDERS,
+        icon: 'border-all',
+        title: 'Границы',
+        exec() {
+            const classNames = this.editor.getAttributes(NodeType.TABLE).class;
+            this.editor.chain().focus().toggleTableClass('table-borders', classNames).run();
+        },
+        isEnabled() {
+            return this.editor.isActive(NodeType.TABLE);
+        },
+        isActive() {
+            const classNames = this.editor.getAttributes(NodeType.TABLE).class;
+            return classNames?.includes('table-borders') ?? false;
+        }
+    }),
+    [ToolType.TOGGLE_ZEBRA]: createButtonTool({
+        name: ToolType.TOGGLE_ZEBRA,
+        icon: 'view-stream',
+        title: 'Стиль "зебра"',
+        exec() {
+            const classNames = this.editor.getAttributes(NodeType.TABLE).class;
+            this.editor.chain().focus().toggleTableClass('table-zebra', classNames).run();
+        },
+        isEnabled() {
+            return this.editor.isActive(NodeType.TABLE);
+        },
+        isActive() {
+            const classNames = this.editor.getAttributes(NodeType.TABLE).class;
+            return classNames?.includes('table-zebra') ?? false;
+        }
+    })
+};
+
+export const ToolsMap = {
+    [ToolType.UNDO]: createButtonTool({
+        name: ToolType.UNDO,
+        icon: 'undo-variant',
+        title: 'Назад',
+        exec() {
+            this.editor.commands.undo();
+        },
+        isEnabled() {
+            return this.editor.can().undo();
+        }
+    }),
+    [ToolType.REDO]: createButtonTool({
+        name: ToolType.REDO,
+        icon: 'redo-variant',
+        title: 'Вперед',
+        exec() {
+            this.editor.commands.redo();
+        },
+        isEnabled() {
+            return this.editor.can().redo();
+        }
+    }),
+    [ToolType.SAVE]: createButtonTool({
+        name: ToolType.SAVE,
+        icon: 'content-save',
+        title: 'Сохранить',
+        exec() {
+            this.onChange();
+        }
+    }),
+    [ToolType.PARAGRAPH_STYLE]: createSelectTool({
+        name: ToolType.PARAGRAPH_STYLE,
+        title: 'Стиль параграфа',
+        exec(command) {
+            if (command.name in CommandMap && command.isEnabled()) {
+                command.exec();
+            }
+        },
+        getValue(options) {
+            return options.find(({ value }) => value.isActive()) ?? null;
+        },
+        options: [
+            CommandMap[CommandType.PARAGRAPH],
+            CommandMap[CommandType.HEADING_1],
+            CommandMap[CommandType.HEADING_2],
+            CommandMap[CommandType.HEADING_3],
+            CommandMap[CommandType.HEADING_4],
+            CommandMap[CommandType.TEXT_SMALL],
+            CommandMap[CommandType.TEXT_XSMALL],
+            CommandMap[CommandType.CODE_BLOCK]
+        ]
+    }),
+    [ToolType.FONT_SIZE]: createInputUnitsTool({
+        name: ToolType.FONT_SIZE,
+        title: 'Размер шрифта',
+        exec(value) {
+            this.editor.commands.setFontSize(value);
+        },
+        isEnabled() {
+            const { editor } = this;
+    
+            return (
+                editor.isActive(NodeType.HEADING) ||
+                editor.isActive(NodeType.PARAGRAPH, { class: 'text-small' }) ||
+                editor.isActive(NodeType.PARAGRAPH, { class: 'text-xsmall' })
+            ) === false;
+        },
+        getValue() {
+            return this.editor.getAttributes(MarkType.TEXT_STYLE).fontSize;
+        },
+        units: ["rem", "em", "%", "px", "vh", "vw"]
+    }),
+    [ToolType.TEXT_COLOR]: createColorPickerTool({
+        name: ToolType.TEXT_COLOR,
+        icon: 'format-color-fill',
+        title: 'Цвет',
+        exec(value) {
+            this.editor.chain().focus().setColor(value).run();
+        },
+        getValue() {
+            return this.editor.getAttributes(MarkType.TEXT_STYLE).color;
+        }
+    }),
+    [ToolType.FONT_FAMILY]: createInputAutoTool({
+        name: ToolType.FONT_FAMILY,
+        title: 'Семейство шрифта',
+        exec(value) {
+            this.editor.commands.setFontFamily(value);
+        },
+        getValue() {
+            return this.editor.getAttributes(MarkType.TEXT_STYLE).fontFamily;
+        },
+        options: ['serif', 'sans-serif']
+    }),
+    [ToolType.BLOCKQUOTE]: createButtonTool({
+        name: ToolType.BLOCKQUOTE,
+        icon: 'format-quote-close-outline',
+        title: 'Цитата',
+        exec() {
+            this.editor
+                .chain()
+                .focus()
+                .toggleBlockquote()
+                .run();
+        },
+        isActive() {
+            return this.editor.isActive(NodeType.BLOCKQUOTE);
+        }
+    }),
+    [ToolType.HARD_BREAK]: createButtonTool({
+        name: ToolType.HARD_BREAK,
+        title: 'Перевод строки',
+        icon: 'keyboard-return',
+        exec() {
+            this.editor.chain().focus().setHardBreak().run();
+        }
+    }),
+    [ToolType.CODE]: createButtonTool({
+        name: ToolType.CODE,
+        icon: 'code-not-equal-variant',
+        title: 'Код',
+        exec() {
+            this.editor.chain().focus().toggleCode().run();
+        },
+        isActive() {
+            return this.editor.isActive(MarkType.CODE);
+        }
+    }),
+    [ToolType.IMAGE]: createImageTool({
+        name: ToolType.IMAGE,
+        icon: 'image-plus',
+        title: 'Изображение',
+        async exec({ url = null, isResponsive, align, width, height }) {
+            const setImage = (src) => {
+                this.editor.commands.setImage({ src });
+                
+                let imageClasses = this.editor.getAttributes(NodeType.IMAGE).class;
+    
+                this.editor.commands.setImageAlign(align, imageClasses);
+            
+                if (isResponsive === false) {
+                    imageClasses = this.editor.getAttributes(NodeType.IMAGE).class;
+                    this.editor
+                        .chain()
+                        .setStyles({ width, height })
+                        .resetResponsive(imageClasses)
+                        .run();
+                }
+            };
+        
+            if ([null, ''].includes(url) === false) {
+                setImage(url);
+                return;
+            }
+        
+            const imageUrl = await this.getImageUrl();
+        
+            if (imageUrl != null) {
+                setImage(imageUrl);
+            }
+        },
+        getValue() {
+            return this.editor.getAttributes(NodeType.IMAGE);
+        }
+    }),
+    [ToolType.ORDERED_LIST]: createButtonTool({
+        name: ToolType.ORDERED_LIST,
+        icon: 'format-list-numbered',
+        title: 'Нумерованный список',
+        exec() {
+            this.editor.chain().focus().toggleOrderedList().run();
+        },
+        isActive() {
+            return this.editor.isActive(NodeType.ORDERED_LIST);
+        }
+    }),
+    [ToolType.BULLET_LIST]: createButtonTool({
+        name: ToolType.BULLET_LIST,
+        icon: 'format-list-bulleted',
+        title: 'Маркированный список',
+        exec() {
+            this.editor.chain().focus().toggleBulletList().run();
+        },
+        isActive() {
+            return this.editor.isActive(NodeType.BULLET_LIST);
+        }
+    }),
+    [ToolType.TEXT_ALIGN_LEFT]: createButtonTool({
+        name: ToolType.TEXT_ALIGN_LEFT,
+        icon: 'format-align-left',
+        title: 'По левому краю',
+        exec() {
+            this.editor.chain().focus().setTextAlign('left').run();
+        },
+        isActive() {
+            return this.editor.isActive({ textAlign: 'left' });
+        }
+    }),
+    [ToolType.TEXT_ALIGN_CENTER]: createButtonTool({
+        name: ToolType.TEXT_ALIGN_CENTER,
+        icon: 'format-align-center',
+        title: 'По центру',
+        exec() {
+            this.editor.chain().focus().setTextAlign('center').run();
+        },
+        isActive() {
+            return this.editor.isActive({ textAlign: 'center' });
+        }
+    }),
+    [ToolType.TEXT_ALIGN_RIGHT]: createButtonTool({
+        name: ToolType.TEXT_ALIGN_RIGHT,
+        icon: 'format-align-right',
+        title: 'По правому краю',
+        exec() {
+            this.editor.chain().focus().setTextAlign('right').run();
+        },
+        isActive() {
+            return this.editor.isActive({ textAlign: 'right' });
+        }
+    }),
+    [ToolType.HORIZONTAL_RULE]: createButtonTool({
+        name: ToolType.HORIZONTAL_RULE,
+        icon: 'minus',
+        title: 'Вертикальный разделитель',
+        exec() {
+            this.editor.chain().focus().setHorizontalRule().run();
+        },
+        isEnabled() {
+            return this.editor.can().setHorizontalRule();
+        }
+    }),
+    [ToolType.LINK]: createLinkTool({
+        name: ToolType.LINK,
+        icon: 'link-plus',
+        title: 'Ссылка',
+        getValue() {
+            const linkAttrs = this.editor.getAttributes(MarkType.LINK);
+            const { href: url, target } = linkAttrs;
+            return { url, target };
+        },
+        isEnabled() {
+            return this.editor.can().setLink();
+        },
+        exec({ url, target }) {
+            const { editor } = this;
+        
+            if (url === '') {
+                editor
+                    .chain()
+                    .focus()
+                    .extendMarkRange(MarkType.LINK)
+                    .unsetLink()
+                    .run();
+            
+                return;
+            }
+        
+            editor
+                .chain()
+                .focus()
+                .extendMarkRange(MarkType.LINK)
+                .setLink({ href: url, ...(target && { target }) })
+                .run();
+        }
+    }),
+    [ToolType.BOLD]: createButtonTool({
+        name: ToolType.BOLD,
+        icon: 'format-bold',
+        title: 'Жирный',
+        exec() {
+            this.editor.chain().focus().toggleBold().run();
+        },
+        isActive() {
+            return this.editor.isActive(MarkType.BOLD);
+        }
+    }),
+    [ToolType.ITALIC]: createButtonTool({
+        name: ToolType.ITALIC,
+        icon: 'format-italic',
+        title: 'Курсив',
+        exec() {
+            this.editor.chain().focus().toggleItalic().run();
+        },
+        isActive() {
+            return this.editor.isActive(MarkType.ITALIC);
+        }
+    }),
+    [ToolType.STRIKE]: createButtonTool({
+        name: ToolType.STRIKE,
+        icon: 'format-strikethrough-variant',
+        title: 'Зачеркивание',
+        exec() {
+            this.editor.chain().focus().toggleStrike().run();
+        },
+        isActive() {
+            return this.editor.isActive(MarkType.STRIKE);
+        }
+    }),
+    [ToolType.UNDERLINE]: createButtonTool({
+        name: ToolType.UNDERLINE,
+        icon: 'format-underline',
+        title: 'Подчеркивание',
+        exec() {
+            this.editor.chain().focus().toggleUnderline().run();
+        },
+        isActive() {
+            return this.editor.isActive(MarkType.UNDERLINE);
+        }
+    }),
+    [ToolType.TABLE]: createToolbarPopoverTool({
+        name: ToolType.TABLE,
+        icon: 'table-plus',
+        title: 'таблица',
+        options: Object.values(TableOptionsMap)
+    }),
+    [ToolType.CLEAR_FORMATTING]: createButtonTool({
+        name: ToolType.CLEAR_FORMATTING,
+        icon: 'eraser',
+        title: 'Очистить форматирование',
+        exec() {
+            this.editor.chain().focus().clearFormatting().run();
+        }
+    })
+};