@zipify/wysiwyg 3.1.0-0 → 3.1.0-2

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,7 @@
 import './tooltip.css';
 
 import { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
+import { TooltipCloseOnScrollModifier } from './modifiers';
 
 export class Tooltip {
     static get defaultOptions() {
@@ -133,7 +134,8 @@ export class Tooltip {
             flip(),
             offset({ mainAxis: 8 }),
             shift({ padding: 4 }),
-            arrow({ element: this.elements.arrow })
+            arrow({ element: this.elements.arrow }),
+            TooltipCloseOnScrollModifier.init({ tooltip: this })
         ];
     }
 

package/example/tooltip/modifiers/TooltipCloseOnScrollModifier.js

@@ -21,7 +21,7 @@ export class TooltipCloseOnScrollModifier {
     /**
      * @param {Tooltip} tooltip - tooltip element
      *
-     * @return {Partial<Modifier<any, any>>} - Popper modifier
+     * @return {Partial<Modifier<any, any>>} - Floating modifier
      * */
     static init({ tooltip }) {
         const modifier = new TooltipCloseOnScrollModifier(tooltip);
@@ -30,7 +30,10 @@ export class TooltipCloseOnScrollModifier {
             name: 'closeOnScroll',
             enabled: true,
             phase: 'main',
-            fn: () => modifier.closeOnScroll()
+            fn: ({ x, y }) => {
+                modifier.closeOnScroll();
+                return { x, y };
+            }
         };
     }
 

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/components/base/composables/useModalToggler.js

@@ -18,7 +18,8 @@ export function useModalToggler({ onBeforeOpened, onClosed, wrapperRef, modalRef
                 strategy: 'fixed',
                 middleware: [
                     shift({ padding: 16, crossAxis: true, limiter: limitShift() }),
-                    offset({ mainAxis: 4 })]
+                    offset({ mainAxis: 4 })
+                ]
             });
 
             const { x, y } = positioning;
@@ -31,6 +32,8 @@ export function useModalToggler({ onBeforeOpened, onClosed, wrapperRef, modalRef
     }
 
     async function open() {
+        if (isOpened.value) return;
+
         onBeforeOpened?.();
         editor.commands.storeSelection();
         isOpened.value = true;

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/controls/StylePresetControl.vue

@@ -96,7 +96,7 @@ export default {
 }
 
 .zw-style-preset-control__dropdown {
-    width: 96px;
+    width: 120px;
 }
 
 .zw-style-preset-control__reset {

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/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();