@zipify/wysiwyg 3.1.0-0 → 3.1.0

package/lib/extensions/list/List.js

@@ -2,7 +2,6 @@ import { Node, wrappingInputRule } from '@tiptap/vue-2';
 import { computed, unref } from 'vue';
 import { copyMark, createCommand } from '../../utils';
 import { ListTypes, MarkGroups, NodeTypes, TextSettings } from '../../enums';
-import { AddNodeMarkStep, RemoveNodeMarkStep } from '../core/steps';
 import { ListItem } from './ListItem';
 
 export const List = Node.create({
@@ -122,13 +121,13 @@ export const List = Node.create({
                     node.forEach((child) => {
                         for (const childMark of child.marks) {
                             if (childMark.isInSet(bubbled)) {
-                                tr.step(new RemoveNodeMarkStep(position + 1, childMark));
+                                tr.removeNodeMark(position + 1, childMark);
                                 continue;
                             }
 
                             if (canBubbleMark(node, childMark)) {
-                                tr.step(new RemoveNodeMarkStep(position + 1, childMark));
-                                tr.step(new AddNodeMarkStep(position, copyMark(childMark)));
+                                tr.removeNodeMark(position + 1, childMark);
+                                tr.addNodeMark(position, copyMark(childMark));
                                 bubbled.push(childMark);
                             }
                         }
@@ -152,7 +151,7 @@ export const List = Node.create({
                     });
 
                     for (const mark of addingMarks) {
-                        tr.step(new AddNodeMarkStep(position, copyMark(mark)));
+                        tr.addNodeMark(position, copyMark(mark));
                     }
 
                     return false;

package/lib/extensions/list/ListItem.js

@@ -1,7 +1,6 @@
 import Base from '@tiptap/extension-list-item';
 import { MarkGroups, NodeTypes } from '../../enums';
 import { copyMark, createCommand } from '../../utils';
-import { AddNodeMarkStep } from '../core/steps';
 
 export const ListItem = Base.extend({
     name: NodeTypes.LIST_ITEM,
@@ -22,7 +21,7 @@ export const ListItem = Base.extend({
                 const position = getItemPosition(tr);
 
                 for (const mark of initialNode.marks) {
-                    tr.step(new AddNodeMarkStep(position, copyMark(mark)));
+                    tr.addNodeMark(position, copyMark(mark));
                 }
 
                 return true;

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
             ]
@@ -62,7 +67,7 @@ describe('get list type', () => {
 
         editor.commands.selectAll();
 
-        expect(editor.commands.getListType().value).toBe(null);
+        expect(editor.commands.getListType().value).toBeNull();
     });
 });
 

package/lib/models/Font.js

@@ -3,10 +3,10 @@ export class Font {
         this.name = name;
         this.category = category;
         this.styles = styles;
-        this.weights = this.#getWeights();
+        this.weights = this._getWeights();
     }
 
-    #getWeights() {
+    _getWeights() {
         const weights = this.styles.map((style) => style.replace('i', ''));
 
         return Array.from(new Set(weights));

package/lib/models/__tests__/Font.test.js

@@ -19,21 +19,21 @@ describe('weights', () => {
         const font = new Font({ styles: ['400', '700'] });
         const weight = font.findClosestWeight('500');
 
-        expect(weight).toEqual('400');
+        expect(weight).toBe('400');
     });
 
     test('should find closest font weight from upper side', () => {
         const font = new Font({ styles: ['400', '700'] });
         const weight = font.findClosestWeight('900');
 
-        expect(weight).toEqual('700');
+        expect(weight).toBe('700');
     });
 
     test('should find closest font weight from lower side', () => {
         const font = new Font({ styles: ['400', '700'] });
         const weight = font.findClosestWeight('200');
 
-        expect(weight).toEqual('400');
+        expect(weight).toBe('400');
     });
 });
 
@@ -56,12 +56,6 @@ describe('style checks', () => {
         expect(font.isItalicSupported('400')).toBe(true);
     });
 
-    test('should detect if weight not supported', () => {
-        const font = new Font({ styles: ['400', '700'] });
-
-        expect(font.isItalicSupported('700')).toBe(false);
-    });
-
     test('should detect italic only weight', () => {
         const font = new Font({ styles: ['400i'] });
 

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 }) {
@@ -31,21 +31,21 @@ export class ContentSerializer {
         });
     }
 
-    #schema;
-    #domParser;
-    #nodeDomParser;
+    _schema;
+    _domParser;
+    _nodeDomParser;
 
     constructor({ schema, domParser, nodeDomParser }) {
-        this.#schema = schema;
-        this.#domParser = domParser;
-        this.#nodeDomParser = nodeDomParser;
+        this._schema = schema;
+        this._domParser = domParser;
+        this._nodeDomParser = nodeDomParser;
     }
 
     toJSON(html) {
-        const normalizer = ContentNormalizer.build(html, { parser: this.#nodeDomParser });
+        const normalizer = ContentNormalizer.build(html, { parser: this._nodeDomParser });
 
         normalizer.normalizeHTML();
 
-        return this.#domParser.parse(normalizer.dom.body).toJSON();
+        return this._domParser.parse(normalizer.dom.body).toJSON();
     }
 }

package/lib/services/HtmlToJsonParser.js

@@ -5,13 +5,13 @@ export class HtmlToJsonParser {
         return new HtmlToJsonParser(ContentSerializer.build({ config }));
     }
 
-    #contentSerializer;
+    _contentSerializer;
 
     constructor(contentSerializer) {
-        this.#contentSerializer = contentSerializer;
+        this._contentSerializer = contentSerializer;
     }
 
     toJSON(html) {
-        return this.#contentSerializer.toJSON(html);
+        return this._contentSerializer.toJSON(html);
     }
 }

package/lib/services/NodeFactory.js

@@ -46,7 +46,7 @@ export class NodeFactory {
      * }}
      */
     static listItem(...args) {
-        const { attrs, content: children, marks } = this.#normalizeTextBlockArgs(args);
+        const { attrs, content: children, marks } = this._normalizeTextBlockArgs(args);
 
         return {
             type: NodeTypes.LIST_ITEM,
@@ -66,7 +66,7 @@ export class NodeFactory {
      * }}
      */
     static heading(level, ...args) {
-        const config = this.#textBlock(args, this.text);
+        const config = this._textBlock(args, this.text);
 
         config.attrs ??= {};
         config.attrs.level = level;
@@ -84,12 +84,12 @@ export class NodeFactory {
     static paragraph(...args) {
         return {
             type: NodeTypes.PARAGRAPH,
-            ...this.#textBlock(args, this.text)
+            ...this._textBlock(args, this.text)
         };
     }
 
-    static #textBlock(args) {
-        const { attrs, content, marks } = this.#normalizeTextBlockArgs(args);
+    static _textBlock(args) {
+        const { attrs, content, marks } = this._normalizeTextBlockArgs(args);
         const children = typeof content === 'string' ? [this.text(content)] : content;
 
         return {
@@ -99,7 +99,7 @@ export class NodeFactory {
         };
     }
 
-    static #normalizeTextBlockArgs(args) {
+    static _normalizeTextBlockArgs(args) {
         if (args.length === 1) {
             return { attrs: null, marks: null, content: args[0] };
         }

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('');
+    }
+}

package/lib/services/__tests__/JsonSerializer.test.js

@@ -10,7 +10,7 @@ describe('decode', () => {
     test('should return null on error', () => {
         const json = JsonSerializer.decode('{ "tes');
 
-        expect(json).toBe(null);
+        expect(json).toBeNull();
     });
 });
 

package/lib/services/__tests__/Storage.test.js

@@ -20,7 +20,7 @@ describe('get item', () => {
             storage: createNativeStorage({})
         });
 
-        expect(storage.getItem('test')).toBe(null);
+        expect(storage.getItem('test')).toBeNull();
     });
 
     test('should parse json', () => {

package/lib/services/__tests__/StylePresetRenderer.test.js

@@ -0,0 +1,98 @@
+import { StylePresetRenderer } from '../StylePresetRenderer';
+
+function createRenderer() {
+    return new StylePresetRenderer({
+        baseClass: 'zw ts-',
+        linkPresetId: 'link',
+
+        makeVariable({ device, preset, property }) {
+            const formattedProperty = property.replace(/_/i, '-');
+
+            return `--${device}-${preset.id}-${formattedProperty}`;
+        }
+    });
+}
+
+const createPreset = (attrs = {}) => ({
+    id: 'regular-1',
+    common: { font_family: 'Lato' },
+    mobile: { font_size: '14' },
+    tablet: { font_size: '16' },
+    desktop: { font_size: '18' },
+    ...attrs
+});
+
+describe('inject styles', () => {
+    const createHost = () => document.createElement('div');
+
+    test('should inject stylesheet', () => {
+        const renderer = createRenderer();
+        const host = createHost();
+
+        renderer.inject(host, [
+            createPreset({ id: 'regular-1' }),
+            createPreset({ id: 'regular-2' }),
+            createPreset({ id: 'regular-3' })
+        ]);
+
+        expect(host.querySelector('[data-zw-styles]')).toBeTruthy();
+    });
+
+    test('should not inject multiple stylesheets', () => {
+        const renderer = createRenderer();
+        const host = createHost();
+
+        const presets = [
+            createPreset({ id: 'regular-1' }),
+            createPreset({ id: 'regular-2' }),
+            createPreset({ id: 'regular-3' })
+        ];
+
+        renderer.inject(host, presets);
+        renderer.inject(host, presets);
+
+        expect(host.querySelectorAll('[data-zw-styles]')).toHaveLength(1);
+    });
+});
+
+describe('render', () => {
+    test('should render preset styles', () => {
+        const renderer = createRenderer();
+
+        const css = renderer.render([
+            createPreset({ id: 'regular-1' }),
+            createPreset({ id: 'regular-2' }),
+            createPreset({ id: 'regular-3' })
+        ]);
+
+        expect(css).toMatchSnapshot();
+    });
+
+    test('should encapsulate link preset', () => {
+        const renderer = createRenderer();
+
+        const css = renderer.render([
+            createPreset({ id: 'link' })
+        ]);
+
+        expect(css).toMatchSnapshot();
+    });
+});
+
+describe('make html preset class', () => {
+    test('should make class name', () => {
+        const renderer = createRenderer();
+        const className = renderer.makePresetHtmlClass({ id: 'link' });
+
+        expect(className).toBe('zw ts-link');
+    });
+});
+
+describe('make css preset class', () => {
+    test('should make class name', () => {
+        const renderer = createRenderer();
+        const selector = renderer.makePresetCssClass({ id: 'link' });
+
+        expect(selector).toBe('.zw.ts-link');
+    });
+});

package/lib/services/__tests__/__snapshots__/StylePresetRenderer.test.js.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render should encapsulate link preset 1`] = `" .zw.ts-link {--zw-preset-font-family: var(--common-link-font-family, inherit);--zw-font-family: var(--zw-preset-font-family);--zw-preset-font-size-mobile: var(--mobile-link-font-size, inherit);--zw-font-size-mobile: var(--zw-preset-font-size-mobile);--zw-preset-font-size-tablet: var(--tablet-link-font-size, inherit);--zw-font-size-tablet: var(--zw-preset-font-size-tablet);--zw-preset-font-size-desktop: var(--desktop-link-font-size, inherit);--zw-font-size-desktop: var(--zw-preset-font-size-desktop);}"`;
+
+exports[`render should render preset styles 1`] = `" .zw.ts-regular-1 {--zw-preset-font-family: var(--common-regular-1-font-family, inherit);--zw-preset-font-size-mobile: var(--mobile-regular-1-font-size, inherit);--zw-preset-font-size-tablet: var(--tablet-regular-1-font-size, inherit);--zw-preset-font-size-desktop: var(--desktop-regular-1-font-size, inherit);} .zw.ts-regular-2 {--zw-preset-font-family: var(--common-regular-2-font-family, inherit);--zw-preset-font-size-mobile: var(--mobile-regular-2-font-size, inherit);--zw-preset-font-size-tablet: var(--tablet-regular-2-font-size, inherit);--zw-preset-font-size-desktop: var(--desktop-regular-2-font-size, inherit);} .zw.ts-regular-3 {--zw-preset-font-family: var(--common-regular-3-font-family, inherit);--zw-preset-font-size-mobile: var(--mobile-regular-3-font-size, inherit);--zw-preset-font-size-tablet: var(--tablet-regular-3-font-size, inherit);--zw-preset-font-size-desktop: var(--desktop-regular-3-font-size, inherit);}"`;

package/lib/services/index.js

@@ -3,6 +3,7 @@ export { ContentSerializer } from './ContentSerializer';
 export { Storage } from './Storage';
 export { FavoriteColors } from './FavoriteColors';
 export { ContentNormalizer } from './normalizer';
-export { ContextWindow } from './ContextWidnow';
+export { ContextWindow } from './ContextWindow';
 export { NodeFactory } from './NodeFactory';
 export { HtmlToJsonParser } from './HtmlToJsonParser';
+export { StylePresetRenderer } from './StylePresetRenderer';

package/lib/services/normalizer/BrowserDomParser.js

@@ -1,8 +1,8 @@
 export class BrowserDomParser {
-    #domParser = new DOMParser();
+    _domParser = new DOMParser();
     types = window;
 
     parse(html) {
-        return this.#domParser.parseFromString(html, 'text/html');
+        return this._domParser.parseFromString(html, 'text/html');
     }
 }

package/lib/services/normalizer/ContentNormalizer.js

@@ -4,17 +4,17 @@ import { JsonNormalizer } from './JsonNormalizer';
 
 export class ContentNormalizer {
     static build(content, options = {}) {
-        return typeof content === 'string' ? this.#buildHtml(content, options) : this.#buildJson(content);
+        return typeof content === 'string' ? this._buildHtml(content, options) : this._buildJson(content);
     }
 
-    static #buildHtml(content, options) {
+    static _buildHtml(content, options) {
         return new HtmlNormalizer({
             content,
             parser: options.parser || new BrowserDomParser()
         });
     }
 
-    static #buildJson(content) {
+    static _buildJson(content) {
         return new JsonNormalizer({ content });
     }