@zipify/wysiwyg 4.0.2 → 4.0.4-0

package/dist/wysiwyg.css

@@ -23,7 +23,7 @@
     padding: var(--zw-offset-xxs) var(--zw-offset-xs);
 }
 
-.zw-button[data-v-45d91005] {
+.zw-button[data-v-b2d5d74a] {
     display: inline-flex;
     align-items: center;
     vertical-align: middle;
@@ -43,21 +43,21 @@
     transition: 0.1s opacity ease-out;
     will-change: opacity;
 }
-.zw-button[data-v-45d91005]::-moz-focus-inner {
+.zw-button[data-v-b2d5d74a]::-moz-focus-inner {
     border: 0 !important;
 }
-.zw-button[data-v-45d91005]:hover,
-.zw-button[data-v-45d91005]:focus {
+.zw-button[data-v-b2d5d74a]:hover,
+.zw-button[data-v-b2d5d74a]:focus {
     text-decoration: none;
     outline: none;
 }
-.zw-button[data-v-45d91005]:disabled {
+.zw-button[data-v-b2d5d74a]:disabled {
     user-select: none;
     box-shadow: none;
     cursor: not-allowed;
     opacity: 0.35;
 }
-.zw-button--toolbar[data-v-45d91005] {
+.zw-button--toolbar[data-v-b2d5d74a] {
     border-radius: 1px;
     min-height: 28px;
     font-weight: var(--zw-font-weight-semibold);
@@ -67,33 +67,33 @@
     transition-property: background-color, color, opacity;
     will-change: background-color, color, opacity;
 }
-.zw-button--primary[data-v-45d91005] {
+.zw-button--primary[data-v-b2d5d74a] {
     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-45d91005],
-.zw-button--secondary[data-v-45d91005] {
+.zw-button--primary[data-v-b2d5d74a],
+.zw-button--secondary[data-v-b2d5d74a] {
     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-45d91005]:not(:disabled):hover,
-.zw-button--secondary[data-v-45d91005]:not(:disabled):hover {
+.zw-button--primary[data-v-b2d5d74a]:not(:disabled):hover,
+.zw-button--secondary[data-v-b2d5d74a]:not(:disabled):hover {
     opacity: 0.9;
 }
-.zw-button--toolbar[data-v-45d91005]:not(.zw-button--icon) {
+.zw-button--toolbar[data-v-b2d5d74a]:not(.zw-button--icon) {
     padding: var(--zw-offset-xxs) var(--zw-offset-xs);
 }
-.zw-button--toolbar[data-v-45d91005]:not(:disabled):hover,
-.zw-button--toolbar[data-v-45d91005]:not(:disabled):focus,
-.zw-button--toolbar.zw-button--active[data-v-45d91005]:not(:disabled) {
+.zw-button--toolbar[data-v-b2d5d74a]:not(:disabled):hover,
+.zw-button--toolbar[data-v-b2d5d74a]:not(:disabled):focus,
+.zw-button--toolbar.zw-button--active[data-v-b2d5d74a]:not(:disabled) {
     color: rgb(var(--zw-color-white));
     background-color: rgb(var(--zw-color-n5));
 }
-.zw-button__customized-indicator[data-v-45d91005] {
+[data-v-b2d5d74a] .zw-button__customized-indicator {
     width: 4px;
     height: 4px;
     background-color: rgb(var(--zw-color-y300));

package/dist/wysiwyg.mjs

@@ -23049,6 +23049,11 @@ const _HtmlNormalizer = class extends BaseNormalizer {
     }
     itemEl.append(fragment);
     this._removeStyleProperties(itemEl, _HtmlNormalizer.BLOCK_STYLES);
+    this._removeStyleProperties(itemEl.parentElement, _HtmlNormalizer.BLOCK_STYLES);
+    this._assignElementProperties(itemEl, itemEl.parentElement);
+    if (itemEl.parentElement.lastElementChild === itemEl) {
+      this._removeStyleProperties(itemEl.parentElement);
+    }
   }
   _isBlockNode(node) {
     return _HtmlNormalizer.BLOCK_NODE_NAMES.includes(node.tagName);
@@ -23056,7 +23061,7 @@ const _HtmlNormalizer = class extends BaseNormalizer {
   _isRootNode(node) {
     return _HtmlNormalizer.ROOT_NODE_NAMES.includes(node.tagName);
   }
-  _assignElementProperties(target, source, properties) {
+  _assignElementProperties(target, source, properties = Array.from(source.style)) {
     for (const property of properties) {
       const value = source.style.getPropertyValue(property);
       if (value && !target.style.getPropertyValue(property)) {
@@ -23064,7 +23069,7 @@ const _HtmlNormalizer = class extends BaseNormalizer {
       }
     }
   }
-  _removeStyleProperties(element, properties) {
+  _removeStyleProperties(element, properties = Array.from(element.style)) {
     for (const property of properties) {
       element.style.removeProperty(property);
     }
@@ -23890,7 +23895,7 @@ function tooltip(el, { value, modifiers: modifiers2 }) {
   if (modifiers2.lg)
     el.dataset.tooltipSize = "lg";
 }
-const Button_vue_vue_type_style_index_0_scoped_45d91005_lang = "";
+const Button_vue_vue_type_style_index_0_scoped_b2d5d74a_lang = "";
 const _hoisted_1$n = ["disabled"];
 const _sfc_main$G = {
   __name: "Button",
@@ -23937,7 +23942,7 @@ const _sfc_main$G = {
     };
   }
 };
-const Button = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-45d91005"]]);
+const Button = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-b2d5d74a"]]);
 const ButtonToggle_vue_vue_type_style_index_0_scoped_bbdc7b20_lang = "";
 const _hoisted_1$m = { class: "zw-button-toggle" };
 const _sfc_main$F = {
@@ -26396,9 +26401,7 @@ const _sfc_main$k = {
     const editor = inject(InjectionTokens$1.EDITOR);
     const currentValue = editor.commands.isItalic();
     const isAvailable = editor.commands.isItalicAvailable();
-    const isCustomized = computed(() => {
-      return editor.commands.isSettingCustomized(TextSettings.FONT_STYLE).value;
-    });
+    const isCustomized = editor.commands.isSettingCustomized(TextSettings.FONT_STYLE);
     const apply2 = () => editor.chain().focus().toggleItalic().run();
     return (_ctx, _cache) => {
       return withDirectives((openBlock(), createBlock(unref(Button), {
@@ -26415,7 +26418,7 @@ const _sfc_main$k = {
             size: "28px",
             "auto-color": ""
           }),
-          isCustomized.value ? withDirectives((openBlock(), createElementBlock("span", _hoisted_1$7, null, 512)), [
+          unref(isCustomized) ? withDirectives((openBlock(), createElementBlock("span", _hoisted_1$7, null, 512)), [
             [
               unref(tooltip),
               "Style differs from Page Styles",

package/lib/components/base/Button.vue

@@ -130,7 +130,7 @@ const classes = computed(() => ({
     background-color: rgb(var(--zw-color-n5));
 }
 
-.zw-button__customized-indicator {
+:deep(.zw-button__customized-indicator) {
     width: 4px;
     height: 4px;
     background-color: rgb(var(--zw-color-y300));

package/lib/components/toolbar/controls/ItalicControl.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup>
-import { inject, computed } from 'vue';
+import { inject } from 'vue';
 import { Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip as vTooltip } from '../../../directives';
@@ -30,9 +30,7 @@ const editor = inject(InjectionTokens.EDITOR);
 
 const currentValue = editor.commands.isItalic();
 const isAvailable = editor.commands.isItalicAvailable();
-const isCustomized = computed(() => {
-    return editor.commands.isSettingCustomized(TextSettings.FONT_STYLE).value;
-});
+const isCustomized = editor.commands.isSettingCustomized(TextSettings.FONT_STYLE);
 const apply = () => editor.chain().focus().toggleItalic().run();
 </script>
 

package/lib/services/normalizer/HtmlNormalizer.js

@@ -155,6 +155,13 @@ export class HtmlNormalizer extends BaseNormalizer {
 
         itemEl.append(fragment);
         this._removeStyleProperties(itemEl, HtmlNormalizer.BLOCK_STYLES);
+        this._removeStyleProperties(itemEl.parentElement, HtmlNormalizer.BLOCK_STYLES);
+
+        this._assignElementProperties(itemEl, itemEl.parentElement);
+
+        if (itemEl.parentElement.lastElementChild === itemEl) {
+            this._removeStyleProperties(itemEl.parentElement);
+        }
     }
 
     _isBlockNode(node) {
@@ -165,7 +172,7 @@ export class HtmlNormalizer extends BaseNormalizer {
         return HtmlNormalizer.ROOT_NODE_NAMES.includes(node.tagName);
     }
 
-    _assignElementProperties(target, source, properties) {
+    _assignElementProperties(target, source, properties = Array.from(source.style)) {
         for (const property of properties) {
             const value = source.style.getPropertyValue(property);
 
@@ -175,7 +182,7 @@ export class HtmlNormalizer extends BaseNormalizer {
         }
     }
 
-    _removeStyleProperties(element, properties) {
+    _removeStyleProperties(element, properties = Array.from(element.style)) {
         for (const property of properties) {
             element.style.removeProperty(property);
         }

package/lib/services/normalizer/__tests__/HtmlNormalizer.test.js

@@ -79,7 +79,14 @@ describe('normalize text content', () => {
 
     test('should assign block styles from list to paragraph', () => {
         const input = '<ul style="line-height: 2;"><li>lorem ipsum</li></ul>';
-        const output = '<ul style="line-height: 2;"><li><p style="line-height: 2;">lorem ipsum</p></li></ul>';
+        const output = '<ul><li><p style="line-height: 2;">lorem ipsum</p></li></ul>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should assign styles from list to item', () => {
+        const input = '<ul style="color: red;"><li>lorem ipsum</li></ul>';
+        const output = '<ul><li style="color: red;"><p>lorem ipsum</p></li></ul>';
 
         expect(ContentNormalizer.normalize(input)).toBe(output);
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "4.0.2",
+  "version": "4.0.4-0",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "bin": {