@zipify/wysiwyg 1.2.2 → 1.2.5-1

package/dist/wysiwyg.mjs

@@ -12551,32 +12551,47 @@ function getBasePlacement(placement) {
 var max$3 = Math.max;
 var min$3 = Math.min;
 var round = Math.round;
-function getBoundingClientRect(element, includeScale) {
+function getUAString() {
+  var uaData = navigator.userAgentData;
+  if (uaData != null && uaData.brands) {
+    return uaData.brands.map(function(item) {
+      return item.brand + "/" + item.version;
+    }).join(" ");
+  }
+  return navigator.userAgent;
+}
+function isLayoutViewport() {
+  return !/^((?!chrome|android).)*safari/i.test(getUAString());
+}
+function getBoundingClientRect(element, includeScale, isFixedStrategy) {
   if (includeScale === void 0) {
     includeScale = false;
   }
-  var rect = element.getBoundingClientRect();
+  if (isFixedStrategy === void 0) {
+    isFixedStrategy = false;
+  }
+  var clientRect2 = element.getBoundingClientRect();
   var scaleX = 1;
   var scaleY = 1;
-  if (isHTMLElement(element) && includeScale) {
-    var offsetHeight = element.offsetHeight;
-    var offsetWidth = element.offsetWidth;
-    if (offsetWidth > 0) {
-      scaleX = round(rect.width) / offsetWidth || 1;
-    }
-    if (offsetHeight > 0) {
-      scaleY = round(rect.height) / offsetHeight || 1;
-    }
-  }
+  if (includeScale && isHTMLElement(element)) {
+    scaleX = element.offsetWidth > 0 ? round(clientRect2.width) / element.offsetWidth || 1 : 1;
+    scaleY = element.offsetHeight > 0 ? round(clientRect2.height) / element.offsetHeight || 1 : 1;
+  }
+  var _ref = isElement$1(element) ? getWindow(element) : window, visualViewport = _ref.visualViewport;
+  var addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
+  var x = (clientRect2.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX;
+  var y = (clientRect2.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY;
+  var width = clientRect2.width / scaleX;
+  var height = clientRect2.height / scaleY;
   return {
-    width: rect.width / scaleX,
-    height: rect.height / scaleY,
-    top: rect.top / scaleY,
-    right: rect.right / scaleX,
-    bottom: rect.bottom / scaleY,
-    left: rect.left / scaleX,
-    x: rect.left / scaleX,
-    y: rect.top / scaleY
+    width,
+    height,
+    top: y,
+    right: x + width,
+    bottom: y + height,
+    left: x,
+    x,
+    y
   };
 }
 function getLayoutRect(element) {
@@ -12633,8 +12648,8 @@ function getTrueOffsetParent(element) {
   return element.offsetParent;
 }
 function getContainingBlock(element) {
-  var isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") !== -1;
-  var isIE = navigator.userAgent.indexOf("Trident") !== -1;
+  var isFirefox = /firefox/i.test(getUAString());
+  var isIE = /Trident/i.test(getUAString());
   if (isIE && isHTMLElement(element)) {
     var elementCss = getComputedStyle$1(element);
     if (elementCss.position === "fixed") {
@@ -12954,7 +12969,7 @@ function getWindowScroll(node) {
 function getWindowScrollBarX(element) {
   return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft;
 }
-function getViewportRect(element) {
+function getViewportRect(element, strategy) {
   var win = getWindow(element);
   var html2 = getDocumentElement(element);
   var visualViewport = win.visualViewport;
@@ -12965,7 +12980,8 @@ function getViewportRect(element) {
   if (visualViewport) {
     width = visualViewport.width;
     height = visualViewport.height;
-    if (!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
+    var layoutViewport = isLayoutViewport();
+    if (layoutViewport || !layoutViewport && strategy === "fixed") {
       x = visualViewport.offsetLeft;
       y = visualViewport.offsetTop;
     }
@@ -13029,8 +13045,8 @@ function rectToClientRect(rect) {
     bottom: rect.y + rect.height
   });
 }
-function getInnerBoundingClientRect(element) {
-  var rect = getBoundingClientRect(element);
+function getInnerBoundingClientRect(element, strategy) {
+  var rect = getBoundingClientRect(element, false, strategy === "fixed");
   rect.top = rect.top + element.clientTop;
   rect.left = rect.left + element.clientLeft;
   rect.bottom = rect.top + element.clientHeight;
@@ -13041,8 +13057,8 @@ function getInnerBoundingClientRect(element) {
   rect.y = rect.top;
   return rect;
 }
-function getClientRectFromMixedType(element, clippingParent) {
-  return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isElement$1(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
+function getClientRectFromMixedType(element, clippingParent, strategy) {
+  return clippingParent === viewport ? rectToClientRect(getViewportRect(element, strategy)) : isElement$1(clippingParent) ? getInnerBoundingClientRect(clippingParent, strategy) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
 }
 function getClippingParents(element) {
   var clippingParents2 = listScrollParents(getParentNode(element));
@@ -13055,18 +13071,18 @@ function getClippingParents(element) {
     return isElement$1(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== "body";
   });
 }
-function getClippingRect(element, boundary, rootBoundary) {
+function getClippingRect(element, boundary, rootBoundary, strategy) {
   var mainClippingParents = boundary === "clippingParents" ? getClippingParents(element) : [].concat(boundary);
   var clippingParents2 = [].concat(mainClippingParents, [rootBoundary]);
   var firstClippingParent = clippingParents2[0];
   var clippingRect = clippingParents2.reduce(function(accRect, clippingParent) {
-    var rect = getClientRectFromMixedType(element, clippingParent);
+    var rect = getClientRectFromMixedType(element, clippingParent, strategy);
     accRect.top = max$3(rect.top, accRect.top);
     accRect.right = min$3(rect.right, accRect.right);
     accRect.bottom = min$3(rect.bottom, accRect.bottom);
     accRect.left = max$3(rect.left, accRect.left);
     return accRect;
-  }, getClientRectFromMixedType(element, firstClippingParent));
+  }, getClientRectFromMixedType(element, firstClippingParent, strategy));
   clippingRect.width = clippingRect.right - clippingRect.left;
   clippingRect.height = clippingRect.bottom - clippingRect.top;
   clippingRect.x = clippingRect.left;
@@ -13129,12 +13145,12 @@ function detectOverflow(state, options) {
   if (options === void 0) {
     options = {};
   }
-  var _options = options, _options$placement = _options.placement, placement = _options$placement === void 0 ? state.placement : _options$placement, _options$boundary = _options.boundary, boundary = _options$boundary === void 0 ? clippingParents : _options$boundary, _options$rootBoundary = _options.rootBoundary, rootBoundary = _options$rootBoundary === void 0 ? viewport : _options$rootBoundary, _options$elementConte = _options.elementContext, elementContext = _options$elementConte === void 0 ? popper : _options$elementConte, _options$altBoundary = _options.altBoundary, altBoundary = _options$altBoundary === void 0 ? false : _options$altBoundary, _options$padding = _options.padding, padding = _options$padding === void 0 ? 0 : _options$padding;
+  var _options = options, _options$placement = _options.placement, placement = _options$placement === void 0 ? state.placement : _options$placement, _options$strategy = _options.strategy, strategy = _options$strategy === void 0 ? state.strategy : _options$strategy, _options$boundary = _options.boundary, boundary = _options$boundary === void 0 ? clippingParents : _options$boundary, _options$rootBoundary = _options.rootBoundary, rootBoundary = _options$rootBoundary === void 0 ? viewport : _options$rootBoundary, _options$elementConte = _options.elementContext, elementContext = _options$elementConte === void 0 ? popper : _options$elementConte, _options$altBoundary = _options.altBoundary, altBoundary = _options$altBoundary === void 0 ? false : _options$altBoundary, _options$padding = _options.padding, padding = _options$padding === void 0 ? 0 : _options$padding;
   var paddingObject = mergePaddingObject(typeof padding !== "number" ? padding : expandToHashMap(padding, basePlacements));
   var altContext = elementContext === popper ? reference : popper;
   var popperRect = state.rects.popper;
   var element = state.elements[altBoundary ? altContext : elementContext];
-  var clippingClientRect = getClippingRect(isElement$1(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary);
+  var clippingClientRect = getClippingRect(isElement$1(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary, strategy);
   var referenceClientRect = getBoundingClientRect(state.elements.reference);
   var popperOffsets2 = computeOffsets({
     reference: referenceClientRect,
@@ -13521,7 +13537,7 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
   var isOffsetParentAnElement = isHTMLElement(offsetParent);
   var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
   var documentElement = getDocumentElement(offsetParent);
-  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled);
+  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled, isFixed);
   var scroll = {
     scrollLeft: 0,
     scrollTop: 0
@@ -19543,6 +19559,7 @@ const _ContentNormalizer = class {
     const fragment = this.dom.createDocumentFragment();
     const children = Array.from(itemEl.childNodes);
     let capturingParagraph;
+    let previousNode;
     const append2 = (node) => {
       this._assignElementProperties(node, itemEl, _ContentNormalizer.BLOCK_STYLES);
       fragment.append(node);
@@ -19552,6 +19569,20 @@ const _ContentNormalizer = class {
       if (this._isBlockNode(node)) {
         append2(node);
         capturingParagraph = null;
+        previousNode = node;
+        continue;
+      }
+      if (node.tagName === "BR" && previousNode && (previousNode == null ? void 0 : previousNode.tagName) !== "BR") {
+        node.remove();
+        previousNode = node;
+        continue;
+      }
+      if (node.tagName === "BR") {
+        const emptyLineEl = this.dom.createElement("p");
+        emptyLineEl.append(node);
+        append2(emptyLineEl);
+        capturingParagraph = null;
+        previousNode = node;
         continue;
       }
       if (!capturingParagraph) {
@@ -19559,6 +19590,7 @@ const _ContentNormalizer = class {
         append2(capturingParagraph);
       }
       capturingParagraph.append(node);
+      previousNode = node;
     }
     itemEl.append(fragment);
     this._removeStyleProperties(itemEl, _ContentNormalizer.BLOCK_STYLES);
@@ -23677,12 +23709,12 @@ const Alignment = Extension.create({
           parseHTML({ style: style2 }) {
             const textAlign = convertAlignment(style2.textAlign);
             if (textAlign) {
-              return { desktop: textAlign, tablet: textAlign, mobile: null };
+              return { desktop: textAlign, tablet: textAlign, mobile: textAlign };
             }
-            const mobile = null;
+            const mobile = style2.getPropertyValue("--zw-text-align-mobile") || null;
             const tablet = style2.getPropertyValue("--zw-text-align-tablet") || null;
             const desktop = style2.getPropertyValue("--zw-text-align-desktop") || null;
-            if (!tablet && !desktop)
+            if (!mobile && !tablet && !desktop)
               return null;
             return { desktop, tablet, mobile };
           },
@@ -23702,7 +23734,7 @@ const Alignment = Extension.create({
   addCommands() {
     return {
       applyAlignment: createCommand(({ commands: commands2 }, value) => {
-        commands2.setBlockAttributes(this.name, { desktop: value, tablet: value, mobile: null }, DEFAULTS$1);
+        commands2.setBlockAttributes(this.name, { desktop: value, tablet: value, mobile: value });
       }),
       getAlignment: createCommand(({ commands: commands2 }) => {
         const attribute = commands2.getBlockAttributes(this.name, DEFAULTS$1);

package/lib/extensions/Alignment.js

@@ -23,13 +23,10 @@ export const Alignment = Extension.create({
                         const textAlign = convertAlignment(style.textAlign);
 
                         if (textAlign) {
-                            // return { desktop: textAlign, tablet: textAlign, mobile: textAlign };
-
-                            // Temporary until release BUILDER_MODES
-                            return { desktop: textAlign, tablet: textAlign, mobile: null };
+                            return { desktop: textAlign, tablet: textAlign, mobile: textAlign };
                         }
 
-                        const mobile = null; //style.getPropertyValue('--zw-text-align-mobile') || null;
+                        const mobile = style.getPropertyValue('--zw-text-align-mobile') || null;
                         const tablet = style.getPropertyValue('--zw-text-align-tablet') || null;
                         const desktop = style.getPropertyValue('--zw-text-align-desktop') || null;
 
@@ -60,7 +57,7 @@ export const Alignment = Extension.create({
                 // commands.setBlockAttributes(this.name, { [device]: value }, DEFAULTS);
 
                 // Temporary until release BUILDER_MODES
-                commands.setBlockAttributes(this.name, { desktop: value, tablet: value, mobile: null }, DEFAULTS);
+                commands.setBlockAttributes(this.name, { desktop: value, tablet: value, mobile: value });
             }),
 
             getAlignment: createCommand(({ commands }) => {

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

@@ -7,7 +7,7 @@ Object {
       "attrs": Object {
         "alignment": Object {
           "desktop": "right",
-          "mobile": null,
+          "mobile": "right",
           "tablet": "right",
         },
       },
@@ -31,7 +31,7 @@ Object {
       "attrs": Object {
         "alignment": Object {
           "desktop": "right",
-          "mobile": null,
+          "mobile": "center",
           "tablet": null,
         },
       },
@@ -55,7 +55,7 @@ Object {
       "attrs": Object {
         "alignment": Object {
           "desktop": "center",
-          "mobile": null,
+          "mobile": "center",
           "tablet": "center",
         },
       },

package/lib/services/ContentNormalizer.js

@@ -113,6 +113,7 @@ export class ContentNormalizer {
         const fragment = this.dom.createDocumentFragment();
         const children = Array.from(itemEl.childNodes);
         let capturingParagraph;
+        let previousNode;
 
         const append = (node) => {
             this._assignElementProperties(node, itemEl, ContentNormalizer.BLOCK_STYLES);
@@ -125,6 +126,23 @@ export class ContentNormalizer {
             if (this._isBlockNode(node)) {
                 append(node);
                 capturingParagraph = null;
+                previousNode = node;
+                continue;
+            }
+
+            if (node.tagName === 'BR' && previousNode && previousNode?.tagName !== 'BR') {
+                node.remove();
+                previousNode = node;
+                continue;
+            }
+
+            if (node.tagName === 'BR') {
+                const emptyLineEl = this.dom.createElement('p');
+
+                emptyLineEl.append(node);
+                append(emptyLineEl);
+                capturingParagraph = null;
+                previousNode = node;
                 continue;
             }
 
@@ -134,6 +152,7 @@ export class ContentNormalizer {
             }
 
             capturingParagraph.append(node);
+            previousNode = node;
         }
 
         itemEl.append(fragment);

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

@@ -155,6 +155,16 @@ describe('normalize text content', () => {
         expect(ContentNormalizer.normalize(input)).toBe(output);
     });
 
+    test('should normalize br in list items', () => {
+        const input = '<ul><li>lorem ipsum 1<br><br></li><li>lorem ipsum 2</li></ul>';
+        const output = '<ul>' +
+            '<li><p>lorem ipsum 1</p><p><br></p></li>' +
+            '<li><p>lorem ipsum 2</p></li>' +
+        '</ul>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
     test('should remove comments', () => {
         const input = '<p>lorem ipsum</p><p style="color: red;">Hello <!-- world --></p>';
         const output = '<p>lorem ipsum</p><p><span style="color: red;">Hello </span></p>';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "1.2.2",
+  "version": "1.2.5-1",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "bin": {
@@ -31,7 +31,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@popperjs/core": "^2.11.5",
+    "@popperjs/core": "^2.11.6",
     "@tiptap/core": "^2.0.0-beta.183",
     "@tiptap/extension-document": "^2.0.0-beta.17",
     "@tiptap/extension-heading": "^2.0.0-beta.29",
@@ -57,6 +57,7 @@
     "@babel/plugin-transform-runtime": "^7.18.10",
     "@babel/preset-env": "^7.19.0",
     "@babel/runtime": "^7.19.0",
+    "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-node-resolve": "^14.0.0",
     "@rollup/plugin-replace": "^4.0.0",