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

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

@@ -0,0 +1,74 @@
+import { ContentNormalizer } from '../ContentNormalizer';
+import { NodeFactory } from '../../__tests__/utils';
+
+describe('normalize text content', () => {
+    test('should ignore json content', () => {
+        const content = NodeFactory.doc([NodeFactory.paragraph('Test')]);
+
+        expect(ContentNormalizer.normalize(content)).toBe(content);
+    });
+
+    test('should flat structure', () => {
+        const input = '<p style="text-align: center; color: rgb(255, 255, 255);"><span style="background-color: rgb(255, 0, 0);">lore<span style="color: rgb(0, 0, 0);">m ip</span>sum</span></p>';
+        const output = '<p style="text-align: center;">' +
+            '<span style="background-color: rgb(255, 0, 0); color: rgb(255, 255, 255);">lore</span>' +
+            '<span style="color: rgb(0, 0, 0); background-color: rgb(255, 0, 0);">m ip</span>' +
+            '<span style="background-color: rgb(255, 0, 0); color: rgb(255, 255, 255);">sum</span>' +
+        '</p>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should move styles from paragraph to text', () => {
+        const input = '<p style="background-color: red;">lorem ipsum</p>';
+        const output = '<p><span style="background-color: red;">lorem ipsum</span></p>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should move styles from paragraph to unstyled text', () => {
+        const input = '<p style="background-color: red;"><span style="background-color: #000;">lorem</span> ipsum <span style="color: white;">one</span></p>';
+        const output = '<p>' +
+            '<span style="background-color: #000;">lorem</span>' +
+            '<span style="background-color: red;"> ipsum </span>' +
+            '<span style="color: white; background-color: red;">one</span' +
+        '></p>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should wrap list content in paragraph', () => {
+        const input = '<ul><li style="line-height: 2;">lorem impsum</li></ul>';
+        const output = '<ul><li><p style="line-height: 2;"><span>lorem impsum</span></p></li></ul>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should keep order in list nodes', () => {
+        const input = '<ul><li style="line-height: 2;"><span style="font-weight: 700">lorem</span> impsum</li></ul>';
+        const output = '<ul>' +
+            '<li>' +
+                '<p style="line-height: 2;"><span style="font-weight: 700">lorem</span><span> impsum</span></p>' +
+            '</li>' +
+        '</ul>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should wrap non paragraph list content', () => {
+        const input = '<ul>' +
+            '<li style="line-height: 2;">' +
+                '<span style="font-weight: 700">lorem</span> impsum' +
+                '<p>paragraph text</p>' +
+            '</li>' +
+        '</ul>';
+        const output = '<ul>' +
+            '<li>' +
+            '<p style="line-height: 2;"><span style="font-weight: 700">lorem</span><span> impsum</span></p>' +
+            '<p style="line-height: 2;"><span>paragraph text</span></p>' +
+            '</li>' +
+        '</ul>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+});

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

@@ -0,0 +1,20 @@
+import { ref } from 'vue';
+import { FavoriteColors } from '../FavoriteColors';
+
+function createService({ colors, onUpdate }) {
+    return new FavoriteColors({
+        listRef: ref(colors ?? []),
+        triggerUpdate: onUpdate
+    });
+}
+
+describe('trigger update', () => {
+    test('should trigger colors update', () => {
+        const onUpdate = jest.fn();
+        const service = createService({ onUpdate });
+
+        service.triggerUpdate(['red']);
+
+        expect(onUpdate).toHaveBeenCalledWith(['red']);
+    });
+});

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

@@ -0,0 +1,23 @@
+import { JsonSerializer } from '../JsonSerializer';
+
+describe('decode', () => {
+    test('should decode json', () => {
+        const json = JsonSerializer.decode('{ "test": 1 }');
+
+        expect(json).toEqual({ test: 1 });
+    });
+
+    test('should return null on error', () => {
+        const json = JsonSerializer.decode('{ "tes');
+
+        expect(json).toBe(null);
+    });
+});
+
+describe('encode', () => {
+    test('should encode object to json', () => {
+        const json = JsonSerializer.encode({ test: 1 });
+
+        expect(json).toBe('{"test":1}');
+    });
+});

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,5 @@
 export { JsonSerializer } from './JsonSerializer';
 export { Storage } from './Storage';
 export { FavoriteColors } from './FavoriteColors';
+export { ContentNormalizer } from './ContentNormalizer';
+export { ContextWindow } from './ContextWidnow';

package/lib/styles/content.css

@@ -2,6 +2,14 @@
     outline: none;
 }
 
+.zw-wysiwyg__placeholder:first-child:last-child::before {
+    content: attr(data-placeholder);
+    color: rgb(var(--zw-color-n70));
+    float: left;
+    height: 0;
+    pointer-events: none;
+}
+
 .zw-style {
     font-weight: var(--zw-font-weight, var(--zw-preset-font-weight));
     font-family: var(--zw-font-family, var(--zw-preset-font-family));
@@ -14,26 +22,105 @@
 @media (min-width: 1200px) {
 
     .zw-style {
-        font-size: var(--zw-desktop-font-size, var(--zw-preset-desktop-font-size));
-        text-align: var(--zw-desktop-text-align, var(--zw-preset-desktop-text-align));
-        line-height: var(--zw-desktop-line-height, var(--zw-preset-desktop-line-height));
+        font-size: var(--zw-font-size-desktop, var(--zw-preset-desktop-font-size));
+        text-align: var(--zw-text-align-desktop, var(--zw-preset-desktop-text-align));
+        line-height: var(--zw-line-height-desktop, var(--zw-preset-desktop-line-height));
     }
 }
 
 @media (min-width: 769px) and (max-width: 1199.98px) {
 
     .zw-style {
-        font-size: var(--zw-tablet-font-size, var(--zw-preset-tablet-font-size));
-        text-align: var(--zw-tablet-text-align, var(--zw-preset-tablet-text-align));
-        line-height: var(--zw-tablet-line-height, var(--zw-preset-tablet-line-height));
+        font-size: var(--zw-font-size-tablet, var(--zw-preset-tablet-font-size));
+        text-align: var(--zw-text-align-tablet, var(--zw-preset-tablet-text-align));
+        line-height: var(--zw-line-height-tablet, var(--zw-preset-tablet-line-height));
     }
 }
 
 @media (max-width: 768.98px) {
 
     .zw-style {
-        font-size: var(--zw-mobile-font-size, var(--zw-preset-mobile-font-size));
-        text-align: var(--zw-mobile-text-align, var(--zw-preset-mobile-text-align));
-        line-height: var(--zw-mobile-line-height, var(--zw-preset-mobile-line-height));
+        font-size: var(--zw-font-size-mobile, var(--zw-preset-mobile-font-size));
+        text-align: var(--zw-text-align-mobile, var(--zw-preset-mobile-text-align));
+        line-height: var(--zw-line-height-mobile, var(--zw-preset-mobile-line-height));
     }
 }
+
+/* ProseMirror styles */
+
+.ProseMirror {
+    position: relative;
+}
+
+.ProseMirror {
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    white-space: break-spaces;
+    -webkit-font-variant-ligatures: none;
+    font-variant-ligatures: none;
+    font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
+}
+
+.ProseMirror [contenteditable="false"] {
+    white-space: normal;
+}
+
+.ProseMirror [contenteditable="false"] [contenteditable="true"] {
+    white-space: pre-wrap;
+}
+
+.ProseMirror pre {
+    white-space: pre-wrap;
+}
+
+img.ProseMirror-separator {
+    display: inline !important;
+    border: none !important;
+    margin: 0 !important;
+    width: 1px !important;
+    height: 1px !important;
+}
+
+.ProseMirror-gapcursor {
+    display: none;
+    pointer-events: none;
+    position: absolute;
+    margin: 0;
+}
+
+.ProseMirror-gapcursor::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: -2px;
+    width: 20px;
+    border-top: 1px solid #000;
+    animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
+}
+
+@keyframes ProseMirror-cursor-blink {
+
+    to {
+        visibility: hidden;
+    }
+}
+
+.ProseMirror-hideselection *::selection {
+    background: transparent;
+}
+
+.ProseMirror-hideselection *::-moz-selection {
+    background: transparent;
+}
+
+.ProseMirror-hideselection * {
+    caret-color: transparent;
+}
+
+.ProseMirror-focused .ProseMirror-gapcursor {
+    display: block;
+}
+
+.tippy-box[data-animation=fade][data-state=hidden] {
+    opacity: 0
+}

package/lib/styles/helpers/offsets.css

@@ -1,3 +1,19 @@
+.zw-margin-bottom--xxs {
+    margin-bottom: var(--zw-offset-xxs);
+}
+
 .zw-margin-bottom--xs {
     margin-bottom: var(--zw-offset-xs);
 }
+
+.zw-margin-bottom--sm {
+    margin-bottom: var(--zw-offset-sm);
+}
+
+.zw-margin-bottom--md {
+    margin-bottom: var(--zw-offset-md);
+}
+
+.zw-margin-right--xs {
+    margin-right: var(--zw-offset-xs);
+}

package/lib/styles/variables.css

@@ -8,13 +8,17 @@
     --zw-color-n80: 196, 196, 196;  /* #C4C4C4 */
     --zw-color-n85: 217, 217, 217;  /* #D9D9D9 */
     --zw-color-n90: 230, 230, 230;  /* #E6E6E6 */
+    --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-offset-xxs: 4px;
     --zw-offset-xs: 8px;
     --zw-offset-xsm: 12px;
     --zw-offset-sm: 16px;
+    --zw-offset-md: 24px;
 
     --zw-font-weight-thin: 400;
     --zw-font-weight-semibold: 500;
@@ -42,6 +46,8 @@ $builder-N90: #E6E6E6;
 $builder-N94: #F0F0F0;
 $builder-N96: #F5F5F5;
 $builder-N98: #FAFAFA;
+$builder-N200: #C2C8D1;
+$builder-R50: #EA3A3A;
 
 $font-size-xxs: 12px;
 $font-size-xs:  14px;

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

@@ -5,7 +5,7 @@ Array [
   "span",
   Object {
     "class": "zw-style",
-    "style": "--zw-mobile-font-size: 12px; --zw-tablet-font-size: 14px; --zw-desktop-font-size: 16px;",
+    "style": "--zw-mobile-font-size:12px;--zw-tablet-font-size:14px;--zw-desktop-font-size:16px;",
   },
   0,
 ]
@@ -16,7 +16,7 @@ Array [
   "span",
   Object {
     "class": "zw-style",
-    "style": "--zw-desktop-font-size: 16px;",
+    "style": "--zw-desktop-font-size:16px;",
   },
   0,
 ]
@@ -27,7 +27,7 @@ Array [
   "span",
   Object {
     "class": "zw-style",
-    "style": "--zw-font-size: 12px;",
+    "style": "--zw-font-size:12px;",
   },
   0,
 ]
@@ -35,6 +35,6 @@ Array [
 
 exports[`render settings should render unwrapped styles 1`] = `
 Object {
-  "style": "--zw-desktop-font-size: 16px;",
+  "style": "--zw-desktop-font-size:16px;",
 }
 `;

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/importIcon.js

@@ -0,0 +1,13 @@
+const modules = import.meta.glob('../assets/icons/*.svg', { as: 'raw', eager: true });
+
+export function importIcon(name) {
+    const icon = modules[`../assets/icons/${name}.svg`];
+
+    if (!icon) {
+        // eslint-disable-next-line no-console
+        console.warn(`[WSWG] Cannot resolve ${name} icon`);
+        return '';
+    }
+
+    return icon;
+}

package/lib/utils/index.js

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

package/lib/utils/renderInlineSetting.js

@@ -4,7 +4,7 @@ export function renderInlineSetting(setting) {
 
         const property = name.replace(/_/g, '-');
 
-        return `${css} --zw-${property}: ${value};`.trimStart();
+        return `${css}--zw-${property}:${value};`;
     }, '');
 
     return style ? { style } : null;
@@ -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,8 +1,8 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "1.0.0-dev.4",
+  "version": "1.0.0-dev.42",
   "description": "Zipify modification of TipTap text editor",
-  "main": "lib/index.js",
+  "main": "dist/wysiwyg.mjs",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ZipifyApps/ZipifyWysiwyg.git"
@@ -14,13 +14,14 @@
     "url": "https://github.com/ZipifyApps/ZipifyWysiwyg/issues"
   },
   "scripts": {
+    "lib:build": "vite build --config ./config/vite/lib.config.js",
     "example:start": "NODE_ENV=development webpack serve --config ./config/webpack/example.config.js",
     "example:build": "NODE_ENV=production webpack --config ./config/webpack/example.config.js",
     "test:unit": "jest .",
     "optimize-svg": "svgo --config ./config/svgo.js",
     "gzip": "gzipper compress",
     "prepare": "husky install",
-    "release": "export $(cat ./.env | xargs) && release-it"
+    "release": "export $(cat ./.env | xargs) && npm run lib:build && release-it"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.5",
@@ -28,47 +29,51 @@
     "@tiptap/extension-document": "^2.0.0-beta.17",
     "@tiptap/extension-heading": "^2.0.0-beta.29",
     "@tiptap/extension-history": "^2.0.0-beta.26",
+    "@tiptap/extension-link": "^2.0.0-beta.43",
     "@tiptap/extension-list-item": "^2.0.0-beta.23",
     "@tiptap/extension-paragraph": "^2.0.0-beta.26",
+    "@tiptap/extension-placeholder": "^2.0.0-beta.53",
     "@tiptap/extension-superscript": "^2.0.0-beta.13",
     "@tiptap/extension-text": "^2.0.0-beta.17",
     "@tiptap/vue-2": "^2.0.0-beta.84",
     "simplebar": "^5.3.8"
   },
   "peerDependencies": {
-    "@vue/composition-api": "*",
+    "vue": "2.7.*",
     "zipify-colorpicker": "*"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.6",
-    "@babel/eslint-parser": "^7.18.2",
-    "@babel/plugin-transform-runtime": "^7.18.6",
-    "@babel/preset-env": "^7.18.6",
-    "@babel/runtime": "^7.18.6",
-    "@vue/composition-api": "^1.7.0",
+    "@babel/core": "^7.18.9",
+    "@babel/eslint-parser": "^7.18.9",
+    "@babel/plugin-transform-runtime": "^7.18.9",
+    "@babel/preset-env": "^7.18.9",
+    "@babel/runtime": "^7.18.9",
     "@vue/test-utils": "^1.3.0",
     "@vue/vue2-jest": "^28.0.1",
-    "babel-jest": "^28.1.2",
+    "babel-jest": "^28.1.3",
     "babel-loader": "^8.2.5",
     "css-loader": "^6.7.1",
     "eslint": "^8.20.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-vue": "^9.2.0",
+    "eslint-plugin-vue": "^9.3.0",
     "gzipper": "^7.1.0",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.1",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
     "lint-staged": "^13.0.3",
+    "mini-css-extract-plugin": "^2.6.1",
     "postcss-html": "^1.5.0",
     "release-it": "^15.1.2",
     "style-loader": "^3.3.1",
     "stylelint": "^14.9.1",
     "svgo": "^2.8.0",
-    "vue": "^2.6.14",
-    "vue-loader": "^15.9.8",
-    "vue-template-compiler": "^2.6.14",
-    "webpack": "^5.73.0",
+    "vite": "^3.0.4",
+    "vite-plugin-vue2": "^2.0.2",
+    "vue": "^2.7.8",
+    "vue-loader": "^15.10.0",
+    "vue-template-compiler": "^2.7.8",
+    "webpack": "^5.74.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.9.3",