goodteditor-ui 1.0.62 → 1.0.64

package/.prettierrc

@@ -1,14 +1,17 @@
 {
-    "printWidth": 100,
+    "printWidth": 120,
     "tabWidth": 4,
     "useTabs": false,
     "semi": true,
     "singleQuote": true,
-    "trailingComma": "es5",
+    "trailingComma": "none",
     "bracketSpacing": true,
-    "jsxBracketSameLine": true,
-    "arrowParens": "avoid",
+    "bracketSameLine": true,
+    "arrowParens": "always",
     "requirePragma": false,
     "insertPragma": false,
-    "proseWrap": "preserve"
+    "proseWrap": "preserve",
+    "vueIndentScriptAndStyle": false,
+    "endOfLine": "lf",
+    "htmlWhitespaceSensitivity": "ignore"
 }

package/package.json

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

package/src/components/ui/Select.vue

@@ -5,8 +5,7 @@
         @keydown.prevent="onKeyDown"
         @click="onClick"
         tabindex="0"
-        :data-popover="popoverTargetId"
-    >
+        :data-popover="popoverTargetId">
         <div class="ui-select-label u-select-none">
             <template v-if="multiple">
                 <template v-if="optionsSelected.length">
@@ -24,9 +23,8 @@
                             option,
                             value: getOptionValue(option),
                             label: getOptionLabel(option),
-                            deselectOption,
-                        }"
-                    >
+                            deselectOption
+                        }">
                         <ui-badge
                             class="mar-none mar-right-2"
                             theme="primary"
@@ -34,8 +32,7 @@
                             :key="index"
                             removable
                             @click.native.stop
-                            @remove="deselectOption(option)"
-                        >
+                            @remove="deselectOption(option)">
                             <span>{{ getOptionLabel(option) }}</span>
                         </ui-badge>
                     </slot>
@@ -63,9 +60,9 @@
                         option: optionsSelected[0],
                         value: getOptionValue(optionsSelected[0]),
                         label: getOptionLabel(optionsSelected[0]),
+                        index: getOptionIndex(optionsSelected[0])
                     }"
-                    v-if="optionsSelected.length"
-                >
+                    v-if="optionsSelected.length">
                     {{ getOptionLabel(optionsSelected[0]) }}
                 </slot>
                 <div class="ui-select-placeholder events-none" v-else>
@@ -102,8 +99,7 @@
                 @select-option="onDatalistSelectOption"
                 v-bind="{ size, options, class: datalistCssClass }"
                 :cursorIndex.sync="dataListCursorIndex"
-                ref="datalist"
-            >
+                ref="datalist">
                 <template #header>
                     <!--
                     @slot Dropdown header slot
@@ -139,37 +135,53 @@
                             toggleOption,
                             // legacy
                             optionIndex: index,
-                            isOptionSelected: isOptionSelected(option),
-                        }"
-                    >
+                            isOptionSelected: isOptionSelected(option)
+                        }">
                         <li
                             :class="{
                                 active: isOptionSelected(option),
-                                'bg-grey-lighter': index == cursorIndex,
+                                'bg-grey-lighter': index == cursorIndex
                             }"
                             :key="index"
                             :title="getOptionLabel(option)"
-                            @click.stop="toggleOption(option)"
-                        >
+                            @click.stop="toggleOption(option)">
                             <div class="row row-collapse" v-if="multiple">
                                 <div class="col col-vmid text-truncate">
-                                    <div
-                                        class="text-truncate"
-                                        style="min-height: calc(var(--line-height) * 1em)"
-                                    >
-                                        {{ getOptionLabel(option) }}
+                                    <div class="text-truncate" style="min-height: calc(var(--line-height) * 1em)">
+                                        <slot
+                                            name="option-label"
+                                            v-bind="{
+                                                option,
+                                                value: getOptionValue(option),
+                                                label: getOptionLabel(option),
+                                                index,
+                                                isSelected: isOptionSelected(option),
+                                                cursorIndex
+                                            }">
+                                            {{ getOptionLabel(option) }}
+                                        </slot>
                                     </div>
                                 </div>
                                 <div class="col col-auto col-vmid" v-if="isOptionSelected(option)">
                                     <i class="mdi mdi-check" style="line-height: 1"></i>
                                 </div>
                             </div>
-                            <div
-                                class="text-truncate"
-                                style="min-height: calc(var(--line-height) * 1rem)"
-                                v-else
-                            >
-                                {{ getOptionLabel(option) }}
+                            <div class="text-truncate" style="min-height: calc(var(--line-height) * 1rem)" v-else>
+                                <!--
+                                @slot select option label slot
+                                -->
+                                <slot
+                                    name="option-label"
+                                    v-bind="{
+                                        option,
+                                        value: getOptionValue(option),
+                                        label: getOptionLabel(option),
+                                        index,
+                                        isSelected: isOptionSelected(option),
+                                        cursorIndex
+                                    }">
+                                    {{ getOptionLabel(option) }}
+                                </slot>
                             </div>
                         </li>
                     </slot>
@@ -188,12 +200,14 @@
 .ui-select {
     display: inline-flex;
     align-items: center;
+
     &-label {
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
         flex: 1 0 0;
     }
+
     &-placeholder {
         input {
             border: none;
@@ -217,7 +231,7 @@ export default {
     components: {
         UiBadge,
         UiDatalist,
-        UiPopover,
+        UiPopover
     },
     mixins: [FormComponent, WithPopover],
     props: {
@@ -227,7 +241,7 @@ export default {
         value: {
             default() {
                 return null;
-            },
+            }
         },
         /**
          * Options. Array of Objects (option objects)
@@ -236,21 +250,21 @@ export default {
             type: Array,
             default() {
                 return [];
-            },
+            }
         },
         /**
          * Datalist css classes (optional)
          */
         datalistCssClass: {
             type: [String, Array],
-            default: '',
+            default: ''
         },
         /**
          * Allow multiple selection
          */
         multiple: {
             type: Boolean,
-            default: false,
+            default: false
         },
         /**
          * Defines whether 'value' is the option value field or option object
@@ -258,30 +272,30 @@ export default {
          */
         valueObjects: {
             type: Boolean,
-            default: false,
+            default: false
         },
         /**
          * Defines the 'value' field of the option Object
          */
         valueField: {
             type: String,
-            default: 'value',
+            default: 'value'
         },
         /**
          * Defines the 'label' field of the option Object
          */
         labelField: {
             type: String,
-            default: 'label',
+            default: 'label'
         },
         autoWidth: {
-            default: true,
-        },
+            default: true
+        }
     },
     data() {
         return {
             optionsSelected: [],
-            dataListCursorIndex: -1,
+            dataListCursorIndex: -1
         };
     },
     computed: {
@@ -291,27 +305,27 @@ export default {
         cssClassExt() {
             let obj = { 'u-select-none': this.readonly };
             return { ...this.cssClass, ...obj };
-        },
+        }
     },
     watch: {
         value: {
             handler(model) {
                 this.importModel(model);
             },
-            immediate: true,
+            immediate: true
         },
         options() {
             this.importModel(this.value);
-        },
+        }
     },
     methods: {
         importModel(model) {
             let ci = -1;
             let tmp = [];
             model = this.multiple ? (Array.isArray(model) ? model : [model]) : [model];
-            model.forEach(modelItem => {
+            model.forEach((modelItem) => {
                 let modelItemValue = this.valueObjects ? this.getOptionValue(modelItem) : modelItem;
-                let optionIndex = this.options.findIndex(optionItem => {
+                let optionIndex = this.options.findIndex((optionItem) => {
                     let optionItemValue = this.getOptionValue(optionItem);
                     return optionItemValue === modelItemValue;
                 });
@@ -324,7 +338,7 @@ export default {
             this.optionsSelected = tmp;
         },
         exportModel() {
-            let model = this.optionsSelected.map(option =>
+            let model = this.optionsSelected.map((option) =>
                 this.valueObjects ? option : this.getOptionValue(option)
             );
             if (this.multiple) {
@@ -356,14 +370,10 @@ export default {
             return value === undefined ? option : value;
         },
         getOptionIndex(option) {
-            return this.options.findIndex(
-                o => this.getOptionValue(o) === this.getOptionValue(option)
-            );
+            return this.options.findIndex((o) => this.getOptionValue(o) === this.getOptionValue(option));
         },
         isOptionSelected(option) {
-            return !!this.optionsSelected.find(
-                o => this.getOptionValue(o) === this.getOptionValue(option)
-            );
+            return !!this.optionsSelected.find((o) => this.getOptionValue(o) === this.getOptionValue(option));
         },
         selectOption(option) {
             if (this.isOptionSelected(option)) {
@@ -383,7 +393,7 @@ export default {
                 return;
             }
             this.optionsSelected = this.optionsSelected.filter(
-                o => this.getOptionValue(o) !== this.getOptionValue(option)
+                (o) => this.getOptionValue(o) !== this.getOptionValue(option)
             );
             this.triggerModelChange();
         },
@@ -432,4 +442,4 @@ export default {
         }
     }
 };
-</script>
+</script>

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() {