@zipify/wysiwyg 1.0.0-dev.2 → 1.0.0-dev.5

package/README.md

@@ -56,6 +56,7 @@ export default {
 |        value         |   true    |       -       |                                                                |
 |       presets        |   true    |       -       | Array of [Style-Presets](#Style-Preset)                        |
 |  default-preset-id   |   true    |       -       | Id of any preset                                               |
+|  base-preset-class   |   true    |       -       | Base class of preset                                           |
 | make-preset-variable |   true    |       -       | [Generates](#Generate-Preset-Variable) name of preset variable |
 |        fonts         |   true    |       -       | Array of [fonts](#Font)                                        |
 |        device        |   false   |  `'desktop'`  | Active device type. can be 'mobile', 'tablet' or 'desktop'     |
@@ -72,6 +73,7 @@ interface StylePreset {
   name: string;
   hidden: boolean;
   node?: PresetNode;
+  fallbackClass?: string;
   common: CommonSettings;
   desktop: DeviceSettings;
   tablet: DeviceSettings;
@@ -88,7 +90,7 @@ interface CommonSettings {
   font_weight: string;
   color: string;
   font_style: 'italic' | 'normal';
-  text_decoration: 'none' | 'underscore';
+  text_decoration: 'none' | 'underline';
 }
 
 interface DeviceSettings {

package/config/jest/setupTests.js

@@ -1,8 +1,10 @@
+/* eslint-disable no-console */
+
 import Vue from 'vue';
 import CompositionAPI from '@vue/composition-api';
 
-// eslint-disable-next-line no-console
 console.warn = jest.fn();
+console.error = jest.fn();
 
 Vue.use(CompositionAPI);
 

package/example/ExampleApp.vue

@@ -12,11 +12,16 @@
             </option>
         </select>
 
+        <button type="button" class="zw-load-content" @click="loadContent">
+            Load Content
+        </button>
+
         <span>Deployed at {{ updatedAt }}</span>
 
         <Wysiwyg
             v-model="content"
-            base-list-class="zw-list--"
+            base-list-class="zpa-text__list--"
+            base-preset-class="zp ts-"
             default-preset-id="regular-1"
             ref="wswgRef"
             :fonts="fonts"
@@ -36,6 +41,16 @@ import { Wysiwyg } from '../lib';
 import { FONTS } from './fonts';
 import { PRESETS, renderPresetVariable } from './presets';
 
+function getInitialContent() {
+    const data = sessionStorage.getItem('wswg-data');
+
+    try {
+        return JSON.parse(data);
+    } catch (_) {
+        return data;
+    }
+}
+
 export default {
     name: 'ExampleApp',
 
@@ -47,29 +62,7 @@ export default {
 
     setup() {
         const wswgRef = ref(null);
-        const content = ref({
-            type: 'doc',
-            content: [
-                {
-                    type: 'paragraph',
-                    content: [
-                        {
-                            type: 'text',
-                            text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate deleniti doloremque doloribus nobis praesentium repellendus soluta. Ab distinctio eos eveniet quaerat quia recusandae repellendus. Error optio perferendis qui sapiente sequi.'
-                        }
-                    ]
-                },
-                {
-                    type: 'paragraph',
-                    content: [
-                        {
-                            type: 'text',
-                            text: 'Ab et laborum molestias omnis provident soluta suscipit tenetur voluptatum! Accusamus aliquam asperiores blanditiis dolorum enim, inventore ipsa molestias, omnis optio quod rem repellendus reprehenderit saepe, suscipit tempora ullam voluptatibus?'
-                        }
-                    ]
-                }
-            ]
-        });
+        const content = ref(getInitialContent());
         const presets = ref(PRESETS);
         const device = ref('desktop');
         const updatedAt = new Date(ZW_UPDATED_AT).toLocaleString('ua-UA');
@@ -91,6 +84,16 @@ export default {
 
         onMounted(() => window.tiptap = wswgRef.value.editor);
 
+        function loadContent() {
+            const defaultValue = sessionStorage.getItem('wswg-data');
+            const content = prompt('Insert editor content', defaultValue);
+
+            if (content) {
+                sessionStorage.setItem('wswg-data', content);
+                window.location.reload();
+            }
+        }
+
         return {
             wswgRef,
             content,
@@ -98,6 +101,7 @@ export default {
             structurePreview,
             favoriteColors,
             updateFavoriteColors,
+            loadContent,
             device,
             updatedAt,
             presets
@@ -115,7 +119,11 @@ body {
 }
 
 .zw-device-switcher {
-    margin-bottom: 50px;
+    margin-bottom: 75px;
+    margin-right: 20px;
+}
+
+.zw-load-content {
     margin-right: 20px;
 }
 
@@ -127,10 +135,10 @@ body {
     overflow-x: scroll;
 }
 
-.zw-list--decimal { list-style-type: decimal }
-.zw-list--disc { list-style-type: disc }
-.zw-list--circle { list-style-type: circle }
-.zw-list--square { list-style-type: square }
-.zw-list--latin { list-style-type: upper-roman }
-.zw-list--roman { list-style-type: upper-latin }
+.zpa-text__list--decimal { list-style-type: decimal }
+.zpa-text__list--disc { list-style-type: disc }
+.zpa-text__list--circle { list-style-type: circle }
+.zpa-text__list--square { list-style-type: square }
+.zpa-text__list--latin { list-style-type: upper-roman }
+.zpa-text__list--roman { list-style-type: upper-latin }
 </style>

package/example/example.js

@@ -12,6 +12,32 @@ import { tooltipManager } from './tooltip';
 
     Vue.use(CompositionAPI);
 
+    if (!sessionStorage.getItem('wswg-data')) {
+        sessionStorage.setItem('wswg-data', JSON.stringify({
+            type: 'doc',
+            content: [
+                {
+                    type: 'paragraph',
+                    content: [
+                        {
+                            type: 'text',
+                            text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate deleniti doloremque doloribus nobis praesentium repellendus soluta. Ab distinctio eos eveniet quaerat quia recusandae repellendus. Error optio perferendis qui sapiente sequi.'
+                        }
+                    ]
+                },
+                {
+                    type: 'paragraph',
+                    content: [
+                        {
+                            type: 'text',
+                            text: 'Ab et laborum molestias omnis provident soluta suscipit tenetur voluptatum! Accusamus aliquam asperiores blanditiis dolorum enim, inventore ipsa molestias, omnis optio quod rem repellendus reprehenderit saepe, suscipit tempora ullam voluptatibus?'
+                        }
+                    ]
+                }
+            ]
+        }));
+    }
+
     new Vue({
         el: '[data-app]',
         render: (h) => h(ExampleApp)

package/example/presets.js

@@ -175,6 +175,7 @@ export const PRESETS = [
     {
         'id': 'regular-2',
         'name': 'Regular 2',
+        'fallbackClass': 'zpa-regular2',
         'desktop': {
             'alignment': 'left',
             'line_height': '1.43',
@@ -201,6 +202,7 @@ export const PRESETS = [
     {
         'id': 'regular-3',
         'name': 'Regular 3',
+        'fallbackClass': 'zpa-regular3',
         'desktop': {
             'alignment': 'left',
             'line_height': '1.43',

package/lib/Wysiwyg.vue

@@ -57,6 +57,11 @@ export default {
             required: true
         },
 
+        basePresetClass: {
+            type: String,
+            required: true
+        },
+
         makePresetVariable: {
             type: Function,
             required: true
@@ -121,6 +126,7 @@ export default {
                 presetsRef: toRef(props, 'presets'),
                 defaultPresetId: props.defaultPresetId,
                 makePresetVariable: props.makePresetVariable,
+                basePresetClass: props.basePresetClass,
                 baseListClass: props.baseListClass,
                 deviceRef: toRef(props, 'device')
             })

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

@@ -7,20 +7,21 @@ import { NodeFactory } from '../../__tests__/utils';
 
 const TestComponent = {
     name: 'Test',
+
     render() {
         return h(EditorContent, {
             props: { editor: this.editor }
         });
     },
+
     props: ['value'],
 
     setup(props, { emit }) {
         const editor = useEditor({
             content: toRef(props, 'value'),
             extensions: CORE_EXTENSIONS,
-            onChange: (content) => {
-                emit('input', content);
-            }
+            onChange: (content) => emit('input', content),
+            onFocus: () => emit('focus')
         });
 
         return { editor };
@@ -64,4 +65,12 @@ describe('life cycle', () => {
 
         expect(editor.isDestroyed).toBe(true);
     });
+
+    test('should update content on value change', async () => {
+        const { editor, wrapper } = createComponent({ content: '<p>old</p>' });
+
+        await wrapper.setProps({ value: '<p>new</p>' });
+
+        expect(editor.getHTML()).toBe('<p class="zw-style">new</p>');
+    });
 });

package/lib/composables/useEditor.js

@@ -1,20 +1,27 @@
 import { Editor } from '@tiptap/vue-2';
-import { onUnmounted, watch } from '@vue/composition-api';
+import { onUnmounted, watch, reactive } from '@vue/composition-api';
+import { ContentNormalizer } from '../services';
 
 export function useEditor({ content, onChange, onFocus, extensions }) {
-    const editor = new Editor({
-        content: content.value,
+    const normalizer = new ContentNormalizer();
+
+    const editor = reactive(new Editor({
+        content: normalizer.normalize(content.value),
         onUpdate: () => onChange(editor.getJSON()),
         onFocus: () => onFocus(),
         extensions
-    });
+    }));
 
     onUnmounted(() => editor.destroy());
 
     watch(content, (value) => {
         const isChanged = JSON.stringify(editor.getJSON()) !== JSON.stringify(value);
 
-        if (isChanged) editor.commands.setContent(value, false);
+        if (isChanged) {
+            const content = normalizer.normalize(value);
+
+            editor.commands.setContent(content, false);
+        }
     });
 
     return editor;

package/lib/extensions/Alignment.js

@@ -19,6 +19,12 @@ export const Alignment = Extension.create({
                 [TextSettings.ALIGNMENT]: {
                     isRequired: false,
 
+                    parseHTML(el) {
+                        const value = el.style.textAlign;
+
+                        return value ? { desktop: value, tablet: value, mobile: value } : null;
+                    },
+
                     renderHTML(attrs) {
                         if (!attrs.alignment) return null;
 

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)
     });
 }