@zipify/wysiwyg 1.1.1-0 → 1.1.1

package/lib/extensions/TextDecoration.js

@@ -5,7 +5,6 @@ import { TextSettings } from '../enums';
 
 export const TextDecoration = Mark.create({
     name: TextSettings.TEXT_DECORATION,
-    priority: 1000,
 
     addAttributes: () => ({
         underline: { default: false },
@@ -14,10 +13,10 @@ export const TextDecoration = Mark.create({
 
     addCommands() {
         return {
-            isUnderline: createCommand(({ commands }) => {
+            isUnderline: createCommand(({ commands, editor }) => {
                 const decoration = commands.getTextDecoration();
 
-                return computed(() => unref(decoration).underline);
+                return computed(() => editor.isActive('link') || unref(decoration).underline);
             }),
 
             isStrikeThrough: createCommand(({ commands }) => {
@@ -41,14 +40,9 @@ export const TextDecoration = Mark.create({
 
             getDefaultTextDecoration: createCommand(({ commands }) => {
                 const preset = commands.getPreset();
-                const isLink = commands.isLink();
-                const linkPreset = commands.getLinkPreset();
 
                 return computed(() => {
-                    const decoration = [
-                        unref(preset).common.text_decoration,
-                        unref(isLink) ? unref(linkPreset).common.text_decoration : ''
-                    ].join(' ');
+                    const decoration = unref(preset).common.text_decoration;
 
                     return {
                         underline: decoration.includes('underline'),
@@ -57,7 +51,9 @@ export const TextDecoration = Mark.create({
                 });
             }),
 
-            toggleUnderline: createCommand(({ commands }) => {
+            toggleUnderline: createCommand(({ commands, editor }) => {
+                if (editor.isActive('link')) return;
+
                 commands.toggleTextDecoration('underline');
             }),
 
@@ -76,7 +72,13 @@ export const TextDecoration = Mark.create({
             }),
 
             removeTextDecoration: createCommand(({ commands }, name) => {
-                commands.setMark(this.name, { ...unref(commands.getTextDecoration()), [name]: false });
+                const mark = {
+                    ...unref(commands.getTextDecoration()),
+                    [name]: false
+                };
+                const isRemoveMark = !mark.underline && !mark.strike_through;
+
+                isRemoveMark ? commands.unsetMark(this.name) : commands.setMark(this.name, mark);
             })
         };
     },
@@ -133,7 +135,6 @@ export const TextDecoration = Mark.create({
 
         if (attrs.underline) decorations.push('underline');
         if (attrs.strike_through) decorations.push('line-through');
-        if (!decorations.length) decorations.push('none');
 
         return renderMark({ text_decoration: decorations.join(' ') });
     }

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

@@ -6,11 +6,10 @@ import { FontFamily } from '../FontFamily';
 import { FontWeight } from '../FontWeight';
 import { FontStyle } from '../FontStyle';
 import { ContentNormalizer, NodeFactory } from '../../services';
-import { TextSettings } from '../../enums';
 import { buildCoreExtensions } from '../core';
 
 const MockStylePreset = Extension.create({
-    name: TextSettings.STYLE_PRESET,
+    name: 'style_preset',
 
     addCommands() {
         return {
@@ -31,10 +30,10 @@ function createEditor({ content }) {
             MockStylePreset,
             FontFamily.configure({
                 fonts: [
-                    new Font({ name: 'Lato', styles: ['400', '400i', '700', '700i'] }),
+                    new Font({ name: 'Lato', styles: ['400', '700', '700i'] }),
                     new Font({ name: 'Bungee', styles: ['400'] }),
-                    new Font({ name: 'Roboto', styles: ['400', '400i'] }),
-                    new Font({ name: 'Josefin Slab', styles: ['400', '400i'] })
+                    new Font({ name: 'Roboto', styles: ['400'] }),
+                    new Font({ name: 'Josefin Slab', styles: ['400'] })
                 ],
                 defaultFont: 'Lato'
             }),
@@ -52,7 +51,7 @@ describe('get font family', () => {
     test('should get from selection', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark(TextSettings.FONT_FAMILY, { value: 'Bungee' })
+                NodeFactory.mark('font_family', { value: 'Bungee' })
             ]))
         });
 
@@ -166,7 +165,7 @@ describe('rendering', () => {
     test('should render html', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark(TextSettings.FONT_FAMILY, { value: 'Bungee' })
+                NodeFactory.mark('font_family', { value: 'Bungee' })
             ]))
         });
 

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

@@ -6,11 +6,10 @@ import { FontWeight } from '../FontWeight';
 import { FontFamily } from '../FontFamily';
 import { FontStyle } from '../FontStyle';
 import { ContentNormalizer, NodeFactory } from '../../services';
-import { TextSettings } from '../../enums';
 import { buildCoreExtensions } from '../core';
 
 const MockStylePreset = Extension.create({
-    name: TextSettings.STYLE_PRESET,
+    name: 'style_preset',
 
     addCommands() {
         return {
@@ -31,8 +30,8 @@ function createEditor({ content }) {
             MockStylePreset,
             FontFamily.configure({
                 fonts: [
-                    new Font({ name: 'Lato', styles: ['400', '400i', '700', '700i'] }),
-                    new Font({ name: 'Bungee', styles: ['300', '300i', '800', '800i'] })
+                    new Font({ name: 'Lato', styles: ['400', '700'] }),
+                    new Font({ name: 'Bungee', styles: ['300', '800'] })
                 ]
             }),
             FontWeight,
@@ -49,7 +48,7 @@ describe('get font weight', () => {
     test('should get from selection', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+                NodeFactory.mark('font_weight', { value: '700' })
             ]))
         });
 
@@ -79,7 +78,7 @@ describe('get font weight', () => {
     test('should get closest available font weight', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '800' })
+                NodeFactory.mark('font_weight', { value: '800' })
             ]))
         });
 
@@ -103,7 +102,7 @@ describe('apply font weight', () => {
     test('should toggle weight to bold', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '400' })
+                NodeFactory.mark('font_weight', { value: '400' })
             ]))
         });
 
@@ -116,7 +115,7 @@ describe('apply font weight', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
                 NodeFactory.mark('font_family', { value: 'Bungee' }),
-                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '400' })
+                NodeFactory.mark('font_weight', { value: '400' })
             ]))
         });
 
@@ -128,7 +127,7 @@ describe('apply font weight', () => {
     test('should toggle weight to medium', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+                NodeFactory.mark('font_weight', { value: '700' })
             ]))
         });
 
@@ -141,7 +140,7 @@ describe('apply font weight', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
                 NodeFactory.mark('font_family', { value: 'Bungee' }),
-                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '800' })
+                NodeFactory.mark('font_weight', { value: '800' })
             ]))
         });
 
@@ -155,7 +154,7 @@ describe('rendering', () => {
     test('should render html', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+                NodeFactory.mark('font_weight', { value: '700' })
             ]))
         });
 

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

@@ -4,10 +4,9 @@ import { createCommand } from '../../utils';
 import { TextDecoration } from '../TextDecoration';
 import { ContentNormalizer, NodeFactory } from '../../services';
 import { buildCoreExtensions } from '../core';
-import { TextSettings } from '../../enums';
 
 const MockStylePreset = Extension.create({
-    name: TextSettings.TEXT_DECORATION,
+    name: 'style_preset',
 
     addCommands() {
         return {
@@ -18,26 +17,10 @@ const MockStylePreset = Extension.create({
     }
 });
 
-const MockLink = Extension.create({
-    name: TextSettings.LINK,
-
-    addOptions: () => ({
-        isLink: false,
-        preset: {}
-    }),
-
-    addCommands() {
-        return {
-            isLink: createCommand(() => this.options.isLink),
-            getLinkPreset: createCommand(() => this.options.preset)
-        };
-    }
-});
-
-function createEditor({ content, link }) {
+function createEditor({ content }) {
     return new Editor({
         content: ContentNormalizer.normalize(content),
-        extensions: buildCoreExtensions().concat(MockStylePreset, TextDecoration, MockLink.configure(link))
+        extensions: buildCoreExtensions().concat(MockStylePreset, TextDecoration)
     });
 }
 
@@ -49,7 +32,7 @@ describe('get decoration', () => {
     test('should get from selection', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark(TextSettings.TEXT_DECORATION, {
+                NodeFactory.mark('text_decoration', {
                     underline: true,
                     strike_through: true
                 })
@@ -77,7 +60,7 @@ describe('get decoration', () => {
         test('should get from selection', () => {
             const editor = createEditor({
                 content: createContent(NodeFactory.text('hello world', [
-                    NodeFactory.mark(TextSettings.TEXT_DECORATION, { underline: true })
+                    NodeFactory.mark('text_decoration', { underline: true })
                 ]))
             });
 
@@ -95,57 +78,13 @@ describe('get decoration', () => {
 
             expect(editor.commands.isUnderline().value).toBe(false);
         });
-
-        test('should get true from link preset', () => {
-            const editor = createEditor({
-                content: createContent(NodeFactory.text('hello world')),
-                link: {
-                    isLink: true,
-                    preset: { common: { text_decoration: 'underline' } }
-                }
-            });
-
-            editor.commands.selectAll();
-
-            expect(editor.commands.isUnderline().value).toBe(true);
-        });
-
-        test('should get false from link preset', () => {
-            const editor = createEditor({
-                content: createContent(NodeFactory.text('hello world')),
-                link: {
-                    isLink: true,
-                    preset: { common: { text_decoration: 'none' } }
-                }
-            });
-
-            editor.commands.selectAll();
-
-            expect(editor.commands.isUnderline().value).toBe(false);
-        });
-
-        test('should override link by local', () => {
-            const editor = createEditor({
-                content: createContent(NodeFactory.text('hello world', [
-                    NodeFactory.mark(TextSettings.TEXT_DECORATION, { underline: false })
-                ])),
-                link: {
-                    isLink: true,
-                    preset: { common: { text_decoration: 'underline' } }
-                }
-            });
-
-            editor.commands.selectAll();
-
-            expect(editor.commands.isUnderline().value).toBe(false);
-        });
     });
 
     describe('strike through', () => {
         test('should get from selection', () => {
             const editor = createEditor({
                 content: createContent(NodeFactory.text('hello world', [
-                    NodeFactory.mark(TextSettings.TEXT_DECORATION, { strike_through: true })
+                    NodeFactory.mark('text_decoration', { strike_through: true })
                 ]))
             });
 
@@ -180,7 +119,7 @@ describe('apply decoration', () => {
     test('should second decoration', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark(TextSettings.TEXT_DECORATION, {
+                NodeFactory.mark('text_decoration', {
                     strike_through: false,
                     underline: true
                 })
@@ -192,11 +131,41 @@ describe('apply decoration', () => {
         expect(editor.getJSON()).toMatchSnapshot();
     });
 
+    test('should remove decoration', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('text_decoration', {
+                    strike_through: true,
+                    underline: true
+                })
+            ]))
+        });
+
+        editor.chain().selectAll().removeTextDecoration('strike_through').run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should remove mark if no decoration', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('text_decoration', {
+                    strike_through: false,
+                    underline: true
+                })
+            ]))
+        });
+
+        editor.chain().selectAll().removeTextDecoration('underline').run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
     describe('underline', () => {
         test('should toggle to removed', () => {
             const editor = createEditor({
                 content: createContent(NodeFactory.text('hello world', [
-                    NodeFactory.mark(TextSettings.TEXT_DECORATION, {
+                    NodeFactory.mark('text_decoration', {
                         strike_through: true,
                         underline: true
                     })
@@ -223,7 +192,7 @@ describe('apply decoration', () => {
         test('should toggle to removed', () => {
             const editor = createEditor({
                 content: createContent(NodeFactory.text('hello world', [
-                    NodeFactory.mark(TextSettings.TEXT_DECORATION, {
+                    NodeFactory.mark('text_decoration', {
                         strike_through: true,
                         underline: true
                     })
@@ -251,7 +220,7 @@ describe('rendering', () => {
     test('should render underline only', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark(TextSettings.TEXT_DECORATION, {
+                NodeFactory.mark('text_decoration', {
                     strike_through: false,
                     underline: true
                 })
@@ -264,7 +233,7 @@ describe('rendering', () => {
     test('should render strike through only', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark(TextSettings.TEXT_DECORATION, {
+                NodeFactory.mark('text_decoration', {
                     strike_through: true,
                     underline: false
                 })
@@ -277,7 +246,7 @@ describe('rendering', () => {
     test('should render both', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark(TextSettings.TEXT_DECORATION, {
+                NodeFactory.mark('text_decoration', {
                     strike_through: true,
                     underline: true
                 })

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

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

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

@@ -19,12 +19,6 @@ Object {
               },
               "type": "font_weight",
             },
-            Object {
-              "attrs": Object {
-                "italic": false,
-              },
-              "type": "font_style",
-            },
           ],
           "text": "hello world",
           "type": "text",
@@ -50,12 +44,6 @@ Object {
               },
               "type": "font_family",
             },
-            Object {
-              "attrs": Object {
-                "italic": false,
-              },
-              "type": "font_style",
-            },
           ],
           "text": "hello world",
           "type": "text",
@@ -155,12 +143,6 @@ Object {
               },
               "type": "font_weight",
             },
-            Object {
-              "attrs": Object {
-                "italic": false,
-              },
-              "type": "font_style",
-            },
           ],
           "text": "hello world",
           "type": "text",

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

@@ -11,7 +11,7 @@ Object {
               "attrs": Object {
                 "desktop": "16",
                 "mobile": null,
-                "tablet": null,
+                "tablet": "16",
               },
               "type": "font_size",
             },
@@ -38,7 +38,7 @@ Object {
               "attrs": Object {
                 "desktop": "13",
                 "mobile": null,
-                "tablet": null,
+                "tablet": "13",
               },
               "type": "font_size",
             },
@@ -65,7 +65,7 @@ Object {
               "attrs": Object {
                 "desktop": "15",
                 "mobile": null,
-                "tablet": null,
+                "tablet": "15",
               },
               "type": "font_size",
             },
@@ -92,7 +92,7 @@ Object {
               "attrs": Object {
                 "desktop": "5",
                 "mobile": null,
-                "tablet": null,
+                "tablet": "5",
               },
               "type": "font_size",
             },
@@ -119,7 +119,7 @@ Object {
               "attrs": Object {
                 "desktop": "20",
                 "mobile": null,
-                "tablet": null,
+                "tablet": "20",
               },
               "type": "font_size",
             },
@@ -145,7 +145,7 @@ Object {
             Object {
               "attrs": Object {
                 "desktop": "24",
-                "mobile": "24",
+                "mobile": null,
                 "tablet": "24",
               },
               "type": "font_size",
@@ -203,7 +203,7 @@ Object {
             Object {
               "attrs": Object {
                 "desktop": "24",
-                "mobile": "24",
+                "mobile": null,
                 "tablet": "24",
               },
               "type": "font_size",
@@ -234,7 +234,7 @@ Object {
             Object {
               "attrs": Object {
                 "desktop": "20",
-                "mobile": "20",
+                "mobile": null,
                 "tablet": "20",
               },
               "type": "font_size",
@@ -248,7 +248,7 @@ Object {
             Object {
               "attrs": Object {
                 "desktop": "24",
-                "mobile": "24",
+                "mobile": null,
                 "tablet": "24",
               },
               "type": "font_size",

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

@@ -31,14 +31,6 @@ Object {
     Object {
       "content": Array [
         Object {
-          "marks": Array [
-            Object {
-              "attrs": Object {
-                "italic": false,
-              },
-              "type": "font_style",
-            },
-          ],
           "text": "hello world",
           "type": "text",
         },
@@ -56,14 +48,6 @@ Object {
     Object {
       "content": Array [
         Object {
-          "marks": Array [
-            Object {
-              "attrs": Object {
-                "italic": false,
-              },
-              "type": "font_style",
-            },
-          ],
           "text": "hello world",
           "type": "text",
         },

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 [
@@ -31,7 +31,7 @@ Object {
       "attrs": Object {
         "line_height": Object {
           "desktop": "1.4",
-          "mobile": "1.2",
+          "mobile": null,
           "tablet": null,
         },
       },
@@ -55,7 +55,7 @@ Object {
       "attrs": Object {
         "line_height": Object {
           "desktop": "1.20",
-          "mobile": "1.20",
+          "mobile": null,
           "tablet": "1.20",
         },
       },
@@ -79,7 +79,7 @@ Object {
       "attrs": Object {
         "line_height": Object {
           "desktop": "1.20",
-          "mobile": "1.20",
+          "mobile": null,
           "tablet": "1.20",
         },
       },
@@ -103,7 +103,7 @@ Object {
       "attrs": Object {
         "line_height": Object {
           "desktop": "1.2",
-          "mobile": "1.2",
+          "mobile": null,
           "tablet": "1.2",
         },
       },

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

@@ -26,6 +26,49 @@ Object {
 }
 `;
 
+exports[`apply decoration should remove decoration 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "strike_through": false,
+                "underline": true,
+              },
+              "type": "text_decoration",
+            },
+          ],
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`apply decoration should remove mark if no decoration 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
 exports[`apply decoration should second decoration 1`] = `
 Object {
   "content": Array [

package/lib/services/NodeFactory.js

@@ -66,6 +66,9 @@ export class NodeFactory {
     }
 
     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 };
     }
 }