@zipify/wysiwyg 1.0.0-dev.1

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

@@ -0,0 +1,58 @@
+import { Font } from '../Font';
+
+describe('weights', () => {
+    test('should weight list', () => {
+        const font = new Font({
+            styles: ['400', '400i', '700', '700i']
+        });
+
+        expect(font.weights).toEqual(['400', '700']);
+    });
+
+    test('should find closest font weight', () => {
+        const font = new Font({ styles: ['400', '700'] });
+        const weight = font.findClosestWeight('500');
+
+        expect(weight).toEqual('400');
+    });
+
+    test('should find closest font weight from upper side', () => {
+        const font = new Font({ styles: ['400', '700'] });
+        const weight = font.findClosestWeight('900');
+
+        expect(weight).toEqual('700');
+    });
+
+    test('should find closest font weight from lower side', () => {
+        const font = new Font({ styles: ['400', '700'] });
+        const weight = font.findClosestWeight('200');
+
+        expect(weight).toEqual('400');
+    });
+});
+
+describe('style checks', () => {
+    test('should detect if weight supported', () => {
+        const font = new Font({ styles: ['400', '400i'] });
+
+        expect(font.isWeightSupported('400')).toBe(true);
+    });
+
+    test('should detect if weight not supported', () => {
+        const font = new Font({ styles: ['400', '700i'] });
+
+        expect(font.isWeightSupported('700')).toBe(false);
+    });
+
+    test('should detect if italic supported', () => {
+        const font = new Font({ styles: ['400', '400i'] });
+
+        expect(font.isItalicSupported('400')).toBe(true);
+    });
+
+    test('should detect if weight not supported', () => {
+        const font = new Font({ styles: ['400', '700'] });
+
+        expect(font.isItalicSupported('700')).toBe(false);
+    });
+});

package/lib/models/index.js

@@ -0,0 +1 @@
+export { Font } from './Font';

package/lib/services/FavoriteColors.js

@@ -0,0 +1,6 @@
+export class FavoriteColors {
+    constructor({ listRef, triggerUpdate }) {
+        this.listRef = listRef;
+        this.triggerUpdate = triggerUpdate;
+    }
+}

package/lib/services/JsonSerializer.js

@@ -0,0 +1,15 @@
+export class JsonSerializer {
+    static decode(text) {
+        try {
+            return JSON.parse(text);
+        } catch (error) {
+            // eslint-disable-next-line no-console
+            console.error(error);
+            return null;
+        }
+    }
+
+    static encode(json) {
+        return JSON.stringify(json);
+    }
+}

package/lib/services/Storage.js

@@ -0,0 +1,49 @@
+import { JsonSerializer } from './JsonSerializer';
+
+export class Storage {
+    constructor(storage) {
+        this.nativeStorage = storage;
+        this.KEY_PREFIX = 'zp.';
+    }
+
+    makeKey(key) {
+        return this.KEY_PREFIX + key;
+    }
+
+    setItem(key, value) {
+        const json = JsonSerializer.encode(value);
+
+        this.accessToStorage((storage) => storage.setItem(this.makeKey(key), json));
+    }
+
+    getItem(key) {
+        const json = this._getItemFromStorage(key);
+
+        return JsonSerializer.decode(json);
+    }
+
+    removeItem(key) {
+        this.accessToStorage((storage) => storage.removeItem(this.makeKey(key)));
+    }
+
+    hasItem(key) {
+        return !!this._getItemFromStorage(key);
+    }
+
+    accessToStorage(action) {
+        try {
+            return action(this.nativeStorage);
+        } catch (error) {
+            this.onPrivateModeEnabled(error);
+        }
+    }
+
+    _getItemFromStorage(key) {
+        return this.accessToStorage((storage) => storage.getItem(this.makeKey(key)));
+    }
+
+    onPrivateModeEnabled(error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+    }
+}

package/lib/services/index.js

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

package/lib/styles/content.css

@@ -0,0 +1,39 @@
+.zw-wysiwyg [contenteditable] {
+    outline: 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));
+    color: var(--zw-font-color, var(--zw-preset-color));
+    font-style: var(--zw-font-style, var(--zw-preset-font-style));
+    text-decoration: var(--zw-text-decoration, var(--zw-preset-text-decoration));
+    background-color: var(--zw-background-color, var(--zw-preset-background-color));
+}
+
+@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));
+    }
+}
+
+@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));
+    }
+}
+
+@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));
+    }
+}

package/lib/styles/helpers/common.css

@@ -0,0 +1,3 @@
+.zw-position--relative {
+    position: relative;
+}

package/lib/styles/helpers/offsets.css

@@ -0,0 +1,3 @@
+.zw-margin-bottom--xs {
+    margin-bottom: var(--zw-offset-xs);
+}

package/lib/styles/helpers/text.css

@@ -0,0 +1,6 @@
+.zw-text--truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+}

package/lib/styles/main.css

@@ -0,0 +1,5 @@
+@import "./variables.css";
+@import "./content.css";
+@import "./helpers/text.css";
+@import "./helpers/common.css";
+@import "./helpers/offsets.css";

package/lib/styles/variables.css

@@ -0,0 +1,57 @@
+.zw-wysiwyg {
+    --zw-color-n5: 13, 13, 13;      /* #0D0D0D; */
+    --zw-color-n15: 38, 38, 38;     /* #262626; */
+    --zw-color-n20: 59, 59, 59;     /* #3B3B3B; */
+    --zw-color-n30: 77, 77, 77;     /* #4D4D4D; */
+    --zw-color-n60: 153, 153, 153;  /* #999999 */
+    --zw-color-n70: 179, 179, 179;  /* #B3B3B3 */
+    --zw-color-n80: 196, 196, 196;  /* #C4C4C4 */
+    --zw-color-n85: 217, 217, 217;  /* #D9D9D9 */
+    --zw-color-n90: 230, 230, 230;  /* #E6E6E6 */
+    --zw-color-black: 0, 0, 0;
+    --zw-color-white: 255, 255, 255;
+
+    --zw-offset-xxs: 4px;
+    --zw-offset-xs: 8px;
+    --zw-offset-xsm: 12px;
+    --zw-offset-sm: 16px;
+
+    --zw-font-weight-thin: 400;
+    --zw-font-weight-semibold: 500;
+
+    --zw-font-size-xxs: 12px;
+    --zw-font-size-xs: 14px;
+
+    --zw-line-height-xxs: 1.21;
+    --zw-line-height-md: 1.72;
+}
+
+/*
+$builder-N5: #0D0D0D;
+$builder-N10: #1A1A1A;
+$builder-N15: #262626;
+$builder-N20: #3B3B3B;
+$builder-N30: #4D4D4D;
+$builder-N40: #666;
+$builder-N50: #808080;
+$builder-N60: #999;
+$builder-N70: #B3B3B3;
+$builder-N80: #C4C4C4;
+$builder-N85: #D9D9D9;
+$builder-N90: #E6E6E6;
+$builder-N94: #F0F0F0;
+$builder-N96: #F5F5F5;
+$builder-N98: #FAFAFA;
+
+$font-size-xxs: 12px;
+$font-size-xs:  14px;
+$font-size-sm:  16px;
+$font-size-md:  18px;
+$font-size-lmd: 20px;
+$font-size-lg:  24px;
+
+$font-height--xxs: 1.2;
+$font-height--xs: 1.33;
+$font-height--sm: 1.43;
+$font-height--md: 1.72;
+ */

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

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render settings should render multiple settings 1`] = `
+Array [
+  "span",
+  Object {
+    "class": "zw-style",
+    "style": "--zw-mobile-font-size: 12px; --zw-tablet-font-size: 14px; --zw-desktop-font-size: 16px;",
+  },
+  0,
+]
+`;
+
+exports[`render settings should render not render empty values 1`] = `
+Array [
+  "span",
+  Object {
+    "class": "zw-style",
+    "style": "--zw-desktop-font-size: 16px;",
+  },
+  0,
+]
+`;
+
+exports[`render settings should render single setting 1`] = `
+Array [
+  "span",
+  Object {
+    "class": "zw-style",
+    "style": "--zw-font-size: 12px;",
+  },
+  0,
+]
+`;
+
+exports[`render settings should render unwrapped styles 1`] = `
+Object {
+  "style": "--zw-desktop-font-size: 16px;",
+}
+`;

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

@@ -0,0 +1,11 @@
+import { capitalize } from '../capitalize';
+
+describe('capitalize text', () => {
+    test('should capitalize first letters', () => {
+        expect(capitalize('hello world')).toBe('Hello World');
+    });
+
+    test('should lowercase non-first letters', () => {
+        expect(capitalize('HELLO WORLD')).toBe('Hello World');
+    });
+});

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

@@ -0,0 +1,39 @@
+import { renderInlineSetting, renderMark } from '../renderInlineSetting';
+
+describe('render settings', () => {
+    test('should render single setting', () => {
+        const result = renderMark({ font_size: '12px' });
+
+        expect(result).toMatchSnapshot();
+    });
+
+    test('should render multiple settings', () => {
+        const result = renderMark({
+            mobile_font_size: '12px',
+            tablet_font_size: '14px',
+            desktop_font_size: '16px'
+        });
+
+        expect(result).toMatchSnapshot();
+    });
+
+    test('should render not render empty values', () => {
+        const result = renderMark({
+            mobile_font_size: '',
+            tablet_font_size: null,
+            desktop_font_size: '16px'
+        });
+
+        expect(result).toMatchSnapshot();
+    });
+
+    test('should render unwrapped styles', () => {
+        const result = renderInlineSetting({
+            mobile_font_size: '',
+            tablet_font_size: null,
+            desktop_font_size: '16px'
+        });
+
+        expect(result).toMatchSnapshot();
+    });
+});

package/lib/utils/capitalize.js

@@ -0,0 +1,3 @@
+export function capitalize(text) {
+    return text.toLowerCase().replace(/(?:^|\s)\S/g, (letter) => letter.toUpperCase());
+}

package/lib/utils/createCommand.js

@@ -0,0 +1,3 @@
+export function createCommand(exec) {
+    return (...args) => (context) => exec(context, ...args);
+}

package/lib/utils/createKeyboardShortcut.js

@@ -0,0 +1,6 @@
+export function createKeyboardShortcut(command, ...args) {
+    return ({ editor }) => {
+        editor.commands[command](...args);
+        return true;
+    };
+}

package/lib/utils/index.js

@@ -0,0 +1,4 @@
+export { createCommand } from './createCommand';
+export { renderInlineSetting, renderMark } from './renderInlineSetting';
+export { capitalize } from './capitalize';
+export { createKeyboardShortcut } from './createKeyboardShortcut';

package/lib/utils/renderInlineSetting.js

@@ -0,0 +1,17 @@
+export function renderInlineSetting(setting) {
+    const style = Object.entries(setting).reduce((css, [name, value]) => {
+        if (!value) return css;
+
+        const property = name.replace(/_/g, '-');
+
+        return `${css} --zw-${property}: ${value};`.trimStart();
+    }, '');
+
+    return style ? { style } : null;
+}
+
+export function renderMark(setting) {
+    const attrs = renderInlineSetting(setting);
+
+    return ['span', attrs ? { ...attrs, class: 'zw-style' } : null, 0];
+}

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@zipify/wysiwyg",
+  "version": "1.0.0-dev.1",
+  "description": "Zipify modification of TipTap text editor",
+  "main": "lib/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ZipifyApps/zipify-wswg.git"
+  },
+  "author": "Taras Turchenko <taras.turchenko@masterofcode.com>",
+  "license": "ISC",
+  "homepage": "https://github.com/ZipifyApps/zipify-wswg#readme",
+  "bugs": {
+    "url": "https://github.com/ZipifyApps/zipify-wswg/issues"
+  },
+  "scripts": {
+    "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"
+  },
+  "dependencies": {
+    "@popperjs/core": "^2.11.5",
+    "@tiptap/core": "^2.0.0-beta.182",
+    "@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-list-item": "^2.0.0-beta.23",
+    "@tiptap/extension-paragraph": "^2.0.0-beta.26",
+    "@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": "*",
+    "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",
+    "@vue/test-utils": "^1.3.0",
+    "@vue/vue2-jest": "^28.0.1",
+    "babel-jest": "^28.1.2",
+    "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",
+    "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",
+    "postcss-html": "^1.5.0",
+    "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",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.9.3",
+    "zipify-colorpicker": "^1.0.28"
+  }
+}