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

package/lib/extensions/BackgroundColor.js

@@ -1,6 +1,6 @@
 import { Mark } from '@tiptap/vue-2';
 import { computed } from '@vue/composition-api';
-import { createCommand, renderMark } from '../utils';
+import { convertColor, createCommand, renderMark } from '../utils';
 import { TextSettings } from '../enums';
 
 export const BackgroundColor = Mark.create({
@@ -22,6 +22,13 @@ export const BackgroundColor = Mark.create({
         };
     },
 
+    parseHTML: () => [
+        {
+            style: 'background-color',
+            getAttrs: (value) => ({ value: convertColor(value) })
+        }
+    ],
+
     renderHTML({ HTMLAttributes: attrs }) {
         return renderMark({ background_color: attrs.value });
     }

package/lib/extensions/FontColor.js

@@ -1,6 +1,6 @@
 import { Mark } from '@tiptap/vue-2';
 import { computed } from '@vue/composition-api';
-import { createCommand, renderMark } from '../utils';
+import { convertColor, createCommand, renderMark } from '../utils';
 import { TextSettings } from '../enums';
 
 export const FontColor = Mark.create({
@@ -30,6 +30,13 @@ export const FontColor = Mark.create({
         };
     },
 
+    parseHTML: () => [
+        {
+            style: 'color',
+            getAttrs: (value) => ({ value: convertColor(value) })
+        }
+    ],
+
     renderHTML({ HTMLAttributes: attrs }) {
         return renderMark({ font_color: attrs.value });
     }

package/lib/extensions/FontFamily.js

@@ -56,6 +56,13 @@ export const FontFamily = Mark.create({
         };
     },
 
+    parseHTML: () => [
+        {
+            style: 'font-family',
+            getAttrs: (value) => ({ value })
+        }
+    ],
+
     renderHTML({ HTMLAttributes: attrs }) {
         return renderMark({ font_family: attrs.value });
     }

package/lib/extensions/FontSize.js

@@ -62,6 +62,18 @@ 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 };
+            }
+        }
+    ],
+
     renderHTML({ HTMLAttributes: attrs }) {
         const addUnits = (value) => value ? `${value}px` : null;
 

package/lib/extensions/FontStyle.js

@@ -56,6 +56,17 @@ 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' });
     }

package/lib/extensions/FontWeight.js

@@ -33,8 +33,17 @@ export const FontWeight = Mark.create({
 
             getFontWeight: createCommand(({ editor, commands }) => {
                 const defaultValue = commands.getDefaultFontWeight();
+                const font = commands.getFont();
 
-                return computed(() => editor.getAttributes(this.name)?.value ?? defaultValue.value);
+                return computed(() => {
+                    const weight = editor.getAttributes(this.name)?.value ?? defaultValue.value;
+
+                    if (font.value.isWeightSupported(weight)) {
+                        return weight;
+                    }
+
+                    return font.value.findClosestWeight(weight);
+                });
             }),
 
             getDefaultFontWeight: createCommand(({ commands }) => {
@@ -50,6 +59,21 @@ 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 })
+        }
+    ],
+
     renderHTML({ HTMLAttributes: attrs }) {
         return renderMark({ font_weight: attrs.value });
     }

package/lib/extensions/LineHeight.js

@@ -19,6 +19,23 @@ export const LineHeight = Extension.create({
                 [TextSettings.LINE_HEIGHT]: {
                     isRequired: false,
 
+                    parseHTML(element) {
+                        const value = element.style.lineHeight;
+
+                        if (!value) return null;
+
+                        if (!value.includes('px')) {
+                            return { desktop: value, tablet: value, mobile: value };
+                        }
+
+                        // 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);
+
+                        return { desktop: relative, tablet: relative, mobile: relative };
+                    },
+
                     renderHTML(attrs) {
                         if (!attrs.line_height) return null;
 

package/lib/extensions/StylePreset.js

@@ -4,6 +4,12 @@ import { Heading } from '@tiptap/extension-heading';
 import { createCommand } from '../utils';
 import { Devices, NodeTypes, TextSettings } from '../enums';
 
+function makePresetClass(base, preset) {
+    const baseClass = base.split(' ').map((part) => `.${part}`).join('');
+
+    return baseClass + preset.id;
+}
+
 export const StylePreset = Extension.create({
     name: 'style_preset',
 
@@ -17,6 +23,7 @@ export const StylePreset = Extension.create({
     addOptions: () => ({
         presetsRef: null,
         defaultId: null,
+        baseClass: null,
         makeVariable: null
     }),
 
@@ -31,11 +38,30 @@ export const StylePreset = Extension.create({
                 attributes: {
                     preset: {
                         isRequired: false,
-                        default: { id: this.options.defaultId },
+                        default: null,
+
+                        parseHTML: (element) => {
+                            const presets = this.options.presetsRef.value;
+
+                            for (const { id, node, fallbackClass } of presets) {
+                                const isFallback = fallbackClass && element.classList.contains(fallbackClass);
+
+                                if (isFallback) return { id };
+
+                                const className = makePresetClass(this.options.baseClass, { id });
+
+                                if (element.matches(className)) return { id };
+                                if (element.tagName === `H${node?.level}`) return { id };
+                            }
+
+                            // Matches all paragraphs without classes to default preset
+                            return element.tagName === 'P' ? { id: this.options.defaultId } : null;
+                        },
+
                         renderHTML: (attrs) => {
                             if (!attrs.preset) return null;
 
-                            return { class: `zw-preset--${attrs.preset.id}` };
+                            return { class: this.options.baseClass + attrs.preset.id };
                         }
                     }
                 }
@@ -147,7 +173,8 @@ export const StylePreset = Extension.create({
         this.storage.presetStyleEl.dataset.zwStyles = '';
 
         for (const preset of this.options.presetsRef.value) {
-            const css = [` .zw-preset--${preset.id} {`];
+            const className = makePresetClass(this.options.baseClass, preset);
+            const css = [` ${className} {`];
 
             for (const device of Devices.values) {
                 for (const setting of Object.keys(preset[device])) {

package/lib/extensions/TextDecoration.js

@@ -86,6 +86,17 @@ export const TextDecoration = Mark.create({
         'Mod-U': createKeyboardShortcut('toggleUnderline')
     }),
 
+    parseHTML: () => [
+        {
+            style: 'text-decoration-line',
+
+            getAttrs: (value) => ({
+                underline: value.includes('underline'),
+                strike_through: value.includes('line-through')
+            })
+        }
+    ],
+
     renderHTML({ HTMLAttributes: attrs }) {
         const decorations = [];
 

package/lib/extensions/__tests__/Alignment.test.js

@@ -6,6 +6,7 @@ import { CORE_EXTENSIONS } from '../core';
 import { Alignment } from '../Alignment';
 import { DeviceManager } from '../DeviceManager';
 import { Alignments } from '../../enums';
+import { ContentNormalizer } from '../../services';
 
 const MockStylePreset = Extension.create({
     name: 'style_preset',
@@ -22,8 +23,10 @@ const MockStylePreset = Extension.create({
 });
 
 function createEditor({ content }) {
+    const normalizer = new ContentNormalizer();
+
     return new Editor({
-        content,
+        content: normalizer.normalize(content),
         extensions: CORE_EXTENSIONS.concat(
             MockStylePreset,
             DeviceManager.configure({ deviceRef: ref('desktop') }),
@@ -105,3 +108,21 @@ describe('rendering', () => {
         expect(editor.getHTML()).toMatchSnapshot();
     });
 });
+
+describe('parsing html', () => {
+    test('should get alignment from text', () => {
+        const editor = createEditor({
+            content: '<p style="text-align:center">test</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should set null if no alignment', () => {
+        const editor = createEditor({
+            content: '<p>test</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});

package/lib/extensions/__tests__/BackgroundColor.test.js

@@ -4,6 +4,7 @@ import { NodeFactory } from '../../__tests__/utils';
 import { createCommand } from '../../utils';
 import { CORE_EXTENSIONS } from '../core';
 import { BackgroundColor } from '../BackgroundColor';
+import { ContentNormalizer } from '../../services';
 
 const MockStylePreset = Extension.create({
     name: 'style_preset',
@@ -18,8 +19,10 @@ const MockStylePreset = Extension.create({
 });
 
 function createEditor({ content }) {
+    const normalizer = new ContentNormalizer();
+
     return new Editor({
-        content,
+        content: normalizer.normalize(content),
         extensions: CORE_EXTENSIONS.concat(MockStylePreset, BackgroundColor)
     });
 }
@@ -73,3 +76,29 @@ describe('rendering', () => {
         expect(editor.getHTML()).toMatchSnapshot();
     });
 });
+
+describe('parsing html', () => {
+    test('should get value from paragraph', () => {
+        const editor = createEditor({
+            content: '<p style="background-color: red">test</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get value from text', () => {
+        const editor = createEditor({
+            content: '<p><span style="background-color: red">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should merge paragraph and text settings', () => {
+        const editor = createEditor({
+            content: '<p style="background-color: red"><span style="background-color: #000">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});

package/lib/extensions/__tests__/CaseStyle.test.js

@@ -3,10 +3,13 @@ import { NodeFactory } from '../../__tests__/utils';
 import { CaseStyles } from '../../enums';
 import { CORE_EXTENSIONS } from '../core';
 import { CaseStyle } from '../CaseStyle';
+import { ContentNormalizer } from '../../services';
 
 function createEditor({ content }) {
+    const normalizer = new ContentNormalizer();
+
     return new Editor({
-        content,
+        content: normalizer.normalize(content),
         extensions: CORE_EXTENSIONS.concat(CaseStyle)
     });
 }

package/lib/extensions/__tests__/FontColor.test.js

@@ -4,6 +4,7 @@ import { NodeFactory } from '../../__tests__/utils';
 import { createCommand } from '../../utils';
 import { CORE_EXTENSIONS } from '../core';
 import { FontColor } from '../FontColor';
+import { ContentNormalizer } from '../../services';
 
 const MockStylePreset = Extension.create({
     name: 'style_preset',
@@ -18,8 +19,10 @@ const MockStylePreset = Extension.create({
 });
 
 function createEditor({ content }) {
+    const normalizer = new ContentNormalizer();
+
     return new Editor({
-        content,
+        content: normalizer.normalize(content),
         extensions: CORE_EXTENSIONS.concat(MockStylePreset, FontColor)
     });
 }
@@ -83,3 +86,29 @@ describe('rendering', () => {
         expect(editor.getHTML()).toMatchSnapshot();
     });
 });
+
+describe('parsing html', () => {
+    test('should get value from paragraph', () => {
+        const editor = createEditor({
+            content: '<p style="color: red">test</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get value from text', () => {
+        const editor = createEditor({
+            content: '<p><span style="color: red">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should merge paragraph and text settings', () => {
+        const editor = createEditor({
+            content: '<p style="color: red"><span style="color: #000">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});

package/lib/extensions/__tests__/FontFamily.test.js

@@ -7,6 +7,7 @@ import { Font } from '../../models';
 import { FontFamily } from '../FontFamily';
 import { FontWeight } from '../FontWeight';
 import { FontStyle } from '../FontStyle';
+import { ContentNormalizer } from '../../services';
 
 const MockStylePreset = Extension.create({
     name: 'style_preset',
@@ -24,8 +25,10 @@ const MockStylePreset = Extension.create({
 });
 
 function createEditor({ content }) {
+    const normalizer = new ContentNormalizer();
+
     return new Editor({
-        content,
+        content: normalizer.normalize(content),
         extensions: CORE_EXTENSIONS.concat(
             MockStylePreset,
             FontFamily.configure({
@@ -169,3 +172,29 @@ describe('rendering', () => {
         expect(editor.getHTML()).toMatchSnapshot();
     });
 });
+
+describe('parsing html', () => {
+    test('should get value from paragraph', () => {
+        const editor = createEditor({
+            content: '<p style="font-family: Lato">test</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get value from text', () => {
+        const editor = createEditor({
+            content: '<p><span style="font-family: Lato">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should merge paragraph and text settings', () => {
+        const editor = createEditor({
+            content: '<p style="font-family: Lato"><span style="font-family: Roboto">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});

package/lib/extensions/__tests__/FontSize.test.js

@@ -5,6 +5,7 @@ import { createCommand } from '../../utils';
 import { CORE_EXTENSIONS } from '../core';
 import { FontSize } from '../FontSize';
 import { DeviceManager } from '../DeviceManager';
+import { ContentNormalizer } from '../../services';
 
 const MockStylePreset = Extension.create({
     name: 'style_preset',
@@ -21,8 +22,10 @@ const MockStylePreset = Extension.create({
 });
 
 function createEditor({ content }) {
+    const normalizer = new ContentNormalizer();
+
     return new Editor({
-        content,
+        content: normalizer.normalize(content),
         extensions: CORE_EXTENSIONS.concat(
             MockStylePreset,
             DeviceManager.configure({
@@ -181,3 +184,29 @@ describe('rendering', () => {
         expect(editor.getHTML()).toMatchSnapshot();
     });
 });
+
+describe('parsing html', () => {
+    test('should get value from paragraph', () => {
+        const editor = createEditor({
+            content: '<p style="font-size: 24px">test</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get value from text', () => {
+        const editor = createEditor({
+            content: '<p><span style="font-size: 24px">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should merge paragraph and text settings', () => {
+        const editor = createEditor({
+            content: '<p style="font-size: 24px"><span style="font-size: 20px">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});

package/lib/extensions/__tests__/FontStyle.test.js

@@ -7,6 +7,7 @@ import { FontStyle } from '../FontStyle';
 import { FontFamily } from '../FontFamily';
 import { Font } from '../../models';
 import { FontWeight } from '../FontWeight';
+import { ContentNormalizer } from '../../services';
 
 const MockStylePreset = Extension.create({
     name: 'style_preset',
@@ -25,8 +26,10 @@ const MockStylePreset = Extension.create({
 });
 
 function createEditor({ content }) {
+    const normalizer = new ContentNormalizer();
+
     return new Editor({
-        content,
+        content: normalizer.normalize(content),
         extensions: CORE_EXTENSIONS.concat(
             MockStylePreset,
             FontStyle,
@@ -134,3 +137,37 @@ describe('rendering', () => {
         expect(editor.getHTML()).toMatchSnapshot();
     });
 });
+
+describe('parsing html', () => {
+    test('should get value from paragraph', () => {
+        const editor = createEditor({
+            content: '<p style="font-style: italic">test</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get value from text', () => {
+        const editor = createEditor({
+            content: '<p><span style="font-style: italic">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get value from i tag', () => {
+        const editor = createEditor({
+            content: '<p><i>lorem</i> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should merge paragraph and text settings', () => {
+        const editor = createEditor({
+            content: '<p style="font-style: italic"><span style="font-style: normal">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});

package/lib/extensions/__tests__/FontWeight.test.js

@@ -7,6 +7,7 @@ import { Font } from '../../models';
 import { FontWeight } from '../FontWeight';
 import { FontFamily } from '../FontFamily';
 import { FontStyle } from '../FontStyle';
+import { ContentNormalizer } from '../../services';
 
 const MockStylePreset = Extension.create({
     name: 'style_preset',
@@ -24,8 +25,10 @@ const MockStylePreset = Extension.create({
 });
 
 function createEditor({ content }) {
+    const normalizer = new ContentNormalizer();
+
     return new Editor({
-        content,
+        content: normalizer.normalize(content),
         extensions: CORE_EXTENSIONS.concat(
             MockStylePreset,
             FontFamily.configure({
@@ -74,6 +77,18 @@ describe('get font weight', () => {
 
         expect(editor.commands.getFontWeight().value).toEqual('400');
     });
+
+    test('should get closest available font weight', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('font_weight', { value: '800' })
+            ]))
+        });
+
+        editor.commands.selectAll();
+
+        expect(editor.commands.getFontWeight().value).toEqual('700');
+    });
 });
 
 describe('apply font weight', () => {
@@ -149,3 +164,45 @@ describe('rendering', () => {
         expect(editor.getHTML()).toMatchSnapshot();
     });
 });
+
+describe('parsing html', () => {
+    test('should get value from paragraph', () => {
+        const editor = createEditor({
+            content: '<p style="font-weight: 700">test</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get value from text', () => {
+        const editor = createEditor({
+            content: '<p><span style="font-weight: 700">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get value from b tag', () => {
+        const editor = createEditor({
+            content: '<p><b>lorem</b> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get value from strong tag', () => {
+        const editor = createEditor({
+            content: '<p><strong>lorem</strong> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should merge paragraph and text settings', () => {
+        const editor = createEditor({
+            content: '<p style="font-weight: 500"><span style="font-weight: 700">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});