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

package/dist/wysiwyg.css

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

@@ -19435,10 +19435,7 @@ class FavoriteColors {
 }
 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 }) {
@@ -19453,7 +19450,7 @@ 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");
@@ -19472,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();
@@ -19486,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;
@@ -22796,7 +22793,7 @@ var __component__$1 = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$1,
   false,
   __vue2_injectStyles$1,
-  "7afee166",
+  "a84e0da4",
   null,
   null
 );
@@ -22833,7 +22830,6 @@ function useToolbar({ wrapperRef, offsets, isActiveRef }) {
   function mount(element) {
     popper2 = createPopper(wrapperEl.value, element, {
       placement: "top-start",
-      strategy: "fixed",
       modifiers: [
         {
           name: "offset",
@@ -22843,12 +22839,13 @@ function useToolbar({ wrapperRef, offsets, isActiveRef }) {
           name: "preventOverflow",
           options: {
             altAxis: true,
-            padding: 2
+            padding: 2,
+            boundary: ContextWindow.window
           }
         },
         {
           name: "flip",
-          options: { rootBoundary: "document" }
+          options: { boundary: ContextWindow.document }
         }
       ]
     });

package/lib/components/toolbar/Toolbar.vue

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

package/lib/composables/useToolbar.js

@@ -1,5 +1,6 @@
 import { createPopper } from '@popperjs/core';
 import { useElementRef } from '../components/base';
+import { ContextWindow } from '../services';
 
 export function useToolbar({ wrapperRef, offsets, isActiveRef }) {
     const wrapperEl = useElementRef(wrapperRef);
@@ -8,7 +9,6 @@ export function useToolbar({ wrapperRef, offsets, isActiveRef }) {
     function mount(element) {
         popper = createPopper(wrapperEl.value, element, {
             placement: 'top-start',
-            strategy: 'fixed',
             modifiers: [
                 {
                     name: 'offset',
@@ -18,12 +18,13 @@ export function useToolbar({ wrapperRef, offsets, isActiveRef }) {
                     name: 'preventOverflow',
                     options: {
                         altAxis: true,
-                        padding: 2
+                        padding: 2,
+                        boundary: ContextWindow.window
                     }
                 },
                 {
                     name: 'flip',
-                    options: { rootBoundary: 'document' }
+                    options: { boundary: ContextWindow.document }
                 }
             ]
         });

package/lib/services/ContentNormalizer.js

@@ -19,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();
     }
@@ -41,7 +38,7 @@ 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);
@@ -65,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) {
@@ -83,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;

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>';

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.80",
+  "version": "1.0.0-dev.83",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "repository": {