@zipify/wysiwyg 3.0.0 → 3.0.2-0

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

@@ -119,40 +119,36 @@ const MockLink = Extension.create({
 });
 
 function createEditor({ content, presets, defaultId, link }) {
-    return new Promise((resolve) => {
-        const editor = new Editor({
-            content: ContentNormalizer.normalize(content),
-            onCreate: () => resolve(editor),
-
-            extensions: buildTestExtensions({
-                include: [
-                    StylePreset.configure({
-                        presets: presets,
-                        baseClass: 'zw ts-',
-                        defaultId,
-
-                        makeVariable({ device, preset, property }) {
-                            const formattedProperty = property.replace(/_/i, '-');
-
-                            return `--${device}-${preset.id}-${formattedProperty}`;
-                        }
-                    }),
-                    List.configure({
-                        baseClass: 'zw-list--'
-                    }),
-                    MockFontSize,
-                    MockFontWeight,
-                    MockAlignment,
-                    MockBackgroundColor,
-                    MockFontColor,
-                    MockFontFamily,
-                    MockFontStyle,
-                    MockTextDecoration,
-                    MockSuperscript,
-                    MockLink.configure(link)
-                ]
-            })
-        });
+    return new Editor({
+        content: ContentNormalizer.normalize(content),
+
+        extensions: buildTestExtensions({
+            include: [
+                StylePreset.configure({
+                    presets,
+                    defaultId,
+
+                    styleRenderer: {
+                        makePresetHtmlClass: (preset) =>  `zw ts-${preset.id}`,
+                        makePresetCssClass: (preset) => `.zw.ts-${preset.id}`,
+                        inject: jest.fn()
+                    }
+                }),
+                List.configure({
+                    baseClass: 'zw-list--'
+                }),
+                MockFontSize,
+                MockFontWeight,
+                MockAlignment,
+                MockBackgroundColor,
+                MockFontColor,
+                MockFontFamily,
+                MockFontStyle,
+                MockTextDecoration,
+                MockSuperscript,
+                MockLink.configure(link)
+            ]
+        })
     });
 }
 
@@ -166,33 +162,8 @@ const createPreset = (attrs = {}) => ({
 });
 
 describe('render preset styles', () => {
-    const getStyleEl = (editor) => editor.storage.style_preset.presetStyleEl;
-
-    test('should render styles', async () => {
-        const editor = await createEditor({
-            content: NodeFactory.doc([]),
-            presets: [createPreset()]
-        });
-
-        expect(getStyleEl(editor).innerHTML).toMatchSnapshot();
-    });
-
-    test('should not create multiple style elements', async () => {
-        const editor1 = await createEditor({
-            content: NodeFactory.doc([]),
-            presets: [createPreset()]
-        });
-
-        const editor2 = await createEditor({
-            content: NodeFactory.doc([]),
-            presets: [createPreset()]
-        });
-
-        expect(getStyleEl(editor1)).toBe(getStyleEl(editor2));
-    });
-
-    test('should render preset class', async () => {
-        const editor = await createEditor({
+    test('should render preset class', () => {
+        const editor = createEditor({
             content: NodeFactory.doc([
                 NodeFactory.paragraph({ preset: { id: 'regular-1' } }, 'test')
             ]),
@@ -202,8 +173,8 @@ describe('render preset styles', () => {
         expect(editor.getHTML()).toMatchSnapshot();
     });
 
-    test('should render node without preset', async () => {
-        const editor = await createEditor({
+    test('should render node without preset', () => {
+        const editor = createEditor({
             content: NodeFactory.doc([
                 NodeFactory.paragraph({ preset: null }, 'test')
             ]),
@@ -215,8 +186,8 @@ describe('render preset styles', () => {
 });
 
 describe('get preset', () => {
-    test('should get preset from selection', async () => {
-        const editor = await createEditor({
+    test('should get preset from selection', () => {
+        const editor = createEditor({
             content: NodeFactory.doc([
                 NodeFactory.paragraph({ preset: { id: 'regular-1' } }, 'test')
             ]),
@@ -227,8 +198,8 @@ describe('get preset', () => {
         expect(preset.value).toMatchSnapshot();
     });
 
-    test('should return null if no preset in selection', async () => {
-        const editor = await createEditor({
+    test('should return null if no preset in selection', () => {
+        const editor = createEditor({
             content: NodeFactory.doc([
                 NodeFactory.paragraph({ preset: null }, 'test')
             ]),
@@ -239,8 +210,8 @@ describe('get preset', () => {
         expect(preset.value).toBeFalsy();
     });
 
-    test('should get setting from link if selected', async () => {
-        const editor = await createEditor({
+    test('should get setting from link if selected', () => {
+        const editor = createEditor({
             content: NodeFactory.doc([
                 NodeFactory.paragraph({ preset: { id: 'regular-1' } }, 'test')
             ]),
@@ -273,8 +244,8 @@ describe('get preset', () => {
 });
 
 describe('apply preset', () => {
-    test('should apply preset to text', async () => {
-        const editor = await createEditor({
+    test('should apply preset to text', () => {
+        const editor = createEditor({
             content: NodeFactory.doc([
                 NodeFactory.paragraph({ preset: null }, 'test')
             ]),
@@ -287,8 +258,8 @@ describe('apply preset', () => {
         expect(editor.getJSON()).toMatchSnapshot();
     });
 
-    test('should apply heading to text', async () => {
-        const editor = await createEditor({
+    test('should apply heading to text', () => {
+        const editor = createEditor({
             content: NodeFactory.doc([
                 NodeFactory.paragraph({ preset: null }, 'test')
             ]),
@@ -303,8 +274,8 @@ describe('apply preset', () => {
         expect(editor.getJSON()).toMatchSnapshot();
     });
 
-    test('should change paragraph to heading', async () => {
-        const editor = await createEditor({
+    test('should change paragraph to heading', () => {
+        const editor = createEditor({
             content: NodeFactory.doc([
                 NodeFactory.paragraph({ preset: { id: 'regular-1' } }, 'test')
             ]),
@@ -320,8 +291,8 @@ describe('apply preset', () => {
         expect(editor.getJSON()).toMatchSnapshot();
     });
 
-    test('should apply regular to list', async () => {
-        const editor = await createEditor({
+    test('should apply regular to list', () => {
+        const editor = createEditor({
             content: NodeFactory.doc([
                 NodeFactory.list(ListTypes.LATIN, [
                     NodeFactory.paragraph('Item 1'),
@@ -337,8 +308,8 @@ describe('apply preset', () => {
         expect(editor.getJSON()).toMatchSnapshot();
     });
 
-    test('should apply heading to list', async () => {
-        const editor = await createEditor({
+    test('should apply heading to list', () => {
+        const editor = createEditor({
             content: NodeFactory.doc([
                 NodeFactory.list(ListTypes.LATIN, [
                     NodeFactory.paragraph('Item 1'),
@@ -356,8 +327,8 @@ describe('apply preset', () => {
         expect(editor.getJSON()).toMatchSnapshot();
     });
 
-    test('should apply default preset', async () => {
-        const editor = await createEditor({
+    test('should apply default preset', () => {
+        const editor = createEditor({
             content: NodeFactory.doc([
                 NodeFactory.paragraph({ preset: null }, 'test')
             ]),
@@ -371,8 +342,8 @@ describe('apply preset', () => {
         expect(editor.getJSON()).toMatchSnapshot();
     });
 
-    test('should keep text attributes on apply', async () => {
-        const editor = await createEditor({
+    test('should keep text attributes on apply', () => {
+        const editor = createEditor({
             content: NodeFactory.doc([
                 NodeFactory.paragraph({
                     preset: { id: 'regular-1' },
@@ -393,8 +364,8 @@ describe('apply preset', () => {
 });
 
 describe('get preset customization', () => {
-    test('should return empty customization', async () => {
-        const editor = await createEditor({
+    test('should return empty customization', () => {
+        const editor = createEditor({
             content: NodeFactory.doc([
                 NodeFactory.paragraph({ preset: { id: 'regular-1' } }, 'test')
             ]),
@@ -405,8 +376,8 @@ describe('get preset customization', () => {
         expect(customization.value).toMatchSnapshot();
     });
 
-    test('should not is setting customized', async () => {
-        const editor = await createEditor({
+    test('should not is setting customized', () => {
+        const editor = createEditor({
             content: NodeFactory.doc([
                 NodeFactory.paragraph({ preset: { id: 'regular-1' } }, 'test')
             ]),
@@ -420,8 +391,8 @@ describe('get preset customization', () => {
         expect(isAlignmentCustomized.value).toBe(false);
     });
 
-    test('should find marks', async () => {
-        const editor = await createEditor({
+    test('should find marks', () => {
+        const editor = createEditor({
             content: NodeFactory.doc([
                 NodeFactory.paragraph({ preset: { id: 'regular-1' } }, [
                     NodeFactory.text('test', [
@@ -440,8 +411,8 @@ describe('get preset customization', () => {
         expect(customization.value).toMatchSnapshot();
     });
 
-    test('should is marks setting customized', async () => {
-        const editor = await createEditor({
+    test('should is marks setting customized', () => {
+        const editor = createEditor({
             content: NodeFactory.doc([
                 NodeFactory.paragraph({ preset: { id: 'regular-1' } }, [
                     NodeFactory.text('test', [
@@ -459,8 +430,8 @@ describe('get preset customization', () => {
         expect(isFontSizeCustomized.value).toBe(true);
     });
 
-    test('should find attributes', async () => {
-        const editor = await createEditor({
+    test('should find attributes', () => {
+        const editor = createEditor({
             content: NodeFactory.doc([
                 NodeFactory.paragraph({
                     preset: { id: 'regular-1' },
@@ -477,8 +448,8 @@ describe('get preset customization', () => {
         expect(customization.value).toMatchSnapshot();
     });
 
-    test('should is attributes setting customized', async () => {
-        const editor = await createEditor({
+    test('should is attributes setting customized', () => {
+        const editor = createEditor({
             content: NodeFactory.doc([
                 NodeFactory.paragraph({
                     preset: { id: 'regular-1' },
@@ -496,8 +467,8 @@ describe('get preset customization', () => {
 });
 
 describe('get content customization', () => {
-    test('should return empty content customization', async () => {
-        const editor = await createEditor({
+    test('should return empty content customization', () => {
+        const editor = createEditor({
             content: NodeFactory.doc([
                 NodeFactory.paragraph({ preset: { id: 'regular-1' } }, 'test')
             ]),
@@ -508,8 +479,8 @@ describe('get content customization', () => {
         expect(customization.value).toMatchSnapshot();
     });
 
-    test('should find marks', async () => {
-        const editor = await createEditor({
+    test('should find marks', () => {
+        const editor = createEditor({
             content: NodeFactory.doc([
                 NodeFactory.paragraph({ preset: { id: 'regular-2' } }, [
                     NodeFactory.text('test', [
@@ -526,8 +497,8 @@ describe('get content customization', () => {
         expect(customization.value).toMatchSnapshot();
     });
 
-    test('should find attributes', async () => {
-        const editor = await createEditor({
+    test('should find attributes', () => {
+        const editor = createEditor({
             content: NodeFactory.doc([
                 NodeFactory.paragraph({
                     preset: { id: 'regular-2' },
@@ -544,8 +515,8 @@ describe('get content customization', () => {
 });
 
 describe('remove preset customization', () => {
-    test('should remove all marks in block', async () => {
-        const editor = await createEditor({
+    test('should remove all marks in block', () => {
+        const editor = createEditor({
             content: NodeFactory.doc([
                 NodeFactory.paragraph({ preset: { id: 'regular-1' } }, [
                     NodeFactory.text('test', [
@@ -566,8 +537,8 @@ describe('remove preset customization', () => {
         expect(editor.getJSON()).toMatchSnapshot();
     });
 
-    test('should remove all attributes', async () => {
-        const editor = await createEditor({
+    test('should remove all attributes', () => {
+        const editor = createEditor({
             content: NodeFactory.doc([
                 NodeFactory.heading(1, {
                     preset: { id: 'regular-1' },
@@ -589,8 +560,8 @@ describe('remove preset customization', () => {
         expect(editor.getJSON()).toMatchSnapshot();
     });
 
-    test('should keep selection', async () => {
-        const editor = await createEditor({
+    test('should keep selection', () => {
+        const editor = createEditor({
             content: NodeFactory.doc([
                 NodeFactory.paragraph({ preset: { id: 'regular-1' } }, [
                     NodeFactory.text('test', [
@@ -615,8 +586,8 @@ describe('remove preset customization', () => {
 });
 
 describe('parsing html', () => {
-    test('should get by fallback class', async () => {
-        const editor = await createEditor({
+    test('should get by fallback class', () => {
+        const editor = createEditor({
             content: '<p class="zpa-regular2">lorem ipsum</p>',
             defaultId: 'regular-1',
             presets: [
@@ -628,8 +599,8 @@ describe('parsing html', () => {
         expect(editor.getJSON()).toMatchSnapshot();
     });
 
-    test('should get by preset class', async () => {
-        const editor = await createEditor({
+    test('should get by preset class', () => {
+        const editor = createEditor({
             content: '<p class="zw ts-regular-2">lorem ipsum</p>',
             defaultId: 'regular-1',
             presets: [
@@ -641,8 +612,8 @@ describe('parsing html', () => {
         expect(editor.getJSON()).toMatchSnapshot();
     });
 
-    test('should get by heading tag', async () => {
-        const editor = await createEditor({
+    test('should get by heading tag', () => {
+        const editor = createEditor({
             content: '<h3>lorem ipsum</h3>',
             defaultId: 'regular-1',
             presets: [
@@ -654,8 +625,8 @@ describe('parsing html', () => {
         expect(editor.getJSON()).toMatchSnapshot();
     });
 
-    test('should set default preset to unstyled paragraph', async () => {
-        const editor = await createEditor({
+    test('should set default preset to unstyled paragraph', () => {
+        const editor = createEditor({
             content: '<p>lorem ipsum</p>',
             defaultId: 'regular-1',
             presets: [createPreset({ id: 'regular-1' })]
@@ -664,8 +635,8 @@ describe('parsing html', () => {
         expect(editor.getJSON()).toMatchSnapshot();
     });
 
-    test('should set null to list item', async () => {
-        const editor = await createEditor({
+    test('should set null to list item', () => {
+        const editor = createEditor({
             content: '<ul><li>lorem ipsum</li></ul>',
             defaultId: 'regular-1',
             presets: [createPreset({ id: 'regular-1' })]
@@ -674,8 +645,8 @@ describe('parsing html', () => {
         expect(editor.getJSON()).toMatchSnapshot();
     });
 
-    test('should set null to list item with preset', async () => {
-        const editor = await createEditor({
+    test('should set null to list item with preset', () => {
+        const editor = createEditor({
             content: '<ul class="zw regular-1"><li>lorem ipsum</li></ul>',
             defaultId: 'regular-1',
             presets: [createPreset({ id: 'regular-1' })]

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

@@ -136,6 +136,6 @@ Object {
 }
 `;
 
-exports[`rendering should render all devices 1`] = `"<p class="zw-style" style="--zw-text-align-mobile:left;--zw-text-align-tablet:right;--zw-text-align-desktop:center;">hello world</p>"`;
+exports[`rendering should render all devices 1`] = `"<p class="zw-style" style="--zw-alignment-mobile:left;--zw-alignment-tablet:right;--zw-alignment-desktop:center;">hello world</p>"`;
 
-exports[`rendering should render only desktop 1`] = `"<p class="zw-style" style="--zw-text-align-desktop:center;">hello world</p>"`;
+exports[`rendering should render only desktop 1`] = `"<p class="zw-style" style="--zw-alignment-desktop:center;">hello world</p>"`;

package/lib/extensions/__tests__/__snapshots__/StylePreset.test.js.snap

@@ -521,5 +521,3 @@ Object {
 exports[`render preset styles should render node without preset 1`] = `"<p class="zw-style">test</p>"`;
 
 exports[`render preset styles should render preset class 1`] = `"<p class="zw-style zw ts-regular-1">test</p>"`;
-
-exports[`render preset styles should render styles 1`] = `" .zw.ts-regular-1 { --zw-preset-font-weight: var(--common-regular-1-font-weight, inherit); --zw-preset-mobile-font-size: var(--mobile-regular-1-font-size, inherit); --zw-preset-tablet-font-size: var(--tablet-regular-1-font-size, inherit); --zw-preset-desktop-font-size: var(--desktop-regular-1-font-size, inherit); }"`;

package/lib/extensions/core/NodeProcessor.js

@@ -7,7 +7,7 @@ import {
     isNodeFullySelected,
     resolveTextPosition
 } from '../../utils';
-import { MarkGroups, NodeTypes } from '../../enums';
+import { MarkGroups, NodeTypes, TextSettings } from '../../enums';
 import { AddNodeMarkStep, AttrStep, RemoveNodeMarkStep } from './steps';
 
 export const NodeProcessor = Extension.create({
@@ -46,6 +46,7 @@ export const NodeProcessor = Extension.create({
             applyMark: createCommand(({ state, commands }, name, value, customizer = {}) => {
                 const { tr, doc, schema } = state;
                 const { $from, $to } = tr.selection;
+                const linkMarkType = getMarkType(TextSettings.LINK, schema);
                 const markType = getMarkType(name, schema);
                 const markGroup = markType.spec.group || '';
 
@@ -71,7 +72,10 @@ export const NodeProcessor = Extension.create({
                     const applyingMark = markType.create({ ...(initialMark?.attrs || {}), ...value });
                     const textPosition = resolveTextPosition($from, $to, node, position);
 
-                    if (isMarkAppliedToParent(tr.doc, position, applyingMark, customizer.isAppliedToParent)) {
+                    const isAppliedToParent = !linkMarkType.isInSet(node.marks)
+                        && isMarkAppliedToParent(tr.doc, position, applyingMark, customizer.isAppliedToParent);
+
+                    if (isAppliedToParent) {
                         return onAppliedToParent({ tr, node, position, mark: applyingMark });
                     }
 

package/lib/extensions/index.js

@@ -1,4 +1,6 @@
 import { reactive, toRef, watch } from 'vue';
+import { StylePresetRenderer } from '../services';
+import { buildCoreExtensions } from './core';
 import { FontFamily } from './FontFamily';
 import { StylePreset } from './StylePreset';
 import { FontWeight } from './FontWeight';
@@ -14,7 +16,6 @@ import { LineHeight } from './LineHeight';
 import { List } from './list';
 import { Link } from './Link';
 import { Superscript } from './Superscript';
-import { buildCoreExtensions } from './core';
 import { Margin } from './Margin';
 
 export function buildExtensions(options) {
@@ -30,8 +31,11 @@ export function buildExtensions(options) {
         StylePreset.configure({
             presets: options.presetsRef,
             defaultId: options.defaultPresetId,
-            baseClass: options.basePresetClass,
-            makeVariable: options.makePresetVariable
+            styleRenderer: new StylePresetRenderer({
+                baseClass: options.basePresetClass,
+                makeVariable: options.makePresetVariable,
+                linkPresetId: options.linkPresetId
+            })
         }),
         List.configure({
             baseClass: options.baseListClass,

package/lib/extensions/list/__tests__/List.test.js

@@ -29,7 +29,12 @@ function createEditor({ content }) {
                         }
                     ],
                     defaultId: 'regular-1',
-                    baseClass: 'zw ts-'
+
+                    styleRenderer: {
+                        makePresetHtmlClass: (preset) =>  `zw ts-${preset.id}`,
+                        makePresetCssClass: (preset) => `.zw.ts-${preset.id}`,
+                        render: () => ''
+                    }
                 }),
                 MockFontWeight
             ]

package/lib/services/ContentSerializer.js

@@ -4,7 +4,7 @@ import { DOMParser } from 'prosemirror-model';
 import { buildExtensions } from '../extensions';
 import { Devices } from '../enums';
 import { ContentNormalizer } from './normalizer';
-import { ContextWindow } from './ContextWidnow';
+import { ContextWindow } from './ContextWindow';
 
 export class ContentSerializer {
     static build({ config, nodeDomParser }) {

package/lib/services/StylePresetRenderer.js

@@ -0,0 +1,73 @@
+import { Devices } from '../enums';
+import { ContextWindow } from './ContextWindow';
+
+export class StylePresetRenderer {
+    #baseClass;
+    #makeVariable;
+    #linkPresetId;
+
+    constructor({ baseClass, makeVariable, linkPresetId }) {
+        this.#baseClass = baseClass;
+        this.#makeVariable = makeVariable;
+        this.#linkPresetId = linkPresetId;
+    }
+
+    inject(hostEl, presets) {
+        let styleEl = hostEl.querySelector('[data-zw-styles]');
+
+        if (styleEl) return;
+
+        styleEl = ContextWindow.document.createElement('style');
+        styleEl.dataset.zwStyles = '';
+        styleEl.innerHTML = this.render(presets);
+
+        hostEl.append(styleEl);
+    }
+
+    render(presets) {
+        let css = '';
+
+        for (const preset of presets) {
+            const isLink = preset.id === this.#linkPresetId;
+            const className = this.makePresetCssClass(preset);
+
+            css += ` ${className} {`;
+
+            for (const device of Devices.values) {
+                for (const setting of Object.keys(preset[device])) {
+                    const variable = this.#makeVariable({ device, preset, property: setting });
+                    const internalVariable = this.#makeInternalVariableName(setting, device);
+
+                    css += `${internalVariable}: var(${variable}, inherit);`;
+
+                    // Encapsulate link styles in editor from parent
+
+                    if (isLink) {
+                        const overrideVariable = internalVariable.replace('preset-', '');
+
+                        css += `${overrideVariable}: var(${internalVariable});`;
+                    }
+                }
+            }
+
+            css += '}';
+        }
+
+        return css;
+    }
+
+    #makeInternalVariableName(setting, device) {
+        const property = setting === 'color' ? 'font-color' : setting.replace(/_/i, '-');
+        const prefix = device === Devices.COMMON ? '' : `-${device}`;
+
+        return `--zw-preset-${property}${prefix}`;
+    }
+
+    makePresetHtmlClass(preset) {
+        return this.#baseClass + preset.id;
+    }
+
+    makePresetCssClass(preset) {
+        return this.makePresetHtmlClass(preset).split(' ').map((part) => `.${part}`).join('');
+    }
+}