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

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;
 }
 
@@ -734,9 +734,6 @@ $font-height--xs: 1.33;
 $font-height--sm: 1.43;
 $font-height--md: 1.72;
  */
-.zw-wysiwyg [contenteditable] {
-    outline: none;
-}
 .zw-wysiwyg__placeholder:first-child:last-child::before {
     content: attr(data-placeholder);
     color: rgb(var(--zw-color-n70));
@@ -783,6 +780,8 @@ $font-height--md: 1.72;
 /* ProseMirror styles */
 .ProseMirror {
     position: relative;
+    outline: none;
+    overflow: auto;
 }
 .ProseMirror {
     word-wrap: break-word;

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
 );
@@ -19588,7 +19588,9 @@ const _ContentNormalizer = class {
       return;
     const fragment = new DocumentFragment();
     const children = Array.from(parentElement.childNodes);
-    let capturingParagraph = document.createElement("p");
+    const parentTemplate = parentElement.cloneNode(true);
+    parentTemplate.innerHTML = "";
+    let capturingParagraph = parentTemplate.cloneNode();
     const append2 = (node) => {
       this._assignElementProperties(node, parentElement, _ContentNormalizer.BLOCK_STYLES);
       fragment.append(node);
@@ -19596,7 +19598,7 @@ const _ContentNormalizer = class {
     for (const child of children) {
       if (child.tagName === "BR") {
         append2(capturingParagraph);
-        capturingParagraph = document.createElement("p");
+        capturingParagraph = parentTemplate.cloneNode();
         continue;
       }
       capturingParagraph.append(child);

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/services/ContentNormalizer.js

@@ -206,7 +206,10 @@ export class ContentNormalizer {
 
         const fragment = new DocumentFragment();
         const children = Array.from(parentElement.childNodes);
-        let capturingParagraph = document.createElement('p');
+        const parentTemplate = parentElement.cloneNode(true);
+
+        parentTemplate.innerHTML = '';
+        let capturingParagraph = parentTemplate.cloneNode();
 
         const append = (node) => {
             this._assignElementProperties(node, parentElement, ContentNormalizer.BLOCK_STYLES);
@@ -216,7 +219,7 @@ export class ContentNormalizer {
         for (const child of children) {
             if (child.tagName === 'BR') {
                 append(capturingParagraph);
-                capturingParagraph = document.createElement('p');
+                capturingParagraph = parentTemplate.cloneNode();
                 continue;
             }
 

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

@@ -154,4 +154,11 @@ describe('normalize text content', () => {
 
         expect(ContentNormalizer.normalize(input)).toBe(output);
     });
+
+    test('should duplicate parent tag on normalize br', () => {
+        const input = '<h1><br></h1>';
+        const output = '<h1><br></h1>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
 });

package/lib/styles/content.css

@@ -1,7 +1,3 @@
-.zw-wysiwyg [contenteditable] {
-    outline: none;
-}
-
 .zw-wysiwyg__placeholder:first-child:last-child::before {
     content: attr(data-placeholder);
     color: rgb(var(--zw-color-n70));
@@ -59,6 +55,8 @@
 
 .ProseMirror {
     position: relative;
+    outline: none;
+    overflow: auto;
 }
 
 .ProseMirror {

package/package.json

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