@zipify/wysiwyg 1.0.0-dev.4 → 1.0.0-dev.40

package/lib/extensions/core/plugins/index.js

@@ -0,0 +1 @@
+export { PastePlugin } from './PastePlugin';

package/lib/extensions/index.js

@@ -1,5 +1,3 @@
-import History from '@tiptap/extension-history';
-import { CORE_EXTENSIONS } from './core';
 import { FontFamily } from './FontFamily';
 import { StylePreset } from './StylePreset';
 import { FontWeight } from './FontWeight';
@@ -13,37 +11,47 @@ import { CaseStyle } from './CaseStyle';
 import { Alignment } from './Alignment';
 import { LineHeight } from './LineHeight';
 import { List } from './list';
+import { Link } from './Link';
 import { Superscript } from './Superscript';
+import { buildCoreExtensions } from './core';
 
-export { CORE_EXTENSIONS };
+export function buildExtensions(options) {
+    const getPresetById = (id) => options.presetsRef.value.find((preset) => preset.id === id);
+    const defaultPreset = getPresetById(options.defaultPresetId);
 
-export const getExtensions = (options) => CORE_EXTENSIONS.concat([
-    History,
-    StylePreset.configure({
-        presetsRef: options.presetsRef,
-        defaultId: options.defaultPresetId,
-        makeVariable: options.makePresetVariable
-    }),
-    List.configure({
-        baseClass: options.baseListClass
-    }),
-    DeviceManager.configure({
-        deviceRef: options.deviceRef
-    }),
-    FontFamily.configure({
-        fonts: options.fonts
-    }),
-    FontWeight,
-    FontSize.configure({
-        minSize: options.minFontSize,
-        maxSize: options.maxFontSize
-    }),
-    FontColor,
-    BackgroundColor,
-    FontStyle,
-    TextDecoration,
-    CaseStyle,
-    Superscript,
-    Alignment,
-    LineHeight
-]);
+    return buildCoreExtensions(options).concat([
+        StylePreset.configure({
+            presets: options.presetsRef,
+            defaultId: options.defaultPresetId,
+            baseClass: options.basePresetClass,
+            makeVariable: options.makePresetVariable
+        }),
+        List.configure({
+            baseClass: options.baseListClass
+        }),
+        DeviceManager.configure({
+            device: options.deviceRef
+        }),
+        FontFamily.configure({
+            fonts: options.fonts,
+            defaultFont: defaultPreset.common.font_family
+        }),
+        FontWeight,
+        FontSize.configure({
+            minSize: options.minFontSize,
+            maxSize: options.maxFontSize
+        }),
+        FontColor,
+        BackgroundColor,
+        FontStyle,
+        TextDecoration,
+        CaseStyle,
+        Superscript,
+        Alignment,
+        LineHeight,
+        Link.configure({
+            preset: options.linkPreset,
+            basePresetClass: options.basePresetClass,
+            pageBlocks: options.pageBlocks
+        })]);
+}

package/lib/extensions/list/List.js

@@ -1,5 +1,5 @@
 import { Node, wrappingInputRule } from '@tiptap/vue-2';
-import { computed } from '@vue/composition-api';
+import { computed } from 'vue';
 import { createCommand } from '../../utils';
 import { ListTypes, NodeTypes } from '../../enums';
 import { ListItem } from './ListItem';
@@ -21,6 +21,40 @@ export const List = Node.create({
         bullet: { isRequired: true }
     }),
 
+    parseHTML() {
+        const HTML_TYPES = {
+            a: ListTypes.ROMAN,
+            i: ListTypes.LATIN,
+            '1': ListTypes.DECIMAL
+        };
+
+        const getBulletType = (element) => {
+            for (const type of ListTypes.values) {
+                const bulletClass = `.${this.options.baseClass}${type}`;
+
+                if (element.matches(bulletClass)) return type;
+                if (HTML_TYPES[element.type.toLowerCase()] === type) return type;
+            }
+        };
+
+        return [
+            {
+                tag: 'ol',
+
+                getAttrs: (element) => ({
+                    bullet: { type: getBulletType(element) || ListTypes.DECIMAL }
+                })
+            },
+            {
+                tag: 'ul',
+
+                getAttrs: (element) => ({
+                    bullet: { type: getBulletType(element) || ListTypes.DISC }
+                })
+            }
+        ];
+    },
+
     renderHTML({ HTMLAttributes: attrs }) {
         const isOrdered = ListTypes.ordered.includes(attrs.bullet.type);
         const tag = isOrdered ? 'ol' : 'ul';

package/lib/extensions/list/__tests__/List.test.js

@@ -1,19 +1,21 @@
 import { Editor } from '@tiptap/vue-2';
-import { ref } from '@vue/composition-api';
 import { NodeFactory } from '../../../__tests__/utils';
 import { ListTypes } from '../../../enums';
-import { CORE_EXTENSIONS } from '../../core';
 import { StylePreset } from '../../StylePreset';
 import { List } from '../List';
+import { ContentNormalizer } from '../../../services';
+import { buildCoreExtensions } from '../../core';
 
 function createEditor({ content }) {
     return new Editor({
-        content,
+        content: ContentNormalizer.normalize(content),
         element: document.createElement('div'),
-        extensions: CORE_EXTENSIONS.concat(
-            List,
+        extensions: buildCoreExtensions().concat(
+            List.configure({
+                baseClass: 'zw-list--'
+            }),
             StylePreset.configure({
-                presetsRef: ref([
+                presets: [
                     {
                         id: 'regular-1',
                         common: {},
@@ -21,8 +23,9 @@ function createEditor({ content }) {
                         tablet: {},
                         desktop: {}
                     }
-                ]),
-                defaultId: 'regular-1'
+                ],
+                defaultId: 'regular-1',
+                baseClass: 'zw ts-'
             })
         )
     });
@@ -128,3 +131,109 @@ describe('apply list', () => {
         expect(editor.getJSON()).toMatchSnapshot();
     });
 });
+
+describe('parsing html', () => {
+    test('should parse disc type by class', () => {
+        const editor = createEditor({
+            content: '<ul class="zw-list--disc"><li>lorem ipsum</li></ul>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse disc as default', () => {
+        const editor = createEditor({
+            content: '<ul><li>lorem ipsum</li></ul>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse circle type by class', () => {
+        const editor = createEditor({
+            content: '<ul class="zw-list--circle"><li>lorem ipsum</li></ul>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse square type by class', () => {
+        const editor = createEditor({
+            content: '<ul class="zw-list--square"><li>lorem ipsum</li></ul>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse decimal type by class', () => {
+        const editor = createEditor({
+            content: '<ol class="zw-list--decimal"><li>lorem ipsum</li></ol>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse decimal as default', () => {
+        const editor = createEditor({
+            content: '<ol><li>lorem ipsum</li></ol>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse decimal type by attribute', () => {
+        const editor = createEditor({
+            content: '<ol type="1"><li>lorem ipsum</li></ol>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse roman type by class', () => {
+        const editor = createEditor({
+            content: '<ol class="zw-list--roman"><li>lorem ipsum</li></ol>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse roman type by lower attribute', () => {
+        const editor = createEditor({
+            content: '<ol type="a"><li>lorem ipsum</li></ol>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse roman type by upper attribute', () => {
+        const editor = createEditor({
+            content: '<ol type="A"><li>lorem ipsum</li></ol>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse latin type by class', () => {
+        const editor = createEditor({
+            content: '<ol class="zw-list--latin"><li>lorem ipsum</li></ol>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse latin type by lower attribute', () => {
+        const editor = createEditor({
+            content: '<ol type="i"><li>lorem ipsum</li></ol>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse latin type by upper attribute', () => {
+        const editor = createEditor({
+            content: '<ol type="I"><li>lorem ipsum</li></ol>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});