@zipify/wysiwyg 2.4.4 → 2.4.6

package/lib/cli/ContentSerializer.js

@@ -1,14 +1,15 @@
 import { ref } from 'vue';
 import { getSchema } from '@tiptap/core';
 import { DOMParser } from 'prosemirror-model';
-import { JSDOM } from 'jsdom';
 import { buildExtensions } from '../extensions';
 import { Devices } from '../enums';
-import { ContentNormalizer } from '../services';
+import { ContentNormalizer, ContextWindow } from '../services';
 import { NodeDomParser } from './NodeDomParser';
 
 export class ContentSerializer {
     static build(options) {
+        ContextWindow.use(NodeDomParser.createWindow());
+
         const extensions = buildExtensions({
             fonts: options.fonts,
             minFontSize: 0,
@@ -21,7 +22,7 @@ export class ContentSerializer {
             baseListClass: options.baseListClass,
             deviceRef: ref(Devices.DESKTOP),
             pageBlocksRef: ref([]),
-            wrapperRef: JSDOM.fragment('<p></p>').firstElementChild
+            wrapperRef: ContextWindow.document.createElement('p')
         });
         const schema = getSchema(extensions);
 

package/lib/cli/NodeDomParser.js

@@ -1,6 +1,10 @@
 import { JSDOM } from 'jsdom';
 
 export class NodeDomParser {
+    static createWindow() {
+        return new JSDOM().window;
+    }
+
     types;
 
     parse(html) {

package/lib/extensions/Alignment.js

@@ -59,9 +59,12 @@ export const Alignment = Extension.create({
             }),
 
             applyAlignment: createCommand(({ commands }, value) => {
-                const device = unref(commands.getDevice());
+                // const device = unref(commands.getDevice());
+                //
+                // commands.setBlockAttributes(this.name, { [device]: value }, DEFAULTS);
 
-                commands.setBlockAttributes(this.name, { [device]: value }, DEFAULTS);
+                // Temporary until release BUILDER_MODES
+                commands.setBlockAttributes(this.name, { desktop: value, tablet: value, mobile: value });
             }),
 
             removeAlignment: createCommand(({ commands }) => commands.removeBlockAttributes(this.name)),

package/lib/extensions/FontSize.js

@@ -2,7 +2,6 @@ import { Mark } from '@tiptap/vue-2';
 import { computed, unref } from 'vue';
 import { convertFontSize, createCommand, createKeyboardShortcut, renderMark } from '../utils';
 import { MarkGroups, TextSettings } from '../enums';
-import { AddNodeMarkStep } from './core';
 
 export const FontSize = Mark.create({
     name: TextSettings.FONT_SIZE,
@@ -35,31 +34,12 @@ export const FontSize = Mark.create({
             }),
 
             applyFontSize: createCommand(({ commands }, value) => {
-                const device = unref(commands.getDevice());
+                // const device = unref(commands.getDevice());
 
-                commands.applyMark(this.name, { [device]: value }, {
-                    isAppliedToParent: (parentMark, mark) => {
-                        if (parentMark.type.name !== mark.type.name) return false;
+                // commands.applyMark(this.name, { [device]: value });
 
-                        return parentMark.attrs[device] === mark.attrs[device];
-                    },
-
-                    onAppliedToParent: ({ tr, node, position, mark }) => {
-                        const attrs = { ...mark.attrs, [device]: null };
-                        const canRemove = !Object.values(attrs).some((value) => !!value);
-
-                        if (canRemove) return false;
-
-                        const updated = mark.type.create(attrs);
-
-                        if (node.isText) {
-                            tr.addMark(position, position + node.nodeSize, updated);
-                            return;
-                        }
-
-                        tr.step(new AddNodeMarkStep(position, updated));
-                    }
-                });
+                // Temporary until release BUILDER_MODES
+                commands.applyMark(this.name, { desktop: value, tablet: value, mobile: null });
             }),
 
             increaseFontSize: createCommand(({ commands }) => {

package/lib/extensions/LineHeight.js

@@ -36,6 +36,9 @@ export const LineHeight = Extension.create({
                             const wrapperEl = unref(this.options.wrapperRef);
                             const converted = convertLineHeight(value, element, wrapperEl);
 
+                            // return { desktop: converted, tablet: converted, mobile: converted };
+
+                            // Temporary until release BUILDER_MODES
                             return { desktop: converted, tablet: converted, mobile: null };
                         },
 
@@ -72,9 +75,12 @@ export const LineHeight = Extension.create({
             }),
 
             applyLineHeight: createCommand(({ commands }, value) => {
-                const device = unref(commands.getDevice());
+                // const device = unref(commands.getDevice());
+                //
+                // commands.setBlockAttributes(this.name, { [device]: value }, DEFAULTS);
 
-                commands.setBlockAttributes(this.name, { [device]: value }, DEFAULTS);
+                // Temporary until release BUILDER_MODES
+                commands.setBlockAttributes(this.name, { desktop: value, tablet: value, mobile: null }, DEFAULTS);
             })
         };
     }

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

@@ -7,8 +7,8 @@ Object {
       "attrs": Object {
         "alignment": Object {
           "desktop": "right",
-          "mobile": null,
-          "tablet": null,
+          "mobile": "right",
+          "tablet": "right",
         },
       },
       "content": Array [
@@ -51,8 +51,8 @@ Object {
       "attrs": Object {
         "alignment": Object {
           "desktop": "right",
-          "mobile": null,
-          "tablet": null,
+          "mobile": "right",
+          "tablet": "right",
         },
       },
       "content": Array [

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

@@ -15,7 +15,7 @@ Object {
           "attrs": Object {
             "desktop": "16",
             "mobile": null,
-            "tablet": null,
+            "tablet": "16",
           },
           "type": "font_size",
         },
@@ -42,7 +42,7 @@ Object {
           "attrs": Object {
             "desktop": "13",
             "mobile": null,
-            "tablet": null,
+            "tablet": "13",
           },
           "type": "font_size",
         },
@@ -69,7 +69,7 @@ Object {
           "attrs": Object {
             "desktop": "15",
             "mobile": null,
-            "tablet": null,
+            "tablet": "15",
           },
           "type": "font_size",
         },
@@ -96,7 +96,7 @@ Object {
           "attrs": Object {
             "desktop": "5",
             "mobile": null,
-            "tablet": null,
+            "tablet": "5",
           },
           "type": "font_size",
         },
@@ -123,7 +123,7 @@ Object {
           "attrs": Object {
             "desktop": "20",
             "mobile": null,
-            "tablet": null,
+            "tablet": "20",
           },
           "type": "font_size",
         },

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

@@ -8,7 +8,7 @@ Object {
         "line_height": Object {
           "desktop": "1.41",
           "mobile": null,
-          "tablet": null,
+          "tablet": "1.41",
         },
       },
       "content": Array [

package/lib/services/NodeFactory.js

@@ -136,6 +136,9 @@ export class NodeFactory {
      * @returns {{tablet, desktop, mobile}}
      */
     static populateAllDevices(value) {
-        return { mobile: value, tablet: value, desktop: value };
+        // return { mobile: value, tablet: value, desktop: value };
+
+        // Temporary until release BUILDER_MODES
+        return { mobile: null, tablet: value, desktop: value };
     }
 }

package/lib/services/__tests__/__snapshots__/NodeFactory.test.js.snap

@@ -320,7 +320,7 @@ Object {
 exports[`build node should populate value to all devices 1`] = `
 Object {
   "desktop": "18",
-  "mobile": "18",
+  "mobile": null,
   "tablet": "18",
 }
 `;

package/lib/styles/variables.css

@@ -11,8 +11,8 @@
     --zw-color-n200: 194, 200, 209;  /* #C2C8D1 */
     --zw-color-black: 0, 0, 0;
     --zw-color-white: 255, 255, 255;
-    --zw-color-green: 59, 180, 74; /* #3BB44A */
-    --zw-color-red: 234, 58, 58; /* #EA3A3A */
+    --zw-color-green: 59, 180, 74;   /* #3BB44A */
+    --zw-color-red: 234, 58, 58;     /* #EA3A3A */
 
     --zw-offset-xxs: 4px;
     --zw-offset-xs: 8px;

package/lib/utils/convertFontSize.js

@@ -1,7 +1,9 @@
+import { ContextWindow } from '../services';
+
 export function convertFontSize(value, wrapperEl) {
     if (!value.includes('em')) return parseInt(value);
 
-    const containerValue = window.getComputedStyle(wrapperEl).fontSize;
+    const containerValue = ContextWindow.getComputedStyle(wrapperEl).fontSize;
     const size = parseFloat(value) * parseFloat(containerValue);
 
     return Math.round(size);

package/lib/utils/convertLineHeight.js

@@ -1,10 +1,11 @@
+import { ContextWindow } from '../services';
 import { convertFontSize } from './convertFontSize';
 
 function getFontSize(sourceEl, wrapperEl) {
     const source = sourceEl.firstElementChild || sourceEl;
     const fontSize = source.style.fontSize;
 
-    return fontSize || window.getComputedStyle(wrapperEl).fontSize;
+    return fontSize || ContextWindow.getComputedStyle(wrapperEl).fontSize;
 }
 
 export function convertLineHeight(value, sourceEl, wrapperEl) {
@@ -13,5 +14,5 @@ export function convertLineHeight(value, sourceEl, wrapperEl) {
     const rawFontSize = getFontSize(sourceEl, wrapperEl);
     const fontSize = convertFontSize(rawFontSize, wrapperEl);
 
-    return (parseInt(value) / fontSize).toFixed(2);
+    return fontSize ? (parseInt(value) / fontSize).toFixed(2) : null;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "2.4.4",
+  "version": "2.4.6",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "bin": {