@zipify/wysiwyg 1.2.0 → 1.2.1-2

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

@@ -6,10 +6,11 @@ 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: 'style_preset',
+    name: TextSettings.STYLE_PRESET,
 
     addCommands() {
         return {
@@ -30,8 +31,8 @@ function createEditor({ content }) {
             MockStylePreset,
             FontFamily.configure({
                 fonts: [
-                    new Font({ name: 'Lato', styles: ['400', '700'] }),
-                    new Font({ name: 'Bungee', styles: ['300', '800'] })
+                    new Font({ name: 'Lato', styles: ['400', '400i', '700', '700i'] }),
+                    new Font({ name: 'Bungee', styles: ['300', '300i', '800', '800i'] })
                 ]
             }),
             FontWeight,
@@ -48,7 +49,7 @@ describe('get font weight', () => {
     test('should get from selection', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('font_weight', { value: '700' })
+                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
             ]))
         });
 
@@ -78,7 +79,7 @@ describe('get font weight', () => {
     test('should get closest available font weight', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('font_weight', { value: '800' })
+                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '800' })
             ]))
         });
 
@@ -102,7 +103,7 @@ describe('apply font weight', () => {
     test('should toggle weight to bold', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('font_weight', { value: '400' })
+                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '400' })
             ]))
         });
 
@@ -115,7 +116,7 @@ describe('apply font weight', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
                 NodeFactory.mark('font_family', { value: 'Bungee' }),
-                NodeFactory.mark('font_weight', { value: '400' })
+                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '400' })
             ]))
         });
 
@@ -127,7 +128,7 @@ describe('apply font weight', () => {
     test('should toggle weight to medium', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('font_weight', { value: '700' })
+                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
             ]))
         });
 
@@ -140,7 +141,7 @@ describe('apply font weight', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
                 NodeFactory.mark('font_family', { value: 'Bungee' }),
-                NodeFactory.mark('font_weight', { value: '800' })
+                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '800' })
             ]))
         });
 
@@ -154,7 +155,7 @@ describe('rendering', () => {
     test('should render html', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('font_weight', { value: '700' })
+                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
             ]))
         });
 
@@ -218,4 +219,12 @@ describe('parsing html', () => {
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
+
+    test('should parse style shorthand', () => {
+        const editor = createEditor({
+            content: '<p style="font-weight: bold">test</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
 });

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

@@ -4,6 +4,7 @@ import { List } from '../list';
 import { ListTypes, NodeTypes, TextSettings } from '../../enums';
 import { ContentNormalizer, NodeFactory } from '../../services';
 import { buildCoreExtensions } from '../core';
+import { createCommand } from '../../utils';
 
 const MockFontSize = Mark.create({
     name: TextSettings.FONT_SIZE,
@@ -101,7 +102,23 @@ const MockSuperscript = Mark.create({
     renderHTML: () => ['span', {}, 0]
 });
 
-function createEditor({ content, presets, defaultId }) {
+const MockLink = Extension.create({
+    name: TextSettings.LINK,
+
+    addOptions: () => ({
+        isActive: false,
+        preset: {}
+    }),
+
+    addCommands() {
+        return {
+            isLink: createCommand(() => this.options.isActive),
+            getLinkPreset: createCommand(() => this.options.preset)
+        };
+    }
+});
+
+function createEditor({ content, presets, defaultId, link }) {
     return new Promise((resolve) => {
         const editor = new Editor({
             content: ContentNormalizer.normalize(content),
@@ -130,7 +147,8 @@ function createEditor({ content, presets, defaultId }) {
                 MockFontFamily,
                 MockFontStyle,
                 MockTextDecoration,
-                MockSuperscript
+                MockSuperscript,
+                MockLink.configure(link)
             )
         });
     });
@@ -218,6 +236,38 @@ describe('get preset', () => {
 
         expect(preset.value).toBeFalsy();
     });
+
+    test('should get setting from link if selected', async () => {
+        const editor = await createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph({ preset: { id: 'regular-1' } }, 'test')
+            ]),
+            presets: [
+                createPreset({
+                    id: 'regular-1',
+                    common: {
+                        text_decoration: 'none',
+                        font_style: 'normal',
+                        font_size: '20'
+                    }
+                })
+            ],
+            link: {
+                preset: createPreset({
+                    id: 'link',
+                    common: {
+                        text_decoration: 'underline',
+                        font_style: 'italic',
+                        font_size: 'inherit'
+                    }
+                }),
+                isActive: true
+            }
+        });
+        const preset = editor.commands.getPreset();
+
+        expect(preset.value).toMatchSnapshot();
+    });
 });
 
 describe('apply preset', () => {

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

@@ -4,9 +4,10 @@ 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: 'style_preset',
+    name: TextSettings.TEXT_DECORATION,
 
     addCommands() {
         return {
@@ -32,7 +33,7 @@ describe('get decoration', () => {
     test('should get from selection', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('text_decoration', {
+                NodeFactory.mark(TextSettings.TEXT_DECORATION, {
                     underline: true,
                     strike_through: true
                 })
@@ -60,7 +61,7 @@ describe('get decoration', () => {
         test('should get from selection', () => {
             const editor = createEditor({
                 content: createContent(NodeFactory.text('hello world', [
-                    NodeFactory.mark('text_decoration', { underline: true })
+                    NodeFactory.mark(TextSettings.TEXT_DECORATION, { underline: true })
                 ]))
             });
 
@@ -84,7 +85,7 @@ describe('get decoration', () => {
         test('should get from selection', () => {
             const editor = createEditor({
                 content: createContent(NodeFactory.text('hello world', [
-                    NodeFactory.mark('text_decoration', { strike_through: true })
+                    NodeFactory.mark(TextSettings.TEXT_DECORATION, { strike_through: true })
                 ]))
             });
 
@@ -119,7 +120,7 @@ describe('apply decoration', () => {
     test('should second decoration', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('text_decoration', {
+                NodeFactory.mark(TextSettings.TEXT_DECORATION, {
                     strike_through: false,
                     underline: true
                 })
@@ -131,41 +132,11 @@ 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('text_decoration', {
+                    NodeFactory.mark(TextSettings.TEXT_DECORATION, {
                         strike_through: true,
                         underline: true
                     })
@@ -192,7 +163,7 @@ describe('apply decoration', () => {
         test('should toggle to removed', () => {
             const editor = createEditor({
                 content: createContent(NodeFactory.text('hello world', [
-                    NodeFactory.mark('text_decoration', {
+                    NodeFactory.mark(TextSettings.TEXT_DECORATION, {
                         strike_through: true,
                         underline: true
                     })
@@ -220,7 +191,7 @@ describe('rendering', () => {
     test('should render underline only', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('text_decoration', {
+                NodeFactory.mark(TextSettings.TEXT_DECORATION, {
                     strike_through: false,
                     underline: true
                 })
@@ -233,7 +204,7 @@ describe('rendering', () => {
     test('should render strike through only', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('text_decoration', {
+                NodeFactory.mark(TextSettings.TEXT_DECORATION, {
                     strike_through: true,
                     underline: false
                 })
@@ -246,7 +217,7 @@ describe('rendering', () => {
     test('should render both', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('text_decoration', {
+                NodeFactory.mark(TextSettings.TEXT_DECORATION, {
                     strike_through: true,
                     underline: true
                 })

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

@@ -92,6 +92,6 @@ Object {
 }
 `;
 
-exports[`rendering should render all devices 1`] = `"<p class=\\"zw-style\\" style=\\"--zw-text-align-mobile:left;--zw-text-align-tablet:right;--zw-text-align-desktop:center;\\">hello world</p>"`;
+exports[`rendering should render all devices 1`] = `"<p class="zw-style" style="--zw-text-align-mobile:left;--zw-text-align-tablet:right;--zw-text-align-desktop:center;">hello world</p>"`;
 
-exports[`rendering should render only desktop 1`] = `"<p class=\\"zw-style\\" style=\\"--zw-text-align-desktop:center;\\">hello world</p>"`;
+exports[`rendering should render only desktop 1`] = `"<p class="zw-style" style="--zw-text-align-desktop:center;">hello world</p>"`;

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

@@ -145,4 +145,4 @@ Object {
 }
 `;
 
-exports[`rendering should render html 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-background-color:green;\\" class=\\"zw-style\\">hello world</span></p>"`;
+exports[`rendering should render html 1`] = `"<p class="zw-style"><span style="--zw-background-color:green;" class="zw-style">hello world</span></p>"`;

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

@@ -133,4 +133,4 @@ Object {
 }
 `;
 
-exports[`rendering should render html 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-font-color:green;\\" class=\\"zw-style\\">hello world</span></p>"`;
+exports[`rendering should render html 1`] = `"<p class="zw-style"><span style="--zw-font-color:green;" class="zw-style">hello world</span></p>"`;

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

@@ -19,6 +19,12 @@ Object {
               },
               "type": "font_weight",
             },
+            Object {
+              "attrs": Object {
+                "italic": false,
+              },
+              "type": "font_style",
+            },
           ],
           "text": "hello world",
           "type": "text",
@@ -44,6 +50,12 @@ Object {
               },
               "type": "font_family",
             },
+            Object {
+              "attrs": Object {
+                "italic": false,
+              },
+              "type": "font_style",
+            },
           ],
           "text": "hello world",
           "type": "text",
@@ -143,6 +155,12 @@ Object {
               },
               "type": "font_weight",
             },
+            Object {
+              "attrs": Object {
+                "italic": false,
+              },
+              "type": "font_style",
+            },
           ],
           "text": "hello world",
           "type": "text",
@@ -333,4 +351,4 @@ Object {
 }
 `;
 
-exports[`rendering should render html 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-font-family:&quot;Bungee&quot;;\\" class=\\"zw-style\\">hello world</span></p>"`;
+exports[`rendering should render html 1`] = `"<p class="zw-style"><span style="--zw-font-family:&quot;Bungee&quot;;" class="zw-style">hello world</span></p>"`;

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

@@ -265,6 +265,6 @@ Object {
 }
 `;
 
-exports[`rendering should render all devices 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-font-size-mobile:12px;--zw-font-size-tablet:14px;--zw-font-size-desktop:16px;\\" class=\\"zw-style\\">hello world</span></p>"`;
+exports[`rendering should render all devices 1`] = `"<p class="zw-style"><span style="--zw-font-size-mobile:12px;--zw-font-size-tablet:14px;--zw-font-size-desktop:16px;" class="zw-style">hello world</span></p>"`;
 
-exports[`rendering should render only desktop 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-font-size-desktop:14px;\\" class=\\"zw-style\\">hello world</span></p>"`;
+exports[`rendering should render only desktop 1`] = `"<p class="zw-style"><span style="--zw-font-size-desktop:14px;" class="zw-style">hello world</span></p>"`;

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

@@ -31,6 +31,14 @@ Object {
     Object {
       "content": Array [
         Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "italic": false,
+              },
+              "type": "font_style",
+            },
+          ],
           "text": "hello world",
           "type": "text",
         },
@@ -48,6 +56,14 @@ Object {
     Object {
       "content": Array [
         Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "italic": false,
+              },
+              "type": "font_style",
+            },
+          ],
           "text": "hello world",
           "type": "text",
         },
@@ -225,4 +241,4 @@ Object {
 }
 `;
 
-exports[`rendering should render html 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-font-style:italic;\\" class=\\"zw-style\\">hello world</span></p>"`;
+exports[`rendering should render html 1`] = `"<p class="zw-style"><span style="--zw-font-style:italic;" class="zw-style">hello world</span></p>"`;

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

@@ -332,4 +332,29 @@ Object {
 }
 `;
 
-exports[`rendering should render html 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-font-weight:700;\\" class=\\"zw-style\\">hello world</span></p>"`;
+exports[`parsing html should parse style shorthand 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "700",
+              },
+              "type": "font_weight",
+            },
+          ],
+          "text": "test",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`rendering should render html 1`] = `"<p class="zw-style"><span style="--zw-font-weight:700;" class="zw-style">hello world</span></p>"`;

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

@@ -140,6 +140,6 @@ Object {
 }
 `;
 
-exports[`rendering should render all devices 1`] = `"<p class=\\"zw-style\\" style=\\"--zw-line-height-mobile:1.21;--zw-line-height-tablet:1.4;--zw-line-height-desktop:1.6;\\">hello world</p>"`;
+exports[`rendering should render all devices 1`] = `"<p class="zw-style" style="--zw-line-height-mobile:1.21;--zw-line-height-tablet:1.4;--zw-line-height-desktop:1.6;">hello world</p>"`;
 
-exports[`rendering should render only desktop 1`] = `"<p class=\\"zw-style\\" style=\\"--zw-line-height-desktop:1.3;\\">hello world</p>"`;
+exports[`rendering should render only desktop 1`] = `"<p class="zw-style" style="--zw-line-height-desktop:1.3;">hello world</p>"`;

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

@@ -64,6 +64,6 @@ Object {
 }
 `;
 
-exports[`render html should not render empty 1`] = `"<p class=\\"zw-style\\">lorem ipsum</p>"`;
+exports[`render html should not render empty 1`] = `"<p class="zw-style">lorem ipsum</p>"`;
 
-exports[`render html should render value 1`] = `"<p class=\\"zw-style\\" style=\\"--zw-margin:10px;\\">lorem ipsum</p>"`;
+exports[`render html should render value 1`] = `"<p class="zw-style" style="--zw-margin:10px;">lorem ipsum</p>"`;

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

@@ -241,6 +241,26 @@ Object {
 }
 `;
 
+exports[`get preset should get setting from link if selected 1`] = `
+Object {
+  "common": Object {
+    "font_size": "20",
+    "font_style": "italic",
+    "text_decoration": "underline",
+  },
+  "desktop": Object {
+    "font_size": "16",
+  },
+  "id": "regular-1",
+  "mobile": Object {
+    "font_size": "12",
+  },
+  "tablet": Object {
+    "font_size": "14",
+  },
+}
+`;
+
 exports[`parsing html should get by fallback class 1`] = `
 Object {
   "content": Array [
@@ -472,8 +492,8 @@ Object {
 }
 `;
 
-exports[`render preset styles should render node without preset 1`] = `"<p class=\\"zw-style\\">test</p>"`;
+exports[`render preset styles should render node without preset 1`] = `"<p class="zw-style">test</p>"`;
 
-exports[`render preset styles should render preset class 1`] = `"<p class=\\"zw-style zw ts-regular-1\\">test</p>"`;
+exports[`render preset styles should render preset class 1`] = `"<p class="zw-style zw ts-regular-1">test</p>"`;
 
 exports[`render preset styles should render styles 1`] = `" .zw.ts-regular-1 { --zw-preset-font-weight: var(--common-regular-1-font-weight, inherit); --zw-preset-mobile-font-size: var(--mobile-regular-1-font-size, inherit); --zw-preset-tablet-font-size: var(--tablet-regular-1-font-size, inherit); --zw-preset-desktop-font-size: var(--desktop-regular-1-font-size, inherit); }"`;

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

@@ -26,49 +26,6 @@ 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 [
@@ -586,8 +543,8 @@ Object {
 }
 `;
 
-exports[`rendering should render both 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-text-decoration:underline line-through;\\" class=\\"zw-style\\">hello world</span></p>"`;
+exports[`rendering should render both 1`] = `"<p class="zw-style"><span style="--zw-text-decoration:underline line-through;" class="zw-style">hello world</span></p>"`;
 
-exports[`rendering should render strike through only 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-text-decoration:line-through;\\" class=\\"zw-style\\">hello world</span></p>"`;
+exports[`rendering should render strike through only 1`] = `"<p class="zw-style"><span style="--zw-text-decoration:line-through;" class="zw-style">hello world</span></p>"`;
 
-exports[`rendering should render underline only 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-text-decoration:underline;\\" class=\\"zw-style\\">hello world</span></p>"`;
+exports[`rendering should render underline only 1`] = `"<p class="zw-style"><span style="--zw-text-decoration:underline;" class="zw-style">hello world</span></p>"`;