goodteditor-ui 1.0.17 → 1.0.19

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

@@ -0,0 +1,709 @@
+import {
+    NodeType,
+    MarkType,
+    CommandType,
+    ToolType,
+    createButtonTool,
+    createColorPickerTool,
+    createCommand,
+    createInputUnitsTool,
+    createSelectTool,
+    createToolbarPopoverTool,
+    createInputAutoTool,
+    createInputBrowseTool
+} 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',
+        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',
+        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',
+        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',
+        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 ImageOptionsMap = {
+    [ToolType.INSERT_IMAGE]: createInputBrowseTool({
+        name: ToolType.INSERT_IMAGE,
+        title: 'Вставить изображение',
+        async exec(fromInputUrl) {
+            const setImage = (url) => {
+                this.editor.chain().focus().setImage({ src: url }).run();
+            };
+        
+            if (fromInputUrl != null) {
+                setImage(fromInputUrl);
+                return;
+            }
+        
+            const imageUrl = await this.getImageUrl();
+        
+            if (imageUrl != null) {
+                setImage(imageUrl);
+            }
+        },
+        getValue() {
+            return this.editor.getAttributes(NodeType.IMAGE).src;
+        }
+    })
+};
+
+export const LinkOptionsMap = {
+    [ToolType.INSERT_LINK]: createInputAutoTool({
+        name: ToolType.INSERT_LINK,
+        title: 'Вставить ссылку',
+        exec(url) {
+            const { editor } = this;
+            
+            if (url === '') {
+                editor
+                    .chain()
+                    .focus()
+                    .extendMarkRange(MarkType.LINK)
+                    .unsetLink()
+                    .run();
+        
+                return;
+            }
+    
+            editor
+                .chain()
+                .focus()
+                .extendMarkRange(MarkType.LINK)
+                .setLink({ href: url })
+                .run();
+        },
+        getValue() {
+            return this.editor.getAttributes(MarkType.LINK).href;
+        },
+        isEnabled() {
+            return this.editor.can().setLink();
+        },
+    })
+}
+
+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]: createToolbarPopoverTool({
+        name: ToolType.IMAGE,
+        icon: 'image-plus',
+        title: 'Изображение',
+        options: Object.values(ImageOptionsMap)
+    }),
+    [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]: createToolbarPopoverTool({
+        name: ToolType.LINK,
+        icon: 'link-plus',
+        title: 'Ссылка',
+        options: Object.values(LinkOptionsMap)
+    }),
+    [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();
+        }
+    })
+};