goodteditor-ui 1.0.55 → 1.0.57

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "goodteditor-ui",
-    "version": "1.0.55",
+    "version": "1.0.57",
     "main": "index.js",
     "homepage": "https://goodt-ui.netlify.app/",
     "scripts": {
@@ -13,19 +13,18 @@
     "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",
-        "@tiptap/extension-link": "2.0.x",
-        "@tiptap/extension-table": "2.0.x",
-        "@tiptap/extension-table-cell": "2.0.x",
-        "@tiptap/extension-table-header": "2.0.x",
-        "@tiptap/extension-table-row": "2.0.x",
-        "@tiptap/extension-text-align": "2.0.x",
-        "@tiptap/extension-text-style": "2.0.x",
-        "@tiptap/extension-underline": "2.0.x",
-        "@tiptap/starter-kit": "2.0.x",
-        "@tiptap/vue-2": "2.0.x"
+        "@tiptap/extension-color": "^2.0.0",
+        "@tiptap/extension-font-family": "^2.0.0",
+        "@tiptap/extension-image": "^2.0.0",
+        "@tiptap/extension-link": "^2.0.0",
+        "@tiptap/extension-table": "^2.0.0",
+        "@tiptap/extension-table-cell": "^2.0.0",
+        "@tiptap/extension-table-header": "^2.0.0",
+        "@tiptap/extension-table-row": "^2.0.0",
+        "@tiptap/extension-text-style": "^2.0.0",
+        "@tiptap/extension-underline": "^2.0.0",
+        "@tiptap/starter-kit": "^2.0.0",
+        "@tiptap/vue-2": "^2.0.0"
     },
     "devDependencies": {
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",

package/src/components/ui/InputTags.vue

@@ -234,23 +234,12 @@ export default {
             }
             this.tagSelected = tagSelected;
         },
-        /**
-         *
-         * @param {KeyboardEvent} e
-         * @return {boolean}
-         */
-        canSelectTag(e) {
-            return e.target.value === '' && ['Backspace', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].indexOf(e.code)
-        },
         /**
          *
          * @param {KeyboardEvent} e
          */
         onInputKeydown(e) {
             switch (e.key) {
-                case ',':
-                case ';':
-                case 'Tab':
                 case 'Enter': {
                     this.onInputEnter(e);
                     return;
@@ -261,7 +250,8 @@ export default {
                 }
             }
 
-            if (this.canSelectTag(e) === false) {
+            // if some text in input exist
+            if (e.target.value !== '') {
                 return;
             }
 

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

@@ -29,7 +29,7 @@ Advanced example. Using custom tool groups, bubble menu and 'change' event inste
                 tools,
                 focusVisible: false,
                 autofocus: false,
-                bubbleMenu: { isEnabled: true}
+                bubbleMenu: true
             }"
             @change="onChange"></ui-wysiwyg-editor>
     </div>

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

@@ -1,81 +1,66 @@
 <template>
-    <grid class="editor" v-bind="$options.static.GridProps">
-        <template #editor-toolbar="{ style }">
-            <div :style="style" ref="menu" :class="{ 'bubble': bubbleMenu.isEnabled }" class="editor-toolbar">
-                <!--
-                @slot Toolbar slot
-                @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, buildToolBinds }">
-                    <div class="row row-gap-l1">
-                        <div
-                            v-for="({ title, group }, groupIndex) of toolGroups"
-                            :key="groupIndex"
-                            class="col col-vbot col-auto">
-                            <div class="d-flex flex-col flex-v-center">
-                                <div v-if="resolveGroupTitle(title, groupIndex) !== ''" class="group-header">
+    <div class="d-flex flex-col">
+        <div ref="menu" :class="{ bubble: bubbleMenu, 'mar-bot-l1': !bubbleMenu }" class="editor-toolbar">
+            <!--
+            @slot Toolbar slot
+            @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, buildToolBinds }">
+                <div class="row row-gap-l1">
+                    <div
+                        v-for="({ title, group }, groupIndex) of toolGroups"
+                        :key="groupIndex"
+                        class="col col-vbot col-auto">
+                        <div class="d-flex flex-col flex-v-center">
+                            <div v-if="resolveGroupTitle(title, groupIndex) !== ''" class="group-header">
+                                <!--
+                                @slot Group header slot
+                                @binding {number} groupIndex                index of the tools group
+                                @binding {string} title                     tools group title
+                                -->
+                                <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 group" :key="tool.name" class="tool d-inline-block">
                                     <!--
-                                    @slot Group header slot
-                                    @binding {number} groupIndex                index of the tools group
-                                    @binding {string} title                     tools group title
+                                    @slot Tool slot
+                                    @binding {Tool} tool         tool's already bound to editor context
                                     -->
-                                    <slot name="group-header" v-bind="{ groupIndex, title }">
-                                        <div class="text-small text-center">{{ resolveGroupTitle(title, groupIndex) }}</div>
+                                    <slot name="tool" v-bind="{ tool: buildToolBinds(tool) }">
+                                        <component :is="tool.render" :tool="buildToolBinds(tool)" />
                                     </slot>
                                 </div>
-                                <div>
-                                    <div
-                                        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="{ tool: buildToolBinds(tool) }">
-                                            <component :is="tool.render" :tool="buildToolBinds(tool)" />
-                                        </slot>
-                                    </div>
-                                </div>
                             </div>
                         </div>
                     </div>
-                </slot>
-            </div>
-        </template>
-        <template #editor-content="{ style }">
-            <div :style="style" class="pad-v-l1" >
-                <div class="editor-content h-100">
-                    <editor-content :editor="editor" class="h-100"/>
                 </div>
-            </div>
-        </template>
-    </grid>
+            </slot>
+        </div>
+        <div class="editor-content flex-grow d-flex">
+            <editor-content :editor="editor" class="w-100"/>
+        </div>
+    </div>
 </template>
 
 <script>
 import { Editor, EditorContent } from '@tiptap/vue-2';
 
 import { debounce } from '../utils/Helpers';
-import Grid from '../Grid.vue';
 import { resolveExtensions } from './extensions';
 import { buildToolGroups, bindContext } from './utils';
 import { DefaultTools, WysiwygAutofocus } from './constants';
 
 /**
  * @typedef {Omit<import('@tiptap/extension-bubble-menu').BubbleMenuOptions, 'element'>} BubbleMenuOptions
- * @property {boolean} isEnabled
- * @typedef {import('vue').PropOptions.<BubbleMenuOptions>} BubbleMenuOptionsProp
+ * @typedef {import('vue').PropOptions.<Boolean|BubbleMenuOptions>} BubbleMenuOptionsProp
  * @typedef {import('./constants').ITool} ITool
  */
 
 export default {
     components: {
-        Grid,
         EditorContent
     },
     props: {
@@ -108,10 +93,8 @@ export default {
          * @see See [Bubble menu settings](https://tiptap.dev/docs/editor/api/extensions/bubble-menu#settings)
          */
         bubbleMenu: {
-            type: Object,
-            default: () => ({
-                isEnabled: false
-            })
+            type: [Boolean, Object],
+            default: false
         },
         /**
          * whether the outline of the focused content editor should be visible
@@ -147,7 +130,7 @@ export default {
             return buildToolGroups(this.tools);
         },
         editorClass() {
-            const classes = ['pad-3', 'scroll-y'];
+            const classes = ['h-100', 'pad-3', 'scroll-y'];
 
             if (this.focusVisible === false) {
                 classes.push('focus-outline-none');
@@ -156,13 +139,6 @@ export default {
             return classes.join(' ');
         }
     },
-    static: {
-        GridProps: {
-            areas: [['editor-toolbar'], ['editor-content']],
-            rows: ['auto', '1fr'],
-            gap: ['0.5rem', 0]
-        }
-    },
     watch: {
         /**
          * @param {string} value
@@ -182,21 +158,21 @@ export default {
     },
     mounted() {
         const { $refs, value, bubbleMenu, autofocus, editorClass, onSelectionUpdateDebounced } = this;
-        const { isEnabled: isBubbleMenuEnabled, ...bubbleMenuOptions } = bubbleMenu;
 
         this.editor = new Editor({
             content: value,
             extensions: resolveExtensions({
-                bubbleMenu: {
-                    element: isBubbleMenuEnabled ? $refs.menu : null,
-                    ...bubbleMenuOptions
-                }
+                ...(bubbleMenu && {
+                    bubbleMenu: {
+                        element: $refs.menu,
+                        ...bubbleMenu
+                    }
+                })
             }),
             autofocus,
             editorProps: {
                 attributes: {
-                    class: editorClass,
-                    style: 'min-height: 100%; height: 0;'
+                    class: editorClass
                 }
             },
             onUpdate: () => {

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

@@ -10,9 +10,9 @@ import BubbleMenuToExtend from '@tiptap/extension-bubble-menu';
  * @return {Extension<BubbleMenuOptions, any>}
  */
 export const BubbleMenu = ({
-   element,
-   tippyOptions = { maxWidth: 'none', zIndex: 1000 },
-}) => BubbleMenuToExtend.configure({
+   element = null,
+   tippyOptions = { maxWidth: 'none', zIndex: 1010 },
+} = {}) => BubbleMenuToExtend.configure({
     element,
     tippyOptions,
 });

package/src/components/ui/WysiwygEditor/extensions/text-align.js

@@ -1,6 +1,72 @@
-import { TextAlign as TextAlignToExtend } from '@tiptap/extension-text-align';
+import { Extension } from '@tiptap/core';
 import { NodeType, MarkType } from '../constants';
 
-export const TextAlign = TextAlignToExtend.configure({
-    types: [NodeType.HEADING, NodeType.PARAGRAPH, MarkType.LINK, NodeType.CODE_BLOCK, NodeType.BLOCKQUOTE]
+/**
+ * we cannot use existing textAlign extension due to need to change textAlign global attribute renderHTML function
+ * that not allowed by simple default extension configuration
+ */
+export const TextAlign = Extension.create({
+    name: 'textAlign',
+    addOptions() {
+        return {
+            types: [NodeType.HEADING, NodeType.PARAGRAPH, MarkType.LINK, NodeType.CODE_BLOCK, NodeType.BLOCKQUOTE],
+            alignments: ['left', 'center', 'right', 'justify'],
+            defaultAlignment: 'left',
+        };
+    },
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    textAlign: {
+                        default: this.options.defaultAlignment,
+                        parseHTML: element => {
+                            return element.style.textAlign || this.options.defaultAlignment;
+                        },
+                        renderHTML: attributes => {
+                            if (attributes.textAlign === this.options.defaultAlignment) {
+                                return {};
+                            }
+                            /**
+                             * because we gave users access to style attribute
+                             * (and now editor doesn't reset it when renders HTML)
+                             * we have to sanitize style attribute by ourselves to avoid duplication of textAlign written
+                             * as independent attribute and part of style attribute string in the same time
+                             */
+                            if (/text-align/.test(attributes?.style)) {
+                                attributes.style = attributes.style.replace(/text-align:\s?\w+;?\s?/, '');
+                            }
+                            return { style: `text-align: ${attributes.textAlign}` };
+                        }
+                    }
+                }
+            },
+        ];
+    },
+    addCommands() {
+        return {
+            setTextAlign: (alignment) => ({ commands }) => {
+                if (!this.options.alignments.includes(alignment)) {
+                    return false;
+                }
+                return this.options.types
+                    .map(type => commands.updateAttributes(type, { textAlign: alignment }))
+                    .every(response => response);
+            },
+            unsetTextAlign: () => ({ commands }) => {
+                return this.options.types
+                    .map(type => commands.resetAttributes(type, 'textAlign'))
+                    .every(response => response);
+            },
+        };
+    },
+    addKeyboardShortcuts() {
+        return {
+            'Mod-Shift-l': () => this.editor.commands.setTextAlign('left'),
+            'Mod-Shift-e': () => this.editor.commands.setTextAlign('center'),
+            'Mod-Shift-r': () => this.editor.commands.setTextAlign('right'),
+            'Mod-Shift-j': () => this.editor.commands.setTextAlign('justify'),
+        };
+    }
 });

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

@@ -25,7 +25,7 @@
                 </div>
                 <div class="row row-hgap-3 mar-bot-l1">
                     <div class="col col-vmid text-truncate">
-                        <div class="form-label form-label-xsmall text-truncate">Target</div>
+                        <div class="form-label form-label-xsmall text-truncate">Тип перехода</div>
                     </div>
                     <div class="col col-vmid col-12-12">
                         <ui-select
@@ -68,8 +68,8 @@ export default {
     }),
     static: {
         TargetTypeOptions: [
-            { label: 'blank', value: TargetType.BLANK },
-            { label: 'self', value: TargetType.SELF }
+            { label: 'В новой вкладке', value: TargetType.BLANK },
+            { label: 'В текущей вкладке', value: TargetType.SELF }
         ]
     },
     methods: {