@zipify/wysiwyg 3.1.0-0 → 3.1.0

package/lib/components/base/composables/useModalToggler.js

@@ -1,32 +1,38 @@
-import { inject, nextTick, ref } from 'vue';
-import { autoUpdate, computePosition, limitShift, offset, shift } from '@floating-ui/dom';
+import { createPopper } from '@popperjs/core';
+import { inject, nextTick, ref, onUnmounted } from 'vue';
 import { InjectionTokens } from '../../../injectionTokens';
 import { useElementRef } from './useElementRef';
 
 export function useModalToggler({ onBeforeOpened, onClosed, wrapperRef, modalRef } = {}) {
     const editor = inject(InjectionTokens.EDITOR);
     const isOpened = ref(false);
-    let floatingInstance;
+    let popper;
 
-    function initModal() {
+    function initPopper() {
         const wrapperEl = useElementRef(wrapperRef);
         const modalEl = useElementRef(modalRef);
 
-        floatingInstance = autoUpdate(wrapperEl.value, modalEl.value, async () => {
-            const positioning = await computePosition(wrapperEl.value, modalEl.value, {
-                placement: 'bottom',
-                strategy: 'fixed',
-                middleware: [
-                    shift({ padding: 16, crossAxis: true, limiter: limitShift() }),
-                    offset({ mainAxis: 4 })]
-            });
-
-            const { x, y } = positioning;
-
-            Object.assign(modalEl.value, {
-                left: `${x}px`,
-                top: `${y}px`
-            });
+        popper = createPopper(wrapperEl.value, modalEl.value, {
+            placement: 'bottom',
+            strategy: 'fixed',
+            modifiers: [
+                {
+                    name: 'offset',
+                    options: {
+                        offset: [0, 4]
+                    }
+                },
+                {
+                    name: 'preventOverflow',
+                    options: {
+                        padding: 16
+                    }
+                },
+                {
+                    name: 'flip',
+                    enabled: false
+                }
+            ]
         });
     }
 
@@ -37,16 +43,19 @@ export function useModalToggler({ onBeforeOpened, onClosed, wrapperRef, modalRef
 
         await nextTick();
 
-        initModal();
+        initPopper();
     }
 
     function close() {
         isOpened.value = false;
-        floatingInstance?.();
         editor.commands.restoreSelection();
         onClosed?.();
     }
 
+    onUnmounted(() => {
+        popper?.destroy();
+    });
+
     const toggle = (toOpen) => toOpen ? open() : close();
 
     return { isOpened, open, close, toggle };

package/lib/components/base/dropdown/DropdownActivator.vue

@@ -82,6 +82,10 @@ export default {
     width: 100%;
 }
 
+.zw-dropdown__activator-title {
+    margin-right: var(--zw-offset-xxs);
+}
+
 .zw-dropdown__activator-arrow {
     margin-left: auto;
 }

package/lib/components/toolbar/Toolbar.vue

@@ -68,7 +68,7 @@ export default {
     color: rgb(var(--zw-color-n70));
     z-index: 999999;
     text-align: left;
-    position: fixed;
+    position: absolute;
 }
 
 .zw-toolbar::before,

package/lib/components/toolbar/base/__tests__/ToolbarDivider.test.js

@@ -18,7 +18,7 @@ describe('rendering', () => {
     });
 
 
-    test('should render vertical divider', () => {
+    test('should render horizontal divider', () => {
         const wrapper = createComponent({ isHorizontal: true });
 
         expect(wrapper.classes('zw-toolbar__divider--horizontal')).toBeTruthy();

package/lib/components/toolbar/controls/StylePresetControl.vue

@@ -73,7 +73,7 @@ export default {
                 .run();
         };
 
-        const tooltip = computed(() => isCustomized.value ? 'Reset Styles to the Page Styles' : '');
+        const tooltip = computed(() => isCustomized.value ? 'Reset Styles to Page Styles' : '');
 
         const removeCustomization = () => editor.chain().focus().removePresetCustomization().run();
 
@@ -96,7 +96,7 @@ export default {
 }
 
 .zw-style-preset-control__dropdown {
-    width: 96px;
+    width: 120px;
 }
 
 .zw-style-preset-control__reset {

package/lib/components/toolbar/controls/__tests__/LineHeightControl.test.js

@@ -4,8 +4,6 @@ import { InjectionTokens } from '../../../../injectionTokens';
 import { Button, Modal, NumberField, Range } from '../../../base';
 import LineHeightControl from '../LineHeightControl';
 
-jest.mock('@floating-ui/dom');
-
 const createEditor = ({ height } = {}) => {
     const heightRef = ref(height ?? '1.2');
 

package/lib/components/toolbar/controls/composables/__tests__/useRecentFonts.test.js

@@ -57,7 +57,7 @@ describe('list of fonts', () => {
         expect(recentFonts.fonts.value).toEqual(['Lato', 'Roboto', 'Source Sans']);
     });
 
-    test('should move up font in list', () => {
+    test('should move up font in list new font', () => {
         const recentFonts = createWrapper({
             initial: ['Roboto', 'Source Sans', 'Times New Roman']
         });

package/lib/components/toolbar/controls/link/composables/__tests__/useLink.test.js

@@ -97,7 +97,7 @@ describe('actions with link', () => {
         });
     });
 
-    test('should apply link target', () => {
+    test('should apply link target to new window', () => {
         const link = useComposable();
 
         link.updateTarget(false);
@@ -105,7 +105,7 @@ describe('actions with link', () => {
         expect(link.linkData.value.target).toBe(LinkTargets.SELF);
     });
 
-    test('should apply link target', () => {
+    test('should apply link target to current window', () => {
         const link = useComposable();
 
         link.updateTarget(true);

package/lib/composables/useToolbar.js

@@ -1,33 +1,38 @@
-import { onUnmounted } from 'vue';
-import { autoUpdate, computePosition, limitShift, offset, shift } from '@floating-ui/dom';
+import { createPopper } from '@popperjs/core';
 import { useElementRef } from '../components/base';
 
 export function useToolbar({ wrapperRef, offsets, isActiveRef, placementRef }) {
     const wrapperEl = useElementRef(wrapperRef);
-    let floatingInstance;
+    let popper;
 
     function mount(element) {
-        floatingInstance = autoUpdate(wrapperEl.value, element, async () => {
-            const positioning = await computePosition(wrapperEl.value, element, {
-                placement: placementRef.value,
-                strategy: 'fixed',
-                middleware: [
-                    shift({ padding: 16, crossAxis: true, limiter: limitShift() }),
-                    offset({ crossAxis: offsets[0], mainAxis: offsets[1] })]
-            });
-
-            const { x, y } = positioning;
-
-            Object.assign(element.style, {
-                left: `${x}px`,
-                top: `${y}px`
-            });
+        popper = createPopper(wrapperEl.value, element, {
+            placement: placementRef.value,
+            strategy: 'fixed',
+            modifiers: [
+                {
+                    name: 'offset',
+                    options: { offset: offsets }
+                },
+                {
+                    name: 'preventOverflow',
+                    options: {
+                        altAxis: true,
+                        padding: 2
+                    }
+                },
+                {
+                    name: 'flip',
+                    enabled: false
+                }
+            ]
         });
     }
 
-    onUnmounted(() => floatingInstance?.());
+    const update = () => popper?.update();
 
     return {
+        update,
         mount,
         isActiveRef,
         offsets

package/lib/extensions/Alignment.js

@@ -26,9 +26,9 @@ export const Alignment = Extension.create({
                             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;
+                        const mobile = style.getPropertyValue('--zw-alignment-mobile') || null;
+                        const tablet = style.getPropertyValue('--zw-alignment-tablet') || null;
+                        const desktop = style.getPropertyValue('--zw-alignment-desktop') || null;
 
                         if (!mobile && !tablet && !desktop) return null;
 
@@ -39,9 +39,9 @@ export const Alignment = Extension.create({
                         if (!attrs.alignment) return null;
 
                         return renderInlineSetting({
-                            text_align_mobile: attrs.alignment.mobile,
-                            text_align_tablet: attrs.alignment.tablet,
-                            text_align_desktop: attrs.alignment.desktop
+                            alignment_mobile: attrs.alignment.mobile,
+                            alignment_tablet: attrs.alignment.tablet,
+                            alignment_desktop: attrs.alignment.desktop
                         });
                     }
                 }

package/lib/extensions/FontSize.js

@@ -2,7 +2,6 @@ import { Mark } from '@tiptap/vue-2';
 import { computed, unref } from 'vue';
 import { convertFontSize, createCommand, createKeyboardShortcut, renderMark } from '../utils';
 import { MarkGroups, TextSettings } from '../enums';
-import { AddNodeMarkStep } from './core';
 
 export const FontSize = Mark.create({
     name: TextSettings.FONT_SIZE,
@@ -57,7 +56,7 @@ export const FontSize = Mark.create({
                             return;
                         }
 
-                        tr.step(new AddNodeMarkStep(position, updated));
+                        tr.addNodeMark(position, updated);
                     }
                 });
             }),

package/lib/extensions/Link.js

@@ -55,6 +55,8 @@ export const Link = Base.extend({
             ...this.parent?.(),
 
             applyLink: createCommand(({ commands, chain }, attributes) => {
+                commands.setMeta('preventAutolink', true);
+
                 if (!commands.getSelectedText()) {
                     return commands.insertContent(NodeFactory.text(attributes.text, [
                         NodeFactory.mark(TextSettings.LINK, attributes)

package/lib/extensions/StylePreset.js

@@ -1,22 +1,12 @@
 import { Extension } from '@tiptap/vue-2';
 import { computed, toRef, unref } from 'vue';
 import { createCommand } from '../utils';
-import { Devices, NodeTypes, TextSettings } from '../enums';
+import { NodeTypes, TextSettings } from '../enums';
 import { ContextWindow } from '../services';
 
-function makePresetClass(base, preset) {
-    const baseClass = base.split(' ').map((part) => `.${part}`).join('');
-
-    return baseClass + preset.id;
-}
-
 export const StylePreset = Extension.create({
     name: TextSettings.STYLE_PRESET,
 
-    addStorage: () => ({
-        presetStyleEl: null
-    }),
-
     addGlobalAttributes() {
         return [
             {
@@ -32,13 +22,13 @@ export const StylePreset = Extension.create({
                             if (element.parentElement.tagName === 'LI') return null;
 
                             for (const { id, node, fallbackClass } of presets) {
-                                const isFallback = fallbackClass && element.classList.contains(fallbackClass);
-
-                                if (isFallback) return { id };
+                                if (fallbackClass && element.classList.contains(fallbackClass)) {
+                                    return { id };
+                                }
 
-                                const className = makePresetClass(this.options.baseClass, { id });
+                                const presetSelector = this.options.styleRenderer.makePresetCssClass({ id });
 
-                                if (element.matches(className)) return { id };
+                                if (element.matches(presetSelector)) return { id };
                                 if (element.tagName === `H${node?.level}`) return { id };
                             }
 
@@ -49,7 +39,7 @@ export const StylePreset = Extension.create({
                         renderHTML: (attrs) => {
                             if (!attrs.preset) return null;
 
-                            return { class: this.options.baseClass + attrs.preset.id };
+                            return { class: this.options.styleRenderer.makePresetHtmlClass(attrs.preset) };
                         }
                     }
                 }
@@ -208,34 +198,6 @@ export const StylePreset = Extension.create({
     },
 
     onCreate() {
-        const existingStyleEl = ContextWindow.document.querySelector('[data-zw-styles]');
-
-        if (existingStyleEl) {
-            this.storage.presetStyleEl = existingStyleEl;
-            return;
-        }
-
-        this.storage.presetStyleEl = ContextWindow.document.createElement('style');
-        this.storage.presetStyleEl.dataset.zwStyles = '';
-
-        for (const preset of this.options.presets) {
-            const className = makePresetClass(this.options.baseClass, preset);
-            const css = [` ${className} {`];
-
-            for (const device of Devices.values) {
-                for (const setting of Object.keys(preset[device])) {
-                    const variable = this.options.makeVariable({ device, preset, property: setting });
-                    const property = setting.replace(/_/i, '-');
-                    const prefix = device === Devices.COMMON ? 'preset' : `preset-${device}`;
-
-                    css.push(`--zw-${prefix}-${property}: var(${variable}, inherit);`);
-                }
-            }
-
-            css.push('}');
-            this.storage.presetStyleEl.innerHTML += css.join(' ');
-        }
-
-        ContextWindow.head.append(this.storage.presetStyleEl);
+        this.options.styleRenderer.inject(ContextWindow.head, this.options.presets);
     }
 });

package/lib/extensions/__tests__/Alignment.test.js

@@ -144,7 +144,7 @@ describe('parsing html', () => {
 
     test('should get alignment from rendered view', () => {
         const editor = createEditor({
-            content: '<p style="--zw-text-align-mobile:center;--zw-text-align-desktop:right">test</p>'
+            content: '<p style="--zw-alignment-mobile:center;--zw-alignment-desktop:right">test</p>'
         });
 
         expect(editor.getJSON()).toMatchSnapshot();

package/lib/extensions/__tests__/BackgroundColor.test.js

@@ -41,7 +41,7 @@ describe('get background color', () => {
 
         editor.commands.selectAll();
 
-        expect(editor.commands.getBackgroundColor().value).toEqual('green');
+        expect(editor.commands.getBackgroundColor().value).toBe('green');
     });
 
     test('should get default background color', () => {
@@ -49,7 +49,7 @@ describe('get background color', () => {
             content: createContent(NodeFactory.text('hello world'))
         });
 
-        expect(editor.commands.getBackgroundColor().value).toEqual('rgba(255, 255, 255, 0%)');
+        expect(editor.commands.getBackgroundColor().value).toBe('rgba(255, 255, 255, 0%)');
     });
 });
 

package/lib/extensions/__tests__/FontColor.test.js

@@ -41,7 +41,7 @@ describe('get font color', () => {
 
         editor.commands.selectAll();
 
-        expect(editor.commands.getFontColor().value).toEqual('green');
+        expect(editor.commands.getFontColor().value).toBe('green');
     });
 
     test('should get default font color', () => {
@@ -49,7 +49,7 @@ describe('get font color', () => {
             content: createContent(NodeFactory.text('hello world'))
         });
 
-        expect(editor.commands.getDefaultFontColor().value).toEqual('red');
+        expect(editor.commands.getDefaultFontColor().value).toBe('red');
     });
 
     test('should get from preset', () => {
@@ -59,7 +59,7 @@ describe('get font color', () => {
 
         editor.commands.selectAll();
 
-        expect(editor.commands.getFontColor().value).toEqual('red');
+        expect(editor.commands.getFontColor().value).toBe('red');
     });
 });
 

package/lib/extensions/__tests__/FontFamily.test.js

@@ -62,7 +62,7 @@ describe('get font family', () => {
 
         editor.commands.selectAll();
 
-        expect(editor.commands.getFontFamily().value).toEqual('Bungee');
+        expect(editor.commands.getFontFamily().value).toBe('Bungee');
     });
 
     test('should get default font family', () => {
@@ -70,7 +70,7 @@ describe('get font family', () => {
             content: createContent(NodeFactory.text('hello world'))
         });
 
-        expect(editor.commands.getDefaultFontFamily().value).toEqual('Lato');
+        expect(editor.commands.getDefaultFontFamily().value).toBe('Lato');
     });
 
     test('should get from preset', () => {
@@ -80,7 +80,7 @@ describe('get font family', () => {
 
         editor.commands.selectAll();
 
-        expect(editor.commands.getFontFamily().value).toEqual('Lato');
+        expect(editor.commands.getFontFamily().value).toBe('Lato');
     });
 
     test('should find font model by name', () => {

package/lib/extensions/__tests__/FontSize.test.js

@@ -58,7 +58,7 @@ describe('get font size', () => {
 
         editor.commands.selectAll();
 
-        expect(editor.commands.getFontSize().value).toEqual('14');
+        expect(editor.commands.getFontSize().value).toBe('14');
     });
 
     test('should default value', () => {
@@ -66,7 +66,7 @@ describe('get font size', () => {
             content: createContent(NodeFactory.text('hello world'))
         });
 
-        expect(editor.commands.getDefaultFontSize().value).toEqual('14');
+        expect(editor.commands.getDefaultFontSize().value).toBe('14');
     });
 
     test('should get from preset', () => {
@@ -76,7 +76,7 @@ describe('get font size', () => {
 
         editor.commands.selectAll();
 
-        expect(editor.commands.getFontSize().value).toEqual('14');
+        expect(editor.commands.getFontSize().value).toBe('14');
     });
 });
 

package/lib/extensions/__tests__/FontWeight.test.js

@@ -60,7 +60,7 @@ describe('get font weight', () => {
 
         editor.commands.selectAll();
 
-        expect(editor.commands.getFontWeight().value).toEqual('700');
+        expect(editor.commands.getFontWeight().value).toBe('700');
     });
 
     test('should default value', () => {
@@ -68,7 +68,7 @@ describe('get font weight', () => {
             content: createContent(NodeFactory.text('hello world'))
         });
 
-        expect(editor.commands.getDefaultFontWeight().value).toEqual('400');
+        expect(editor.commands.getDefaultFontWeight().value).toBe('400');
     });
 
     test('should get from preset', () => {
@@ -78,7 +78,7 @@ describe('get font weight', () => {
 
         editor.commands.selectAll();
 
-        expect(editor.commands.getFontWeight().value).toEqual('400');
+        expect(editor.commands.getFontWeight().value).toBe('400');
     });
 
     test('should get closest available font weight', () => {
@@ -90,7 +90,7 @@ describe('get font weight', () => {
 
         editor.commands.selectAll();
 
-        expect(editor.commands.getFontWeight().value).toEqual('700');
+        expect(editor.commands.getFontWeight().value).toBe('700');
     });
 });
 

package/lib/extensions/__tests__/LineHeight.test.js

@@ -62,7 +62,7 @@ describe('get value', () => {
             content: createContent({ line_height: null })
         });
 
-        expect(editor.commands.getDefaultLineHeight().value).toEqual('1.2');
+        expect(editor.commands.getDefaultLineHeight().value).toBe('1.2');
     });
 
     test('should get from preset', () => {
@@ -70,7 +70,7 @@ describe('get value', () => {
             content: createContent({ line_height: null })
         });
 
-        expect(editor.commands.getLineHeight().value).toEqual('1.2');
+        expect(editor.commands.getLineHeight().value).toBe('1.2');
     });
 });
 

package/lib/extensions/__tests__/Link.test.js

@@ -3,7 +3,7 @@ import { Editor, Mark } from '@tiptap/vue-2';
 import { buildTestExtensions } from '../../__tests__/utils';
 import { ContentNormalizer, NodeFactory } from '../../services';
 import { Link } from '../Link';
-import { TextSettings } from '../../enums';
+import { LinkDestinations, LinkTargets, TextSettings } from '../../enums';
 
 const MockFontWeight = Mark.create({
     name: TextSettings.FONT_WEIGHT,
@@ -27,11 +27,12 @@ function createEditor({ content }) {
     });
 }
 
-const createLink = (href) => ({
-    href: href ?? '/test',
+const createLink = (attrs = {}) => ({
+    href: '/test',
     text: 'Hello world link',
-    target: '_self',
-    destination: 'url'
+    target: LinkTargets.SELF,
+    destination: LinkDestinations.URL,
+    ...attrs
 });
 
 describe('get link', () => {
@@ -108,6 +109,33 @@ describe('apply link', () => {
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
+
+    test('should apply link to text with link', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph([
+                    NodeFactory.text('https://google.com', [
+                        NodeFactory.mark(TextSettings.LINK, {
+                            href: 'https://google.com',
+                            destination: LinkDestinations.URL,
+                            target: LinkTargets.SELF
+                        })
+                    ])
+                ])
+            ])
+        });
+
+        editor.commands.selectAll();
+
+        editor.commands.applyLink({
+            text: 'https://google.com',
+            href: 'https://google.com',
+            destination: LinkDestinations.URL,
+            target: LinkTargets.BLANK
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
 });
 
 describe('parse html', () => {