goodteditor-ui 1.0.50 → 1.0.52

package/src/components/ui/WysiwygEditor/renders/Image.vue

@@ -3,8 +3,8 @@
         <template #button="{ togglePopover }">
             <button
                 :title="title"
-                :class="{ 'btn-outline': !isPopoverShown, 'btn-primary': isPopoverShown }"
-                class="btn btn-small btn-icon"
+                :class="{ 'btn-outline': !isPopoverShown }"
+                class="btn btn-small btn-icon btn-primary"
                 @click="togglePopover">
                 <div class="icon">
                     <i class="mdi" :class="icon"></i>
@@ -106,9 +106,9 @@ import InputAutocomplete from '../../InputAutocomplete.vue';
 import InputUnits from '../../InputUnits.vue';
 import UiSelect from '../../Select.vue';
 import WithPopover from './components/WithPopover.vue';
-import { useRender } from './mixins';
+import { useRender, RenderMixinTypes } from './mixins';
 
-const SizeUnits = ["rem", "em", "%", "px", "vh", "vw"];
+const SizeUnits = ['rem', 'em', '%', 'px', 'vh', 'vw'];
 const AlignOptions = [
     { value: null, label: 'По левому краю' },
     { value: 'mar-h-auto', label: 'По центру' },
@@ -163,6 +163,7 @@ export default {
         AlignOptions
     },
     methods: {
+        ...RenderMixinTypes,
         setImageSettings() {
             const attrs = this.tool.getValue();
 

package/src/components/ui/WysiwygEditor/renders/InputAuto.vue

@@ -8,7 +8,7 @@
 
 <script>
 import InputAutocomplete from '../../InputAutocomplete.vue';
-import { useRender } from './mixins';
+import { useRender, RenderMixinTypes } from './mixins';
 
 export default {
     components: { InputAutocomplete },
@@ -19,6 +19,7 @@ export default {
         }
     },
     methods: {
+        ...RenderMixinTypes,
         onInput(value) {
             this.tool.exec(value);
             this.emitExecuted();

package/src/components/ui/WysiwygEditor/renders/InputUnits.vue

@@ -8,7 +8,7 @@
 
 <script>
 import InputUnits from '../../InputUnits.vue';
-import { useRender } from './mixins';
+import { useRender, RenderMixinTypes } from './mixins';
 
 export default {
     components: { InputUnits },
@@ -22,6 +22,7 @@ export default {
         }
     },
     methods: {
+        ...RenderMixinTypes,
         onChange(value) {
             this.tool.exec(value);
             this.emitExecuted();

package/src/components/ui/WysiwygEditor/renders/Link.vue

@@ -3,8 +3,8 @@
         <template #button="{ togglePopover }">
             <button
                 :title="title"
-                :class="{ 'btn-outline': !isPopoverShown, 'btn-primary': isPopoverShown }"
-                class="btn btn-small btn-icon"
+                :class="{ 'btn-outline': !isPopoverShown }"
+                class="btn btn-small btn-icon btn-primary"
                 @click="togglePopover">
                 <div class="icon">
                     <i class="mdi" :class="icon"></i>
@@ -39,7 +39,7 @@
 import InputAutocomplete from '../../InputAutocomplete.vue';
 import UiSelect from '../../Select.vue';
 import WithPopover from './components/WithPopover.vue';
-import { useRender } from './mixins';
+import { useRender, RenderMixinTypes } from './mixins';
 
 const TargetType = {
     BLANK: '_blank',
@@ -74,6 +74,7 @@ export default {
         }
     },
     methods: {
+        ...RenderMixinTypes,
         execute() {
             const { tool, url, target } = this;
             tool.exec({ url, target });

package/src/components/ui/WysiwygEditor/renders/Select.vue

@@ -9,7 +9,7 @@
 
 <script>
 import UiSelect from '../../Select.vue';
-import { useRender } from './mixins';
+import { useRender, RenderMixinTypes } from './mixins';
 
 export default {
     components: { UiSelect },
@@ -32,6 +32,7 @@ export default {
         }
     },
     methods: {
+        ...RenderMixinTypes,
         onChange(option) {
             this.tool.exec(this.valueObjects ? option.value : option);
             this.emitExecuted();

package/src/components/ui/WysiwygEditor/renders/ToolbarPopover.vue

@@ -1,8 +1,8 @@
 <template>
     <div :data-popover="popoverTargetId" :title="title">
         <button
-            :class="{ 'btn-outline': !popoverShow, 'btn-primary': popoverShow }"
-            class="btn btn-small btn-icon"
+            :class="{ 'btn-outline': !popoverShow }"
+            class="btn btn-small btn-icon btn-primary"
             @click="togglePopover">
             <div class="icon">
                 <i class="mdi" :class="icon"></i>
@@ -27,12 +27,13 @@
 import Popover from '../../Popover.vue';
 import UiDatalist from '../../Datalist.vue';
 import WithPopover from '../../utils/WithPopover';
-import { useRender } from './mixins';
+import { useRender, RenderMixinTypes } from './mixins';
 
 export default {
     components: { Popover, UiDatalist },
     mixins: [useRender(), WithPopover],
     methods: {
+        ...RenderMixinTypes,
         onCommandExecuted() {
             this.popoverShow = false;
             this.emitExecuted();

package/src/components/ui/WysiwygEditor/renders/mixins/RenderMixin.d.ts

@@ -0,0 +1,20 @@
+import { ComponentOptions } from 'vue';
+import { ITool } from '../../constants';
+
+interface IRenderMixinInstance {
+    // props
+    tool: ITool;
+
+    // computed
+    readonly icon: string;
+    readonly title: string;
+    readonly isActive: boolean;
+    readonly isEnabled: boolean;
+
+    /** to notify the wysiwyg-editor that a command was executed */
+    emitExecuted(): void;
+}
+
+export const RenderMixinTypes: IRenderMixinInstance = undefined;
+
+export function useRender(): ComponentOptions;

package/src/components/ui/WysiwygEditor/renders/mixins/RenderMixin.js

@@ -1,11 +1,14 @@
+/** @return {import('vue').ComponentOptions} */
 export const useRender = () => ({
     props: {
+        /** @type {import('vue').PropOptions<import('../../constants').ITool>}*/
         tool: {
             type: Object,
             default: null
         }
     },
     computed: {
+        /** @return {string} */
         icon() {
             const { tool } = this;
             
@@ -15,6 +18,7 @@ export const useRender = () => ({
     
             return [null, undefined, ''].includes(tool.icon) ? 'mdi-help-box' : `mdi-${tool.icon}`;
         },
+        /** @return {string} */
         title() {
             const { tool } = this;
     
@@ -24,16 +28,19 @@ export const useRender = () => ({
             
             return tool.title ?? tool.name ?? 'Unknown tool';
         },
+        /** @return {boolean} */
         isActive() {
             return this.tool.isActive();
         },
+        /** @return {boolean} */
         isEnabled() {
             return this.tool.isEnabled();
         }
     },
     methods: {
+        /** to notify the wysiwyg-editor that a command was executed */
         emitExecuted() {
             this.$emit('command-executed');
         }
     }
-})
+});

package/src/components/ui/WysiwygEditor/renders/mixins/index.d.ts

@@ -0,0 +1 @@
+export * from './RenderMixin';

package/src/components/ui/WysiwygEditor/renders/mixins/index.js

@@ -1 +1 @@
-export { useRender } from './RenderMixin';
+export * from './RenderMixin';

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

@@ -3,15 +3,9 @@ import {
     MarkType,
     CommandType,
     ToolType,
-    createButtonTool,
-    createColorPickerTool,
+    Render,
+    createTool,
     createCommand,
-    createInputUnitsTool,
-    createSelectTool,
-    createToolbarPopoverTool,
-    createInputAutoTool,
-    createLinkTool,
-    createImageTool,
 } from './constants';
 
 export const CommandMap = {
@@ -164,7 +158,7 @@ export const CommandMap = {
 };
 
 export const TableOptionsMap = {
-    [ToolType.INSERT_TABLE]: createButtonTool({
+    [ToolType.INSERT_TABLE]: createTool({
         name: ToolType.INSERT_TABLE,
         icon: 'table',
         title: 'Вставить таблицу',
@@ -179,7 +173,7 @@ export const TableOptionsMap = {
             return this.editor.can().insertTable();
         }
     }),
-    [ToolType.DELETE_TABLE]: createButtonTool({
+    [ToolType.DELETE_TABLE]: createTool({
         name: ToolType.DELETE_TABLE,
         icon: 'table-remove',
         title: 'Удалить таблицу',
@@ -190,7 +184,7 @@ export const TableOptionsMap = {
             return this.editor.can().deleteTable();
         }
     }),
-    [ToolType.ADD_COLUMN_BEFORE]: createButtonTool({
+    [ToolType.ADD_COLUMN_BEFORE]: createTool({
         name: ToolType.ADD_COLUMN_BEFORE,
         icon: 'table-column-plus-before',
         title: 'Добавить колонку перед',
@@ -201,7 +195,7 @@ export const TableOptionsMap = {
             return this.editor.can().addColumnBefore();
         }
     }),
-    [ToolType.ADD_COLUMN_AFTER]: createButtonTool({
+    [ToolType.ADD_COLUMN_AFTER]: createTool({
         name: ToolType.ADD_COLUMN_AFTER,
         icon: 'table-column-plus-after',
         title: 'Добавить колонку после',
@@ -212,7 +206,7 @@ export const TableOptionsMap = {
             return this.editor.can().addColumnAfter();
         }
     }),
-    [ToolType.DELETE_COLUMN]: createButtonTool({
+    [ToolType.DELETE_COLUMN]: createTool({
         name: ToolType.DELETE_COLUMN,
         icon: 'table-column-remove',
         title: 'Удалить колонку',
@@ -223,7 +217,7 @@ export const TableOptionsMap = {
             return this.editor.can().deleteColumn();
         }
     }),
-    [ToolType.ADD_ROW_BEFORE]: createButtonTool({
+    [ToolType.ADD_ROW_BEFORE]: createTool({
         name: ToolType.ADD_ROW_BEFORE,
         icon: 'table-row-plus-before',
         title: 'Добавить строку перед',
@@ -234,7 +228,7 @@ export const TableOptionsMap = {
             return this.editor.can().addRowBefore();
         }
     }),
-    [ToolType.ADD_ROW_AFTER]: createButtonTool({
+    [ToolType.ADD_ROW_AFTER]: createTool({
         name: ToolType.ADD_ROW_AFTER,
         icon: 'table-row-plus-after',
         title: 'Добавить строку после',
@@ -245,7 +239,7 @@ export const TableOptionsMap = {
             return this.editor.can().addRowAfter();
         }
     }),
-    [ToolType.DELETE_ROW]: createButtonTool({
+    [ToolType.DELETE_ROW]: createTool({
         name: ToolType.DELETE_ROW,
         icon: 'table-row-remove',
         title: 'Удалить строку',
@@ -256,7 +250,7 @@ export const TableOptionsMap = {
             return this.editor.can().deleteRow();
         }
     }),
-    [ToolType.MERGE_CELLS]: createButtonTool({
+    [ToolType.MERGE_CELLS]: createTool({
         name: ToolType.MERGE_CELLS,
         icon: 'table-merge-cells',
         title: 'Объединить ячейки',
@@ -267,7 +261,7 @@ export const TableOptionsMap = {
             return this.editor.can().mergeCells();
         }
     }),
-    [ToolType.SPLIT_CELL]: createButtonTool({
+    [ToolType.SPLIT_CELL]: createTool({
         name: ToolType.SPLIT_CELL,
         icon: 'table-split-cell',
         title: 'Разделить ячейки',
@@ -278,7 +272,7 @@ export const TableOptionsMap = {
             return this.editor.can().splitCell();
         }
     }),
-    [ToolType.TOGGLE_HEADER_ROW]: createButtonTool({
+    [ToolType.TOGGLE_HEADER_ROW]: createTool({
         name: ToolType.TOGGLE_HEADER_ROW,
         icon: 'table-row-height',
         title: 'Переключить строку заголовка',
@@ -289,7 +283,7 @@ export const TableOptionsMap = {
             return this.editor.can().toggleHeaderRow();
         }
     }),
-    [ToolType.TOGGLE_HEADER_COLUMN]: createButtonTool({
+    [ToolType.TOGGLE_HEADER_COLUMN]: createTool({
         name: ToolType.TOGGLE_HEADER_COLUMN,
         icon: 'table-column-width',
         title: 'Переключить колонку заголовка',
@@ -300,7 +294,7 @@ export const TableOptionsMap = {
             return this.editor.can().toggleHeaderColumn();
         }
     }),
-    [ToolType.ALIGN_V_TOP]: createButtonTool({
+    [ToolType.ALIGN_V_TOP]: createTool({
         name: ToolType.ALIGN_V_TOP,
         icon: 'align-vertical-top',
         title: 'Выровнять по верхнему краю',
@@ -316,7 +310,7 @@ export const TableOptionsMap = {
             return classNames?.includes('table-vtop') ?? false;
         }
     }),
-    [ToolType.ALIGN_V_MID]: createButtonTool({
+    [ToolType.ALIGN_V_MID]: createTool({
         name: ToolType.ALIGN_V_MID,
         icon: 'align-vertical-center',
         title: 'Выровнять по центру',
@@ -332,7 +326,7 @@ export const TableOptionsMap = {
             return classNames?.includes('table-vmid') ?? false;
         }
     }),
-    [ToolType.ALIGN_V_BOT]: createButtonTool({
+    [ToolType.ALIGN_V_BOT]: createTool({
         name: ToolType.ALIGN_V_BOT,
         icon: 'align-vertical-bottom',
         title: 'Выровнять по нижнему краю',
@@ -348,7 +342,7 @@ export const TableOptionsMap = {
             return classNames?.includes('table-vbot') ?? false;
         }
     }),
-    [ToolType.TOGGLE_BORDERS]: createButtonTool({
+    [ToolType.TOGGLE_BORDERS]: createTool({
         name: ToolType.TOGGLE_BORDERS,
         icon: 'border-all',
         title: 'Границы',
@@ -364,7 +358,7 @@ export const TableOptionsMap = {
             return classNames?.includes('table-borders') ?? false;
         }
     }),
-    [ToolType.TOGGLE_ZEBRA]: createButtonTool({
+    [ToolType.TOGGLE_ZEBRA]: createTool({
         name: ToolType.TOGGLE_ZEBRA,
         icon: 'view-stream',
         title: 'Стиль "зебра"',
@@ -383,7 +377,7 @@ export const TableOptionsMap = {
 };
 
 export const ToolsMap = {
-    [ToolType.UNDO]: createButtonTool({
+    [ToolType.UNDO]: createTool({
         name: ToolType.UNDO,
         icon: 'undo-variant',
         title: 'Назад',
@@ -394,7 +388,7 @@ export const ToolsMap = {
             return this.editor.can().undo();
         }
     }),
-    [ToolType.REDO]: createButtonTool({
+    [ToolType.REDO]: createTool({
         name: ToolType.REDO,
         icon: 'redo-variant',
         title: 'Вперед',
@@ -405,7 +399,7 @@ export const ToolsMap = {
             return this.editor.can().redo();
         }
     }),
-    [ToolType.SAVE]: createButtonTool({
+    [ToolType.SAVE]: createTool({
         name: ToolType.SAVE,
         icon: 'content-save',
         title: 'Сохранить',
@@ -413,8 +407,9 @@ export const ToolsMap = {
             this.onChange();
         }
     }),
-    [ToolType.PARAGRAPH_STYLE]: createSelectTool({
+    [ToolType.PARAGRAPH_STYLE]: createTool({
         name: ToolType.PARAGRAPH_STYLE,
+        render: Render.SELECT,
         title: 'Стиль параграфа',
         exec(command) {
             if (command.name in CommandMap && command.isEnabled()) {
@@ -435,8 +430,9 @@ export const ToolsMap = {
             CommandMap[CommandType.CODE_BLOCK]
         ]
     }),
-    [ToolType.FONT_SIZE]: createInputUnitsTool({
+    [ToolType.FONT_SIZE]: createTool({
         name: ToolType.FONT_SIZE,
+        render: Render.INPUT_UNITS,
         title: 'Размер шрифта',
         exec(value) {
             this.editor.commands.setFontSize(value);
@@ -455,8 +451,9 @@ export const ToolsMap = {
         },
         units: ["rem", "em", "%", "px", "vh", "vw"]
     }),
-    [ToolType.TEXT_COLOR]: createColorPickerTool({
+    [ToolType.TEXT_COLOR]: createTool({
         name: ToolType.TEXT_COLOR,
+        render: Render.COLOR_PICKER,
         icon: 'format-color-fill',
         title: 'Цвет',
         exec(value) {
@@ -466,8 +463,9 @@ export const ToolsMap = {
             return this.editor.getAttributes(MarkType.TEXT_STYLE).color;
         }
     }),
-    [ToolType.FONT_FAMILY]: createInputAutoTool({
+    [ToolType.FONT_FAMILY]: createTool({
         name: ToolType.FONT_FAMILY,
+        render: Render.INPUT_AUTO,
         title: 'Семейство шрифта',
         exec(value) {
             this.editor.commands.setFontFamily(value);
@@ -477,7 +475,7 @@ export const ToolsMap = {
         },
         options: ['serif', 'sans-serif']
     }),
-    [ToolType.BLOCKQUOTE]: createButtonTool({
+    [ToolType.BLOCKQUOTE]: createTool({
         name: ToolType.BLOCKQUOTE,
         icon: 'format-quote-close-outline',
         title: 'Цитата',
@@ -492,7 +490,7 @@ export const ToolsMap = {
             return this.editor.isActive(NodeType.BLOCKQUOTE);
         }
     }),
-    [ToolType.HARD_BREAK]: createButtonTool({
+    [ToolType.HARD_BREAK]: createTool({
         name: ToolType.HARD_BREAK,
         title: 'Перевод строки',
         icon: 'keyboard-return',
@@ -500,7 +498,7 @@ export const ToolsMap = {
             this.editor.chain().focus().setHardBreak().run();
         }
     }),
-    [ToolType.CODE]: createButtonTool({
+    [ToolType.CODE]: createTool({
         name: ToolType.CODE,
         icon: 'code-not-equal-variant',
         title: 'Код',
@@ -511,8 +509,9 @@ export const ToolsMap = {
             return this.editor.isActive(MarkType.CODE);
         }
     }),
-    [ToolType.IMAGE]: createImageTool({
+    [ToolType.IMAGE]: createTool({
         name: ToolType.IMAGE,
+        render: Render.IMAGE,
         icon: 'image-plus',
         title: 'Изображение',
         async exec({ url = null, isResponsive, align, width, height }) {
@@ -548,7 +547,7 @@ export const ToolsMap = {
             return this.editor.getAttributes(NodeType.IMAGE);
         }
     }),
-    [ToolType.ORDERED_LIST]: createButtonTool({
+    [ToolType.ORDERED_LIST]: createTool({
         name: ToolType.ORDERED_LIST,
         icon: 'format-list-numbered',
         title: 'Нумерованный список',
@@ -559,7 +558,7 @@ export const ToolsMap = {
             return this.editor.isActive(NodeType.ORDERED_LIST);
         }
     }),
-    [ToolType.BULLET_LIST]: createButtonTool({
+    [ToolType.BULLET_LIST]: createTool({
         name: ToolType.BULLET_LIST,
         icon: 'format-list-bulleted',
         title: 'Маркированный список',
@@ -570,7 +569,7 @@ export const ToolsMap = {
             return this.editor.isActive(NodeType.BULLET_LIST);
         }
     }),
-    [ToolType.TEXT_ALIGN_LEFT]: createButtonTool({
+    [ToolType.TEXT_ALIGN_LEFT]: createTool({
         name: ToolType.TEXT_ALIGN_LEFT,
         icon: 'format-align-left',
         title: 'По левому краю',
@@ -581,7 +580,7 @@ export const ToolsMap = {
             return this.editor.isActive({ textAlign: 'left' });
         }
     }),
-    [ToolType.TEXT_ALIGN_CENTER]: createButtonTool({
+    [ToolType.TEXT_ALIGN_CENTER]: createTool({
         name: ToolType.TEXT_ALIGN_CENTER,
         icon: 'format-align-center',
         title: 'По центру',
@@ -592,7 +591,7 @@ export const ToolsMap = {
             return this.editor.isActive({ textAlign: 'center' });
         }
     }),
-    [ToolType.TEXT_ALIGN_RIGHT]: createButtonTool({
+    [ToolType.TEXT_ALIGN_RIGHT]: createTool({
         name: ToolType.TEXT_ALIGN_RIGHT,
         icon: 'format-align-right',
         title: 'По правому краю',
@@ -603,7 +602,7 @@ export const ToolsMap = {
             return this.editor.isActive({ textAlign: 'right' });
         }
     }),
-    [ToolType.HORIZONTAL_RULE]: createButtonTool({
+    [ToolType.HORIZONTAL_RULE]: createTool({
         name: ToolType.HORIZONTAL_RULE,
         icon: 'minus',
         title: 'Вертикальный разделитель',
@@ -614,8 +613,9 @@ export const ToolsMap = {
             return this.editor.can().setHorizontalRule();
         }
     }),
-    [ToolType.LINK]: createLinkTool({
+    [ToolType.LINK]: createTool({
         name: ToolType.LINK,
+        render: Render.LINK,
         icon: 'link-plus',
         title: 'Ссылка',
         getValue() {
@@ -648,7 +648,7 @@ export const ToolsMap = {
                 .run();
         }
     }),
-    [ToolType.BOLD]: createButtonTool({
+    [ToolType.BOLD]: createTool({
         name: ToolType.BOLD,
         icon: 'format-bold',
         title: 'Жирный',
@@ -659,7 +659,7 @@ export const ToolsMap = {
             return this.editor.isActive(MarkType.BOLD);
         }
     }),
-    [ToolType.ITALIC]: createButtonTool({
+    [ToolType.ITALIC]: createTool({
         name: ToolType.ITALIC,
         icon: 'format-italic',
         title: 'Курсив',
@@ -670,7 +670,7 @@ export const ToolsMap = {
             return this.editor.isActive(MarkType.ITALIC);
         }
     }),
-    [ToolType.STRIKE]: createButtonTool({
+    [ToolType.STRIKE]: createTool({
         name: ToolType.STRIKE,
         icon: 'format-strikethrough-variant',
         title: 'Зачеркивание',
@@ -681,7 +681,7 @@ export const ToolsMap = {
             return this.editor.isActive(MarkType.STRIKE);
         }
     }),
-    [ToolType.UNDERLINE]: createButtonTool({
+    [ToolType.UNDERLINE]: createTool({
         name: ToolType.UNDERLINE,
         icon: 'format-underline',
         title: 'Подчеркивание',
@@ -692,13 +692,14 @@ export const ToolsMap = {
             return this.editor.isActive(MarkType.UNDERLINE);
         }
     }),
-    [ToolType.TABLE]: createToolbarPopoverTool({
+    [ToolType.TABLE]: createTool({
         name: ToolType.TABLE,
+        render: Render.TOOLBAR_POPOVER,
         icon: 'table-plus',
         title: 'таблица',
         options: Object.values(TableOptionsMap)
     }),
-    [ToolType.CLEAR_FORMATTING]: createButtonTool({
+    [ToolType.CLEAR_FORMATTING]: createTool({
         name: ToolType.CLEAR_FORMATTING,
         icon: 'eraser',
         title: 'Очистить форматирование',

package/src/components/ui/WysiwygEditor/utils.js

@@ -1,8 +1,8 @@
 import { ToolsMap } from './tools-and-commands';
 
 /**
- * @typedef {import('./WysiwygEditor').ToolDef} Tool
- * @typedef {import('./WysiwygEditor').CommandDef} Command
+ * @typedef {import('./constants').ToolDef} Tool
+ * @typedef {import('./constants').CommandDef} Command
  * @typedef {Object} ToolGroup
  * @property {string} title
  * @property {string[]} group
@@ -13,11 +13,25 @@ import { ToolsMap } from './tools-and-commands';
  * @return {{title:string, group: Tool[]}[]}
  */
 export const buildToolGroups = (toolGroups) => {
-    const toolsFlattened = new Set(toolGroups.flatMap(({ group }) => group));
-    const availableTools = Object.values(ToolsMap).filter(({ name }) => toolsFlattened.has(name));
-    const populateToolsGroup = (tools)=> availableTools.filter(({ name }) => tools.has(name));
+    const toolsFlatted = toolGroups.flatMap(({ group }) => group);
+    const availableTools = Object
+        .values(ToolsMap)
+        .filter(({ name: toolName }) => toolsFlatted.some(
+            (tool) => typeof tool === 'string' ? toolName === tool : tool?.name === toolName)
+        );
     
-    return toolGroups.reduce((acc, { title, group }) => [...acc, { title, group: populateToolsGroup(new Set(group)) }], []);
+    /**
+     * @param {Tool[]} toolsGroup
+     * @return Tool[]
+     */
+    const populateToolsGroup = (toolsGroup) =>
+        toolsGroup.reduce((acc, tool) => {
+            const { name = tool, ...rest } = typeof tool === 'string' ? {} : tool;
+            const foundTool = availableTools.find(({ name: toolName }) => toolName === name);
+            
+            return [...acc, { ...foundTool, ...rest }];
+        }, []);
+    return toolGroups.reduce((acc, { group, title }) => [...acc, { title, group: populateToolsGroup(group) }], []);
 };
 
 /**

package/src/components/ui/utils/Helpers.js

@@ -34,6 +34,11 @@ const Position = {
     END: 'end',
 };
 
+const TriggerOn = {
+    MOUSE_MOVE: 'mousemove',
+    CLICK: 'click'
+};
+
 const debounce = (func, delay) => {
     let timeout;
     return function executedFunction(...args) {
@@ -78,6 +83,7 @@ export {
     nextId,
     Key,
     Position,
+    TriggerOn,
     debounce,
     useIntersectionObserver,
     generateGetBoundingClientRect,

package/styleguide.config.js

@@ -2,7 +2,7 @@ const path = require('path');
 const { version } = require('./package.json');
 
 module.exports = {
-    components: 'src/components/ui/[A-Z]*.vue',
+    components: 'src/components/ui/**/[A-Z]*.vue',
     require: ['goodt-framework-css'],
     title: 'UI',
     version,
@@ -11,6 +11,12 @@ module.exports = {
         const name = path.basename(componentPath, '.vue');
         return `import { ${name} } from 'goodteditor-ui';`;
     },
+    ignore: [
+        'src/components/ui/ColorPicker/**',
+        'src/components/ui/utils/**',
+        'src/components/ui/WysiwygEditor/extensions/**',
+        'src/components/ui/WysiwygEditor/renders/**',
+    ],
     template: {
         head: {
             links: [