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

package/lib/utils/convertAlignment.js

@@ -0,0 +1,12 @@
+import { Alignments } from '../enums';
+
+const MAPPING = {
+    start: Alignments.LEFT,
+    end: Alignments.RIGHT
+};
+
+export function convertAlignment(alignment) {
+    const mapped = MAPPING[alignment] || alignment;
+
+    return Alignments.values.includes(mapped) ? mapped : null;
+}

package/lib/utils/convertFontSize.js

@@ -0,0 +1,8 @@
+export function convertFontSize(value, wrapperEl) {
+    if (!value.includes('em')) return parseInt(value);
+
+    const containerValue = window.getComputedStyle(wrapperEl).fontSize;
+    const size = parseFloat(value) * parseFloat(containerValue);
+
+    return Math.round(size);
+}

package/lib/utils/convertLineHeight.js

@@ -0,0 +1,17 @@
+import { convertFontSize } from './convertFontSize';
+
+function getFontSize(sourceEl, wrapperEl) {
+    const source = sourceEl.firstElementChild || sourceEl;
+    const fontSize = source.style.fontSize;
+
+    return fontSize || window.getComputedStyle(wrapperEl).fontSize;
+}
+
+export function convertLineHeight(value, sourceEl, wrapperEl) {
+    if (!value.includes('px')) return value;
+
+    const rawFontSize = getFontSize(sourceEl, wrapperEl);
+    const fontSize = convertFontSize(rawFontSize, wrapperEl);
+
+    return (parseInt(value) / fontSize).toFixed(2);
+}

package/lib/utils/index.js

@@ -3,4 +3,7 @@ export { renderInlineSetting, renderMark } from './renderInlineSetting';
 export { capitalize } from './capitalize';
 export { createKeyboardShortcut } from './createKeyboardShortcut';
 export { convertColor } from './convertColor';
+export { convertLineHeight } from './convertLineHeight';
+export { convertFontSize } from './convertFontSize';
+export { convertAlignment } from './convertAlignment';
 export { importIcon } from './importIcon';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "1.0.0-dev.42",
+  "version": "1.0.0-dev.45",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "repository": {
@@ -15,8 +15,8 @@
   },
   "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",
+    "example:start": "NODE_ENV=development vite serve --config ./config/vite/example.config.js",
+    "example:build": "NODE_ENV=production vite build --config ./config/vite/example.config.js",
     "test:unit": "jest .",
     "optimize-svg": "svgo --config ./config/svgo.js",
     "gzip": "gzipper compress",
@@ -51,32 +51,22 @@
     "@vue/test-utils": "^1.3.0",
     "@vue/vue2-jest": "^28.0.1",
     "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.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",
     "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",
     "zipify-colorpicker": "^1.0.28"
   }
 }

package/config/webpack/example.config.js

@@ -1,88 +0,0 @@
-const path = require('path');
-const { DefinePlugin } = require('webpack');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const { VueLoaderPlugin } = require('vue-loader');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-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 MiniCssExtractPlugin(),
-        new HtmlWebpackPlugin({
-            title: 'ZipifyWysiwyg',
-            template: resolvePath('./example/example.html')
-        }),
-        new DefinePlugin({
-            ZW_UPDATED_AT: JSON.stringify(Date.now())
-        }),
-        ...(isAnalyzerEnabled ? [new BundleAnalyzerPlugin()] : [])
-    ]
-};

package/config/webpack/lib.config.js

@@ -1,43 +0,0 @@
-const { VueLoaderPlugin } = require('vue-loader');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const { resolvePath } = require('./settings');
-const loaders = require('./loaders');
-
-module.exports = {
-    mode: 'production',
-    entry: resolvePath('./lib/index.js'),
-
-    output: {
-        clean: true,
-        path: resolvePath('./dist'),
-        filename: 'wysiwyg.js',
-        library: { type: 'commonjs2' }
-    },
-
-    resolve: {
-        extensions: ['*', '.js', '.vue', '.json']
-    },
-
-    module: {
-        rules: [
-            loaders.style,
-            loaders.js,
-            loaders.svg,
-            loaders.vue
-        ]
-    },
-
-    externals: {
-        'vue': 'commonjs2 vue',
-        'zipify-colorpicker': 'commonjs2 zipify-colorpicker'
-    },
-
-    experiments: {
-        outputModule: true
-    },
-
-    plugins: [
-        new VueLoaderPlugin(),
-        new MiniCssExtractPlugin({ filename: 'wysiwyg.css' })
-    ]
-};

package/config/webpack/loaders/index.js

@@ -1,6 +0,0 @@
-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

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

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

@@ -1,9 +0,0 @@
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-module.exports = {
-    test: /\.s?css$/,
-    use: [
-        MiniCssExtractPlugin.loader,
-        'css-loader'
-    ]
-};

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

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

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

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

package/config/webpack/settings.js

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