@zipify/wysiwyg 1.0.0-dev.78 → 1.0.0-dev.80

package/dist/wysiwyg.css

@@ -631,15 +631,16 @@
     width: 234px;
 }
 
-.zw-toolbar[data-v-0068707a] {
+.zw-toolbar[data-v-7afee166] {
     border-radius: 2px;
     background-color: rgb(var(--zw-color-n15));
     color: rgb(var(--zw-color-n70));
     z-index: 999999;
     text-align: left;
+    position: fixed;
 }
-.zw-toolbar[data-v-0068707a]::before,
-.zw-toolbar[data-v-0068707a]::after {
+.zw-toolbar[data-v-7afee166]::before,
+.zw-toolbar[data-v-7afee166]::after {
     content: "";
     display: block;
     width: 100%;
@@ -647,21 +648,21 @@
     position: absolute;
     --zw-toolbar-safe-zone: calc(-1 * var(--zw-toolbar-offset-y));
 }
-.zw-toolbar[data-v-0068707a]::before {
+.zw-toolbar[data-v-7afee166]::before {
     top: var(--zw-toolbar-safe-zone);
 }
-.zw-toolbar[data-v-0068707a]::after {
+.zw-toolbar[data-v-7afee166]::after {
     bottom: var(--zw-toolbar-safe-zone);
 }
-.zw-toolbar--enter-active[data-v-0068707a],
-.zw-toolbar--leave-active[data-v-0068707a] {
+.zw-toolbar--enter-active[data-v-7afee166],
+.zw-toolbar--leave-active[data-v-7afee166] {
     transition: opacity 150ms ease-out;
 }
-.zw-toolbar--leave-active[data-v-0068707a] {
+.zw-toolbar--leave-active[data-v-7afee166] {
     transition: opacity 0s ease-in;
 }
-.zw-toolbar--enter[data-v-0068707a],
-.zw-toolbar--leave-to[data-v-0068707a] {
+.zw-toolbar--enter[data-v-7afee166],
+.zw-toolbar--leave-to[data-v-7afee166] {
     opacity: 0;
 }
 .zw-wysiwyg {

package/dist/wysiwyg.mjs

@@ -19433,24 +19433,6 @@ 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 = {
@@ -19472,6 +19454,7 @@ const _ContentNormalizer = class {
   }
   _normalizeTextContent() {
     this._dom = this._parser.parseFromString(this._content, "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");
@@ -19567,7 +19550,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 +19580,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 +19622,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 {
@@ -22772,7 +22796,7 @@ var __component__$1 = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$1,
   false,
   __vue2_injectStyles$1,
-  "0068707a",
+  "7afee166",
   null,
   null
 );
@@ -25550,60 +25574,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 +25729,6 @@ const buildCoreExtensions = () => [
   }),
   Text,
   History,
-  HardBreak.configure({
-    keepMarks: false
-  }),
   NodeProcessor,
   TextProcessor,
   SelectionProcessor,

package/lib/components/toolbar/Toolbar.vue

@@ -61,6 +61,7 @@ export default {
     color: rgb(var(--zw-color-n70));
     z-index: 999999;
     text-align: left;
+    position: fixed;
 }
 
 .zw-toolbar::before,

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'];
@@ -45,6 +43,7 @@ export class ContentNormalizer {
     _normalizeTextContent() {
         this._dom = this._parser.parseFromString(this._content, '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');
@@ -166,7 +165,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 +202,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

@@ -127,4 +127,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "1.0.0-dev.78",
+  "version": "1.0.0-dev.80",
   "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",