@zipify/wysiwyg 2.0.0-1 → 2.0.0-11

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

@@ -1,6 +1,20 @@
 import { ContentNormalizer } from '../ContentNormalizer';
 
 describe('normalize text content', () => {
+    test('should wrap root nodes in paragraphs', () => {
+        const input = '<strong>lorem</strong>ipsum';
+        const output = '<p><strong>lorem</strong>ipsum</p>';
+
+        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', () => {
         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>';

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

@@ -34,9 +34,11 @@ describe('normalize json content', () => {
     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')
+                NodeFactory.paragraph([
+                    NodeFactory.text('lorem ipsum', [
+                        NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+                    ])
+                ])
             ])
         ]);
 
@@ -67,4 +69,19 @@ describe('normalize json content', () => {
 
         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

@@ -157,3 +157,40 @@ Object {
   "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/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,4 +1,4 @@
-export function isMarkAppliedToParent({ doc }, position, checkingMark) {
+export function isMarkAppliedToParent(doc, position, checkingMark) {
     const steps = doc.resolve(position).path.reverse();
 
     for (const step of steps) {

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)
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "2.0.0-1",
+  "version": "2.0.0-11",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "bin": {
@@ -20,7 +20,8 @@
     "lib:build": "vite build --config config/build/lib.config.js",
     "lib:pre-release": "run-s lint:js lint:css test:unit",
     "lib:release": "export $(cat ./.env | xargs) && run-s lib:pre-release lib:build cli:build && release-it",
-    "cli:build": "rollup --config config/build/cli.config.js",
+    "cli:build": "NODE_ENV=production rollup --config config/build/cli.config.js",
+    "cli:dev": "NODE_ENV=development rollup --config config/build/cli.config.js --watch",
     "example:start": "NODE_ENV=development vite serve --config config/build/example.config.js",
     "example:build": "NODE_ENV=production vite build --config config/build/example.config.js",
     "test:unit": "jest .",
@@ -32,17 +33,18 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.6",
-    "@tiptap/core": "^2.0.0-beta.183",
-    "@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.85",
+    "@rollup/plugin-json": "^4.1.0",
+    "@tiptap/core": "^2.0.0-beta.195",
+    "@tiptap/extension-document": "^2.0.0-beta.195",
+    "@tiptap/extension-heading": "^2.0.0-beta.195",
+    "@tiptap/extension-history": "^2.0.0-beta.195",
+    "@tiptap/extension-link": "^2.0.0-beta.195",
+    "@tiptap/extension-list-item": "^2.0.0-beta.195",
+    "@tiptap/extension-paragraph": "^2.0.0-beta.195",
+    "@tiptap/extension-placeholder": "^2.0.0-beta.195",
+    "@tiptap/extension-superscript": "^2.0.0-beta.195",
+    "@tiptap/extension-text": "^2.0.0-beta.195",
+    "@tiptap/vue-2": "^2.0.0-beta.195",
     "commander": "^9.4.0",
     "jsdom": "^20.0.0",
     "lodash": "^4.17.21",
@@ -52,37 +54,45 @@
     "@zipify/colorpicker": "^2.2",
     "vue": "^2.7"
   },
+  "peerDependenciesMeta": {
+    "@zipify/colorpicker": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
   "devDependencies": {
-    "@babel/core": "^7.19.0",
-    "@babel/eslint-parser": "^7.18.9",
-    "@babel/plugin-transform-runtime": "^7.18.10",
-    "@babel/preset-env": "^7.19.0",
+    "@babel/core": "^7.19.1",
+    "@babel/eslint-parser": "^7.19.1",
+    "@babel/plugin-transform-runtime": "^7.19.1",
+    "@babel/preset-env": "^7.19.1",
     "@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",
+    "@rollup/plugin-node-resolve": "^14.1.0",
     "@rollup/plugin-replace": "^4.0.0",
     "@vue/test-utils": "^1.3.0",
-    "@vue/vue2-jest": "^29.0.0",
+    "@vue/vue2-jest": "^29.1.0",
     "@zipify/colorpicker": "^2.2.1",
-    "babel-jest": "^29.0.2",
-    "eslint": "8.22.0",
+    "babel-jest": "^29.0.3",
+    "eslint": "8.23.1",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-vue": "^9.4.0",
+    "eslint-plugin-vue": "^9.5.1",
     "gzipper": "^7.1.0",
     "husky": "^8.0.1",
-    "jest": "^29.0.2",
-    "jest-environment-jsdom": "^29.0.2",
+    "jest": "^29.0.3",
+    "jest-environment-jsdom": "^29.0.3",
     "lint-staged": "^13.0.3",
     "npm-run-all": "^4.1.5",
     "postcss-html": "^1.5.0",
-    "release-it": "^15.4.1",
+    "release-it": "^15.4.2",
     "rollup": "^2.79.0",
     "rollup-plugin-terser": "^7.0.2",
-    "stylelint": "^14.11.0",
+    "stylelint": "^14.12.0",
     "svgo": "^2.8.0",
-    "vite": "^3.1.0",
+    "vite": "^3.1.2",
     "vite-plugin-vue2": "^2.0.2",
     "vue": "^2.7.10",
     "vue-template-compiler": "^2.7.10"

package/lib/utils/resolveNodePosition.js

@@ -1,6 +0,0 @@
-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);
-}