@zipify/wysiwyg 1.0.0-dev.1

package/.stylelintrc

@@ -0,0 +1,110 @@
+{
+  "rules": {
+    "at-rule-name-case": "lower",
+    "at-rule-name-space-after": "always-single-line",
+    "at-rule-semicolon-newline-after": "always",
+    "selector-type-case": "lower",
+    "block-closing-brace-newline-after": "always",
+    "selector-pseudo-element-colon-notation": "double",
+    "selector-pseudo-element-case": "lower",
+    "selector-max-specificity": "0,4,2",
+    "number-no-trailing-zeros": true,
+    "color-named": "never",
+    "color-hex-length": "short",
+    "color-no-invalid-hex": true,
+    "font-weight-notation": "numeric",
+    "function-calc-no-unspaced-operator": true,
+    "function-comma-newline-before": "never-multi-line",
+    "function-comma-space-before": "never-single-line",
+    "function-linear-gradient-no-nonstandard-direction": true,
+    "function-name-case": "lower",
+    "function-parentheses-space-inside": "never",
+    "function-url-no-scheme-relative": true,
+    "function-url-quotes": "always",
+    "function-whitespace-after": "always",
+    "string-no-newline": true,
+    "string-quotes": "double",
+    "time-min-milliseconds": 100,
+    "length-zero-no-unit": [
+      true,
+      { "ignore": ["custom-properties"] }
+    ],
+    "unit-case": "lower",
+    "value-keyword-case": [
+      "lower",
+      {
+        "ignoreKeywords": ["currentColor", "optimizeLegibility"]
+      }
+    ],
+    "value-no-vendor-prefix": true,
+    "max-empty-lines": 2,
+    "no-descending-specificity": true,
+    "no-empty-source": true,
+    "no-eol-whitespace": true,
+    "no-extra-semicolons": true,
+    "no-unknown-animations": true,
+    "declaration-colon-space-before": "never",
+    "declaration-colon-space-after": "always",
+    "block-no-empty": true,
+    "shorthand-property-no-redundant-values": true,
+    "block-opening-brace-newline-after": "always-multi-line",
+    "block-opening-brace-space-before": "always",
+    "block-opening-brace-space-after": "always-single-line",
+    "named-grid-areas-no-invalid": true,
+    "declaration-empty-line-before": [
+      "always",
+      {
+        "except": [
+          "after-declaration",
+          "first-nested"
+        ]
+      }
+    ],
+    "block-closing-brace-empty-line-before": "never",
+    "rule-empty-line-before": [
+      "always-multi-line"
+    ],
+    "at-rule-empty-line-before": [
+      "always",
+      {
+        "except": [
+          "blockless-after-same-name-blockless",
+          "first-nested"
+        ],
+        "ignore": [
+          "after-comment"
+        ]
+      }
+    ],
+    "at-rule-no-unknown": [
+      true,
+      {
+        "ignoreAtRules": [
+          "include",
+          "mixin",
+          "content",
+          "at-root"
+        ]
+      }
+    ],
+    "number-leading-zero": "always",
+    "unit-allowed-list": ["em", "rem", "px", "%", "s", "vh", "deg", "ms", "fr"],
+    "color-hex-case": "upper",
+    "max-nesting-depth": 3,
+    "indentation": [
+      4,
+      { "indentInsideParens": "twice" }
+    ],
+    "keyframe-block-no-duplicate-selectors": true
+  },
+  "overrides": [
+    {
+      "files": ["**/*.scss"],
+      "customSyntax": "postcss-scss"
+    },
+    {
+      "files": ["**/*.vue"],
+      "customSyntax": "postcss-html"
+    }
+  ]
+}

package/README.md

@@ -0,0 +1,61 @@
+# ZipifyWysiwyg
+
+Zipify modification of TipTap text editor
+
+## Usage
+1. Install library & dependencies
+```shell
+# if npm
+npm install @zipify/wysiwyg @vue/composition-api
+# if yarn
+yarn add @zipify/wysiwyg @vue/composition-api
+```
+2. Register plugins
+```js
+import Vue from 'vue';
+import VueCompositionAPI from '@vue/composition-api';
+
+Vue.use(VueCompositionAPI);
+```
+3. Use editor
+
+For more details see [example app](/example)
+```vue
+
+<template>
+  <Wysiwyg v-model="content" />
+</template>
+
+<script>
+import { Wysiwyg } from '@zipify/wysiwyg';
+
+export default {
+  components: { Wysiwyg },
+
+  data: () => ({
+    content: {
+      type: 'doc',
+      content: [...]
+    }
+  })
+}
+</script>
+```
+
+## Contribute
+1. Clone repository
+```shell
+git clone git@github.com:ZipifyApps/ZipifyWysiwyg.git
+```
+2. Install dependencies
+```shell
+npm install
+```
+3. Open example project
+```shell
+npm run example:start
+# Will be available on http://localhost:7777
+```
+4. Create new branch
+5. Add changes & tests
+6. Open pull request

package/babel.config.js

@@ -0,0 +1,15 @@
+module.exports = function(api) {
+    api.cache(true);
+
+    return {
+        presets: [
+            [
+                '@babel/preset-env',
+                { ignoreBrowserslistConfig: false }
+            ]
+        ],
+        plugins: [
+            '@babel/plugin-transform-runtime'
+        ]
+    };
+};

package/ci/example/deploy.sh

@@ -0,0 +1,25 @@
+#!/usr/bin/env bash
+
+export AWS_CONFIG_FILE=./ci/example/.aws-credentials
+
+function throw_error() {
+    echo -e "\033[0;31m \n\n$1\n\n";
+    exit;
+}
+
+if ! command -v aws &> /dev/null; then
+  throw_error 'AWS CLI not found. Download from https://aws.amazon.com/cli/'
+fi;
+
+if [ ! -f "$AWS_CONFIG_FILE" ]; then
+  throw_error 'AWS credentials config not found'
+fi;
+
+echo Building... && \
+rm -rf ./example/dist && \
+npm run example:build > /dev/null && \
+npx --yes gzipper compress ./example/dist > /dev/null && \
+echo Uploading... && \
+BRANCH_NAME=$(git branch --show-current) && \
+aws s3 sync --acl public-read --cache-control 'max-age=0,no-cache,no-store,must-revalidate' "./example/dist" "s3://zipify-wysiwyg/$BRANCH_NAME" > /dev/null && \
+echo "on https://zipify-wysiwyg.s3.eu-central-1.amazonaws.com/$BRANCH_NAME/index.html"

package/config/jest/TestEnvironment.js

@@ -0,0 +1,27 @@
+/* eslint-disable no-console */
+
+import { ErrorWithStack } from 'jest-util';
+import JSDOMEnvironment from 'jest-environment-jsdom';
+
+export default class TestEnvironment extends JSDOMEnvironment {
+    constructor() {
+        super(...arguments);
+
+        this.rejectedPromises = [];
+
+        this.global.process.on('unhandledRejection', (error) => {
+            console.error(error);
+            this.rejectedPromises.push(error);
+        });
+    }
+
+    async teardown() {
+        await new Promise(setImmediate);
+
+        if (this.rejectedPromises.length > 0) {
+            throw new ErrorWithStack('Unhandled Promise rejections', this.teardown);
+        }
+
+        await super.teardown();
+    }
+}

package/config/jest/matchers/index.js

@@ -0,0 +1,6 @@
+export { toVueContainComponent } from './toVueContainComponent';
+export { toVueContainLazyComponent } from './toVueContainLazyComponent';
+export { toVueContainElement } from './toVueContainElement';
+export { toVuexActionHasBeenDispatched } from './toVuexActionHasBeenDispatched';
+export { toVueEmpty } from './toVueEmpty';
+export { toElementHasStyle } from './toElementHasStyle';

package/config/jest/matchers/toElementHasStyle.js

@@ -0,0 +1,27 @@
+/**
+ * @param element {HTMLElement}
+ * @param name {String}
+ * @param value {*}
+ */
+export function toElementHasStyle(element, name, value = '') {
+    const renderedStyle = element.style.getPropertyValue(name);
+
+    if (renderedStyle && renderedStyle === value) {
+        return {
+            pass: true,
+            message: () => [
+                'Element has style',
+                `Rendered "${name}: ${renderedStyle}"`
+            ].join('\n')
+        };
+    }
+
+    return {
+        pass: false,
+        message: () => [
+            'Element hasn\'t style',
+            `Expected "${name}: ${value}"`,
+            `Rendered "${name}: ${renderedStyle}"`
+        ].join('\n')
+    };
+}

package/config/jest/matchers/toVueContainComponent.js

@@ -0,0 +1,20 @@
+/**
+ * @param componentWrapper {Wrapper}
+ * @param Component {Vue} Vue component class
+ */
+export function toVueContainComponent(componentWrapper, Component) {
+    const checkingComponent = componentWrapper.findComponent(Component);
+    const componentId = Component.name || `\n${JSON.stringify(Component, null, 4)}`;
+
+    if (checkingComponent.exists()) {
+        return {
+            pass: true,
+            message: () => `Vue component contains component: ${componentId}`
+        };
+    }
+
+    return {
+        pass: false,
+        message: () => `Vue component doesn't contain component: ${componentId}`
+    };
+}

package/config/jest/matchers/toVueContainElement.js

@@ -0,0 +1,34 @@
+/**
+ * @param componentWrapper {Wrapper}
+ * @param selector {selector} value of test data attribute
+ */
+export function toVueContainElement(componentWrapper, selector) {
+    if (typeof selector !== 'string') {
+        throw new Error(`Expect value of data-test-selector attribute but found ${JSON.stringify(selector)}`);
+    }
+
+    function findElement() {
+        const checkingComponent = componentWrapper.find(selector);
+
+        try {
+            if (checkingComponent.exists()) {
+                return checkingComponent;
+            }
+            return componentWrapper.find(`[data-test-selector="${selector}"]`);
+        } catch (_) {
+            return null;
+        }
+    }
+
+    if (findElement()?.exists()) {
+        return {
+            pass: true,
+            message: () => 'Vue component contains expected element'
+        };
+    }
+
+    return {
+        pass: false,
+        message: () => `Vue component doesn't contain element: ${selector}`
+    };
+}

package/config/jest/matchers/toVueContainLazyComponent.js

@@ -0,0 +1,19 @@
+import { toVueContainComponent } from './toVueContainComponent';
+
+function importComponent(Component) {
+    if (typeof Component !== 'function') return Promise.resolve(Component);
+
+    return Component().then((module) => module.default);
+}
+
+/**
+ * @param componentWrapper {Wrapper}
+ * @param Component {Function|Vue} import of lazy Vue component
+ */
+export async function toVueContainLazyComponent(componentWrapper, Component) {
+    const LoadedComponentClass = await importComponent(Component);
+
+    await componentWrapper.vm.$nextTick();
+
+    return toVueContainComponent(componentWrapper, LoadedComponentClass);
+}

package/config/jest/matchers/toVueEmpty.js

@@ -0,0 +1,16 @@
+/**
+ * @param componentWrapper {Wrapper}
+ */
+export function toVueEmpty(componentWrapper) {
+    if (componentWrapper.vnode.isComment || !componentWrapper.html()) {
+        return {
+            pass: true,
+            message: () => 'Vue component is empty'
+        };
+    }
+
+    return {
+        pass: false,
+        message: () => 'Vue component isn\'t empty'
+    };
+}

package/config/jest/matchers/toVuexActionHasBeenDispatched.js

@@ -0,0 +1,19 @@
+export function toVuexActionHasBeenDispatched(store, actionName) {
+    if (!store.dispatch || !jest.isMockFunction(store.dispatch)) {
+        throw new Error('You should mock "dispatch" method in component store');
+    }
+
+    const dispatchCalls = store.dispatch.mock.calls;
+    const isActionDispatched = dispatchCalls.some(([dispatchedAction]) => dispatchedAction === actionName);
+
+    if (isActionDispatched) {
+        return {
+            pass: true,
+            message: () => `Action "${actionName}" has been called`
+        };
+    }
+    return {
+        pass: false,
+        message: () => `Action "${actionName}" hasn't been called`
+    };
+}

package/config/jest/setupMatchers.js

@@ -0,0 +1,4 @@
+// eslint-disable-next-line import/no-namespace
+import * as matchers from './matchers';
+
+expect.extend(matchers);

package/config/jest/setupTests.js

@@ -0,0 +1,32 @@
+import Vue from 'vue';
+import CompositionAPI from '@vue/composition-api';
+
+// eslint-disable-next-line no-console
+console.warn = jest.fn();
+
+Vue.use(CompositionAPI);
+
+// Fail tests on vue warnings
+Vue.config.warnHandler = (error) => { throw error; };
+Vue.config.devtools = false;
+Vue.config.productionTip = false;
+
+// JSDOM DOESN'T support follow methods
+
+global.HTMLElement.prototype.scrollIntoView = jest.fn();
+global.HTMLElement.prototype.scrollTo = jest.fn();
+
+Range.prototype.getBoundingClientRect = () => ({
+    bottom: 0,
+    height: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    width: 0
+});
+
+Range.prototype.getClientRects = () => ({
+    item: () => null,
+    length: 0,
+    [Symbol.iterator]: jest.fn()
+});

package/config/jest/typing.d.ts

@@ -0,0 +1,14 @@
+// Add types for IDE autocomplete
+
+declare global {
+  interface Matchers {
+    toVueContainElement(selectorId: string): void;
+    toVueContainComponent(component: object): void;
+    toVueContainLazyComponent(component: object | (() => Promise<object>)): void;
+    toVueEmpty(): void;
+    toVuexActionHasBeenDispatched(action: string): void;
+    toElementHasStyle(name: string, string?: any): void;
+  }
+
+  interface JestMatchers extends Matchers {}
+}

package/config/svgo.js

@@ -0,0 +1,22 @@
+module.exports = {
+    js2svg: {
+        indent: 4,
+        pretty: true
+    },
+    multipass: true,
+    plugins: [
+        {
+            name: 'preset-default',
+            params: { removeViewBox: false }
+        },
+        'removeDimensions',
+        'sortAttrs',
+        'convertStyleToAttrs',
+        {
+            name: 'removeAttrs',
+            params: {
+                attrs: 'data.*'
+            }
+        }
+    ]
+};

package/config/webpack/example.config.js

@@ -0,0 +1,86 @@
+const path = require('path');
+const { DefinePlugin } = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { VueLoaderPlugin } = require('vue-loader');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const { resolvePath, isDevelopment } = require('./settings');
+const loaders = require('./loaders');
+
+const isAnalyzerEnabled = !!process.env.ANALYZE_BUILD;
+const filename = isDevelopment ? '[name].js' : '[name].[contenthash].js';
+
+module.exports = {
+    mode: isDevelopment ? 'development' : 'production',
+    entry: resolvePath('./example/example.js'),
+    devtool: isDevelopment ? 'eval-source-map' : false,
+
+    output: {
+        clean: true,
+        path: resolvePath('./example/dist'),
+        filename,
+        chunkFilename: filename,
+        devtoolFallbackModuleFilenameTemplate: 'webpack:///[resource-path]?[hash]',
+        devtoolModuleFilenameTemplate: (info) => {
+            let resPath = path.normalize(info.resourcePath);
+            let isVue = resPath.match(/\.vue$/);
+            let isGenerated = info.allLoaders;
+
+            let generated = `webpack-generated:///${resPath}?${info.hash}`;
+            let vuesource = `parsed:///${resPath}`;
+
+            return isVue && isGenerated ? generated : vuesource;
+        }
+    },
+
+    cache: {
+        type: 'filesystem',
+        cacheDirectory: resolvePath('./example/.cache')
+    },
+
+    devServer: {
+        host: 'localhost',
+        port: 7777,
+        devMiddleware: { publicPath: '/' }
+    },
+
+    resolve: {
+        extensions: ['*', '.js', '.vue', '.json']
+    },
+
+    optimization: {
+        splitChunks: {
+            chunks: 'all',
+            cacheGroups: {
+                vue: {
+                    name: 'vue',
+                    test: /[\\/]node_modules[\\/]@?vue/
+                },
+                tiptap: {
+                    name: 'tiptap',
+                    test: /[\\/]node_modules[\\/](@?tiptap|prosemirror)/
+                }
+            }
+        }
+    },
+
+    module: {
+        rules: [
+            loaders.style,
+            loaders.js,
+            loaders.svg,
+            loaders.vue
+        ]
+    },
+
+    plugins: [
+        new VueLoaderPlugin(),
+        new HtmlWebpackPlugin({
+            title: 'ZipifyWysiwyg',
+            template: resolvePath('./example/example.html')
+        }),
+        new DefinePlugin({
+            ZW_UPDATED_AT: JSON.stringify(Date.now())
+        }),
+        ...(isAnalyzerEnabled ? [new BundleAnalyzerPlugin()] : [])
+    ]
+};

package/config/webpack/loaders/index.js

@@ -0,0 +1,6 @@
+module.exports = {
+    style: require('./style-loader'),
+    svg: require('./svg-loader'),
+    js: require('./js-loader'),
+    vue: require('./vue-loader')
+};

package/config/webpack/loaders/js-loader.js

@@ -0,0 +1,5 @@
+module.exports = {
+    test: /\.js?$/,
+    exclude: /(node_modules)/,
+    loader: 'babel-loader'
+};

package/config/webpack/loaders/style-loader.js

@@ -0,0 +1,7 @@
+module.exports = {
+    test: /\.s?css$/,
+    use: [
+        'vue-style-loader',
+        'css-loader'
+    ]
+};

package/config/webpack/loaders/svg-loader.js

@@ -0,0 +1,4 @@
+module.exports = {
+    test: /\.svg$/,
+    type: 'asset/resource'
+};

package/config/webpack/loaders/vue-loader.js

@@ -0,0 +1,4 @@
+module.exports = {
+    test: /\.vue$/,
+    use: { loader: 'vue-loader' }
+};

package/config/webpack/settings.js

@@ -0,0 +1,9 @@
+const path = require('path');
+
+const root = path.resolve(__dirname, '../..');
+
+module.exports = {
+    root,
+    resolvePath: (...parts) => path.resolve(root, ...parts),
+    isDevelopment: process.env.NODE_ENV === 'development'
+};