@zipify/wysiwyg 1.1.1 → 1.2.1-1

package/jest.config.js

@@ -10,6 +10,9 @@ module.exports = {
     moduleNameMapper: {
         '^.+\\.svg$': '<rootDir>/lib/__mocks__/svgMock.js'
     },
+    snapshotFormat: {
+        printBasicPrototype: true
+    },
     testEnvironment: '<rootDir>/config/jest/TestEnvironment.js',
     setupFilesAfterEnv: ['<rootDir>/config/jest/setupMatchers.js'],
     setupFiles: ['<rootDir>/config/jest/setupTests.js'],

package/lib/components/base/Modal.vue

@@ -3,6 +3,7 @@
         <div
             class="zw-modal"
             ref="hostRef"
+            tabindex="-1"
             :style="modalStyles"
             v-if="isOpened"
             v-out-click="close"
@@ -13,9 +14,9 @@
 </template>
 
 <script>
-import { computed, ref } from 'vue';
+import { computed, nextTick, ref, watch } from 'vue';
 import { outClick } from '../../directives';
-import { useDeselectionLock, useModalToggler } from './composables';
+import { useDeselectionLock, useElementRef, useModalToggler } from './composables';
 
 export default {
     name: 'Modal',
@@ -46,12 +47,19 @@ export default {
             type: [Number, String],
             required: false,
             default: 1000
+        },
+
+        focusFirstControl: {
+            type: Boolean,
+            required: false,
+            default: false
         }
     },
 
     setup(props) {
         const toggler = props.toggler || useModalToggler();
         const hostRef = ref(null);
+        const hostEl = useElementRef(hostRef);
 
         const modalStyles = computed(() => ({
             '--zw-modal-max-height': `${props.maxHeight}px`,
@@ -63,6 +71,17 @@ export default {
             hostRef
         });
 
+        if (props.focusFirstControl) {
+            watch(toggler.isOpened, async (_, wasOpened) => {
+                if (wasOpened) return;
+
+                await nextTick();
+                const focusableEl = hostEl.value.querySelector(':where(a, button, input):not(:disabled, [data-initial-focus="false"])');
+
+                (focusableEl || hostEl.value).focus();
+            });
+        }
+
         return {
             hostRef,
             modalStyles,

package/lib/components/base/__tests__/Modal.test.js

@@ -4,6 +4,7 @@ import { InjectionTokens } from '../../../injectionTokens';
 import Modal from '../Modal';
 
 jest.mock('../composables', () => ({
+    ...jest.requireActual('../composables'),
     useDeselectionLock: jest.fn(),
     useModalToggler: jest.fn()
 }));

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

@@ -4,10 +4,10 @@
             <Icon name="link" size="28px" auto-color />
         </Button>
 
-        <Modal class="zw-link-modal" :toggler="toggler" ref="modalRef">
+        <Modal class="zw-link-modal" :toggler="toggler" ref="modalRef" focus-first-control>
             <LinkControlHeader @remove-link="removeLink" />
 
-            <div class="zw-link-modal__body">
+            <form class="zw-link-modal__body" @submit.prevent="applyLink" data-test-selector="form">
                 <TextField
                     class="zw-margin-bottom--sm"
                     :value="link.linkData.value.text"
@@ -24,21 +24,28 @@
                     @reset-errors="resetErrors"
                 />
 
-                <LinkControlApply @cancel="toggler.close" @apply="applyLink" />
-            </div>
+                <div class="zw-link-modal__actions">
+                    <Button class="zw-margin-right--xs" skin="secondary" @click="toggler.close">
+                        Cancel
+                    </Button>
+
+                    <Button type="submit" skin="primary">
+                        Save
+                    </Button>
+                </div>
+            </form>
         </Modal>
     </div>
 </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';
 import { Button, Icon, Modal, TextField, useModalToggler } from '../../../base';
 import LinkControlHeader from './LinkControlHeader';
-import LinkControlApply from './LinkControlApply';
 import { useLink } from './composables';
 import { LinkControlDestination } from './destination';
 
@@ -47,7 +54,6 @@ export default {
 
     components: {
         LinkControlDestination,
-        LinkControlApply,
         LinkControlHeader,
         TextField,
         Modal,
@@ -94,7 +100,7 @@ export default {
         };
 
         const onBeforeOpened = () => {
-            editor.commands.extendMarkRange('link');
+            editor.commands.extendMarkRange(TextSettings.LINK);
             resetErrors();
             link.prepareInitialFields();
         };
@@ -105,7 +111,8 @@ export default {
             modalRef
         });
 
-        const isActive = computed(() => toggler.isOpened.value || editor.isActive('link'));
+        const isLink = editor.commands.isLink();
+        const isActive = computed(() => unref(toggler.isOpened) || unref(isLink));
 
         const updateLinkText = (value) => {
             resetErrors();
@@ -154,6 +161,11 @@ export default {
     padding: var(--zw-offset-sm);
 }
 
+.zw-link-modal__actions {
+    display: flex;
+    justify-content: flex-end;
+}
+
 ::v-deep .zw-link-modal-dropdown__option {
     width: 234px;
 }

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

@@ -2,7 +2,7 @@
     <div class="zw-link-modal-header">
         <span class="zw-link-modal-header__title">Link</span>
 
-        <Button class="zw-link-modal-header__unlink-button" :disabled="!isLink" @click="removeLink">
+        <Button class="zw-link-modal-header__unlink-button" :disabled="!isLink" data-initial-focus="false" @click="removeLink">
             <Icon class="zw-link-modal-header__unlink-icon" name="unlink" size="14px" auto-color />
             Remove
         </Button>
@@ -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

@@ -3,11 +3,10 @@ import { ref, nextTick } from 'vue';
 import LinkControl from '../LinkControl';
 import { InjectionTokens } from '../../../../../injectionTokens';
 import { Button, TextField } from '../../../../base';
-import LinkControlApply from '../LinkControlApply';
 import { LinkControlDestination } from '../destination';
 
 const createEditor = (isActive) => ({
-    isActive: () => isActive ?? false
+    commands: { isLink: () => isActive ?? false }
 });
 
 function createComponent({ editor }) {
@@ -19,6 +18,10 @@ function createComponent({ editor }) {
     });
 }
 
+const SELECTORS = {
+    FORM: '[data-test-selector="form"]'
+};
+
 describe('selection value', () => {
     test('should render link status', () => {
         const editor = createEditor(true );
@@ -35,9 +38,8 @@ describe('validation', () => {
         const wrapper = createComponent({ editor });
         const textFieldWrapper = wrapper.findComponent(TextField);
         const linkControlDestinationWrapper = wrapper.findComponent(LinkControlDestination);
-        const applyWrapper = wrapper.findComponent(LinkControlApply);
 
-        applyWrapper.vm.$emit('apply');
+        await wrapper.find(SELECTORS.FORM).trigger('submit');
         await nextTick();
 
         expect(textFieldWrapper.props('error')).toBe('Can\'t be empty');
@@ -49,9 +51,8 @@ describe('validation', () => {
         const wrapper = createComponent({ editor });
         const textFieldWrapper = wrapper.findComponent(TextField);
         const linkControlDestinationWrapper = wrapper.findComponent(LinkControlDestination);
-        const applyWrapper = wrapper.findComponent(LinkControlApply);
 
-        applyWrapper.vm.$emit('apply');
+        await wrapper.find(SELECTORS.FORM).trigger('submit');
         textFieldWrapper.vm.$emit('input', 'hello');
 
         await nextTick();
@@ -65,9 +66,8 @@ describe('validation', () => {
         const wrapper = createComponent({ editor });
         const textFieldWrapper = wrapper.findComponent(TextField);
         const linkControlDestinationWrapper = wrapper.findComponent(LinkControlDestination);
-        const applyWrapper = wrapper.findComponent(LinkControlApply);
 
-        applyWrapper.vm.$emit('apply');
+        await wrapper.find(SELECTORS.FORM).trigger('submit');
         linkControlDestinationWrapper.vm.$emit('reset-errors');
 
         await nextTick();

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;
         }
     }
 
@@ -35,7 +37,7 @@ export function useLink() {
             const isRelative = !!url.startsWith('/');
             const hasProtocol = /^https?:\/\/.+$/i.test(url);
 
-            return  isRelative || hasProtocol ? url : `https://${url}`;
+            return isRelative || hasProtocol ? url : `https://${url}`;
         }
 
         return destinationHrefs.value[currentDestination.value.id];
@@ -56,6 +58,8 @@ export function useLink() {
 
     function removeLink() {
         editor.chain().focus().unsetLink().run();
+        resetDestinations();
+        updateTarget(false);
     }
 
     function updateLink(value) {

package/lib/composables/__tests__/__snapshots__/useEditor.test.js.snap

@@ -22,4 +22,4 @@ Array [
 ]
 `;
 
-exports[`life cycle should mount editor 1`] = `"<p class=\\"zw-style\\">test</p>"`;
+exports[`life cycle should mount editor 1`] = `"<p class="zw-style">test</p>"`;

package/lib/composables/useEditor.js

@@ -1,5 +1,5 @@
 import { Editor } from '@tiptap/vue-2';
-import { onUnmounted, watch, reactive } from 'vue';
+import { onUnmounted, watch, reactive, unref } from 'vue';
 import { ContentNormalizer } from '../services';
 import { markWysiwygContent, unmarkWysiwygContent } from '../utils';
 
@@ -8,7 +8,8 @@ export function useEditor({ content, onChange, extensions, isReadonlyRef }) {
         content: ContentNormalizer.normalize(content.value),
         onUpdate: () => onChange(markWysiwygContent(editor.getJSON())),
         extensions,
-        injectCSS: false
+        injectCSS: false,
+        editable: !unref(isReadonlyRef)
     }));
 
     onUnmounted(() => editor.destroy());
@@ -24,7 +25,7 @@ export function useEditor({ content, onChange, extensions, isReadonlyRef }) {
         }
     });
 
-    watch(isReadonlyRef, (isReadonly) => editor.setEditable(!isReadonly), { immediate: true });
+    watch(isReadonlyRef, (isReadonly) => editor.setEditable(!isReadonly));
 
     return editor;
 }

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/FontWeight.js

@@ -62,6 +62,8 @@ export const FontWeight = Mark.create({
 
     parseHTML() {
         const getAttrs = (value) => {
+            if (value === 'bold') return { value: '700' };
+
             return Number(value) ? { value } : false;
         };
 

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/StylePreset.js

@@ -70,16 +70,46 @@ export const StylePreset = Extension.create({
             return presets.find((preset) => id === preset.id);
         }
 
+        function mergeSettings(source, target) {
+            const settings = {};
+
+            for (const name of Object.keys(source)) {
+                const sourceValue = source[name];
+                const targetValue = target[name];
+                const isInherit = !targetValue || targetValue === 'inherit';
+
+                settings[name] = isInherit ? sourceValue : targetValue;
+            }
+
+            return settings;
+        }
+
         return {
             getPresetList: createCommand(() => computed(() => {
                 return this.options.presets.filter((preset) => !preset.hidden);
             })),
 
             getPreset: createCommand(({ commands }) => {
-                const selection = commands.getBlockAttributes('preset', { id: this.options.defaultId });
-                const presets = commands.getPresetList();
+                const selectionRef = commands.getBlockAttributes('preset', { id: this.options.defaultId });
+                const presetsRef = commands.getPresetList();
+                const isLinkRef = commands.isLink();
+                const linkPresetRef = commands.getLinkPreset();
 
-                return computed(() => findPresetById(unref(presets), unref(selection).id));
+                return computed(() => {
+                    const preset = findPresetById(unref(presetsRef), unref(selectionRef).id);
+
+                    if (!unref(isLinkRef)) return preset;
+
+                    const linkPreset = unref(linkPresetRef);
+
+                    return {
+                        id: preset.id,
+                        common: mergeSettings(preset.common, linkPreset.common),
+                        mobile: mergeSettings(preset.mobile, linkPreset.mobile),
+                        tablet: mergeSettings(preset.tablet, linkPreset.tablet),
+                        desktop: mergeSettings(preset.desktop, linkPreset.desktop)
+                    };
+                });
             }),
 
             applyPreset: createCommand(({ commands, chain }, presetId) => {

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 }) => {
@@ -51,9 +52,7 @@ export const TextDecoration = Mark.create({
                 });
             }),
 
-            toggleUnderline: createCommand(({ commands, editor }) => {
-                if (editor.isActive('link')) return;
-
+            toggleUnderline: createCommand(({ commands }) => {
                 commands.toggleTextDecoration('underline');
             }),
 
@@ -72,13 +71,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 +128,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' })
             ]))
         });