@zipify/wysiwyg 1.0.0-dev.95 → 1.0.0-dev.98

package/dist/wysiwyg.css

@@ -561,18 +561,18 @@
     flex-direction: column;
 }
 
-.zw-line-height-control__modal[data-v-532367c1] {
+.zw-line-height-control__modal[data-v-9ea28b80] {
     padding: var(--zw-offset-sm);
 }
-.zw-line-height-control__row[data-v-532367c1] {
+.zw-line-height-control__row[data-v-9ea28b80] {
     display: flex;
     align-items: center;
 }
-.zw-line-height-control__range[data-v-532367c1] {
+.zw-line-height-control__range[data-v-9ea28b80] {
     width: 156px;
 }
-.zw-line-height-control__field[data-v-532367c1] {
-    width: 52px;
+.zw-line-height-control__field[data-v-9ea28b80] {
+    width: 64px;
     margin-left: var(--zw-offset-sm);
 }
 
@@ -851,17 +851,17 @@ to {
     position: relative;
 }
 .zw-margin-bottom--xxs {
-    margin-bottom: var(--zw-offset-xxs);
+    margin-bottom: var(--zw-offset-xxs) !important;
 }
 .zw-margin-bottom--xs {
-    margin-bottom: var(--zw-offset-xs);
+    margin-bottom: var(--zw-offset-xs) !important;
 }
 .zw-margin-bottom--sm {
-    margin-bottom: var(--zw-offset-sm);
+    margin-bottom: var(--zw-offset-sm) !important;
 }
 .zw-margin-bottom--md {
-    margin-bottom: var(--zw-offset-md);
+    margin-bottom: var(--zw-offset-md) !important;
 }
 .zw-margin-right--xs {
-    margin-right: var(--zw-offset-xs);
+    margin-right: var(--zw-offset-xs) !important;
 }

package/dist/wysiwyg.mjs

@@ -19455,6 +19455,7 @@ const _ContentNormalizer = class {
   }
   _normalizeTextContent() {
     this._dom = this._parser.parseFromString(this._content.replace(/(\r)?\n/g, ""), "text/html");
+    this._removeComments();
     this._iterateNodes(this._normalizeBreakLines, (node) => node.tagName === "BR");
     this._iterateNodes(this._removeEmptyNodes, this._isBlockNode);
     this._iterateNodes(this._normalizeListItems, (node) => node.tagName === "LI");
@@ -19462,10 +19463,17 @@ const _ContentNormalizer = class {
     this._iterateNodes(this._normalizeStyles, (node) => node.tagName !== "SPAN");
     return this._dom.body.innerHTML;
   }
+  _removeComments() {
+    const iterator = this._dom.createNodeIterator(this._dom.body, NodeFilter.SHOW_COMMENT);
+    this._runIterator(iterator, (node) => node.remove());
+  }
   _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
     });
+    this._runIterator(iterator, handler);
+  }
+  _runIterator(iterator, handler) {
     let currentNode = iterator.nextNode();
     while (currentNode) {
       handler.call(this, currentNode);
@@ -19473,8 +19481,7 @@ const _ContentNormalizer = class {
     }
   }
   _removeEmptyNodes(node) {
-    const html2 = node.innerHTML.replace(/ /g, "").trim();
-    if (!html2)
+    if (!node.innerHTML.trim())
       node.remove();
   }
   _normalizeListItems(itemEl) {
@@ -21788,7 +21795,7 @@ var __component__$c = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$c,
   false,
   __vue2_injectStyles$c,
-  "532367c1",
+  "9ea28b80",
   null,
   null
 );

package/example/ExampleApp.vue

@@ -179,4 +179,6 @@ p, h1, h2, h3, h4 {
     margin-top: 0.3em;
     margin-bottom: 0.3em;
 }
+
+*, *::before, *::after { box-sizing: border-box }
 </style>

package/lib/components/toolbar/controls/LineHeightControl.vue

@@ -96,7 +96,7 @@ export default {
 }
 
 .zw-line-height-control__field {
-    width: 52px;
+    width: 64px;
     margin-left: var(--zw-offset-sm);
 }
 </style>

package/lib/services/ContentNormalizer.js

@@ -40,6 +40,7 @@ export class ContentNormalizer {
     _normalizeTextContent() {
         this._dom = this._parser.parseFromString(this._content.replace(/(\r)?\n/g, ''), 'text/html');
 
+        this._removeComments();
         this._iterateNodes(this._normalizeBreakLines, (node) => node.tagName === 'BR');
         this._iterateNodes(this._removeEmptyNodes, this._isBlockNode);
         this._iterateNodes(this._normalizeListItems, (node) => node.tagName === 'LI');
@@ -49,10 +50,21 @@ export class ContentNormalizer {
         return this._dom.body.innerHTML;
     }
 
+    _removeComments() {
+        const iterator = this._dom.createNodeIterator(this._dom.body, NodeFilter.SHOW_COMMENT);
+
+        this._runIterator(iterator, (node) => node.remove());
+    }
+
     _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
         });
+
+        this._runIterator(iterator, handler);
+    }
+
+    _runIterator(iterator, handler) {
         let currentNode = iterator.nextNode();
 
         while (currentNode) {
@@ -62,9 +74,7 @@ export class ContentNormalizer {
     }
 
     _removeEmptyNodes(node) {
-        const html = node.innerHTML.replace(/ /g, '').trim();
-
-        if (!html) node.remove();
+        if (!node.innerHTML.trim()) node.remove();
     }
 
     _normalizeListItems(itemEl) {

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

@@ -92,13 +92,6 @@ describe('normalize text content', () => {
         expect(ContentNormalizer.normalize(input)).toBe(output);
     });
 
-    test('should ignore non-breaking space only nodes', () => {
-        const input = '<p>lorem ipsum 1</p><p>&nbsp;</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>';
@@ -161,4 +154,11 @@ describe('normalize text content', () => {
 
         expect(ContentNormalizer.normalize(input)).toBe(output);
     });
+
+    test('should remove comments', () => {
+        const input = '<p>lorem ipsum</p><p style="color: red;">Hello <!-- world --></p>';
+        const output = '<p>lorem ipsum</p><p><span style="color: red;">Hello </span></p>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
 });

package/lib/styles/helpers/offsets.css

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "1.0.0-dev.95",
+  "version": "1.0.0-dev.98",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "repository": {