@zipify/wysiwyg 1.3.0-0 → 2.0.0-1

package/lib/services/{__tests__/ContentNormalizer.test.js → normalizer/__tests__/HtmlNormalizer.test.js}

@@ -1,42 +1,6 @@
 import { ContentNormalizer } from '../ContentNormalizer';
-import { NodeFactory } from '../NodeFactory';
 
 describe('normalize text content', () => {
-    test('should ignore json content', () => {
-        const content = NodeFactory.doc([NodeFactory.paragraph('Test')]);
-
-        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 +63,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>';
@@ -165,9 +101,33 @@ 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>';
+    test('should ignore text decoration on text nodes', () => {
+        const input = '<p><span style="text-decoration: underline;">lorem ipsum</span></p>';
+        const output = '<p><span style="text-decoration: underline;">lorem ipsum</span></p>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should ignore none text decoration', () => {
+        const input = '<p style="text-decoration: none;">lorem ipsum</p>';
+        const output = '<p>lorem ipsum</p>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should move text decoration from block to text only nodes', () => {
+        const input = '<p style="text-decoration: underline;">lorem ipsum</p>';
+        const output = '<p><span style="text-decoration: underline;">lorem ipsum</span></p>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should move text decoration from block to mixed content', () => {
+        const input = '<p style="text-decoration: underline;"><span style="text-decoration: line-through;">lorem</span> ipsum</p>';
+        const output = '<p>' +
+            '<span style="text-decoration: underline line-through;">lorem</span>' +
+            '<span style="text-decoration: underline;"> ipsum</span>' +
+        '</p>';
 
         expect(ContentNormalizer.normalize(input)).toBe(output);
     });

package/lib/services/normalizer/__tests__/JsonNormalizer.test.js

@@ -0,0 +1,70 @@
+import { NodeFactory } from '../../NodeFactory';
+import { ListTypes, TextSettings } from '../../../enums';
+import { ContentNormalizer } from '../ContentNormalizer';
+
+describe('normalize json content', () => {
+    test('should bubble mark from single text node to paragraph', () => {
+        const input = NodeFactory.doc([
+            NodeFactory.paragraph([
+                NodeFactory.text('lorem ipsum', [
+                    NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+                ])
+            ])
+        ]);
+
+        expect(ContentNormalizer.normalize(input)).toMatchSnapshot();
+    });
+
+    test('should bubble mark from two text nodes to paragraph', () => {
+        const input = NodeFactory.doc([
+            NodeFactory.paragraph([
+                NodeFactory.text('lorem', [
+                    NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+                ]),
+                NodeFactory.text(' ipsum', [
+                    NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' }),
+                    NodeFactory.mark(TextSettings.FONT_COLOR, { value: '#FF0000' })
+                ])
+            ])
+        ]);
+
+        expect(ContentNormalizer.normalize(input)).toMatchSnapshot();
+    });
+
+    test('should bubble mark from text to list item', () => {
+        const input = NodeFactory.doc([
+            NodeFactory.list(ListTypes.DISC, [
+                NodeFactory.paragraph(null, [
+                    NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+                ], 'lorem ipsum')
+            ])
+        ]);
+
+        expect(ContentNormalizer.normalize(input)).toMatchSnapshot();
+    });
+
+    test('should bubble two marks', () => {
+        const input = NodeFactory.doc([
+            NodeFactory.paragraph([
+                NodeFactory.text('hello world', [
+                    NodeFactory.mark(TextSettings.FONT_FAMILY, { value: 'Bungee' }),
+                    NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '800' })
+                ])
+            ])
+        ]);
+
+        expect(ContentNormalizer.normalize(input)).toMatchSnapshot();
+    });
+
+    test('should not bubble inline marks', () => {
+        const input = NodeFactory.doc([
+            NodeFactory.paragraph([
+                NodeFactory.text('hello world', [
+                    NodeFactory.mark(TextSettings.TEXT_DECORATION, { underline: true })
+                ])
+            ])
+        ]);
+
+        expect(ContentNormalizer.normalize(input)).toMatchSnapshot();
+    });
+});

package/lib/services/normalizer/__tests__/__snapshots__/JsonNormalizer.test.js.snap

@@ -0,0 +1,159 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`normalize json content should bubble mark from single text node to paragraph 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "text": "lorem ipsum",
+          "type": "text",
+        },
+      ],
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "value": "700",
+          },
+          "type": "font_weight",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`normalize json content should bubble mark from text to list item 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "bullet": Object {
+          "type": "disc",
+        },
+      },
+      "content": Array [
+        Object {
+          "content": Array [
+            Object {
+              "content": Array [
+                Object {
+                  "text": "lorem ipsum",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "700",
+              },
+              "type": "font_weight",
+            },
+          ],
+          "type": "listItem",
+        },
+      ],
+      "type": "list",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`normalize json content should bubble mark from two text nodes to paragraph 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "text": "lorem",
+          "type": "text",
+        },
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "#FF0000",
+              },
+              "type": "font_color",
+            },
+          ],
+          "text": " ipsum",
+          "type": "text",
+        },
+      ],
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "value": "700",
+          },
+          "type": "font_weight",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`normalize json content should bubble two marks 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "value": "Bungee",
+          },
+          "type": "font_family",
+        },
+        Object {
+          "attrs": Object {
+            "value": "800",
+          },
+          "type": "font_weight",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`normalize json content should not bubble inline marks 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "underline": true,
+              },
+              "type": "text_decoration",
+            },
+          ],
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;

package/lib/services/normalizer/index.js

@@ -0,0 +1 @@
+export { ContentNormalizer } from './ContentNormalizer';

package/lib/styles/content.css

@@ -112,6 +112,14 @@ img.ProseMirror-separator {
     animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
 }
 
+.ProseMirror span {
+    display: block;
+}
+
+.ProseMirror :where(p, h1, h2, h3, h4) span {
+    display: initial;
+}
+
 @keyframes ProseMirror-cursor-blink {
 
     to {

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,10 @@
+export function isMarkAppliedToParent({ doc }, position, checkingMark) {
+    const steps = doc.resolve(position).path.reverse();
+
+    for (const step of steps) {
+        if (typeof step === 'number') continue;
+        if (checkingMark.isInSet(step.marks)) 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-1",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "bin": {
@@ -45,6 +45,7 @@
     "@tiptap/vue-2": "^2.0.0-beta.85",
     "commander": "^9.4.0",
     "jsdom": "^20.0.0",
+    "lodash": "^4.17.21",
     "simplebar": "^5.3.8"
   },
   "peerDependencies": {
@@ -57,6 +58,7 @@
     "@babel/plugin-transform-runtime": "^7.18.10",
     "@babel/preset-env": "^7.19.0",
     "@babel/runtime": "^7.19.0",
+    "@optimize-lodash/rollup-plugin": "^3.0.0",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-node-resolve": "^14.0.0",

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>