goodteditor-ui 1.0.61 → 1.0.63

package/package.json

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

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

@@ -51,9 +51,10 @@ import { Editor, EditorContent } from '@tiptap/vue-2';
 import { debounce } from '../utils/Helpers';
 import { resolveExtensions } from './extensions';
 import { buildToolGroups, bindContext } from './utils';
-import { DefaultTools, WysiwygAutofocus } from './constants';
+import { DefaultTools, WysiwygAutofocus, EMPTY_PTAG_REGEXP } from './constants';
 
 /**
+ * @typedef {import('@tiptap/core').EditorEvents} EditorEvents
  * @typedef {Omit<import('@tiptap/extension-bubble-menu').BubbleMenuOptions, 'element'>} BubbleMenuOptions
  * @typedef {import('vue').PropOptions.<Boolean|BubbleMenuOptions>} BubbleMenuOptionsProp
  * @typedef {import('./constants').ITool} ITool
@@ -131,7 +132,8 @@ export default {
          * @return {string}
          */
         content() {
-            return this.editor?.getHTML() ?? '';
+            const html = this.editor?.getHTML() ?? '';
+            return EMPTY_PTAG_REGEXP.test(html) ? '' : html;
         },
         /**
          * @return {{title: string, group: ITool[]}[]}
@@ -165,6 +167,16 @@ export default {
 
             this.editor.commands.setContent(value, false);
         },
+        editorContent() {
+            this.editor.setOptions({
+                editorProps: {
+                    attributes: {
+                        class: this.editorClass,
+                        style: this.editorContent?.style ?? ''
+                    }
+                }
+            })
+        }
     },
     created() {
         this.onSelectionUpdateDebounced = debounce(this.onSelectionUpdate, 300);
@@ -191,8 +203,18 @@ export default {
             },
             onUpdate: () => {
                 this.onInput();
+                // case when the editor lost focus bc the editor menu form element (e.g. input)
+                // intercepted it & the editor value was updated from that element later
+                if (!this.editor.isFocused) {
+                    this.onChange();
+                }
             },
             onBlur: () => {
+                const isSame = this.content === this.value;
+
+                if (isSame) {
+                    return;
+                }
                 this.onChange();
             },
             onSelectionUpdate: onSelectionUpdateDebounced
@@ -220,7 +242,8 @@ export default {
             this.$emit('change', this.content);
         },
         /**
-         * @param {Transaction} transaction
+         * @param {EditorEvents.selectionUpdate} selectionUpdateEvent
+         * @param {EditorEvents.selectionUpdate.transaction} selectionUpdateEvent.transaction
          */
         onSelectionUpdate({ transaction }) {
             this.caretPosition = transaction.curSelection.to;

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

@@ -135,6 +135,8 @@ export type WysiwygAutofocus = Readonly<{
     DISABLED: false
 }>;
 
+export const EMPTY_PTAG_REGEXP = /^<p\s*([^>]*)\s*>(\s*)<\/p\s*>$/;
+
 export type DefaultTools = Array<{
    title: string,
    group: Array<string|ITool>

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

@@ -194,6 +194,8 @@ export const WysiwygAutofocus = Object.freeze({
     DISABLED: false
 });
 
+export const EMPTY_PTAG_REGEXP = /^<p\s*([^>]*)\s*>(\s*)<\/p\s*>$/;
+
 export const DefaultTools = [
     {
         title: 'Оформление',

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

@@ -11,11 +11,20 @@ import BubbleMenuToExtend from '@tiptap/extension-bubble-menu';
  */
 export const BubbleMenu = ({
    element = null,
-   tippyOptions = { maxWidth: 'none', appendTo: () => document.body },
+   tippyOptions = {
+       maxWidth: 'none',
+       appendTo: () => document.body,
+       onClickOutside: (instance) => {
+           instance.hide();
+       },
+   },
 } = {}) => {
     const {
         maxWidth = 'none',
         appendTo = () => document.body,
+        onClickOutside = (instance) => {
+            instance.hide();
+        },
         ...restOptions
     } = tippyOptions;
     
@@ -24,6 +33,7 @@ export const BubbleMenu = ({
         tippyOptions: {
             maxWidth,
             appendTo,
+            onClickOutside,
             ...restOptions
         },
     });

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

@@ -23,6 +23,12 @@ import { useRender, RenderMixinTypes } from './mixins';
 export default {
     components: { ColorPicker, Popover },
     mixins: [useRender(), WithPopover],
+    props: {
+        appendToBody: {
+            type: Boolean,
+            default: false
+        }
+    },
     computed: {
         value() {
             return this.tool.getValue();

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

@@ -1,7 +1,13 @@
 <template>
     <div :title="title" class="autocomplete-tool">
         <input-autocomplete
-            v-bind="{ value, options: tool.options, disabled: !isEnabled, size: 'small' }"
+            v-bind="{
+                value,
+                options: tool.options,
+                disabled: !isEnabled,
+                size: 'small',
+                appendToBody: false
+            }"
             @input="onInput" />
     </div>
 </template>

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

@@ -1,7 +1,7 @@
 <template>
     <div :title="title" class="input-units-tool">
         <input-units
-            v-bind="{ value, units, size: 'small', disabled: !isEnabled }"
+            v-bind="{ value, units, size: 'small', disabled: !isEnabled, appendToBody: false }"
             @change="onChange" />
     </div>
 </template>

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

@@ -1,7 +1,14 @@
 <template>
     <div :title="title" class="select-tool">
         <ui-select
-            v-bind="{ value, options, valueObjects, disabled: !isEnabled, size: 'small' }"
+            v-bind="{
+                value,
+                options,
+                valueObjects,
+                disabled: !isEnabled,
+                size: 'small',
+                appendToBody: false
+            }"
             class="w-100"
             @change="onChange" />
     </div>

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

@@ -32,6 +32,12 @@ import { useRender, RenderMixinTypes } from './mixins';
 export default {
     components: { Popover, UiDatalist },
     mixins: [useRender(), WithPopover],
+    props: {
+        appendToBody: {
+            type: Boolean,
+            default: false
+        }
+    },
     methods: {
         ...RenderMixinTypes,
         onCommandExecuted() {