@zipify/wysiwyg 2.0.0-1 → 2.0.0-11

package/lib/extensions/core/Heading.js

@@ -1,7 +1,8 @@
 import { Heading as Base } from '@tiptap/extension-heading';
+import { MarkGroups } from '../../enums';
 
 export const Heading = Base.extend({
-    marks: '_',
+    marks: MarkGroups.ALL,
 
     addOptions: () => ({
         levels: [1, 2, 3, 4],

package/lib/extensions/core/NodeProcessor.js

@@ -7,7 +7,7 @@ import {
     isNodeFullySelected,
     resolveTextPosition
 } from '../../utils';
-import { NodeTypes } from '../../enums';
+import { MarkGroups, NodeTypes } from '../../enums';
 import { AddNodeMarkStep, AttrStep, RemoveNodeMarkStep } from './steps';
 
 export const NodeProcessor = Extension.create({
@@ -18,8 +18,7 @@ export const NodeProcessor = Extension.create({
             setBlockAttributes: createCommand(({ commands, state }, name, attrs, defaults = {}) => {
                 const current = unref(commands.getBlockAttributes(name)) ?? {};
                 const { doc, tr } = state;
-                const { selection } = tr;
-                const { from, to } = selection;
+                const { from, to } = tr.selection;
 
                 doc.nodesBetween(from, to, (node, position) => {
                     if (!NodeTypes.blocks.includes(node.type.name)) return;
@@ -44,7 +43,7 @@ export const NodeProcessor = Extension.create({
                 const markType = getMarkType(name, schema);
                 const markGroup = markType.spec.group || '';
 
-                if (!markGroup.includes('settings')) {
+                if (!markGroup.includes(MarkGroups.SETTINGS)) {
                     // Apply inline mark if block level not supported
                     return commands.setMark(name, value);
                 }
@@ -58,9 +57,8 @@ export const NodeProcessor = Extension.create({
                     const applyingMark = markType.create({ ...(initialMark?.attrs || {}), ...value });
                     const textPosition = resolveTextPosition($from, $to, node, position);
 
-                    if (isMarkAppliedToParent(tr, position, applyingMark)) {
-                        tr.removeMark(textPosition.from, textPosition.to, applyingMark.type);
-                        return;
+                    if (isMarkAppliedToParent(tr.doc, position, applyingMark)) {
+                        return commands._removeNodeMark({ tr, node, position, mark: markType });
                     }
 
                     if (node.isText) {
@@ -68,7 +66,7 @@ export const NodeProcessor = Extension.create({
                         return;
                     }
 
-                    if (isNodeFullySelected($from, $to, node, position)) {
+                    if (isNodeFullySelected(tr.doc, tr.selection, node, position)) {
                         tr.step(new AddNodeMarkStep(position, applyingMark));
                     }
                 });
@@ -105,29 +103,52 @@ export const NodeProcessor = Extension.create({
             }),
 
             getDeviceSettingMark: createCommand(({ commands }, name, defaultRef) => {
-                const selectionRef = commands.getMark(name);
+                const selectionRef = commands.getMarks(name);
                 const deviceRef = commands.getDevice();
 
-                return computed(() => unref(selectionRef)?.[unref(deviceRef)] ?? unref(defaultRef));
+                return computed(() => {
+                    for (const attrs of unref(selectionRef)) {
+                        const value = attrs[unref(deviceRef)];
+
+                        if (value) return value;
+                    }
+
+                    return unref(defaultRef);
+                });
             }),
 
-            removeMarks: createCommand(({ state }, marks) => {
-                const { tr, selection, doc } = state;
-                const { $from, $to } = selection;
+            removeAllMarks: createCommand(({ state, commands }) => {
+                const { tr, doc } = state;
+                const { from, to } = tr.selection;
 
-                if ($from.pos === $to.pos) return;
+                doc.nodesBetween(from, to, (node, position) => {
+                    for (const mark of node.marks) {
+                        commands._removeNodeMark({ tr, node, position, mark });
+                    }
+                });
+            }),
 
-                doc.nodesBetween($from.pos, $to.pos, (node, position) => {
-                    const textPosition = resolveTextPosition($from, $to, node, position);
+            removeMarks: createCommand(({ state, commands }, marks) => {
+                const { tr, doc } = state;
+                const { from, to } = tr.selection;
 
-                    const removeMark = (mark) => node.isText
-                        ? tr.removeMark(textPosition.from, textPosition.to, mark)
-                        : tr.step(new RemoveNodeMarkStep(position, mark));
+                doc.nodesBetween(from, to, (node, position) => {
+                    const removingMarks = node.marks.filter((mark) => marks.includes(mark.type.name));
 
-                    for (const mark of node.marks) {
-                        if (marks.includes(mark.type.name)) removeMark(mark);
+                    for (const mark of removingMarks) {
+                        commands._removeNodeMark({ tr, node, position, mark });
                     }
                 });
+            }),
+
+            removeMark: createCommand(({ commands, state }, node, position, mark) => {
+                commands._removeNodeMark({ tr: state.tr, node, position, mark });
+            }),
+
+            _removeNodeMark: createCommand((context, { tr, node, position, mark }) => {
+                return node.isText
+                    ? tr.removeMark(position, position + node.nodeSize, mark)
+                    : tr.step(new RemoveNodeMarkStep(position, mark));
             })
         };
     }

package/lib/extensions/core/Paragraph.js

@@ -1,7 +1,8 @@
 import { Paragraph as Base } from '@tiptap/extension-paragraph';
+import { MarkGroups } from '../../enums';
 
 export const Paragraph = Base.extend({
-    marks: '_',
+    marks: MarkGroups.ALL,
 
     addOptions: () => ({
         HTMLAttributes: { class: 'zw-style' }

package/lib/extensions/core/__tests__/NodeProcessor.test.js

@@ -1,7 +1,10 @@
+import { ref } from 'vue';
 import { Editor, Extension, Mark } from '@tiptap/vue-2';
 import { buildTestExtensions } from '../../../__tests__/utils';
-import { NodeTypes, TextSettings } from '../../../enums';
+import { Devices, ListTypes, MarkGroups, NodeTypes, TextSettings } from '../../../enums';
 import { ContentNormalizer, NodeFactory } from '../../../services';
+import { createCommand } from '../../../utils';
+import { List } from '../../list';
 
 const MockLineHeight = Extension.create({
     name: TextSettings.LINE_HEIGHT,
@@ -19,18 +22,59 @@ const MockLineHeight = Extension.create({
     ]
 });
 
+const MockTextDecoration = Mark.create({
+    name: TextSettings.TEXT_DECORATION,
+    renderHTML: () => ['span', {}, 0],
+
+    addAttributes: () => ({
+        underline: { default: false },
+        strike_through: { default: false }
+    })
+});
+
 const MockFontWeight = Mark.create({
     name: TextSettings.FONT_WEIGHT,
-    group: 'settings',
+    group: MarkGroups.SETTINGS,
     renderHTML: () => ['span', {}, 0],
     addAttributes: () => ({ value: { required: true } })
 });
 
-function createEditor({ content }) {
+const MockFontSize = Mark.create({
+    name: TextSettings.FONT_SIZE,
+    group: MarkGroups.SETTINGS,
+    renderHTML: () => ['span', {}, 0],
+
+    addAttributes: () => ({
+        mobile: { default: null },
+        tablet: { default: null },
+        desktop: { default: null }
+    })
+});
+
+const DeviceManager = Extension.create({
+    name: 'device_manager',
+
+    addOptions: () => ({
+        device: { required: true }
+    }),
+
+    addCommands() {
+        return { getDevice: createCommand(() => ref(this.options.device)) };
+    }
+});
+
+function createEditor({ content, device }) {
     return new Editor({
         content: ContentNormalizer.normalize(content),
         extensions: buildTestExtensions({
-            include: [MockLineHeight, MockFontWeight]
+            include: [
+                MockLineHeight,
+                MockFontWeight,
+                MockFontSize,
+                MockTextDecoration,
+                List.configure({ baseClass: 'zw-list--' }),
+                DeviceManager.configure({ device: device ?? Devices.DESKTOP })
+            ]
         })
     });
 }
@@ -54,7 +98,7 @@ describe('block attributes', () => {
                 line_height: { mobile: '1.2' }
             })
         });
-        const attrs = editor.commands.getBlockAttributes('line_height');
+        const attrs = editor.commands.getBlockAttributes(TextSettings.LINE_HEIGHT);
 
         expect(attrs.value).toEqual({ mobile: '1.2' });
     });
@@ -65,7 +109,7 @@ describe('block attributes', () => {
                 line_height: { mobile: '1.2' }
             })
         });
-        const attrs = editor.commands.getBlockAttributes('line_height', DEFAULTS);
+        const attrs = editor.commands.getBlockAttributes(TextSettings.LINE_HEIGHT, DEFAULTS);
 
         expect(attrs.value).toEqual({
             mobile: '1.2',
@@ -78,7 +122,7 @@ describe('block attributes', () => {
         const editor = createEditor({
             content: createContent({ line_height: null })
         });
-        const attrs = editor.commands.getBlockAttributes('line_height');
+        const attrs = editor.commands.getBlockAttributes(TextSettings.LINE_HEIGHT);
 
         expect(attrs.value).toEqual(null);
     });
@@ -89,7 +133,7 @@ describe('block attributes', () => {
         });
 
         editor.commands.selectAll();
-        editor.commands.setBlockAttributes('line_height', { mobile: '1.3' });
+        editor.commands.setBlockAttributes(TextSettings.LINE_HEIGHT, { mobile: '1.3' });
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -100,7 +144,7 @@ describe('block attributes', () => {
         });
 
         editor.commands.selectAll();
-        editor.commands.setBlockAttributes('line_height', { mobile: '1.3' }, DEFAULTS);
+        editor.commands.setBlockAttributes(TextSettings.LINE_HEIGHT, { mobile: '1.3' }, DEFAULTS);
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -113,7 +157,7 @@ describe('block attributes', () => {
         });
 
         editor.commands.selectAll();
-        editor.commands.setBlockAttributes('line_height', { mobile: '1.3' });
+        editor.commands.setBlockAttributes(TextSettings.LINE_HEIGHT, { mobile: '1.3' });
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -126,7 +170,7 @@ describe('block attributes', () => {
         });
 
         editor.commands.selectAll();
-        editor.commands.setBlockAttributes('line_height', { mobile: '1.3' }, DEFAULTS);
+        editor.commands.setBlockAttributes(TextSettings.LINE_HEIGHT, { mobile: '1.3' }, DEFAULTS);
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -191,6 +235,260 @@ describe('apply mark', () => {
     });
 });
 
+describe('apply mark', () => {
+    test('should apply inline mark', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph('lorem ipsum')
+            ])
+        });
+
+        editor.commands.selectAll();
+        editor.commands.applyMark(TextSettings.TEXT_DECORATION, { underline: true });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should apply mark to part of text', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph('lorem ipsum')
+            ])
+        });
+
+        editor.commands.setTextSelection({ from: 1, to: 6 });
+        editor.commands.applyMark(TextSettings.FONT_WEIGHT, { value: '700' });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should apply mark to paragraph', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph('lorem ipsum')
+            ])
+        });
+
+        editor.commands.selectAll();
+        editor.commands.applyMark(TextSettings.FONT_WEIGHT, { value: '700' });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should remove text mark on applying to paragraph', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph([
+                    NodeFactory.text('lorem', [
+                        NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '400' })
+                    ]),
+                    NodeFactory.text(' ipsum')
+                ])
+            ])
+        });
+
+        editor.commands.selectAll();
+        editor.commands.applyMark(TextSettings.FONT_WEIGHT, { value: '700' });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should apply mark to list item', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.list(ListTypes.DISC, [
+                    'lorem ipsum 1',
+                    'lorem ipsum 2'
+                ])
+            ])
+        });
+
+        editor.commands.setTextSelection({ from: 1, to: 16 });
+        editor.commands.applyMark(TextSettings.FONT_WEIGHT, { value: '700' });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should remove paragraph mark on applying to list item', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.list(ListTypes.DISC, [
+                    NodeFactory.listItem([
+                        NodeFactory.paragraph(null, [
+                            NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '400' })
+                        ], 'lorem ipsum 1'),
+
+                        'lorem ipsum 2' // prevent move mark to list item on init
+                    ]),
+
+                    'lorem ipsum 3'
+                ])
+            ])
+        });
+
+        editor.commands.setTextSelection({ from: 1, to: 31 });
+        editor.commands.applyMark(TextSettings.FONT_WEIGHT, { value: '700' });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});
+
+describe('get marks', () => {
+    test('should get marks', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph(null, [
+                    NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '400' })
+                ], [
+                    NodeFactory.text('lorem', [
+                        NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+                    ]),
+                    NodeFactory.text(' ipsum')
+                ])
+            ])
+        });
+
+        editor.commands.selectAll();
+        const selectionRef = editor.commands.getMarks(TextSettings.FONT_WEIGHT);
+
+        expect(selectionRef.value).toEqual([
+            { value: '700' },
+            { value: '400' }
+        ]);
+    });
+
+    test('should get empty marks', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph('lorem ipsum')
+            ])
+        });
+
+        editor.commands.selectAll();
+        const selectionRef = editor.commands.getMarks(TextSettings.FONT_WEIGHT);
+
+        expect(selectionRef.value).toEqual([]);
+    });
+});
+
+describe('get mark', () => {
+    test('should get text mark', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph(null, [
+                    NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '400' })
+                ], [
+                    NodeFactory.text('lorem', [
+                        NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+                    ]),
+                    NodeFactory.text(' ipsum')
+                ])
+            ])
+        });
+
+        editor.commands.selectAll();
+        const selectionRef = editor.commands.getMark(TextSettings.FONT_WEIGHT);
+
+        expect(selectionRef.value).toEqual({ value: '700' });
+    });
+
+    test('should get block mark', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph(null, [
+                    NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '400' })
+                ], 'lorem ipsum')
+            ])
+        });
+
+        editor.commands.selectAll();
+        const selectionRef = editor.commands.getMark(TextSettings.FONT_WEIGHT);
+
+        expect(selectionRef.value).toEqual({ value: '400' });
+    });
+});
+
+describe('get setting mark', () => {
+    test('should get common setting mark', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph(null, [
+                    NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '400' })
+                ], 'lorem ipsum')
+            ])
+        });
+
+        editor.commands.selectAll();
+        const selectionRef = editor.commands.getCommonSettingMark(TextSettings.FONT_WEIGHT);
+
+        expect(selectionRef.value).toEqual('400');
+    });
+
+    test('should get default of common setting mark', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph('lorem ipsum')
+            ])
+        });
+
+        editor.commands.selectAll();
+        const selectionRef = editor.commands.getCommonSettingMark(TextSettings.FONT_WEIGHT, ref('400'));
+
+        expect(selectionRef.value).toEqual('400');
+    });
+
+    test('should get device setting mark', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph(null, [
+                    NodeFactory.mark(TextSettings.FONT_SIZE, { mobile: '23' })
+                ], 'lorem ipsum')
+            ]),
+            device: Devices.MOBILE
+        });
+
+        editor.commands.selectAll();
+        const selectionRef = editor.commands.getDeviceSettingMark(TextSettings.FONT_SIZE);
+
+        expect(selectionRef.value).toEqual('23');
+    });
+
+    test('should get default of device setting mark', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph('lorem ipsum')
+            ]),
+            device: Devices.MOBILE
+        });
+
+        editor.commands.selectAll();
+        const selectionRef = editor.commands.getDeviceSettingMark(TextSettings.FONT_SIZE, ref('23'));
+
+        expect(selectionRef.value).toEqual('23');
+    });
+
+    test('should inherit device setting mark', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph(null, [
+                    NodeFactory.mark(TextSettings.FONT_SIZE, { mobile: '23' })
+                ], [
+                    NodeFactory.text('lorem', [
+                        NodeFactory.mark(TextSettings.FONT_SIZE, { tablet: '25' })
+                    ]),
+                    NodeFactory.text(' ipsum')
+                ])
+            ]),
+            device: Devices.MOBILE
+        });
+
+        editor.commands.selectAll();
+        const selectionRef = editor.commands.getDeviceSettingMark(TextSettings.FONT_SIZE);
+
+        expect(selectionRef.value).toEqual('23');
+    });
+});
+
 describe('remove marks', () => {
     test('should remove text marks', () => {
         const editor = createEditor({

package/lib/extensions/core/__tests__/TextProcessor.test.js

@@ -138,7 +138,7 @@ describe('transform text', () => {
             content: NodeFactory.doc([
                 NodeFactory.paragraph([
                     NodeFactory.text('hello world', [
-                        NodeFactory.mark('font_weight', { value: '700' })
+                        NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
                     ])
                 ])
             ])