goodteditor-ui 1.0.59 → 1.0.61

package/package.json

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

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

@@ -2,7 +2,7 @@ Simple example
 ```vue
 <template>
     <div class="pad-l5">
-        <ui-wysiwyg-editor v-model="model" :autofocus="false"></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>
@@ -18,7 +18,7 @@ export default {
 </script>
 ```
 
-Advanced example. Using custom tool groups, bubble menu and 'change' event instead of 'input'
+Advanced example. Using custom tool groups, bubble menu and 'change' event instead of 'input' to update the model
 
 ```vue
 <template>
@@ -29,7 +29,8 @@ Advanced example. Using custom tool groups, bubble menu and 'change' event inste
                 tools,
                 focusVisible: false,
                 autofocus: false,
-                bubbleMenu: true
+                bubbleMenu: true,
+                editorContent: { class: ['h-100', 'pad-3', 'scroll-y'] }
             }"
             @change="onChange"></ui-wysiwyg-editor>
     </div>

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

@@ -109,7 +109,17 @@ export default {
         autofocus: {
             type: [Boolean, String, Number],
             default: WysiwygAutofocus.END
-        }
+        },
+        /**
+         * Editor content options for styling css/style
+         * { class: string[]|Record<string, boolean> style: string }
+         */
+        editorContent: {
+            type: Object,
+            default() {
+                return { class: {}, style: '' };
+            },
+        },
     },
     data: () => ({
         /** @type {Editor} */
@@ -130,9 +140,12 @@ export default {
             return buildToolGroups(this.tools);
         },
         editorClass() {
-            const classes = ['h-100', 'pad-3', 'scroll-y'];
+            const { editorContent: { class: editorClass }, focusVisible } = this;
+            const classes = Array.isArray(editorClass)
+                ? editorClass
+                : Object.entries(editorClass).filter(([, value]) => Boolean(value)).map(([key]) => key);
 
-            if (this.focusVisible === false) {
+            if (focusVisible === false) {
                 classes.push('focus-outline-none');
             }
 
@@ -157,7 +170,7 @@ export default {
         this.onSelectionUpdateDebounced = debounce(this.onSelectionUpdate, 300);
     },
     mounted() {
-        const { $refs, value, bubbleMenu, autofocus, editorClass, onSelectionUpdateDebounced } = this;
+        const { $refs, value, bubbleMenu, autofocus, editorContent, editorClass, onSelectionUpdateDebounced } = this;
 
         this.editor = new Editor({
             content: value,
@@ -172,7 +185,8 @@ export default {
             autofocus,
             editorProps: {
                 attributes: {
-                    class: editorClass
+                    class: editorClass,
+                    style: editorContent?.style ?? ''
                 }
             },
             onUpdate: () => {

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: 1010 },
-} = {}) => 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
+        },
+    });
+};