@zipify/wysiwyg 1.0.0-dev.94 → 1.0.0-dev.97

package/dist/wysiwyg.css

@@ -240,7 +240,7 @@
     --zw-range-thumb-box-shadow: 0 0 0 12px rgba(240, 240, 240, 0.15);
 }
 
-.zw-number-field[data-v-746d73f1] {
+.zw-number-field[data-v-2e210d91] {
     --border-color: rgb(var(--zw-color-n60));
     --text-color: rgb(var(--zw-color-n85));
     --buttons-color: rgb(var(--zw-color-n70));
@@ -250,16 +250,16 @@
     align-items: stretch;
     display: flex;
 }
-.zw-number-field[data-v-746d73f1]:hover {
+.zw-number-field[data-v-2e210d91]:hover {
     --border-color: rgb(var(--zw-color-n80));
     --text-color: rgb(var(--zw-color-n85));
 }
-.zw-number-field[data-v-746d73f1]:focus,
-.zw-number-field[data-v-746d73f1]:focus-within {
+.zw-number-field[data-v-2e210d91]:focus,
+.zw-number-field[data-v-2e210d91]:focus-within {
     --border-color: rgb(var(--zw-color-white));
     --text-color: rgb(var(--zw-color-white));
 }
-.zw-number-field__input[data-v-746d73f1] {
+.zw-number-field__input[data-v-2e210d91] {
     color: var(--text-color);
     background-color: rgb(var(--zw-color-n15));
     border: 0;
@@ -270,60 +270,60 @@
     font-size: var(--zw-font-size-xs);
     -moz-appearance: textfield;
 }
-.zw-number-field__buttons[data-v-746d73f1] {
+.zw-number-field__buttons[data-v-2e210d91] {
     display: none;
     flex-direction: column;
     height: 100%;
 }
-.zw-number-field:hover .zw-number-field__buttons[data-v-746d73f1],
-.zw-number-field:focus .zw-number-field__buttons[data-v-746d73f1],
-.zw-number-field:focus-within .zw-number-field__buttons[data-v-746d73f1] {
+.zw-number-field:hover .zw-number-field__buttons[data-v-2e210d91],
+.zw-number-field:focus .zw-number-field__buttons[data-v-2e210d91],
+.zw-number-field:focus-within .zw-number-field__buttons[data-v-2e210d91] {
     display: flex;
 }
-.zw-number-field__input[data-v-746d73f1]::placeholder {
+.zw-number-field__input[data-v-2e210d91]::placeholder {
     color: var(--text-color);
 }
-.zw-number-field__input[data-v-746d73f1]::-webkit-outer-spin-button,
-.zw-number-field__input[data-v-746d73f1]::-webkit-inner-spin-button {
+.zw-number-field__input[data-v-2e210d91]::-webkit-outer-spin-button,
+.zw-number-field__input[data-v-2e210d91]::-webkit-inner-spin-button {
     color: var(--text-color);
     -webkit-appearance: none;
 }
-.zw-number-field__controls[data-v-746d73f1] {
+.zw-number-field__controls[data-v-2e210d91] {
     min-width: var(--zw-offset-sm);
 }
-.zw-number-field--disabled[data-v-746d73f1] {
+.zw-number-field--disabled[data-v-2e210d91] {
     opacity: 0.5;
 }
-.zw-number-field--disabled[data-v-746d73f1],
-.zw-number-field--disabled .zw-number-field__input[data-v-746d73f1] {
+.zw-number-field--disabled[data-v-2e210d91],
+.zw-number-field--disabled .zw-number-field__input[data-v-2e210d91] {
     cursor: not-allowed;
 }
-.zw-number-field__increment-button[data-v-746d73f1],
-.zw-number-field__decrement-button[data-v-746d73f1] {
+.zw-number-field__increment-button[data-v-2e210d91],
+.zw-number-field__decrement-button[data-v-2e210d91] {
     width: 100%;
     height: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
 }
-.zw-number-field__increment-button[data-v-746d73f1]::after,
-.zw-number-field__decrement-button[data-v-746d73f1]::after {
+.zw-number-field__increment-button[data-v-2e210d91]::after,
+.zw-number-field__decrement-button[data-v-2e210d91]::after {
     content: "";
     border-left: 3px solid transparent;
     border-right: 3px solid transparent;
 }
-.zw-number-field__increment-button[data-v-746d73f1]::after {
+.zw-number-field__increment-button[data-v-2e210d91]::after {
     border-bottom: 3px solid var(--buttons-color);
 }
-.zw-number-field__decrement-button[data-v-746d73f1]::after {
+.zw-number-field__decrement-button[data-v-2e210d91]::after {
     border-top: 3px solid var(--buttons-color);
 }
-.zw-number-field__increment-button[data-v-746d73f1]:hover,
-.zw-number-field__decrement-button[data-v-746d73f1]:hover {
+.zw-number-field__increment-button[data-v-2e210d91]:hover,
+.zw-number-field__decrement-button[data-v-2e210d91]:hover {
     background-color: rgb(var(--zw-color-n20));
     --buttons-color: rgb(var(--zw-color-white));
 }
-.zw-number-field__units[data-v-746d73f1] {
+.zw-number-field__units[data-v-2e210d91] {
     color: rgb(var(--zw-color-n70));
     font-size: var(--zw-font-size-xs);
     line-height: var(--zw-line-height-md);
@@ -331,8 +331,8 @@
     display: inline-block;
     width: 100%;
 }
-.zw-number-field:hover .zw-number-field__units[data-v-746d73f1],
-.zw-number-field:focus .zw-number-field__units[data-v-746d73f1] {
+.zw-number-field:hover .zw-number-field__units[data-v-2e210d91],
+.zw-number-field:focus .zw-number-field__units[data-v-2e210d91] {
     display: none;
 }
 
@@ -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

@@ -19256,7 +19256,7 @@ var render$A = function __render__10() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("div", {
+  return _c("label", {
     staticClass: "zw-number-field",
     "class": _vm.elementClasses
   }, [_c("input", {
@@ -19379,7 +19379,7 @@ var __component__$A = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$A,
   false,
   __vue2_injectStyles$A,
-  "746d73f1",
+  "2e210d91",
   null,
   null
 );
@@ -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);
@@ -21788,7 +21796,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/base/NumberField.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="elementClasses" class="zw-number-field">
+    <label :class="elementClasses" class="zw-number-field">
         <input
             type="number"
             class="zw-number-field__input"
@@ -32,7 +32,7 @@
                 {{ units }}
             </p>
         </div>
-    </div>
+    </label>
 </template>
 
 <script>

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) {

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

@@ -161,4 +161,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.94",
+  "version": "1.0.0-dev.97",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "repository": {