@zipify/wysiwyg 1.0.0-dev.1

package/lib/components/toolbar/ToolbarDivider.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="zw-toolbar__divider" :class="classes" />
+</template>
+
+<script>
+import { computed } from '@vue/composition-api';
+
+export default {
+    name: 'ToolbarDivider',
+
+    props: {
+        vertical: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+
+        horizontal: {
+            type: Boolean,
+            required: false,
+            default: false
+        }
+    },
+
+    setup(props) {
+        const classes = computed(() => ({
+            'zw-toolbar__divider--vertical': props.vertical,
+            'zw-toolbar__divider--horizontal': props.horizontal
+        }));
+
+        return { classes };
+    }
+};
+</script>
+
+<style scoped>
+.zw-toolbar__divider {
+    border-color: rgba(var(--zw-color-n90), 0.1);
+    border-style: solid;
+    border-width: 0;
+}
+
+.zw-toolbar__divider--vertical {
+    border-left-width: 1px;
+}
+
+.zw-toolbar__divider--horizontal {
+    border-bottom-width: 1px;
+}
+</style>

package/lib/components/toolbar/ToolbarFull.vue

@@ -0,0 +1,94 @@
+<template>
+    <div>
+        <ToolbarRow>
+            <StylePresetControl />
+            <ToolbarDivider vertical />
+            <FontFamilyControl />
+            <ToolbarDivider vertical />
+            <FontWeightControl />
+            <ToolbarDivider vertical />
+            <FontSizeControl />
+            <ToolbarDivider vertical />
+
+            <ToolbarGroup>
+                <FontColorControl />
+                <BackgroundColorControl />
+            </ToolbarGroup>
+        </ToolbarRow>
+
+        <ToolbarDivider horizontal />
+
+        <ToolbarRow>
+            <ToolbarGroup>
+                <ItalicControl />
+                <UnderlineControl />
+                <StrikeThroughControl />
+                <SuperscriptControl />
+                <CaseStyleControl />
+            </ToolbarGroup>
+
+            <ToolbarDivider vertical />
+            <AlignmentControl />
+            <ToolbarDivider vertical />
+
+            <ToolbarGroup>
+                <LineHeightControl />
+                <ListControl />
+            </ToolbarGroup>
+
+            <ToolbarDivider vertical />
+
+            <ToolbarGroup>
+                <RemoveFormatControl />
+            </ToolbarGroup>
+        </ToolbarRow>
+    </div>
+</template>
+
+<script>
+import ToolbarDivider from './ToolbarDivider';
+import ToolbarRow from './ToolbarRow';
+import ToolbarGroup from './ToolbarGroup';
+import {
+    StylePresetControl,
+    AlignmentControl,
+    BackgroundColorControl,
+    CaseStyleControl,
+    FontColorControl,
+    FontFamilyControl,
+    FontSizeControl,
+    FontWeightControl,
+    ItalicControl,
+    LineHeightControl,
+    StrikeThroughControl,
+    SuperscriptControl,
+    UnderlineControl,
+    ListControl,
+    RemoveFormatControl
+} from './controls';
+
+export default {
+    name: 'ToolbarFull',
+
+    components: {
+        ToolbarRow,
+        ToolbarGroup,
+        ToolbarDivider,
+        StylePresetControl,
+        CaseStyleControl,
+        FontFamilyControl,
+        FontWeightControl,
+        FontSizeControl,
+        FontColorControl,
+        BackgroundColorControl,
+        ItalicControl,
+        UnderlineControl,
+        SuperscriptControl,
+        StrikeThroughControl,
+        AlignmentControl,
+        LineHeightControl,
+        ListControl,
+        RemoveFormatControl
+    }
+};
+</script>

package/lib/components/toolbar/ToolbarGroup.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="zw-toolbar__group">
+        <slot />
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ToolbarGroup'
+};
+</script>
+
+<style scoped>
+.zw-toolbar__group {
+    display: flex;
+    column-gap: var(--zw-offset-xxs);
+}
+</style>

package/lib/components/toolbar/ToolbarRow.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="zw-toolbar__row">
+        <slot />
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ToolbarRow'
+};
+</script>
+
+<style scoped>
+.zw-toolbar__row {
+    display: flex;
+    column-gap: var(--zw-offset-xs);
+    padding: var(--zw-offset-xxs) var(--zw-offset-xs);
+}
+</style>

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

@@ -0,0 +1,33 @@
+import { shallowMount } from '@vue/test-utils';
+import { Devices } from '../../../enums';
+import Toolbar from '../Toolbar';
+import ToolbarFull from '../ToolbarFull';
+import ToolbarDevice from '../ToolbarDevice';
+
+function createComponent({ device }) {
+    return shallowMount(Toolbar, {
+        propsData: {
+            device: device ?? Devices.DESKTOP
+        }
+    });
+}
+
+describe('rendering', () => {
+    test('should render desktop toolbar', () => {
+        const wrapper = createComponent({ device: Devices.DESKTOP });
+
+        expect(wrapper).toVueContainComponent(ToolbarFull);
+    });
+
+    test('should render tablet toolbar', () => {
+        const wrapper = createComponent({ device: Devices.TABLET });
+
+        expect(wrapper).toVueContainComponent(ToolbarDevice);
+    });
+
+    test('should render mobile toolbar', () => {
+        const wrapper = createComponent({ device: Devices.MOBILE });
+
+        expect(wrapper).toVueContainComponent(ToolbarDevice);
+    });
+});

package/lib/components/toolbar/__tests__/ToolbarDivider.test.js

@@ -0,0 +1,26 @@
+import { shallowMount } from '@vue/test-utils';
+import ToolbarDivider from '../ToolbarDivider';
+
+function createComponent({ isVertical, isHorizontal }) {
+    return shallowMount(ToolbarDivider, {
+        propsData: {
+            vertical: isVertical ?? false,
+            horizontal: isHorizontal ?? false
+        }
+    });
+}
+
+describe('rendering', () => {
+    test('should render vertical divider', () => {
+        const wrapper = createComponent({ isVertical: true });
+
+        expect(wrapper.classes('zw-toolbar__divider--vertical')).toBeTruthy();
+    });
+
+
+    test('should render vertical divider', () => {
+        const wrapper = createComponent({ isHorizontal: true });
+
+        expect(wrapper.classes('zw-toolbar__divider--horizontal')).toBeTruthy();
+    });
+});

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

@@ -0,0 +1,72 @@
+<template>
+    <ButtonToggle :value="currentValue" :options="$options.alignments" @change="apply">
+        <template #option="{ isActive, option, activate }">
+            <Button
+                icon
+                skin="toolbar"
+                :active="isActive"
+                @click="activate"
+                v-tooltip="option.tooltip"
+            >
+                <Icon :name="`alignment-${option.id}`" size="28px" auto-color />
+            </Button>
+        </template>
+    </ButtonToggle>
+</template>
+
+<script>
+import { inject } from '@vue/composition-api';
+import { InjectionTokens } from '../../../injectionTokens';
+import { Alignments } from '../../../enums';
+import { ButtonToggle, Button, Icon } from '../../base';
+import { tooltip } from '../../../directives';
+
+export default {
+    name: 'AlignmentControl',
+
+    alignments: [
+        {
+            id: Alignments.LEFT,
+            tooltip: { text: 'Align Left', hotkey: 'Mod Shift L' }
+        },
+        {
+            id: Alignments.CENTER,
+            tooltip: { text: 'Align Center', hotkey: 'Mod Shift E' }
+        },
+        {
+            id: Alignments.RIGHT,
+            tooltip: { text: 'Align Right', hotkey: 'Mod Shift R' }
+        },
+        {
+            id: Alignments.JUSTIFY,
+            tooltip: { text: 'Justify', hotkey: 'Mod Shift J' }
+        }
+    ],
+
+    components: {
+        ButtonToggle,
+        Button,
+        Icon
+    },
+
+    directives: {
+        tooltip
+    },
+
+    setup(_, { emit }) {
+        const editor = inject(InjectionTokens.EDITOR);
+
+        const currentValue = editor.commands.getAlignment();
+
+        function apply(value) {
+            editor.chain().focus().applyAlignment(value).run();
+            emit('applied');
+        }
+
+        return {
+            currentValue,
+            apply
+        };
+    }
+};
+</script>

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

@@ -0,0 +1,67 @@
+<template>
+    <div class="zw-position--relative" ref="wrapperRef">
+        <Button
+            icon
+            skin="toolbar"
+            :active="isOpened"
+            @click="toggler.open"
+            v-tooltip="'Alignment'"
+        >
+            <Icon :name="`alignment-${currentValue}`" size="28px" auto-color />
+        </Button>
+
+        <Modal class="zw-alignment-control__modal" ref="modalRef" :toggler="toggler">
+            <AlignmentControl class="zw-alignment-control__toggle" @applied="toggler.close" />
+        </Modal>
+    </div>
+</template>
+
+<script>
+import { inject, ref } from '@vue/composition-api';
+import { InjectionTokens } from '../../../injectionTokens';
+import { Button, Icon, Modal, useModalToggler } from '../../base';
+import { tooltip } from '../../../directives';
+import AlignmentControl from './AlignmentControl';
+
+export default {
+    name: 'AlignmentDeviceControl',
+
+    components: {
+        Button,
+        Icon,
+        Modal,
+        AlignmentControl
+    },
+
+    directives: {
+        tooltip
+    },
+
+    setup() {
+        const editor = inject(InjectionTokens.EDITOR);
+        const currentValue = editor.commands.getAlignment();
+        const wrapperRef = ref(null);
+        const modalRef = ref(null);
+
+        const toggler = useModalToggler({ wrapperRef, modalRef });
+
+        return {
+            wrapperRef,
+            modalRef,
+            currentValue,
+            toggler,
+            isOpened: toggler.isOpened
+        };
+    }
+};
+</script>
+
+<style scoped>
+.zw-alignment-control__modal {
+    padding: var(--zw-offset-xxs);
+}
+
+.zw-alignment-control__toggle {
+    flex-direction: column;
+}
+</style>

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

@@ -0,0 +1,48 @@
+<template>
+    <ColorPicker :value="currentValue" @change="apply">
+        <template #activator="{ toggle, isOpened }">
+            <Button
+                icon
+                skin="toolbar"
+                :active="isOpened"
+                @click="toggle"
+                v-tooltip="'Background Color'"
+            >
+                <Icon name="background-color" size="28px" auto-color />
+            </Button>
+        </template>
+    </ColorPicker>
+</template>
+
+<script>
+import { inject } from '@vue/composition-api';
+import { ColorPicker, Button, Icon } from '../../base';
+import { InjectionTokens } from '../../../injectionTokens';
+import { tooltip } from '../../../directives';
+
+export default {
+    name: 'BackgroundColorControl',
+
+    components: {
+        ColorPicker,
+        Button,
+        Icon
+    },
+
+    directives: {
+        tooltip
+    },
+
+    setup() {
+        const editor = inject(InjectionTokens.EDITOR);
+
+        const currentValue = editor.commands.getBackgroundColor();
+        const apply = (color) => editor.chain().applyBackgroundColor(color).run();
+
+        return {
+            currentValue,
+            apply
+        };
+    }
+};
+</script>

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

@@ -0,0 +1,54 @@
+<template>
+    <Dropdown
+        :options="$options.styles"
+        @change="apply"
+    >
+        <template #activator="{ open, isOpened }">
+            <Button
+                icon
+                skin="toolbar"
+                :active="isOpened"
+                @click="open"
+                v-tooltip="'Case Styles'"
+            >
+                <Icon name="case-style" size="28px" auto-color />
+            </Button>
+        </template>
+    </Dropdown>
+</template>
+
+<script>
+import { inject } from '@vue/composition-api';
+import { CaseStyles } from '../../../enums';
+import { Dropdown, Button, Icon } from '../../base';
+import { InjectionTokens } from '../../../injectionTokens';
+import { tooltip } from '../../../directives';
+
+export default {
+    name: 'CaseStyleControl',
+
+    components: {
+        Dropdown,
+        Button,
+        Icon
+    },
+
+    directives: {
+        tooltip
+    },
+
+    styles: [
+        { id: CaseStyles.UPPERCASE, title: 'UPPERCASE' },
+        { id: CaseStyles.LOWERCASE, title: 'lowercase' },
+        { id: CaseStyles.CAPITALIZE, title: 'Capitalize' }
+    ],
+
+    setup() {
+        const editor = inject(InjectionTokens.EDITOR);
+
+        const apply = (value) => editor.chain().focus().applyCaseStyle(value).run();
+
+        return { apply };
+    }
+};
+</script>

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

@@ -0,0 +1,48 @@
+<template>
+    <ColorPicker :value="currentValue" @change="apply">
+        <template #activator="{ toggle, isOpened }">
+            <Button
+                icon
+                skin="toolbar"
+                :active="isOpened"
+                @click="toggle"
+                v-tooltip="'Font Color'"
+            >
+                <Icon name="font-color" size="28px" auto-color />
+            </Button>
+        </template>
+    </ColorPicker>
+</template>
+
+<script>
+import { inject } from '@vue/composition-api';
+import { ColorPicker, Button, Icon } from '../../base';
+import { InjectionTokens } from '../../../injectionTokens';
+import { tooltip } from '../../../directives';
+
+export default {
+    name: 'FontColorControl',
+
+    components: {
+        ColorPicker,
+        Button,
+        Icon
+    },
+
+    directives: {
+        tooltip
+    },
+
+    setup() {
+        const editor = inject(InjectionTokens.EDITOR);
+
+        const currentValue = editor.commands.getFontColor();
+        const apply = (color) => editor.chain().applyFontColor(color).run();
+
+        return {
+            currentValue,
+            apply
+        };
+    }
+};
+</script>

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

@@ -0,0 +1,96 @@
+<template>
+    <Dropdown
+        class="zw-font-family-control"
+        :options="options"
+        :value="currentValue"
+        @change="apply"
+        v-tooltip="'Font Name'"
+    >
+        <template #option="{ option }">
+            <DropdownOption
+                class="zw-font-family-control__option"
+                :option="option"
+                :style="renderOptionStyles(option)"
+                v-tooltip="option.id"
+            />
+        </template>
+    </Dropdown>
+</template>
+
+<script>
+import { computed, inject } from '@vue/composition-api';
+import { InjectionTokens } from '../../../injectionTokens';
+import { tooltip } from '../../../directives';
+import { Dropdown, DropdownOption } from '../../base';
+import { useRecentFonts } from './composables';
+
+export default {
+    name: 'FontFamilyControl',
+
+    components: {
+        Dropdown,
+        DropdownOption
+    },
+
+    directives: {
+        tooltip
+    },
+
+    setup() {
+        const fonts = inject(InjectionTokens.FONTS);
+        const editor = inject(InjectionTokens.EDITOR);
+
+        const recentFontNames = useRecentFonts({ limit: 5 });
+
+        const recentFontsCategory = computed(() => ({
+            id: 'Recently Used',
+            options: recentFontNames.fonts.value.map((name) => ({ id: name }))
+        }));
+
+        const options = computed(() => {
+            const list = {};
+
+            for (const font of fonts) {
+                list[font.category] ??= { id: font.category, options: [] };
+                list[font.category].options.push({ id: font.name });
+            }
+
+            if (recentFontNames.isEmpty.value) {
+                return Object.values(list);
+            }
+
+            return [recentFontsCategory.value, ...Object.values(list)];
+        });
+
+        function renderOptionStyles(option) {
+            return { '--zw-font-family-option': `"${option.id}"` };
+        }
+
+        const currentValue = editor.commands.getFontFamily();
+
+        const apply = (fontFamily) => {
+            recentFontNames.add(fontFamily);
+            editor.chain().focus().applyFontFamily(fontFamily).run();
+        };
+
+        return {
+            options,
+            currentValue,
+            renderOptionStyles,
+            apply
+        };
+    }
+};
+</script>
+
+<style scoped>
+.zw-font-family-control {
+    width: 96px;
+}
+
+.zw-font-family-control__option {
+    font-weight: 400;
+    font-family: var(--zw-font-family-option);
+    width: 150px;
+}
+</style>

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

@@ -0,0 +1,45 @@
+<template>
+    <Dropdown
+        :options="options"
+        :value="currentValue"
+        @change="apply"
+        v-tooltip="{ text: 'Font Size', hotkey: 'Mod Shift +/-' }"
+    />
+</template>
+
+<script>
+import { computed, inject } from '@vue/composition-api';
+import { Dropdown } from '../../base';
+import { InjectionTokens } from '../../../injectionTokens';
+import { tooltip } from '../../../directives';
+
+export default {
+    name: 'FontSizeControl',
+
+    components: {
+        Dropdown
+    },
+
+    directives: {
+        tooltip
+    },
+
+    setup() {
+        const fontSizes = inject(InjectionTokens.FONT_SIZES);
+        const editor = inject(InjectionTokens.EDITOR);
+
+        const options = computed(() => {
+            return fontSizes.map((size) => ({ id: size, title: `${size}px` }));
+        });
+
+        const currentValue = editor.commands.getFontSize();
+        const apply = (value) => editor.chain().focus().applyFontSize(value).run();
+
+        return {
+            options,
+            currentValue,
+            apply
+        };
+    }
+};
+</script>