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

package/lib/extensions/__tests__/__snapshots__/TextDecoration.test.js.snap

@@ -285,6 +285,36 @@ Object {
 }
 `;
 
+exports[`parsing html should get both from text with property shorthand 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "strike_through": true,
+                "underline": true,
+              },
+              "type": "text_decoration",
+            },
+          ],
+          "text": "lorem",
+          "type": "text",
+        },
+        Object {
+          "text": " ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
 exports[`parsing html should get strike through from paragraph 1`] = `
 Object {
   "content": Array [
@@ -496,6 +526,66 @@ Object {
 }
 `;
 
+exports[`parsing html should parse strike through from tag 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "strike_through": true,
+                "underline": false,
+              },
+              "type": "text_decoration",
+            },
+          ],
+          "text": "lorem",
+          "type": "text",
+        },
+        Object {
+          "text": " ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parsing html should parse underline from tag 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "strike_through": false,
+                "underline": true,
+              },
+              "type": "text_decoration",
+            },
+          ],
+          "text": "lorem",
+          "type": "text",
+        },
+        Object {
+          "text": " ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
 exports[`rendering should render both 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-text-decoration:underline line-through;\\" class=\\"zw-style\\">hello world</span></p>"`;
 
 exports[`rendering should render strike through only 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-text-decoration:line-through;\\" class=\\"zw-style\\">hello world</span></p>"`;

package/lib/extensions/core/plugins/PastePlugin.js

@@ -1,4 +1,5 @@
 import { ContentNormalizer } from '../../../services';
+import { NodeTypes } from '../../../enums';
 import { ProseMirrorPlugin } from './ProseMirrorPlugin';
 
 export class PastePlugin extends ProseMirrorPlugin {
@@ -21,28 +22,36 @@ export class PastePlugin extends ProseMirrorPlugin {
     }
 
     _insertPastedContent({ state, input }, slice) {
-        if (!this._isSingleNode(slice)) {
+        if (!this._isFullBlockSelected(state)) {
             return state.tr.replaceSelection(slice);
         }
 
-        const { $from, $to } = state.selection;
-        const isSingleNodeReplacing = $from.sharedDepth($to.pos) === $from.depth;
+        return state.tr.replaceSelectionWith(slice.content, input.shiftKey);
+    }
 
-        if (!isSingleNodeReplacing) {
-            return state.tr.replaceSelection(slice);
-        }
+    _isFullBlockSelected(state) {
+        const blocksSelection = this._expandSelectionToBlocks(state);
+        const isFromMatch = this._isMatchPosition(blocksSelection.from, state.selection.from);
+        const isToMatch = this._isMatchPosition(blocksSelection.to, state.selection.to);
+
+        return isFromMatch && isToMatch;
+    }
 
-        const selectionSize = Math.abs($from.pos - $to.pos);
-        const { nodeSize } = $to.path.reverse().find((step) => typeof step === 'object');
+    _expandSelectionToBlocks({ selection, doc }) {
+        let from = selection.from;
+        let to = selection.to;
 
-        if (nodeSize - selectionSize > 5) {
-            return state.tr.replaceSelection(slice);
-        }
+        doc.nodesBetween(from, to, (node, position, parent) => {
+            if (parent.type.name !== NodeTypes.DOCUMENT) return;
+
+            from = Math.min(from, position + 1);
+            to = Math.max(to, position + node.nodeSize - 1);
+        });
 
-        return state.tr.replaceSelectionWith(slice.content.firstChild, input.shiftKey);
+        return { from, to };
     }
 
-    _isSingleNode({ openStart, openEnd, content }) {
-        return openStart === 1 && openEnd === 1 && content.childCount === 1;
+    _isMatchPosition(position1, position2) {
+        return Math.abs(position1 - position2) < 5;
     }
 }

package/lib/extensions/index.js

@@ -18,6 +18,7 @@ import { buildCoreExtensions } from './core';
 export function buildExtensions(options) {
     const getPresetById = (id) => options.presetsRef.value.find((preset) => preset.id === id);
     const defaultPreset = getPresetById(options.defaultPresetId);
+    const linkPreset = getPresetById('link');
 
     return buildCoreExtensions(options).concat([
         StylePreset.configure({
@@ -50,8 +51,9 @@ export function buildExtensions(options) {
         Alignment,
         LineHeight,
         Link.configure({
-            preset: options.linkPreset,
+            preset: linkPreset,
             basePresetClass: options.basePresetClass,
-            pageBlocks: options.pageBlocks
-        })]);
+            pageBlocks: options.pageBlocksRef
+        })
+    ]);
 }

package/lib/services/ContentNormalizer.js

@@ -2,6 +2,22 @@ import { ContextWindow } from './ContextWidnow';
 
 export class ContentNormalizer {
     static BLOCK_STYLES = ['text-align', 'line-height'];
+    static BLOCK_NODE_NAMES = ['P', 'H1', 'H2', 'H3', 'H4'];
+
+    static ASSIGN_STYLE_RULES = [
+        {
+            tag: /^(b|strong)$/,
+            ignore: /font-weight/
+        },
+        {
+            tag: /^i$/,
+            ignore: /font-style/
+        },
+        {
+            tag: /^s$/,
+            ignore: /text-decoration(.+)?/
+        }
+    ];
 
     static normalize(content) {
         return new ContentNormalizer(content).normalize();
@@ -22,25 +38,32 @@ export class ContentNormalizer {
     _normalizeTextContent() {
         this._dom = new DOMParser().parseFromString(this._content, 'text/html');
 
-        this._iterateNodes(this._normalizeListItems.bind(this), (node) => node.tagName === 'LI');
-        this._iterateNodes(this._normalizeSettingsStructure.bind(this), (node) => node.tagName === 'SPAN');
-        this._iterateNodes(this._normalizeStyles.bind(this), (node) => node.tagName !== 'SPAN');
+        this._iterateNodes(this._removeEmptyNodes, this._isBlockNode);
+        this._iterateNodes(this._normalizeListItems, (node) => node.tagName === 'LI');
+        this._iterateNodes(this._normalizeSettingsStructure, (node) => node.tagName === 'SPAN');
+        this._iterateNodes(this._normalizeStyles, (node) => node.tagName !== 'SPAN');
 
         return this._dom.body.innerHTML;
     }
 
-    _iterateNodes(handler, condition) {
+    _iterateNodes(handler, condition = () => true) {
         const iterator = this._dom.createNodeIterator(this._dom.body, NodeFilter.SHOW_ELEMENT, {
-            acceptNode: (node) => condition(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
+            acceptNode: (node) => condition.call(this, node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
         });
         let currentNode = iterator.nextNode();
 
         while (currentNode) {
-            handler(currentNode);
+            handler.call(this, currentNode);
             currentNode = iterator.nextNode();
         }
     }
 
+    _removeEmptyNodes(node) {
+        if (node.childNodes.length === 0) {
+            node.remove();
+        }
+    }
+
     _normalizeListItems(itemEl) {
         const fragment = new DocumentFragment();
         const children = Array.from(itemEl.childNodes);
@@ -71,10 +94,7 @@ export class ContentNormalizer {
     }
 
     _normalizeSettingsStructure(element) {
-        const isTextChildren = Array.from(element.childNodes)
-            .every((node) => node.nodeType === Node.TEXT_NODE);
-
-        if (isTextChildren) return;
+        if (this._isOnlyTextContent(element)) return;
 
         const cloned = element.cloneNode(true);
         const migratingStyles = this._getMigratingStyles(element, { customProperties: true });
@@ -95,8 +115,12 @@ export class ContentNormalizer {
     }
 
     _normalizeStyles(element) {
+        if (!this._isBlockNode(element) && this._isOnlyTextContent(element)) return;
+
         const properties = this._getMigratingStyles(element);
 
+        if (!properties.length) return;
+
         for (const node of element.childNodes) {
             const child = this._wrapTextNode(element, node);
 
@@ -106,6 +130,14 @@ export class ContentNormalizer {
         this._removeStyleProperties(element, properties);
     }
 
+    _isOnlyTextContent(node) {
+        return Array.from(node.childNodes).every((node) => node.nodeType === Node.TEXT_NODE);
+    }
+
+    _isBlockNode(node) {
+        return ContentNormalizer.BLOCK_NODE_NAMES.includes(node.tagName);
+    }
+
     _getMigratingStyles(element, { customProperties } = {}) {
         const blacklist = ContentNormalizer.BLOCK_STYLES;
         const properties = [];
@@ -135,16 +167,24 @@ export class ContentNormalizer {
 
     _assignElementProperties(target, source, properties) {
         for (const property of properties) {
-            if (target.style.getPropertyValue(property)) {
-                continue;
-            }
-
             const value = source.style.getPropertyValue(property);
 
-            if (value) target.style.setProperty(property, value);
+            if (value && this._canAssignElementProperty(target, source, property)) {
+                target.style.setProperty(property, value);
+            }
         }
     }
 
+    _canAssignElementProperty(target, source, property) {
+        if (target.style.getPropertyValue(property)) return false;
+
+        return ContentNormalizer.ASSIGN_STYLE_RULES.every((rule) => {
+            if (!rule.tag.test(target.tagName.toLowerCase())) return true;
+
+            return !rule.ignore.test(property);
+        });
+    }
+
     _removeStyleProperties(element, properties) {
         for (const property of properties) {
             element.style.removeProperty(property);

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

@@ -39,7 +39,7 @@ describe('normalize text content', () => {
 
     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>';
+        const output = '<ul><li><p style="line-height: 2;">lorem impsum</p></li></ul>';
 
         expect(ContentNormalizer.normalize(input)).toBe(output);
     });
@@ -48,7 +48,7 @@ describe('normalize text content', () => {
         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>' +
+                '<p style="line-height: 2;"><span style="font-weight: 700">lorem</span> impsum</p>' +
             '</li>' +
         '</ul>';
 
@@ -64,11 +64,46 @@ describe('normalize text content', () => {
         '</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>' +
+            '<p style="line-height: 2;"><span style="font-weight: 700">lorem</span> impsum</p>' +
+            '<p style="line-height: 2;">paragraph text</p>' +
             '</li>' +
         '</ul>';
 
         expect(ContentNormalizer.normalize(input)).toBe(output);
     });
+
+    test('should ignore empty nodes', () => {
+        const input = '<p>lorem ipsum 1</p><p></p><p>lorem ipsum 2</p>';
+        const output = '<p>lorem ipsum 1</p><p>lorem ipsum 2</p>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should not ignore setting', () => {
+        const input = '<p style="text-decoration-line: underline;">lorem ipsum</p>';
+        const output = '<p><span style="text-decoration-line: underline;">lorem ipsum</span></p>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should not assign font-weight to b tag', () => {
+        const input = '<p style="font-weight: 400;"><b>lorem ipsum</b></p>';
+        const output = '<p><b>lorem ipsum</b></p>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should not assign font-style to i tag', () => {
+        const input = '<p style="font-style: normal;"><i>lorem ipsum</i></p>';
+        const output = '<p><i>lorem ipsum</i></p>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should not assign text-decoration to s tag', () => {
+        const input = '<p style="text-decoration-line: initial;"><s>lorem ipsum</s></p>';
+        const output = '<p><s>lorem ipsum</s></p>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "1.0.0-dev.42",
+  "version": "1.0.0-dev.43",
   "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'
-};