@zipify/wysiwyg 2.0.0-0 → 2.0.0-10

package/lib/services/normalizer/JsonNormalizer.js

@@ -0,0 +1,82 @@
+import { isEqual } from 'lodash';
+import { NodeTypes, TextSettings } from '../../enums';
+import { BaseNormalizer } from './BaseNormalizer';
+
+export class JsonNormalizer extends BaseNormalizer {
+    normalize() {
+        this.#iterateNodes(this.#bubbleMarks);
+        return this.content;
+    }
+
+    #iterateNodes(handler) {
+        this.#iterateChildNodes(this.content, handler);
+    }
+
+    #iterateChildNodes(node, handler) {
+        for (const child of node.content) {
+            child.content && this.#iterateChildNodes(child, handler);
+            handler.call(this, child);
+        }
+    }
+
+    #bubbleMarks(node) {
+        if (!node.content) return;
+        if (node.type === NodeTypes.LIST) return;
+
+        for (const child of node.content) {
+            if (!child.marks) continue;
+
+            for (const childMark of child.marks.slice()) {
+                if (this.#includesMark(node, childMark)) {
+                    this.#removeMark(child, childMark);
+                    continue;
+                }
+
+                if (this.#canBubbleMark(node, childMark)) {
+                    this.#removeMark(child, childMark);
+                    this.#addMark(node, childMark);
+                }
+            }
+        }
+    }
+
+    #canBubbleMark(node, childMark) {
+        if (TextSettings.inlineMarks.includes(childMark.type)) return false;
+        if (this.#includesMarkType(node, childMark.type)) return false;
+
+        for (const child of node.content) {
+            if (!child.content && node.type === NodeTypes.LIST_ITEM) continue;
+            if (!child.marks) return false;
+            if (!this.#includesMark(child, childMark)) return false;
+        }
+
+        return true;
+    }
+
+    #includesMark(node, checkingMark) {
+        return node.marks?.some((mark) => isEqual(mark, checkingMark)) ?? false;
+    }
+
+    #includesMarkType(node, type) {
+        return node.marks?.some((mark) => mark.type === type) ?? false;
+    }
+
+    #removeMark(node, mark) {
+        if (!node.marks) return;
+
+        const index = this.#findMarkIndexByType(node, mark.type);
+
+        if (index >= 0) node.marks.splice(index, 1);
+        if (!node.marks.length) delete node.marks;
+    }
+
+    #addMark(node, mark) {
+        this.#removeMark(node, mark);
+        node.marks ??= [];
+        node.marks.push(mark);
+    }
+
+    #findMarkIndexByType(node, type) {
+        return node.marks?.findIndex((mark) => mark.type === type) ?? null;
+    }
+}

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

@@ -1,11 +1,18 @@
 import { ContentNormalizer } from '../ContentNormalizer';
-import { NodeFactory } from '../NodeFactory';
 
 describe('normalize text content', () => {
-    test('should ignore json content', () => {
-        const content = NodeFactory.doc([NodeFactory.paragraph('Test')]);
+    test('should wrap root nodes in paragraphs', () => {
+        const input = '<strong>lorem</strong>ipsum';
+        const output = '<p><strong>lorem</strong>ipsum</p>';
 
-        expect(ContentNormalizer.normalize(content)).toBe(content);
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should not wrap paragraph', () => {
+        const input = 'lorem<p>ipsum</p>hello';
+        const output = '<p>lorem</p><p>ipsum</p><p>hello</p>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
     });
 
     test('should wrap list content in paragraph', () => {
@@ -107,4 +114,35 @@ describe('normalize text content', () => {
 
         expect(ContentNormalizer.normalize(input)).toBe(output);
     });
+
+    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,87 @@
+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([
+                    NodeFactory.text('lorem ipsum', [
+                        NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+                    ])
+                ])
+            ])
+        ]);
+
+        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();
+    });
+
+    test('should not marge mark with same type', () => {
+        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: '400' })
+                ])
+            ])
+        ]);
+
+        expect(ContentNormalizer.normalize(input)).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,196 @@
+// 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",
+}
+`;
+
+exports[`normalize json content should not marge mark with same type 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "700",
+              },
+              "type": "font_weight",
+            },
+          ],
+          "text": "lorem",
+          "type": "text",
+        },
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "400",
+              },
+              "type": "font_weight",
+            },
+          ],
+          "text": " ipsum",
+          "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/__tests__/findMarkByType.test.js

@@ -0,0 +1,17 @@
+import { findMarkByType } from '../findMarkByType';
+
+describe('find mark by type', () => {
+    test('should find mark by type name', () => {
+        const searchingMark = { type: { name: 'font_weight' } };
+        const marks = [{ type: { name: 'font_size' } }, searchingMark];
+
+        expect(findMarkByType(marks, 'font_weight')).toBe(searchingMark);
+    });
+
+    test('should find mark by type object', () => {
+        const searchingMark = { type: { name: 'font_weight' } };
+        const marks = [{ type: { name: 'font_size' } }, searchingMark];
+
+        expect(findMarkByType(marks, { name: 'font_weight' })).toBe(searchingMark);
+    });
+});

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

@@ -0,0 +1,53 @@
+import { isMarkAppliedToParent } from '../isMarkAppliedToParent';
+
+const createMark = (attrs = {}) => ({
+    isInSet(set) {
+        return set.includes(this);
+    },
+    ...attrs
+});
+
+const createNode = (attrs = {}) => ({
+    resolve: jest.fn(),
+    path: [],
+    marks: [],
+    ...attrs
+});
+
+describe('is mark applied to parent', () => {
+    test('should return true if applied to parent', () => {
+        const checkingMark = createMark();
+        const doc = createNode();
+
+        doc.resolve.mockReturnValue({
+            path: [
+                createNode({ marks: [checkingMark] }),
+                0,
+                0,
+                createNode({ marks: [createMark()] }),
+                0,
+                1
+            ]
+        });
+
+        expect(isMarkAppliedToParent(doc, 0, checkingMark)).toBe(true);
+    });
+
+    test('should return false if not applied to parent', () => {
+        const checkingMark = createMark();
+        const doc = createNode();
+
+        doc.resolve.mockReturnValue({
+            path: [
+                createNode({ marks: [createMark()] }),
+                0,
+                0,
+                createNode({ marks: [createMark()] }),
+                0,
+                1
+            ]
+        });
+
+        expect(isMarkAppliedToParent(doc, 0, checkingMark)).toBe(false);
+    });
+});

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

@@ -0,0 +1,44 @@
+import { isNodeFullySelected } from '../isNodeFullySelected';
+
+const createResolvedPosition = (attrs = {}) => ({ ...attrs });
+const createSelection = (from, to) => ({ from, to });
+
+const createNode = (attrs = {}) => ({
+    resolve: jest.fn(() => 0),
+    ...attrs
+});
+
+describe('is node fully selected', () => {
+    test('should return false if selected part of text node', () => {
+        const doc = createNode();
+        const paragraph = createNode({ nodeSize: 245 });
+
+        doc.resolve.mockReturnValue(createResolvedPosition({ depth: 0 }));
+
+        const isSelected = isNodeFullySelected(doc, createSelection(7, 12), paragraph, 0);
+
+        expect(isSelected).toBe(false);
+    });
+
+    test('should return true if selected paragraph node', () => {
+        const doc = createNode();
+        const paragraph = createNode({ nodeSize: 245 });
+
+        doc.resolve.mockReturnValue(createResolvedPosition({ depth: 0 }));
+
+        const isSelected = isNodeFullySelected(doc, createSelection(1, 244), paragraph, 0);
+
+        expect(isSelected).toBe(true);
+    });
+
+    test('should return true if selected list item node', () => {
+        const doc = createNode();
+        const listItem = createNode({ nodeSize: 247 });
+
+        doc.resolve.mockReturnValue(createResolvedPosition({ depth: 2 }));
+
+        const isSelected = isNodeFullySelected(doc, createSelection(3, 246), listItem, 1);
+
+        expect(isSelected).toBe(true);
+    });
+});

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

@@ -0,0 +1,39 @@
+import { resolveTextPosition } from '../resolveTextPosition';
+
+const createPosition = (pos) => ({ pos });
+const createNode = (attrs) => ({ nodeSize: 0, ...attrs });
+
+describe('resolve text position', () => {
+    test('should resolve position in node range', () => {
+        const position = resolveTextPosition(
+            createPosition(2),
+            createPosition(5),
+            createNode({ nodeSize: 10 }),
+            1
+        );
+
+        expect(position).toEqual({ from: 2, to: 5 });
+    });
+
+    test('should limit start value by node start position', () => {
+        const position = resolveTextPosition(
+            createPosition(2),
+            createPosition(5),
+            createNode({ nodeSize: 10 }),
+            3
+        );
+
+        expect(position).toEqual({ from: 3, to: 5 });
+    });
+
+    test('should limit start value by node end position', () => {
+        const position = resolveTextPosition(
+            createPosition(2),
+            createPosition(15),
+            createNode({ nodeSize: 10 }),
+            1
+        );
+
+        expect(position).toEqual({ from: 2, to: 11 });
+    });
+});

package/lib/utils/copyMark.js

@@ -0,0 +1,5 @@
+import { cloneDeep } from 'lodash';
+
+export function copyMark(mark) {
+    return mark.type.create(cloneDeep(mark.attrs));
+}

package/lib/utils/index.js

@@ -8,8 +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';
+export { copyMark } from './copyMark';

package/lib/utils/isMarkAppliedToParent.js

@@ -1,14 +1,9 @@
-const DEFAULT_COMPARATOR = (parent, child) => child.eq(parent);
-
-export function isMarkAppliedToParent({ doc }, position, checkingMark, comparator = DEFAULT_COMPARATOR) {
+export function isMarkAppliedToParent(doc, position, checkingMark) {
     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;
-        }
+        if (checkingMark.isInSet(step.marks)) return true;
     }
 
     return false;

package/lib/utils/isNodeFullySelected.js

@@ -1,10 +1,7 @@
-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;
+export function isNodeFullySelected(doc, selection, node, position) {
+    const offset = doc.resolve(position).depth + 1;
+    const isFromMatch = selection.from - offset <= position;
+    const isToMatch = selection.to + offset >= node.nodeSize + position;
 
     return isFromMatch && isToMatch;
 }

package/lib/utils/resolveTextPosition.js

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