@zipify/wysiwyg 1.2.0 → 1.2.1-0

package/dist/wysiwyg.css

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

package/dist/wysiwyg.mjs

@@ -13986,6 +13986,8 @@ const TextSettings = Object.freeze({
   TEXT_DECORATION: "text_decoration",
   SUPERSCRIPT: "superscript",
   MARGIN: "margin",
+  LINK: "link",
+  STYLE_PRESET: "style_preset",
   get attributes() {
     return [
       this.ALIGNMENT,
@@ -22088,7 +22090,7 @@ const __vue2_script$9 = {
   components: { Icon, Button },
   setup(_, { emit }) {
     const editor = inject(InjectionTokens$1.EDITOR);
-    const isLink = computed(() => editor.isActive("link"));
+    const isLink = editor.commands.isLink();
     const removeLink = () => emit("remove-link");
     return { isLink, removeLink };
   }
@@ -22100,7 +22102,7 @@ var __component__$9 = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$9,
   false,
   __vue2_injectStyles$9,
-  "0a202ba4",
+  "aa42e2ce",
   null,
   null
 );
@@ -22175,11 +22177,12 @@ 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 = 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;
+    currentDestination.value.id = link.destination || LinkDestinations.URL;
+    linkData.value.target = link.target || LinkTargets.SELF;
+    if (link.href) {
+      destinationHrefs.value[currentDestination.value.id] = link.href;
     }
   }
   function resetDestinations() {
@@ -22590,7 +22593,7 @@ const __vue2_script$4 = {
       urlValidator.reset();
     };
     const onBeforeOpened = () => {
-      editor.commands.extendMarkRange("link");
+      editor.commands.extendMarkRange(TextSettings.LINK);
       resetErrors();
       link.prepareInitialFields();
     };
@@ -22599,7 +22602,8 @@ const __vue2_script$4 = {
       wrapperRef,
       modalRef
     });
-    const isActive2 = computed(() => toggler.isOpened.value || editor.isActive("link"));
+    const isLink = editor.commands.isLink();
+    const isActive2 = computed(() => toggler.isOpened.value || unref(isLink));
     const updateLinkText = (value) => {
       resetErrors();
       link.updateText(value);
@@ -22639,7 +22643,7 @@ var __component__$4 = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$4,
   false,
   __vue2_injectStyles$4,
-  "28e9497e",
+  "74b3b43a",
   null,
   null
 );
@@ -23462,7 +23466,7 @@ const FontStyle = Mark.create({
         commands2.setMark(this.name, { italic: true });
       }),
       removeItalic: createCommand(({ commands: commands2 }) => {
-        commands2.unsetMark(this.name);
+        commands2.setMark(this.name, { italic: false });
       })
     };
   },
@@ -23488,21 +23492,22 @@ const FontStyle = Mark.create({
     ];
   },
   renderHTML({ HTMLAttributes: attrs }) {
-    const font_style = attrs.italic ? "italic" : null;
+    const font_style = attrs.italic ? "italic" : "normal";
     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, editor }) => {
+      isUnderline: createCommand(({ commands: commands2 }) => {
         const decoration = commands2.getTextDecoration();
-        return computed(() => editor.isActive("link") || unref(decoration).underline);
+        return computed(() => unref(decoration).underline);
       }),
       isStrikeThrough: createCommand(({ commands: commands2 }) => {
         const decoration = commands2.getTextDecoration();
@@ -23521,17 +23526,20 @@ 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;
+          const decoration = [
+            unref(preset).common.text_decoration,
+            unref(isLink) ? unref(linkPreset).common.text_decoration : ""
+          ].join(" ");
           return {
             underline: decoration.includes("underline"),
             strike_through: decoration.includes("line-through")
           };
         });
       }),
-      toggleUnderline: createCommand(({ commands: commands2, editor }) => {
-        if (editor.isActive("link"))
-          return;
+      toggleUnderline: createCommand(({ commands: commands2 }) => {
         commands2.toggleTextDecoration("underline");
       }),
       toggleStrikeThrough: createCommand(({ commands: commands2 }) => {
@@ -23545,12 +23553,7 @@ const TextDecoration = Mark.create({
         commands2.setMark(this.name, { [name]: true });
       }),
       removeTextDecoration: createCommand(({ commands: commands2 }, name) => {
-        const mark = {
-          ...unref(commands2.getTextDecoration()),
-          [name]: false
-        };
-        const isRemoveMark = !mark.underline && !mark.strike_through;
-        isRemoveMark ? commands2.unsetMark(this.name) : commands2.setMark(this.name, mark);
+        commands2.setMark(this.name, { ...unref(commands2.getTextDecoration()), [name]: false });
       })
     };
   },
@@ -23602,6 +23605,8 @@ 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(" ") });
   }
 });
@@ -24859,7 +24864,7 @@ const Link$1 = Mark.create({
   }
 });
 const Link = Link$1.extend({
-  name: "link",
+  name: TextSettings.LINK,
   addOptions() {
     var _a;
     return {
@@ -24902,19 +24907,14 @@ 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({
-            type: "text",
-            marks: [
-              {
-                type: "link",
-                attrs: { ...attributes }
-              }
-            ],
-            text: attributes.text
-          });
+          return commands2.insertContent(NodeFactory.text(attributes.text, [
+            NodeFactory.mark(TextSettings.LINK, attributes)
+          ]));
         }
-        return chain().setMark(this.name, attributes).transformText(() => attributes.text).extendMarkRange("link").run();
-      })
+        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))
     };
   },
   renderHTML({ HTMLAttributes: attrs }) {

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

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

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

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import { computed, inject } from 'vue';
+import { 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 = computed(() => editor.isActive('link'));
+        const isLink = editor.commands.isLink();
 
         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) => ({
-    isActive: () => isActive ?? false
+    commands: { isLink: () => 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) => ({
-    isActive: () => isActive ?? false
+    commands: { isLink: () => 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 } from '../../../../../enums';
+import { LinkTargets, LinkDestinations, TextSettings } from '../../../../../enums';
 import { InjectionTokens } from '../../../../../injectionTokens';
 
 export function useLink() {
@@ -15,12 +15,14 @@ export function useLink() {
     }
 
     function prepareInitialFields() {
+        const link = editor.getAttributes(TextSettings.LINK);
+
         linkData.value.text = editor.commands.getSelectedText();
-        currentDestination.value.id = editor.getAttributes('link').destination || LinkDestinations.URL;
-        linkData.value.target = editor.getAttributes('link').target || LinkTargets.SELF;
+        currentDestination.value.id = link.destination || LinkDestinations.URL;
+        linkData.value.target = link.target || LinkTargets.SELF;
 
-        if (editor.getAttributes('link').href) {
-            destinationHrefs.value[currentDestination.value.id] = editor.getAttributes('link').href;
+        if (link.href) {
+            destinationHrefs.value[currentDestination.value.id] = link.href;
         }
     }
 

package/lib/enums/TextSettings.js

@@ -10,6 +10,8 @@ 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/FontStyle.js

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

package/lib/extensions/Link.js

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

package/lib/extensions/TextDecoration.js

@@ -5,6 +5,7 @@ import { TextSettings } from '../enums';
 
 export const TextDecoration = Mark.create({
     name: TextSettings.TEXT_DECORATION,
+    priority: 1000,
 
     addAttributes: () => ({
         underline: { default: false },
@@ -13,10 +14,10 @@ export const TextDecoration = Mark.create({
 
     addCommands() {
         return {
-            isUnderline: createCommand(({ commands, editor }) => {
+            isUnderline: createCommand(({ commands }) => {
                 const decoration = commands.getTextDecoration();
 
-                return computed(() => editor.isActive('link') || unref(decoration).underline);
+                return computed(() => unref(decoration).underline);
             }),
 
             isStrikeThrough: createCommand(({ commands }) => {
@@ -40,9 +41,14 @@ export const TextDecoration = Mark.create({
 
             getDefaultTextDecoration: createCommand(({ commands }) => {
                 const preset = commands.getPreset();
+                const isLink = commands.isLink();
+                const linkPreset = commands.getLinkPreset();
 
                 return computed(() => {
-                    const decoration = unref(preset).common.text_decoration;
+                    const decoration = [
+                        unref(preset).common.text_decoration,
+                        unref(isLink) ? unref(linkPreset).common.text_decoration : ''
+                    ].join(' ');
 
                     return {
                         underline: decoration.includes('underline'),
@@ -51,9 +57,7 @@ export const TextDecoration = Mark.create({
                 });
             }),
 
-            toggleUnderline: createCommand(({ commands, editor }) => {
-                if (editor.isActive('link')) return;
-
+            toggleUnderline: createCommand(({ commands }) => {
                 commands.toggleTextDecoration('underline');
             }),
 
@@ -72,13 +76,7 @@ export const TextDecoration = Mark.create({
             }),
 
             removeTextDecoration: createCommand(({ commands }, name) => {
-                const mark = {
-                    ...unref(commands.getTextDecoration()),
-                    [name]: false
-                };
-                const isRemoveMark = !mark.underline && !mark.strike_through;
-
-                isRemoveMark ? commands.unsetMark(this.name) : commands.setMark(this.name, mark);
+                commands.setMark(this.name, { ...unref(commands.getTextDecoration()), [name]: false });
             })
         };
     },
@@ -135,6 +133,7 @@ export const TextDecoration = Mark.create({
 
         if (attrs.underline) decorations.push('underline');
         if (attrs.strike_through) decorations.push('line-through');
+        if (!decorations.length) decorations.push('none');
 
         return renderMark({ text_decoration: decorations.join(' ') });
     }

package/lib/extensions/__tests__/FontFamily.test.js

@@ -6,10 +6,11 @@ import { FontFamily } from '../FontFamily';
 import { FontWeight } from '../FontWeight';
 import { FontStyle } from '../FontStyle';
 import { ContentNormalizer, NodeFactory } from '../../services';
+import { TextSettings } from '../../enums';
 import { buildCoreExtensions } from '../core';
 
 const MockStylePreset = Extension.create({
-    name: 'style_preset',
+    name: TextSettings.STYLE_PRESET,
 
     addCommands() {
         return {
@@ -30,10 +31,10 @@ function createEditor({ content }) {
             MockStylePreset,
             FontFamily.configure({
                 fonts: [
-                    new Font({ name: 'Lato', styles: ['400', '700', '700i'] }),
+                    new Font({ name: 'Lato', styles: ['400', '400i', '700', '700i'] }),
                     new Font({ name: 'Bungee', styles: ['400'] }),
-                    new Font({ name: 'Roboto', styles: ['400'] }),
-                    new Font({ name: 'Josefin Slab', styles: ['400'] })
+                    new Font({ name: 'Roboto', styles: ['400', '400i'] }),
+                    new Font({ name: 'Josefin Slab', styles: ['400', '400i'] })
                 ],
                 defaultFont: 'Lato'
             }),
@@ -51,7 +52,7 @@ describe('get font family', () => {
     test('should get from selection', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('font_family', { value: 'Bungee' })
+                NodeFactory.mark(TextSettings.FONT_FAMILY, { value: 'Bungee' })
             ]))
         });
 
@@ -165,7 +166,7 @@ describe('rendering', () => {
     test('should render html', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('font_family', { value: 'Bungee' })
+                NodeFactory.mark(TextSettings.FONT_FAMILY, { value: 'Bungee' })
             ]))
         });
 

package/lib/extensions/__tests__/FontWeight.test.js

@@ -6,10 +6,11 @@ import { FontWeight } from '../FontWeight';
 import { FontFamily } from '../FontFamily';
 import { FontStyle } from '../FontStyle';
 import { ContentNormalizer, NodeFactory } from '../../services';
+import { TextSettings } from '../../enums';
 import { buildCoreExtensions } from '../core';
 
 const MockStylePreset = Extension.create({
-    name: 'style_preset',
+    name: TextSettings.STYLE_PRESET,
 
     addCommands() {
         return {
@@ -30,8 +31,8 @@ function createEditor({ content }) {
             MockStylePreset,
             FontFamily.configure({
                 fonts: [
-                    new Font({ name: 'Lato', styles: ['400', '700'] }),
-                    new Font({ name: 'Bungee', styles: ['300', '800'] })
+                    new Font({ name: 'Lato', styles: ['400', '400i', '700', '700i'] }),
+                    new Font({ name: 'Bungee', styles: ['300', '300i', '800', '800i'] })
                 ]
             }),
             FontWeight,
@@ -48,7 +49,7 @@ describe('get font weight', () => {
     test('should get from selection', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('font_weight', { value: '700' })
+                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
             ]))
         });
 
@@ -78,7 +79,7 @@ describe('get font weight', () => {
     test('should get closest available font weight', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('font_weight', { value: '800' })
+                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '800' })
             ]))
         });
 
@@ -102,7 +103,7 @@ describe('apply font weight', () => {
     test('should toggle weight to bold', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('font_weight', { value: '400' })
+                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '400' })
             ]))
         });
 
@@ -115,7 +116,7 @@ describe('apply font weight', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
                 NodeFactory.mark('font_family', { value: 'Bungee' }),
-                NodeFactory.mark('font_weight', { value: '400' })
+                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '400' })
             ]))
         });
 
@@ -127,7 +128,7 @@ describe('apply font weight', () => {
     test('should toggle weight to medium', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('font_weight', { value: '700' })
+                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
             ]))
         });
 
@@ -140,7 +141,7 @@ describe('apply font weight', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
                 NodeFactory.mark('font_family', { value: 'Bungee' }),
-                NodeFactory.mark('font_weight', { value: '800' })
+                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '800' })
             ]))
         });
 
@@ -154,7 +155,7 @@ describe('rendering', () => {
     test('should render html', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('font_weight', { value: '700' })
+                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
             ]))
         });