@zipify/wysiwyg 1.0.0-dev.9 → 1.0.0-dev.92

package/lib/composables/useToolbar.js

@@ -1,33 +1,40 @@
 import { createPopper } from '@popperjs/core';
-import { onUnmounted, onMounted, watch } from '@vue/composition-api';
-import { useElementRef } from '../components/base/composables';
+import { useElementRef } from '../components/base';
 
-export function useToolbar({ wrapperRef, popperRef, offsets, isActiveRef }) {
-    let toolbar;
+export function useToolbar({ wrapperRef, offsets, isActiveRef, placementRef }) {
+    const wrapperEl = useElementRef(wrapperRef);
+    let popper;
 
-    onMounted(() => {
-        const wrapperEl = useElementRef(wrapperRef).value;
-        const toolbarEl = useElementRef(popperRef).value;
-
-        toolbar = createPopper(wrapperEl, toolbarEl, {
-            placement: 'top-start',
+    function mount(element) {
+        popper = createPopper(wrapperEl.value, element, {
+            placement: placementRef.value,
+            strategy: 'fixed',
             modifiers: [
                 {
                     name: 'offset',
+                    options: { offset: offsets }
+                },
+                {
+                    name: 'preventOverflow',
                     options: {
-                        offset: offsets
+                        altAxis: true,
+                        padding: 2
                     }
+                },
+                {
+                    name: 'flip',
+                    enabled: false
                 }
             ]
         });
-    });
-    const update = () => toolbar.update();
-
-    watch(isActiveRef, () => {
-        if (isActiveRef.value) update();
-    });
+    }
 
-    onUnmounted(() => toolbar.destroy());
+    const update = () => popper?.update();
 
-    return { toolbar, update };
+    return {
+        update,
+        mount,
+        isActiveRef,
+        offsets
+    };
 }

package/lib/directives/__tests__/outClick.test.js

@@ -10,6 +10,7 @@ describe('out click', () => {
         await waitAsyncOperation();
 
         document.dispatchEvent(new Event('click'));
+        await waitAsyncOperation();
 
         expect(onOutClick).toHaveBeenCalled();
     });
@@ -22,6 +23,7 @@ describe('out click', () => {
         await waitAsyncOperation();
 
         el.dispatchEvent(new Event('click'));
+        await waitAsyncOperation();
 
         expect(onOutClick).not.toHaveBeenCalled();
     });
@@ -36,6 +38,7 @@ describe('out click', () => {
         await waitAsyncOperation();
 
         child.dispatchEvent(new Event('click'));
+        await waitAsyncOperation();
 
         expect(onOutClick).not.toHaveBeenCalled();
     });
@@ -50,6 +53,7 @@ describe('out click', () => {
         outClick.unbind(el);
 
         document.dispatchEvent(new Event('click'));
+        await waitAsyncOperation();
 
         expect(onOutClick).not.toHaveBeenCalled();
     });
@@ -65,6 +69,7 @@ describe('out click', () => {
         await waitAsyncOperation();
 
         document.dispatchEvent(new Event('click'));
+        await waitAsyncOperation();
 
         expect(onOutClick).toHaveBeenCalled();
     });
@@ -80,6 +85,7 @@ describe('out click', () => {
         await waitAsyncOperation();
 
         document.dispatchEvent(new Event('click'));
+        await waitAsyncOperation();
 
         expect(onOutClick).not.toHaveBeenCalled();
     });

package/lib/directives/outClick.js

@@ -1,5 +1,18 @@
+import { ContextWindow } from '../services';
+
 const dataStorage = new WeakMap();
 
+function toggleListener(toEnable, onClick) {
+    const args = ['click', onClick, { capture: true }];
+    const action = toEnable ? 'addEventListener' : 'removeEventListener';
+
+    if (ContextWindow.window !== window) {
+        window.document[action](...args);
+    }
+
+    ContextWindow.document[action](...args);
+}
+
 export const outClick = {
     bind(el, { value }) {
         const onOutClick = value.onOutClick || value;
@@ -8,13 +21,15 @@ export const outClick = {
         function onClick(event) {
             const isInside = event.target === el || el.contains(event.target);
 
-            if (event.target.isConnected && !isInside) onOutClick(event);
+            if (event.target.isConnected && !isInside) {
+                setTimeout(() => onOutClick(event));
+            }
         }
 
         dataStorage.set(el, { callback: onClick, isEnabled });
 
         if (isEnabled) {
-            setTimeout(() => document.addEventListener('click', onClick));
+            setTimeout(() => toggleListener(true, onClick));
         }
     },
 
@@ -24,14 +39,12 @@ export const outClick = {
 
         if (isEnabled === data.isEnabled) return;
 
-        isEnabled
-            ? document.addEventListener('click', data.callback)
-            : document.removeEventListener('click', data.callback);
+        toggleListener(isEnabled, data.callback);
 
         dataStorage.set(el, { callback: data.callback, isEnabled });
     },
 
     unbind(el) {
-        document.removeEventListener('click', dataStorage.get(el).callback);
+        toggleListener(false, dataStorage.get(el).callback);
     }
 };

package/lib/enums/Alignments.js

@@ -2,5 +2,14 @@ export const Alignments = Object.freeze({
     LEFT: 'left',
     CENTER: 'center',
     RIGHT: 'right',
-    JUSTIFY: 'justify'
+    JUSTIFY: 'justify',
+
+    get values() {
+        return [
+            this.LEFT,
+            this.CENTER,
+            this.RIGHT,
+            this.JUSTIFY
+        ];
+    }
 });

package/lib/enums/LinkDestinations.js

@@ -0,0 +1,4 @@
+export const LinkDestinations = Object.freeze({
+    URL: 'url',
+    BLOCK: 'block'
+});

package/lib/enums/LinkTargets.js

@@ -0,0 +1,4 @@
+export const LinkTargets = Object.freeze({
+    BLANK: '_blank',
+    SELF: '_self'
+});

package/lib/enums/TextSettings.js

@@ -8,6 +8,7 @@ export const TextSettings = Object.freeze({
     FONT_WEIGHT: 'font_weight',
     LINE_HEIGHT: 'line_height',
     TEXT_DECORATION: 'text_decoration',
+    SUPERSCRIPT: 'superscript',
 
     get attributes() {
         return [
@@ -24,7 +25,8 @@ export const TextSettings = Object.freeze({
             this.FONT_SIZE,
             this.FONT_STYLE,
             this.FONT_WEIGHT,
-            this.TEXT_DECORATION
+            this.TEXT_DECORATION,
+            this.SUPERSCRIPT
         ];
     }
 });

package/lib/enums/index.js

@@ -4,3 +4,5 @@ export { Alignments } from './Alignments';
 export { NodeTypes } from './NodeTypes';
 export { ListTypes } from './ListTypes';
 export { TextSettings } from './TextSettings';
+export { LinkTargets } from './LinkTargets';
+export { LinkDestinations } from './LinkDestinations';

package/lib/extensions/Alignment.js

@@ -1,6 +1,6 @@
 import { Extension } from '@tiptap/vue-2';
-import { computed } from '@vue/composition-api';
-import { createCommand, createKeyboardShortcut, renderInlineSetting } from '../utils';
+import { computed, unref } from 'vue';
+import { convertAlignment, createCommand, createKeyboardShortcut, renderInlineSetting } from '../utils';
 import { Alignments, NodeTypes, TextSettings } from '../enums';
 
 const DEFAULTS = {
@@ -19,19 +19,33 @@ export const Alignment = Extension.create({
                 [TextSettings.ALIGNMENT]: {
                     isRequired: false,
 
-                    parseHTML(el) {
-                        const value = el.style.textAlign;
+                    parseHTML({ style }) {
+                        const textAlign = convertAlignment(style.textAlign);
 
-                        return value ? { desktop: value, tablet: value, mobile: value } : null;
+                        if (textAlign) {
+                            return {
+                                desktop: textAlign,
+                                tablet: textAlign,
+                                mobile: textAlign
+                            };
+                        }
+
+                        const mobile = style.getPropertyValue('--zw-text-align-mobile') || null;
+                        const tablet = style.getPropertyValue('--zw-text-align-tablet') || null;
+                        const desktop = style.getPropertyValue('--zw-text-align-desktop') || null;
+
+                        if (!mobile && !tablet && !desktop) return null;
+
+                        return { desktop, tablet, mobile };
                     },
 
                     renderHTML(attrs) {
                         if (!attrs.alignment) return null;
 
                         return renderInlineSetting({
-                            mobile_text_align: attrs.alignment.mobile,
-                            tablet_text_align: attrs.alignment.tablet,
-                            desktop_text_align: attrs.alignment.desktop
+                            text_align_mobile: attrs.alignment.mobile,
+                            text_align_tablet: attrs.alignment.tablet,
+                            text_align_desktop: attrs.alignment.desktop
                         });
                     }
                 }
@@ -42,7 +56,7 @@ export const Alignment = Extension.create({
     addCommands() {
         return {
             applyAlignment: createCommand(({ commands }, value) => {
-                const device = commands.getDevice().value;
+                const device = unref(commands.getDevice());
 
                 commands.setBlockAttributes(this.name, { [device]: value }, DEFAULTS);
             }),
@@ -52,14 +66,14 @@ export const Alignment = Extension.create({
                 const device = commands.getDevice();
                 const defaultValue = commands.getDefaultAlignment();
 
-                return computed(() => attribute.value?.[device.value] ?? defaultValue.value);
+                return computed(() => unref(attribute)?.[unref(device)] ?? unref(defaultValue));
             }),
 
             getDefaultAlignment: createCommand(({ commands }) => {
                 const device = commands.getDevice();
                 const preset = commands.getPreset();
 
-                return computed(() => preset.value[device.value].alignment);
+                return computed(() => unref(preset)[unref(device)].alignment);
             })
         };
     },

package/lib/extensions/BackgroundColor.js

@@ -1,5 +1,5 @@
 import { Mark } from '@tiptap/vue-2';
-import { computed } from '@vue/composition-api';
+import { computed } from 'vue';
 import { convertColor, createCommand, renderMark } from '../utils';
 import { TextSettings } from '../enums';
 
@@ -22,12 +22,20 @@ export const BackgroundColor = Mark.create({
         };
     },
 
-    parseHTML: () => [
-        {
-            style: 'background-color',
-            getAttrs: (value) => ({ value: convertColor(value) })
-        }
-    ],
+    parseHTML() {
+        const getAttrs = (value) => ({ value: convertColor(value) });
+
+        return [
+            {
+                style: '--zw-background-color',
+                getAttrs
+            },
+            {
+                style: 'background-color',
+                getAttrs
+            }
+        ];
+    },
 
     renderHTML({ HTMLAttributes: attrs }) {
         return renderMark({ background_color: attrs.value });

package/lib/extensions/DeviceManager.js

@@ -1,16 +1,13 @@
+import { toRef } from 'vue';
 import { Extension } from '@tiptap/vue-2';
 import { createCommand } from '../utils';
 
 export const DeviceManager = Extension.create({
     name: 'device_manager',
 
-    addOptions: () => ({
-        deviceRef: null
-    }),
-
     addCommands() {
         return {
-            getDevice: createCommand(() => this.options.deviceRef)
+            getDevice: createCommand(() => toRef(this.options, 'device'))
         };
     }
 });

package/lib/extensions/FontColor.js

@@ -1,5 +1,5 @@
 import { Mark } from '@tiptap/vue-2';
-import { computed } from '@vue/composition-api';
+import { computed, unref } from 'vue';
 import { convertColor, createCommand, renderMark } from '../utils';
 import { TextSettings } from '../enums';
 
@@ -15,13 +15,13 @@ export const FontColor = Mark.create({
             getFontColor: createCommand(({ commands, editor }) => {
                 const defaultValue = commands.getDefaultFontColor();
 
-                return computed(() => editor.getAttributes(this.name)?.value ?? defaultValue.value);
+                return computed(() => editor.getAttributes(this.name)?.value ?? unref(defaultValue));
             }),
 
             getDefaultFontColor: createCommand(({ commands }) => {
                 const preset = commands.getPreset();
 
-                return computed(() => preset.value.common.color);
+                return computed(() => unref(preset).common.color);
             }),
 
             applyFontColor: createCommand(({ commands }, value) => {
@@ -30,12 +30,20 @@ export const FontColor = Mark.create({
         };
     },
 
-    parseHTML: () => [
-        {
-            style: 'color',
-            getAttrs: (value) => ({ value: convertColor(value) })
-        }
-    ],
+    parseHTML() {
+        const getAttrs = (value) => ({ value: convertColor(value) });
+
+        return [
+            {
+                style: '--zw-font-color',
+                getAttrs
+            },
+            {
+                style: 'color',
+                getAttrs
+            }
+        ];
+    },
 
     renderHTML({ HTMLAttributes: attrs }) {
         return renderMark({ font_color: attrs.value });

package/lib/extensions/FontFamily.js

@@ -1,5 +1,5 @@
 import { Mark } from '@tiptap/vue-2';
-import { computed } from '@vue/composition-api';
+import { computed, unref } from 'vue';
 import { createCommand, renderMark } from '../utils';
 import { TextSettings } from '../enums';
 
@@ -7,7 +7,8 @@ export const FontFamily = Mark.create({
     name: TextSettings.FONT_FAMILY,
 
     addOptions: () => ({
-        fonts: []
+        fonts: [],
+        defaultFont: ''
     }),
 
     addAttributes: () => ({
@@ -20,7 +21,7 @@ export const FontFamily = Mark.create({
                 commands.setMark(this.name, { value });
 
                 const font = commands.findFontByName(value);
-                let fontWeight = commands.getFontWeight().value;
+                let fontWeight = unref(commands.getFontWeight());
 
                 if (!font.isWeightSupported(fontWeight)) {
                     fontWeight = font.findClosestWeight(fontWeight);
@@ -35,7 +36,7 @@ export const FontFamily = Mark.create({
             getFont: createCommand(({ commands }) => {
                 const fontFamily = commands.getFontFamily();
 
-                return computed(() => commands.findFontByName(fontFamily.value));
+                return computed(() => commands.findFontByName(unref(fontFamily)));
             }),
 
             findFontByName: createCommand((_, name) => {
@@ -45,25 +46,41 @@ export const FontFamily = Mark.create({
             getFontFamily: createCommand(({ editor, commands }) => {
                 const defaultValue = commands.getDefaultFontFamily();
 
-                return computed(() => editor.getAttributes(this.name)?.value ?? defaultValue.value);
+                return computed(() => editor.getAttributes(this.name)?.value ?? unref(defaultValue));
             }),
 
             getDefaultFontFamily: createCommand(({ commands }) => {
                 const preset = commands.getPreset();
 
-                return computed(() => preset.value.common.font_family);
+                return computed(() => unref(preset).common.font_family);
             })
         };
     },
 
-    parseHTML: () => [
-        {
-            style: 'font-family',
-            getAttrs: (value) => ({ value })
-        }
-    ],
+    parseHTML() {
+        const getAttrs = (input) => {
+            const parsed = input.replace(/"/g, '');
+            const isExists = this.options.fonts.some((font) => font.name === parsed);
+            const value = isExists ? parsed : this.options.defaultFont;
+
+            return { value };
+        };
+
+        return [
+            {
+                style: '--zw-font-family',
+                getAttrs
+            },
+            {
+                style: 'font-family',
+                getAttrs
+            }
+        ];
+    },
 
     renderHTML({ HTMLAttributes: attrs }) {
-        return renderMark({ font_family: attrs.value });
+        const font_family = attrs.value ? `"${attrs.value}"` : null;
+
+        return renderMark({ font_family });
     }
 });

package/lib/extensions/FontSize.js

@@ -1,6 +1,6 @@
 import { Mark } from '@tiptap/vue-2';
-import { computed } from '@vue/composition-api';
-import { createCommand, createKeyboardShortcut, renderMark } from '../utils';
+import { computed, unref } from 'vue';
+import { convertFontSize, createCommand, createKeyboardShortcut, renderMark } from '../utils';
 import { TextSettings } from '../enums';
 
 export const FontSize = Mark.create({
@@ -25,31 +25,31 @@ export const FontSize = Mark.create({
                 const device = commands.getDevice();
                 const defaultValue = commands.getDefaultFontSize();
 
-                return computed(() => editor.getAttributes(this.name)?.[device.value] ?? defaultValue.value);
+                return computed(() => editor.getAttributes(this.name)?.[unref(device)] ?? unref(defaultValue));
             }),
 
             getDefaultFontSize: createCommand(({ commands }) => {
                 const device = commands.getDevice();
                 const preset = commands.getPreset();
 
-                return computed(() => preset.value[device.value].font_size.replace('px', ''));
+                return computed(() => unref(preset)[unref(device)].font_size.replace('px', ''));
             }),
 
             applyFontSize: createCommand(({ commands }, value) => {
-                const device = commands.getDevice().value;
+                const device = unref(commands.getDevice());
 
                 commands.setMark(this.name, { [device]: value });
             }),
 
             increaseFontSize: createCommand(({ commands }) => {
-                const size = Number(commands.getFontSize().value);
+                const size = Number(unref(commands.getFontSize()));
                 const nextSize = Math.min(size + 1, this.options.maxSize);
 
                 commands.applyFontSize(String(nextSize));
             }),
 
             decreaseFontSize: createCommand(({ commands }) => {
-                const size = Number(commands.getFontSize().value);
+                const size = Number(unref(commands.getFontSize()));
                 const nextSize = Math.max(size - 1, this.options.minSize);
 
                 commands.applyFontSize(String(nextSize));
@@ -62,25 +62,45 @@ export const FontSize = Mark.create({
         'Mod-Shift--': createKeyboardShortcut('decreaseFontSize')
     }),
 
-    parseHTML: () => [
-        {
-            style: 'font-size',
+    parseHTML() {
+        const parseSize = (value) => {
+            if (!value) return null;
 
-            getAttrs: (input) => {
-                const value = String(parseInt(input));
+            const wrapperEl = unref(this.options.wrapperRef);
+            const converted = convertFontSize(value, wrapperEl);
 
-                return { desktop: value, tablet: value, mobile: value };
+            return String(converted);
+        };
+
+        return [
+            {
+                tag: '[style*="--zw-font-size"]',
+
+                getAttrs: ({ style }) => ({
+                    mobile: parseSize(style.getPropertyValue('--zw-font-size-mobile')),
+                    tablet: parseSize(style.getPropertyValue('--zw-font-size-tablet')),
+                    desktop: parseSize(style.getPropertyValue('--zw-font-size-desktop'))
+                })
+            },
+            {
+                style: 'font-size',
+
+                getAttrs: (input) => {
+                    const value = parseSize(input);
+
+                    return { desktop: value, tablet: value, mobile: value };
+                }
             }
-        }
-    ],
+        ];
+    },
 
     renderHTML({ HTMLAttributes: attrs }) {
         const addUnits = (value) => value ? `${value}px` : null;
 
         return renderMark({
-            mobile_font_size: addUnits(attrs.mobile),
-            tablet_font_size: addUnits(attrs.tablet),
-            desktop_font_size: addUnits(attrs.desktop)
+            font_size_mobile: addUnits(attrs.mobile),
+            font_size_tablet: addUnits(attrs.tablet),
+            font_size_desktop: addUnits(attrs.desktop)
         });
     }
 });

package/lib/extensions/FontStyle.js

@@ -1,5 +1,5 @@
 import { Mark } from '@tiptap/vue-2';
-import { computed } from '@vue/composition-api';
+import { computed, unref } from 'vue';
 import { createCommand, createKeyboardShortcut, renderMark } from '../utils';
 import { TextSettings } from '../enums';
 
@@ -15,30 +15,30 @@ export const FontStyle = Mark.create({
             isItalic: createCommand(({ editor, commands }) => {
                 const defaultValue = commands.getDefaultFontStyle();
 
-                return computed(() => editor.getAttributes(this.name)?.italic ?? defaultValue.value.italic);
+                return computed(() => editor.getAttributes(this.name)?.italic ?? unref(defaultValue).italic);
             }),
 
             isItalicAvailable: createCommand(({ commands }) => {
                 const font = commands.getFont();
                 const fontWeight = commands.getFontWeight();
 
-                return computed(() => font.value.isItalicSupported(fontWeight.value));
+                return computed(() => unref(font).isItalicSupported(unref(fontWeight)));
             }),
 
             getDefaultFontStyle: createCommand(({ commands }) => {
                 const preset = commands.getPreset();
 
                 return computed(() => ({
-                    italic: preset.value.common.font_style === 'italic'
+                    italic: unref(preset).common.font_style === 'italic'
                 }));
             }),
 
             toggleItalic: createCommand(({ commands }) => {
-                const isItalicAvailable = this.editor.commands.isItalicAvailable();
+                const isItalicAvailable = unref(this.editor.commands.isItalicAvailable());
 
-                if (!isItalicAvailable.value) return;
+                if (!isItalicAvailable) return;
 
-                commands.isItalic().value ? commands.removeItalic() : commands.applyItalic();
+                unref(commands.isItalic()) ? commands.removeItalic() : commands.applyItalic();
             }),
 
             applyItalic: createCommand(({ commands }) => {
@@ -56,18 +56,28 @@ export const FontStyle = Mark.create({
         'Mod-I': createKeyboardShortcut('toggleItalic')
     }),
 
-    parseHTML: () => [
-        {
-            tag: 'i',
-            attrs: { italic: true }
-        },
-        {
-            style: 'font-style',
-            getAttrs: (value) => ({ italic: value.includes('italic') })
-        }
-    ],
-
-    renderHTML() {
-        return renderMark({ font_style: 'italic' });
+    parseHTML() {
+        const getAttrs = (value) => value.includes('italic') && { italic: true };
+
+        return [
+            {
+                style: '--zw-font-style',
+                getAttrs
+            },
+            {
+                style: 'font-style',
+                getAttrs
+            },
+            {
+                tag: 'i',
+                attrs: { italic: true }
+            }
+        ];
+    },
+
+    renderHTML({ HTMLAttributes: attrs }) {
+        const font_style = attrs.italic ? 'italic' : null;
+
+        return renderMark({ font_style });
     }
 });