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

package/dist/wysiwyg.css

@@ -369,11 +369,11 @@
     overscroll-behavior: contain;
 }
 
-.zw-field[data-v-7bbd0125] {
+.zw-field[data-v-20ee36c3] {
     display: flex;
     flex-direction: column;
 }
-.zw-field__input[data-v-7bbd0125] {
+.zw-field__input[data-v-20ee36c3] {
     --border-color: rgb(var(--zw-color-n60));
     --text-color: rgb(var(--zw-color-n85));
 
@@ -384,49 +384,53 @@
     outline: none;
     padding: 6px;
     line-height: var(--zw-line-height-xxs);
+    transition: 0.1s border ease-out, 0.1s color ease-out;
+    will-change: border, color;
 }
-.zw-field__input[data-v-7bbd0125]:hover {
+.zw-field__input[data-v-20ee36c3]:hover {
     --border-color: rgb(var(--zw-color-n80));
     --text-color: rgb(var(--zw-color-n85));
 }
-.zw-field__input[data-v-7bbd0125]:focus,
-.zw-field__input[data-v-7bbd0125]:focus-within {
+.zw-field__input[data-v-20ee36c3]:focus,
+.zw-field__input[data-v-20ee36c3]:focus-within {
     --border-color: rgb(var(--zw-color-white));
     --text-color: rgb(var(--zw-color-white));
 }
-.zw-field__label[data-v-7bbd0125] {
+.zw-field__label[data-v-20ee36c3] {
     display: inline-block;
     font-size: var(--zw-font-size-xxs);
     padding-bottom: var(--zw-offset-xxs);
     line-height: var(--zw-line-height-xxs);
 }
-.zw-field__label--error[data-v-7bbd0125] {
+.zw-field__label--error[data-v-20ee36c3] {
     font-size: var(--zw-font-size-xxs);
     margin: var(--zw-offset-xxs) 0 0;
     color: rgb(var(--zw-color-red));
 }
 
-.zw-checkbox[data-v-15e487f5] {
+.zw-checkbox[data-v-c9d1da12] {
     display: inline-flex;
     align-items: center;
     position: relative;
     cursor: pointer;
     padding: var(--zw-offset-xxs) var(--zw-offset-xxs) var(--zw-offset-xxs) 0;
 }
-.zw-checkbox__field + .zw-checkbox__indicator[data-v-15e487f5] {
+.zw-checkbox__field + .zw-checkbox__indicator[data-v-c9d1da12] {
     color: var(--zw-color-n200);
     box-shadow: inset 0 0 0 2px currentColor;
 }
-.zw-checkbox:hover .zw-checkbox__indicator[data-v-15e487f5] {
+.zw-checkbox:hover .zw-checkbox__indicator[data-v-c9d1da12],
+.zw-checkbox:focus .zw-checkbox__indicator[data-v-c9d1da12],
+.zw-checkbox:focus-within .zw-checkbox__indicator[data-v-c9d1da12] {
     box-shadow: inset 0 0 0 2px rgb(var(--zw-color-green));
 }
-.zw-checkbox__field:checked + .zw-checkbox__indicator[data-v-15e487f5] {
+.zw-checkbox__field:checked + .zw-checkbox__indicator[data-v-c9d1da12] {
     color: rgb(var(--zw-color-green))
 }
-.zw-checkbox .zw-checkbox__field:checked + .zw-checkbox__indicator[data-v-15e487f5] {
+.zw-checkbox .zw-checkbox__field:checked + .zw-checkbox__indicator[data-v-c9d1da12] {
     background-color: rgb(var(--zw-color-green));
 }
-.zw-checkbox .zw-checkbox__indicator[data-v-15e487f5]::after {
+.zw-checkbox .zw-checkbox__indicator[data-v-c9d1da12]::after {
     content: "";
     display: block;
     height: 16px;
@@ -438,16 +442,16 @@
     background-size: 16px;
     background-position: center center;
 }
-.zw-checkbox__field:not(:checked) + .zw-checkbox__indicator[data-v-15e487f5]::after {
+.zw-checkbox__field:not(:checked) + .zw-checkbox__indicator[data-v-c9d1da12]::after {
     transform: scale(0);
 }
-.zw-checkbox__field[data-v-15e487f5] {
+.zw-checkbox__field[data-v-c9d1da12] {
     position: absolute;
     opacity: 0;
     height: 0;
     width: 0;
 }
-.zw-checkbox__label[data-v-15e487f5] {
+.zw-checkbox__label[data-v-c9d1da12] {
     font-size: var(--zw-font-size-xs);
 }
 
@@ -587,32 +591,34 @@
     display: flex;
 }
 
-.zw-link-modal-header[data-v-7dbfe03f] {
+.zw-link-modal-header[data-v-0a202ba4] {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: var(--zw-offset-sm);
     border-bottom: 2px solid rgb(var(--zw-color-n5));
 }
-.zw-link-modal-header__title[data-v-7dbfe03f] {
+.zw-link-modal-header__title[data-v-0a202ba4] {
     text-transform: uppercase;
     font-weight: var(--zw-font-weight-semibold);
     font-size: var(--zw-font-size-xxs);
     color: rgb(var(--zw-color-white));
 }
-.zw-link-modal-header__unlink-icon[data-v-7dbfe03f] {
+.zw-link-modal-header__unlink-icon[data-v-0a202ba4] {
     margin-right: var(--zw-offset-xxs);
 }
-.zw-link-modal-header__unlink-button[data-v-7dbfe03f] {
+.zw-link-modal-header__unlink-button[data-v-0a202ba4] {
     color: rgb(var(--zw-color-n80));
     font-size: var(--zw-font-size-xxs);
-    transition: 0.1s opacity ease-out;
-    will-change: opacity;
+    transition: 0.1s opacity ease-out, 0.1s color ease-out;
+    will-change: opacity, color;
 }
-.zw-link-modal-header__unlink-button[data-v-7dbfe03f]:disabled {
+.zw-link-modal-header__unlink-button[data-v-0a202ba4]:disabled {
     opacity: 0.35;
 }
-.zw-link-modal-header__unlink-button[data-v-7dbfe03f]:hover {
+.zw-link-modal-header__unlink-button[data-v-0a202ba4]:focus,
+.zw-link-modal-header__unlink-button[data-v-0a202ba4]:focus-within,
+.zw-link-modal-header__unlink-button[data-v-0a202ba4]:hover {
     color: rgb(var(--zw-color-white));
 }
 
@@ -728,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));
@@ -777,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

@@ -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);
@@ -19903,7 +19905,7 @@ var __component__$y = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$y,
   false,
   __vue2_injectStyles$y,
-  "7bbd0125",
+  "20ee36c3",
   null,
   null
 );
@@ -19965,7 +19967,7 @@ var __component__$x = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$x,
   false,
   __vue2_injectStyles$x,
-  "15e487f5",
+  "c9d1da12",
   null,
   null
 );
@@ -22045,7 +22047,7 @@ var __component__$9 = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$9,
   false,
   __vue2_injectStyles$9,
-  "7dbfe03f",
+  "0a202ba4",
   null,
   null
 );

package/lib/components/base/Checkbox.vue

@@ -45,7 +45,9 @@ export default {
     box-shadow: inset 0 0 0 2px currentColor;
 }
 
-.zw-checkbox:hover .zw-checkbox__indicator {
+.zw-checkbox:hover .zw-checkbox__indicator,
+.zw-checkbox:focus .zw-checkbox__indicator,
+.zw-checkbox:focus-within .zw-checkbox__indicator {
     box-shadow: inset 0 0 0 2px rgb(var(--zw-color-green));
 }
 

package/lib/components/base/TextField.vue

@@ -78,6 +78,8 @@ export default {
     outline: none;
     padding: 6px;
     line-height: var(--zw-line-height-xxs);
+    transition: 0.1s border ease-out, 0.1s color ease-out;
+    will-change: border, color;
 }
 
 .zw-field__input:hover {

package/lib/components/toolbar/controls/link/LinkControlHeader.vue

@@ -53,14 +53,16 @@ export default {
 .zw-link-modal-header__unlink-button {
     color: rgb(var(--zw-color-n80));
     font-size: var(--zw-font-size-xxs);
-    transition: 0.1s opacity ease-out;
-    will-change: opacity;
+    transition: 0.1s opacity ease-out, 0.1s color ease-out;
+    will-change: opacity, color;
 }
 
 .zw-link-modal-header__unlink-button:disabled {
     opacity: 0.35;
 }
 
+.zw-link-modal-header__unlink-button:focus,
+.zw-link-modal-header__unlink-button:focus-within,
 .zw-link-modal-header__unlink-button:hover {
     color: rgb(var(--zw-color-white));
 }

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