goodteditor-ui 1.0.60 → 1.0.62

package/package.json

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

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

@@ -2,7 +2,8 @@ Simple example
 ```vue
 <template>
     <div class="pad-l5">
-        <ui-wysiwyg-editor v-model="model" :autofocus="false" :editorContent="{ class: ['h-100', 'pad-3', 'scroll-y'] }"></ui-wysiwyg-editor>
+        <button class="btn" @click="toggled = !toggled">toggle</button>
+        <ui-wysiwyg-editor v-model="model" :autofocus="false" :editorContent="editorContent"></ui-wysiwyg-editor>
     </div>
 </template>
 <script>
@@ -10,10 +11,23 @@ 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

@@ -51,7 +51,7 @@ 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 {Omit<import('@tiptap/extension-bubble-menu').BubbleMenuOptions, 'element'>} BubbleMenuOptions
@@ -131,7 +131,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 +166,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);

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,8 +11,20 @@ import BubbleMenuToExtend from '@tiptap/extension-bubble-menu';
  */
 export const BubbleMenu = ({
    element = null,
-   tippyOptions = { maxWidth: 'none', zIndex: 1100 },
-} = {}) => BubbleMenuToExtend.configure({
-    element,
-    tippyOptions,
-});
+   tippyOptions = { maxWidth: 'none', appendTo: () => document.body },
+} = {}) => {
+    const {
+        maxWidth = 'none',
+        appendTo = () => document.body,
+        ...restOptions
+    } = tippyOptions;
+    
+    return BubbleMenuToExtend.configure({
+        element,
+        tippyOptions: {
+            maxWidth,
+            appendTo,
+            ...restOptions
+        },
+    });
+};