@zipify/wysiwyg 1.0.0-dev.16 → 1.0.0-dev.19

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,105 @@
 @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));
     }
 }
+
+/* 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/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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "1.0.0-dev.16",
+  "version": "1.0.0-dev.19",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.js",
   "repository": {
@@ -29,8 +29,10 @@
     "@tiptap/extension-document": "^2.0.0-beta.17",
     "@tiptap/extension-heading": "^2.0.0-beta.29",
     "@tiptap/extension-history": "^2.0.0-beta.26",
+    "@tiptap/extension-link": "^2.0.0-beta.43",
     "@tiptap/extension-list-item": "^2.0.0-beta.23",
     "@tiptap/extension-paragraph": "^2.0.0-beta.26",
+    "@tiptap/extension-placeholder": "^2.0.0-beta.53",
     "@tiptap/extension-superscript": "^2.0.0-beta.13",
     "@tiptap/extension-text": "^2.0.0-beta.17",
     "@tiptap/vue-2": "^2.0.0-beta.84",
@@ -41,20 +43,20 @@
     "zipify-colorpicker": "*"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.6",
-    "@babel/eslint-parser": "^7.18.2",
-    "@babel/plugin-transform-runtime": "^7.18.6",
-    "@babel/preset-env": "^7.18.6",
-    "@babel/runtime": "^7.18.6",
+    "@babel/core": "^7.18.9",
+    "@babel/eslint-parser": "^7.18.9",
+    "@babel/plugin-transform-runtime": "^7.18.9",
+    "@babel/preset-env": "^7.18.9",
+    "@babel/runtime": "^7.18.9",
     "@vue/composition-api": "^1.7.0",
     "@vue/test-utils": "^1.3.0",
     "@vue/vue2-jest": "^28.0.1",
-    "babel-jest": "^28.1.2",
+    "babel-jest": "^28.1.3",
     "babel-loader": "^8.2.5",
     "css-loader": "^6.7.1",
     "eslint": "^8.20.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-vue": "^9.2.0",
+    "eslint-plugin-vue": "^9.3.0",
     "gzipper": "^7.1.0",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.1",
@@ -70,7 +72,7 @@
     "vue": "^2.6.14",
     "vue-loader": "^15.9.8",
     "vue-template-compiler": "^2.6.14",
-    "webpack": "^5.73.0",
+    "webpack": "^5.74.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.9.3",