@zipify/wysiwyg 1.0.0-dev.79 → 1.0.0-dev.81

package/dist/wysiwyg.css

@@ -740,7 +740,6 @@ $font-height--md: 1.72;
 }
 .zw-superscript {
     font-size: 75%;
-    line-height: 0;
     position: relative;
     vertical-align: initial;
     top: -0.5em;
@@ -781,7 +780,6 @@ $font-height--md: 1.72;
 }
 .ProseMirror {
     word-wrap: break-word;
-    white-space: pre-wrap;
     white-space: break-spaces;
     -webkit-font-variant-ligatures: none;
     font-variant-ligatures: none;

package/dist/wysiwyg.mjs

@@ -19433,30 +19433,9 @@ class FavoriteColors {
     this.triggerUpdate = triggerUpdate;
   }
 }
-class ContextWindow {
-  static use(window2) {
-    this.window = window2;
-  }
-  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);
-  }
-}
-__publicField(ContextWindow, "window", window);
 const _ContentNormalizer = class {
   static normalize(content) {
-    const options = {
-      content,
-      parser: _ContentNormalizer.PARSER
-    };
+    const options = { content, parser: _ContentNormalizer.PARSER };
     return new _ContentNormalizer(options).normalize();
   }
   constructor({ content, parser }) {
@@ -19471,7 +19450,8 @@ const _ContentNormalizer = class {
     return this._normalizeTextContent();
   }
   _normalizeTextContent() {
-    this._dom = this._parser.parseFromString(this._content, "text/html");
+    this._dom = this._parser.parseFromString(this._content.replace(/(\r)?\n/g, ""), "text/html");
+    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");
@@ -19489,9 +19469,9 @@ const _ContentNormalizer = class {
     }
   }
   _removeEmptyNodes(node) {
-    if (!node.innerHTML.replace(/\n/g, "").trim()) {
+    const html2 = node.innerHTML.replace(/ /g, "").trim();
+    if (!html2)
       node.remove();
-    }
   }
   _normalizeListItems(itemEl) {
     const fragment = new DocumentFragment();
@@ -19503,7 +19483,7 @@ const _ContentNormalizer = class {
     };
     this._assignElementProperties(itemEl, itemEl.parentElement, _ContentNormalizer.BLOCK_STYLES);
     for (const node of children) {
-      if (node.tagName === "P") {
+      if (this._isBlockNode(node)) {
         append2(node);
         capturingParagraph = null;
         continue;
@@ -19567,7 +19547,7 @@ const _ContentNormalizer = class {
   _wrapTextNode(parent, node) {
     if (node.nodeType !== Node.TEXT_NODE)
       return node;
-    const span = ContextWindow.document.createElement("span");
+    const span = document.createElement("span");
     span.append(node.cloneNode());
     parent.replaceChild(span, node);
     return span;
@@ -19597,6 +19577,29 @@ const _ContentNormalizer = class {
       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 append2 = (node) => {
+      this._assignElementProperties(node, parentElement, _ContentNormalizer.BLOCK_STYLES);
+      fragment.append(node);
+    };
+    for (const child of children) {
+      if (child.tagName === "BR") {
+        append2(capturingParagraph);
+        capturingParagraph = document.createElement("p");
+        continue;
+      }
+      capturingParagraph.append(child);
+    }
+    fragment.append(capturingParagraph);
+    parentElement.replaceWith(fragment);
+  }
 };
 let ContentNormalizer = _ContentNormalizer;
 __publicField(ContentNormalizer, "PARSER", new DOMParser());
@@ -19616,6 +19619,24 @@ __publicField(ContentNormalizer, "ASSIGN_STYLE_RULES", [
     ignore: /text-decoration(.+)?/
   }
 ]);
+class ContextWindow {
+  static use(window2) {
+    this.window = window2;
+  }
+  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);
+  }
+}
+__publicField(ContextWindow, "window", window);
 class NodeFactory {
   static doc(content) {
     return {
@@ -25550,60 +25571,6 @@ const History = Extension.create({
     };
   }
 });
-const HardBreak = Node$1.create({
-  name: "hardBreak",
-  addOptions() {
-    return {
-      keepMarks: true,
-      HTMLAttributes: {}
-    };
-  },
-  inline: true,
-  group: "inline",
-  selectable: false,
-  parseHTML() {
-    return [
-      { tag: "br" }
-    ];
-  },
-  renderHTML({ HTMLAttributes }) {
-    return ["br", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
-  },
-  renderText() {
-    return "\n";
-  },
-  addCommands() {
-    return {
-      setHardBreak: () => ({ commands: commands2, chain, state, editor }) => {
-        return commands2.first([
-          () => commands2.exitCode(),
-          () => commands2.command(() => {
-            const { selection, storedMarks } = state;
-            if (selection.$from.parent.type.spec.isolating) {
-              return false;
-            }
-            const { keepMarks } = this.options;
-            const { splittableMarks } = editor.extensionManager;
-            const marks = storedMarks || selection.$to.parentOffset && selection.$from.marks();
-            return chain().insertContent({ type: this.name }).command(({ tr, dispatch }) => {
-              if (dispatch && marks && keepMarks) {
-                const filteredMarks = marks.filter((mark) => splittableMarks.includes(mark.type.name));
-                tr.ensureMarks(filteredMarks);
-              }
-              return true;
-            }).run();
-          })
-        ]);
-      }
-    };
-  },
-  addKeyboardShortcuts() {
-    return {
-      "Mod-Enter": () => this.editor.commands.setHardBreak(),
-      "Shift-Enter": () => this.editor.commands.setHardBreak()
-    };
-  }
-});
 const NodeProcessor = Extension.create({
   name: "node_processor",
   addCommands() {
@@ -25759,9 +25726,6 @@ const buildCoreExtensions = () => [
   }),
   Text,
   History,
-  HardBreak.configure({
-    keepMarks: false
-  }),
   NodeProcessor,
   TextProcessor,
   SelectionProcessor,

package/lib/extensions/core/index.js

@@ -3,7 +3,6 @@ import Paragraph from '@tiptap/extension-paragraph';
 import Text from '@tiptap/extension-text';
 import Placeholder from '@tiptap/extension-placeholder';
 import History from '@tiptap/extension-history';
-import HardBreak from '@tiptap/extension-hard-break';
 import { NodeProcessor } from './NodeProcessor';
 import { TextProcessor } from './TextProcessor';
 import { SelectionProcessor } from './SelectionProcessor';
@@ -20,9 +19,6 @@ export const buildCoreExtensions = () => [
     }),
     Text,
     History,
-    HardBreak.configure({
-        keepMarks: false
-    }),
     NodeProcessor,
     TextProcessor,
     SelectionProcessor,

package/lib/services/ContentNormalizer.js

@@ -1,5 +1,3 @@
-import { ContextWindow } from './ContextWidnow';
-
 export class ContentNormalizer {
     static PARSER = new DOMParser();
     static BLOCK_STYLES = ['text-align', 'line-height'];
@@ -21,10 +19,7 @@ export class ContentNormalizer {
     ];
 
     static normalize(content) {
-        const options = {
-            content,
-            parser: ContentNormalizer.PARSER
-        };
+        const options = { content, parser: ContentNormalizer.PARSER };
 
         return new ContentNormalizer(options).normalize();
     }
@@ -43,8 +38,9 @@ export class ContentNormalizer {
     }
 
     _normalizeTextContent() {
-        this._dom = this._parser.parseFromString(this._content, 'text/html');
+        this._dom = this._parser.parseFromString(this._content.replace(/(\r)?\n/g, ''), 'text/html');
 
+        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');
@@ -66,9 +62,9 @@ export class ContentNormalizer {
     }
 
     _removeEmptyNodes(node) {
-        if (!node.innerHTML.replace(/\n/g, '').trim()) {
-            node.remove();
-        }
+        const html = node.innerHTML.replace(/ /g, '').trim();
+
+        if (!html) node.remove();
     }
 
     _normalizeListItems(itemEl) {
@@ -84,7 +80,7 @@ export class ContentNormalizer {
         this._assignElementProperties(itemEl, itemEl.parentElement, ContentNormalizer.BLOCK_STYLES);
 
         for (const node of children) {
-            if (node.tagName === 'P') {
+            if (this._isBlockNode(node)) {
                 append(node);
                 capturingParagraph = null;
                 continue;
@@ -166,7 +162,7 @@ export class ContentNormalizer {
     _wrapTextNode(parent, node) {
         if (node.nodeType !== Node.TEXT_NODE) return node;
 
-        const span = ContextWindow.document.createElement('span');
+        const span = document.createElement('span');
 
         span.append(node.cloneNode());
         parent.replaceChild(span, node);
@@ -203,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/__tests__/ContentNormalizer.test.js

@@ -72,6 +72,12 @@ describe('normalize text content', () => {
         expect(ContentNormalizer.normalize(input)).toBe(output);
     });
 
+    test('should allow using heading in list', () => {
+        const input = '<ul><li><h2>lorem ipsum</h2></li></ul>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(input);
+    });
+
     test('should ignore empty nodes', () => {
         const input = '<p>lorem ipsum 1</p><p></p><p>lorem ipsum 2</p>';
         const output = '<p>lorem ipsum 1</p><p>lorem ipsum 2</p>';
@@ -86,6 +92,13 @@ 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>';
@@ -127,4 +140,18 @@ describe('normalize text content', () => {
 
         expect(ContentNormalizer.normalize(input)).toBe(output);
     });
+
+    test('should migrate br to paragraphs', () => {
+        const input = '<p><b>lorem</b><br>ipsum</p>';
+        const output = '<p><b>lorem</b></p><p>ipsum</p>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should not migrate single br to paragraph', () => {
+        const input = '<p><br></p>';
+        const output = '<p><br></p>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
 });

package/lib/styles/content.css

@@ -12,7 +12,6 @@
 
 .zw-superscript {
     font-size: 75%;
-    line-height: 0;
     position: relative;
     vertical-align: initial;
     top: -0.5em;
@@ -64,7 +63,6 @@
 
 .ProseMirror {
     word-wrap: break-word;
-    white-space: pre-wrap;
     white-space: break-spaces;
     -webkit-font-variant-ligatures: none;
     font-variant-ligatures: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "1.0.0-dev.79",
+  "version": "1.0.0-dev.81",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "repository": {
@@ -30,7 +30,6 @@
     "@popperjs/core": "^2.11.5",
     "@tiptap/core": "^2.0.0-beta.182",
     "@tiptap/extension-document": "^2.0.0-beta.17",
-    "@tiptap/extension-hard-break": "^2.0.0-beta.33",
     "@tiptap/extension-heading": "^2.0.0-beta.29",
     "@tiptap/extension-history": "^2.0.0-beta.26",
     "@tiptap/extension-link": "^2.0.0-beta.43",