@zipify/wysiwyg 1.0.0-dev.10 → 1.0.0-dev.100

package/lib/extensions/FontStyle.js

@@ -1,5 +1,5 @@
 import { Mark } from '@tiptap/vue-2';
-import { computed } from '@vue/composition-api';
+import { computed, unref } from 'vue';
 import { createCommand, createKeyboardShortcut, renderMark } from '../utils';
 import { TextSettings } from '../enums';
 
@@ -15,30 +15,30 @@ export const FontStyle = Mark.create({
             isItalic: createCommand(({ editor, commands }) => {
                 const defaultValue = commands.getDefaultFontStyle();
 
-                return computed(() => editor.getAttributes(this.name)?.italic ?? defaultValue.value.italic);
+                return computed(() => editor.getAttributes(this.name)?.italic ?? unref(defaultValue).italic);
             }),
 
             isItalicAvailable: createCommand(({ commands }) => {
                 const font = commands.getFont();
                 const fontWeight = commands.getFontWeight();
 
-                return computed(() => font.value.isItalicSupported(fontWeight.value));
+                return computed(() => unref(font).isItalicSupported(unref(fontWeight)));
             }),
 
             getDefaultFontStyle: createCommand(({ commands }) => {
                 const preset = commands.getPreset();
 
                 return computed(() => ({
-                    italic: preset.value.common.font_style === 'italic'
+                    italic: unref(preset).common.font_style === 'italic'
                 }));
             }),
 
             toggleItalic: createCommand(({ commands }) => {
-                const isItalicAvailable = this.editor.commands.isItalicAvailable();
+                const isItalicAvailable = unref(this.editor.commands.isItalicAvailable());
 
-                if (!isItalicAvailable.value) return;
+                if (!isItalicAvailable) return;
 
-                commands.isItalic().value ? commands.removeItalic() : commands.applyItalic();
+                unref(commands.isItalic()) ? commands.removeItalic() : commands.applyItalic();
             }),
 
             applyItalic: createCommand(({ commands }) => {
@@ -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

@@ -1,5 +1,5 @@
 import { Mark } from '@tiptap/vue-2';
-import { computed } from '@vue/composition-api';
+import { computed, unref } from 'vue';
 import { createCommand, createKeyboardShortcut, renderMark } from '../utils';
 import { TextSettings } from '../enums';
 
@@ -14,7 +14,7 @@ export const FontWeight = Mark.create({
         return {
             applyFontWeight: createCommand(({ commands }, value) => {
                 commands.setMark(this.name, { value });
-                const font = commands.getFont().value;
+                const font = unref(commands.getFont());
 
                 if (!font.isItalicSupported(value)) {
                     commands.removeItalic();
@@ -22,8 +22,8 @@ export const FontWeight = Mark.create({
             }),
 
             toggleBold: createCommand(({ commands }) => {
-                const currentWeight = commands.getFontWeight().value;
-                const currentFont = commands.getFont().value;
+                const currentWeight = unref(commands.getFontWeight());
+                const currentFont = unref(commands.getFont());
                 const isBold = Number(currentWeight) >= 600;
                 const wantedWeight = isBold ? '400' : '700';
                 const nextWeight = currentFont.findClosestWeight(wantedWeight);
@@ -33,23 +33,24 @@ export const FontWeight = Mark.create({
 
             getFontWeight: createCommand(({ editor, commands }) => {
                 const defaultValue = commands.getDefaultFontWeight();
-                const font = commands.getFont();
+                const fontRef = commands.getFont();
 
                 return computed(() => {
-                    const weight = editor.getAttributes(this.name)?.value ?? defaultValue.value;
+                    const weight = editor.getAttributes(this.name)?.value ?? unref(defaultValue);
+                    const font = unref(fontRef);
 
-                    if (font.value.isWeightSupported(weight)) {
+                    if (font.isWeightSupported(weight)) {
                         return weight;
                     }
 
-                    return font.value.findClosestWeight(weight);
+                    return font.findClosestWeight(weight);
                 });
             }),
 
             getDefaultFontWeight: createCommand(({ commands }) => {
                 const preset = commands.getPreset();
 
-                return computed(() => preset.value.common.font_weight);
+                return computed(() => unref(preset).common.font_weight);
             })
         };
     },
@@ -59,20 +60,30 @@ 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) => {
+            return Number(value) ? { value } : false;
+        };
+
+        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

@@ -1,6 +1,6 @@
 import { Extension } from '@tiptap/vue-2';
-import { computed } from '@vue/composition-api';
-import { createCommand, renderInlineSetting } from '../utils';
+import { computed, unref } from 'vue';
+import { createCommand, renderInlineSetting, convertLineHeight } from '../utils';
 import { NodeTypes, TextSettings } from '../enums';
 
 const DEFAULTS = {
@@ -12,43 +12,47 @@ const DEFAULTS = {
 export const LineHeight = Extension.create({
     name: TextSettings.LINE_HEIGHT,
 
-    addGlobalAttributes: () => [
-        {
-            types: [NodeTypes.PARAGRAPH, NodeTypes.HEADING],
-            attributes: {
-                [TextSettings.LINE_HEIGHT]: {
-                    isRequired: false,
+    addGlobalAttributes() {
+        return [
+            {
+                types: [NodeTypes.PARAGRAPH, NodeTypes.HEADING],
+                attributes: {
+                    [TextSettings.LINE_HEIGHT]: {
+                        isRequired: false,
 
-                    parseHTML(element) {
-                        const value = element.style.lineHeight;
+                        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;
 
-                        if (!value) return null;
+                                return { mobile, tablet, desktop };
+                            }
 
-                        if (!value.includes('px')) {
-                            return { desktop: value, tablet: value, mobile: value };
-                        }
+                            const value = element.style.lineHeight;
+
+                            if (!value) return null;
 
-                        // element is not connected to window so getComputedStyle is not working on element
-                        const childFontSize = element.firstElementChild.style.fontSize;
-                        const fontSize = childFontSize || window.getComputedStyle(document.body).fontSize;
-                        const relative = (parseFloat(value) / parseFloat(fontSize)).toFixed(2);
+                            const wrapperEl = unref(this.options.wrapperRef);
+                            const converted = convertLineHeight(value, element, wrapperEl);
 
-                        return { desktop: relative, tablet: relative, mobile: relative };
-                    },
+                            return { desktop: converted, tablet: converted, mobile: converted };
+                        },
 
-                    renderHTML(attrs) {
-                        if (!attrs.line_height) return null;
+                        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
-                        });
+                            return renderInlineSetting({
+                                line_height_mobile: attrs.line_height.mobile,
+                                line_height_tablet: attrs.line_height.tablet,
+                                line_height_desktop: attrs.line_height.desktop
+                            });
+                        }
                     }
                 }
             }
-        }
-    ],
+        ];
+    },
 
     addCommands() {
         return {
@@ -57,18 +61,18 @@ export const LineHeight = Extension.create({
                 const device = commands.getDevice();
                 const defaultValue = commands.getDefaultLineHeight();
 
-                return computed(() => attribute.value?.[device.value] ?? defaultValue.value);
+                return computed(() => unref(attribute)?.[unref(device)] ?? unref(defaultValue));
             }),
 
             getDefaultLineHeight: createCommand(({ commands }) => {
                 const device = commands.getDevice();
                 const preset = commands.getPreset();
 
-                return computed(() => preset.value[device.value].line_height);
+                return computed(() => unref(preset)[unref(device)].line_height);
             }),
 
             applyLineHeight: createCommand(({ commands }, value) => {
-                const device = commands.getDevice().value;
+                const device = unref(commands.getDevice());
 
                 commands.setBlockAttributes(this.name, { [device]: value }, DEFAULTS);
             })

package/lib/extensions/Link.js

@@ -0,0 +1,92 @@
+import Base from '@tiptap/extension-link';
+import { unref } from 'vue';
+import { createCommand } from '../utils';
+import { LinkDestinations, LinkTargets } from '../enums';
+
+export const Link = Base.extend({
+    name: 'link',
+
+    addOptions() {
+        return {
+            ...this.parent?.(),
+            openOnClick: false
+        };
+    },
+
+    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: LinkTargets.SELF,
+                parseHTML: (element) => element.getAttribute('target') || LinkTargets.SELF
+            },
+
+            destination: {
+                default: LinkDestinations.URL,
+
+                parseHTML: (element) => {
+                    const href = element.getAttribute('href');
+
+                    if (!href.startsWith('#')) return LinkDestinations.URL;
+
+                    const id = href.replace('#', '');
+                    const blocks = unref(this.options.pageBlocks);
+                    const block = blocks.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/Margin.js

@@ -0,0 +1,38 @@
+import { Extension } from '@tiptap/vue-2';
+import { NodeTypes, TextSettings } from '../enums';
+import { renderInlineSetting } from '../utils';
+
+// Fallback margins in old wysiwyg content
+export const Margin = Extension.create({
+    name: TextSettings.MARGIN,
+
+    addGlobalAttributes: () => [
+        {
+            types: [NodeTypes.PARAGRAPH, NodeTypes.HEADING],
+
+            attributes: {
+                [TextSettings.MARGIN]: {
+                    isRequired: false,
+
+                    parseHTML(el) {
+                        const { margin, marginTop, marginRight, marginBottom, marginLeft } = el.style;
+                        const isPreset = [margin, marginTop, marginRight, marginBottom, marginLeft].some((v) => !!v);
+
+                        if (!isPreset) return null;
+                        if (margin) return { value: margin };
+
+                        const value = [marginTop || 0, marginRight || 0, marginBottom || 0, marginLeft || 0].join(' ');
+
+                        return { value };
+                    },
+
+                    renderHTML(attrs) {
+                        if (!attrs.margin) return null;
+
+                        return renderInlineSetting({ margin: attrs.margin.value });
+                    }
+                }
+            }
+        }
+    ]
+});

package/lib/extensions/StylePreset.js

@@ -1,8 +1,9 @@
 import { Extension } from '@tiptap/vue-2';
-import { computed, toRef } from '@vue/composition-api';
+import { computed, toRef, unref } from 'vue';
 import { Heading } from '@tiptap/extension-heading';
 import { createCommand } from '../utils';
 import { Devices, NodeTypes, TextSettings } from '../enums';
+import { ContextWindow } from '../services';
 
 function makePresetClass(base, preset) {
     const baseClass = base.split(' ').map((part) => `.${part}`).join('');
@@ -20,13 +21,6 @@ export const StylePreset = Extension.create({
         })
     ],
 
-    addOptions: () => ({
-        presetsRef: null,
-        defaultId: null,
-        baseClass: null,
-        makeVariable: null
-    }),
-
     addStorage: () => ({
         presetStyleEl: null
     }),
@@ -38,10 +32,12 @@ export const StylePreset = Extension.create({
                 attributes: {
                     preset: {
                         isRequired: false,
-                        default: null,
+                        default: { id: this.options.defaultId },
 
                         parseHTML: (element) => {
-                            const presets = this.options.presetsRef.value;
+                            const presets = unref(this.options.presets);
+
+                            if (element.parentElement.tagName === 'LI') return null;
 
                             for (const { id, node, fallbackClass } of presets) {
                                 const isFallback = fallbackClass && element.classList.contains(fallbackClass);
@@ -76,18 +72,18 @@ export const StylePreset = Extension.create({
 
         return {
             getPresetList: createCommand(() => computed(() => {
-                return this.options.presetsRef.value.filter((preset) => !preset.hidden);
+                return this.options.presets.filter((preset) => !preset.hidden);
             })),
 
             getPreset: createCommand(({ commands }) => {
                 const selection = commands.getBlockAttributes('preset', { id: this.options.defaultId });
                 const presets = commands.getPresetList();
 
-                return computed(() => findPresetById(presets.value, selection.value.id));
+                return computed(() => findPresetById(unref(presets), unref(selection).id));
             }),
 
             applyPreset: createCommand(({ commands, chain }, presetId) => {
-                const presets = commands.getPresetList().value;
+                const presets = unref(commands.getPresetList());
                 const preset = findPresetById(presets, presetId);
                 const nodeType = preset.node?.type ?? NodeTypes.PARAGRAPH;
 
@@ -100,7 +96,7 @@ export const StylePreset = Extension.create({
                 }
 
                 for (const textAttribute of TextSettings.attributes) {
-                    attrs[textAttribute] = commands.getBlockAttributes(textAttribute).value;
+                    attrs[textAttribute] = unref(commands.getBlockAttributes(textAttribute));
                 }
 
                 chain().removeList().setNode(nodeType, attrs).run();
@@ -147,32 +143,37 @@ export const StylePreset = Extension.create({
                 chain()
                     .storeSelection()
                     .expandSelectionToBlock()
-                    .unsetAllMarks()
+                    .unsetMarks(TextSettings.marks)
                     .resetAttributes(NodeTypes.PARAGRAPH, TextSettings.attributes)
                     .resetAttributes(NodeTypes.HEADING, TextSettings.attributes)
                     .restoreSelection()
                     .run();
             }),
 
-            removeFormat: createCommand(({ commands }) => {
-                commands.removePresetCustomization();
-                commands.applyDefaultPreset();
+            removeFormat: createCommand(({ chain }) => {
+                chain()
+                    .storeSelection()
+                    .expandSelectionToBlock()
+                    .unsetAllMarks()
+                    .applyDefaultPreset()
+                    .restoreSelection()
+                    .run();
             })
         };
     },
 
     onCreate() {
-        const existingStyleEl = document.querySelector('[data-zw-styles]');
+        const existingStyleEl = ContextWindow.document.querySelector('[data-zw-styles]');
 
         if (existingStyleEl) {
             this.storage.presetStyleEl = existingStyleEl;
             return;
         }
 
-        this.storage.presetStyleEl = document.createElement('style');
+        this.storage.presetStyleEl = ContextWindow.document.createElement('style');
         this.storage.presetStyleEl.dataset.zwStyles = '';
 
-        for (const preset of this.options.presetsRef.value) {
+        for (const preset of this.options.presets) {
             const className = makePresetClass(this.options.baseClass, preset);
             const css = [` ${className} {`];
 
@@ -190,6 +191,6 @@ export const StylePreset = Extension.create({
             this.storage.presetStyleEl.innerHTML += css.join(' ');
         }
 
-        document.head.append(this.storage.presetStyleEl);
+        ContextWindow.head.append(this.storage.presetStyleEl);
     }
 });

package/lib/extensions/Superscript.js

@@ -1,5 +1,9 @@
 import Base from '@tiptap/extension-superscript';
 
 export const Superscript = Base.extend({
-    addKeyboardShortcuts: null
+    addKeyboardShortcuts: null,
+
+    addOptions: () => ({
+        HTMLAttributes: { class: 'zw-superscript' }
+    })
 });