@zipify/wysiwyg 2.4.2-0 → 2.5.0

package/example/fonts.js

@@ -2,13 +2,6 @@ export const FONTS = [
     {
         'name': 'Merriweather',
         'styles': [
-            '300',
-            '300i',
-            '400',
-            '400i',
-            '700',
-            '700i',
-            '900',
             '900i'
         ],
         'category': 'Serif'

package/lib/extensions/Alignment.js

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

package/lib/extensions/FontSize.js

@@ -2,6 +2,7 @@ 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,
@@ -34,12 +35,31 @@ 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 });
+                commands.applyMark(this.name, { [device]: value }, {
+                    isAppliedToParent: (parentMark, mark) => {
+                        if (parentMark.type.name !== mark.type.name) return false;
 
-                // Temporary until release BUILDER_MODES
-                commands.applyMark(this.name, { desktop: value, tablet: value, mobile: null });
+                        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));
+                    }
+                });
             }),
 
             increaseFontSize: createCommand(({ commands }) => {
@@ -89,8 +109,6 @@ export const FontSize = Mark.create({
                 getAttrs: (input) => {
                     const value = parseSize(input);
 
-                    // return { desktop: value, tablet: value, mobile: value };
-                    // Temporary until release BUILDER_MODES
                     return { desktop: value, tablet: value, mobile: null };
                 }
             }

package/lib/extensions/FontStyle.js

@@ -21,10 +21,15 @@ export const FontStyle = Mark.create({
             }),
 
             isItalicAvailable: createCommand(({ commands }) => {
-                const font = commands.getFont();
-                const fontWeight = commands.getFontWeight();
+                const fontRef = commands.getFont();
+                const fontWeightRef = commands.getFontWeight();
 
-                return computed(() => unref(font).isItalicSupported(unref(fontWeight)));
+                return computed(() => {
+                    const font = unref(fontRef);
+                    const weight = unref(fontWeightRef);
+
+                    return font.isItalicSupported(weight) && !font.isWeightItalicOnly(weight);
+                });
             }),
 
             getDefaultFontStyle: createCommand(({ commands }) => {

package/lib/extensions/LineHeight.js

@@ -36,9 +36,6 @@ 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 };
                         },
 
@@ -75,12 +72,9 @@ export const LineHeight = Extension.create({
             }),
 
             applyLineHeight: createCommand(({ commands }, value) => {
-                // const device = unref(commands.getDevice());
-                //
-                // commands.setBlockAttributes(this.name, { [device]: value }, DEFAULTS);
+                const device = unref(commands.getDevice());
 
-                // Temporary until release BUILDER_MODES
-                commands.setBlockAttributes(this.name, { desktop: value, tablet: value, mobile: null }, DEFAULTS);
+                commands.setBlockAttributes(this.name, { [device]: value }, DEFAULTS);
             })
         };
     }

package/lib/extensions/__tests__/FontFamily.test.js

@@ -88,7 +88,9 @@ describe('get font family', () => {
             content: createContent(NodeFactory.text('hello world'))
         });
 
-        expect(editor.commands.findFontByName('Bungee')).toEqual({ name: 'Bungee', styles: ['400'] });
+        expect(editor.commands.findFontByName('Bungee')).toEqual(
+            expect.objectContaining({ name: 'Bungee' })
+        );
     });
 
     test('should get font model from selection', () => {

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

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

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

@@ -15,7 +15,7 @@ Object {
           "attrs": Object {
             "desktop": "16",
             "mobile": null,
-            "tablet": "16",
+            "tablet": null,
           },
           "type": "font_size",
         },
@@ -42,7 +42,7 @@ Object {
           "attrs": Object {
             "desktop": "13",
             "mobile": null,
-            "tablet": "13",
+            "tablet": null,
           },
           "type": "font_size",
         },
@@ -69,7 +69,7 @@ Object {
           "attrs": Object {
             "desktop": "15",
             "mobile": null,
-            "tablet": "15",
+            "tablet": null,
           },
           "type": "font_size",
         },
@@ -96,7 +96,7 @@ Object {
           "attrs": Object {
             "desktop": "5",
             "mobile": null,
-            "tablet": "5",
+            "tablet": null,
           },
           "type": "font_size",
         },
@@ -123,7 +123,7 @@ Object {
           "attrs": Object {
             "desktop": "20",
             "mobile": null,
-            "tablet": "20",
+            "tablet": null,
           },
           "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": "1.41",
+          "tablet": null,
         },
       },
       "content": Array [

package/lib/extensions/core/NodeProcessor.js

@@ -43,7 +43,7 @@ export const NodeProcessor = Extension.create({
                 }
             }),
 
-            applyMark: createCommand(({ state, commands }, name, value) => {
+            applyMark: createCommand(({ state, commands }, name, value, customizer = {}) => {
                 const { tr, doc, schema } = state;
                 const { $from, $to } = tr.selection;
                 const markType = getMarkType(name, schema);
@@ -56,6 +56,14 @@ export const NodeProcessor = Extension.create({
 
                 if ($from.pos === $to.pos) return;
 
+                const onAppliedToParent = (context) => {
+                    if (!customizer.onAppliedToParent || customizer.onAppliedToParent(context) === false) {
+                        const { tr, node, position, mark } = context;
+
+                        commands._removeNodeMark({ tr, node, position, mark: mark.type });
+                    }
+                };
+
                 doc.nodesBetween($from.pos, $to.pos, (node, position) => {
                     if (node.type.name === NodeTypes.LIST) return;
 
@@ -63,8 +71,8 @@ export const NodeProcessor = Extension.create({
                     const applyingMark = markType.create({ ...(initialMark?.attrs || {}), ...value });
                     const textPosition = resolveTextPosition($from, $to, node, position);
 
-                    if (isMarkAppliedToParent(tr.doc, position, applyingMark)) {
-                        return commands._removeNodeMark({ tr, node, position, mark: markType });
+                    if (isMarkAppliedToParent(tr.doc, position, applyingMark, customizer.isAppliedToParent)) {
+                        return onAppliedToParent({ tr, node, position, mark: applyingMark });
                     }
 
                     if (node.isText) {

package/lib/extensions/core/index.js

@@ -31,3 +31,5 @@ export const buildCoreExtensions = () => [
     SelectionProcessor,
     ProseMirrorPlugins
 ];
+
+export * from './steps';

package/lib/models/Font.js

@@ -3,20 +3,27 @@ export class Font {
         this.name = name;
         this.category = category;
         this.styles = styles;
+        this.weights = this.#getWeights();
     }
 
-    get weights() {
-        return this.styles.filter((style) => !style.endsWith('i'));
+    #getWeights() {
+        const weights = this.styles.map((style) => style.replace('i', ''));
+
+        return Array.from(new Set(weights));
     }
 
     isWeightSupported(weight) {
-        return this.styles.includes(weight);
+        return this.weights.includes(weight);
     }
 
     isItalicSupported(weight) {
         return this.styles.includes(`${weight}i`);
     }
 
+    isWeightItalicOnly(weight) {
+        return this.isItalicSupported(weight) && !this.styles.includes(weight);
+    }
+
     findClosestWeight(searchedWeight) {
         const weights = this.weights.map((weight) => parseInt(weight));
 

package/lib/models/__tests__/Font.test.js

@@ -9,6 +9,12 @@ describe('weights', () => {
         expect(font.weights).toEqual(['400', '700']);
     });
 
+    test('should display italic only style', () => {
+        const font = new Font({ styles: ['700i'] });
+
+        expect(font.weights).toEqual(['700']);
+    });
+
     test('should find closest font weight', () => {
         const font = new Font({ styles: ['400', '700'] });
         const weight = font.findClosestWeight('500');
@@ -41,7 +47,7 @@ describe('style checks', () => {
     test('should detect if weight not supported', () => {
         const font = new Font({ styles: ['400', '700i'] });
 
-        expect(font.isWeightSupported('700')).toBe(false);
+        expect(font.isWeightSupported('800')).toBe(false);
     });
 
     test('should detect if italic supported', () => {
@@ -55,4 +61,16 @@ describe('style checks', () => {
 
         expect(font.isItalicSupported('700')).toBe(false);
     });
+
+    test('should detect italic only weight', () => {
+        const font = new Font({ styles: ['400i'] });
+
+        expect(font.isItalicSupported('400')).toBe(true);
+    });
+
+    test('should detect non italic only weight', () => {
+        const font = new Font({ styles: ['400i', '400'] });
+
+        expect(font.isItalicSupported('400')).toBe(true);
+    });
 });

package/lib/services/NodeFactory.js

@@ -136,9 +136,6 @@ export class NodeFactory {
      * @returns {{tablet, desktop, mobile}}
      */
     static populateAllDevices(value) {
-        // return { mobile: value, tablet: value, desktop: value };
-
-        // Temporary until release BUILDER_MODES
-        return { mobile: null, tablet: value, desktop: value };
+        return { mobile: value, 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": null,
+  "mobile": "18",
   "tablet": "18",
 }
 `;

package/lib/utils/__tests__/isMarkAppliedToParent.test.js

@@ -1,8 +1,8 @@
 import { isMarkAppliedToParent } from '../isMarkAppliedToParent';
 
 const createMark = (attrs = {}) => ({
-    isInSet(set) {
-        return set.includes(this);
+    eq(another) {
+        return JSON.stringify(this) === JSON.stringify(another);
     },
     ...attrs
 });
@@ -34,15 +34,15 @@ describe('is mark applied to parent', () => {
     });
 
     test('should return false if not applied to parent', () => {
-        const checkingMark = createMark();
+        const checkingMark = createMark({ attrs: { value: '400' } });
         const doc = createNode();
 
         doc.resolve.mockReturnValue({
             path: [
-                createNode({ marks: [createMark()] }),
+                createNode({ marks: [createMark({ attrs: { value: '700' } })] }),
                 0,
                 0,
-                createNode({ marks: [createMark()] }),
+                createNode({ marks: [createMark({ attrs: { value: '700' } })] }),
                 0,
                 1
             ]

package/lib/utils/isMarkAppliedToParent.js

@@ -1,9 +1,14 @@
-export function isMarkAppliedToParent(doc, position, checkingMark) {
+const DEFAULT_COMPARATOR = (parentMark, mark) => parentMark.eq(mark);
+
+export function isMarkAppliedToParent(doc, position, checkingMark, comparator = DEFAULT_COMPARATOR) {
     const steps = doc.resolve(position).path.reverse();
 
     for (const step of steps) {
         if (typeof step === 'number') continue;
-        if (checkingMark.isInSet(step.marks)) return true;
+
+        for (const mark of step.marks) {
+            if (comparator(mark, checkingMark)) return true;
+        }
     }
 
     return false;

package/package.json

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