@zipify/wysiwyg 1.0.0-dev.97 → 1.0.0

package/dist/wysiwyg.css

@@ -754,6 +754,13 @@ $font-height--md: 1.72;
     font-style: var(--zw-font-style, var(--zw-preset-font-style));
     text-decoration: var(--zw-text-decoration, var(--zw-preset-text-decoration));
     background-color: var(--zw-background-color, var(--zw-preset-background-color));
+    margin: var(--zw-margin);
+}
+h1.zw-style.zw-style.zw-style,
+h2.zw-style.zw-style.zw-style,
+h3.zw-style.zw-style.zw-style,
+h4.zw-style.zw-style.zw-style {
+    margin: var(--zw-margin, 8px 0);
 }
 @media (min-width: 1200px) {
 .zw-style.zw-style.zw-style {

package/dist/wysiwyg.mjs

@@ -13971,10 +13971,12 @@ const TextSettings = Object.freeze({
   LINE_HEIGHT: "line_height",
   TEXT_DECORATION: "text_decoration",
   SUPERSCRIPT: "superscript",
+  MARGIN: "margin",
   get attributes() {
     return [
       this.ALIGNMENT,
-      this.LINE_HEIGHT
+      this.LINE_HEIGHT,
+      this.MARGIN
     ];
   },
   get marks() {
@@ -19438,42 +19440,54 @@ class FavoriteColors {
   }
 }
 const _ContentNormalizer = class {
+  static build(content) {
+    return new _ContentNormalizer({
+      parser: _ContentNormalizer.PARSER,
+      content
+    });
+  }
   static normalize(content) {
-    const options = { content, parser: _ContentNormalizer.PARSER };
-    return new _ContentNormalizer(options).normalize();
+    return _ContentNormalizer.build(content).normalize();
   }
   constructor({ content, parser }) {
     this._content = content;
     this._parser = parser;
-    this._dom = null;
+    this.dom = null;
   }
   normalize() {
     if (typeof this._content !== "string") {
       return this._content;
     }
-    return this._normalizeTextContent();
+    this.normalizeHTML();
+    return this.normalizedHTML;
   }
-  _normalizeTextContent() {
-    this._dom = this._parser.parseFromString(this._content.replace(/(\r)?\n/g, ""), "text/html");
+  normalizeHTML() {
+    this.dom = this._parser.parseFromString(this._content.replace(/(\r)?\n/g, ""), "text/html");
     this._removeComments();
-    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 this._dom.body.innerHTML;
+    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");
+  }
+  get normalizedHTML() {
+    return this.dom.body.innerHTML;
   }
   _removeComments() {
-    const iterator = this._dom.createNodeIterator(this._dom.body, NodeFilter.SHOW_COMMENT);
-    this._runIterator(iterator, (node) => node.remove());
+    const iterator = this.createNodeIterator(NodeFilter.SHOW_COMMENT);
+    this.runIterator(iterator, (node) => node.remove());
+  }
+  createNodeIterator(whatToShow, filter2) {
+    return this.dom.createNodeIterator(this.dom.body, whatToShow, filter2);
   }
-  _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
+  iterateNodes(handler, condition = () => true) {
+    const checkCondition = (node) => node.tagName !== "BODY" && condition.call(this, node);
+    const iterator = this.createNodeIterator(NodeFilter.SHOW_ELEMENT, {
+      acceptNode: (node) => checkCondition(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
     });
-    this._runIterator(iterator, handler);
+    this.runIterator(iterator, handler);
   }
-  _runIterator(iterator, handler) {
+  runIterator(iterator, handler) {
     let currentNode = iterator.nextNode();
     while (currentNode) {
       handler.call(this, currentNode);
@@ -19481,8 +19495,7 @@ const _ContentNormalizer = class {
     }
   }
   _removeEmptyNodes(node) {
-    const html2 = node.innerHTML.replace(/ /g, "").trim();
-    if (!html2)
+    if (!node.innerHTML.trim())
       node.remove();
   }
   _normalizeListItems(itemEl) {
@@ -19617,8 +19630,16 @@ const _ContentNormalizer = class {
 };
 let ContentNormalizer = _ContentNormalizer;
 __publicField(ContentNormalizer, "PARSER", new DOMParser());
-__publicField(ContentNormalizer, "BLOCK_STYLES", ["text-align", "line-height"]);
 __publicField(ContentNormalizer, "BLOCK_NODE_NAMES", ["P", "H1", "H2", "H3", "H4"]);
+__publicField(ContentNormalizer, "BLOCK_STYLES", [
+  "text-align",
+  "line-height",
+  "margin",
+  "margin-top",
+  "margin-bottom",
+  "margin-left",
+  "margin-right"
+]);
 __publicField(ContentNormalizer, "ASSIGN_STYLE_RULES", [
   {
     tag: /^(b|strong)$/,
@@ -25690,10 +25711,26 @@ class ProseMirrorPlugin {
 class PastePlugin extends ProseMirrorPlugin {
   buildProps() {
     return {
-      transformPastedHTML: ContentNormalizer.normalize,
+      transformPastedHTML: this._transformPastedHTML.bind(this),
       handlePaste: this._handlePaste.bind(this)
     };
   }
+  _transformPastedHTML(html2) {
+    const normalizer = ContentNormalizer.build(html2);
+    normalizer.normalizeHTML();
+    this._removeDeprecatedStyles(normalizer);
+    return normalizer.normalizedHTML;
+  }
+  _removeDeprecatedStyles(normalizer) {
+    const elements = normalizer.dom.querySelectorAll('[style*="margin"]');
+    for (const element of Array.from(elements)) {
+      element.style.removeProperty("margin");
+      element.style.removeProperty("margin-top");
+      element.style.removeProperty("margin-right");
+      element.style.removeProperty("margin-bottom");
+      element.style.removeProperty("margin-left");
+    }
+  }
   _handlePaste(view, _, slice2) {
     const transaction = this._insertPastedContent(view, slice2).scrollIntoView().setMeta("paste", true).setMeta("uiEvent", "paste");
     view.dispatch(transaction);
@@ -25748,6 +25785,34 @@ const buildCoreExtensions = () => [
   SelectionProcessor,
   CopyPasteProcessor
 ];
+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 });
+          }
+        }
+      }
+    }
+  ]
+});
 function buildExtensions(options) {
   const getPresetById = (id2) => options.presetsRef.value.find((preset) => preset.id === id2);
   const defaultPreset = getPresetById(options.defaultPresetId);
@@ -25765,16 +25830,16 @@ function buildExtensions(options) {
     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
     }),
+    FontFamily.configure({
+      fonts: options.fonts,
+      defaultFont: defaultPreset.common.font_family
+    }),
+    FontWeight,
     FontColor,
     BackgroundColor,
     FontStyle,
@@ -25789,7 +25854,8 @@ function buildExtensions(options) {
       preset: linkPreset,
       basePresetClass: options.basePresetClass,
       pageBlocks: options.pageBlocksRef
-    })
+    }),
+    Margin
   ]);
 }
 class Font {

package/lib/enums/TextSettings.js

@@ -9,11 +9,13 @@ export const TextSettings = Object.freeze({
     LINE_HEIGHT: 'line_height',
     TEXT_DECORATION: 'text_decoration',
     SUPERSCRIPT: 'superscript',
+    MARGIN: 'margin',
 
     get attributes() {
         return [
             this.ALIGNMENT,
-            this.LINE_HEIGHT
+            this.LINE_HEIGHT,
+            this.MARGIN
         ];
     },
 

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/__tests__/Margin.test.js

@@ -0,0 +1,59 @@
+import { Editor } from '@tiptap/core';
+import { ContentNormalizer, NodeFactory } from '../../services';
+import { buildCoreExtensions } from '../core';
+import { Margin } from '../Margin';
+
+function createEditor({ content }) {
+    return new Editor({
+        content: ContentNormalizer.normalize(content),
+        extensions: buildCoreExtensions().concat(Margin)
+    });
+}
+
+describe('parse html', () => {
+    test('should set null if no margin', () => {
+        const editor = createEditor({
+            content: '<p>lorem ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse shorthand', () => {
+        const editor = createEditor({
+            content: '<p style="margin: 10px 3px 1em;">lorem ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse values', () => {
+        const editor = createEditor({
+            content: '<p style="margin-left: 10px; margin-bottom: 1em">lorem ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});
+
+describe('render html', () => {
+    test('should not render empty', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph({ margin: null }, 'lorem ipsum')
+            ])
+        });
+
+        expect(editor.getHTML()).toMatchSnapshot();
+    });
+
+    test('should render value', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph({ margin: { value: '10px' } }, 'lorem ipsum')
+            ])
+        });
+
+        expect(editor.getHTML()).toMatchSnapshot();
+    });
+});

package/lib/extensions/__tests__/__snapshots__/Margin.test.js.snap

@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`parse html should parse shorthand 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "margin": Object {
+          "value": "10px 3px 1em",
+        },
+      },
+      "content": Array [
+        Object {
+          "text": "lorem ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parse html should parse values 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "margin": Object {
+          "value": "0 0 1em 10px",
+        },
+      },
+      "content": Array [
+        Object {
+          "text": "lorem ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parse html should set null if no margin 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "margin": null,
+      },
+      "content": Array [
+        Object {
+          "text": "lorem ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`render html should not render empty 1`] = `"<p class=\\"zw-style\\">lorem ipsum</p>"`;
+
+exports[`render html should render value 1`] = `"<p class=\\"zw-style\\" style=\\"--zw-margin:10px;\\">lorem ipsum</p>"`;

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

@@ -5,11 +5,32 @@ import { ProseMirrorPlugin } from './ProseMirrorPlugin';
 export class PastePlugin extends ProseMirrorPlugin {
     buildProps() {
         return {
-            transformPastedHTML: ContentNormalizer.normalize,
+            transformPastedHTML: this._transformPastedHTML.bind(this),
             handlePaste: this._handlePaste.bind(this)
         };
     }
 
+    _transformPastedHTML(html) {
+        const normalizer = ContentNormalizer.build(html);
+
+        normalizer.normalizeHTML();
+        this._removeDeprecatedStyles(normalizer);
+
+        return normalizer.normalizedHTML;
+    }
+
+    _removeDeprecatedStyles(normalizer) {
+        const elements = normalizer.dom.querySelectorAll('[style*="margin"]');
+
+        for (const element of Array.from(elements)) {
+            element.style.removeProperty('margin');
+            element.style.removeProperty('margin-top');
+            element.style.removeProperty('margin-right');
+            element.style.removeProperty('margin-bottom');
+            element.style.removeProperty('margin-left');
+        }
+    }
+
     _handlePaste(view, _, slice) {
         const transaction = this._insertPastedContent(view, slice)
             .scrollIntoView()

package/lib/extensions/index.js

@@ -14,6 +14,7 @@ import { List } from './list';
 import { Link } from './Link';
 import { Superscript } from './Superscript';
 import { buildCoreExtensions } from './core';
+import { Margin } from './Margin';
 
 export function buildExtensions(options) {
     const getPresetById = (id) => options.presetsRef.value.find((preset) => preset.id === id);
@@ -33,16 +34,17 @@ export function buildExtensions(options) {
         DeviceManager.configure({
             device: options.deviceRef
         }),
-        FontFamily.configure({
-            fonts: options.fonts,
-            defaultFont: defaultPreset.common.font_family
-        }),
-        FontWeight,
+        // Should be first setting. Fix size of wrappers in headings
         FontSize.configure({
             minSize: options.minFontSize,
             maxSize: options.maxFontSize,
             wrapperRef: options.wrapperRef
         }),
+        FontFamily.configure({
+            fonts: options.fonts,
+            defaultFont: defaultPreset.common.font_family
+        }),
+        FontWeight,
         FontColor,
         BackgroundColor,
         FontStyle,
@@ -57,6 +59,7 @@ export function buildExtensions(options) {
             preset: linkPreset,
             basePresetClass: options.basePresetClass,
             pageBlocks: options.pageBlocksRef
-        })
+        }),
+        Margin
     ]);
 }

package/lib/services/ContentNormalizer.js

@@ -1,8 +1,17 @@
 export class ContentNormalizer {
     static PARSER = new DOMParser();
-    static BLOCK_STYLES = ['text-align', 'line-height'];
     static BLOCK_NODE_NAMES = ['P', 'H1', 'H2', 'H3', 'H4'];
 
+    static BLOCK_STYLES = [
+        'text-align',
+        'line-height',
+        'margin',
+        'margin-top',
+        'margin-bottom',
+        'margin-left',
+        'margin-right'
+    ];
+
     static ASSIGN_STYLE_RULES = [
         {
             tag: /^(b|strong)$/,
@@ -18,53 +27,67 @@ export class ContentNormalizer {
         }
     ];
 
-    static normalize(content) {
-        const options = { content, parser: ContentNormalizer.PARSER };
+    static build(content) {
+        return new ContentNormalizer({
+            parser: ContentNormalizer.PARSER,
+            content
+        });
+    }
 
-        return new ContentNormalizer(options).normalize();
+    static normalize(content) {
+        return ContentNormalizer.build(content).normalize();
     }
 
     constructor({ content, parser }) {
         this._content = content;
         this._parser = parser;
-        this._dom = null;
+        this.dom = null;
     }
 
     normalize() {
         if (typeof this._content !== 'string') {
             return this._content;
         }
-        return this._normalizeTextContent();
+        this.normalizeHTML();
+        return this.normalizedHTML;
     }
 
-    _normalizeTextContent() {
-        this._dom = this._parser.parseFromString(this._content.replace(/(\r)?\n/g, ''), 'text/html');
+    normalizeHTML() {
+        this.dom = this._parser.parseFromString(this._content.replace(/(\r)?\n/g, ''), 'text/html');
 
         this._removeComments();
-        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');
+        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 this._dom.body.innerHTML;
+    get normalizedHTML() {
+        return this.dom.body.innerHTML;
     }
 
     _removeComments() {
-        const iterator = this._dom.createNodeIterator(this._dom.body, NodeFilter.SHOW_COMMENT);
+        const iterator = this.createNodeIterator(NodeFilter.SHOW_COMMENT);
+
+        this.runIterator(iterator, (node) => node.remove());
+    }
 
-        this._runIterator(iterator, (node) => node.remove());
+    createNodeIterator(whatToShow, filter) {
+        return this.dom.createNodeIterator(this.dom.body, whatToShow, filter);
     }
 
-    _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
+    iterateNodes(handler, condition = () => true) {
+        const checkCondition = (node) => node.tagName !== 'BODY' && condition.call(this, node);
+
+        const iterator = this.createNodeIterator(NodeFilter.SHOW_ELEMENT, {
+            acceptNode: (node) => checkCondition(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
         });
 
-        this._runIterator(iterator, handler);
+        this.runIterator(iterator, handler);
     }
 
-    _runIterator(iterator, handler) {
+    runIterator(iterator, handler) {
         let currentNode = iterator.nextNode();
 
         while (currentNode) {
@@ -74,9 +97,7 @@ export class ContentNormalizer {
     }
 
     _removeEmptyNodes(node) {
-        const html = node.innerHTML.replace(/ /g, '').trim();
-
-        if (!html) node.remove();
+        if (!node.innerHTML.trim()) node.remove();
     }
 
     _normalizeListItems(itemEl) {

package/lib/services/__tests__/ContentNormalizer.test.js

@@ -92,13 +92,6 @@ describe('normalize text content', () => {
         expect(ContentNormalizer.normalize(input)).toBe(output);
     });
 
-    test('should ignore non-breaking space only nodes', () => {
-        const input = '<p>lorem ipsum 1</p><p>&nbsp;</p><p>lorem ipsum 2</p>';
-        const output = '<p>lorem ipsum 1</p><p>lorem ipsum 2</p>';
-
-        expect(ContentNormalizer.normalize(input)).toBe(output);
-    });
-
     test('should ignore newline chapters only nodes', () => {
         const input = '<p>lorem ipsum 1</p><p>\n</p><p>lorem ipsum 2</p>';
         const output = '<p>lorem ipsum 1</p><p>lorem ipsum 2</p>';

package/lib/styles/content.css

@@ -20,6 +20,14 @@
     font-style: var(--zw-font-style, var(--zw-preset-font-style));
     text-decoration: var(--zw-text-decoration, var(--zw-preset-text-decoration));
     background-color: var(--zw-background-color, var(--zw-preset-background-color));
+    margin: var(--zw-margin);
+}
+
+h1.zw-style.zw-style.zw-style,
+h2.zw-style.zw-style.zw-style,
+h3.zw-style.zw-style.zw-style,
+h4.zw-style.zw-style.zw-style {
+    margin: var(--zw-margin, 8px 0);
 }
 
 @media (min-width: 1200px) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "1.0.0-dev.97",
+  "version": "1.0.0",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "repository": {