@zipify/wysiwyg 1.1.1-0 → 1.1.1

package/dist/wysiwyg.css

@@ -591,34 +591,34 @@
     display: flex;
 }
 
-.zw-link-modal-header[data-v-aa42e2ce] {
+.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-aa42e2ce] {
+.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-aa42e2ce] {
+.zw-link-modal-header__unlink-icon[data-v-0a202ba4] {
     margin-right: var(--zw-offset-xxs);
 }
-.zw-link-modal-header__unlink-button[data-v-aa42e2ce] {
+.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, 0.1s color ease-out;
     will-change: opacity, color;
 }
-.zw-link-modal-header__unlink-button[data-v-aa42e2ce]:disabled {
+.zw-link-modal-header__unlink-button[data-v-0a202ba4]:disabled {
     opacity: 0.35;
 }
-.zw-link-modal-header__unlink-button[data-v-aa42e2ce]:focus,
-.zw-link-modal-header__unlink-button[data-v-aa42e2ce]:focus-within,
-.zw-link-modal-header__unlink-button[data-v-aa42e2ce]: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));
 }
 
@@ -627,13 +627,13 @@
     justify-content: flex-end;
 }
 
-.zw-link-modal[data-v-74b3b43a] {
+.zw-link-modal[data-v-28e9497e] {
     width: 266px;
 }
-.zw-link-modal__body[data-v-74b3b43a] {
+.zw-link-modal__body[data-v-28e9497e] {
     padding: var(--zw-offset-sm);
 }
-[data-v-74b3b43a] .zw-link-modal-dropdown__option {
+[data-v-28e9497e] .zw-link-modal-dropdown__option {
     width: 234px;
 }
 

package/dist/wysiwyg.mjs

@@ -13986,8 +13986,6 @@ const TextSettings = Object.freeze({
   TEXT_DECORATION: "text_decoration",
   SUPERSCRIPT: "superscript",
   MARGIN: "margin",
-  LINK: "link",
-  STYLE_PRESET: "style_preset",
   get attributes() {
     return [
       this.ALIGNMENT,
@@ -19754,7 +19752,7 @@ class NodeFactory {
     return { type, attrs };
   }
   static populateAllDevices(value) {
-    return { mobile: value, tablet: value, desktop: value };
+    return { mobile: null, tablet: value, desktop: value };
   }
 }
 const dataStorage = /* @__PURE__ */ new WeakMap();
@@ -22090,7 +22088,7 @@ const __vue2_script$9 = {
   components: { Icon, Button },
   setup(_, { emit }) {
     const editor = inject(InjectionTokens$1.EDITOR);
-    const isLink = editor.commands.isLink();
+    const isLink = computed(() => editor.isActive("link"));
     const removeLink = () => emit("remove-link");
     return { isLink, removeLink };
   }
@@ -22102,7 +22100,7 @@ var __component__$9 = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$9,
   false,
   __vue2_injectStyles$9,
-  "aa42e2ce",
+  "0a202ba4",
   null,
   null
 );
@@ -22177,12 +22175,11 @@ function useLink() {
     linkData.value.target = isChecked ? LinkTargets.BLANK : LinkTargets.SELF;
   }
   function prepareInitialFields() {
-    const link = editor.getAttributes(TextSettings.LINK);
     linkData.value.text = editor.commands.getSelectedText();
-    currentDestination.value.id = link.destination || LinkDestinations.URL;
-    linkData.value.target = link.target || LinkTargets.SELF;
-    if (link.href) {
-      destinationHrefs.value[currentDestination.value.id] = link.href;
+    currentDestination.value.id = editor.getAttributes("link").destination || LinkDestinations.URL;
+    linkData.value.target = editor.getAttributes("link").target || LinkTargets.SELF;
+    if (editor.getAttributes("link").href) {
+      destinationHrefs.value[currentDestination.value.id] = editor.getAttributes("link").href;
     }
   }
   function resetDestinations() {
@@ -22593,7 +22590,7 @@ const __vue2_script$4 = {
       urlValidator.reset();
     };
     const onBeforeOpened = () => {
-      editor.commands.extendMarkRange(TextSettings.LINK);
+      editor.commands.extendMarkRange("link");
       resetErrors();
       link.prepareInitialFields();
     };
@@ -22602,8 +22599,7 @@ const __vue2_script$4 = {
       wrapperRef,
       modalRef
     });
-    const isLink = editor.commands.isLink();
-    const isActive2 = computed(() => toggler.isOpened.value || unref(isLink));
+    const isActive2 = computed(() => toggler.isOpened.value || editor.isActive("link"));
     const updateLinkText = (value) => {
       resetErrors();
       link.updateText(value);
@@ -22643,7 +22639,7 @@ var __component__$4 = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$4,
   false,
   __vue2_injectStyles$4,
-  "74b3b43a",
+  "28e9497e",
   null,
   null
 );
@@ -23295,8 +23291,7 @@ const FontSize = Mark.create({
         return computed(() => unref(preset)[unref(device)].font_size.replace("px", ""));
       }),
       applyFontSize: createCommand(({ commands: commands2 }, value) => {
-        const device = unref(commands2.getDevice());
-        commands2.setMark(this.name, { [device]: value });
+        commands2.setMark(this.name, { desktop: value, tablet: value, mobile: null });
       }),
       increaseFontSize: createCommand(({ commands: commands2 }) => {
         const size2 = Number(unref(commands2.getFontSize()));
@@ -23335,7 +23330,7 @@ const FontSize = Mark.create({
         style: "font-size",
         getAttrs: (input) => {
           const value = parseSize(input);
-          return { desktop: value, tablet: value, mobile: value };
+          return { desktop: value, tablet: value, mobile: null };
         }
       }
     ];
@@ -23467,7 +23462,7 @@ const FontStyle = Mark.create({
         commands2.setMark(this.name, { italic: true });
       }),
       removeItalic: createCommand(({ commands: commands2 }) => {
-        commands2.setMark(this.name, { italic: false });
+        commands2.unsetMark(this.name);
       })
     };
   },
@@ -23493,22 +23488,21 @@ const FontStyle = Mark.create({
     ];
   },
   renderHTML({ HTMLAttributes: attrs }) {
-    const font_style = attrs.italic ? "italic" : "normal";
+    const font_style = attrs.italic ? "italic" : null;
     return renderMark({ font_style });
   }
 });
 const TextDecoration = Mark.create({
   name: TextSettings.TEXT_DECORATION,
-  priority: 1e3,
   addAttributes: () => ({
     underline: { default: false },
     strike_through: { default: false }
   }),
   addCommands() {
     return {
-      isUnderline: createCommand(({ commands: commands2 }) => {
+      isUnderline: createCommand(({ commands: commands2, editor }) => {
         const decoration = commands2.getTextDecoration();
-        return computed(() => unref(decoration).underline);
+        return computed(() => editor.isActive("link") || unref(decoration).underline);
       }),
       isStrikeThrough: createCommand(({ commands: commands2 }) => {
         const decoration = commands2.getTextDecoration();
@@ -23527,20 +23521,17 @@ const TextDecoration = Mark.create({
       }),
       getDefaultTextDecoration: createCommand(({ commands: commands2 }) => {
         const preset = commands2.getPreset();
-        const isLink = commands2.isLink();
-        const linkPreset = commands2.getLinkPreset();
         return computed(() => {
-          const decoration = [
-            unref(preset).common.text_decoration,
-            unref(isLink) ? unref(linkPreset).common.text_decoration : ""
-          ].join(" ");
+          const decoration = unref(preset).common.text_decoration;
           return {
             underline: decoration.includes("underline"),
             strike_through: decoration.includes("line-through")
           };
         });
       }),
-      toggleUnderline: createCommand(({ commands: commands2 }) => {
+      toggleUnderline: createCommand(({ commands: commands2, editor }) => {
+        if (editor.isActive("link"))
+          return;
         commands2.toggleTextDecoration("underline");
       }),
       toggleStrikeThrough: createCommand(({ commands: commands2 }) => {
@@ -23554,7 +23545,12 @@ const TextDecoration = Mark.create({
         commands2.setMark(this.name, { [name]: true });
       }),
       removeTextDecoration: createCommand(({ commands: commands2 }, name) => {
-        commands2.setMark(this.name, { ...unref(commands2.getTextDecoration()), [name]: false });
+        const mark = {
+          ...unref(commands2.getTextDecoration()),
+          [name]: false
+        };
+        const isRemoveMark = !mark.underline && !mark.strike_through;
+        isRemoveMark ? commands2.unsetMark(this.name) : commands2.setMark(this.name, mark);
       })
     };
   },
@@ -23606,8 +23602,6 @@ const TextDecoration = Mark.create({
       decorations.push("underline");
     if (attrs.strike_through)
       decorations.push("line-through");
-    if (!decorations.length)
-      decorations.push("none");
     return renderMark({ text_decoration: decorations.join(" ") });
   }
 });
@@ -23653,16 +23647,12 @@ const Alignment = Extension.create({
           parseHTML({ style: style2 }) {
             const textAlign = convertAlignment(style2.textAlign);
             if (textAlign) {
-              return {
-                desktop: textAlign,
-                tablet: textAlign,
-                mobile: textAlign
-              };
+              return { desktop: textAlign, tablet: textAlign, mobile: null };
             }
-            const mobile = style2.getPropertyValue("--zw-text-align-mobile") || null;
+            const mobile = null;
             const tablet = style2.getPropertyValue("--zw-text-align-tablet") || null;
             const desktop = style2.getPropertyValue("--zw-text-align-desktop") || null;
-            if (!mobile && !tablet && !desktop)
+            if (!tablet && !desktop)
               return null;
             return { desktop, tablet, mobile };
           },
@@ -23682,8 +23672,7 @@ const Alignment = Extension.create({
   addCommands() {
     return {
       applyAlignment: createCommand(({ commands: commands2 }, value) => {
-        const device = unref(commands2.getDevice());
-        commands2.setBlockAttributes(this.name, { [device]: value }, DEFAULTS$1);
+        commands2.setBlockAttributes(this.name, { desktop: value, tablet: value, mobile: null }, DEFAULTS$1);
       }),
       getAlignment: createCommand(({ commands: commands2 }) => {
         const attribute = commands2.getBlockAttributes(this.name, DEFAULTS$1);
@@ -23724,7 +23713,7 @@ const LineHeight = Extension.create({
             isRequired: false,
             parseHTML: (element) => {
               if (element.matches('[style*="--zw-line-height"]')) {
-                const mobile = element.style.getPropertyValue("--zw-line-height-mobile") || null;
+                const mobile = null;
                 const tablet = element.style.getPropertyValue("--zw-line-height-tablet") || null;
                 const desktop = element.style.getPropertyValue("--zw-line-height-desktop") || null;
                 return { mobile, tablet, desktop };
@@ -23734,7 +23723,7 @@ const LineHeight = Extension.create({
                 return null;
               const wrapperEl = unref(this.options.wrapperRef);
               const converted = convertLineHeight(value, element, wrapperEl);
-              return { desktop: converted, tablet: converted, mobile: converted };
+              return { desktop: converted, tablet: converted, mobile: null };
             },
             renderHTML(attrs) {
               if (!attrs.line_height)
@@ -23767,8 +23756,7 @@ const LineHeight = Extension.create({
         return computed(() => unref(preset)[unref(device)].line_height);
       }),
       applyLineHeight: createCommand(({ commands: commands2 }, value) => {
-        const device = unref(commands2.getDevice());
-        commands2.setBlockAttributes(this.name, { [device]: value }, DEFAULTS);
+        commands2.setBlockAttributes(this.name, { desktop: value, tablet: value, mobile: null }, DEFAULTS);
       })
     };
   }
@@ -24871,7 +24859,7 @@ const Link$1 = Mark.create({
   }
 });
 const Link = Link$1.extend({
-  name: TextSettings.LINK,
+  name: "link",
   addOptions() {
     var _a;
     return {
@@ -24914,14 +24902,19 @@ const Link = Link$1.extend({
       ...(_a = this.parent) == null ? void 0 : _a.call(this),
       applyLink: createCommand(({ commands: commands2, chain }, attributes) => {
         if (!commands2.getSelectedText()) {
-          return commands2.insertContent(NodeFactory.text(attributes.text, [
-            NodeFactory.mark(TextSettings.LINK, attributes)
-          ]));
+          return commands2.insertContent({
+            type: "text",
+            marks: [
+              {
+                type: "link",
+                attrs: { ...attributes }
+              }
+            ],
+            text: attributes.text
+          });
         }
-        return chain().setMark(this.name, attributes).transformText(() => attributes.text).extendMarkRange(TextSettings.LINK).run();
-      }),
-      isLink: createCommand(({ editor }) => computed(() => editor.isActive(TextSettings.LINK))),
-      getLinkPreset: createCommand(() => computed(() => this.options.preset))
+        return chain().setMark(this.name, attributes).transformText(() => attributes.text).extendMarkRange("link").run();
+      })
     };
   },
   renderHTML({ HTMLAttributes: attrs }) {

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

@@ -31,8 +31,8 @@
 </template>
 
 <script>
-import { computed, ref, inject, unref } from 'vue';
-import { LinkDestinations, TextSettings } from '../../../../enums';
+import { computed, ref, inject } from 'vue';
+import { LinkDestinations } from '../../../../enums';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { tooltip } from '../../../../directives';
 import { useValidator } from '../../../base/composables';
@@ -94,7 +94,7 @@ export default {
         };
 
         const onBeforeOpened = () => {
-            editor.commands.extendMarkRange(TextSettings.LINK);
+            editor.commands.extendMarkRange('link');
             resetErrors();
             link.prepareInitialFields();
         };
@@ -105,8 +105,7 @@ export default {
             modalRef
         });
 
-        const isLink = editor.commands.isLink();
-        const isActive = computed(() => toggler.isOpened.value || unref(isLink));
+        const isActive = computed(() => toggler.isOpened.value || editor.isActive('link'));
 
         const updateLinkText = (value) => {
             resetErrors();

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

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import { inject } from 'vue';
+import { computed, inject } from 'vue';
 import { Icon, Button } from '../../../base';
 import { InjectionTokens } from '../../../../injectionTokens';
 
@@ -21,7 +21,7 @@ export default {
 
     setup(_, { emit }) {
         const editor = inject(InjectionTokens.EDITOR);
-        const isLink = editor.commands.isLink();
+        const isLink = computed(() => editor.isActive('link'));
 
         const removeLink = () => emit('remove-link');
 

package/lib/components/toolbar/controls/link/__tests__/LinkControl.test.js

@@ -7,7 +7,7 @@ import LinkControlApply from '../LinkControlApply';
 import { LinkControlDestination } from '../destination';
 
 const createEditor = (isActive) => ({
-    commands: { isLink: () => isActive ?? false }
+    isActive: () => isActive ?? false
 });
 
 function createComponent({ editor }) {

package/lib/components/toolbar/controls/link/__tests__/LinkControlHeader.test.js

@@ -4,7 +4,7 @@ import { Button } from '../../../../base';
 import LinkControlHeader from '../LinkControlHeader';
 
 const createEditor = (isActive) => ({
-    commands: { isLink: () => isActive ?? false }
+    isActive: () => isActive ?? false
 });
 
 function createComponent({ editor }) {

package/lib/components/toolbar/controls/link/composables/useLink.js

@@ -1,5 +1,5 @@
 import { ref, inject } from 'vue';
-import { LinkTargets, LinkDestinations, TextSettings } from '../../../../../enums';
+import { LinkTargets, LinkDestinations } from '../../../../../enums';
 import { InjectionTokens } from '../../../../../injectionTokens';
 
 export function useLink() {
@@ -15,14 +15,12 @@ export function useLink() {
     }
 
     function prepareInitialFields() {
-        const link = editor.getAttributes(TextSettings.LINK);
-
         linkData.value.text = editor.commands.getSelectedText();
-        currentDestination.value.id = link.destination || LinkDestinations.URL;
-        linkData.value.target = link.target || LinkTargets.SELF;
+        currentDestination.value.id = editor.getAttributes('link').destination || LinkDestinations.URL;
+        linkData.value.target = editor.getAttributes('link').target || LinkTargets.SELF;
 
-        if (link.href) {
-            destinationHrefs.value[currentDestination.value.id] = link.href;
+        if (editor.getAttributes('link').href) {
+            destinationHrefs.value[currentDestination.value.id] = editor.getAttributes('link').href;
         }
     }
 

package/lib/enums/TextSettings.js

@@ -10,8 +10,6 @@ export const TextSettings = Object.freeze({
     TEXT_DECORATION: 'text_decoration',
     SUPERSCRIPT: 'superscript',
     MARGIN: 'margin',
-    LINK: 'link',
-    STYLE_PRESET: 'style_preset',
 
     get attributes() {
         return [

package/lib/extensions/Alignment.js

@@ -23,14 +23,13 @@ export const Alignment = Extension.create({
                         const textAlign = convertAlignment(style.textAlign);
 
                         if (textAlign) {
-                            return {
-                                desktop: textAlign,
-                                tablet: textAlign,
-                                mobile: textAlign
-                            };
+                            // return { desktop: textAlign, tablet: textAlign, mobile: textAlign };
+
+                            // Temporary until release BUILDER_MODES
+                            return { desktop: textAlign, tablet: textAlign, mobile: null };
                         }
 
-                        const mobile = style.getPropertyValue('--zw-text-align-mobile') || null;
+                        const mobile = null; //style.getPropertyValue('--zw-text-align-mobile') || null;
                         const tablet = style.getPropertyValue('--zw-text-align-tablet') || null;
                         const desktop = style.getPropertyValue('--zw-text-align-desktop') || null;
 
@@ -56,9 +55,12 @@ export const Alignment = Extension.create({
     addCommands() {
         return {
             applyAlignment: createCommand(({ commands }, value) => {
-                const device = unref(commands.getDevice());
+                // const device = unref(commands.getDevice());
+                //
+                // commands.setBlockAttributes(this.name, { [device]: value }, DEFAULTS);
 
-                commands.setBlockAttributes(this.name, { [device]: value }, DEFAULTS);
+                // Temporary until release BUILDER_MODES
+                commands.setBlockAttributes(this.name, { desktop: value, tablet: value, mobile: null }, DEFAULTS);
             }),
 
             getAlignment: createCommand(({ commands }) => {

package/lib/extensions/FontSize.js

@@ -36,9 +36,12 @@ export const FontSize = Mark.create({
             }),
 
             applyFontSize: createCommand(({ commands }, value) => {
-                const device = unref(commands.getDevice());
+                // const device = unref(commands.getDevice());
 
-                commands.setMark(this.name, { [device]: value });
+                // commands.setMark(this.name, { [device]: value });
+
+                // Temporary until release BUILDER_MODES
+                commands.setMark(this.name, { desktop: value, tablet: value, mobile: null });
             }),
 
             increaseFontSize: createCommand(({ commands }) => {
@@ -88,7 +91,9 @@ export const FontSize = Mark.create({
                 getAttrs: (input) => {
                     const value = parseSize(input);
 
-                    return { desktop: value, tablet: value, mobile: value };
+                    // return { desktop: value, tablet: value, mobile: value };
+                    // Temporary until release BUILDER_MODES
+                    return { desktop: value, tablet: value, mobile: null };
                 }
             }
         ];

package/lib/extensions/FontStyle.js

@@ -46,7 +46,7 @@ export const FontStyle = Mark.create({
             }),
 
             removeItalic: createCommand(({ commands }) => {
-                commands.setMark(this.name, { italic: false });
+                commands.unsetMark(this.name);
             })
         };
     },
@@ -76,7 +76,7 @@ export const FontStyle = Mark.create({
     },
 
     renderHTML({ HTMLAttributes: attrs }) {
-        const font_style = attrs.italic ? 'italic' : 'normal';
+        const font_style = attrs.italic ? 'italic' : null;
 
         return renderMark({ font_style });
     }

package/lib/extensions/LineHeight.js

@@ -22,7 +22,7 @@ export const LineHeight = Extension.create({
 
                         parseHTML: (element) => {
                             if (element.matches('[style*="--zw-line-height"]')) {
-                                const mobile = element.style.getPropertyValue('--zw-line-height-mobile') || null;
+                                const mobile = null; // element.style.getPropertyValue('--zw-line-height-mobile') || null;
                                 const tablet = element.style.getPropertyValue('--zw-line-height-tablet') || null;
                                 const desktop = element.style.getPropertyValue('--zw-line-height-desktop') || null;
 
@@ -36,7 +36,10 @@ export const LineHeight = Extension.create({
                             const wrapperEl = unref(this.options.wrapperRef);
                             const converted = convertLineHeight(value, element, wrapperEl);
 
-                            return { desktop: converted, tablet: converted, mobile: converted };
+                            // return { desktop: converted, tablet: converted, mobile: converted };
+
+                            // Temporary until release BUILDER_MODES
+                            return { desktop: converted, tablet: converted, mobile: null };
                         },
 
                         renderHTML(attrs) {
@@ -72,9 +75,12 @@ export const LineHeight = Extension.create({
             }),
 
             applyLineHeight: createCommand(({ commands }, value) => {
-                const device = unref(commands.getDevice());
+                // const device = unref(commands.getDevice());
+                //
+                // commands.setBlockAttributes(this.name, { [device]: value }, DEFAULTS);
 
-                commands.setBlockAttributes(this.name, { [device]: value }, DEFAULTS);
+                // Temporary until release BUILDER_MODES
+                commands.setBlockAttributes(this.name, { desktop: value, tablet: value, mobile: null }, DEFAULTS);
             })
         };
     }

package/lib/extensions/Link.js

@@ -1,11 +1,10 @@
 import Base from '@tiptap/extension-link';
-import { computed, unref } from 'vue';
+import { unref } from 'vue';
 import { createCommand } from '../utils';
-import { LinkDestinations, LinkTargets, TextSettings } from '../enums';
-import { NodeFactory } from '../services';
+import { LinkDestinations, LinkTargets } from '../enums';
 
 export const Link = Base.extend({
-    name: TextSettings.LINK,
+    name: 'link',
 
     addOptions() {
         return {
@@ -53,23 +52,26 @@ export const Link = Base.extend({
     addCommands() {
         return {
             ...this.parent?.(),
-
             applyLink: createCommand(({ commands, chain }, attributes) => {
                 if (!commands.getSelectedText()) {
-                    return commands.insertContent(NodeFactory.text(attributes.text, [
-                        NodeFactory.mark(TextSettings.LINK, attributes)
-                    ]));
+                    return commands.insertContent({
+                        type: 'text',
+                        marks: [
+                            {
+                                type: 'link',
+                                attrs: { ...attributes }
+                            }
+                        ],
+                        text: attributes.text
+                    });
                 }
 
                 return chain()
                     .setMark(this.name, attributes)
                     .transformText(() => attributes.text)
-                    .extendMarkRange(TextSettings.LINK)
+                    .extendMarkRange('link')
                     .run();
-            }),
-
-            isLink: createCommand(({ editor }) => computed(() => editor.isActive(TextSettings.LINK))),
-            getLinkPreset: createCommand(() => computed(() => this.options.preset))
+            })
         };
     },