@zipify/wysiwyg 1.0.0-dev.9 → 1.0.0-dev.90

package/lib/styles/content.css

@@ -2,7 +2,22 @@
     outline: none;
 }
 
-.zw-style {
+.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-superscript {
+    font-size: 75%;
+    position: relative;
+    vertical-align: initial;
+    top: -0.5em;
+}
+
+.zw-style.zw-style.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));
@@ -13,27 +28,107 @@
 
 @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));
+    .zw-style.zw-style.zw-style {
+        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));
+    .zw-style.zw-style.zw-style {
+        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));
+    .zw-style.zw-style.zw-style {
+        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: 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__/convertAlignment.test.js

@@ -0,0 +1,16 @@
+import { convertAlignment } from '../convertAlignment';
+import { Alignments } from '../../enums';
+
+describe('convert alignment', () => {
+    test('should try convert non supported value', () => {
+        expect(convertAlignment('start')).toBe(Alignments.LEFT);
+    });
+
+    test('should not change supported value', () => {
+        expect(convertAlignment('center')).toBe(Alignments.CENTER);
+    });
+
+    test('should return null if cannot convert', () => {
+        expect(convertAlignment('test-test')).toBe(null);
+    });
+});

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

@@ -0,0 +1,21 @@
+import { convertFontSize } from '../convertFontSize';
+
+describe('convert font size', () => {
+    const createWrapper = ({ fontSize }) => {
+        const wrapperEl = document.createElement('div');
+
+        wrapperEl.style.fontSize = `${fontSize}px`;
+
+        return wrapperEl;
+    };
+
+    test('should format px values', () => {
+        expect(convertFontSize('20px')).toBe(20);
+    });
+
+    test('should parse em value', () => {
+        const wrapperEl = createWrapper({ fontSize: 24 });
+
+        expect(convertFontSize('1.5em', wrapperEl)).toBe(36);
+    });
+});

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

@@ -0,0 +1,21 @@
+import { convertLineHeight } from '../convertLineHeight';
+
+describe('convert line height', () => {
+    const createWrapper = ({ fontSize }) => {
+        const wrapperEl = document.createElement('div');
+
+        wrapperEl.style.fontSize = `${fontSize}px`;
+
+        return wrapperEl;
+    };
+
+    test('should allow relative values', () => {
+        expect(convertLineHeight('1.2')).toBe('1.2');
+    });
+
+    test('should convert px to relative', () => {
+        const wrapperEl = createWrapper({ fontSize: 20 });
+
+        expect(convertLineHeight('24px', wrapperEl)).toBe('1.20');
+    });
+});

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

@@ -1,4 +1,4 @@
-import { ColorModel } from 'zipify-colorpicker';
+import { ColorModel } from '@zipify/colorpicker';
 
 export function convertColor(raw) {
     const model = ColorModel.create(raw);

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

@@ -1,12 +1,13 @@
-// register all icons in webpack module loader
-const importFile = require.context('../assets/icons', true, /\.svg/);
+const modules = import.meta.glob('../assets/icons/*.svg', { as: 'raw', eager: true });
 
 export function importIcon(name) {
-    try {
-        return importFile(`./${name}.svg`);
-    } catch (error) {
+    const icon = modules[`../assets/icons/${name}.svg`];
+
+    if (!icon) {
         // eslint-disable-next-line no-console
-        console.warn('Cannot resolve wysiwyg icon', error);
+        console.warn(`[WSWG] Cannot resolve ${name} icon`);
         return '';
     }
+
+    return icon;
 }

package/lib/utils/index.js

@@ -3,4 +3,8 @@ 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';
+export { isWysiwygContent, markWysiwygContent, unmarkWysiwygContent } from './isWysiwygContent';

package/lib/utils/isWysiwygContent.js

@@ -0,0 +1,12 @@
+export function isWysiwygContent(content) {
+    return typeof content === 'object' && content.__wswg__;
+}
+
+// eslint-disable-next-line no-unused-vars
+export function unmarkWysiwygContent({ __wswg__, ...content }) {
+    return content;
+}
+
+export function markWysiwygContent(content) {
+    return { ...content, __wswg__: true };
+}

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;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "1.0.0-dev.9",
+  "version": "1.0.0-dev.90",
   "description": "Zipify modification of TipTap text editor",
-  "main": "dist/wysiwyg.js",
+  "main": "dist/wysiwyg.mjs",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ZipifyApps/ZipifyWysiwyg.git"
@@ -14,14 +14,17 @@
     "url": "https://github.com/ZipifyApps/ZipifyWysiwyg/issues"
   },
   "scripts": {
-    "lib:build": "webpack --config ./config/webpack/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",
+    "lib:build": "vite build --config ./config/vite/lib.config.js",
+    "lib:pre-release": "npm run lint:js && npm run lint:css && npm run test:unit",
+    "lib:release": "export $(cat ./.env | xargs) && npm run lib:pre-release && npm run lib:build && release-it",
+    "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 .",
+    "lint:js": "eslint ./lib/**/*.{js,vue}",
+    "lint:css": "stylelint ./lib/**/*.{css,vue}",
     "optimize-svg": "svgo --config ./config/svgo.js",
     "gzip": "gzipper compress",
-    "prepare": "husky install",
-    "release": "export $(cat ./.env | xargs) && npm run lib:build && release-it"
+    "prepare": "husky install"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.5",
@@ -29,51 +32,44 @@
     "@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": "*",
-    "zipify-colorpicker": "*"
+    "@zipify/colorpicker": "^2.2",
+    "vue": "^2.7"
   },
   "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-loader": "^8.2.5",
-    "css-loader": "^6.7.1",
+    "@zipify/colorpicker": "^2.0.0",
+    "babel-jest": "^28.1.3",
     "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",
-    "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.9.3",
-    "zipify-colorpicker": "^1.0.28"
+    "vite": "^3.0.4",
+    "vite-plugin-vue2": "^2.0.2",
+    "vue": "^2.7.8",
+    "vue-template-compiler": "^2.7.8"
   }
 }

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,44 +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: 'module' },
-        module: true
-    },
-
-    resolve: {
-        extensions: ['*', '.js', '.vue', '.json']
-    },
-
-    module: {
-        rules: [
-            loaders.style,
-            loaders.js,
-            loaders.svg,
-            loaders.vue
-        ]
-    },
-
-    externals: {
-        '@vue/composition-api': { module: '@vue/composition-api' },
-        'zipify-colorpicker': { module: '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' }
-};