goodteditor-ui 1.0.51 → 1.0.53

package/index.d.ts

@@ -0,0 +1,60 @@
+import Avatar from './src/components/ui/Avatar.vue';
+import Badge from './src/components/ui/Badge.vue';
+import Collapse from './src/components/ui/Collapse.vue';
+import ColorPicker from './src/components/ui/ColorPicker.vue';
+import Datalist from './src/components/ui/Datalist.vue';
+import DatePicker from './src/components/ui/DatePicker.vue';
+import FileSelector from './src/components/ui/FileSelector.vue';
+import Image from './src/components/ui/Image.vue';
+import InputAutocomplete from './src/components/ui/InputAutocomplete.vue';
+import InputColorPicker from './src/components/ui/InputColorPicker.vue';
+import InputDatePicker from './src/components/ui/InputDatePicker.vue';
+import InputTags from './src/components/ui/InputTags.vue';
+import InputTimePicker from './src/components/ui/InputTimePicker.vue';
+import InputUnits from './src/components/ui/InputUnits.vue';
+import Lazy from './src/components/ui/Lazy.vue';
+import Pagination from './src/components/ui/Pagination.vue';
+import Paginator from './src/components/ui/Paginator.vue';
+import Popover from './src/components/ui/Popover.vue';
+import Popup from './src/components/ui/Popup.vue';
+import ResponsiveContainer from './src/components/ui/ResponsiveContainer.vue';
+import Select from './src/components/ui/Select.vue';
+import TimePicker from './src/components/ui/TimePicker.vue';
+import Tooltip from './src/components/ui/Tooltip.vue';
+import Grid from './src/components/ui/Grid.vue';
+import { WysiwygEditor, WysiwygConsts, WysiwygRenderMixins } from './src/components/ui/WysiwygEditor';
+// utils stuff
+import FormComponent from './src/components/ui/utils/FormComponent';
+
+const Utils = { FormComponent, ...WysiwygRenderMixins };
+const Constants = { ...WysiwygConsts };
+
+export {
+    Utils,
+    Constants,
+    Avatar,
+    Badge,
+    Collapse,
+    ColorPicker,
+    Datalist,
+    DatePicker,
+    FileSelector,
+    Image,
+    InputAutocomplete,
+    InputColorPicker,
+    InputDatePicker,
+    InputTags,
+    InputTimePicker,
+    InputUnits,
+    Lazy,
+    Pagination,
+    Paginator,
+    Popover,
+    Popup,
+    ResponsiveContainer,
+    Select,
+    TimePicker,
+    Tooltip,
+    Grid,
+    WysiwygEditor
+};

package/index.js

@@ -22,12 +22,12 @@ import Select from './src/components/ui/Select.vue';
 import TimePicker from './src/components/ui/TimePicker.vue';
 import Tooltip from './src/components/ui/Tooltip.vue';
 import Grid from './src/components/ui/Grid.vue';
-import WysiwygEditor, { ToolType as WysiwygTool } from './src/components/ui/WysiwygEditor.vue';
+import { WysiwygEditor, WysiwygConsts, WysiwygRenderMixins } from './src/components/ui/WysiwygEditor';
 // utils stuff
 import FormComponent from './src/components/ui/utils/FormComponent';
 
-const Utils = { FormComponent };
-const Constants = { WysiwygTool };
+const Utils = { FormComponent, ...WysiwygRenderMixins };
+const Constants = { ...WysiwygConsts };
 
 export {
     Utils,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "goodteditor-ui",
-    "version": "1.0.51",
+    "version": "1.0.53",
     "main": "index.js",
     "homepage": "https://goodt-ui.netlify.app/",
     "scripts": {

package/src/App.vue

@@ -12,7 +12,9 @@
 
 <script>
 import UiSelect from './components/ui/Select.vue';
-import * as Components from './../index';
+import * as Exports from './../index';
+
+const { Utils, Constants, ...Components } = Exports;
 
 export default {
     name: 'App',

package/src/components/ui/WysiwygEditor/WysiwygEditor.md

@@ -0,0 +1,74 @@
+Simple example
+```vue
+<template>
+    <div class="pad-l5">
+        <ui-wysiwyg-editor v-model="model"></ui-wysiwyg-editor>
+    </div>
+</template>
+<script>
+import UiWysiwygEditor from './WysiwygEditor.vue';
+export default {
+    components: { UiWysiwygEditor },
+    data: () => ({
+        model: `<p>This WYSIWYG is based on 
+        <a target="_blank" rel="noopener noreferrer nofollow" href="https://tiptap.dev/" class="color-link">tiptap</a> 
+        editor framework.</p>`
+    })
+};
+</script>
+```
+
+Advanced example. Using custom tool groups, bubble menu and 'change' event instead of 'input'
+
+```vue
+<template>
+    <div class="pad-l5">
+        <ui-wysiwyg-editor
+            v-bind="{
+                value: model,
+                tools,
+                focusVisible: false,
+                bubbleMenu: { isEnabled: true}
+            }"
+            @change="onChange"></ui-wysiwyg-editor>
+    </div>
+</template>
+<script>
+import UiWysiwygEditor from './WysiwygEditor.vue';
+import { createTool, ToolType } from './constants';
+
+export default {
+    components: { UiWysiwygEditor },
+    data: () => ({
+        model: `<p><strong>select text</strong> to see a formatting menu pop up</p>`,
+        tools: [
+            {
+                title: '',
+                group: [
+                    ToolType.UNDO,
+                    ToolType.REDO,
+                    ToolType.PARAGRAPH_STYLE,
+                    ToolType.TEXT_COLOR,
+                    createTool({
+                        name: ToolType.HORIZONTAL_RULE,
+                        icon: 'minus',
+                        title: 'Вертикальный разделитель',
+                        exec() {
+                            this.editor.chain().focus().setHorizontalRule().run();
+                        },
+                        isEnabled() {
+                            return this.editor.can().setHorizontalRule();
+                        }
+                    })
+                ]
+            }
+        ]
+    }),
+    methods: {
+        onChange(value) {
+            this.model = value;
+        }
+    }
+};
+</script>
+```

package/src/components/ui/{WysiwygEditor.vue → WysiwygEditor/WysiwygEditor.vue}

@@ -17,7 +17,7 @@
                             :key="groupIndex"
                             class="col col-vmid col-auto">
                             <div class="d-flex flex-col flex-v-center">
-                                <div class="group-header">
+                                <div v-if="resolveGroupTitle(title, groupIndex) !== ''" class="group-header">
                                     <!--
                                     @slot Group header slot
                                     @binding {number} groupIndex                index of the tools group
@@ -60,19 +60,17 @@
 <script>
 import { Editor, EditorContent } from '@tiptap/vue-2';
 
-import { debounce } from './utils/Helpers';
-import Grid from './Grid.vue';
-import { resolveExtensions } from './WysiwygEditor/extensions';
-import { buildToolGroups, bindContext } from './WysiwygEditor/utils';
-import { DefaultTools } from './WysiwygEditor/constants';
-
-export { ToolType } from './WysiwygEditor/constants';
+import { debounce } from '../utils/Helpers';
+import Grid from '../Grid.vue';
+import { resolveExtensions } from './extensions';
+import { buildToolGroups, bindContext } from './utils';
+import { DefaultTools } from './constants';
 
 /**
  * @typedef {Omit<import('@tiptap/extension-bubble-menu').BubbleMenuOptions, 'element'>} BubbleMenuOptions
  * @property {boolean} isEnabled
  * @typedef {import('vue').PropOptions.<BubbleMenuOptions>} BubbleMenuOptionsProp
- * @typedef {import('./WysiwygEditor/WysiwygEditor').ToolDef} Tool
+ * @typedef {import('./constants').ITool} ITool
  */
 
 export default {
@@ -89,11 +87,11 @@ export default {
             default: '',
         },
         /**
-         * array of using tools: { title: string, group: string[] }
+         * array of using tools: { title: string, group: Array<string|ITool> }
          */
         tools: {
             type: Array,
-            default: () => [],
+            default: () => DefaultTools,
             validator: (tools) => tools.every((tool) => typeof tool === 'object' && Array.isArray(tool) === false)
         },
         /**
@@ -136,11 +134,10 @@ export default {
             return this.editor?.getHTML() ?? '';
         },
         /**
-         * @return {{title: string, group: Tool[]}[]}
+         * @return {{title: string, group: ITool[]}[]}
          */
         toolGroups() {
-            const tools = this.tools.length === 0 ? DefaultTools : this.tools;
-            return buildToolGroups(tools);
+            return buildToolGroups(this.tools);
         },
         editorClass() {
             const classes = ['pad-3', 'scroll-y'];
@@ -231,8 +228,8 @@ export default {
             this.caretPosition = transaction.curSelection.to;
         },
         /**
-         * @param {Tool} tool
-         * @return Tool
+         * @param {ITool} tool
+         * @return {ITool}
          */
         buildToolBinds(tool) {
             const { editor, toolGroups } = this;

package/src/components/ui/WysiwygEditor/{WysiwygEditor.d.ts → constants.d.ts}

@@ -20,15 +20,15 @@ export type Render = Readonly<{
     IMAGE: Image;
 }>;
 
-export type CommandDef = {
+export interface ICommand {
     name: String;
     title: String;
     exec: () => void;
     isActive: () => Boolean;
     isEnabled: () => Boolean;
-};
+}
 
-export type ToolDef = {
+export interface ITool {
     name: String;
     render: Render;
     title: String;
@@ -37,9 +37,9 @@ export type ToolDef = {
     isActive: () => Boolean;
     isEnabled: () => Boolean;
     getValue?: () => String | Record<String, any>;
-    options?: Array<String | ToolDef | CommandDef>;
+    options?: Array<String | ITool | ICommand>;
     units?: Array<String>
-};
+}
 
 export type NodeType = Readonly<{
     BLOCKQUOTE: 'blockquote',
@@ -126,3 +126,12 @@ export type ToolType = Readonly<{
     TOGGLE_ZEBRA: 'toggleZebra',
     INSERT_IMAGE: 'insertImage'
 }>;
+
+export type DefaultTools = Array<{
+   title: string,
+   group: Array<string|ITool>
+}>;
+
+export function createTool(toolOptions: Partial<ITool>): ITool;
+
+export function createCommand(commandOptions: Partial<ICommand>): ICommand;

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

@@ -10,13 +10,13 @@ import {
 } from './renders';
 
 /**
- * @typedef {import('./WysiwygEditor').NodeType} NodeType
- * @typedef {import('./WysiwygEditor').MarkType} MarkType
- * @typedef {import('./WysiwygEditor').CommandType} CommandType
- * @typedef {import('./WysiwygEditor').ToolType} ToolType
- * @typedef {import('./WysiwygEditor').Render} Render
- * @typedef {import('./WysiwygEditor').CommandDef} Command
- * @typedef {import('./WysiwygEditor').ToolDef} Tool
+ * @typedef {import('./constants').NodeType} NodeType
+ * @typedef {import('./constants').MarkType} MarkType
+ * @typedef {import('./constants').CommandType} CommandType
+ * @typedef {import('./constants').ToolType} ToolType
+ * @typedef {import('./constants').Render} Render
+ * @typedef {import('./constants').ICommand} ICommand
+ * @typedef {import('./constants').ITool} ITool
  */
 
 /**
@@ -129,16 +129,16 @@ export const ToolType = Object.freeze({
 });
 
 /**
- * @param {Command} command
- * @return Command
+ * @param {Partial<ICommand>} command
+ * @return {ICommand}
  */
 export const createCommand = ({
-                            name,
-                            title = 'Unknown command',
-                            exec = () => {},
-                            isActive = () => false,
-                            isEnabled = () => true
-                        }) => ({
+    name = '',
+    title = 'Unknown command',
+    exec = () => {},
+    isActive = () => false,
+    isEnabled = () => true
+}) => ({
     name,
     title,
     exec,
@@ -161,97 +161,27 @@ export const Render = Object.freeze({
 });
 
 /**
- * @param {Tool} tool
- * @return Tool
+ * @param {Partial<ITool>} tool
+ * @return {ITool}
  */
-export const createBaseTool = ({
-                        name,
-                        render = Render.BUTTON,
-                        title = 'Unknown tool',
-                        icon = 'help-circle-outline',
-                        exec = () => {},
-                        isActive = () => false,
-                        isEnabled = () => true
-                    }) => ({
+export const createTool = ({
+    name = '',
+    render = Render.BUTTON,
+    title = 'Unknown tool',
+    icon = 'help-circle-outline',
+    exec = () => {},
+    isActive = () => false,
+    isEnabled = () => true,
+    ...optionalRest
+}) => ({
     name,
     render,
     title,
     icon,
     exec,
     isActive,
-    isEnabled
-});
-
-/**
- * @param {Tool} toolOptions
- * @return Tool
- */
-export const createButtonTool = (toolOptions) => createBaseTool(toolOptions);
-
-/**
- * @param {Tool} tool
- * @return Tool
- */
-export const createSelectTool = ({ getValue = () => null, options = [], ...toolOptions }) => ({
-    ...createBaseTool({ render: Render.SELECT, ...toolOptions }),
-    getValue,
-    options
-});
-
-/**
- * @param {Tool} tool
- * @return Tool
- */
-export const createColorPickerTool = ({ getValue = () => null, ...toolOptions }) => ({
-    ...createBaseTool({ render: Render.COLOR_PICKER, ...toolOptions }),
-    getValue
-});
-
-/**
- * @param {Tool} tool
- * @return Tool
- */
-export const createInputUnitsTool = ({ getValue = () => null, units = [], ...toolOptions }) => ({
-    ...createBaseTool({ render: Render.INPUT_UNITS, ...toolOptions }),
-    getValue,
-    units
-});
-
-/**
- * @param {Tool} tool
- * @return Tool
- */
-export const createToolbarPopoverTool = ({ options = [], ...toolOptions }) => ({
-    ...createBaseTool({ render: Render.TOOLBAR_POPOVER, ...toolOptions }),
-    options
-});
-
-/**
- * @param {Tool} tool
- * @return Tool
- */
-export const createInputAutoTool = ({ getValue = () => null, options = [], ...toolOptions }) => ({
-    ...createBaseTool({ render: Render.INPUT_AUTO, ...toolOptions }),
-    getValue,
-    options
-});
-
-/**
- * @param {Tool} tool
- * @return Tool
- */
-export const createImageTool = ({ getValue = () => null, ...toolOptions }) => ({
-    ...createBaseTool({ render: Render.IMAGE, ...toolOptions }),
-    getValue
-});
-
-/**
- * @param {Tool} tool
- * @return Tool
- */
-export const createLinkTool = ({ getValue = () => null, ...toolOptions }) => ({
-    ...createBaseTool({ render: Render.LINK, ...toolOptions }),
-    getValue
+    isEnabled,
+    ...optionalRest
 });
 
 export const DefaultTools = [

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

@@ -1,4 +1,3 @@
-export { default as WysiwygEditor } from '../WysiwygEditor.vue';
-export * from './constants'
-export * from './utils'
-export * from './tools-and-commands';
+export { default as WysiwygEditor } from './WysiwygEditor.vue';
+export * as WysiwygConsts from './constants';
+export * as WysiwygRenderMixins from './renders/mixins';

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

@@ -1,4 +1,3 @@
-export { default as WysiwygEditor } from '../WysiwygEditor.vue';
-export * from './constants'
-export * from './utils'
-export * from './tools-and-commands';
+export { default as WysiwygEditor } from './WysiwygEditor.vue';
+export * as WysiwygConsts from './constants';
+export * as WysiwygRenderMixins from './renders/mixins';

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

@@ -14,11 +14,12 @@
 </template>
 
 <script>
-import { useRender } from './mixins';
+import { useRender, RenderMixinTypes } from './mixins';
 
 export default {
     mixins: [useRender()],
     methods: {
+        ...RenderMixinTypes,
         onClick() {
             this.tool.exec();
             this.emitExecuted();

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

@@ -18,7 +18,7 @@
 import ColorPicker from '../../ColorPicker.vue';
 import Popover from '../../Popover.vue';
 import WithPopover from '../../utils/WithPopover';
-import { useRender } from './mixins';
+import { useRender, RenderMixinTypes } from './mixins';
 
 export default {
     components: { ColorPicker, Popover },
@@ -29,6 +29,7 @@ export default {
         }
     },
     methods: {
+        ...RenderMixinTypes,
         onSubmit({ rgba }) {
             const { r: red, g: green, b: blue, a: alpha } = rgba;
             const color = `rgba(${red}, ${green}, ${blue}, ${alpha})`;

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

@@ -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

@@ -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

@@ -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,21 @@ 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');
         }
     }
-})
+});
+
+export const RenderMixinTypes = undefined;

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/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: [

package/src/components/ui/WysiwygEditor.md

@@ -1,18 +0,0 @@
-```vue
-<template>
-    <div class="pad-l5">
-        <ui-wysiwyg-editor v-model="model"></ui-wysiwyg-editor>
-    </div>
-</template>
-<script>
-import UiWysiwygEditor from './WysiwygEditor.vue';
-export default {
-    components: { UiWysiwygEditor },
-    data: () => ({
-        model: `<p>This WYSIWYG is based on 
-        <a target="_blank" rel="noopener noreferrer nofollow" href="https://tiptap.dev/" class="color-link">tiptap</a> 
-        editor framework.</p>`
-    })
-};
-</script>
-```