@zipify/wysiwyg 1.3.0-0 → 2.0.0-0

package/lib/services/ContentNormalizer.js

@@ -13,21 +13,6 @@ export class ContentNormalizer {
         'margin-right'
     ];
 
-    static ASSIGN_STYLE_RULES = [
-        {
-            tag: /^(b|strong)$/,
-            ignore: /font-weight/
-        },
-        {
-            tag: /^i$/,
-            ignore: /font-style/
-        },
-        {
-            tag: /^s$/,
-            ignore: /text-decoration(.+)?/
-        }
-    ];
-
     static build(content, options = {}) {
         return new ContentNormalizer({
             content,
@@ -60,8 +45,6 @@ export class ContentNormalizer {
         this.iterateNodes(this._normalizeBreakLines, (node) => node.tagName === 'BR');
         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');
     }
 
     get normalizedHTML() {
@@ -72,10 +55,6 @@ export class ContentNormalizer {
         return this._parser.types.NodeFilter;
     }
 
-    get _Node() {
-        return this._parser.types.Node;
-    }
-
     _removeComments() {
         const iterator = this.createNodeIterator(this._NodeFilter.SHOW_COMMENT);
 
@@ -159,98 +138,20 @@ export class ContentNormalizer {
         this._removeStyleProperties(itemEl, ContentNormalizer.BLOCK_STYLES);
     }
 
-    _normalizeSettingsStructure(element) {
-        if (this._isOnlyTextContent(element)) return;
-
-        const cloned = element.cloneNode(true);
-        const migratingStyles = this._getMigratingStyles(element, { customProperties: true });
-        const content = [];
-
-        for (const node of cloned.childNodes) {
-            let child = node;
-
-            if (migratingStyles.length) {
-                child = this._wrapTextNode(cloned, node);
-                this._assignElementProperties(child, cloned, migratingStyles);
-            }
-
-            content.push(child);
-        }
-
-        element.replaceWith(...content);
-    }
-
-    _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);
-
-            this._assignElementProperties(child, element, properties);
-        }
-
-        this._removeStyleProperties(element, properties);
-    }
-
-    _isOnlyTextContent(node) {
-        return Array.from(node.childNodes).every((node) => node.nodeType === this._Node.TEXT_NODE);
-    }
-
     _isBlockNode(node) {
         return ContentNormalizer.BLOCK_NODE_NAMES.includes(node.tagName);
     }
 
-    _getMigratingStyles(element, { customProperties } = {}) {
-        const blacklist = ContentNormalizer.BLOCK_STYLES;
-        const properties = [];
-
-        for (let index = 0; index < element.style.length; index++) {
-            const property = element.style.item(index);
-
-            if (blacklist.includes(property)) continue;
-            if (!customProperties && property.startsWith('--')) continue;
-
-            properties.push(property);
-        }
-
-        return properties;
-    }
-
-    _wrapTextNode(parent, node) {
-        if (node.nodeType !== this._Node.TEXT_NODE) return node;
-
-        const span = this.dom.createElement('span');
-
-        span.append(node.cloneNode());
-        parent.replaceChild(span, node);
-
-        return span;
-    }
-
     _assignElementProperties(target, source, properties) {
         for (const property of properties) {
             const value = source.style.getPropertyValue(property);
 
-            if (value && this._canAssignElementProperty(target, source, property)) {
+            if (value && !target.style.getPropertyValue(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/NodeFactory.js

@@ -24,7 +24,7 @@ export class NodeFactory {
     }
 
     static heading(level, ...args) {
-        const config = this._textBlock(args);
+        const config = this.#textBlock(args);
 
         config.attrs ??= {};
         config.attrs.level = level;
@@ -38,21 +38,31 @@ export class NodeFactory {
     static paragraph(...args) {
         return {
             type: NodeTypes.PARAGRAPH,
-            ...this._textBlock(args)
+            ...this.#textBlock(args)
         };
     }
 
-    static _textBlock(args) {
-        const attrs = args.length === 1 ? null : args[0];
-        const content = args.length === 1 ? args[0] : args[1];
+    static #textBlock(args) {
+        const { attrs, content, marks } = this.#normalizeTextBlockArgs(args);
         const children = typeof content === 'string' ? [this.text(content)] : content;
 
         return {
             content: children,
-            ...(attrs ? { attrs } : {})
+            ...(attrs ? { attrs } : {}),
+            ...(marks ? { marks } : {})
         };
     }
 
+    static #normalizeTextBlockArgs(args) {
+        if (args.length === 1) {
+            return { attrs: null, marks: null, content: args[0] };
+        }
+        if (args.length === 2) {
+            return { attrs: args[0], marks: null, content: args[1] };
+        }
+        return { attrs: args[0], marks: args[1], content: args[2] };
+    }
+
     static text(text, marks) {
         return {
             type: NodeTypes.TEXT,

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

@@ -8,35 +8,6 @@ describe('normalize text content', () => {
         expect(ContentNormalizer.normalize(content)).toBe(content);
     });
 
-    test('should flat structure', () => {
-        const input = '<p style="text-align: center; color: rgb(255, 255, 255);"><span style="background-color: rgb(255, 0, 0);">lore<span style="color: rgb(0, 0, 0);">m ip</span>sum</span></p>';
-        const output = '<p style="text-align: center;">' +
-            '<span style="background-color: rgb(255, 0, 0); color: rgb(255, 255, 255);">lore</span>' +
-            '<span style="color: rgb(0, 0, 0); background-color: rgb(255, 0, 0);">m ip</span>' +
-            '<span style="background-color: rgb(255, 0, 0); color: rgb(255, 255, 255);">sum</span>' +
-        '</p>';
-
-        expect(ContentNormalizer.normalize(input)).toBe(output);
-    });
-
-    test('should move styles from paragraph to text', () => {
-        const input = '<p style="background-color: red;">lorem ipsum</p>';
-        const output = '<p><span style="background-color: red;">lorem ipsum</span></p>';
-
-        expect(ContentNormalizer.normalize(input)).toBe(output);
-    });
-
-    test('should move styles from paragraph to unstyled text', () => {
-        const input = '<p style="background-color: red;"><span style="background-color: #000;">lorem</span> ipsum <span style="color: white;">one</span></p>';
-        const output = '<p>' +
-            '<span style="background-color: #000;">lorem</span>' +
-            '<span style="background-color: red;"> ipsum </span>' +
-            '<span style="color: white; background-color: red;">one</span' +
-        '></p>';
-
-        expect(ContentNormalizer.normalize(input)).toBe(output);
-    });
-
     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;">lorem impsum</p></li></ul>';
@@ -99,34 +70,6 @@ describe('normalize text content', () => {
         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);
-    });
-
     test('should assign block styles from list to paragraph', () => {
         const input = '<ul style="line-height: 2;"><li>lorem ipsum</li></ul>';
         const output = '<ul style="line-height: 2;"><li><p style="line-height: 2;">lorem ipsum</p></li></ul>';
@@ -164,11 +107,4 @@ describe('normalize text content', () => {
 
         expect(ContentNormalizer.normalize(input)).toBe(output);
     });
-
-    test('should remove comments', () => {
-        const input = '<p>lorem ipsum</p><p style="color: red;">Hello <!-- world --></p>';
-        const output = '<p>lorem ipsum</p><p><span style="color: red;">Hello </span></p>';
-
-        expect(ContentNormalizer.normalize(input)).toBe(output);
-    });
 });

package/lib/utils/findMarkByType.js

@@ -0,0 +1,5 @@
+export function findMarkByType(list, typeOrName) {
+    const name = typeof typeOrName === 'string' ? typeOrName : typeOrName.name;
+
+    return list.find((mark) => mark.type.name === name);
+}

package/lib/utils/index.js

@@ -8,3 +8,8 @@ export { convertFontSize } from './convertFontSize';
 export { convertAlignment } from './convertAlignment';
 export { importIcon } from './importIcon';
 export { isWysiwygContent, markWysiwygContent, unmarkWysiwygContent } from './isWysiwygContent';
+export { resolveNodePosition } from './resolveNodePosition';
+export { resolveTextPosition } from './resolveTextPosition';
+export { isNodeFullySelected } from './isNodeFullySelected';
+export { isMarkAppliedToParent } from './isMarkAppliedToParent';
+export { findMarkByType } from './findMarkByType';

package/lib/utils/isMarkAppliedToParent.js

@@ -0,0 +1,15 @@
+const DEFAULT_COMPARATOR = (parent, child) => child.eq(parent);
+
+export function isMarkAppliedToParent({ doc }, position, checkingMark, comparator = DEFAULT_COMPARATOR) {
+    const steps = doc.resolve(position).path.reverse();
+
+    for (const step of steps) {
+        if (typeof step === 'number') continue;
+
+        for (const mark of step.marks) {
+            if (comparator(mark, checkingMark)) return true;
+        }
+    }
+
+    return false;
+}

package/lib/utils/isNodeFullySelected.js

@@ -0,0 +1,10 @@
+import { resolveNodePosition } from './resolveNodePosition';
+
+export function isNodeFullySelected($from, $to, node, position) {
+    const fromPosition = resolveNodePosition($from, node, -1);
+    const toPosition = resolveNodePosition($to, node, 1);
+    const isFromMatch = fromPosition <= position;
+    const isToMatch = toPosition >= node.nodeSize + position;
+
+    return isFromMatch && isToMatch;
+}

package/lib/utils/resolveNodePosition.js

@@ -0,0 +1,6 @@
+export function resolveNodePosition({ path, pos }, node, modifier) {
+    const index = path.indexOf(node);
+    const slice = path.slice(index).reverse().filter((step) => typeof step === 'object');
+
+    return pos + (modifier * slice.length);
+}

package/lib/utils/resolveTextPosition.js

@@ -0,0 +1,6 @@
+export function resolveTextPosition($from, $to, node, position) {
+    return {
+        from: Math.max(position, $from.pos),
+        to: Math.min(position + node.nodeSize, $to.pos)
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "1.3.0-0",
+  "version": "2.0.0-0",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "bin": {

package/lib/assets/icons/indicator.svg

@@ -1,5 +0,0 @@
-<svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M0 4.5C0 2.01472 2.01472 0 4.5 0C6.98528 0 9 2.01472 9 4.5C9 6.98528 6.98528 9 4.5 9C2.01472 9 0 6.98528 0 4.5Z" fill="#FFAB00"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.0625 2.25H3.9375V5.625H5.0625V2.25Z" fill="white"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.9375 6.75C3.9375 6.43894 4.18894 6.1875 4.5 6.1875C4.8105 6.1875 5.0625 6.43894 5.0625 6.75C5.0625 7.06106 4.8105 7.3125 4.5 7.3125C4.18894 7.3125 3.9375 7.06106 3.9375 6.75Z" fill="white"/>
-</svg>