@zipify/wysiwyg 3.1.2 → 4.0.0-vue3.0

package/example/example.js

@@ -1,42 +1,41 @@
-import Vue from 'vue';
+import { createApp, h } from 'vue';
 import ExampleApp from './ExampleApp';
 import { loadFonts } from './fonts';
 import { renderPresets } from './presets';
 import { tooltipManager } from './tooltip';
 
-(async () => {
-    tooltipManager.init();
-    loadFonts();
-    renderPresets();
+tooltipManager.init();
+loadFonts();
+renderPresets();
 
-    if (!sessionStorage.getItem('wswg-data')) {
-        sessionStorage.setItem('wswg-data', JSON.stringify({
-            type: 'doc',
-            content: [
-                {
-                    type: 'paragraph',
-                    content: [
-                        {
-                            type: 'text',
-                            text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate deleniti doloremque doloribus nobis praesentium repellendus soluta. Ab distinctio eos eveniet quaerat quia recusandae repellendus. Error optio perferendis qui sapiente sequi.'
-                        }
-                    ]
-                },
-                {
-                    type: 'paragraph',
-                    content: [
-                        {
-                            type: 'text',
-                            text: 'Ab et laborum molestias omnis provident soluta suscipit tenetur voluptatum! Accusamus aliquam asperiores blanditiis dolorum enim, inventore ipsa molestias, omnis optio quod rem repellendus reprehenderit saepe, suscipit tempora ullam voluptatibus?'
-                        }
-                    ]
-                }
-            ]
-        }));
-    }
+if (!sessionStorage.getItem('wswg-data')) {
+    sessionStorage.setItem('wswg-data', JSON.stringify({
+        type: 'doc',
+        content: [
+            {
+                type: 'paragraph',
+                content: [
+                    {
+                        type: 'text',
+                        text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate deleniti doloremque doloribus nobis praesentium repellendus soluta. Ab distinctio eos eveniet quaerat quia recusandae repellendus. Error optio perferendis qui sapiente sequi.'
+                    }
+                ]
+            },
+            {
+                type: 'paragraph',
+                content: [
+                    {
+                        type: 'text',
+                        text: 'Ab et laborum molestias omnis provident soluta suscipit tenetur voluptatum! Accusamus aliquam asperiores blanditiis dolorum enim, inventore ipsa molestias, omnis optio quod rem repellendus reprehenderit saepe, suscipit tempora ullam voluptatibus?'
+                    }
+                ]
+            }
+        ]
+    }));
+}
 
-    new Vue({
-        el: '[data-app]',
-        render: (h) => h(ExampleApp)
-    });
-})();
+const app = createApp({
+    render: () => h(ExampleApp)
+});
+
+app.mount('[data-app]');

package/jest.config.js

@@ -3,7 +3,7 @@ module.exports = {
     moduleFileExtensions: ['js', 'json', 'vue', 'scss'],
     transform: {
         '^.+\\.js$': 'babel-jest',
-        '^.+\\.vue$': '@vue/vue2-jest',
+        '^.+\\.vue$': '@vue/vue3-jest',
         'node_modules/@zipify/.+': 'babel-jest'
     },
     transformIgnorePatterns: ['node_modules/(?!@zipify)/'],
@@ -14,6 +14,9 @@ module.exports = {
         printBasicPrototype: true
     },
     testEnvironment: '<rootDir>/config/jest/TestEnvironment.js',
+    testEnvironmentOptions: {
+        customExportConditions: ['node', 'node-addons']
+    },
     setupFilesAfterEnv: ['<rootDir>/config/jest/setupMatchers.js'],
     setupFiles: ['<rootDir>/config/jest/setupTests.js'],
     collectCoverageFrom: ['<rootDir>/lib/**/*.{js,vue}'],

package/lib/Wysiwyg.vue

@@ -11,8 +11,8 @@
     </div>
 </template>
 
-<script>
-import { EditorContent } from '@tiptap/vue-2';
+<script setup>
+import { EditorContent } from '@tiptap/vue-3';
 import { provide, toRef, ref, computed } from 'vue';
 import { Toolbar } from './components';
 import { useToolbar, useEditor } from './composables';
@@ -20,200 +20,176 @@ import { buildExtensions } from './extensions';
 import { InjectionTokens } from './injectionTokens';
 import { ContextWindow, FavoriteColors, Storage } from './services';
 import { Devices } from './enums';
-import { outClick } from './directives';
 import { Font } from './models';
 
 const MIN_FONT_SIZE = 5;
 const MAX_FONT_SIZE = 112;
 
-export default {
-    name: 'Wysiwyg',
-
-    components: {
-        Toolbar,
-        EditorContent
-    },
-
-    directives: {
-        outClick
-    },
-
-    props: {
-        value: {
-            type: [String, Object],
-            required: true
-        },
-
-        presets: {
-            type: Array,
-            required: true
-        },
-
-        defaultPresetId: {
-            type: [Number, String],
-            required: true
-        },
-
-        linkPresetId: {
-            type: [Number, String],
-            required: true
-        },
-
-        basePresetClass: {
-            type: String,
-            required: true
-        },
-
-        makePresetVariable: {
-            type: Function,
-            required: true
-        },
-
-        fonts: {
-            type: Array,
-            required: true
-        },
-
-        active: {
-            type: Boolean,
-            required: true
-        },
-
-        device: {
-            type: String,
-            required: false,
-            default: Devices.DESKTOP
-        },
-
-        favoriteColors: {
-            type: Array,
-            required: false,
-            default: () => []
-        },
-
-        toolbarOffsets: {
-            type: Array,
-            required: false,
-            default: () => [0, 8]
-        },
-
-        toolbarPlacement: {
-            type: String,
-            required: false,
-            default: 'top-start'
-        },
-
-        baseListClass: {
-            type: String,
-            required: false,
-            default: 'zw-list--'
-        },
-
-        pageBlocks: {
-            type: Array,
-            required: true
-        },
-
-        readonly: {
-            type: Boolean,
-            required: false,
-            default: false
-        },
-
-        // Temporary until migrations static accordion to sidebar
-        popupMode: {
-            type: Boolean,
-            required: false,
-            default: false
-        },
-
-        // Requires Window type but it different in iframe and outside
-        // eslint-disable-next-line vue/require-prop-types
-        window: {
-            required: false,
-            default: () => window
-        }
-    },
-
-    emits: [
-        'input',
-        'update-favorite-colors'
-    ],
-
-    setup(props, { emit }) {
-        ContextWindow.use(props.window);
-
-        const fonts = props.fonts.map((font) => new Font(font));
-        const toolbarRef = ref(null);
-        const wysiwygRef = ref(null);
-        const wrapperRef = computed(() => wysiwygRef.value?.$el || document.body);
-        const isToolbarActiveRef = computed(() => props.active && !props.readonly);
-
-        const toolbar = useToolbar({
-            wrapperRef: wysiwygRef,
-            placementRef: toRef(props, 'toolbarPlacement'),
-            isActiveRef: isToolbarActiveRef,
-            offsets: props.toolbarOffsets
-        });
-        const updateToolbar = () => toolbar.update();
-
-        function onChange(content) {
-            emit('input', content);
-            updateToolbar();
-        }
-
-        const pageBlocks = toRef(props, 'pageBlocks');
-
-        const { editor, getContent } = useEditor({
-            content: toRef(props, 'value'),
-            onChange: (content) => onChange(content),
-            isReadonlyRef: toRef(props, 'readonly'),
-
-            extensions: buildExtensions({
-                fonts,
-                minFontSize: MIN_FONT_SIZE,
-                maxFontSize: MAX_FONT_SIZE,
-                presetsRef: toRef(props, 'presets'),
-                defaultPresetId: props.defaultPresetId,
-                linkPresetId: props.linkPresetId,
-                makePresetVariable: props.makePresetVariable,
-                basePresetClass: props.basePresetClass,
-                baseListClass: props.baseListClass,
-                deviceRef: toRef(props, 'device'),
-                pageBlocksRef: pageBlocks,
-                wrapperRef
-            })
-        });
-
-        const fontSizes = new Array(MAX_FONT_SIZE - MIN_FONT_SIZE + 1)
-            .fill(0)
-            .map((_, index) => String(index + MIN_FONT_SIZE));
-
-        const favoriteColors = new FavoriteColors({
-            listRef: toRef(props, 'favoriteColors'),
-            triggerUpdate: (colors) => emit('update-favorite-colors', colors)
-        });
-
-        const getContentCustomization = () => editor.commands.getContentCustomization();
-
-        provide(InjectionTokens.EDITOR, editor);
-        provide(InjectionTokens.FONTS, fonts);
-        provide(InjectionTokens.FONT_SIZES, fontSizes);
-        provide(InjectionTokens.LOCAL_STORAGE, new Storage(localStorage));
-        provide(InjectionTokens.FAVORITE_COLORS, favoriteColors);
-        provide(InjectionTokens.PAGE_BLOCKS, pageBlocks);
-
-        return {
-            editor,
-            toolbarRef,
-            wysiwygRef,
-            toolbar,
-            updateToolbar,
-            getContent,
-            getContentCustomization
-        };
+const props = defineProps({
+    modelValue: {
+        type: [String, Object],
+        required: true
+    },
+
+    presets: {
+        type: Array,
+        required: true
+    },
+
+    defaultPresetId: {
+        type: [Number, String],
+        required: true
+    },
+
+    linkPresetId: {
+        type: [Number, String],
+        required: true
+    },
+
+    basePresetClass: {
+        type: String,
+        required: true
+    },
+
+    makePresetVariable: {
+        type: Function,
+        required: true
+    },
+
+    fonts: {
+        type: Array,
+        required: true
+    },
+
+    active: {
+        type: Boolean,
+        required: true
+    },
+
+    device: {
+        type: String,
+        required: false,
+        default: Devices.DESKTOP
+    },
+
+    favoriteColors: {
+        type: Array,
+        required: false,
+        default: () => []
+    },
+
+    toolbarOffsets: {
+        type: Array,
+        required: false,
+        default: () => [0, 8]
+    },
+
+    toolbarPlacement: {
+        type: String,
+        required: false,
+        default: 'top-start'
+    },
+
+    baseListClass: {
+        type: String,
+        required: false,
+        default: 'zw-list--'
+    },
+
+    pageBlocks: {
+        type: Array,
+        required: true
+    },
+
+    readonly: {
+        type: Boolean,
+        required: false,
+        default: false
+    },
+
+    // Temporary until migrations static accordion to sidebar
+    popupMode: {
+        type: Boolean,
+        required: false,
+        default: false
+    },
+
+    // Requires Window type but it different in iframe and outside
+    // eslint-disable-next-line vue/require-prop-types
+    window: {
+        required: false,
+        default: () => window
     }
-};
+});
+
+const emit = defineEmits( [
+    'update:modelValue',
+    'update-favorite-colors'
+]);
+
+ContextWindow.use(props.window);
+
+const fonts = props.fonts.map((font) => new Font(font));
+const toolbarRef = ref(null);
+const wysiwygRef = ref(null);
+const wrapperRef = computed(() => wysiwygRef.value?.$el || document.body);
+const isToolbarActiveRef = computed(() => props.active && !props.readonly);
+
+const toolbar = useToolbar({
+    wrapperRef: wysiwygRef,
+    placementRef: toRef(props, 'toolbarPlacement'),
+    isActiveRef: isToolbarActiveRef,
+    offsets: props.toolbarOffsets
+});
+const updateToolbar = () => toolbar.update();
+
+function onChange(content) {
+    emit('update:modelValue', content);
+    updateToolbar();
+}
+
+const pageBlocks = toRef(props, 'pageBlocks');
+
+const { editor, getContent } = useEditor({
+    content: toRef(props, 'modelValue'),
+    onChange: (content) => onChange(content),
+    isReadonlyRef: toRef(props, 'readonly'),
+
+    extensions: buildExtensions({
+        fonts,
+        minFontSize: MIN_FONT_SIZE,
+        maxFontSize: MAX_FONT_SIZE,
+        presetsRef: toRef(props, 'presets'),
+        defaultPresetId: props.defaultPresetId,
+        linkPresetId: props.linkPresetId,
+        makePresetVariable: props.makePresetVariable,
+        basePresetClass: props.basePresetClass,
+        baseListClass: props.baseListClass,
+        deviceRef: toRef(props, 'device'),
+        pageBlocksRef: pageBlocks,
+        wrapperRef
+    })
+});
+
+const fontSizes = new Array(MAX_FONT_SIZE - MIN_FONT_SIZE + 1)
+    .fill(0)
+    .map((_, index) => String(index + MIN_FONT_SIZE));
+
+const favoriteColors = new FavoriteColors({
+    listRef: toRef(props, 'favoriteColors'),
+    triggerUpdate: (colors) => emit('update-favorite-colors', colors)
+});
+
+const getContentCustomization = () => editor.commands.getContentCustomization();
+
+provide(InjectionTokens.EDITOR, editor);
+provide(InjectionTokens.FONTS, fonts);
+provide(InjectionTokens.FONT_SIZES, fontSizes);
+provide(InjectionTokens.LOCAL_STORAGE, new Storage(localStorage));
+provide(InjectionTokens.FAVORITE_COLORS, favoriteColors);
+provide(InjectionTokens.PAGE_BLOCKS, pageBlocks);
+
+defineExpose({ getContentCustomization, getContent, updateToolbar });
 </script>
 
 <style src="./styles/main.css" />

package/lib/__tests__/utils/buildTestExtensions.js

@@ -1,4 +1,4 @@
-import { Mark } from '@tiptap/vue-2';
+import { Mark } from '@tiptap/vue-3';
 import { buildCoreExtensions } from '../../extensions/core';
 import { MarkGroups, TextSettings } from '../../enums';
 

package/lib/components/base/Button.vue

@@ -10,49 +10,43 @@
     </button>
 </template>
 
-<script>
+<script setup>
 import { computed } from 'vue';
 
-export default {
-    name: 'Button',
-
-    props: {
-        skin: {
-            type: String,
-            required: false,
-            validator: (skin) => ['toolbar', 'primary', 'secondary', 'none'].includes(skin),
-            default: 'none'
-        },
-
-        active: {
-            type: Boolean,
-            required: false,
-            default: false
-        },
-
-        disabled: {
-            type: Boolean,
-            required: false,
-            default: false
-        },
-
-        icon: {
-            type: Boolean,
-            required: false,
-            default: false
-        }
+const props = defineProps({
+    skin: {
+        type: String,
+        required: false,
+        validator: (skin) => ['toolbar', 'primary', 'secondary', 'none'].includes(skin),
+        default: 'none'
     },
 
-    setup(props) {
-        const classes = computed(() => ({
-            [`zw-button--${props.skin}`]: props.skin !== 'none',
-            'zw-button--active': props.active,
-            'zw-button--icon': props.icon
-        }));
+    active: {
+        type: Boolean,
+        required: false,
+        default: false
+    },
+
+    disabled: {
+        type: Boolean,
+        required: false,
+        default: false
+    },
 
-        return { classes };
+    icon: {
+        type: Boolean,
+        required: false,
+        default: false
     }
-};
+});
+
+defineEmits(['click']);
+
+const classes = computed(() => ({
+    [`zw-button--${props.skin}`]: props.skin !== 'none',
+    'zw-button--active': props.active,
+    'zw-button--icon': props.icon
+}));
 </script>
 
 <style scoped>

package/lib/components/base/ButtonToggle.vue

@@ -10,26 +10,20 @@
     </div>
 </template>
 
-<script>
-export default {
-    name: 'ButtonToggle',
-
-    model: {
-        event: 'change'
+<script setup>
+defineProps({
+    value: {
+        type: String,
+        required: true
     },
 
-    props: {
-        value: {
-            type: String,
-            required: true
-        },
-
-        options: {
-            type: Array,
-            required: true
-        }
+    options: {
+        type: Array,
+        required: true
     }
-};
+});
+
+defineEmits(['change']);
 </script>
 
 <style scoped>

package/lib/components/base/Checkbox.vue

@@ -6,29 +6,23 @@
     </label>
 </template>
 
-<script>
-export default {
-    name: 'Checkbox',
-
-    props: {
-        value: {
-            type: Boolean,
-            required: true
-        },
-
-        label: {
-            type: String,
-            required: false,
-            default: null
-        }
+<script setup>
+const props = defineProps({
+    value: {
+        type: Boolean,
+        required: true
     },
 
-    setup(props, { emit }) {
-        const onCheckedChanged = () => emit('input', !props.value);
-
-        return { onCheckedChanged };
+    label: {
+        type: String,
+        required: false,
+        default: null
     }
-};
+});
+
+const emit = defineEmits(['input']);
+
+const onCheckedChanged = () => emit('input', !props.value);
 </script>
 
 <style scoped>

package/lib/components/base/FieldLabel.vue

@@ -4,18 +4,14 @@
     </label>
 </template>
 
-<script>
-export default {
-    name: 'FieldLabel',
-
-    props: {
-        fieldId: {
-            type: String,
-            required: false,
-            default: null
-        }
+<script setup>
+defineProps({
+    fieldId: {
+        type: String,
+        required: false,
+        default: null
     }
-};
+});
 </script>
 
 <style scoped>