@zipify/wysiwyg 1.0.0-dev.1

package/lib/directives/outClick.js

@@ -0,0 +1,37 @@
+const dataStorage = new WeakMap();
+
+export const outClick = {
+    bind(el, { value }) {
+        const onOutClick = value.onOutClick || value;
+        const isEnabled = !value.isDisabled;
+
+        function onClick(event) {
+            const isInside = event.target === el || el.contains(event.target);
+
+            if (event.target.isConnected && !isInside) onOutClick(event);
+        }
+
+        dataStorage.set(el, { callback: onClick, isEnabled });
+
+        if (isEnabled) {
+            setTimeout(() => document.addEventListener('click', onClick));
+        }
+    },
+
+    update(el, { value }) {
+        const data = dataStorage.get(el);
+        const isEnabled = !value.isDisabled;
+
+        if (isEnabled === data.isEnabled) return;
+
+        isEnabled
+            ? document.addEventListener('click', data.callback)
+            : document.removeEventListener('click', data.callback);
+
+        dataStorage.set(el, { callback: data.callback, isEnabled });
+    },
+
+    unbind(el) {
+        document.removeEventListener('click', dataStorage.get(el).callback);
+    }
+};

package/lib/directives/tooltip.js

@@ -0,0 +1,7 @@
+export function tooltip(el, { value }) {
+    const options = typeof value === 'string' ? { text: value } : value;
+    const { text, hotkey } = options;
+
+    if (text) el.dataset.tooltip = text;
+    if (text && hotkey) el.dataset.tooltipHotkey = hotkey;
+}

package/lib/enums/Alignments.js

@@ -0,0 +1,6 @@
+export const Alignments = Object.freeze({
+    LEFT: 'left',
+    CENTER: 'center',
+    RIGHT: 'right',
+    JUSTIFY: 'justify'
+});

package/lib/enums/CaseStyles.js

@@ -0,0 +1,5 @@
+export const CaseStyles = Object.freeze({
+    UPPERCASE: 'uppercase',
+    LOWERCASE: 'lowercase',
+    CAPITALIZE: 'capitalize'
+});

package/lib/enums/Devices.js

@@ -0,0 +1,15 @@
+export const Devices = Object.freeze({
+    COMMON: 'common',
+    DESKTOP: 'desktop',
+    TABLET: 'tablet',
+    MOBILE: 'mobile',
+
+    get values() {
+        return [
+            this.COMMON,
+            this.MOBILE,
+            this.TABLET,
+            this.DESKTOP
+        ];
+    }
+});

package/lib/enums/ListTypes.js

@@ -0,0 +1,23 @@
+export const ListTypes = Object.freeze({
+    DISC: 'disc',
+    CIRCLE: 'circle',
+    SQUARE: 'square',
+    DECIMAL: 'decimal',
+    ROMAN: 'roman',
+    LATIN: 'latin',
+
+    get values() {
+        return [
+            this.DISC,
+            this.CIRCLE,
+            this.SQUARE,
+            this.DECIMAL,
+            this.ROMAN,
+            this.LATIN
+        ];
+    },
+
+    get ordered() {
+        return [this.DECIMAL, this.ROMAN, this.LATIN];
+    }
+});

package/lib/enums/NodeTypes.js

@@ -0,0 +1,12 @@
+export const NodeTypes = Object.freeze({
+    DOCUMENT: 'doc',
+    PARAGRAPH: 'paragraph',
+    HEADING: 'heading',
+    LIST: 'list',
+    LIST_ITEM: 'listItem',
+    TEXT: 'text',
+
+    get blocks() {
+        return [this.PARAGRAPH, this.LIST, this.HEADING];
+    }
+});

package/lib/enums/TextSettings.js

@@ -0,0 +1,30 @@
+export const TextSettings = Object.freeze({
+    ALIGNMENT: 'alignment',
+    BACKGROUND_COLOR: 'background_color',
+    FONT_COLOR: 'font_color',
+    FONT_FAMILY: 'font_family',
+    FONT_SIZE: 'font_size',
+    FONT_STYLE: 'font_style',
+    FONT_WEIGHT: 'font_weight',
+    LINE_HEIGHT: 'line_height',
+    TEXT_DECORATION: 'text_decoration',
+
+    get attributes() {
+        return [
+            this.ALIGNMENT,
+            this.LINE_HEIGHT
+        ];
+    },
+
+    get marks() {
+        return [
+            this.BACKGROUND_COLOR,
+            this.FONT_COLOR,
+            this.FONT_FAMILY,
+            this.FONT_SIZE,
+            this.FONT_STYLE,
+            this.FONT_WEIGHT,
+            this.TEXT_DECORATION
+        ];
+    }
+});

package/lib/enums/index.js

@@ -0,0 +1,6 @@
+export { Devices } from './Devices';
+export { CaseStyles } from './CaseStyles';
+export { Alignments } from './Alignments';
+export { NodeTypes } from './NodeTypes';
+export { ListTypes } from './ListTypes';
+export { TextSettings } from './TextSettings';

package/lib/extensions/Alignment.js

@@ -0,0 +1,67 @@
+import { Extension } from '@tiptap/vue-2';
+import { computed } from '@vue/composition-api';
+import { createCommand, createKeyboardShortcut, renderInlineSetting } from '../utils';
+import { Alignments, NodeTypes, TextSettings } from '../enums';
+
+const DEFAULTS = {
+    mobile: null,
+    tablet: null,
+    desktop: null
+};
+
+export const Alignment = Extension.create({
+    name: TextSettings.ALIGNMENT,
+
+    addGlobalAttributes: () => [
+        {
+            types: [NodeTypes.PARAGRAPH, NodeTypes.HEADING],
+            attributes: {
+                [TextSettings.ALIGNMENT]: {
+                    isRequired: false,
+
+                    renderHTML(attrs) {
+                        if (!attrs.alignment) return null;
+
+                        return renderInlineSetting({
+                            mobile_text_align: attrs.alignment.mobile,
+                            tablet_text_align: attrs.alignment.tablet,
+                            desktop_text_align: attrs.alignment.desktop
+                        });
+                    }
+                }
+            }
+        }
+    ],
+
+    addCommands() {
+        return {
+            applyAlignment: createCommand(({ commands }, value) => {
+                const device = commands.getDevice().value;
+
+                commands.setBlockAttributes(this.name, { [device]: value }, DEFAULTS);
+            }),
+
+            getAlignment: createCommand(({ commands }) => {
+                const attribute = commands.getBlockAttributes(this.name, DEFAULTS);
+                const device = commands.getDevice();
+                const defaultValue = commands.getDefaultAlignment();
+
+                return computed(() => attribute.value?.[device.value] ?? defaultValue.value);
+            }),
+
+            getDefaultAlignment: createCommand(({ commands }) => {
+                const device = commands.getDevice();
+                const preset = commands.getPreset();
+
+                return computed(() => preset.value[device.value].alignment);
+            })
+        };
+    },
+
+    addKeyboardShortcuts: () => ({
+        'Mod-Shift-l': createKeyboardShortcut('applyAlignment', Alignments.LEFT),
+        'Mod-Shift-e': createKeyboardShortcut('applyAlignment', Alignments.CENTER),
+        'Mod-Shift-r': createKeyboardShortcut('applyAlignment', Alignments.RIGHT),
+        'Mod-Shift-j': createKeyboardShortcut('applyAlignment', Alignments.JUSTIFY)
+    })
+});

package/lib/extensions/BackgroundColor.js

@@ -0,0 +1,28 @@
+import { Mark } from '@tiptap/vue-2';
+import { computed } from '@vue/composition-api';
+import { createCommand, renderMark } from '../utils';
+import { TextSettings } from '../enums';
+
+export const BackgroundColor = Mark.create({
+    name: TextSettings.BACKGROUND_COLOR,
+
+    addAttributes: () => ({
+        value: { required: true }
+    }),
+
+    addCommands() {
+        return {
+            getBackgroundColor: createCommand(({ editor }) => {
+                return computed(() => editor.getAttributes(this.name)?.value ?? 'rgba(255, 255, 255, 0%)');
+            }),
+
+            applyBackgroundColor: createCommand(({ commands }, value) => {
+                commands.setMark(this.name, { value });
+            })
+        };
+    },
+
+    renderHTML({ HTMLAttributes: attrs }) {
+        return renderMark({ background_color: attrs.value });
+    }
+});

package/lib/extensions/CaseStyle.js

@@ -0,0 +1,36 @@
+import { Extension } from '@tiptap/vue-2';
+import { capitalize, createCommand } from '../utils';
+import { CaseStyles } from '../enums';
+
+export const CaseStyle = Extension.create({
+    name: 'case_style',
+
+    addCommands() {
+        return {
+            applyCaseStyle: createCommand(({ commands }, value) => {
+                switch (value) {
+                    case CaseStyles.CAPITALIZE:
+                        return commands.applyCapitalize();
+
+                    case CaseStyles.LOWERCASE:
+                        return commands.applyLowerCase();
+
+                    case CaseStyles.UPPERCASE:
+                        return commands.applyUpperCase();
+                }
+            }),
+
+            applyCapitalize: createCommand(({ commands }) => {
+                commands.transformText(({ text }) => capitalize(text));
+            }),
+
+            applyLowerCase: createCommand(({ commands }) => {
+                commands.transformText(({ text }) => text.toLowerCase());
+            }),
+
+            applyUpperCase: createCommand(({ commands }) => {
+                commands.transformText(({ text }) => text.toUpperCase());
+            })
+        };
+    }
+});

package/lib/extensions/DeviceManager.js

@@ -0,0 +1,16 @@
+import { Extension } from '@tiptap/vue-2';
+import { createCommand } from '../utils';
+
+export const DeviceManager = Extension.create({
+    name: 'device_manager',
+
+    addOptions: () => ({
+        deviceRef: null
+    }),
+
+    addCommands() {
+        return {
+            getDevice: createCommand(() => this.options.deviceRef)
+        };
+    }
+});

package/lib/extensions/FontColor.js

@@ -0,0 +1,36 @@
+import { Mark } from '@tiptap/vue-2';
+import { computed } from '@vue/composition-api';
+import { createCommand, renderMark } from '../utils';
+import { TextSettings } from '../enums';
+
+export const FontColor = Mark.create({
+    name: TextSettings.FONT_COLOR,
+
+    addAttributes: () => ({
+        value: { required: true }
+    }),
+
+    addCommands() {
+        return {
+            getFontColor: createCommand(({ commands, editor }) => {
+                const defaultValue = commands.getDefaultFontColor();
+
+                return computed(() => editor.getAttributes(this.name)?.value ?? defaultValue.value);
+            }),
+
+            getDefaultFontColor: createCommand(({ commands }) => {
+                const preset = commands.getPreset();
+
+                return computed(() => preset.value.common.color);
+            }),
+
+            applyFontColor: createCommand(({ commands }, value) => {
+                commands.setMark(this.name, { value });
+            })
+        };
+    },
+
+    renderHTML({ HTMLAttributes: attrs }) {
+        return renderMark({ font_color: attrs.value });
+    }
+});

package/lib/extensions/FontFamily.js

@@ -0,0 +1,62 @@
+import { Mark } from '@tiptap/vue-2';
+import { computed } from '@vue/composition-api';
+import { createCommand, renderMark } from '../utils';
+import { TextSettings } from '../enums';
+
+export const FontFamily = Mark.create({
+    name: TextSettings.FONT_FAMILY,
+
+    addOptions: () => ({
+        fonts: []
+    }),
+
+    addAttributes: () => ({
+        value: { required: true }
+    }),
+
+    addCommands() {
+        return {
+            applyFontFamily: createCommand(({ commands }, value) => {
+                commands.setMark(this.name, { value });
+
+                const font = commands.findFontByName(value);
+                let fontWeight = commands.getFontWeight().value;
+
+                if (!font.isWeightSupported(fontWeight)) {
+                    fontWeight = font.findClosestWeight(fontWeight);
+                    commands.applyFontWeight(fontWeight);
+                }
+
+                if (!font.isItalicSupported(fontWeight)) {
+                    commands.removeItalic();
+                }
+            }),
+
+            getFont: createCommand(({ commands }) => {
+                const fontFamily = commands.getFontFamily();
+
+                return computed(() => commands.findFontByName(fontFamily.value));
+            }),
+
+            findFontByName: createCommand((_, name) => {
+                return this.options.fonts.find((font) => font.name === name);
+            }),
+
+            getFontFamily: createCommand(({ editor, commands }) => {
+                const defaultValue = commands.getDefaultFontFamily();
+
+                return computed(() => editor.getAttributes(this.name)?.value ?? defaultValue.value);
+            }),
+
+            getDefaultFontFamily: createCommand(({ commands }) => {
+                const preset = commands.getPreset();
+
+                return computed(() => preset.value.common.font_family);
+            })
+        };
+    },
+
+    renderHTML({ HTMLAttributes: attrs }) {
+        return renderMark({ font_family: attrs.value });
+    }
+});

package/lib/extensions/FontSize.js

@@ -0,0 +1,74 @@
+import { Mark } from '@tiptap/vue-2';
+import { computed } from '@vue/composition-api';
+import { createCommand, createKeyboardShortcut, renderMark } from '../utils';
+import { TextSettings } from '../enums';
+
+export const FontSize = Mark.create({
+    name: TextSettings.FONT_SIZE,
+
+    addOptions: () => ({
+        minSize: 1,
+        maxSize: 100
+    }),
+
+    addAttributes() {
+        return {
+            mobile: { default: null },
+            tablet: { default: null },
+            desktop: { default: null }
+        };
+    },
+
+    addCommands() {
+        return {
+            getFontSize: createCommand(({ editor, commands }) => {
+                const device = commands.getDevice();
+                const defaultValue = commands.getDefaultFontSize();
+
+                return computed(() => editor.getAttributes(this.name)?.[device.value] ?? defaultValue.value);
+            }),
+
+            getDefaultFontSize: createCommand(({ commands }) => {
+                const device = commands.getDevice();
+                const preset = commands.getPreset();
+
+                return computed(() => preset.value[device.value].font_size.replace('px', ''));
+            }),
+
+            applyFontSize: createCommand(({ commands }, value) => {
+                const device = commands.getDevice().value;
+
+                commands.setMark(this.name, { [device]: value });
+            }),
+
+            increaseFontSize: createCommand(({ commands }) => {
+                const size = Number(commands.getFontSize().value);
+                const nextSize = Math.min(size + 1, this.options.maxSize);
+
+                commands.applyFontSize(String(nextSize));
+            }),
+
+            decreaseFontSize: createCommand(({ commands }) => {
+                const size = Number(commands.getFontSize().value);
+                const nextSize = Math.max(size - 1, this.options.minSize);
+
+                commands.applyFontSize(String(nextSize));
+            })
+        };
+    },
+
+    addKeyboardShortcuts: () => ({
+        'Mod-Shift-=': createKeyboardShortcut('increaseFontSize'),
+        'Mod-Shift--': createKeyboardShortcut('decreaseFontSize')
+    }),
+
+    renderHTML({ HTMLAttributes: attrs }) {
+        const addUnits = (value) => value ? `${value}px` : null;
+
+        return renderMark({
+            mobile_font_size: addUnits(attrs.mobile),
+            tablet_font_size: addUnits(attrs.tablet),
+            desktop_font_size: addUnits(attrs.desktop)
+        });
+    }
+});

package/lib/extensions/FontStyle.js

@@ -0,0 +1,62 @@
+import { Mark } from '@tiptap/vue-2';
+import { computed } from '@vue/composition-api';
+import { createCommand, createKeyboardShortcut, renderMark } from '../utils';
+import { TextSettings } from '../enums';
+
+export const FontStyle = Mark.create({
+    name: TextSettings.FONT_STYLE,
+
+    addAttributes: () => ({
+        italic: { required: true }
+    }),
+
+    addCommands() {
+        return {
+            isItalic: createCommand(({ editor, commands }) => {
+                const defaultValue = commands.getDefaultFontStyle();
+
+                return computed(() => editor.getAttributes(this.name)?.italic ?? defaultValue.value.italic);
+            }),
+
+            isItalicAvailable: createCommand(({ commands }) => {
+                const font = commands.getFont();
+                const fontWeight = commands.getFontWeight();
+
+                return computed(() => font.value.isItalicSupported(fontWeight.value));
+            }),
+
+            getDefaultFontStyle: createCommand(({ commands }) => {
+                const preset = commands.getPreset();
+
+                return computed(() => ({
+                    italic: preset.value.common.font_style === 'italic'
+                }));
+            }),
+
+            toggleItalic: createCommand(({ commands }) => {
+                const isItalicAvailable = this.editor.commands.isItalicAvailable();
+
+                if (!isItalicAvailable.value) return;
+
+                commands.isItalic().value ? commands.removeItalic() : commands.applyItalic();
+            }),
+
+            applyItalic: createCommand(({ commands }) => {
+                commands.setMark(this.name, { italic: true });
+            }),
+
+            removeItalic: createCommand(({ commands }) => {
+                commands.unsetMark(this.name);
+            })
+        };
+    },
+
+    addKeyboardShortcuts: () => ({
+        'Mod-i': createKeyboardShortcut('toggleItalic'),
+        'Mod-I': createKeyboardShortcut('toggleItalic')
+    }),
+
+    renderHTML() {
+        return renderMark({ font_style: 'italic' });
+    }
+});

package/lib/extensions/FontWeight.js

@@ -0,0 +1,56 @@
+import { Mark } from '@tiptap/vue-2';
+import { computed } from '@vue/composition-api';
+import { createCommand, createKeyboardShortcut, renderMark } from '../utils';
+import { TextSettings } from '../enums';
+
+export const FontWeight = Mark.create({
+    name: TextSettings.FONT_WEIGHT,
+
+    addAttributes: () => ({
+        value: { required: true }
+    }),
+
+    addCommands() {
+        return {
+            applyFontWeight: createCommand(({ commands }, value) => {
+                commands.setMark(this.name, { value });
+                const font = commands.getFont().value;
+
+                if (!font.isItalicSupported(value)) {
+                    commands.removeItalic();
+                }
+            }),
+
+            toggleBold: createCommand(({ commands }) => {
+                const currentWeight = commands.getFontWeight().value;
+                const currentFont = commands.getFont().value;
+                const isBold = Number(currentWeight) >= 600;
+                const wantedWeight = isBold ? '400' : '700';
+                const nextWeight = currentFont.findClosestWeight(wantedWeight);
+
+                commands.applyFontWeight(nextWeight);
+            }),
+
+            getFontWeight: createCommand(({ editor, commands }) => {
+                const defaultValue = commands.getDefaultFontWeight();
+
+                return computed(() => editor.getAttributes(this.name)?.value ?? defaultValue.value);
+            }),
+
+            getDefaultFontWeight: createCommand(({ commands }) => {
+                const preset = commands.getPreset();
+
+                return computed(() => preset.value.common.font_weight);
+            })
+        };
+    },
+
+    addKeyboardShortcuts: () => ({
+        'Mod-b': createKeyboardShortcut('toggleBold'),
+        'Mod-B': createKeyboardShortcut('toggleBold')
+    }),
+
+    renderHTML({ HTMLAttributes: attrs }) {
+        return renderMark({ font_weight: attrs.value });
+    }
+});

package/lib/extensions/LineHeight.js

@@ -0,0 +1,60 @@
+import { Extension } from '@tiptap/vue-2';
+import { computed } from '@vue/composition-api';
+import { createCommand, renderInlineSetting } from '../utils';
+import { NodeTypes, TextSettings } from '../enums';
+
+const DEFAULTS = {
+    mobile: null,
+    tablet: null,
+    desktop: null
+};
+
+export const LineHeight = Extension.create({
+    name: TextSettings.LINE_HEIGHT,
+
+    addGlobalAttributes: () => [
+        {
+            types: [NodeTypes.PARAGRAPH, NodeTypes.HEADING],
+            attributes: {
+                [TextSettings.LINE_HEIGHT]: {
+                    isRequired: false,
+
+                    renderHTML(attrs) {
+                        if (!attrs.line_height) return null;
+
+                        return renderInlineSetting({
+                            mobile_line_height: attrs.line_height.mobile,
+                            tablet_line_height: attrs.line_height.tablet,
+                            desktop_line_height: attrs.line_height.desktop
+                        });
+                    }
+                }
+            }
+        }
+    ],
+
+    addCommands() {
+        return {
+            getLineHeight: createCommand(({ commands }) => {
+                const attribute = commands.getBlockAttributes(this.name, DEFAULTS);
+                const device = commands.getDevice();
+                const defaultValue = commands.getDefaultLineHeight();
+
+                return computed(() => attribute.value?.[device.value] ?? defaultValue.value);
+            }),
+
+            getDefaultLineHeight: createCommand(({ commands }) => {
+                const device = commands.getDevice();
+                const preset = commands.getPreset();
+
+                return computed(() => preset.value[device.value].line_height);
+            }),
+
+            applyLineHeight: createCommand(({ commands }, value) => {
+                const device = commands.getDevice().value;
+
+                commands.setBlockAttributes(this.name, { [device]: value }, DEFAULTS);
+            })
+        };
+    }
+});