@zipify/wysiwyg 3.1.0-0 → 3.1.0

package/example/ExampleApp.vue

@@ -50,7 +50,7 @@
 
 <script>
 import { computed, onMounted, ref, unref } from 'vue';
-import { Wysiwyg } from '../lib/entry-lib';
+import { Wysiwyg } from '../lib/entryLib';
 import { FONTS } from './fonts';
 import { PRESETS, renderPresetVariable } from './presets';
 import { PAGE_BLOCKS } from './pageBlocks';

package/example/presets.js

@@ -1,7 +1,7 @@
 export const PRESETS = [
     {
         'id': 'h1',
-        'name': 'H1',
+        'name': 'Heading 1',
         'node': {
             'type': 'heading',
             'level': 1
@@ -31,7 +31,7 @@ export const PRESETS = [
     },
     {
         'id': 'h2',
-        'name': 'H2',
+        'name': 'Heading 2',
         'node': {
             'type': 'heading',
             'level': 2
@@ -61,7 +61,7 @@ export const PRESETS = [
     },
     {
         'id': 'h3',
-        'name': 'H3',
+        'name': 'Sub-heading 1',
         'node': {
             'type': 'heading',
             'level': 3
@@ -91,7 +91,7 @@ export const PRESETS = [
     },
     {
         'id': 'h4',
-        'name': 'H4',
+        'name': 'Sub-heading 2',
         'node': {
             'type': 'heading',
             'level': 4
@@ -148,7 +148,7 @@ export const PRESETS = [
     },
     {
         'id': 'regular-1',
-        'name': 'Regular',
+        'name': 'Body Copy 1',
         'desktop': {
             'alignment': null,
             'line_height': '1.43',
@@ -174,7 +174,7 @@ export const PRESETS = [
     },
     {
         'id': 'regular-2',
-        'name': 'Regular 2',
+        'name': 'Body Copy 2',
         'fallbackClass': 'zpa-regular2',
         'desktop': {
             'alignment': null,
@@ -201,7 +201,7 @@ export const PRESETS = [
     },
     {
         'id': 'regular-3',
-        'name': 'Regular 3',
+        'name': 'Body Copy 3',
         'fallbackClass': 'zpa-regular3',
         'desktop': {
             'alignment': null,

package/example/tooltip/Tooltip.js

@@ -1,6 +1,11 @@
 import './tooltip.css';
 
-import { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
+import { popperGenerator, defaultModifiers } from '@popperjs/core/lib/popper-lite';
+import arrow from '@popperjs/core/lib/modifiers/arrow';
+import flip from '@popperjs/core/lib/modifiers/flip';
+import offset from '@popperjs/core/lib/modifiers/offset';
+import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow';
+import { TooltipCloseOnScrollModifier } from './modifiers';
 
 export class Tooltip {
     static get defaultOptions() {
@@ -13,11 +18,11 @@ export class Tooltip {
     static get animationOptions() {
         return {
             enterDuration: 150,
-            leaveDuration: 100
+            leaveDuration: 200
         };
     }
 
-    static get tooltipStyles() {
+    static get popperStyles() {
         return {
             willChange: 'transform',
             zIndex: 999999
@@ -30,17 +35,17 @@ export class Tooltip {
     /** @type {string} tooltip's content */
     message = '';
 
-    /** @type {object} options for FloatingUI instance */
-    tooltipOptions = {};
+    /** @type {object} options for Popper.js instance */
+    popperOptions = {};
 
     /** @type {object} styles for tooltip's wrapper element */
-    tooltipStyles = {};
+    popperStyles = {};
 
     /** @type {{ enterDuration: number, leaveDuration: number }} tooltip's fade in / fade out durations */
     animationOptions = {};
 
-    /** @type {function | null} created FloatingUI instance */
-    floatingInstance = null;
+    /** @type {object | null} created Popper.js instance */
+    popperInstance = null;
 
     /** @type {{ tooltip: HTMLElement, container: HTMLElement, contentEl: HTMLElement, arrow: HTMLElement }} elements of tooltip */
     elements = {};
@@ -50,25 +55,25 @@ export class Tooltip {
      * @param params {object}
      * @param params.triggerEl {HTMLElement}
      * @param params.message {string}
-     * @param [params.tooltipOptions] {{ placement: string, size: string }}
-     * @param [params.tooltipStyles] {object}
+     * @param [params.popperOptions] {{ placement: string, size: string }}
+     * @param [params.popperStyles] {object}
      * @param [params.animationOptions] {{ enterDuration: number, leaveDuration: number }}
      */
-    constructor({ triggerEl, message, tooltipOptions, tooltipStyles, animationOptions }) {
+    constructor({ triggerEl, message, popperOptions, popperStyles, animationOptions }) {
         this.triggerEl = triggerEl;
         this.message = message;
 
-        this.tooltipOptions = Object.assign({}, Tooltip.defaultOptions, tooltipOptions);
-        this.tooltipStyles = Object.assign({}, Tooltip.tooltipStyles, tooltipStyles);
+        this.popperOptions = Object.assign({}, Tooltip.defaultOptions, popperOptions);
+        this.popperStyles = Object.assign({}, Tooltip.popperStyles, popperStyles);
         this.animationOptions = Object.assign({}, Tooltip.animationOptions, animationOptions);
 
         this._isMacOS = window.navigator.userAgent.toLowerCase().includes('mac os');
 
-        this.#initialize();
+        this._initialize();
     }
 
-    #initialize() {
-        let tooltip = this.#createTooltip();
+    _initialize() {
+        let tooltip = this._createTooltip();
 
         this.elements = {
             tooltip,
@@ -78,15 +83,13 @@ export class Tooltip {
         };
     }
 
-    #createTooltip() {
+    _createTooltip() {
         let element = document.createElement('div');
 
-        Object.keys(this.tooltipStyles).forEach((style) => (element.style[style] = this.tooltipStyles[style]));
-
-        element.classList.add('zpa-tooltip__wrapper');
+        Object.keys(this.popperStyles).forEach((style) => (element.style[style] = this.popperStyles[style]));
 
         element.innerHTML = `
-            <div class="zpa-tooltip zpa-tooltip--${this.tooltipOptions.size}" data-container>
+            <div class="zpa-tooltip zpa-tooltip--${this.popperOptions.size}" data-container>
                 <div class="zpa-tooltip__content" data-content></div>
                 <div class="zpa-tooltip__arrow" data-arrow></div>
             </div>`;
@@ -94,20 +97,20 @@ export class Tooltip {
         return element;
     }
 
-    #renderContent(message) {
+    _renderContent(message) {
         // Do not use .innerHTML, it will break tooltips in Scripts section!
         this.elements.contentEl.textContent = message;
 
         this.elements.hotkey?.remove();
-        this.#renderHotkeyTip();
+        this._renderHotkeyTip();
     }
 
-    #renderHotkeyTip() {
+    _renderHotkeyTip() {
         const raw = this.triggerEl.dataset.tooltipHotkey;
 
         if (!raw) return;
 
-        const parts = raw.split(' ').map(this.#formatHotkeyPart.bind(this));
+        const parts = raw.split(' ').map(this._formatHotkeyPart.bind(this));
         const tipEl = document.createElement('span');
 
         tipEl.classList.add('zpa-tooltip__hotkey');
@@ -116,7 +119,7 @@ export class Tooltip {
         this.elements.contentEl.append(tipEl);
     }
 
-    #formatHotkeyPart(part) {
+    _formatHotkeyPart(part) {
         switch (part.toLowerCase()) {
             case 'mod':
                 return this._isMacOS ? '⌘' : 'Ctrl';
@@ -128,89 +131,111 @@ export class Tooltip {
         }
     }
 
-    #getModifiers() {
+    _getModifiers() {
         return [
-            flip(),
-            offset({ mainAxis: 8 }),
-            shift({ padding: 4 }),
-            arrow({ element: this.elements.arrow })
+            {
+                name: 'arrow',
+                options: {
+                    element: '[data-arrow]'
+                }
+            },
+            {
+                name: 'offset',
+                options: {
+                    offset: [0, 8]
+                }
+            },
+            {
+                name: 'preventOverflow',
+                options: {
+                    padding: {
+                        top: 4,
+                        bottom: 4,
+                        left: 8,
+                        right: 8
+                    }
+                }
+            },
+            {
+                name: 'customAttributes',
+                enabled: true,
+                phase: 'beforeWrite',
+                requires: ['computeStyles'],
+                fn: ({ state }) => {
+                    this.elements.arrow.classList.add(`zpa-tooltip__arrow--${state.placement}`);
+                    state.attributes.popper = {};
+                }
+            },
+            TooltipCloseOnScrollModifier.init({ tooltip: this })
         ];
     }
 
-    #setTooltipDuration(duration = 0) {
+    _setTooltipDuration(duration = 0) {
         this.elements.container.style.transitionDuration = `${duration}ms`;
     }
 
-    #renderPopper() {
-        const modifiers = this.#getModifiers();
-
-        this.floatingInstance = autoUpdate(this.triggerEl, this.elements.tooltip, async () => {
-            const positioning = await computePosition(this.triggerEl, this.elements.tooltip, {
-                placement: this.tooltipOptions.placement,
-                middleware: [...modifiers]
-            });
-
-            const { x, y, middlewareData, placement } = positioning;
-
-            if (middlewareData.arrow) this.#renderArrow(placement, middlewareData.arrow);
+    _renderPopper() {
+        const modifiers = this._getModifiers();
 
-            Object.assign(this.elements.tooltip.style, {
-                left: `${x}px`,
-                top: `${y}px`
-            });
+        const createPopper = popperGenerator({
+            defaultModifiers: [...defaultModifiers, arrow, flip, offset, preventOverflow]
         });
 
-        return this.floatingInstance;
-    }
-
-    #renderArrow(placement, { x, y }) {
-        this.elements.tooltip.classList.add(`zpa-tooltip--${placement}`);
-
-        Object.assign(this.elements.arrow.style, {
-            left: x != null ? `${x}px` : '',
-            top: y != null ? `${y}px` : ''
+        this.popperInstance = createPopper(this.triggerEl, this.elements.tooltip, {
+            placement: this.popperOptions.placement,
+            modifiers
         });
+
+        return this.popperInstance;
     }
 
-    #toggle(makeVisible) {
+    _toggle(makeVisible) {
         const { enterDuration, leaveDuration } = this.animationOptions;
 
-        this.#setTooltipDuration(makeVisible ? enterDuration : leaveDuration);
+        this._setTooltipDuration(makeVisible ? enterDuration : leaveDuration);
         this.elements.container.classList.toggle('zpa-tooltip--open', makeVisible);
     }
 
     open() {
-        if (this.floatingInstance) return;
+        if (this.popperInstance) {
+            return;
+        }
 
         document.body.appendChild(this.elements.tooltip);
-        this.popperInstance = this.#renderPopper();
+        this.popperInstance = this._renderPopper();
 
-        this.#renderContent(this.message);
-        this.#toggle(true);
+        this._renderContent(this.message);
+        this._toggle(true);
     }
 
     close() {
-        if (!this.floatingInstance) return;
+        if (!this.popperInstance) {
+            return;
+        }
 
-        this.#toggle(false);
+        this._toggle(false);
 
         return setTimeout(() => {
             this.destroy();
         }, this.animationOptions.leaveDuration);
     }
 
+    update() {
+        this.popperInstance?.update();
+    }
+
     updateContent(content) {
         this.message = content;
-        this.#renderContent(this.message);
+        this._renderContent(this.message);
+        this.update();
     }
 
     destroy() {
         this.elements.tooltip.remove();
 
         if (this.popperInstance) {
-            // destroy instance
-            this.floatingInstance();
-            this.floatingInstance = null;
+            this.popperInstance.destroy();
+            this.popperInstance = null;
         }
     }
 }

package/example/tooltip/tooltip.css

@@ -1,9 +1,3 @@
-.zpa-tooltip__wrapper {
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
 .zpa-tooltip {
     position: relative;
     background-color: #36404C;
@@ -37,7 +31,6 @@
 }
 
 .zpa-tooltip__arrow {
-    position: absolute;
     width: 16px;
     height: 16px;
     color: #36404C;
@@ -50,15 +43,11 @@
     border-style: solid;
 }
 
-.zpa-tooltip--top {
-    transform-origin: center bottom;
-}
-
-.zpa-tooltip--top .zpa-tooltip__arrow {
+.zpa-tooltip__arrow--top {
     bottom: 0;
 }
 
-.zpa-tooltip--top .zpa-tooltip__arrow::before {
+.zpa-tooltip__arrow--top::before {
     bottom: -7px;
     left: 0;
     border-width: 8px 8px 0;
@@ -66,15 +55,11 @@
     transform-origin: center top;
 }
 
-.zpa-tooltip--bottom {
-    transform-origin: center top;
-}
-
-.zpa-tooltip--bottom .zpa-tooltip__arrow {
+.zpa-tooltip__arrow--bottom {
     top: 0;
 }
 
-.zpa-tooltip--bottom .zpa-tooltip__arrow::before {
+.zpa-tooltip__arrow--bottom::before {
     top: -7px;
     left: 0;
     border-width: 0 8px 8px;
@@ -82,30 +67,22 @@
     transform-origin: center bottom;
 }
 
-.zpa-tooltip--left {
-    transform-origin: center right;
-}
-
-.zpa-tooltip--left .zpa-tooltip__arrow {
+.zpa-tooltip__arrow--left {
     right: 0;
 }
 
-.zpa-tooltip--left .zpa-tooltip__arrow::before {
+.zpa-tooltip__arrow--left::before {
     border-width: 8px 0 8px 8px;
     border-left-color: initial;
     right: -7px;
     transform-origin: center left;
 }
 
-.zpa-tooltip--right {
-    transform-origin: center left;
-}
-
-.zpa-tooltip--right .zpa-tooltip__arrow {
+.zpa-tooltip__arrow--right {
     left: 0;
 }
 
-.zpa-tooltip--right .zpa-tooltip__arrow::before {
+.zpa-tooltip__arrow--right::before {
     left: -7px;
     border-width: 8px 8px 8px 0;
     border-right-color: initial;

package/lib/Wysiwyg.vue

@@ -155,9 +155,11 @@ export default {
             isActiveRef: isToolbarActiveRef,
             offsets: props.toolbarOffsets
         });
+        const updateToolbar = () => toolbar.update();
 
         function onChange(content) {
             emit('input', content);
+            updateToolbar();
         }
 
         const pageBlocks = toRef(props, 'pageBlocks');
@@ -206,6 +208,7 @@ export default {
             toolbarRef,
             wysiwygRef,
             toolbar,
+            updateToolbar,
             getContent,
             getContentCustomization
         };

package/lib/__tests__/utils/buildTestExtensions.js

@@ -1,6 +1,6 @@
 import { Mark } from '@tiptap/vue-2';
 import { buildCoreExtensions } from '../../extensions/core';
-import { MarkGroups } from '../../enums';
+import { MarkGroups, TextSettings } from '../../enums';
 
 // each node allows using 'settings' group of marks,
 // and it fails when there are no nodes with this group
@@ -10,6 +10,28 @@ const SettingMark = Mark.create({
     renderHTML: () => []
 });
 
+// NodeProcessor requires link mark
+const LinkMark = Mark.create({
+    name: TextSettings.LINK,
+    renderHTML: () => []
+});
+
+const isMark = (extension) => extension && extension.type === 'mark';
+
 export function buildTestExtensions({ include } = {}) {
-    return buildCoreExtensions().concat(SettingMark, include || []);
+    const extensions = buildCoreExtensions().concat(include || []);
+
+    const isSettingPreset = extensions.some((extension) => {
+        return isMark(extension) && extension.config.group === MarkGroups.SETTINGS;
+    });
+
+    if (!isSettingPreset) extensions.push(SettingMark);
+
+    const isLinkPreset = extensions.some((extension) => {
+        return isMark(extension) && extension.name === TextSettings.LINK;
+    });
+
+    if (!isLinkPreset) extensions.push(LinkMark);
+
+    return extensions;
 }

package/lib/cli/commands/ToJsonCommand.js

@@ -32,14 +32,14 @@ export class ToJsonCommand extends Command {
             nodeDomParser: new NodeDomParser()
         });
 
-        const jsonList = htmlList.map((html) => serializer.toJSON(this.#formatInputHtml(html)));
+        const jsonList = htmlList.map((html) => serializer.toJSON(this._formatInputHtml(html)));
         const content = jsonList.length === 1 ? jsonList[0] : jsonList;
-        const json = this.#stringifyContent(content);
+        const json = this._stringifyContent(content);
 
-        this.output(format === 'rb' ? this.#formatOutputRb(json) : json);
+        this.output(format === 'rb' ? this._formatOutputRb(json) : json);
     }
 
-    #formatInputHtml(html) {
+    _formatInputHtml(html) {
         return html
             .replace(/\\(["'])/g, '$1')
             .replace(/rgba\(\d{1,3}, ?\d{1,3}, ?\d{1,3}, (\d{1,2}%)\)/g, (substring, alpha) => {
@@ -47,13 +47,13 @@ export class ToJsonCommand extends Command {
             });
     }
 
-    #stringifyContent(content) {
+    _stringifyContent(content) {
         const skipNullValue = (_, value) => value === null ? undefined : value;
 
         return JSON.stringify(content, skipNullValue, 2);
     }
 
-    #formatOutputRb(json) {
+    _formatOutputRb(json) {
         return json
             .replace(/\\"/g, '"')
             .replace(/font-family: ?'(.+)'/g, 'font-family: "$1"')

package/lib/components/base/__tests__/Button.test.js

@@ -42,7 +42,7 @@ describe('rendering', () => {
         expect(wrapper.classes('zw-button--icon')).toBeTruthy();
     });
 
-    test('should render icon style', () => {
+    test('should render iconless style', () => {
         const wrapper = createComponent({ icon: false });
 
         expect(wrapper.classes('zw-button--icon')).toBeFalsy();

package/lib/components/base/composables/__tests__/useDeselectionLock.test.js

@@ -33,8 +33,8 @@ describe('prevent deselection', () => {
     function click(el, { target } = {}) {
         const event = new MouseEvent('mousedown');
 
-        event.preventDefault = jest.fn();
-        event.stopPropagation = jest.fn();
+        jest.spyOn(event, 'preventDefault').mockImplementation();
+        jest.spyOn(event, 'stopPropagation').mockImplementation();
         setReadonlyProperty(event, 'target', target || { tagName: 'DIV' });
 
         el.dispatchEvent(event);

package/lib/components/base/composables/__tests__/useElementRef.test.js

@@ -10,7 +10,7 @@ describe('resolve element from ref', () => {
     test('should return null if no element', () => {
         const elementRef = useElementRef(ref(null));
 
-        expect(elementRef.value).toBe(null);
+        expect(elementRef.value).toBeNull();
     });
 
     test('should return element if dom ref', () => {

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

@@ -4,8 +4,6 @@ import { InjectionTokens } from '../../../../injectionTokens';
 import { useModalToggler } from '../useModalToggler';
 import { useElementRef } from '../useElementRef';
 
-jest.mock('@floating-ui/dom');
-
 const createEditor = () => ({
     commands: {
         storeSelection: jest.fn(),

package/lib/components/base/composables/__tests__/useValidator.test.js

@@ -24,7 +24,7 @@ describe('validation', () => {
 
         validator.validate();
 
-        expect(validator.error.value).toBe(null);
+        expect(validator.error.value).toBeNull();
     });
 
     test('should reset error', () => {
@@ -39,6 +39,6 @@ describe('validation', () => {
         expect(validator.error.value).toBe('Can\'t be empty');
 
         validator.reset();
-        expect(validator.error.value).toBe(null);
+        expect(validator.error.value).toBeNull();
     });
 });