@zipify/wysiwyg 1.0.0-dev.56 → 1.0.0-dev.59

package/example/tooltip/Tooltip.js

@@ -25,7 +25,7 @@ export class Tooltip {
     static get popperStyles() {
         return {
             willChange: 'transform',
-            zIndex: 10001
+            zIndex: 999999
         };
     }
 

package/lib/Wysiwyg.vue

@@ -112,7 +112,7 @@ export default {
 
     emits: [
         'input',
-        'updateFavoriteColors'
+        'update-favorite-colors'
     ],
 
     setup(props, { emit }) {
@@ -162,7 +162,7 @@ export default {
 
         const favoriteColors = new FavoriteColors({
             listRef: toRef(props, 'favoriteColors'),
-            triggerUpdate: (colors) => emit('updateFavoriteColors', colors)
+            triggerUpdate: (colors) => emit('update-favorite-colors', colors)
         });
 
         provide(InjectionTokens.EDITOR, editor);

package/lib/extensions/list/List.js

@@ -80,12 +80,11 @@ export const List = Node.create({
                     return;
                 }
 
-                return chain().removeList()._addList(type).run();
+                return chain().applyDefaultPreset()._addList(type).run();
             }),
 
             _addList: createCommand(({ chain }, type) => {
                 return chain()
-                    .removePreset()
                     .toggleList(NodeTypes.LIST, NodeTypes.LIST_ITEM)
                     .setBlockAttributes('bullet', { type })
                     .run();

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

@@ -14,7 +14,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -49,7 +51,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -66,7 +70,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -137,7 +143,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -154,7 +162,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {

package/lib/services/ContentNormalizer.js

@@ -1,6 +1,7 @@
 import { ContextWindow } from './ContextWidnow';
 
 export class ContentNormalizer {
+    static PARSER = new DOMParser();
     static BLOCK_STYLES = ['text-align', 'line-height'];
     static BLOCK_NODE_NAMES = ['P', 'H1', 'H2', 'H3', 'H4'];
 
@@ -20,11 +21,17 @@ export class ContentNormalizer {
     ];
 
     static normalize(content) {
-        return new ContentNormalizer(content).normalize();
+        const options = {
+            content,
+            parser: ContentNormalizer.PARSER
+        };
+
+        return new ContentNormalizer(options).normalize();
     }
 
-    constructor(content) {
+    constructor({ content, parser }) {
         this._content = content;
+        this._parser = parser;
         this._dom = null;
     }
 
@@ -36,7 +43,7 @@ export class ContentNormalizer {
     }
 
     _normalizeTextContent() {
-        this._dom = new DOMParser().parseFromString(this._content, 'text/html');
+        this._dom = this._parser.parseFromString(this._content, 'text/html');
 
         this._iterateNodes(this._removeEmptyNodes, this._isBlockNode);
         this._iterateNodes(this._normalizeListItems, (node) => node.tagName === 'LI');
@@ -59,7 +66,7 @@ export class ContentNormalizer {
     }
 
     _removeEmptyNodes(node) {
-        if (node.childNodes.length === 0) {
+        if (!node.innerHTML.replace(/\n/g, '').trim()) {
             node.remove();
         }
     }
@@ -74,6 +81,8 @@ export class ContentNormalizer {
             fragment.append(node);
         };
 
+        this._assignElementProperties(itemEl, itemEl.parentElement, ContentNormalizer.BLOCK_STYLES);
+
         for (const node of children) {
             if (node.tagName === 'P') {
                 append(node);

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

@@ -79,6 +79,20 @@ describe('normalize text content', () => {
         expect(ContentNormalizer.normalize(input)).toBe(output);
     });
 
+    test('should ignore space only 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 ignore newline chapters only nodes', () => {
+        const input = '<p>lorem ipsum 1</p><p>\n</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>';
@@ -106,4 +120,11 @@ describe('normalize text content', () => {
 
         expect(ContentNormalizer.normalize(input)).toBe(output);
     });
+
+    test('should assign block styles from list to paragraph', () => {
+        const input = '<ul style="line-height: 2;"><li>lorem ipsum</li></ul>';
+        const output = '<ul style="line-height: 2;"><li><p style="line-height: 2;">lorem ipsum</p></li></ul>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "1.0.0-dev.56",
+  "version": "1.0.0-dev.59",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "repository": {
@@ -14,11 +14,14 @@
     "url": "https://github.com/ZipifyApps/ZipifyWysiwyg/issues"
   },
   "scripts": {
-    "lib:build": "vite build --config ./config/vite/lib.config.js",
+    "lib:pre-build": "npm run lint:js && npm run lint:css && npm run test:unit",
+    "lib:build": "npm run lib:pre-build && vite build --config ./config/vite/lib.config.js",
     "lib:release": "export $(cat ./.env | xargs) && npm run lib:build && release-it",
     "example:start": "NODE_ENV=development vite serve --config ./config/vite/example.config.js",
     "example:build": "NODE_ENV=production vite build --config ./config/vite/example.config.js",
     "test:unit": "jest .",
+    "lint:js": "eslint ./lib/**/*.{js,vue}",
+    "lint:css": "stylelint ./lib/**/*.{css,vue}",
     "optimize-svg": "svgo --config ./config/svgo.js",
     "gzip": "gzipper compress",
     "prepare": "husky install"