@zipify/wysiwyg 1.0.0-dev.9 → 1.0.0-dev.92

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,38 +11,52 @@ 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);
+    const linkPreset = getPresetById(options.linkPresetId);
 
-export const getExtensions = (options) => CORE_EXTENSIONS.concat([
-    History,
-    StylePreset.configure({
-        presetsRef: options.presetsRef,
-        defaultId: options.defaultPresetId,
-        baseClass: options.basePresetClass,
-        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,
+            wrapperRef: options.wrapperRef
+        }),
+        FontColor,
+        BackgroundColor,
+        FontStyle,
+        TextDecoration,
+        CaseStyle,
+        Superscript,
+        Alignment,
+        LineHeight.configure({
+            wrapperRef: options.wrapperRef
+        }),
+        Link.configure({
+            preset: linkPreset,
+            basePresetClass: options.basePresetClass,
+            pageBlocks: options.pageBlocksRef
+        })
+    ]);
+}

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, unref } from 'vue';
 import { createCommand } from '../../utils';
 import { ListTypes, NodeTypes } from '../../enums';
 import { ListItem } from './ListItem';
@@ -18,7 +18,9 @@ export const List = Node.create({
     }),
 
     addAttributes: () => ({
-        bullet: { isRequired: true }
+        bullet: {
+            default: { type: ListTypes.DISC }
+        }
     }),
 
     parseHTML() {
@@ -68,11 +70,11 @@ export const List = Node.create({
             getListType: createCommand(({ commands }) => {
                 const attribute = commands.getBlockAttributes('bullet', { type: null });
 
-                return computed(() => attribute.value.type ?? null);
+                return computed(() => unref(attribute).type ?? null);
             }),
 
             applyList: createCommand(({ commands, chain }, type) => {
-                const currentType = commands.getListType().value;
+                const currentType = unref(commands.getListType());
 
                 // Remove List
                 if (currentType === type) {
@@ -80,12 +82,11 @@ export const List = Node.create({
                     return;
                 }
 
-                return chain().removeList()._addList(type).run();
+                return chain().applyDefaultPreset()._addList(type).run();
             }),
 
             _addList: createCommand(({ chain }, type) => {
                 return chain()
-                    .removePreset()
                     .toggleList(NodeTypes.LIST, NodeTypes.LIST_ITEM)
                     .setBlockAttributes('bullet', { type })
                     .run();

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

@@ -1,24 +1,20 @@
 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 { ContentNormalizer, NodeFactory } from '../../../services';
+import { buildCoreExtensions } from '../../core';
 
 function createEditor({ content }) {
-    const normalizer = new ContentNormalizer();
-
     return new Editor({
-        content: normalizer.normalize(content),
+        content: ContentNormalizer.normalize(content),
         element: document.createElement('div'),
-        extensions: CORE_EXTENSIONS.concat(
+        extensions: buildCoreExtensions().concat(
             List.configure({
                 baseClass: 'zw-list--'
             }),
             StylePreset.configure({
-                presetsRef: ref([
+                presets: [
                     {
                         id: 'regular-1',
                         common: {},
@@ -26,7 +22,7 @@ function createEditor({ content }) {
                         tablet: {},
                         desktop: {}
                     }
-                ]),
+                ],
                 defaultId: 'regular-1',
                 baseClass: 'zw ts-'
             })

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

@@ -14,7 +14,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -49,7 +51,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -66,7 +70,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -92,7 +98,9 @@ Object {
   "content": Array [
     Object {
       "attrs": Object {
-        "preset": null,
+        "preset": Object {
+          "id": "regular-1",
+        },
       },
       "content": Array [
         Object {
@@ -104,7 +112,9 @@ Object {
     },
     Object {
       "attrs": Object {
-        "preset": null,
+        "preset": Object {
+          "id": "regular-1",
+        },
       },
       "content": Array [
         Object {
@@ -133,7 +143,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -150,7 +162,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -221,7 +235,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -256,7 +272,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -291,7 +309,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -326,7 +346,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -361,7 +383,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -396,7 +420,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -431,7 +457,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -466,7 +494,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -501,7 +531,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -536,7 +568,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -571,7 +605,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -606,7 +642,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -641,7 +679,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {

package/lib/index.js

@@ -1 +1,4 @@
 export { default as Wysiwyg } from './Wysiwyg';
+export { NodeFactory } from './services';
+export { NodeTypes, TextSettings, Alignments } from './enums';
+export { isWysiwygContent } from './utils';

package/lib/injectionTokens.js

@@ -3,5 +3,7 @@ export const InjectionTokens = Object.freeze({
     FONT_SIZES: Symbol('fontSizes'),
     EDITOR: Symbol('editor'),
     LOCAL_STORAGE: Symbol('localStorage'),
-    FAVORITE_COLORS: Symbol('favoriteColors')
+    FAVORITE_COLORS: Symbol('favoriteColors'),
+    PAGE_BLOCKS: Symbol('pageBlocks'),
+    POPUP_MODE: Symbol('popupMode')
 });

package/lib/services/ContentNormalizer.js

@@ -1,42 +1,108 @@
 export class ContentNormalizer {
-    static NORMALIZING_STYLE_BLACKLIST = ['text-align', 'line-height'];
+    static PARSER = new DOMParser();
+    static BLOCK_STYLES = ['text-align', 'line-height'];
+    static BLOCK_NODE_NAMES = ['P', 'H1', 'H2', 'H3', 'H4'];
+
+    static ASSIGN_STYLE_RULES = [
+        {
+            tag: /^(b|strong)$/,
+            ignore: /font-weight/
+        },
+        {
+            tag: /^i$/,
+            ignore: /font-style/
+        },
+        {
+            tag: /^s$/,
+            ignore: /text-decoration(.+)?/
+        }
+    ];
+
+    static normalize(content) {
+        const options = { content, parser: ContentNormalizer.PARSER };
+
+        return new ContentNormalizer(options).normalize();
+    }
 
-    normalize(content) {
-        if (typeof content !== 'string') return content;
+    constructor({ content, parser }) {
+        this._content = content;
+        this._parser = parser;
+        this._dom = null;
+    }
 
-        return this._normalizeTextContent(content);
+    normalize() {
+        if (typeof this._content !== 'string') {
+            return this._content;
+        }
+        return this._normalizeTextContent();
     }
 
-    _normalizeTextContent(content) {
-        const parser = new DOMParser();
-        const dom = parser.parseFromString(content, 'text/html');
+    _normalizeTextContent() {
+        this._dom = this._parser.parseFromString(this._content.replace(/(\r)?\n/g, ''), 'text/html');
 
-        this._iterateNodes(dom, this._normalizeStructure.bind(this), (node) => node.tagName === 'SPAN');
-        this._iterateNodes(dom, this._normalizeStyles.bind(this), (node) => node.tagName !== 'SPAN');
+        this._iterateNodes(this._normalizeBreakLines, (node) => node.tagName === 'BR');
+        this._iterateNodes(this._removeEmptyNodes, this._isBlockNode);
+        this._iterateNodes(this._normalizeListItems, (node) => node.tagName === 'LI');
+        this._iterateNodes(this._normalizeSettingsStructure, (node) => node.tagName === 'SPAN');
+        this._iterateNodes(this._normalizeStyles, (node) => node.tagName !== 'SPAN');
 
-        return dom.body.innerHTML;
+        return this._dom.body.innerHTML;
     }
 
-    _iterateNodes(dom, handler, condition) {
-        const iterator = dom.createNodeIterator(dom.body, NodeFilter.SHOW_ELEMENT, {
-            acceptNode: (node) => condition(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
+    _iterateNodes(handler, condition = () => true) {
+        const iterator = this._dom.createNodeIterator(this._dom.body, NodeFilter.SHOW_ELEMENT, {
+            acceptNode: (node) => condition.call(this, node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
         });
         let currentNode = iterator.nextNode();
 
         while (currentNode) {
-            handler(currentNode);
+            handler.call(this, currentNode);
             currentNode = iterator.nextNode();
         }
     }
 
-    _normalizeStructure(element) {
-        const isTextChildren = Array.from(element.childNodes)
-            .every((node) => node.nodeType === Node.TEXT_NODE);
+    _removeEmptyNodes(node) {
+        const html = node.innerHTML.replace(/ /g, '').trim();
 
-        if (isTextChildren) return;
+        if (!html) node.remove();
+    }
+
+    _normalizeListItems(itemEl) {
+        const fragment = new DocumentFragment();
+        const children = Array.from(itemEl.childNodes);
+        let capturingParagraph;
+
+        const append = (node) => {
+            this._assignElementProperties(node, itemEl, ContentNormalizer.BLOCK_STYLES);
+            fragment.append(node);
+        };
+
+        this._assignElementProperties(itemEl, itemEl.parentElement, ContentNormalizer.BLOCK_STYLES);
+
+        for (const node of children) {
+            if (this._isBlockNode(node)) {
+                append(node);
+                capturingParagraph = null;
+                continue;
+            }
+
+            if (!capturingParagraph) {
+                capturingParagraph = document.createElement('p');
+                append(capturingParagraph);
+            }
+
+            capturingParagraph.append(node);
+        }
+
+        itemEl.append(fragment);
+        this._removeStyleProperties(itemEl, ContentNormalizer.BLOCK_STYLES);
+    }
+
+    _normalizeSettingsStructure(element) {
+        if (this._isOnlyTextContent(element)) return;
 
         const cloned = element.cloneNode(true);
-        const migratingStyles = this._getMigratingStyles(element);
+        const migratingStyles = this._getMigratingStyles(element, { customProperties: true });
         const content = [];
 
         for (const node of cloned.childNodes) {
@@ -54,8 +120,12 @@ export class ContentNormalizer {
     }
 
     _normalizeStyles(element) {
+        if (!this._isBlockNode(element) && this._isOnlyTextContent(element)) return;
+
         const properties = this._getMigratingStyles(element);
 
+        if (!properties.length) return;
+
         for (const node of element.childNodes) {
             const child = this._wrapTextNode(element, node);
 
@@ -65,16 +135,25 @@ export class ContentNormalizer {
         this._removeStyleProperties(element, properties);
     }
 
-    _getMigratingStyles(element) {
-        const blacklist = ContentNormalizer.NORMALIZING_STYLE_BLACKLIST;
+    _isOnlyTextContent(node) {
+        return Array.from(node.childNodes).every((node) => node.nodeType === Node.TEXT_NODE);
+    }
+
+    _isBlockNode(node) {
+        return ContentNormalizer.BLOCK_NODE_NAMES.includes(node.tagName);
+    }
+
+    _getMigratingStyles(element, { customProperties } = {}) {
+        const blacklist = ContentNormalizer.BLOCK_STYLES;
         const properties = [];
 
         for (let index = 0; index < element.style.length; index++) {
             const property = element.style.item(index);
 
-            if (!blacklist.includes(property)) {
-                properties.push(property);
-            }
+            if (blacklist.includes(property)) continue;
+            if (!customProperties && property.startsWith('--')) continue;
+
+            properties.push(property);
         }
 
         return properties;
@@ -93,14 +172,24 @@ export class ContentNormalizer {
 
     _assignElementProperties(target, source, properties) {
         for (const property of properties) {
-            if (target.style.getPropertyValue(property)) {
-                continue;
-            }
+            const value = source.style.getPropertyValue(property);
 
-            target.style.setProperty(property, source.style.getPropertyValue(property));
+            if (value && this._canAssignElementProperty(target, source, property)) {
+                target.style.setProperty(property, value);
+            }
         }
     }
 
+    _canAssignElementProperty(target, source, property) {
+        if (target.style.getPropertyValue(property)) return false;
+
+        return ContentNormalizer.ASSIGN_STYLE_RULES.every((rule) => {
+            if (!rule.tag.test(target.tagName.toLowerCase())) return true;
+
+            return !rule.ignore.test(property);
+        });
+    }
+
     _removeStyleProperties(element, properties) {
         for (const property of properties) {
             element.style.removeProperty(property);
@@ -110,4 +199,31 @@ export class ContentNormalizer {
             element.removeAttribute('style');
         }
     }
+
+    _normalizeBreakLines({ parentElement }) {
+        if (!this._isBlockNode(parentElement)) return;
+        if (!parentElement.textContent) return;
+
+        const fragment = new DocumentFragment();
+        const children = Array.from(parentElement.childNodes);
+        let capturingParagraph = document.createElement('p');
+
+        const append = (node) => {
+            this._assignElementProperties(node, parentElement, ContentNormalizer.BLOCK_STYLES);
+            fragment.append(node);
+        };
+
+        for (const child of children) {
+            if (child.tagName === 'BR') {
+                append(capturingParagraph);
+                capturingParagraph = document.createElement('p');
+                continue;
+            }
+
+            capturingParagraph.append(child);
+        }
+
+        fragment.append(capturingParagraph);
+        parentElement.replaceWith(fragment);
+    }
 }

package/lib/services/ContextWidnow.js

@@ -0,0 +1,23 @@
+export class ContextWindow {
+    static window = window;
+
+    static use(window) {
+        this.window = window;
+    }
+
+    static get document() {
+        return this.window.document;
+    }
+
+    static get body() {
+        return this.document.body;
+    }
+
+    static get head() {
+        return this.document.head;
+    }
+
+    static getComputedStyle(element) {
+        return this.window.getComputedStyle(element);
+    }
+}

package/lib/{__tests__/utils → services}/NodeFactory.js

@@ -1,4 +1,4 @@
-import { NodeTypes } from '../../enums';
+import { NodeTypes } from '../enums';
 
 export class NodeFactory {
     static doc(content) {
@@ -64,4 +64,8 @@ export class NodeFactory {
     static mark(type, attrs) {
         return { type, attrs };
     }
+
+    static populateAllDevices(value) {
+        return { mobile: value, tablet: value, desktop: value };
+    }
 }