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

package/dist/wysiwyg.css

@@ -525,19 +525,19 @@
     line-height: var(--zw-line-height-xxs);
 }
 
-.zw-style-preset-control[data-v-39d20a0e] {
+.zw-style-preset-control[data-v-2893d64e] {
     display: flex;
     align-items: center;
 }
-.zw-style-preset-control__dropdown[data-v-39d20a0e] {
+.zw-style-preset-control__dropdown[data-v-2893d64e] {
     width: 96px;
 }
-.zw-style-preset-control__reset[data-v-39d20a0e] {
+.zw-style-preset-control__reset[data-v-2893d64e] {
     color: rgb(var(--zw-color-n70));
 }
-.zw-style-preset-control__reset[data-v-39d20a0e]:not(:disabled):hover,
-.zw-style-preset-control__reset[data-v-39d20a0e]:not(:disabled):focus,
-.zw-style-preset-control__reset[data-v-39d20a0e]:not(:disabled):focus-within {
+.zw-style-preset-control__reset[data-v-2893d64e]:not(:disabled):hover,
+.zw-style-preset-control__reset[data-v-2893d64e]:not(:disabled):focus,
+.zw-style-preset-control__reset[data-v-2893d64e]:not(:disabled):focus-within {
     color: rgb(var(--zw-color-white));
 }
 
@@ -576,17 +576,17 @@
     margin-left: var(--zw-offset-sm);
 }
 
-.zpa-list-control[data-v-ce2b1130] {
+.zpa-list-control[data-v-2eeb2252] {
     display: flex;
 }
-.zpa-list-control[data-v-ce2b1130]:hover {
+.zpa-list-control[data-v-2eeb2252]:hover {
     color: rgb(var(--zw-color-white));
     background-color: rgb(var(--zw-color-n5));
 }
-.zw-list-control__activator[data-v-ce2b1130] {
+.zw-list-control__activator[data-v-2eeb2252] {
     padding: 0 var(--zw-offset-xs);
 }
-.zw-list-control__option[data-v-ce2b1130] {
+.zw-list-control__option[data-v-2eeb2252] {
     padding: 0 var(--zw-offset-xs);
     display: flex;
 }

package/dist/wysiwyg.mjs

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { computed, ref, watch, inject, onUnmounted, nextTick, provide, onMounted, toRef, reactive } from "vue";
+import { computed, ref, watch, inject, onUnmounted, nextTick, provide, onMounted, toRef, unref, reactive } from "vue";
 import { ColorModel, ZipifyColorPicker } from "@zipify/colorpicker";
 function OrderedMap(content) {
   this.content = content;
@@ -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);
@@ -20683,11 +20685,11 @@ const __vue2_script$p = {
     const preset = editor.commands.getPreset();
     const customization = editor.commands.getPresetCustomization();
     const isCustomized = computed(() => {
-      const { attributes, marks } = customization.value;
+      const { attributes, marks } = unref(customization);
       return !!attributes.length || !!marks.length;
     });
     const options = computed(() => {
-      return presets.value.map((preset2) => ({
+      return unref(presets).map((preset2) => ({
         id: preset2.id,
         title: preset2.name
       }));
@@ -20712,7 +20714,7 @@ var __component__$p = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$p,
   false,
   __vue2_injectStyles$p,
-  "39d20a0e",
+  "2893d64e",
   null,
   null
 );
@@ -20876,7 +20878,7 @@ const __vue2_script$n = {
   setup() {
     const editor = inject(InjectionTokens$1.EDITOR);
     const font = editor.commands.getFont();
-    const options = computed(() => font.value.weights.map((style2) => ({ id: style2 })));
+    const options = computed(() => unref(font).weights.map((style2) => ({ id: style2 })));
     const currentValue = editor.commands.getFontWeight();
     const apply2 = (value) => editor.chain().focus().applyFontWeight(value).run();
     return {
@@ -21249,7 +21251,7 @@ const __vue2_script$i = {
   },
   setup() {
     const editor = inject(InjectionTokens$1.EDITOR);
-    const currentValue = computed(() => editor.commands.isUnderline().value);
+    const currentValue = editor.commands.isUnderline();
     const apply2 = () => editor.chain().focus().toggleUnderline().run();
     return {
       currentValue,
@@ -21901,10 +21903,10 @@ const __vue2_script$b = {
   setup() {
     const editor = inject(InjectionTokens$1.EDITOR);
     const selectionValue = editor.commands.getListType();
-    const isList2 = computed(() => !!selectionValue.value);
-    const currentValue = computed(() => selectionValue.value || "none");
+    const isList2 = computed(() => !!unref(selectionValue));
+    const currentValue = computed(() => unref(selectionValue) || "none");
     const recentListType = ref(ListTypes.DISC);
-    const isCurrentListSelected = computed(() => selectionValue.value === recentListType.value);
+    const isCurrentListSelected = computed(() => unref(selectionValue) === recentListType.value);
     const currentIcon = computed(() => `list-${recentListType.value}`);
     const apply2 = (type) => {
       recentListType.value = type;
@@ -21928,7 +21930,7 @@ var __component__$b = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$b,
   false,
   __vue2_injectStyles$b,
-  "ce2b1130",
+  "2eeb2252",
   null,
   null
 );
@@ -22876,7 +22878,7 @@ const FontFamily = Mark.create({
       applyFontFamily: createCommand(({ commands: commands2 }, value) => {
         commands2.setMark(this.name, { value });
         const font = commands2.findFontByName(value);
-        let fontWeight = commands2.getFontWeight().value;
+        let fontWeight = unref(commands2.getFontWeight());
         if (!font.isWeightSupported(fontWeight)) {
           fontWeight = font.findClosestWeight(fontWeight);
           commands2.applyFontWeight(fontWeight);
@@ -22887,7 +22889,7 @@ const FontFamily = Mark.create({
       }),
       getFont: createCommand(({ commands: commands2 }) => {
         const fontFamily = commands2.getFontFamily();
-        return computed(() => commands2.findFontByName(fontFamily.value));
+        return computed(() => commands2.findFontByName(unref(fontFamily)));
       }),
       findFontByName: createCommand((_, name) => {
         return this.options.fonts.find((font) => font.name === name);
@@ -22896,12 +22898,12 @@ const FontFamily = Mark.create({
         const defaultValue = commands2.getDefaultFontFamily();
         return computed(() => {
           var _a, _b;
-          return (_b = (_a = editor.getAttributes(this.name)) == null ? void 0 : _a.value) != null ? _b : defaultValue.value;
+          return (_b = (_a = editor.getAttributes(this.name)) == null ? void 0 : _a.value) != null ? _b : unref(defaultValue);
         });
       }),
       getDefaultFontFamily: createCommand(({ commands: commands2 }) => {
         const preset = commands2.getPreset();
-        return computed(() => preset.value.common.font_family);
+        return computed(() => unref(preset).common.font_family);
       })
     };
   },
@@ -23018,7 +23020,7 @@ const StylePreset = Extension.create({
             isRequired: false,
             default: { id: this.options.defaultId },
             parseHTML: (element) => {
-              const presets = this.options.presets.value || this.options.presets;
+              const presets = unref(this.options.presets);
               if (element.parentElement.tagName === "LI")
                 return null;
               for (const { id: id2, node, fallbackClass } of presets) {
@@ -23054,11 +23056,11 @@ const StylePreset = Extension.create({
       getPreset: createCommand(({ commands: commands2 }) => {
         const selection = commands2.getBlockAttributes("preset", { id: this.options.defaultId });
         const presets = commands2.getPresetList();
-        return computed(() => findPresetById(presets.value, selection.value.id));
+        return computed(() => findPresetById(unref(presets), unref(selection).id));
       }),
       applyPreset: createCommand(({ commands: commands2, chain }, presetId) => {
         var _a, _b;
-        const presets = commands2.getPresetList().value;
+        const presets = unref(commands2.getPresetList());
         const preset = findPresetById(presets, presetId);
         const nodeType = (_b = (_a = preset.node) == null ? void 0 : _a.type) != null ? _b : NodeTypes.PARAGRAPH;
         const attrs = {
@@ -23068,7 +23070,7 @@ const StylePreset = Extension.create({
           attrs.level = preset.node.level;
         }
         for (const textAttribute of TextSettings.attributes) {
-          attrs[textAttribute] = commands2.getBlockAttributes(textAttribute).value;
+          attrs[textAttribute] = unref(commands2.getBlockAttributes(textAttribute));
         }
         chain().removeList().setNode(nodeType, attrs).run();
       }),
@@ -23144,14 +23146,14 @@ const FontWeight = Mark.create({
     return {
       applyFontWeight: createCommand(({ commands: commands2 }, value) => {
         commands2.setMark(this.name, { value });
-        const font = commands2.getFont().value;
+        const font = unref(commands2.getFont());
         if (!font.isItalicSupported(value)) {
           commands2.removeItalic();
         }
       }),
       toggleBold: createCommand(({ commands: commands2 }) => {
-        const currentWeight = commands2.getFontWeight().value;
-        const currentFont = commands2.getFont().value;
+        const currentWeight = unref(commands2.getFontWeight());
+        const currentFont = unref(commands2.getFont());
         const isBold = Number(currentWeight) >= 600;
         const wantedWeight = isBold ? "400" : "700";
         const nextWeight = currentFont.findClosestWeight(wantedWeight);
@@ -23159,19 +23161,20 @@ const FontWeight = Mark.create({
       }),
       getFontWeight: createCommand(({ editor, commands: commands2 }) => {
         const defaultValue = commands2.getDefaultFontWeight();
-        const font = commands2.getFont();
+        const fontRef = commands2.getFont();
         return computed(() => {
           var _a, _b;
-          const weight = (_b = (_a = editor.getAttributes(this.name)) == null ? void 0 : _a.value) != null ? _b : defaultValue.value;
-          if (font.value.isWeightSupported(weight)) {
+          const weight = (_b = (_a = editor.getAttributes(this.name)) == null ? void 0 : _a.value) != null ? _b : unref(defaultValue);
+          const font = unref(fontRef);
+          if (font.isWeightSupported(weight)) {
             return weight;
           }
-          return font.value.findClosestWeight(weight);
+          return font.findClosestWeight(weight);
         });
       }),
       getDefaultFontWeight: createCommand(({ commands: commands2 }) => {
         const preset = commands2.getPreset();
-        return computed(() => preset.value.common.font_weight);
+        return computed(() => unref(preset).common.font_weight);
       })
     };
   },
@@ -23226,25 +23229,25 @@ const FontSize = Mark.create({
         const defaultValue = commands2.getDefaultFontSize();
         return computed(() => {
           var _a, _b;
-          return (_b = (_a = editor.getAttributes(this.name)) == null ? void 0 : _a[device.value]) != null ? _b : defaultValue.value;
+          return (_b = (_a = editor.getAttributes(this.name)) == null ? void 0 : _a[unref(device)]) != null ? _b : unref(defaultValue);
         });
       }),
       getDefaultFontSize: createCommand(({ commands: commands2 }) => {
         const device = commands2.getDevice();
         const preset = commands2.getPreset();
-        return computed(() => preset.value[device.value].font_size.replace("px", ""));
+        return computed(() => unref(preset)[unref(device)].font_size.replace("px", ""));
       }),
       applyFontSize: createCommand(({ commands: commands2 }, value) => {
-        const device = commands2.getDevice().value;
+        const device = unref(commands2.getDevice());
         commands2.setMark(this.name, { [device]: value });
       }),
       increaseFontSize: createCommand(({ commands: commands2 }) => {
-        const size2 = Number(commands2.getFontSize().value);
+        const size2 = Number(unref(commands2.getFontSize()));
         const nextSize = Math.min(size2 + 1, this.options.maxSize);
         commands2.applyFontSize(String(nextSize));
       }),
       decreaseFontSize: createCommand(({ commands: commands2 }) => {
-        const size2 = Number(commands2.getFontSize().value);
+        const size2 = Number(unref(commands2.getFontSize()));
         const nextSize = Math.max(size2 - 1, this.options.minSize);
         commands2.applyFontSize(String(nextSize));
       })
@@ -23258,7 +23261,7 @@ const FontSize = Mark.create({
     const parseSize = (value) => {
       if (!value)
         return null;
-      const wrapperEl = this.options.wrapperRef.value || this.options.wrapperRef;
+      const wrapperEl = unref(this.options.wrapperRef);
       const converted = convertFontSize(value, wrapperEl);
       return String(converted);
     };
@@ -23300,12 +23303,12 @@ const FontColor = Mark.create({
         const defaultValue = commands2.getDefaultFontColor();
         return computed(() => {
           var _a, _b;
-          return (_b = (_a = editor.getAttributes(this.name)) == null ? void 0 : _a.value) != null ? _b : defaultValue.value;
+          return (_b = (_a = editor.getAttributes(this.name)) == null ? void 0 : _a.value) != null ? _b : unref(defaultValue);
         });
       }),
       getDefaultFontColor: createCommand(({ commands: commands2 }) => {
         const preset = commands2.getPreset();
-        return computed(() => preset.value.common.color);
+        return computed(() => unref(preset).common.color);
       }),
       applyFontColor: createCommand(({ commands: commands2 }, value) => {
         commands2.setMark(this.name, { value });
@@ -23383,25 +23386,25 @@ const FontStyle = Mark.create({
         const defaultValue = commands2.getDefaultFontStyle();
         return computed(() => {
           var _a, _b;
-          return (_b = (_a = editor.getAttributes(this.name)) == null ? void 0 : _a.italic) != null ? _b : defaultValue.value.italic;
+          return (_b = (_a = editor.getAttributes(this.name)) == null ? void 0 : _a.italic) != null ? _b : unref(defaultValue).italic;
         });
       }),
       isItalicAvailable: createCommand(({ commands: commands2 }) => {
         const font = commands2.getFont();
         const fontWeight = commands2.getFontWeight();
-        return computed(() => font.value.isItalicSupported(fontWeight.value));
+        return computed(() => unref(font).isItalicSupported(unref(fontWeight)));
       }),
       getDefaultFontStyle: createCommand(({ commands: commands2 }) => {
         const preset = commands2.getPreset();
         return computed(() => ({
-          italic: preset.value.common.font_style === "italic"
+          italic: unref(preset).common.font_style === "italic"
         }));
       }),
       toggleItalic: createCommand(({ commands: commands2 }) => {
-        const isItalicAvailable = this.editor.commands.isItalicAvailable();
-        if (!isItalicAvailable.value)
+        const isItalicAvailable = unref(this.editor.commands.isItalicAvailable());
+        if (!isItalicAvailable)
           return;
-        commands2.isItalic().value ? commands2.removeItalic() : commands2.applyItalic();
+        unref(commands2.isItalic()) ? commands2.removeItalic() : commands2.applyItalic();
       }),
       applyItalic: createCommand(({ commands: commands2 }) => {
         commands2.setMark(this.name, { italic: true });
@@ -23447,11 +23450,11 @@ const TextDecoration = Mark.create({
     return {
       isUnderline: createCommand(({ commands: commands2, editor }) => {
         const decoration = commands2.getTextDecoration();
-        return computed(() => editor.isActive("link") || decoration.value.underline);
+        return computed(() => editor.isActive("link") || unref(decoration).underline);
       }),
       isStrikeThrough: createCommand(({ commands: commands2 }) => {
         const decoration = commands2.getTextDecoration();
-        return computed(() => decoration.value.strike_through);
+        return computed(() => unref(decoration).strike_through);
       }),
       getTextDecoration: createCommand(({ editor, commands: commands2 }) => {
         const defaultValue = commands2.getDefaultTextDecoration();
@@ -23459,15 +23462,15 @@ const TextDecoration = Mark.create({
           var _a, _b, _c;
           const attrs = (_a = editor.getAttributes(this.name)) != null ? _a : {};
           return {
-            underline: (_b = attrs.underline) != null ? _b : defaultValue.value.underline,
-            strike_through: (_c = attrs.strike_through) != null ? _c : defaultValue.value.strike_through
+            underline: (_b = attrs.underline) != null ? _b : unref(defaultValue).underline,
+            strike_through: (_c = attrs.strike_through) != null ? _c : unref(defaultValue).strike_through
           };
         });
       }),
       getDefaultTextDecoration: createCommand(({ commands: commands2 }) => {
         const preset = commands2.getPreset();
         return computed(() => {
-          const decoration = preset.value.common.text_decoration;
+          const decoration = unref(preset).common.text_decoration;
           return {
             underline: decoration.includes("underline"),
             strike_through: decoration.includes("line-through")
@@ -23483,7 +23486,7 @@ const TextDecoration = Mark.create({
         commands2.toggleTextDecoration("strike_through");
       }),
       toggleTextDecoration: createCommand(({ commands: commands2 }, name) => {
-        const isEnabled = commands2.getTextDecoration().value[name];
+        const isEnabled = unref(commands2.getTextDecoration())[name];
         isEnabled ? commands2.removeTextDecoration(name) : commands2.applyTextDecoration(name);
       }),
       applyTextDecoration: createCommand(({ commands: commands2 }, name) => {
@@ -23491,7 +23494,7 @@ const TextDecoration = Mark.create({
       }),
       removeTextDecoration: createCommand(({ commands: commands2 }, name) => {
         const mark = {
-          ...commands2.getTextDecoration().value,
+          ...unref(commands2.getTextDecoration()),
           [name]: false
         };
         const isRemoveMark = !mark.underline && !mark.strike_through;
@@ -23621,7 +23624,7 @@ const Alignment = Extension.create({
   addCommands() {
     return {
       applyAlignment: createCommand(({ commands: commands2 }, value) => {
-        const device = commands2.getDevice().value;
+        const device = unref(commands2.getDevice());
         commands2.setBlockAttributes(this.name, { [device]: value }, DEFAULTS$1);
       }),
       getAlignment: createCommand(({ commands: commands2 }) => {
@@ -23630,13 +23633,13 @@ const Alignment = Extension.create({
         const defaultValue = commands2.getDefaultAlignment();
         return computed(() => {
           var _a, _b;
-          return (_b = (_a = attribute.value) == null ? void 0 : _a[device.value]) != null ? _b : defaultValue.value;
+          return (_b = (_a = unref(attribute)) == null ? void 0 : _a[unref(device)]) != null ? _b : unref(defaultValue);
         });
       }),
       getDefaultAlignment: createCommand(({ commands: commands2 }) => {
         const device = commands2.getDevice();
         const preset = commands2.getPreset();
-        return computed(() => preset.value[device.value].alignment);
+        return computed(() => unref(preset)[unref(device)].alignment);
       })
     };
   },
@@ -23671,7 +23674,7 @@ const LineHeight = Extension.create({
               const value = element.style.lineHeight;
               if (!value)
                 return null;
-              const wrapperEl = this.options.wrapperRef.value || this.options.wrapperRef;
+              const wrapperEl = unref(this.options.wrapperRef);
               const converted = convertLineHeight(value, element, wrapperEl);
               return { desktop: converted, tablet: converted, mobile: converted };
             },
@@ -23697,16 +23700,16 @@ const LineHeight = Extension.create({
         const defaultValue = commands2.getDefaultLineHeight();
         return computed(() => {
           var _a, _b;
-          return (_b = (_a = attribute.value) == null ? void 0 : _a[device.value]) != null ? _b : defaultValue.value;
+          return (_b = (_a = unref(attribute)) == null ? void 0 : _a[unref(device)]) != null ? _b : unref(defaultValue);
         });
       }),
       getDefaultLineHeight: createCommand(({ commands: commands2 }) => {
         const device = commands2.getDevice();
         const preset = commands2.getPreset();
-        return computed(() => preset.value[device.value].line_height);
+        return computed(() => unref(preset)[unref(device)].line_height);
       }),
       applyLineHeight: createCommand(({ commands: commands2 }, value) => {
-        const device = commands2.getDevice().value;
+        const device = unref(commands2.getDevice());
         commands2.setBlockAttributes(this.name, { [device]: value }, DEFAULTS);
       })
     };
@@ -23803,11 +23806,11 @@ const List = Node$1.create({
         const attribute = commands2.getBlockAttributes("bullet", { type: null });
         return computed(() => {
           var _a;
-          return (_a = attribute.value.type) != null ? _a : null;
+          return (_a = unref(attribute).type) != null ? _a : null;
         });
       }),
       applyList: createCommand(({ commands: commands2, chain }, type) => {
-        const currentType = commands2.getListType().value;
+        const currentType = unref(commands2.getListType());
         if (currentType === type) {
           commands2.applyDefaultPreset();
           return;
@@ -24840,7 +24843,7 @@ const Link = Link$1.extend({
           if (!href.startsWith("#"))
             return LinkDestinations.URL;
           const id2 = href.replace("#", "");
-          const blocks = this.options.pageBlocks.value || this.options.pageBlocks;
+          const blocks = unref(this.options.pageBlocks);
           const block = blocks.find((block2) => block2.id === parseInt(id2));
           return block ? LinkDestinations.BLOCK : LinkDestinations.URL;
         }
@@ -25583,7 +25586,7 @@ const NodeProcessor = Extension.create({
     return {
       setBlockAttributes: createCommand(({ commands: commands2 }, name, attrs, defaults2 = {}) => {
         var _a;
-        const current = (_a = commands2.getBlockAttributes(name).value) != null ? _a : {};
+        const current = (_a = unref(commands2.getBlockAttributes(name))) != null ? _a : {};
         for (const type of NodeTypes.blocks) {
           commands2.updateAttributes(type, {
             [name]: { ...defaults2, ...current, ...attrs }

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

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { computed, inject } from 'vue';
+import { computed, inject, unref } from 'vue';
 import { InjectionTokens } from '../../../injectionTokens';
 import { Dropdown } from '../../base';
 import { tooltip } from '../../../directives';
@@ -28,7 +28,7 @@ export default {
         const editor = inject(InjectionTokens.EDITOR);
         const font = editor.commands.getFont();
 
-        const options = computed(() => font.value.weights.map((style) => ({ id: style })));
+        const options = computed(() => unref(font).weights.map((style) => ({ id: style })));
         const currentValue = editor.commands.getFontWeight();
 
         const apply = (value) => editor.chain().focus().applyFontWeight(value).run();

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

@@ -45,7 +45,7 @@
 </template>
 
 <script>
-import { computed, inject, ref } from 'vue';
+import { computed, inject, ref, unref } from 'vue';
 import { InjectionTokens } from '../../../injectionTokens';
 import { Dropdown, DropdownOption, Button, Icon } from '../../base';
 import { ListTypes } from '../../../enums';
@@ -73,10 +73,10 @@ export default {
     setup() {
         const editor = inject(InjectionTokens.EDITOR);
         const selectionValue = editor.commands.getListType();
-        const isList = computed(() => !!selectionValue.value);
-        const currentValue = computed(() => selectionValue.value || 'none');
+        const isList = computed(() => !!unref(selectionValue));
+        const currentValue = computed(() => unref(selectionValue) || 'none');
         const recentListType = ref(ListTypes.DISC);
-        const isCurrentListSelected = computed(() => selectionValue.value === recentListType.value);
+        const isCurrentListSelected = computed(() => unref(selectionValue) === recentListType.value);
 
         const currentIcon = computed(() => `list-${recentListType.value}`);
 

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

@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import { computed, inject } from 'vue';
+import { computed, inject, unref } from 'vue';
 import { InjectionTokens } from '../../../injectionTokens';
 import { Dropdown, Button, Icon } from '../../base';
 import { tooltip } from '../../../directives';
@@ -50,13 +50,13 @@ export default {
         const customization = editor.commands.getPresetCustomization();
 
         const isCustomized = computed(() => {
-            const { attributes, marks } = customization.value;
+            const { attributes, marks } = unref(customization);
 
             return !!attributes.length || !!marks.length;
         });
 
         const options = computed(() => {
-            return presets.value.map((preset) => ({
+            return unref(presets).map((preset) => ({
                 id: preset.id,
                 title: preset.name
             }));

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

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { inject, computed } from 'vue';
+import { inject } from 'vue';
 import { Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip } from '../../../directives';
@@ -31,7 +31,7 @@ export default {
     setup() {
         const editor = inject(InjectionTokens.EDITOR);
 
-        const currentValue = computed(() => editor.commands.isUnderline().value);
+        const currentValue = editor.commands.isUnderline();
         const apply = () => editor.chain().focus().toggleUnderline().run();
 
         return {

package/lib/extensions/Alignment.js

@@ -1,5 +1,5 @@
 import { Extension } from '@tiptap/vue-2';
-import { computed } from 'vue';
+import { computed, unref } from 'vue';
 import { convertAlignment, createCommand, createKeyboardShortcut, renderInlineSetting } from '../utils';
 import { Alignments, NodeTypes, TextSettings } from '../enums';
 
@@ -56,7 +56,7 @@ export const Alignment = Extension.create({
     addCommands() {
         return {
             applyAlignment: createCommand(({ commands }, value) => {
-                const device = commands.getDevice().value;
+                const device = unref(commands.getDevice());
 
                 commands.setBlockAttributes(this.name, { [device]: value }, DEFAULTS);
             }),
@@ -66,14 +66,14 @@ export const Alignment = Extension.create({
                 const device = commands.getDevice();
                 const defaultValue = commands.getDefaultAlignment();
 
-                return computed(() => attribute.value?.[device.value] ?? defaultValue.value);
+                return computed(() => unref(attribute)?.[unref(device)] ?? unref(defaultValue));
             }),
 
             getDefaultAlignment: createCommand(({ commands }) => {
                 const device = commands.getDevice();
                 const preset = commands.getPreset();
 
-                return computed(() => preset.value[device.value].alignment);
+                return computed(() => unref(preset)[unref(device)].alignment);
             })
         };
     },

package/lib/extensions/FontColor.js

@@ -1,5 +1,5 @@
 import { Mark } from '@tiptap/vue-2';
-import { computed } from 'vue';
+import { computed, unref } from 'vue';
 import { convertColor, createCommand, renderMark } from '../utils';
 import { TextSettings } from '../enums';
 
@@ -15,13 +15,13 @@ export const FontColor = Mark.create({
             getFontColor: createCommand(({ commands, editor }) => {
                 const defaultValue = commands.getDefaultFontColor();
 
-                return computed(() => editor.getAttributes(this.name)?.value ?? defaultValue.value);
+                return computed(() => editor.getAttributes(this.name)?.value ?? unref(defaultValue));
             }),
 
             getDefaultFontColor: createCommand(({ commands }) => {
                 const preset = commands.getPreset();
 
-                return computed(() => preset.value.common.color);
+                return computed(() => unref(preset).common.color);
             }),
 
             applyFontColor: createCommand(({ commands }, value) => {

package/lib/extensions/FontFamily.js

@@ -1,5 +1,5 @@
 import { Mark } from '@tiptap/vue-2';
-import { computed } from 'vue';
+import { computed, unref } from 'vue';
 import { createCommand, renderMark } from '../utils';
 import { TextSettings } from '../enums';
 
@@ -21,7 +21,7 @@ export const FontFamily = Mark.create({
                 commands.setMark(this.name, { value });
 
                 const font = commands.findFontByName(value);
-                let fontWeight = commands.getFontWeight().value;
+                let fontWeight = unref(commands.getFontWeight());
 
                 if (!font.isWeightSupported(fontWeight)) {
                     fontWeight = font.findClosestWeight(fontWeight);
@@ -36,7 +36,7 @@ export const FontFamily = Mark.create({
             getFont: createCommand(({ commands }) => {
                 const fontFamily = commands.getFontFamily();
 
-                return computed(() => commands.findFontByName(fontFamily.value));
+                return computed(() => commands.findFontByName(unref(fontFamily)));
             }),
 
             findFontByName: createCommand((_, name) => {
@@ -46,13 +46,13 @@ export const FontFamily = Mark.create({
             getFontFamily: createCommand(({ editor, commands }) => {
                 const defaultValue = commands.getDefaultFontFamily();
 
-                return computed(() => editor.getAttributes(this.name)?.value ?? defaultValue.value);
+                return computed(() => editor.getAttributes(this.name)?.value ?? unref(defaultValue));
             }),
 
             getDefaultFontFamily: createCommand(({ commands }) => {
                 const preset = commands.getPreset();
 
-                return computed(() => preset.value.common.font_family);
+                return computed(() => unref(preset).common.font_family);
             })
         };
     },

package/lib/extensions/FontSize.js

@@ -1,5 +1,5 @@
 import { Mark } from '@tiptap/vue-2';
-import { computed } from 'vue';
+import { computed, unref } from 'vue';
 import { convertFontSize, createCommand, createKeyboardShortcut, renderMark } from '../utils';
 import { TextSettings } from '../enums';
 
@@ -25,31 +25,31 @@ export const FontSize = Mark.create({
                 const device = commands.getDevice();
                 const defaultValue = commands.getDefaultFontSize();
 
-                return computed(() => editor.getAttributes(this.name)?.[device.value] ?? defaultValue.value);
+                return computed(() => editor.getAttributes(this.name)?.[unref(device)] ?? unref(defaultValue));
             }),
 
             getDefaultFontSize: createCommand(({ commands }) => {
                 const device = commands.getDevice();
                 const preset = commands.getPreset();
 
-                return computed(() => preset.value[device.value].font_size.replace('px', ''));
+                return computed(() => unref(preset)[unref(device)].font_size.replace('px', ''));
             }),
 
             applyFontSize: createCommand(({ commands }, value) => {
-                const device = commands.getDevice().value;
+                const device = unref(commands.getDevice());
 
                 commands.setMark(this.name, { [device]: value });
             }),
 
             increaseFontSize: createCommand(({ commands }) => {
-                const size = Number(commands.getFontSize().value);
+                const size = Number(unref(commands.getFontSize()));
                 const nextSize = Math.min(size + 1, this.options.maxSize);
 
                 commands.applyFontSize(String(nextSize));
             }),
 
             decreaseFontSize: createCommand(({ commands }) => {
-                const size = Number(commands.getFontSize().value);
+                const size = Number(unref(commands.getFontSize()));
                 const nextSize = Math.max(size - 1, this.options.minSize);
 
                 commands.applyFontSize(String(nextSize));
@@ -66,7 +66,7 @@ export const FontSize = Mark.create({
         const parseSize = (value) => {
             if (!value) return null;
 
-            const wrapperEl = this.options.wrapperRef.value || this.options.wrapperRef;
+            const wrapperEl = unref(this.options.wrapperRef);
             const converted = convertFontSize(value, wrapperEl);
 
             return String(converted);

package/lib/extensions/FontStyle.js

@@ -1,5 +1,5 @@
 import { Mark } from '@tiptap/vue-2';
-import { computed } from 'vue';
+import { computed, unref } from 'vue';
 import { createCommand, createKeyboardShortcut, renderMark } from '../utils';
 import { TextSettings } from '../enums';
 
@@ -15,30 +15,30 @@ export const FontStyle = Mark.create({
             isItalic: createCommand(({ editor, commands }) => {
                 const defaultValue = commands.getDefaultFontStyle();
 
-                return computed(() => editor.getAttributes(this.name)?.italic ?? defaultValue.value.italic);
+                return computed(() => editor.getAttributes(this.name)?.italic ?? unref(defaultValue).italic);
             }),
 
             isItalicAvailable: createCommand(({ commands }) => {
                 const font = commands.getFont();
                 const fontWeight = commands.getFontWeight();
 
-                return computed(() => font.value.isItalicSupported(fontWeight.value));
+                return computed(() => unref(font).isItalicSupported(unref(fontWeight)));
             }),
 
             getDefaultFontStyle: createCommand(({ commands }) => {
                 const preset = commands.getPreset();
 
                 return computed(() => ({
-                    italic: preset.value.common.font_style === 'italic'
+                    italic: unref(preset).common.font_style === 'italic'
                 }));
             }),
 
             toggleItalic: createCommand(({ commands }) => {
-                const isItalicAvailable = this.editor.commands.isItalicAvailable();
+                const isItalicAvailable = unref(this.editor.commands.isItalicAvailable());
 
-                if (!isItalicAvailable.value) return;
+                if (!isItalicAvailable) return;
 
-                commands.isItalic().value ? commands.removeItalic() : commands.applyItalic();
+                unref(commands.isItalic()) ? commands.removeItalic() : commands.applyItalic();
             }),
 
             applyItalic: createCommand(({ commands }) => {

package/lib/extensions/FontWeight.js

@@ -1,5 +1,5 @@
 import { Mark } from '@tiptap/vue-2';
-import { computed } from 'vue';
+import { computed, unref } from 'vue';
 import { createCommand, createKeyboardShortcut, renderMark } from '../utils';
 import { TextSettings } from '../enums';
 
@@ -14,7 +14,7 @@ export const FontWeight = Mark.create({
         return {
             applyFontWeight: createCommand(({ commands }, value) => {
                 commands.setMark(this.name, { value });
-                const font = commands.getFont().value;
+                const font = unref(commands.getFont());
 
                 if (!font.isItalicSupported(value)) {
                     commands.removeItalic();
@@ -22,8 +22,8 @@ export const FontWeight = Mark.create({
             }),
 
             toggleBold: createCommand(({ commands }) => {
-                const currentWeight = commands.getFontWeight().value;
-                const currentFont = commands.getFont().value;
+                const currentWeight = unref(commands.getFontWeight());
+                const currentFont = unref(commands.getFont());
                 const isBold = Number(currentWeight) >= 600;
                 const wantedWeight = isBold ? '400' : '700';
                 const nextWeight = currentFont.findClosestWeight(wantedWeight);
@@ -33,23 +33,24 @@ export const FontWeight = Mark.create({
 
             getFontWeight: createCommand(({ editor, commands }) => {
                 const defaultValue = commands.getDefaultFontWeight();
-                const font = commands.getFont();
+                const fontRef = commands.getFont();
 
                 return computed(() => {
-                    const weight = editor.getAttributes(this.name)?.value ?? defaultValue.value;
+                    const weight = editor.getAttributes(this.name)?.value ?? unref(defaultValue);
+                    const font = unref(fontRef);
 
-                    if (font.value.isWeightSupported(weight)) {
+                    if (font.isWeightSupported(weight)) {
                         return weight;
                     }
 
-                    return font.value.findClosestWeight(weight);
+                    return font.findClosestWeight(weight);
                 });
             }),
 
             getDefaultFontWeight: createCommand(({ commands }) => {
                 const preset = commands.getPreset();
 
-                return computed(() => preset.value.common.font_weight);
+                return computed(() => unref(preset).common.font_weight);
             })
         };
     },

package/lib/extensions/LineHeight.js

@@ -1,5 +1,5 @@
 import { Extension } from '@tiptap/vue-2';
-import { computed } from 'vue';
+import { computed, unref } from 'vue';
 import { createCommand, renderInlineSetting, convertLineHeight } from '../utils';
 import { NodeTypes, TextSettings } from '../enums';
 
@@ -33,7 +33,7 @@ export const LineHeight = Extension.create({
 
                             if (!value) return null;
 
-                            const wrapperEl = this.options.wrapperRef.value || this.options.wrapperRef;
+                            const wrapperEl = unref(this.options.wrapperRef);
                             const converted = convertLineHeight(value, element, wrapperEl);
 
                             return { desktop: converted, tablet: converted, mobile: converted };
@@ -61,18 +61,18 @@ export const LineHeight = Extension.create({
                 const device = commands.getDevice();
                 const defaultValue = commands.getDefaultLineHeight();
 
-                return computed(() => attribute.value?.[device.value] ?? defaultValue.value);
+                return computed(() => unref(attribute)?.[unref(device)] ?? unref(defaultValue));
             }),
 
             getDefaultLineHeight: createCommand(({ commands }) => {
                 const device = commands.getDevice();
                 const preset = commands.getPreset();
 
-                return computed(() => preset.value[device.value].line_height);
+                return computed(() => unref(preset)[unref(device)].line_height);
             }),
 
             applyLineHeight: createCommand(({ commands }, value) => {
-                const device = commands.getDevice().value;
+                const device = unref(commands.getDevice());
 
                 commands.setBlockAttributes(this.name, { [device]: value }, DEFAULTS);
             })

package/lib/extensions/Link.js

@@ -1,4 +1,5 @@
 import Base from '@tiptap/extension-link';
+import { unref } from 'vue';
 import { createCommand } from '../utils';
 import { LinkDestinations, LinkTargets } from '../enums';
 
@@ -32,13 +33,14 @@ export const Link = Base.extend({
 
             destination: {
                 default: LinkDestinations.URL,
+
                 parseHTML: (element) => {
                     const href = element.getAttribute('href');
 
                     if (!href.startsWith('#')) return LinkDestinations.URL;
 
                     const id = href.replace('#', '');
-                    const blocks = this.options.pageBlocks.value || this.options.pageBlocks;
+                    const blocks = unref(this.options.pageBlocks);
                     const block = blocks.find((block) => block.id === parseInt(id));
 
                     return block ? LinkDestinations.BLOCK : LinkDestinations.URL;

package/lib/extensions/StylePreset.js

@@ -1,5 +1,5 @@
 import { Extension } from '@tiptap/vue-2';
-import { computed, toRef } from 'vue';
+import { computed, toRef, unref } from 'vue';
 import { Heading } from '@tiptap/extension-heading';
 import { createCommand } from '../utils';
 import { Devices, NodeTypes, TextSettings } from '../enums';
@@ -35,7 +35,7 @@ export const StylePreset = Extension.create({
                         default: { id: this.options.defaultId },
 
                         parseHTML: (element) => {
-                            const presets = this.options.presets.value || this.options.presets;
+                            const presets = unref(this.options.presets);
 
                             if (element.parentElement.tagName === 'LI') return null;
 
@@ -79,11 +79,11 @@ export const StylePreset = Extension.create({
                 const selection = commands.getBlockAttributes('preset', { id: this.options.defaultId });
                 const presets = commands.getPresetList();
 
-                return computed(() => findPresetById(presets.value, selection.value.id));
+                return computed(() => findPresetById(unref(presets), unref(selection).id));
             }),
 
             applyPreset: createCommand(({ commands, chain }, presetId) => {
-                const presets = commands.getPresetList().value;
+                const presets = unref(commands.getPresetList());
                 const preset = findPresetById(presets, presetId);
                 const nodeType = preset.node?.type ?? NodeTypes.PARAGRAPH;
 
@@ -96,7 +96,7 @@ export const StylePreset = Extension.create({
                 }
 
                 for (const textAttribute of TextSettings.attributes) {
-                    attrs[textAttribute] = commands.getBlockAttributes(textAttribute).value;
+                    attrs[textAttribute] = unref(commands.getBlockAttributes(textAttribute));
                 }
 
                 chain().removeList().setNode(nodeType, attrs).run();

package/lib/extensions/TextDecoration.js

@@ -1,5 +1,5 @@
 import { Mark } from '@tiptap/vue-2';
-import { computed } from 'vue';
+import { computed, unref } from 'vue';
 import { createCommand, createKeyboardShortcut, renderMark } from '../utils';
 import { TextSettings } from '../enums';
 
@@ -16,13 +16,13 @@ export const TextDecoration = Mark.create({
             isUnderline: createCommand(({ commands, editor }) => {
                 const decoration = commands.getTextDecoration();
 
-                return computed(() => editor.isActive('link') || decoration.value.underline);
+                return computed(() => editor.isActive('link') || unref(decoration).underline);
             }),
 
             isStrikeThrough: createCommand(({ commands }) => {
                 const decoration = commands.getTextDecoration();
 
-                return computed(() => decoration.value.strike_through);
+                return computed(() => unref(decoration).strike_through);
             }),
 
             getTextDecoration: createCommand(({ editor, commands }) => {
@@ -32,8 +32,8 @@ export const TextDecoration = Mark.create({
                     const attrs = editor.getAttributes(this.name) ?? {};
 
                     return {
-                        underline: attrs.underline ?? defaultValue.value.underline,
-                        strike_through: attrs.strike_through ?? defaultValue.value.strike_through
+                        underline: attrs.underline ?? unref(defaultValue).underline,
+                        strike_through: attrs.strike_through ?? unref(defaultValue).strike_through
                     };
                 });
             }),
@@ -42,7 +42,7 @@ export const TextDecoration = Mark.create({
                 const preset = commands.getPreset();
 
                 return computed(() => {
-                    const decoration = preset.value.common.text_decoration;
+                    const decoration = unref(preset).common.text_decoration;
 
                     return {
                         underline: decoration.includes('underline'),
@@ -62,7 +62,7 @@ export const TextDecoration = Mark.create({
             }),
 
             toggleTextDecoration: createCommand(({ commands }, name) => {
-                const isEnabled = commands.getTextDecoration().value[name];
+                const isEnabled = unref(commands.getTextDecoration())[name];
 
                 isEnabled ? commands.removeTextDecoration(name) : commands.applyTextDecoration(name);
             }),
@@ -73,7 +73,7 @@ export const TextDecoration = Mark.create({
 
             removeTextDecoration: createCommand(({ commands }, name) => {
                 const mark = {
-                    ...commands.getTextDecoration().value,
+                    ...unref(commands.getTextDecoration()),
                     [name]: false
                 };
                 const isRemoveMark = !mark.underline && !mark.strike_through;

package/lib/extensions/core/NodeProcessor.js

@@ -1,5 +1,5 @@
 import { Extension } from '@tiptap/vue-2';
-import { computed } from 'vue';
+import { computed, unref } from 'vue';
 import { createCommand } from '../../utils';
 import { NodeTypes } from '../../enums';
 
@@ -9,7 +9,7 @@ export const NodeProcessor = Extension.create({
     addCommands() {
         return {
             setBlockAttributes: createCommand(({ commands }, name, attrs, defaults = {}) => {
-                const current = commands.getBlockAttributes(name).value ?? {};
+                const current = unref(commands.getBlockAttributes(name)) ?? {};
 
                 for (const type of NodeTypes.blocks) {
                     commands.updateAttributes(type, {

package/lib/extensions/list/List.js

@@ -1,5 +1,5 @@
 import { Node, wrappingInputRule } from '@tiptap/vue-2';
-import { computed } from 'vue';
+import { computed, unref } from 'vue';
 import { createCommand } from '../../utils';
 import { ListTypes, NodeTypes } from '../../enums';
 import { ListItem } from './ListItem';
@@ -70,11 +70,11 @@ export const List = Node.create({
             getListType: createCommand(({ commands }) => {
                 const attribute = commands.getBlockAttributes('bullet', { type: null });
 
-                return computed(() => attribute.value.type ?? null);
+                return computed(() => unref(attribute).type ?? null);
             }),
 
             applyList: createCommand(({ commands, chain }, type) => {
-                const currentType = commands.getListType().value;
+                const currentType = unref(commands.getListType());
 
                 // Remove List
                 if (currentType === type) {

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/package.json

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