goodteditor-ui 1.0.44 → 1.0.45

package/index.js

@@ -22,14 +22,16 @@ 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 from './src/components/ui/WysiwygEditor.vue';
+import WysiwygEditor, { ToolType as WysiwygTool } from './src/components/ui/WysiwygEditor.vue';
 // utils stuff
 import FormComponent from './src/components/ui/utils/FormComponent';
 
 const Utils = { FormComponent };
+const Constants = { WysiwygTool };
 
 export {
     Utils,
+    Constants,
     Avatar,
     Badge,
     Collapse,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "goodteditor-ui",
-    "version": "1.0.44",
+    "version": "1.0.45",
     "main": "index.js",
     "homepage": "https://goodt-ui.netlify.app/",
     "scripts": {
@@ -12,6 +12,7 @@
     },
     "dependencies": {
         "@popperjs/core": "2.11.2",
+        "@tiptap/extension-bubble-menu": "^2.2.4",
         "@tiptap/extension-color": "2.0.x",
         "@tiptap/extension-font-family": "2.0.x",
         "@tiptap/extension-image": "2.0.x",

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

@@ -255,19 +255,28 @@ export const createLinkTool = ({ getValue = () => null, ...toolOptions }) => ({
 });
 
 export const DefaultTools = [
-    [ToolType.PARAGRAPH_STYLE, ToolType.TEXT_COLOR, ToolType.FONT_SIZE, ToolType.FONT_FAMILY, ToolType.BLOCKQUOTE],
-    [ToolType.BOLD, ToolType.ITALIC, ToolType.UNDERLINE, ToolType.STRIKE, ToolType.CODE],
-    [ToolType.TEXT_ALIGN_LEFT, ToolType.TEXT_ALIGN_CENTER, ToolType.TEXT_ALIGN_RIGHT],
-    [ToolType.ORDERED_LIST, ToolType.BULLET_LIST],
-    [ToolType.IMAGE, ToolType.LINK, ToolType.TABLE],
-    [ToolType.CLEAR_FORMATTING, ToolType.HARD_BREAK]
-];
-
-export const DefaultToolGroupsTitles = [
-    'Оформление',
-    'Форматирование',
-    'Выравнивание',
-    'Нумерация',
-    'Вставка',
-    ''
+    {
+        title: 'Оформление',
+        group: [ToolType.PARAGRAPH_STYLE, ToolType.TEXT_COLOR, ToolType.FONT_SIZE, ToolType.FONT_FAMILY, ToolType.BLOCKQUOTE]
+    },
+    {
+        title: 'Форматирование',
+        group: [ToolType.BOLD, ToolType.ITALIC, ToolType.UNDERLINE, ToolType.STRIKE, ToolType.CODE]
+    },
+    {
+        title: 'Выравнивание',
+        group: [ToolType.TEXT_ALIGN_LEFT, ToolType.TEXT_ALIGN_CENTER, ToolType.TEXT_ALIGN_RIGHT]
+    },
+    {
+        title: 'Нумерация',
+        group: [ToolType.ORDERED_LIST, ToolType.BULLET_LIST]
+    },
+    {
+        title: 'Вставка',
+        group: [ToolType.IMAGE, ToolType.LINK, ToolType.TABLE]
+    },
+    {
+        title: '',
+        group: [ToolType.CLEAR_FORMATTING, ToolType.HARD_BREAK]
+    }
 ];

package/src/components/ui/WysiwygEditor/extensions/bubble-menu.js

@@ -0,0 +1,18 @@
+import BubbleMenuToExtend from '@tiptap/extension-bubble-menu';
+
+/**
+ * @typedef {import('@tiptap/extension-bubble-menu').BubbleMenuOptions} BubbleMenuOptions
+ * @typedef {import('@tiptap/core').Extension} Extension
+ */
+
+/**
+ * @param {BubbleMenuOptions} options
+ * @return {Extension<BubbleMenuOptions, any>}
+ */
+export const BubbleMenu = ({
+   element,
+   tippyOptions = { maxWidth: 'none', zIndex: 1000 },
+}) => BubbleMenuToExtend.configure({
+    element,
+    tippyOptions,
+});

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

@@ -1,32 +1,4 @@
-export { Document } from '@tiptap/extension-document';
-export { Text } from '@tiptap/extension-text';
-export { History } from '@tiptap/extension-history';
-export { Dropcursor } from '@tiptap/extension-dropcursor';
-export { Gapcursor } from '@tiptap/extension-gapcursor';
-export { Color } from '@tiptap/extension-color';
-export { FontFamily } from '@tiptap/extension-font-family';
-export { HardBreak } from '@tiptap/extension-hard-break';
+import { Extension } from '@tiptap/core';
+import { BubbleMenuOptions } from '@tiptap/extension-bubble-menu';
 
-export { Table } from './table';
-export { TableRow } from './table-row';
-export { TableCell } from './table-cell';
-export { TableHeader } from './table-header';
-export { Heading } from './heading';
-export { Code } from './code';
-export { CodeBlock } from './code-block';
-export { Link } from './link';
-export { TextAlign } from './text-align';
-export { FontSize } from './font-size';
-export { Paragraph } from './paragraph';
-export { Formatting } from './formatting';
-export { TextStyle } from './text-style';
-export { Blockquote } from './blockquote';
-export { Bold } from './bold';
-export { Italic } from './italic';
-export { Underline } from './underline';
-export { Strike } from './strike';
-export { OrderedList } from './ordered-list';
-export { BulletList } from './bullet-list';
-export { ListItem } from './list-item';
-export { Image } from './image';
-export { HorizontalRule } from './horizontal-rule';
+export function resolveExtensions(options: { bubbleMenu: BubbleMenuOptions }): (Node<any, any>|Extension<any, any>)[]

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

@@ -1,32 +1,80 @@
-export { Document } from '@tiptap/extension-document';
-export { Text } from '@tiptap/extension-text';
-export { History } from '@tiptap/extension-history';
-export { Dropcursor } from '@tiptap/extension-dropcursor';
-export { Gapcursor } from '@tiptap/extension-gapcursor';
-export { Color } from '@tiptap/extension-color';
-export { FontFamily } from '@tiptap/extension-font-family';
-export { HardBreak } from '@tiptap/extension-hard-break';
+import { Document } from '@tiptap/extension-document';
+import { Text } from '@tiptap/extension-text';
+import { History } from '@tiptap/extension-history';
+import { Dropcursor } from '@tiptap/extension-dropcursor';
+import { Gapcursor } from '@tiptap/extension-gapcursor';
+import { Color } from '@tiptap/extension-color';
+import { FontFamily } from '@tiptap/extension-font-family';
+import { HardBreak } from '@tiptap/extension-hard-break';
 
-export { Table } from './table';
-export { TableRow } from './table-row';
-export { TableCell } from './table-cell';
-export { TableHeader } from './table-header';
-export { Heading } from './heading';
-export { Code } from './code';
-export { CodeBlock } from './code-block';
-export { Link } from './link';
-export { TextAlign } from './text-align';
-export { FontSize } from './font-size';
-export { Paragraph } from './paragraph';
-export { Formatting } from './formatting';
-export { TextStyle } from './text-style';
-export { Blockquote } from './blockquote';
-export { Bold } from './bold';
-export { Italic } from './italic';
-export { Underline } from './underline';
-export { Strike } from './strike';
-export { OrderedList } from './ordered-list';
-export { BulletList } from './bullet-list';
-export { ListItem } from './list-item';
-export { Image } from './image';
-export { HorizontalRule } from './horizontal-rule';
+import { Table } from './table';
+import { TableRow } from './table-row';
+import { TableCell } from './table-cell';
+import { TableHeader } from './table-header';
+import { Heading } from './heading';
+import { Code } from './code';
+import { CodeBlock } from './code-block';
+import { Link } from './link';
+import { TextAlign } from './text-align';
+import { FontSize } from './font-size';
+import { Paragraph } from './paragraph';
+import { Formatting } from './formatting';
+import { TextStyle } from './text-style';
+import { Blockquote } from './blockquote';
+import { Bold } from './bold';
+import { Italic } from './italic';
+import { Underline } from './underline';
+import { Strike } from './strike';
+import { OrderedList } from './ordered-list';
+import { BulletList } from './bullet-list';
+import { ListItem } from './list-item';
+import { Image } from './image';
+import { HorizontalRule } from './horizontal-rule';
+import { BubbleMenu } from './bubble-menu';
+
+/**
+ * @typedef {import('@tiptap/core').Extension} Extension
+ * @typedef {import('@tiptap/extension-bubble-menu').BubbleMenuOptions} BubbleMenuOptions
+ */
+
+/**
+ *
+ * @param {{bubbleMenu: BubbleMenuOptions}} options
+ * @return {Array<Node<any, any>|Extension<any,any>>}
+ */
+export function resolveExtensions(options) {
+    return [
+        Document,
+        Text,
+        History,
+        Dropcursor,
+        Gapcursor,
+        Color,
+        FontFamily,
+        HardBreak,
+        Table,
+        TableRow,
+        TableCell,
+        TableHeader,
+        Heading,
+        Code,
+        CodeBlock,
+        Link,
+        TextAlign,
+        FontSize,
+        Paragraph,
+        Formatting,
+        TextStyle,
+        Blockquote,
+        Bold,
+        Italic,
+        Underline,
+        Strike,
+        OrderedList,
+        BulletList,
+        ListItem,
+        Image,
+        HorizontalRule,
+        BubbleMenu(options.bubbleMenu)
+    ]
+}

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

@@ -1,9 +1,9 @@
 <template>
     <div :title="title">
         <button
-            :class="{ 'btn-outline': !isActive }"
+            :class="{ 'btn-outline': !isActive, 'btn-primary': isActive }"
             :disabled="!isEnabled"
-            class="btn btn-small btn-icon btn-primary"
+            class="btn btn-small btn-icon"
             @click.stop="onClick">
             <div class="icon">
                 <i :class="icon" class="mdi"></i>

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

@@ -1,7 +1,8 @@
 <template>
     <div :data-popover="popoverTargetId" :title="title">
         <button
-            class="btn btn-small btn-outline btn-primary btn-icon"
+            :class="{ 'btn-outline': !popoverShow, 'btn-primary': popoverShow }"
+            class="btn btn-small btn-icon"
             @click="togglePopover">
             <div class="icon">
                 <i class="mdi" :class="icon"></i>

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

@@ -3,7 +3,8 @@
         <template #button="{ togglePopover }">
             <button
                 :title="title"
-                class="btn btn-small btn-primary btn-outline btn-icon"
+                :class="{ 'btn-outline': !isPopoverShown, 'btn-primary': isPopoverShown }"
+                class="btn btn-small btn-icon"
                 @click="togglePopover">
                 <div class="icon">
                     <i class="mdi" :class="icon"></i>
@@ -54,7 +55,7 @@
                     <div class="col col-vmid col-12-12">
                         <ui-select
                             v-model="image.align"
-                            :options="AlignOptions"
+                            :options="$options.static.AlignOptions"
                             size="small"
                             class="w-100"
                             @change="onChange" />
@@ -70,7 +71,7 @@
                             <div class="col col-vmid col-12-12">
                                 <input-units
                                     v-model="image.width"
-                                    :units="SizeUnits"
+                                    :units="$options.static.SizeUnits"
                                     :disabled="image.isResponsive"
                                     size="small"
                                     @change="onChange">
@@ -86,7 +87,7 @@
                             <div class="col col-vmid col-12-12">
                                 <input-units
                                     v-model="image.height"
-                                    :units="SizeUnits"
+                                    :units="$options.static.SizeUnits"
                                     :disabled="image.isResponsive"
                                     size="small"
                                     @change="onChange">

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

@@ -3,7 +3,8 @@
         <template #button="{ togglePopover }">
             <button
                 :title="title"
-                class="btn btn-small btn-primary btn-outline btn-icon"
+                :class="{ 'btn-outline': !isPopoverShown, 'btn-primary': isPopoverShown }"
+                class="btn btn-small btn-icon"
                 @click="togglePopover">
                 <div class="icon">
                     <i class="mdi" :class="icon"></i>
@@ -25,7 +26,7 @@
             <div class="col col-vmid col-12-12">
                 <ui-select
                     v-model="target"
-                    :options="TargetTypeOptions"
+                    :options="$options.static.TargetTypeOptions"
                     class="w-100"
                     size="small" />
             </div>

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

@@ -1,7 +1,8 @@
 <template>
     <div :data-popover="popoverTargetId" :title="title">
         <button
-            class="btn btn-small btn-outline btn-primary btn-icon"
+            :class="{ 'btn-outline': !popoverShow, 'btn-primary': popoverShow }"
+            class="btn btn-small btn-icon"
             @click="togglePopover">
             <div class="icon">
                 <i class="mdi" :class="icon"></i>

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

@@ -3,49 +3,21 @@ import { ToolsMap } from './tools-and-commands';
 /**
  * @typedef {import('./WysiwygEditor').ToolDef} Tool
  * @typedef {import('./WysiwygEditor').CommandDef} Command
+ * @typedef {Object} ToolGroup
+ * @property {string} title
+ * @property {string[]} group
  */
 
 /**
- * @param {Tool | string} tool
- * @param {string} toolName
- * @return boolean
+ * @param {ToolGroup[]} toolGroups
+ * @return {{title:string, group: Tool[]}[]}
  */
-const findTool = (tool, toolName) => {
-    if (typeof tool === 'string') {
-        return toolName === tool;
-    }
-    
-    return tool?.name === toolName;
-};
-
-/**
- * @param {Tool[][]} tools
- * @return Tool[][]
- */
-export const buildToolGroups = (tools) => {
-    const toolsFlatted = tools.flat();
-    
-    if (toolsFlatted.length === 0) {
-        return [Object.values(ToolsMap)];
-    }
-    
-    const availableTools = Object
-        .values(ToolsMap)
-        .filter(({ name }) => toolsFlatted.some((tool) => findTool(tool, name)));
-    
-    /**
-     * @param {Tool[]} toolsGroup
-     * @return Tool[]
-     */
-    const populateToolsGroup = (toolsGroup) =>
-        toolsGroup.reduce((acc, tool) => {
-            const { name: toolName = tool, ...rest } = typeof tool === 'string' ? {} : tool;
-            const foundTool = availableTools.find(({ name }) => findTool(tool, name));
-            
-            return [...acc, { ...foundTool, ...rest }];
-        }, []);
+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));
     
-    return tools.reduce((acc, toolsGroup) => [...acc, populateToolsGroup(toolsGroup)], []);
+    return toolGroups.reduce((acc, { title, group }) => [...acc, { title, group: populateToolsGroup(new Set(group)) }], []);
 };
 
 /**

package/src/components/ui/WysiwygEditor.vue

@@ -1,20 +1,19 @@
 <template>
-    <grid class="editor" v-bind="GridProps">
+    <grid class="editor" v-bind="$options.static.GridProps">
         <template #editor-toolbar="{ style }">
-            <div :style="style" class="editor-toolbar">
+            <div :style="style" ref="menu" :class="{ 'bubble': bubbleMenu }"  class="editor-toolbar">
                 <!--
                 @slot Toolbar slot
-                @binding {Tool[][]} toolGroups              2d matrix of using tools split into groups
-                @binding {Function} resolveGroupTitle       resolve group title function(index:number)
-                @binding {Function} buildToolBinds          build tool binds function(tool:Tool)
+                @binding {title: string, group: Tool[]} toolGroups      array of using tools
+                @binding {Function} buildToolBinds                      build tool binds function(tool:Tool)
                 -->
                 <slot
                     v-if="editor != null"
                     name="toolbar"
-                    v-bind="{ toolGroups, resolveGroupTitle, buildToolBinds }">
+                    v-bind="{ toolGroups, buildToolBinds }">
                     <div class="row row-gap-l1">
                         <div
-                            v-for="(toolsGroup, groupIndex) of toolGroups"
+                            v-for="({ title, group }, groupIndex) of toolGroups"
                             :key="groupIndex"
                             class="col col-vmid col-auto">
                             <div class="d-flex flex-col flex-v-center">
@@ -22,22 +21,22 @@
                                     <!--
                                     @slot Group header slot
                                     @binding {number} groupIndex                index of the tools group
-                                    @binding {Function} resolveGroupTitle       resolve group title function(index:number)
+                                    @binding {string} title                     tools group title
                                     -->
-                                    <slot name="group-header" v-bind="{ groupIndex, resolveGroupTitle }">
-                                        <div class="text-small text-center">{{ resolveGroupTitle(groupIndex) }}</div>
+                                    <slot name="group-header" v-bind="{ groupIndex, title }">
+                                        <div class="text-small text-center">{{ resolveGroupTitle(title, groupIndex) }}</div>
                                     </slot>
                                 </div>
                                 <div>
                                     <div
-                                        v-for="tool of toolsGroup"
+                                        v-for="tool of group"
                                         :key="tool.name"
                                         class="tool d-inline-block">
                                         <!--
                                         @slot Tool slot
                                         @binding {Tool} tool         tool's already bound to editor context
                                         -->
-                                        <slot name="tool" v-bind="buildToolBinds(tool)">
+                                        <slot name="tool" v-bind="{ tool: buildToolBinds(tool) }">
                                             <component :is="tool.render" :tool="buildToolBinds(tool)" />
                                         </slot>
                                     </div>
@@ -63,16 +62,23 @@ import { Editor, EditorContent } from '@tiptap/vue-2';
 
 import { debounce } from './utils/Helpers';
 import Grid from './Grid.vue';
-import * as Extensions from './WysiwygEditor/extensions';
+import { resolveExtensions } from './WysiwygEditor/extensions';
 import { buildToolGroups, bindContext } from './WysiwygEditor/utils';
-import { DefaultTools, DefaultToolGroupsTitles } from './WysiwygEditor/constants';
+import { DefaultTools } from './WysiwygEditor/constants';
+import Popup from '@/components/ui/Popup.vue';
+
+export { ToolType } from './WysiwygEditor/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
  */
 
 export default {
     components: {
+        Popup,
         Grid,
         EditorContent
     },
@@ -85,22 +91,12 @@ export default {
             default: '',
         },
         /**
-         * 2d matrix of using tools
+         * array of using tools: { title: string, group: string[] }
          */
         tools: {
             type: Array,
             default: () => [],
-            validator: (tools) => tools.flat().every((tool) =>
-                typeof tool === 'string' || (tool != null && typeof tool === 'object' && Array.isArray(tool) === false)
-            )
-        },
-        /**
-         * editor tool groups titles
-         */
-        groupsTitles: {
-            type: Array,
-            default: () => [],
-            validator: (titles) => titles.every((title) => typeof title === 'string')
+            validator: (tools) => tools.every((tool) => typeof tool === 'object' && Array.isArray(tool) === false)
         },
         /**
          * @public
@@ -109,16 +105,29 @@ export default {
         getImageUrl: {
             type: Function,
             default: async () => {}
+        },
+        /**
+         * bubble menu options
+         * @type {BubbleMenuOptionsProp}
+         * @see See [Bubble menu settings](https://tiptap.dev/docs/editor/api/extensions/bubble-menu#settings)
+         */
+        bubbleMenu: {
+            type: Object,
+            default: () => ({
+                isEnabled: false
+            })
+        },
+        /**
+         * whether the outline of the focused content editor should be visible
+         */
+        focusVisible: {
+            type: Boolean,
+            default: true
         }
     },
     data: () => ({
         /** @type {Editor} */
         editor: null,
-        /** @type {Tool[][]}  */
-        appliedTools: null,
-        /** @type {string[]}  */
-        appliedGroupsTitles: null,
-        /** @type {number}  */
         caretPosition: 0
     }),
     computed: {
@@ -129,10 +138,20 @@ export default {
             return this.editor?.getHTML() ?? '';
         },
         /**
-         * @return {Tool[][]}
+         * @return {{title: string, group: Tool[]}[]}
          */
         toolGroups() {
-            return buildToolGroups(this.appliedTools);
+            const tools = this.tools.length === 0 ? DefaultTools : this.tools;
+            return buildToolGroups(tools);
+        },
+        editorClass() {
+            const classes = ['pad-3', 'scroll-y'];
+
+            if (this.focusVisible === false) {
+                classes.push('focus-outline-none');
+            }
+
+            return classes.join(' ');
         }
     },
     static: {
@@ -158,16 +177,22 @@ export default {
     },
     created() {
         this.onSelectionUpdateDebounced = debounce(this.onSelectionUpdate, 300);
-        this.appliedTools = this.tools.length === 0 ? DefaultTools : this.tools;
-        this.appliedGroupsTitles = this.groupsTitles.length === 0 ? DefaultToolGroupsTitles : this.groupsTitles;
+    },
+    mounted() {
+        const { isEnabled: isBubbleMenuEnabled, ...bubbleMenuOptions } = this.bubbleMenu;
 
         this.editor = new Editor({
             content: this.value,
-            extensions: Object.values(Extensions),
+            extensions: resolveExtensions({
+                bubbleMenu: {
+                    element: isBubbleMenuEnabled ? this.$refs.menu : null,
+                    ...bubbleMenuOptions
+                }
+            }),
             autofocus: 'end',
             editorProps: {
                 attributes: {
-                    class: 'pad-3 scroll-y',
+                    class: this.editorClass,
                     style: 'min-height: 100%; height: 0;'
                 }
             },
@@ -220,20 +245,20 @@ export default {
                     return tool;
                 },
                 get tools() {
-                  return toolGroups.flat();
+                    return toolGroups.flatMap(({ group }) => group);
                 },
                 change: this.change,
-                getImageUrl: this.getImageUrl
+                getImageUrl: this.getImageUrl,
             });
 
             return bindContext(tool, context);
         },
         /**
+         * @param {string} title
          * @param {number} groupIndex
          * @return string
          */
-        resolveGroupTitle(groupIndex) {
-            const title = this.appliedGroupsTitles[groupIndex];
+        resolveGroupTitle(title, groupIndex) {
             return typeof title === 'string' ? title : `Group ${groupIndex + 1}`;
         }
     }
@@ -241,7 +266,14 @@ export default {
 </script>
 <style lang="less" scoped>
 .editor {
-    &-toolbar {}
+    &-toolbar {
+        &.bubble {
+            padding: 1rem;
+            background-color: var(--color-white);
+            border-radius: var(--border-radius);
+            box-shadow: 0 1px 4px -2px rgba(0, 0, 0, 0.25);
+        }
+    }
 
     &-content {
         min-height: 7.5rem;
@@ -259,6 +291,10 @@ export default {
 }
 
 ::v-deep .ProseMirror {
+    &.focus-outline-none:focus-visible {
+        outline: none;
+    }
+
     & .ProseMirror-selectednode {
         outline: 2px solid var(--color-focus);
     }