@zipify/wysiwyg 1.0.0-dev.16 → 1.0.0-dev.19

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

@@ -0,0 +1,52 @@
+<template>
+    <div>
+        <TextField
+            class="zw-margin-bottom--xs"
+            label="To what URL should this link go?"
+            placeholder="https://"
+            :value="href"
+            :error="validator.error.value"
+            @input="updateLink"
+        />
+
+        <Checkbox
+            label="Open in new tab"
+            :value="isTargetBlank"
+            @input="updateTarget"
+        />
+    </div>
+</template>
+
+<script>
+import { TextField, Checkbox } from '../../../../base';
+
+export default {
+    name: 'LinkControlUrl',
+
+    components: { TextField, Checkbox },
+
+    props: {
+        href: {
+            type: String,
+            required: true
+        },
+
+        isTargetBlank: {
+            type: Boolean,
+            required: true
+        },
+
+        validator: {
+            type: Object,
+            required: true
+        }
+    },
+
+    setup(props, { emit }) {
+        const updateLink = (value) => emit('updateLink', value);
+        const updateTarget = (value) => emit('updateTarget', value);
+
+        return { updateLink, updateTarget };
+    }
+};
+</script>

package/lib/components/toolbar/controls/link/destination/index.js

@@ -0,0 +1 @@
+export { default as LinkControlDestination } from './LinkControlDestination';

package/lib/components/toolbar/controls/link/index.js

@@ -0,0 +1 @@
+export { default as LinkControl } from './LinkControl';

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

@@ -1,9 +1,9 @@
 import { h, toRef } from '@vue/composition-api';
 import { EditorContent } from '@tiptap/vue-2';
 import { shallowMount } from '@vue/test-utils';
-import { CORE_EXTENSIONS } from '../../extensions';
 import { useEditor } from '../useEditor';
 import { NodeFactory } from '../../__tests__/utils';
+import { buildCoreExtensions } from '../../extensions/core';
 
 const TestComponent = {
     name: 'Test',
@@ -19,7 +19,7 @@ const TestComponent = {
     setup(props, { emit }) {
         const editor = useEditor({
             content: toRef(props, 'value'),
-            extensions: CORE_EXTENSIONS,
+            extensions: buildCoreExtensions(),
             onChange: (content) => emit('input', content),
             onFocus: () => emit('focus')
         });

package/lib/composables/useEditor.js

@@ -3,12 +3,11 @@ import { onUnmounted, watch, reactive } from '@vue/composition-api';
 import { ContentNormalizer } from '../services';
 
 export function useEditor({ content, onChange, extensions }) {
-    const normalizer = new ContentNormalizer();
-
     const editor = reactive(new Editor({
-        content: normalizer.normalize(content.value),
+        content: ContentNormalizer.normalize(content.value),
         onUpdate: () => onChange(editor.getJSON()),
-        extensions
+        extensions,
+        injectCSS: false
     }));
 
     onUnmounted(() => editor.destroy());
@@ -17,7 +16,7 @@ export function useEditor({ content, onChange, extensions }) {
         const isChanged = JSON.stringify(editor.getJSON()) !== JSON.stringify(value);
 
         if (isChanged) {
-            const content = normalizer.normalize(value);
+            const content = ContentNormalizer.normalize(value);
 
             editor.commands.setContent(content, false);
         }

package/lib/composables/useToolbar.js

@@ -1,33 +1,29 @@
 import { createPopper } from '@popperjs/core';
-import { onUnmounted, onMounted, watch } from '@vue/composition-api';
-import { useElementRef } from '../components/base/composables';
+import { useElementRef } from '../components/base';
 
-export function useToolbar({ wrapperRef, popperRef, offsets, isActiveRef }) {
+export function useToolbar({ wrapperRef, offsets, isActiveRef }) {
+    const wrapperEl = useElementRef(wrapperRef);
     let toolbar;
 
-    onMounted(() => {
-        const wrapperEl = useElementRef(wrapperRef).value;
-        const toolbarEl = useElementRef(popperRef).value;
-
-        toolbar = createPopper(wrapperEl, toolbarEl, {
+    function mount(element) {
+        toolbar = createPopper(wrapperEl.value, element, {
             placement: 'top-start',
             modifiers: [
                 {
                     name: 'offset',
-                    options: {
-                        offset: offsets
-                    }
+                    options: { offset: offsets }
                 }
             ]
         });
-    });
-    const update = () => toolbar.update();
-
-    watch(isActiveRef, () => {
-        if (isActiveRef.value) update();
-    });
+    }
 
-    onUnmounted(() => toolbar.destroy());
+    const update = () => toolbar?.update();
 
-    return { toolbar, update };
+    return {
+        toolbar,
+        update,
+        mount,
+        isActiveRef,
+        offsets
+    };
 }

package/lib/enums/LinkDestinations.js

@@ -0,0 +1,4 @@
+export const LinkDestinations = Object.freeze({
+    URL: 'url',
+    BLOCK: 'block'
+});

package/lib/enums/LinkTargets.js

@@ -0,0 +1,4 @@
+export const LinkTargets = Object.freeze({
+    BLANK: '_blank',
+    SELF: '_self'
+});

package/lib/enums/TextSettings.js

@@ -8,6 +8,7 @@ export const TextSettings = Object.freeze({
     FONT_WEIGHT: 'font_weight',
     LINE_HEIGHT: 'line_height',
     TEXT_DECORATION: 'text_decoration',
+    SUPERSCRIPT: 'superscript',
 
     get attributes() {
         return [
@@ -24,7 +25,8 @@ export const TextSettings = Object.freeze({
             this.FONT_SIZE,
             this.FONT_STYLE,
             this.FONT_WEIGHT,
-            this.TEXT_DECORATION
+            this.TEXT_DECORATION,
+            this.SUPERSCRIPT
         ];
     }
 });

package/lib/enums/index.js

@@ -4,3 +4,5 @@ export { Alignments } from './Alignments';
 export { NodeTypes } from './NodeTypes';
 export { ListTypes } from './ListTypes';
 export { TextSettings } from './TextSettings';
+export { LinkTargets } from './LinkTargets';
+export { LinkDestinations } from './LinkDestinations';

package/lib/extensions/Alignment.js

@@ -19,19 +19,31 @@ export const Alignment = Extension.create({
                 [TextSettings.ALIGNMENT]: {
                     isRequired: false,
 
-                    parseHTML(el) {
-                        const value = el.style.textAlign;
+                    parseHTML({ style }) {
+                        if (style.textAlign) {
+                            return {
+                                desktop: style.textAlign,
+                                tablet: style.textAlign,
+                                mobile: style.textAlign
+                            };
+                        }
 
-                        return value ? { desktop: value, tablet: value, mobile: value } : null;
+                        const mobile = style.getPropertyValue('--zw-text-align-mobile') || null;
+                        const tablet = style.getPropertyValue('--zw-text-align-tablet') || null;
+                        const desktop = style.getPropertyValue('--zw-text-align-desktop') || null;
+
+                        if (!mobile && !tablet && !desktop) return null;
+
+                        return { desktop, tablet, mobile };
                     },
 
                     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
+                            text_align_mobile: attrs.alignment.mobile,
+                            text_align_tablet: attrs.alignment.tablet,
+                            text_align_desktop: attrs.alignment.desktop
                         });
                     }
                 }

package/lib/extensions/BackgroundColor.js

@@ -22,12 +22,20 @@ export const BackgroundColor = Mark.create({
         };
     },
 
-    parseHTML: () => [
-        {
-            style: 'background-color',
-            getAttrs: (value) => ({ value: convertColor(value) })
-        }
-    ],
+    parseHTML() {
+        const getAttrs = (value) => ({ value: convertColor(value) });
+
+        return [
+            {
+                style: '--zw-background-color',
+                getAttrs
+            },
+            {
+                style: 'background-color',
+                getAttrs
+            }
+        ];
+    },
 
     renderHTML({ HTMLAttributes: attrs }) {
         return renderMark({ background_color: attrs.value });

package/lib/extensions/FontColor.js

@@ -30,12 +30,20 @@ export const FontColor = Mark.create({
         };
     },
 
-    parseHTML: () => [
-        {
-            style: 'color',
-            getAttrs: (value) => ({ value: convertColor(value) })
-        }
-    ],
+    parseHTML() {
+        const getAttrs = (value) => ({ value: convertColor(value) });
+
+        return [
+            {
+                style: '--zw-font-color',
+                getAttrs
+            },
+            {
+                style: 'color',
+                getAttrs
+            }
+        ];
+    },
 
     renderHTML({ HTMLAttributes: attrs }) {
         return renderMark({ font_color: attrs.value });

package/lib/extensions/FontFamily.js

@@ -7,7 +7,8 @@ export const FontFamily = Mark.create({
     name: TextSettings.FONT_FAMILY,
 
     addOptions: () => ({
-        fonts: []
+        fonts: [],
+        defaultFont: ''
     }),
 
     addAttributes: () => ({
@@ -56,14 +57,30 @@ export const FontFamily = Mark.create({
         };
     },
 
-    parseHTML: () => [
-        {
-            style: 'font-family',
-            getAttrs: (value) => ({ value })
-        }
-    ],
+    parseHTML() {
+        const getAttrs = (input) => {
+            const parsed = input.replace(/"/g, '');
+            const isExists = this.options.fonts.some((font) => font.name === parsed);
+            const value = isExists ? parsed : this.options.defaultFont;
+
+            return { value };
+        };
+
+        return [
+            {
+                style: '--zw-font-family',
+                getAttrs
+            },
+            {
+                style: 'font-family',
+                getAttrs
+            }
+        ];
+    },
 
     renderHTML({ HTMLAttributes: attrs }) {
-        return renderMark({ font_family: attrs.value });
+        const font_family = attrs.value ? `"${attrs.value}"` : null;
+
+        return renderMark({ font_family });
     }
 });

package/lib/extensions/FontSize.js

@@ -62,25 +62,38 @@ export const FontSize = Mark.create({
         'Mod-Shift--': createKeyboardShortcut('decreaseFontSize')
     }),
 
-    parseHTML: () => [
-        {
-            style: 'font-size',
-
-            getAttrs: (input) => {
-                const value = String(parseInt(input));
-
-                return { desktop: value, tablet: value, mobile: value };
+    parseHTML() {
+        const parseSize = (value) => value ? String(parseInt(value)) : null;
+
+        return [
+            {
+                tag: '[style*="--zw-font-size"]',
+
+                getAttrs: ({ style }) => ({
+                    mobile: parseSize(style.getPropertyValue('--zw-font-size-mobile')),
+                    tablet: parseSize(style.getPropertyValue('--zw-font-size-tablet')),
+                    desktop: parseSize(style.getPropertyValue('--zw-font-size-desktop'))
+                })
+            },
+            {
+                style: 'font-size',
+
+                getAttrs: (input) => {
+                    const value = parseSize(input);
+
+                    return { desktop: value, tablet: value, mobile: value };
+                }
             }
-        }
-    ],
+        ];
+    },
 
     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)
+            font_size_mobile: addUnits(attrs.mobile),
+            font_size_tablet: addUnits(attrs.tablet),
+            font_size_desktop: addUnits(attrs.desktop)
         });
     }
 });

package/lib/extensions/FontStyle.js

@@ -56,18 +56,28 @@ export const FontStyle = Mark.create({
         'Mod-I': createKeyboardShortcut('toggleItalic')
     }),
 
-    parseHTML: () => [
-        {
-            tag: 'i',
-            attrs: { italic: true }
-        },
-        {
-            style: 'font-style',
-            getAttrs: (value) => ({ italic: value.includes('italic') })
-        }
-    ],
-
-    renderHTML() {
-        return renderMark({ font_style: 'italic' });
+    parseHTML() {
+        const getAttrs = (value) => value.includes('italic') && { italic: true };
+
+        return [
+            {
+                style: '--zw-font-style',
+                getAttrs
+            },
+            {
+                style: 'font-style',
+                getAttrs
+            },
+            {
+                tag: 'i',
+                attrs: { italic: true }
+            }
+        ];
+    },
+
+    renderHTML({ HTMLAttributes: attrs }) {
+        const font_style = attrs.italic ? 'italic' : null;
+
+        return renderMark({ font_style });
     }
 });

package/lib/extensions/FontWeight.js

@@ -59,20 +59,28 @@ export const FontWeight = Mark.create({
         'Mod-B': createKeyboardShortcut('toggleBold')
     }),
 
-    parseHTML: () => [
-        {
-            tag: 'b',
-            attrs: { value: '700' }
-        },
-        {
-            tag: 'strong',
-            attrs: { value: '700' }
-        },
-        {
-            style: 'font-weight',
-            getAttrs: (value) => ({ value })
-        }
-    ],
+    parseHTML() {
+        const getAttrs = (value) => ({ value });
+
+        return [
+            {
+                style: '--zw-font-weight',
+                getAttrs
+            },
+            {
+                style: 'font-weight',
+                getAttrs
+            },
+            {
+                tag: 'b',
+                attrs: { value: '700' }
+            },
+            {
+                tag: 'strong',
+                attrs: { value: '700' }
+            }
+        ];
+    },
 
     renderHTML({ HTMLAttributes: attrs }) {
         return renderMark({ font_weight: attrs.value });

package/lib/extensions/LineHeight.js

@@ -21,6 +21,14 @@ export const LineHeight = Extension.create({
                     isRequired: false,
 
                     parseHTML(element) {
+                        if (element.matches('[style*="--zw-line-height"]')) {
+                            const mobile = element.style.getPropertyValue('--zw-line-height-mobile') || null;
+                            const tablet = element.style.getPropertyValue('--zw-line-height-tablet') || null;
+                            const desktop = element.style.getPropertyValue('--zw-line-height-desktop') || null;
+
+                            return { mobile, tablet, desktop };
+                        }
+
                         const value = element.style.lineHeight;
 
                         if (!value) return null;
@@ -41,9 +49,9 @@ export const LineHeight = Extension.create({
                         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
+                            line_height_mobile: attrs.line_height.mobile,
+                            line_height_tablet: attrs.line_height.tablet,
+                            line_height_desktop: attrs.line_height.desktop
                         });
                     }
                 }

package/lib/extensions/Link.js

@@ -0,0 +1,101 @@
+import Base from '@tiptap/extension-link';
+import { createCommand } from '../utils';
+import { LinkDestinations, LinkTargets } from '../enums';
+
+export const Link = Base.extend({
+    name: 'link',
+
+    addOptions() {
+        return {
+            ...this.parent?.(),
+            openOnClick: false,
+            HTMLAttributes: {
+                target: LinkTargets.SELF
+            },
+            preset: {},
+            basePresetClass: null,
+            pageBlocks: []
+        };
+    },
+
+    addAttributes() {
+        return {
+            href: {
+                default: null,
+                parseHTML: (element) => {
+                    const href = element.getAttribute('href');
+
+                    if (!href.startsWith('#')) return href;
+
+                    return parseFloat(element.getAttribute('href').replace('#', ''));
+                }
+            },
+
+            target: {
+                default: this.options.target,
+                parseHTML: (element) => {
+                    const target = element.getAttribute('target');
+
+                    if (!target) return LinkTargets.SELF;
+
+                    return target;
+                }
+            },
+
+            destination: {
+                default: LinkDestinations.URL,
+                parseHTML: (element) => {
+                    const href = element.getAttribute('href');
+
+                    if (!href.startsWith('#')) return LinkDestinations.URL;
+
+                    const id = href.replace('#', '');
+                    const block = this.options.pageBlocks.value.find((block) => block.id === parseInt(id));
+
+                    return block ? LinkDestinations.BLOCK : LinkDestinations.URL;
+                }
+            }
+        };
+    },
+
+    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 chain()
+                    .setMark(this.name, attributes)
+                    .transformText(() => attributes.text)
+                    .extendMarkRange('link')
+                    .run();
+            })
+        };
+    },
+
+    renderHTML({ HTMLAttributes: attrs }) {
+        const href = attrs.destination === LinkDestinations.BLOCK ? `#${attrs.href}` : attrs.href;
+
+        const presetClass = this.options.basePresetClass + this.options.preset.id;
+        const classes = `${presetClass} zw-style`;
+
+        const linkAttrs = {
+            href,
+            target: attrs.target,
+            class: classes
+        };
+
+        return ['a', linkAttrs, 0];
+    }
+});

package/lib/extensions/StylePreset.js

@@ -39,11 +39,13 @@ export const StylePreset = Extension.create({
                 attributes: {
                     preset: {
                         isRequired: false,
-                        default: null,
+                        default: { id: this.options.defaultId },
 
                         parseHTML: (element) => {
                             const presets = this.options.presetsRef.value;
 
+                            if (element.parentElement.tagName === 'LI') return null;
+
                             for (const { id, node, fallbackClass } of presets) {
                                 const isFallback = fallbackClass && element.classList.contains(fallbackClass);
 
@@ -148,7 +150,7 @@ export const StylePreset = Extension.create({
                 chain()
                     .storeSelection()
                     .expandSelectionToBlock()
-                    .unsetAllMarks()
+                    .unsetMarks(TextSettings.marks)
                     .resetAttributes(NodeTypes.PARAGRAPH, TextSettings.attributes)
                     .resetAttributes(NodeTypes.HEADING, TextSettings.attributes)
                     .restoreSelection()