@zipify/wysiwyg 1.0.0-dev.93 → 1.0.0-dev.96

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);
 }
 
@@ -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
 );
@@ -21788,7 +21788,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/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.93",
+  "version": "1.0.0-dev.96",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "repository": {