npm - @zipify/wysiwyg - Versions diffs - 1.0.0-dev.42 → 1.0.0-dev.45 - Mend

@zipify/wysiwyg 1.0.0-dev.42 → 1.0.0-dev.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (62) hide show

package/example/ExampleApp.vue CHANGED Viewed

@@ -152,4 +152,9 @@ body {
 .zpa-text__list--square { list-style-type: square }
 .zpa-text__list--latin { list-style-type: upper-roman }
 .zpa-text__list--roman { list-style-type: upper-latin }
+p, h1, h2, h3, h4 {
+    margin-top: 0.3em;
+    margin-bottom: 0.3em;
+}
 </style>

package/example/{example.html → index.html} RENAMED Viewed

@@ -13,5 +13,6 @@
 </head>
 <body>
     <div data-app></div>
+    <script type="module" src="./example.js"></script>
 </body>
 </html>

package/lib/Wysiwyg.vue CHANGED Viewed

@@ -12,7 +12,7 @@
 <script>
 import { EditorContent } from '@tiptap/vue-2';
-import { provide, toRef, ref } from 'vue';
+import { provide, toRef, ref, computed } from 'vue';
 import { Toolbar } from './components';
 import { useToolbar, useEditor } from './composables';
 import { buildExtensions } from './extensions';
@@ -114,10 +114,9 @@ export default {
         ContextWindow.use(props.window);
         const fonts = props.fonts.map((font) => new Font(font));
-        const presets = toRef(props, 'presets');
         const toolbarRef = ref(null);
         const wysiwygRef = ref(null);
+        const wrapperRef = computed(() => wysiwygRef.value?.$el || document.body);
         const toolbar = useToolbar({
             wrapperRef: wysiwygRef,
@@ -145,9 +144,9 @@ export default {
                 makePresetVariable: props.makePresetVariable,
                 basePresetClass: props.basePresetClass,
                 baseListClass: props.baseListClass,
-                linkPreset: presets.value.find((preset) => preset.id === 'link'),
                 deviceRef: toRef(props, 'device'),
-                pageBlocks
+                pageBlocksRef: pageBlocks,
+                wrapperRef
             })
         });

package/lib/__tests__/utils/NodeFactory.js CHANGED Viewed

@@ -64,4 +64,17 @@ export class NodeFactory {
     static mark(type, attrs) {
         return { type, attrs };
     }
+    static link(attrs) {
+        return {
+            type: 'text',
+            marks: [
+                {
+                    type: 'link',
+                    attrs: { ...attrs }
+                }
+            ],
+            text: attrs.text
+        };
+    }
 }

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

@@ -46,9 +46,8 @@ describe('open/close', () => {
         expect(wrapper).toVueEmpty();
     });
-    // TODO Fix later
-    test.skip('should open', async () => {
-        const toggler = createToggler(false);
+    test('should open', async () => {
+        const toggler = createToggler({ value: false });
         const wrapper = createComponent({ toggler });
         toggler.isOpened.value = true;

package/lib/components/base/composables/__tests__/useValidator.test.js ADDED Viewed

@@ -0,0 +1,44 @@
+import { useValidator } from '../useValidator';
+describe('validation', () => {
+    test('should show error', () => {
+        const value = '';
+        const isEmpty = () => value ? false : 'Can\'t be empty';
+        const validator = useValidator({
+            validations: [isEmpty]
+        });
+        validator.validate();
+        expect(validator.error.value).toBe('Can\'t be empty');
+    });
+    test('should pass validation', () => {
+        const value = 'hello';
+        const isEmpty = () => value ? false : 'Can\'t be empty';
+        const validator = useValidator({
+            validations: [isEmpty]
+        });
+        validator.validate();
+        expect(validator.error.value).toBe(null);
+    });
+    test('should reset error', () => {
+        const value = '';
+        const isEmpty = () => value ? false : 'Can\'t be empty';
+        const validator = useValidator({
+            validations: [isEmpty]
+        });
+        validator.validate();
+        expect(validator.error.value).toBe('Can\'t be empty');
+        validator.reset();
+        expect(validator.error.value).toBe(null);
+    });
+});

package/lib/components/base/composables/useValidator.js CHANGED Viewed

@@ -3,9 +3,9 @@ import { ref } from 'vue';
 export function useValidator({ validations }) {
     const error = ref(null);
-    function validate(value) {
+    function validate() {
         for (const validate of validations) {
-            const validationError = validate(value);
+            const validationError = validate();
             if (validationError) {
                 return error.value = validationError;
@@ -15,5 +15,9 @@ export function useValidator({ validations }) {
         }
     }
-    return { error, validate };
+    function reset() {
+        error.value = null;
+    }
+    return { error, validate, reset };
 }

package/lib/components/toolbar/__tests__/Toolbar.test.js CHANGED Viewed

@@ -10,7 +10,7 @@ function createComponent({ device }) {
         propsData: {
             toolbar: {
                 mount: jest.fn(),
-                isActiveRef: ref(true),
+                isActiveRef: ref({ value: true }),
                 offsets: [0, 8]
             },
             device: device ?? Devices.DESKTOP
@@ -18,8 +18,7 @@ function createComponent({ device }) {
     });
 }
-// TODO Fix later
-describe.skip('rendering', () => {
+describe('rendering', () => {
     test('should render desktop toolbar', () => {
         const wrapper = createComponent({ device: Devices.DESKTOP });

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

@@ -25,6 +25,9 @@ import { computed, inject } from 'vue';
 import { InjectionTokens } from '../../../injectionTokens';
 import { Dropdown, Button, Icon } from '../../base';
 import { tooltip } from '../../../directives';
+import { TextSettings } from '../../../enums';
+const CLEAR_MARKS = [TextSettings.FONT_SIZE, TextSettings.FONT_WEIGHT];
 export default {
     name: 'StylePresetControl',
@@ -59,7 +62,17 @@ export default {
             }));
         });
-        const apply = (value) => editor.chain().focus().applyPreset(value).run();
+        const apply = (value) => {
+            editor.chain()
+                .focus()
+                .applyPreset(value)
+                .storeSelection()
+                .expandSelectionToBlock()
+                .unsetMarks(CLEAR_MARKS)
+                .restoreSelection()
+                .run();
+        };
         const removeCustomization = () => editor.chain().focus().removePresetCustomization().run();
         return {

package/lib/components/toolbar/controls/__tests__/StylePresetControl.test.js CHANGED Viewed

@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { Button, Dropdown } from '../../../base';
 import StylePresetControl from '../StylePresetControl';
+import { TextSettings } from '../../../../enums';
 const createEditor = ({ presets, preset, customization } = {}) => ({
     commands: {
@@ -12,6 +13,10 @@ const createEditor = ({ presets, preset, customization } = {}) => ({
         getPresetCustomization: () => ref(customization || { attributes: [], marks: [] }),
         applyPreset: jest.fn().mockReturnThis(),
         removePresetCustomization: jest.fn().mockReturnThis(),
+        storeSelection: jest.fn().mockReturnThis(),
+        restoreSelection: jest.fn().mockReturnThis(),
+        expandSelectionToBlock: jest.fn().mockReturnThis(),
+        unsetMarks: jest.fn().mockReturnThis(),
         run: jest.fn()
     },
@@ -114,6 +119,17 @@ describe('apply preset', () => {
         expect(editor.commands.applyPreset).toHaveBeenCalledWith('regular-1');
     });
+    test('should remove settings on preset change', () => {
+        const editor = createEditor();
+        const wrapper = createComponent({ editor });
+        const dropdownWrapper = wrapper.findComponent(Dropdown);
+        dropdownWrapper.vm.$emit('change', 'regular-1');
+        expect(editor.commands.expandSelectionToBlock).toHaveBeenCalled();
+        expect(editor.commands.unsetMarks).toHaveBeenCalledWith([TextSettings.FONT_SIZE, TextSettings.FONT_WEIGHT]);
+    });
 });
 describe('remove customization', () => {

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

@@ -14,7 +14,7 @@
                     label="Text to display"
                     placeholder="Type Text"
                     :error="nameValidator.error.value"
-                    @input="link.updateText"
+                    @input="updateLinkText"
                 />
                 <LinkControlDestination
@@ -61,16 +61,32 @@ export default {
     setup() {
         const wrapperRef = ref(null);
         const modalRef = ref(null);
-        const nameError = ref(false);
-        const urlError = ref(false);
         const editor = inject(InjectionTokens.EDITOR);
         const link = useLink();
+        const urlRegExp = /(^(https?:\/\/|\/)(?:www\.|(?!www))?[^\s])/;
+        const isEmpty = () => {
+            return link.linkData.value.text ? false : 'Can\'t be empty';
+        };
+        const isUrl = () => {
+            if (link.currentDestination.value.id !== 'url') return false;
+            return urlRegExp.test(link.destinationHrefs.value.url) ? false : 'Please enter a valid URL';
+        };
+        const nameValidator = useValidator({
+            validations: [isEmpty]
+        });
+        const urlValidator = useValidator({
+            validations: [isUrl]
+        });
         const resetErrors = () => {
-            nameError.value = null;
-            urlError.value = null;
+            nameValidator.reset();
+            urlValidator.reset();
         };
         const onBeforeOpened = () => {
@@ -86,30 +102,17 @@ export default {
         });
         const isActive = computed(() => toggler.isOpened.value || editor.isActive('link'));
-        const isEmpty = () => {
-            return link.linkData.value.text ? false : 'Can\'t be empty';
-        };
-        const isUrl = () => {
-            if (link.currentDestination.value.id !== 'url') return false;
-            return /(^(https?:\/\/|\/)(?:www\.|(?!www))?[^\s])/.test(link.destinationHrefs.value.url) ? false : 'Please enter a valid URL';
+        const updateLinkText = (value) => {
+            resetErrors();
+            link.updateText(value);
         };
-        const nameValidator = useValidator({
-            validations: [isEmpty],
-            value: link.linkData.value.text
-        });
-        const urlValidator = useValidator({
-            validations: [isUrl],
-            value: link.linkData.value.text
-        });
         const applyLink = () => {
-            urlError.value = urlValidator.validate();
-            nameError.value = nameValidator.validate();
+            urlValidator.validate();
+            nameValidator.validate();
-            if (urlError.value || nameError.value) return;
+            if (urlValidator.error.value || nameValidator.error.value) return;
             link.apply();
             toggler.close();
@@ -128,7 +131,7 @@ export default {
             isActive,
             nameValidator,
             urlValidator,
-            nameError,
+            updateLinkText,
             resetErrors,
             applyLink,
             removeLink

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

@@ -0,0 +1,79 @@
+import { shallowMount } from '@vue/test-utils';
+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
+});
+function createComponent({ editor }) {
+    return shallowMount(LinkControl, {
+        provide: {
+            [InjectionTokens.EDITOR]: editor,
+            [InjectionTokens.PAGE_BLOCKS]: ref([{ id: 1 }])
+        }
+    });
+}
+describe('selection value', () => {
+    test('should render link status', () => {
+        const editor = createEditor(true );
+        const wrapper = createComponent({ editor });
+        const buttonWrapper = wrapper.findComponent(Button);
+        expect(buttonWrapper.props('active')).toBe(true);
+    });
+});
+describe('validation', () => {
+    test('should show error on apply', async () => {
+        const editor = createEditor(true );
+        const wrapper = createComponent({ editor });
+        const textFieldWrapper = wrapper.findComponent(TextField);
+        const linkControlDestinationWrapper = wrapper.findComponent(LinkControlDestination);
+        const applyWrapper = wrapper.findComponent(LinkControlApply);
+        applyWrapper.vm.$emit('apply');
+        await nextTick();
+        expect(textFieldWrapper.props('error')).toBe('Can\'t be empty');
+        expect(linkControlDestinationWrapper.props('validator').error.value).toBe('Please enter a valid URL');
+    });
+    test('should reset errors on input', async () => {
+        const editor = createEditor(true );
+        const wrapper = createComponent({ editor });
+        const textFieldWrapper = wrapper.findComponent(TextField);
+        const linkControlDestinationWrapper = wrapper.findComponent(LinkControlDestination);
+        const applyWrapper = wrapper.findComponent(LinkControlApply);
+        applyWrapper.vm.$emit('apply');
+        textFieldWrapper.vm.$emit('input', 'hello');
+        await nextTick();
+        expect(textFieldWrapper.props('error')).toBeNull();
+        expect(linkControlDestinationWrapper.props('validator').error.value).toBeNull();
+    });
+    test('should reset errors on change destination', async () => {
+        const editor = createEditor(true );
+        const wrapper = createComponent({ editor });
+        const textFieldWrapper = wrapper.findComponent(TextField);
+        const linkControlDestinationWrapper = wrapper.findComponent(LinkControlDestination);
+        const applyWrapper = wrapper.findComponent(LinkControlApply);
+        applyWrapper.vm.$emit('apply');
+        linkControlDestinationWrapper.vm.$emit('reset-errors');
+        await nextTick();
+        expect(textFieldWrapper.props('error')).toBeNull();
+        expect(linkControlDestinationWrapper.props('validator').error.value).toBeNull();
+    });
+});

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

@@ -0,0 +1,42 @@
+import { shallowMount } from '@vue/test-utils';
+import { InjectionTokens } from '../../../../../injectionTokens';
+import { Button } from '../../../../base';
+import LinkControlHeader from '../LinkControlHeader';
+const createEditor = (isActive) => ({
+    isActive: () => isActive ?? false
+});
+function createComponent({ editor }) {
+    return shallowMount(LinkControlHeader, {
+        provide: { [InjectionTokens.EDITOR]: editor }
+    });
+}
+describe('rendering unlink button', () => {
+    test('should button be disabled when no link', () => {
+        const editor = createEditor(true );
+        const wrapper = createComponent({ editor });
+        const buttonWrapper = wrapper.findComponent(Button);
+        expect(buttonWrapper.props('disabled')).toBe(false);
+    });
+    test('should button be enabled when link selected', () => {
+        const editor = createEditor(false );
+        const wrapper = createComponent({ editor });
+        const buttonWrapper = wrapper.findComponent(Button);
+        expect(buttonWrapper.props('disabled')).toBe(true);
+    });
+    test('should send unlink event', () => {
+        const editor = createEditor(true );
+        const wrapper = createComponent({ editor });
+        const buttonWrapper = wrapper.findComponent(Button);
+        buttonWrapper.vm.$emit('click');
+        expect(wrapper.emitted('remove-link')).toBeTruthy();
+    });
+});

package/lib/components/toolbar/controls/link/composables/__tests__/__snapshots__/useLink.test.js.snap ADDED Viewed

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`init link should prepare initial fields 1`] = `
+Object {
+  "block": 1,
+  "url": "",
+}
+`;

package/lib/components/toolbar/controls/link/composables/__tests__/useLink.test.js ADDED Viewed

@@ -0,0 +1,114 @@
+import { ref } from 'vue';
+import { withComponentContext } from '../../../../../../__tests__/utils';
+import { InjectionTokens } from '../../../../../../injectionTokens';
+import { LinkDestinations, LinkTargets } from '../../../../../../enums';
+import { useLink } from '../useLink';
+const createEditor = (text, destination) => ({
+    commands: {
+        storeSelection: jest.fn(),
+        restoreSelection: jest.fn(),
+        getSelectedText: jest.fn(() => text ?? ''),
+        focus: jest.fn().mockReturnThis(),
+        unsetLink: jest.fn().mockReturnThis(),
+        applyLink: jest.fn().mockReturnThis(),
+        run: jest.fn()
+    },
+    chain() {
+        return this.commands;
+    },
+    getAttributes: jest.fn(() => ({
+        destination: destination ?? null
+    }))
+});
+function useComposable(text, destination) {
+    return withComponentContext(() => useLink(), {
+        provide: {
+            [InjectionTokens.EDITOR]: createEditor(text, destination),
+            [InjectionTokens.PAGE_BLOCKS]: ref([{ id: 1 }, { id: 2 }])
+        }
+    });
+}
+describe('init link', () => {
+    test('should prepare initial fields', () => {
+        const link = useComposable();
+        link.prepareInitialFields();
+        expect(link.currentDestination.value.id).toBe(LinkDestinations.URL);
+        expect(link.linkData.value.target).toBe(LinkTargets.SELF);
+        expect(link.destinationHrefs.value).toMatchSnapshot();
+    });
+    test('should take text from selection', () => {
+        const link = useComposable('hello world');
+        link.prepareInitialFields();
+        expect(link.linkData.value.text).toBe('hello world');
+    });
+});
+describe('actions with link', () => {
+    test('should update url', () => {
+        const link = useComposable('hello world');
+        link.updateLink('https://hello.world');
+        expect(link.destinationHrefs.value.url).toBe('https://hello.world');
+    });
+    test('should update block destination', () => {
+        const link = useComposable('hello world', LinkDestinations.BLOCK);
+        link.prepareInitialFields();
+        link.updateLink('3456');
+        expect(link.destinationHrefs.value.block).toBe('3456');
+    });
+    test('should remove link', () => {
+        const link = useComposable();
+        link.removeLink();
+        expect(link.editor.commands.unsetLink).toHaveBeenCalled();
+    });
+    test('should apply link', () => {
+        const link = useComposable();
+        link.updateText('hello');
+        link.updateLink('/world');
+        link.apply();
+        expect(link.editor.commands.applyLink).toHaveBeenCalledWith({
+            destination: 'url',
+            href: '/world',
+            target: LinkTargets.SELF,
+            text: 'hello'
+        });
+    });
+    test('should apply link target', () => {
+        const link = useComposable();
+        link.updateTarget(false);
+        expect(link.linkData.value.target).toBe(LinkTargets.SELF);
+    });
+    test('should apply link target', () => {
+        const link = useComposable();
+        link.updateTarget(true);
+        expect(link.linkData.value.target).toBe(LinkTargets.BLANK);
+    });
+});

package/lib/components/toolbar/controls/link/destination/LinkControlDestination.vue CHANGED Viewed

@@ -26,8 +26,8 @@
             :href="link.destinationHrefs.value.url"
             :isTargetBlank="isTargetBlank"
             :validator="validator"
-            @updateLink="updateLink"
-            @updateTarget="link.updateTarget"
+            @update-link="updateLink"
+            @update-target="link.updateTarget"
         />
         <LinkControlPageBlock

package/lib/components/toolbar/controls/link/destination/LinkControlUrl.vue CHANGED Viewed

@@ -43,8 +43,8 @@ export default {
     },
     setup(props, { emit }) {
-        const updateLink = (value) => emit('updateLink', value);
-        const updateTarget = (value) => emit('updateTarget', value);
+        const updateLink = (value) => emit('update-link', value);
+        const updateTarget = (value) => emit('update-target', value);
         return { updateLink, updateTarget };
     }

package/lib/components/toolbar/controls/link/destination/__tests__/LinkControlPageBlock.test.js ADDED Viewed

@@ -0,0 +1,36 @@
+import { ref, h } from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import LinkControlPageBlock from '../LinkControlPageBlock';
+import { InjectionTokens } from '../../../../../../injectionTokens';
+import { Dropdown } from '../../../../../base';
+function createComponent() {
+    return shallowMount(LinkControlPageBlock, {
+        propsData: {
+            value: 12
+        },
+        stubs: {
+            Dropdown: {
+                render: () => h('div'),
+                props: ['value']
+            }
+        },
+        provide: {
+            [InjectionTokens.PAGE_BLOCKS]: ref([{ id: 1 }, { id: 2 }])
+        }
+    });
+}
+describe('applying block', () => {
+    test('should apply block', () => {
+        const wrapper = createComponent();
+        const dropdownWrapper = wrapper.findComponent(Dropdown);
+        dropdownWrapper.vm.$emit('change', 2);
+        expect(wrapper.emitted('update')).toMatchSnapshot();
+    });
+});