goodteditor-ui 1.0.62 → 1.0.63

package/package.json

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

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

@@ -2,8 +2,7 @@ Simple example
 ```vue
 <template>
     <div class="pad-l5">
-        <button class="btn" @click="toggled = !toggled">toggle</button>
-        <ui-wysiwyg-editor v-model="model" :autofocus="false" :editorContent="editorContent"></ui-wysiwyg-editor>
+        <ui-wysiwyg-editor v-model="model" :autofocus="false" :editorContent="{ class: ['h-100', 'pad-3', 'scroll-y'] }"></ui-wysiwyg-editor>
     </div>
 </template>
 <script>
@@ -11,23 +10,10 @@ import UiWysiwygEditor from './WysiwygEditor.vue';
 export default {
     components: { UiWysiwygEditor },
     data: () => ({
-        toggled: false,
         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>`
-    }),
-    computed: {
-        editorContent() {
-            if (!this.toggled) {
-                return {
-                    class: ['h-100', 'pad-3', 'scroll-y']
-                }
-            }
-            return {
-                class: ['h-100', 'pad-3', 'scroll-y', 'color-red']
-            } 
-        }
-    },
+    })
 };
 </script>
 ```

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

@@ -54,6 +54,7 @@ import { buildToolGroups, bindContext } from './utils';
 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
@@ -202,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
@@ -231,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/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() {