@zipify/wysiwyg 1.0.0-dev.1

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

@@ -0,0 +1,43 @@
+<template>
+    <Dropdown
+        :options="options"
+        :value="currentValue"
+        @change="apply"
+        v-tooltip="{ text: 'Font Weight', hotkey: 'Mod B' }"
+    />
+</template>
+
+<script>
+import { computed, inject } from '@vue/composition-api';
+import { InjectionTokens } from '../../../injectionTokens';
+import { Dropdown } from '../../base';
+import { tooltip } from '../../../directives';
+
+export default {
+    name: 'FontWeightControl',
+
+    components: {
+        Dropdown
+    },
+
+    directives: {
+        tooltip
+    },
+
+    setup() {
+        const editor = inject(InjectionTokens.EDITOR);
+        const font = editor.commands.getFont();
+
+        const options = computed(() => font.value.weights.map((style) => ({ id: style })));
+        const currentValue = editor.commands.getFontWeight();
+
+        const apply = (value) => editor.chain().focus().applyFontWeight(value).run();
+
+        return {
+            options,
+            currentValue,
+            apply
+        };
+    }
+};
+</script>

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

@@ -0,0 +1,47 @@
+<template>
+    <Button
+        skin="toolbar"
+        icon
+        :active="currentValue"
+        :disabled="!isAvailable"
+        @click="apply"
+        v-tooltip="{ text: 'Italic', hotkey: 'Mod I' }"
+    >
+        <Icon name="italic" size="28px" auto-color />
+    </Button>
+</template>
+
+<script>
+import { inject } from '@vue/composition-api';
+import { Button, Icon } from '../../base';
+import { InjectionTokens } from '../../../injectionTokens';
+import { tooltip } from '../../../directives';
+
+export default {
+    name: 'ItalicControl',
+
+    components: {
+        Button,
+        Icon
+    },
+
+    directives: {
+        tooltip
+    },
+
+    setup() {
+        const editor = inject(InjectionTokens.EDITOR);
+
+        const currentValue = editor.commands.isItalic();
+        const isAvailable = editor.commands.isItalicAvailable();
+        const apply = () => editor.chain().focus().toggleItalic().run();
+
+        return {
+            isAvailable,
+            currentValue,
+            apply
+        };
+    }
+};
+</script>
+

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

@@ -0,0 +1,102 @@
+<template>
+    <div class="zw-position--relative" ref="wrapperRef">
+        <Button
+            icon
+            skin="toolbar"
+            :active="isOpened"
+            @click="toggler.open"
+            v-tooltip="'Line Height'"
+        >
+            <Icon name="line-height" size="28px" auto-color />
+        </Button>
+
+        <Modal class="zw-line-height-control__modal" ref="modalRef" :toggler="toggler">
+            <FieldLabel class="zw-margin-bottom--xs" field-id="wswg-line-height">
+                Line Height
+            </FieldLabel>
+
+            <div class="zw-line-height-control__row">
+                <Range
+                    class="zw-line-height-control__range"
+                    step="0.1"
+                    min="1"
+                    max="3"
+                    :value="currentValue"
+                    @input="apply"
+                />
+
+                <NumberField
+                    step="0.1"
+                    min="1"
+                    max="3"
+                    class="zw-line-height-control__field"
+                    field-id="wswg-line-height"
+                    :value="currentValue"
+                    @input="apply"
+                />
+            </div>
+        </Modal>
+    </div>
+</template>
+
+<script>
+import { inject, ref } from '@vue/composition-api';
+import { Button, Icon, Modal, Range, NumberField, FieldLabel, useModalToggler } from '../../base';
+import { InjectionTokens } from '../../../injectionTokens';
+import { tooltip } from '../../../directives';
+
+export default {
+    name: 'LineHeightControl',
+
+    components: {
+        Range,
+        Modal,
+        Icon,
+        Button,
+        NumberField,
+        FieldLabel
+    },
+
+    directives: {
+        tooltip
+    },
+
+    setup() {
+        const wrapperRef = ref(null);
+        const modalRef = ref(null);
+        const editor = inject(InjectionTokens.EDITOR);
+        const toggler = useModalToggler({ wrapperRef, modalRef });
+        const currentValue = editor.commands.getLineHeight();
+        const apply = (value) => editor.commands.applyLineHeight(String(value));
+
+        return {
+            wrapperRef,
+            modalRef,
+            isOpened: toggler.isOpened,
+            toggler,
+            currentValue,
+            apply
+        };
+    }
+};
+</script>
+
+<style scoped>
+.zw-line-height-control__modal {
+    padding: var(--zw-offset-sm);
+}
+
+.zw-line-height-control__row {
+    display: flex;
+    align-items: center;
+}
+
+.zw-line-height-control__range {
+    width: 156px;
+}
+
+.zw-line-height-control__field {
+    width: 52px;
+    margin-left: var(--zw-offset-sm);
+}
+</style>

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

@@ -0,0 +1,86 @@
+<template>
+    <Dropdown
+        :value="currentValue"
+        :options="$options.listTypes"
+        @change="apply"
+    >
+        <template #activator="{ open, isOpened }">
+            <Button
+                icon
+                skin="toolbar"
+                :active="isOpened || isList"
+                @click="open"
+                v-tooltip="'Bullet Styles'"
+            >
+                <Icon :name="currentIcon" size="28px" auto-color />
+            </Button>
+        </template>
+
+        <template #option="{ option }">
+            <DropdownOption
+                class="zw-list-control__option"
+                :option="option"
+                v-tooltip="option.tooltip"
+            >
+                <Icon :name="option.icon" size="28px" auto-color />
+            </DropdownOption>
+        </template>
+    </Dropdown>
+</template>
+
+<script>
+import { computed, inject } from '@vue/composition-api';
+import { InjectionTokens } from '../../../injectionTokens';
+import { Dropdown, DropdownOption, Button, Icon } from '../../base';
+import { ListTypes } from '../../../enums';
+import { tooltip } from '../../../directives';
+
+export default {
+    name: 'ListControl',
+
+    listTypes: ListTypes.values.map((type) => ({
+        id: type,
+        icon: `list-${type}`
+    })),
+
+    components: {
+        Dropdown,
+        DropdownOption,
+        Button,
+        Icon
+    },
+
+    directives: {
+        tooltip
+    },
+
+    setup() {
+        const editor = inject(InjectionTokens.EDITOR);
+        const selectionValue = editor.commands.getListType();
+        const isList = computed(() => !!selectionValue.value);
+        const currentValue = computed(() => selectionValue.value || 'none');
+
+        const currentIcon = computed(() => {
+            const type = selectionValue.value || ListTypes.DISC;
+
+            return `list-${type}`;
+        });
+
+        const apply = (type) => editor.chain().focus().applyList(type).run();
+
+        return {
+            isList,
+            currentValue,
+            currentIcon,
+            apply
+        };
+    }
+};
+</script>
+
+<style scoped>
+.zw-list-control__option {
+    padding: 0 var(--zw-offset-xs);
+    display: flex;
+}
+</style>

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

@@ -0,0 +1,37 @@
+<template>
+    <Button
+        skin="toolbar"
+        icon
+        @click="apply"
+        v-tooltip="'Remove Styles'"
+    >
+        <Icon name="remove-format" size="28px" auto-color />
+    </Button>
+</template>
+
+<script>
+import { inject } from '@vue/composition-api';
+import { Button, Icon } from '../../base';
+import { InjectionTokens } from '../../../injectionTokens';
+import { tooltip } from '../../../directives';
+
+export default {
+    name: 'RemoveFormatControl',
+
+    components: {
+        Icon,
+        Button
+    },
+
+    directives: {
+        tooltip
+    },
+
+    setup() {
+        const editor = inject(InjectionTokens.EDITOR);
+        const apply = () => editor.chain().focus().removeFormat().run();
+
+        return { apply };
+    }
+};
+</script>

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

@@ -0,0 +1,44 @@
+<template>
+    <Button
+        skin="toolbar"
+        icon
+        :active="currentValue"
+        @click="apply"
+        v-tooltip="'Strikethrough'"
+    >
+        <Icon name="strike-through" size="28px" auto-color />
+    </Button>
+</template>
+
+<script>
+import { inject } from '@vue/composition-api';
+import { Button, Icon } from '../../base';
+import { InjectionTokens } from '../../../injectionTokens';
+import { tooltip } from '../../../directives';
+
+export default {
+    name: 'StrikeThroughControl',
+
+    components: {
+        Button,
+        Icon
+    },
+
+    directives: {
+        tooltip
+    },
+
+    setup() {
+        const editor = inject(InjectionTokens.EDITOR);
+
+        const currentValue = editor.commands.isStrikeThrough();
+        const apply = () => editor.chain().focus().toggleStrikeThrough().run();
+
+        return {
+            currentValue,
+            apply
+        };
+    }
+};
+</script>
+

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

@@ -0,0 +1,95 @@
+<template>
+    <div class="zw-style-preset-control">
+        <Dropdown
+            class="zw-style-preset-control__dropdown"
+            :value="preset.id"
+            :options="options"
+            @change="apply"
+            v-tooltip="'Text Type'"
+        />
+
+        <Button
+            class="zw-style-preset-control__reset"
+            :disabled="!isCustomized"
+            icon
+            @click="removeCustomization"
+            v-tooltip="'Reset Styles'"
+        >
+            <Icon name="reset-styles" size="28px" auto-color />
+        </Button>
+    </div>
+</template>
+
+<script>
+import { computed, inject } from '@vue/composition-api';
+import { InjectionTokens } from '../../../injectionTokens';
+import { Dropdown, Button, Icon } from '../../base';
+import { tooltip } from '../../../directives';
+
+export default {
+    name: 'StylePresetControl',
+
+    components: {
+        Icon,
+        Button,
+        Dropdown
+    },
+
+    directives: {
+        tooltip
+    },
+
+    setup() {
+        const editor = inject(InjectionTokens.EDITOR);
+
+        const presets = editor.commands.getPresetList();
+        const preset = editor.commands.getPreset();
+        const customization = editor.commands.getPresetCustomization();
+
+        const isCustomized = computed(() => {
+            const { attributes, marks } = customization.value;
+
+            return !!attributes.length || !!marks.length;
+        });
+
+        const options = computed(() => {
+            return presets.value.map((preset) => ({
+                id: preset.id,
+                title: preset.name
+            }));
+        });
+
+        const apply = (value) => editor.chain().focus().applyPreset(value).run();
+        const removeCustomization = () => editor.chain().focus().removePresetCustomization().run();
+
+        return {
+            options,
+            preset,
+            isCustomized,
+            apply,
+            removeCustomization
+        };
+    }
+};
+</script>
+
+<style scoped>
+.zw-style-preset-control {
+    display: flex;
+    align-items: center;
+}
+
+.zw-style-preset-control__dropdown {
+    width: 96px;
+}
+
+.zw-style-preset-control__reset {
+    color: rgb(var(--zw-color-n70));
+}
+
+.zw-style-preset-control__reset:not(:disabled):hover,
+.zw-style-preset-control__reset:not(:disabled):focus,
+.zw-style-preset-control__reset:not(:disabled):focus-within {
+    color: rgb(var(--zw-color-white));
+}
+</style>

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

@@ -0,0 +1,44 @@
+<template>
+    <Button
+        skin="toolbar"
+        icon
+        :active="currentValue"
+        @click="apply"
+        v-tooltip="'Superscript'"
+    >
+        <Icon name="superscript" size="28px" auto-color />
+    </Button>
+</template>
+
+<script>
+import { computed, inject } from '@vue/composition-api';
+import { Button, Icon } from '../../base';
+import { InjectionTokens } from '../../../injectionTokens';
+import { tooltip } from '../../../directives';
+
+export default {
+    name: 'SuperscriptControl',
+
+    components: {
+        Button,
+        Icon
+    },
+
+    directives: {
+        tooltip
+    },
+
+    setup() {
+        const editor = inject(InjectionTokens.EDITOR);
+
+        const currentValue = computed(() => editor.isActive('superscript'));
+        const apply = () => editor.chain().focus().toggleSuperscript().run();
+
+        return {
+            currentValue,
+            apply
+        };
+    }
+};
+</script>
+

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

@@ -0,0 +1,44 @@
+<template>
+    <Button
+        skin="toolbar"
+        icon
+        :active="currentValue"
+        @click="apply"
+        v-tooltip="{ text: 'Underline', hotkey: 'Mod U' }"
+    >
+        <Icon name="underline" size="28px" auto-color />
+    </Button>
+</template>
+
+<script>
+import { inject } from '@vue/composition-api';
+import { Button, Icon } from '../../base';
+import { InjectionTokens } from '../../../injectionTokens';
+import { tooltip } from '../../../directives';
+
+export default {
+    name: 'UnderlineControl',
+
+    components: {
+        Button,
+        Icon
+    },
+
+    directives: {
+        tooltip
+    },
+
+    setup() {
+        const editor = inject(InjectionTokens.EDITOR);
+
+        const currentValue = editor.commands.isUnderline();
+        const apply = () => editor.chain().focus().toggleUnderline().run();
+
+        return {
+            currentValue,
+            apply
+        };
+    }
+};
+</script>
+

package/lib/components/toolbar/controls/__tests__/AlignmentControl.test.js

@@ -0,0 +1,51 @@
+import { shallowMount } from '@vue/test-utils';
+import { h, ref } from '@vue/composition-api';
+import { InjectionTokens } from '../../../../injectionTokens';
+import { Alignments } from '../../../../enums';
+import { ButtonToggle } from '../../../base';
+import AlignmentControl from '../AlignmentControl';
+
+const createEditor = ({ alignment } = {}) => ({
+    commands: {
+        getAlignment: () => ref(alignment),
+        focus: jest.fn().mockReturnThis(),
+        applyAlignment: jest.fn().mockReturnThis(),
+        run: jest.fn()
+    },
+
+    chain() {
+        return this.commands;
+    }
+});
+
+function createComponent({ editor }) {
+    return shallowMount(AlignmentControl, {
+        stubs: {
+            ButtonToggle: {
+                render: () => h('div'),
+                props: ['value']
+            }
+        },
+        provide: { [InjectionTokens.EDITOR]: editor }
+    });
+}
+
+describe('selection value', () => {
+    test('should render value from selection', () => {
+        const editor = createEditor({ alignment: Alignments.RIGHT });
+        const wrapper = createComponent({ editor });
+        const buttonWrapper = wrapper.findComponent(ButtonToggle);
+
+        expect(buttonWrapper.props('value')).toBe(Alignments.RIGHT);
+    });
+
+    test('should apply new value', () => {
+        const editor = createEditor({ alignment: Alignments.RIGHT });
+        const wrapper = createComponent({ editor });
+        const buttonWrapper = wrapper.findComponent(ButtonToggle);
+
+        buttonWrapper.vm.$emit('change', Alignments.CENTER);
+
+        expect(editor.commands.applyAlignment).toHaveBeenCalledWith(Alignments.CENTER);
+    });
+});

package/lib/components/toolbar/controls/__tests__/AlignmentDeviceControl.test.js

@@ -0,0 +1,77 @@
+import { shallowMount } from '@vue/test-utils';
+import { ref, h, nextTick } from '@vue/composition-api';
+import { InjectionTokens } from '../../../../injectionTokens';
+import { Alignments } from '../../../../enums';
+import { Button, Icon, Modal } from '../../../base';
+import AlignmentDeviceControl from '../AlignmentDeviceControl';
+import AlignmentControl from '../AlignmentControl';
+
+const createEditor = ({ alignment } = {}) => ({
+    commands: {
+        getAlignment: () => ref(alignment),
+        storeSelection: jest.fn(),
+        restoreSelection: jest.fn()
+    }
+});
+
+function createComponent({ editor } = {}) {
+    return shallowMount(AlignmentDeviceControl, {
+        stubs: {
+            Modal: {
+                render() {
+                    return h('div', null, this.$slots.default);
+                },
+                props: ['toggler']
+            }
+        },
+        provide: {
+            [InjectionTokens.EDITOR]: editor ?? createEditor()
+        }
+    });
+}
+
+describe('rendering', () => {
+    test('should render alignment icon', () => {
+        const editor = createEditor({ alignment: Alignments.RIGHT });
+        const wrapper = createComponent({ editor });
+        const iconWrapper = wrapper.findComponent(Icon);
+
+        expect(iconWrapper.props('name')).toBe('alignment-right');
+    });
+
+    test('should render closed state', async () => {
+        const wrapper = createComponent();
+        const buttonWrapper = wrapper.findComponent(Button);
+        const modalWrapper = wrapper.findComponent(Modal);
+
+        expect(buttonWrapper.props('active')).toBe(false);
+        expect(modalWrapper.props('toggler').isOpened.value).toBe(false);
+    });
+
+    test('should open modal', async () => {
+        const wrapper = createComponent();
+        const buttonWrapper = wrapper.findComponent(Button);
+        const modalWrapper = wrapper.findComponent(Modal);
+
+        buttonWrapper.vm.$emit('click');
+        await nextTick();
+
+        expect(buttonWrapper.props('active')).toBe(true);
+        expect(modalWrapper.props('toggler').isOpened.value).toBe(true);
+    });
+
+    test('should close on apply value', async () => {
+        const wrapper = createComponent();
+        const buttonWrapper = wrapper.findComponent(Button);
+        const modalWrapper = wrapper.findComponent(Modal);
+
+        buttonWrapper.vm.$emit('click');
+        await nextTick();
+
+        wrapper.findComponent(AlignmentControl).vm.$emit('applied');
+        await nextTick();
+
+        expect(buttonWrapper.props('active')).toBe(false);
+        expect(modalWrapper.props('toggler').isOpened.value).toBe(false);
+    });
+});