@zipify/wysiwyg 1.0.0-dev.69 → 1.0.0-dev.72

package/dist/wysiwyg.css

@@ -23,7 +23,7 @@
     column-gap: var(--zw-offset-xxs);
 }
 
-.zw-button[data-v-86a41806] {
+.zw-button[data-v-562f4e4a] {
     display: inline-flex;
     align-items: center;
     vertical-align: middle;
@@ -33,6 +33,7 @@
     background-color: transparent;
     border: 0;
     padding: 0;
+    margin: 0;
     white-space: nowrap;
     appearance: none;
     user-select: none;
@@ -42,21 +43,21 @@
     transition: 0.1s opacity ease-out;
     will-change: opacity;
 }
-.zw-button[data-v-86a41806]::-moz-focus-inner {
+.zw-button[data-v-562f4e4a]::-moz-focus-inner {
     border: 0 !important;
 }
-.zw-button[data-v-86a41806]:hover,
-.zw-button[data-v-86a41806]:focus {
+.zw-button[data-v-562f4e4a]:hover,
+.zw-button[data-v-562f4e4a]:focus {
     text-decoration: none;
     outline: none;
 }
-.zw-button[data-v-86a41806]:disabled {
+.zw-button[data-v-562f4e4a]:disabled {
     user-select: none;
     box-shadow: none;
     cursor: not-allowed;
     opacity: 0.35;
 }
-.zw-button--toolbar[data-v-86a41806] {
+.zw-button--toolbar[data-v-562f4e4a] {
     border-radius: 1px;
     min-height: 28px;
     font-weight: var(--zw-font-weight-semibold);
@@ -66,29 +67,29 @@
     transition-property: background-color, color, opacity;
     will-change: background-color, color, opacity;
 }
-.zw-button--primary[data-v-86a41806] {
+.zw-button--primary[data-v-562f4e4a] {
     background-color: rgb(var(--zw-color-green));
     color: rgb(var(--zw-color-white));
     padding: var(--zw-offset-xxs) var(--zw-offset-sm);
     line-height: var(--zw-line-height-md);
 }
-.zw-button--primary[data-v-86a41806],
-.zw-button--secondary[data-v-86a41806] {
+.zw-button--primary[data-v-562f4e4a],
+.zw-button--secondary[data-v-562f4e4a] {
     color: rgb(var(--zw-color-white));
     padding: var(--zw-offset-xxs) var(--zw-offset-sm);
     font-weight: 600;
     font-size: var(--zw-font-size-xs);
 }
-.zw-button--primary[data-v-86a41806]:not(:disabled):hover,
-.zw-button--secondary[data-v-86a41806]:not(:disabled):hover {
+.zw-button--primary[data-v-562f4e4a]:not(:disabled):hover,
+.zw-button--secondary[data-v-562f4e4a]:not(:disabled):hover {
     opacity: 0.9;
 }
-.zw-button--toolbar[data-v-86a41806]:not(.zw-button--icon) {
+.zw-button--toolbar[data-v-562f4e4a]:not(.zw-button--icon) {
     padding: var(--zw-offset-xxs) var(--zw-offset-xs);
 }
-.zw-button--toolbar[data-v-86a41806]:not(:disabled):hover,
-.zw-button--toolbar[data-v-86a41806]:not(:disabled):focus,
-.zw-button--toolbar.zw-button--active[data-v-86a41806]:not(:disabled) {
+.zw-button--toolbar[data-v-562f4e4a]:not(:disabled):hover,
+.zw-button--toolbar[data-v-562f4e4a]:not(:disabled):focus,
+.zw-button--toolbar.zw-button--active[data-v-562f4e4a]:not(:disabled) {
     color: rgb(var(--zw-color-white));
     background-color: rgb(var(--zw-color-n5));
 }
@@ -405,27 +406,27 @@
     color: rgb(var(--zw-color-red));
 }
 
-.zw-checkbox[data-v-2de7f5c1] {
+.zw-checkbox[data-v-15e487f5] {
     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-2de7f5c1] {
+.zw-checkbox__field + .zw-checkbox__indicator[data-v-15e487f5] {
     color: var(--zw-color-n200);
     box-shadow: inset 0 0 0 2px currentColor;
 }
-.zw-checkbox:hover .zw-checkbox__indicator[data-v-2de7f5c1] {
+.zw-checkbox:hover .zw-checkbox__indicator[data-v-15e487f5] {
     box-shadow: inset 0 0 0 2px rgb(var(--zw-color-green));
 }
-.zw-checkbox__field:checked + .zw-checkbox__indicator[data-v-2de7f5c1] {
+.zw-checkbox__field:checked + .zw-checkbox__indicator[data-v-15e487f5] {
     color: rgb(var(--zw-color-green))
 }
-.zw-checkbox .zw-checkbox__field:checked + .zw-checkbox__indicator[data-v-2de7f5c1] {
+.zw-checkbox .zw-checkbox__field:checked + .zw-checkbox__indicator[data-v-15e487f5] {
     background-color: rgb(var(--zw-color-green));
 }
-.zw-checkbox .zw-checkbox__indicator[data-v-2de7f5c1]::after {
+.zw-checkbox .zw-checkbox__indicator[data-v-15e487f5]::after {
     content: "";
     display: block;
     height: 16px;
@@ -437,16 +438,16 @@
     background-size: 16px;
     background-position: center center;
 }
-.zw-checkbox__field:not(:checked) + .zw-checkbox__indicator[data-v-2de7f5c1]::after {
+.zw-checkbox__field:not(:checked) + .zw-checkbox__indicator[data-v-15e487f5]::after {
     transform: scale(0);
 }
-.zw-checkbox__field[data-v-2de7f5c1] {
+.zw-checkbox__field[data-v-15e487f5] {
     position: absolute;
     opacity: 0;
     height: 0;
     width: 0;
 }
-.zw-checkbox__label[data-v-2de7f5c1] {
+.zw-checkbox__label[data-v-15e487f5] {
     font-size: var(--zw-font-size-xs);
 }
 

package/dist/wysiwyg.mjs

@@ -14238,7 +14238,7 @@ var __component__$G = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$G,
   false,
   __vue2_injectStyles$G,
-  "86a41806",
+  "562f4e4a",
   null,
   null
 );
@@ -19895,7 +19895,7 @@ var render$x = function __render__13() {
       "checked": _vm.value
     },
     on: {
-      "change": _vm.onCheckedChanged
+      "click": _vm.onCheckedChanged
     }
   }), _c("span", {
     staticClass: "zw-checkbox__indicator zw-margin-right--xs"
@@ -19918,10 +19918,8 @@ const __vue2_script$x = {
       default: null
     }
   },
-  setup(_, { emit }) {
-    const onCheckedChanged = (event) => {
-      emit("input", event.target.checked);
-    };
+  setup(props, { emit }) {
+    const onCheckedChanged = () => emit("input", !props.value);
     return { onCheckedChanged };
   }
 };
@@ -19932,7 +19930,7 @@ var __component__$x = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$x,
   false,
   __vue2_injectStyles$x,
-  "2de7f5c1",
+  "15e487f5",
   null,
   null
 );
@@ -23222,7 +23220,8 @@ const FontSize = Mark.create({
     const parseSize = (value) => {
       if (!value)
         return null;
-      const converted = convertFontSize(value, this.options.wrapperRef.value);
+      const wrapperEl = this.options.wrapperRef.value || this.options.wrapperRef;
+      const converted = convertFontSize(value, wrapperEl);
       return String(converted);
     };
     return [
@@ -23634,7 +23633,8 @@ const LineHeight = Extension.create({
               const value = element.style.lineHeight;
               if (!value)
                 return null;
-              const converted = convertLineHeight(value, element, this.options.wrapperRef.value);
+              const wrapperEl = this.options.wrapperRef.value || this.options.wrapperRef;
+              const converted = convertLineHeight(value, element, wrapperEl);
               return { desktop: converted, tablet: converted, mobile: converted };
             },
             renderHTML(attrs) {

package/lib/components/base/Button.vue

@@ -66,6 +66,7 @@ export default {
     background-color: transparent;
     border: 0;
     padding: 0;
+    margin: 0;
     white-space: nowrap;
     appearance: none;
     user-select: none;

package/lib/components/base/Checkbox.vue

@@ -1,6 +1,6 @@
 <template>
     <label class="zw-checkbox">
-        <input class="zw-checkbox__field" type="checkbox" :checked="value" @change="onCheckedChanged">
+        <input class="zw-checkbox__field" type="checkbox" :checked="value" @click="onCheckedChanged">
         <span class="zw-checkbox__indicator zw-margin-right--xs" />
         <span class="zw-checkbox__label">{{ label }}</span>
     </label>
@@ -23,10 +23,8 @@ export default {
         }
     },
 
-    setup(_, { emit }) {
-        const onCheckedChanged = (event) => {
-            emit('input', event.target.checked);
-        };
+    setup(props, { emit }) {
+        const onCheckedChanged = () => emit('input', !props.value);
 
         return { onCheckedChanged };
     }

package/lib/extensions/FontSize.js

@@ -66,7 +66,8 @@ export const FontSize = Mark.create({
         const parseSize = (value) => {
             if (!value) return null;
 
-            const converted = convertFontSize(value, this.options.wrapperRef.value);
+            const wrapperEl = this.options.wrapperRef.value || this.options.wrapperRef;
+            const converted = convertFontSize(value, wrapperEl);
 
             return String(converted);
         };

package/lib/extensions/LineHeight.js

@@ -33,7 +33,8 @@ export const LineHeight = Extension.create({
 
                             if (!value) return null;
 
-                            const converted = convertLineHeight(value, element, this.options.wrapperRef.value);
+                            const wrapperEl = this.options.wrapperRef.value || this.options.wrapperRef;
+                            const converted = convertLineHeight(value, element, wrapperEl);
 
                             return { desktop: converted, tablet: converted, mobile: converted };
                         },

package/package.json

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