@zipify/wysiwyg 1.0.0-dev.17 → 1.0.0-dev.18

package/lib/extensions/index.js

@@ -1,5 +1,3 @@
-import History from '@tiptap/extension-history';
-import { CORE_EXTENSIONS } from './core';
 import { FontFamily } from './FontFamily';
 import { StylePreset } from './StylePreset';
 import { FontWeight } from './FontWeight';
@@ -13,38 +11,47 @@ import { CaseStyle } from './CaseStyle';
 import { Alignment } from './Alignment';
 import { LineHeight } from './LineHeight';
 import { List } from './list';
+import { Link } from './Link';
 import { Superscript } from './Superscript';
+import { buildCoreExtensions } from './core';
 
-export { CORE_EXTENSIONS };
+export function buildExtensions(options) {
+    const getPresetById = (id) => options.presetsRef.value.find((preset) => preset.id === id);
+    const defaultPreset = getPresetById(options.defaultPresetId);
 
-export const getExtensions = (options) => CORE_EXTENSIONS.concat([
-    History,
-    StylePreset.configure({
-        presetsRef: options.presetsRef,
-        defaultId: options.defaultPresetId,
-        baseClass: options.basePresetClass,
-        makeVariable: options.makePresetVariable
-    }),
-    List.configure({
-        baseClass: options.baseListClass
-    }),
-    DeviceManager.configure({
-        deviceRef: options.deviceRef
-    }),
-    FontFamily.configure({
-        fonts: options.fonts
-    }),
-    FontWeight,
-    FontSize.configure({
-        minSize: options.minFontSize,
-        maxSize: options.maxFontSize
-    }),
-    FontColor,
-    BackgroundColor,
-    FontStyle,
-    TextDecoration,
-    CaseStyle,
-    Superscript,
-    Alignment,
-    LineHeight
-]);
+    return buildCoreExtensions(options).concat([
+        StylePreset.configure({
+            presetsRef: options.presetsRef,
+            defaultId: options.defaultPresetId,
+            baseClass: options.basePresetClass,
+            makeVariable: options.makePresetVariable
+        }),
+        List.configure({
+            baseClass: options.baseListClass
+        }),
+        DeviceManager.configure({
+            deviceRef: options.deviceRef
+        }),
+        FontFamily.configure({
+            fonts: options.fonts,
+            defaultFont: defaultPreset.common.font_family
+        }),
+        FontWeight,
+        FontSize.configure({
+            minSize: options.minFontSize,
+            maxSize: options.maxFontSize
+        }),
+        FontColor,
+        BackgroundColor,
+        FontStyle,
+        TextDecoration,
+        CaseStyle,
+        Superscript,
+        Alignment,
+        LineHeight,
+        Link.configure({
+            preset: options.linkPreset,
+            basePresetClass: options.basePresetClass,
+            pageBlocks: options.pageBlocks
+        })]);
+}

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

@@ -2,18 +2,16 @@ import { Editor } from '@tiptap/vue-2';
 import { ref } from '@vue/composition-api';
 import { NodeFactory } from '../../../__tests__/utils';
 import { ListTypes } from '../../../enums';
-import { CORE_EXTENSIONS } from '../../core';
 import { StylePreset } from '../../StylePreset';
 import { List } from '../List';
 import { ContentNormalizer } from '../../../services';
+import { buildCoreExtensions } from '../../core';
 
 function createEditor({ content }) {
-    const normalizer = new ContentNormalizer();
-
     return new Editor({
-        content: normalizer.normalize(content),
+        content: ContentNormalizer.normalize(content),
         element: document.createElement('div'),
-        extensions: CORE_EXTENSIONS.concat(
+        extensions: buildCoreExtensions().concat(
             List.configure({
                 baseClass: 'zw-list--'
             }),

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

@@ -92,7 +92,9 @@ Object {
   "content": Array [
     Object {
       "attrs": Object {
-        "preset": null,
+        "preset": Object {
+          "id": "regular-1",
+        },
       },
       "content": Array [
         Object {
@@ -104,7 +106,9 @@ Object {
     },
     Object {
       "attrs": Object {
-        "preset": null,
+        "preset": Object {
+          "id": "regular-1",
+        },
       },
       "content": Array [
         Object {
@@ -221,7 +225,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -256,7 +262,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -291,7 +299,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -326,7 +336,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -361,7 +373,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -396,7 +410,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -431,7 +447,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -466,7 +484,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -501,7 +521,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -536,7 +558,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -571,7 +595,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -606,7 +632,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -641,7 +669,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {

package/lib/injectionTokens.js

@@ -3,5 +3,6 @@ export const InjectionTokens = Object.freeze({
     FONT_SIZES: Symbol('fontSizes'),
     EDITOR: Symbol('editor'),
     LOCAL_STORAGE: Symbol('localStorage'),
-    FAVORITE_COLORS: Symbol('favoriteColors')
+    FAVORITE_COLORS: Symbol('favoriteColors'),
+    PAGE_BLOCKS: Symbol('pageBlocks')
 });

package/lib/services/ContentNormalizer.js

@@ -1,26 +1,36 @@
 import { ContextWindow } from './ContextWidnow';
 
 export class ContentNormalizer {
-    static NORMALIZING_STYLE_BLACKLIST = ['text-align', 'line-height'];
+    static BLOCK_STYLES = ['text-align', 'line-height'];
 
-    normalize(content) {
-        if (typeof content !== 'string') return content;
+    static normalize(content) {
+        return new ContentNormalizer(content).normalize();
+    }
 
-        return this._normalizeTextContent(content);
+    constructor(content) {
+        this._content = content;
+        this._dom = null;
     }
 
-    _normalizeTextContent(content) {
-        const parser = new DOMParser();
-        const dom = parser.parseFromString(content, 'text/html');
+    normalize() {
+        if (typeof this._content !== 'string') {
+            return this._content;
+        }
+        return this._normalizeTextContent();
+    }
 
-        this._iterateNodes(dom, this._normalizeStructure.bind(this), (node) => node.tagName === 'SPAN');
-        this._iterateNodes(dom, this._normalizeStyles.bind(this), (node) => node.tagName !== 'SPAN');
+    _normalizeTextContent() {
+        this._dom = new DOMParser().parseFromString(this._content, 'text/html');
 
-        return dom.body.innerHTML;
+        this._iterateNodes(this._normalizeListItems.bind(this), (node) => node.tagName === 'LI');
+        this._iterateNodes(this._normalizeSettingsStructure.bind(this), (node) => node.tagName === 'SPAN');
+        this._iterateNodes(this._normalizeStyles.bind(this), (node) => node.tagName !== 'SPAN');
+
+        return this._dom.body.innerHTML;
     }
 
-    _iterateNodes(dom, handler, condition) {
-        const iterator = dom.createNodeIterator(dom.body, NodeFilter.SHOW_ELEMENT, {
+    _iterateNodes(handler, condition) {
+        const iterator = this._dom.createNodeIterator(this._dom.body, NodeFilter.SHOW_ELEMENT, {
             acceptNode: (node) => condition(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
         });
         let currentNode = iterator.nextNode();
@@ -31,14 +41,43 @@ export class ContentNormalizer {
         }
     }
 
-    _normalizeStructure(element) {
+    _normalizeListItems(itemEl) {
+        const fragment = new DocumentFragment();
+        const children = Array.from(itemEl.childNodes);
+        let capturingParagraph;
+
+        const append = (node) => {
+            this._assignElementProperties(node, itemEl, ContentNormalizer.BLOCK_STYLES);
+            fragment.append(node);
+        };
+
+        for (const node of children) {
+            if (node.tagName === 'P') {
+                append(node);
+                capturingParagraph = null;
+                continue;
+            }
+
+            if (!capturingParagraph) {
+                capturingParagraph = document.createElement('p');
+                append(capturingParagraph);
+            }
+
+            capturingParagraph.append(node);
+        }
+
+        itemEl.append(fragment);
+        this._removeStyleProperties(itemEl, ContentNormalizer.BLOCK_STYLES);
+    }
+
+    _normalizeSettingsStructure(element) {
         const isTextChildren = Array.from(element.childNodes)
             .every((node) => node.nodeType === Node.TEXT_NODE);
 
         if (isTextChildren) return;
 
         const cloned = element.cloneNode(true);
-        const migratingStyles = this._getMigratingStyles(element);
+        const migratingStyles = this._getMigratingStyles(element, { customProperties: true });
         const content = [];
 
         for (const node of cloned.childNodes) {
@@ -67,16 +106,17 @@ export class ContentNormalizer {
         this._removeStyleProperties(element, properties);
     }
 
-    _getMigratingStyles(element) {
-        const blacklist = ContentNormalizer.NORMALIZING_STYLE_BLACKLIST;
+    _getMigratingStyles(element, { customProperties } = {}) {
+        const blacklist = ContentNormalizer.BLOCK_STYLES;
         const properties = [];
 
         for (let index = 0; index < element.style.length; index++) {
             const property = element.style.item(index);
 
-            if (!blacklist.includes(property)) {
-                properties.push(property);
-            }
+            if (blacklist.includes(property)) continue;
+            if (!customProperties && property.startsWith('--')) continue;
+
+            properties.push(property);
         }
 
         return properties;
@@ -99,7 +139,9 @@ export class ContentNormalizer {
                 continue;
             }
 
-            target.style.setProperty(property, source.style.getPropertyValue(property));
+            const value = source.style.getPropertyValue(property);
+
+            if (value) target.style.setProperty(property, value);
         }
     }
 

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

@@ -1,13 +1,11 @@
 import { ContentNormalizer } from '../ContentNormalizer';
 import { NodeFactory } from '../../__tests__/utils';
 
-const normalize = (content) => new ContentNormalizer().normalize(content);
-
-describe('normalize text settings', () => {
+describe('normalize text content', () => {
     test('should ignore json content', () => {
         const content = NodeFactory.doc([NodeFactory.paragraph('Test')]);
 
-        expect(normalize(content)).toBe(content);
+        expect(ContentNormalizer.normalize(content)).toBe(content);
     });
 
     test('should flat structure', () => {
@@ -18,14 +16,14 @@ describe('normalize text settings', () => {
             '<span style="background-color: rgb(255, 0, 0); color: rgb(255, 255, 255);">sum</span>' +
         '</p>';
 
-        expect(normalize(input)).toBe(output);
+        expect(ContentNormalizer.normalize(input)).toBe(output);
     });
 
     test('should move styles from paragraph to text', () => {
         const input = '<p style="background-color: red;">lorem ipsum</p>';
         const output = '<p><span style="background-color: red;">lorem ipsum</span></p>';
 
-        expect(normalize(input)).toBe(output);
+        expect(ContentNormalizer.normalize(input)).toBe(output);
     });
 
     test('should move styles from paragraph to unstyled text', () => {
@@ -36,6 +34,41 @@ describe('normalize text settings', () => {
             '<span style="color: white; background-color: red;">one</span' +
         '></p>';
 
-        expect(normalize(input)).toBe(output);
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should wrap list content in paragraph', () => {
+        const input = '<ul><li style="line-height: 2;">lorem impsum</li></ul>';
+        const output = '<ul><li><p style="line-height: 2;"><span>lorem impsum</span></p></li></ul>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should keep order in list nodes', () => {
+        const input = '<ul><li style="line-height: 2;"><span style="font-weight: 700">lorem</span> impsum</li></ul>';
+        const output = '<ul>' +
+            '<li>' +
+                '<p style="line-height: 2;"><span style="font-weight: 700">lorem</span><span> impsum</span></p>' +
+            '</li>' +
+        '</ul>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should wrap non paragraph list content', () => {
+        const input = '<ul>' +
+            '<li style="line-height: 2;">' +
+                '<span style="font-weight: 700">lorem</span> impsum' +
+                '<p>paragraph text</p>' +
+            '</li>' +
+        '</ul>';
+        const output = '<ul>' +
+            '<li>' +
+            '<p style="line-height: 2;"><span style="font-weight: 700">lorem</span><span> impsum</span></p>' +
+            '<p style="line-height: 2;"><span>paragraph text</span></p>' +
+            '</li>' +
+        '</ul>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
     });
 });

package/lib/styles/content.css

@@ -2,6 +2,14 @@
     outline: none;
 }
 
+.zw-wysiwyg__placeholder:first-child:last-child::before {
+    content: attr(data-placeholder);
+    color: rgb(var(--zw-color-n70));
+    float: left;
+    height: 0;
+    pointer-events: none;
+}
+
 .zw-style {
     font-weight: var(--zw-font-weight, var(--zw-preset-font-weight));
     font-family: var(--zw-font-family, var(--zw-preset-font-family));
@@ -14,26 +22,26 @@
 @media (min-width: 1200px) {
 
     .zw-style {
-        font-size: var(--zw-desktop-font-size, var(--zw-preset-desktop-font-size));
-        text-align: var(--zw-desktop-text-align, var(--zw-preset-desktop-text-align));
-        line-height: var(--zw-desktop-line-height, var(--zw-preset-desktop-line-height));
+        font-size: var(--zw-font-size-desktop, var(--zw-preset-desktop-font-size));
+        text-align: var(--zw-text-align-desktop, var(--zw-preset-desktop-text-align));
+        line-height: var(--zw-line-height-desktop, var(--zw-preset-desktop-line-height));
     }
 }
 
 @media (min-width: 769px) and (max-width: 1199.98px) {
 
     .zw-style {
-        font-size: var(--zw-tablet-font-size, var(--zw-preset-tablet-font-size));
-        text-align: var(--zw-tablet-text-align, var(--zw-preset-tablet-text-align));
-        line-height: var(--zw-tablet-line-height, var(--zw-preset-tablet-line-height));
+        font-size: var(--zw-font-size-tablet, var(--zw-preset-tablet-font-size));
+        text-align: var(--zw-text-align-tablet, var(--zw-preset-tablet-text-align));
+        line-height: var(--zw-line-height-tablet, var(--zw-preset-tablet-line-height));
     }
 }
 
 @media (max-width: 768.98px) {
 
     .zw-style {
-        font-size: var(--zw-mobile-font-size, var(--zw-preset-mobile-font-size));
-        text-align: var(--zw-mobile-text-align, var(--zw-preset-mobile-text-align));
-        line-height: var(--zw-mobile-line-height, var(--zw-preset-mobile-line-height));
+        font-size: var(--zw-font-size-mobile, var(--zw-preset-mobile-font-size));
+        text-align: var(--zw-text-align-mobile, var(--zw-preset-mobile-text-align));
+        line-height: var(--zw-line-height-mobile, var(--zw-preset-mobile-line-height));
     }
 }

package/lib/styles/helpers/offsets.css

@@ -1,3 +1,19 @@
+.zw-margin-bottom--xxs {
+    margin-bottom: var(--zw-offset-xxs);
+}
+
 .zw-margin-bottom--xs {
     margin-bottom: var(--zw-offset-xs);
 }
+
+.zw-margin-bottom--sm {
+    margin-bottom: var(--zw-offset-sm);
+}
+
+.zw-margin-bottom--md {
+    margin-bottom: var(--zw-offset-md);
+}
+
+.zw-margin-right--xs {
+    margin-right: var(--zw-offset-xs);
+}

package/lib/styles/variables.css

@@ -8,13 +8,17 @@
     --zw-color-n80: 196, 196, 196;  /* #C4C4C4 */
     --zw-color-n85: 217, 217, 217;  /* #D9D9D9 */
     --zw-color-n90: 230, 230, 230;  /* #E6E6E6 */
+    --zw-color-n200: 194, 200, 209;  /* #C2C8D1 */
     --zw-color-black: 0, 0, 0;
     --zw-color-white: 255, 255, 255;
+    --zw-color-green: 59, 180, 74; /* #3BB44A */
+    --zw-color-red: 234, 58, 58; /* #EA3A3A */
 
     --zw-offset-xxs: 4px;
     --zw-offset-xs: 8px;
     --zw-offset-xsm: 12px;
     --zw-offset-sm: 16px;
+    --zw-offset-md: 24px;
 
     --zw-font-weight-thin: 400;
     --zw-font-weight-semibold: 500;
@@ -42,6 +46,8 @@ $builder-N90: #E6E6E6;
 $builder-N94: #F0F0F0;
 $builder-N96: #F5F5F5;
 $builder-N98: #FAFAFA;
+$builder-N200: #C2C8D1;
+$builder-R50: #EA3A3A;
 
 $font-size-xxs: 12px;
 $font-size-xs:  14px;

package/lib/utils/__tests__/__snapshots__/renderInlineSetting.test.js.snap

@@ -5,7 +5,7 @@ Array [
   "span",
   Object {
     "class": "zw-style",
-    "style": "--zw-mobile-font-size: 12px; --zw-tablet-font-size: 14px; --zw-desktop-font-size: 16px;",
+    "style": "--zw-mobile-font-size:12px;--zw-tablet-font-size:14px;--zw-desktop-font-size:16px;",
   },
   0,
 ]
@@ -16,7 +16,7 @@ Array [
   "span",
   Object {
     "class": "zw-style",
-    "style": "--zw-desktop-font-size: 16px;",
+    "style": "--zw-desktop-font-size:16px;",
   },
   0,
 ]
@@ -27,7 +27,7 @@ Array [
   "span",
   Object {
     "class": "zw-style",
-    "style": "--zw-font-size: 12px;",
+    "style": "--zw-font-size:12px;",
   },
   0,
 ]
@@ -35,6 +35,6 @@ Array [
 
 exports[`render settings should render unwrapped styles 1`] = `
 Object {
-  "style": "--zw-desktop-font-size: 16px;",
+  "style": "--zw-desktop-font-size:16px;",
 }
 `;

package/lib/utils/renderInlineSetting.js

@@ -4,7 +4,7 @@ export function renderInlineSetting(setting) {
 
         const property = name.replace(/_/g, '-');
 
-        return `${css} --zw-${property}: ${value};`.trimStart();
+        return `${css}--zw-${property}:${value};`;
     }, '');
 
     return style ? { style } : null;