@zipify/wysiwyg 1.0.0-dev.4 → 1.0.0-dev.5

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

@@ -0,0 +1,79 @@
+import { Storage } from '../Storage';
+
+const createNativeStorage = (data) => ({
+    data: data ?? {},
+    setItem: jest.fn(function (key, data) {
+        this.data[key] = data;
+    }),
+    getItem: jest.fn(function (key) {
+        return this.data[key] || null;
+    })
+});
+
+function createStorage({ storage }) {
+    return new Storage(storage ?? createNativeStorage());
+}
+
+describe('get item', () => {
+    test('should return null if no data', () => {
+        const storage = createStorage({
+            storage: createNativeStorage({})
+        });
+
+        expect(storage.getItem('test')).toBe(null);
+    });
+
+    test('should parse json', () => {
+        const storage = createStorage({
+            storage: createNativeStorage({
+                'zp.test': '{ "test": 1 }'
+            })
+        });
+
+        expect(storage.getItem('test')).toEqual({ test: 1 });
+    });
+
+    test('should handle error in private mode', () => {
+        const nativeStorage = createNativeStorage({});
+        const storage = createStorage({ storage: nativeStorage });
+        const error = new Error('private mode');
+
+        nativeStorage.getItem.mockImplementation(() => { throw error; });
+        storage.getItem('test');
+
+        // eslint-disable-next-line no-console
+        expect(console.error).toHaveBeenCalledWith(error);
+    });
+});
+
+describe('set item', () => {
+    test('should set item to storage', () => {
+        const nativeStorage = createNativeStorage({});
+        const storage = createStorage({ storage: nativeStorage });
+
+        storage.setItem('test', 'hello');
+
+        expect(nativeStorage.data).toEqual({ 'zp.test': '"hello"' });
+    });
+
+    test('should stringify json', () => {
+        const nativeStorage = createNativeStorage({});
+        const storage = createStorage({ storage: nativeStorage });
+
+        storage.setItem('test', { test: 1 });
+
+        expect(nativeStorage.data).toEqual({ 'zp.test': '{"test":1}' });
+    });
+
+    test('should handle error in private mode', () => {
+        const nativeStorage = createNativeStorage({});
+        const storage = createStorage({ storage: nativeStorage });
+        const error = new Error('private mode');
+
+        nativeStorage.getItem.mockImplementation(() => { throw error; });
+        storage.setItem('test', 'test');
+
+        // eslint-disable-next-line no-console
+        expect(console.error).toHaveBeenCalledWith(error);
+    });
+});

package/lib/services/index.js

@@ -1,3 +1,4 @@
 export { JsonSerializer } from './JsonSerializer';
 export { Storage } from './Storage';
 export { FavoriteColors } from './FavoriteColors';
+export { ContentNormalizer } from './ContentNormalizer';

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

@@ -0,0 +1,19 @@
+import { convertColor } from '../convertColor';
+
+describe('convert color', () => {
+    test('should convert alias to color', () => {
+        expect(convertColor('red')).toBe('#FF0000');
+    });
+
+    test('should convert short hex to full', () => {
+        expect(convertColor('#F00')).toBe('#FF0000');
+    });
+
+    test('should convert short hex with alpha to rgba', () => {
+        expect(convertColor('#F003')).toBe('rgba(255, 0, 0, 20%)');
+    });
+
+    test('should convert rgba from float to percent', () => {
+        expect(convertColor('rgba(255, 0, 0, 0.2)')).toBe('rgba(255, 0, 0, 20%)');
+    });
+});

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

@@ -0,0 +1,25 @@
+import { createKeyboardShortcut } from '../createKeyboardShortcut';
+
+describe('create shortcut', () => {
+    test('should bind command', () => {
+        const editor = {
+            commands: { toggleBold: jest.fn() }
+        };
+        const shortcut = createKeyboardShortcut('toggleBold');
+
+        shortcut({ editor });
+
+        expect(editor.commands.toggleBold).toHaveBeenCalled();
+    });
+
+    test('should bind command with arguments', () => {
+        const editor = {
+            commands: { applyAlignment: jest.fn() }
+        };
+        const shortcut = createKeyboardShortcut('applyAlignment', 'left');
+
+        shortcut({ editor });
+
+        expect(editor.commands.applyAlignment).toHaveBeenCalledWith('left');
+    });
+});

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

@@ -27,6 +27,16 @@ describe('render settings', () => {
         expect(result).toMatchSnapshot();
     });
 
+    test('should render no attributes if all styles empty', () => {
+        const result = renderMark({
+            mobile_font_size: null,
+            tablet_font_size: null,
+            desktop_font_size: null
+        });
+
+        expect(result[1]).toEqual({});
+    });
+
     test('should render unwrapped styles', () => {
         const result = renderInlineSetting({
             mobile_font_size: '',
@@ -36,4 +46,20 @@ describe('render settings', () => {
 
         expect(result).toMatchSnapshot();
     });
+
+    test('should return null if no styles', () => {
+        const result = renderInlineSetting({});
+
+        expect(result).toBe(null);
+    });
+
+    test('should return null if all styles empty', () => {
+        const result = renderInlineSetting({
+            mobile_font_size: null,
+            tablet_font_size: null,
+            desktop_font_size: null
+        });
+
+        expect(result).toBe(null);
+    });
 });

package/lib/utils/convertColor.js

@@ -0,0 +1,7 @@
+import { ColorModel } from 'zipify-colorpicker';
+
+export function convertColor(raw) {
+    const model = ColorModel.create(raw);
+
+    return model.alpha === 1 ? model.toHexString() : model.toRgbaString();
+}

package/lib/utils/index.js

@@ -2,3 +2,4 @@ export { createCommand } from './createCommand';
 export { renderInlineSetting, renderMark } from './renderInlineSetting';
 export { capitalize } from './capitalize';
 export { createKeyboardShortcut } from './createKeyboardShortcut';
+export { convertColor } from './convertColor';

package/lib/utils/renderInlineSetting.js

@@ -13,5 +13,5 @@ export function renderInlineSetting(setting) {
 export function renderMark(setting) {
     const attrs = renderInlineSetting(setting);
 
-    return ['span', attrs ? { ...attrs, class: 'zw-style' } : null, 0];
+    return ['span', attrs ? { ...attrs, class: 'zw-style' } : {}, 0];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "1.0.0-dev.4",
+  "version": "1.0.0-dev.5",
   "description": "Zipify modification of TipTap text editor",
   "main": "lib/index.js",
   "repository": {