@zipify/wysiwyg 3.0.1 → 3.0.2-0

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]').length).toBe(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/styles/content.css

@@ -16,7 +16,7 @@
 .zw-style.zw-style.zw-style {
     font-weight: var(--zw-font-weight, var(--zw-preset-font-weight));
     font-family: var(--zw-font-family, var(--zw-preset-font-family));
-    color: var(--zw-font-color, var(--zw-preset-color));
+    color: var(--zw-font-color, var(--zw-preset-font-color));
     font-style: var(--zw-font-style, var(--zw-preset-font-style));
     text-decoration: var(--zw-text-decoration, var(--zw-preset-text-decoration));
     background-color: var(--zw-background-color, var(--zw-preset-background-color));
@@ -33,27 +33,27 @@ h4.zw-style.zw-style.zw-style {
 @media (min-width: 1200px) {
 
     .zw-style.zw-style.zw-style {
-        font-size: var(--zw-font-size-desktop, var(--zw-preset-desktop-font-size));
-        text-align: var(--zw-text-align-desktop, var(--zw-preset-desktop-alignment));
-        line-height: var(--zw-line-height-desktop, var(--zw-preset-desktop-line-height));
+        font-size: var(--zw-font-size-desktop, var(--zw-preset-font-size-desktop));
+        text-align: var(--zw-alignment-desktop, var(--zw-preset-alignment-desktop));
+        line-height: var(--zw-line-height-desktop, var(--zw-preset-line-height-desktop));
     }
 }
 
 @media (min-width: 769px) and (max-width: 1199.98px) {
 
     .zw-style.zw-style.zw-style {
-        font-size: var(--zw-font-size-tablet, var(--zw-preset-tablet-font-size));
-        text-align: var(--zw-text-align-tablet, var(--zw-preset-tablet-alignment));
-        line-height: var(--zw-line-height-tablet, var(--zw-preset-tablet-line-height));
+        font-size: var(--zw-font-size-tablet, var(--zw-preset-font-size-tablet));
+        text-align: var(--zw-alignment-tablet, var(--zw-preset-alignment-tablet));
+        line-height: var(--zw-line-height-tablet, var(--zw-preset-line-height-tablet));
     }
 }
 
 @media (max-width: 768.98px) {
 
     .zw-style.zw-style.zw-style {
-        font-size: var(--zw-font-size-mobile, var(--zw-preset-mobile-font-size));
-        text-align: var(--zw-text-align-mobile, var(--zw-preset-mobile-alignment));
-        line-height: var(--zw-line-height-mobile, var(--zw-preset-mobile-line-height));
+        font-size: var(--zw-font-size-mobile, var(--zw-preset-font-size-mobile));
+        text-align: var(--zw-alignment-mobile, var(--zw-preset-alignment-mobile));
+        line-height: var(--zw-line-height-mobile, var(--zw-preset-line-height-mobile));
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "3.0.1",
+  "version": "3.0.2-0",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "bin": {