@zipify/wysiwyg 1.0.0-dev.5 → 1.0.0-dev.50

package/lib/services/ContentNormalizer.js

@@ -1,42 +1,103 @@
+import { ContextWindow } from './ContextWidnow';
+
 export class ContentNormalizer {
-    static NORMALIZING_STYLE_BLACKLIST = ['text-align', 'line-height'];
+    static BLOCK_STYLES = ['text-align', 'line-height'];
+    static BLOCK_NODE_NAMES = ['P', 'H1', 'H2', 'H3', 'H4'];
+
+    static ASSIGN_STYLE_RULES = [
+        {
+            tag: /^(b|strong)$/,
+            ignore: /font-weight/
+        },
+        {
+            tag: /^i$/,
+            ignore: /font-style/
+        },
+        {
+            tag: /^s$/,
+            ignore: /text-decoration(.+)?/
+        }
+    ];
 
-    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._removeEmptyNodes, this._isBlockNode);
+        this._iterateNodes(this._normalizeListItems, (node) => node.tagName === 'LI');
+        this._iterateNodes(this._normalizeSettingsStructure, (node) => node.tagName === 'SPAN');
+        this._iterateNodes(this._normalizeStyles, (node) => node.tagName !== 'SPAN');
+
+        return this._dom.body.innerHTML;
     }
 
-    _iterateNodes(dom, handler, condition) {
-        const iterator = dom.createNodeIterator(dom.body, NodeFilter.SHOW_ELEMENT, {
-            acceptNode: (node) => condition(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
+    _iterateNodes(handler, condition = () => true) {
+        const iterator = this._dom.createNodeIterator(this._dom.body, NodeFilter.SHOW_ELEMENT, {
+            acceptNode: (node) => condition.call(this, node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
         });
         let currentNode = iterator.nextNode();
 
         while (currentNode) {
-            handler(currentNode);
+            handler.call(this, currentNode);
             currentNode = iterator.nextNode();
         }
     }
 
-    _normalizeStructure(element) {
-        const isTextChildren = Array.from(element.childNodes)
-            .every((node) => node.nodeType === Node.TEXT_NODE);
+    _removeEmptyNodes(node) {
+        if (node.childNodes.length === 0) {
+            node.remove();
+        }
+    }
+
+    _normalizeListItems(itemEl) {
+        const fragment = new DocumentFragment();
+        const children = Array.from(itemEl.childNodes);
+        let capturingParagraph;
 
-        if (isTextChildren) return;
+        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) {
+        if (this._isOnlyTextContent(element)) 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) {
@@ -54,8 +115,12 @@ export class ContentNormalizer {
     }
 
     _normalizeStyles(element) {
+        if (!this._isBlockNode(element) && this._isOnlyTextContent(element)) return;
+
         const properties = this._getMigratingStyles(element);
 
+        if (!properties.length) return;
+
         for (const node of element.childNodes) {
             const child = this._wrapTextNode(element, node);
 
@@ -65,16 +130,25 @@ export class ContentNormalizer {
         this._removeStyleProperties(element, properties);
     }
 
-    _getMigratingStyles(element) {
-        const blacklist = ContentNormalizer.NORMALIZING_STYLE_BLACKLIST;
+    _isOnlyTextContent(node) {
+        return Array.from(node.childNodes).every((node) => node.nodeType === Node.TEXT_NODE);
+    }
+
+    _isBlockNode(node) {
+        return ContentNormalizer.BLOCK_NODE_NAMES.includes(node.tagName);
+    }
+
+    _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;
@@ -83,7 +157,7 @@ export class ContentNormalizer {
     _wrapTextNode(parent, node) {
         if (node.nodeType !== Node.TEXT_NODE) return node;
 
-        const span = document.createElement('span');
+        const span = ContextWindow.document.createElement('span');
 
         span.append(node.cloneNode());
         parent.replaceChild(span, node);
@@ -93,14 +167,24 @@ export class ContentNormalizer {
 
     _assignElementProperties(target, source, properties) {
         for (const property of properties) {
-            if (target.style.getPropertyValue(property)) {
-                continue;
-            }
+            const value = source.style.getPropertyValue(property);
 
-            target.style.setProperty(property, source.style.getPropertyValue(property));
+            if (value && this._canAssignElementProperty(target, source, property)) {
+                target.style.setProperty(property, value);
+            }
         }
     }
 
+    _canAssignElementProperty(target, source, property) {
+        if (target.style.getPropertyValue(property)) return false;
+
+        return ContentNormalizer.ASSIGN_STYLE_RULES.every((rule) => {
+            if (!rule.tag.test(target.tagName.toLowerCase())) return true;
+
+            return !rule.ignore.test(property);
+        });
+    }
+
     _removeStyleProperties(element, properties) {
         for (const property of properties) {
             element.style.removeProperty(property);

package/lib/services/ContextWidnow.js

@@ -0,0 +1,23 @@
+export class ContextWindow {
+    static window = window;
+
+    static use(window) {
+        this.window = window;
+    }
+
+    static get document() {
+        return this.window.document;
+    }
+
+    static get body() {
+        return this.document.body;
+    }
+
+    static get head() {
+        return this.document.head;
+    }
+
+    static getComputedStyle(element) {
+        return this.window.getComputedStyle(element);
+    }
+}

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,76 @@ 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;">lorem impsum</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> impsum</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> impsum</p>' +
+            '<p style="line-height: 2;">paragraph text</p>' +
+            '</li>' +
+        '</ul>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should ignore empty nodes', () => {
+        const input = '<p>lorem ipsum 1</p><p></p><p>lorem ipsum 2</p>';
+        const output = '<p>lorem ipsum 1</p><p>lorem ipsum 2</p>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should not ignore setting', () => {
+        const input = '<p style="text-decoration-line: underline;">lorem ipsum</p>';
+        const output = '<p><span style="text-decoration-line: underline;">lorem ipsum</span></p>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should not assign font-weight to b tag', () => {
+        const input = '<p style="font-weight: 400;"><b>lorem ipsum</b></p>';
+        const output = '<p><b>lorem ipsum</b></p>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should not assign font-style to i tag', () => {
+        const input = '<p style="font-style: normal;"><i>lorem ipsum</i></p>';
+        const output = '<p><i>lorem ipsum</i></p>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should not assign text-decoration to s tag', () => {
+        const input = '<p style="text-decoration-line: initial;"><s>lorem ipsum</s></p>';
+        const output = '<p><s>lorem ipsum</s></p>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
     });
 });

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

@@ -1,4 +1,4 @@
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { FavoriteColors } from '../FavoriteColors';
 
 function createService({ colors, onUpdate }) {

package/lib/services/index.js

@@ -2,3 +2,4 @@ export { JsonSerializer } from './JsonSerializer';
 export { Storage } from './Storage';
 export { FavoriteColors } from './FavoriteColors';
 export { ContentNormalizer } from './ContentNormalizer';
+export { ContextWindow } from './ContextWidnow';

package/lib/styles/content.css

@@ -2,7 +2,15 @@
     outline: none;
 }
 
-.zw-style {
+.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.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));
@@ -13,27 +21,108 @@
 
 @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));
+    .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-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));
+    .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-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));
+    .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-text-align));
+        line-height: var(--zw-line-height-mobile, var(--zw-preset-mobile-line-height));
     }
 }
+
+
+/* ProseMirror styles */
+
+
+.ProseMirror {
+    position: relative;
+}
+
+.ProseMirror {
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    white-space: break-spaces;
+    -webkit-font-variant-ligatures: none;
+    font-variant-ligatures: none;
+    font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
+}
+
+.ProseMirror [contenteditable="false"] {
+    white-space: normal;
+}
+
+.ProseMirror [contenteditable="false"] [contenteditable="true"] {
+    white-space: pre-wrap;
+}
+
+.ProseMirror pre {
+    white-space: pre-wrap;
+}
+
+img.ProseMirror-separator {
+    display: inline !important;
+    border: none !important;
+    margin: 0 !important;
+    width: 1px !important;
+    height: 1px !important;
+}
+
+.ProseMirror-gapcursor {
+    display: none;
+    pointer-events: none;
+    position: absolute;
+    margin: 0;
+}
+
+.ProseMirror-gapcursor::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: -2px;
+    width: 20px;
+    border-top: 1px solid #000;
+    animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
+}
+
+@keyframes ProseMirror-cursor-blink {
+
+    to {
+        visibility: hidden;
+    }
+}
+
+.ProseMirror-hideselection *::selection {
+    background: transparent;
+}
+
+.ProseMirror-hideselection *::-moz-selection {
+    background: transparent;
+}
+
+.ProseMirror-hideselection * {
+    caret-color: transparent;
+}
+
+.ProseMirror-focused .ProseMirror-gapcursor {
+    display: block;
+}
+
+.tippy-box[data-animation=fade][data-state=hidden] {
+    opacity: 0
+}

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/__tests__/convertAlignment.test.js

@@ -0,0 +1,16 @@
+import { convertAlignment } from '../convertAlignment';
+import { Alignments } from '../../enums';
+
+describe('convert alignment', () => {
+    test('should try convert non supported value', () => {
+        expect(convertAlignment('start')).toBe(Alignments.LEFT);
+    });
+
+    test('should not change supported value', () => {
+        expect(convertAlignment('center')).toBe(Alignments.CENTER);
+    });
+
+    test('should return null if cannot convert', () => {
+        expect(convertAlignment('test-test')).toBe(null);
+    });
+});

package/lib/utils/__tests__/convertFontSize.test.js

@@ -0,0 +1,21 @@
+import { convertFontSize } from '../convertFontSize';
+
+describe('convert font size', () => {
+    const createWrapper = ({ fontSize }) => {
+        const wrapperEl = document.createElement('div');
+
+        wrapperEl.style.fontSize = `${fontSize}px`;
+
+        return wrapperEl;
+    };
+
+    test('should format px values', () => {
+        expect(convertFontSize('20px')).toBe(20);
+    });
+
+    test('should parse em value', () => {
+        const wrapperEl = createWrapper({ fontSize: 24 });
+
+        expect(convertFontSize('1.5em', wrapperEl)).toBe(36);
+    });
+});

package/lib/utils/__tests__/convertLineHeight.test.js

@@ -0,0 +1,21 @@
+import { convertLineHeight } from '../convertLineHeight';
+
+describe('convert line height', () => {
+    const createWrapper = ({ fontSize }) => {
+        const wrapperEl = document.createElement('div');
+
+        wrapperEl.style.fontSize = `${fontSize}px`;
+
+        return wrapperEl;
+    };
+
+    test('should allow relative values', () => {
+        expect(convertLineHeight('1.2')).toBe('1.2');
+    });
+
+    test('should convert px to relative', () => {
+        const wrapperEl = createWrapper({ fontSize: 20 });
+
+        expect(convertLineHeight('24px', wrapperEl)).toBe('1.20');
+    });
+});

package/lib/utils/convertAlignment.js

@@ -0,0 +1,12 @@
+import { Alignments } from '../enums';
+
+const MAPPING = {
+    start: Alignments.LEFT,
+    end: Alignments.RIGHT
+};
+
+export function convertAlignment(alignment) {
+    const mapped = MAPPING[alignment] || alignment;
+
+    return Alignments.values.includes(mapped) ? mapped : null;
+}

package/lib/utils/convertColor.js

@@ -1,4 +1,4 @@
-import { ColorModel } from 'zipify-colorpicker';
+import { ColorModel } from '@zipify/colorpicker';
 
 export function convertColor(raw) {
     const model = ColorModel.create(raw);

package/lib/utils/convertFontSize.js

@@ -0,0 +1,8 @@
+export function convertFontSize(value, wrapperEl) {
+    if (!value.includes('em')) return parseInt(value);
+
+    const containerValue = window.getComputedStyle(wrapperEl).fontSize;
+    const size = parseFloat(value) * parseFloat(containerValue);
+
+    return Math.round(size);
+}