@zipify/wysiwyg 1.3.0-0 → 2.0.0-1

package/lib/extensions/__tests__/__snapshots__/FontWeight.test.js.snap

@@ -6,18 +6,18 @@ Object {
     Object {
       "content": Array [
         Object {
-          "marks": Array [
-            Object {
-              "attrs": Object {
-                "value": "700",
-              },
-              "type": "font_weight",
-            },
-          ],
           "text": "hello world",
           "type": "text",
         },
       ],
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "value": "700",
+          },
+          "type": "font_weight",
+        },
+      ],
       "type": "paragraph",
     },
   ],
@@ -31,18 +31,18 @@ Object {
     Object {
       "content": Array [
         Object {
-          "marks": Array [
-            Object {
-              "attrs": Object {
-                "value": "700",
-              },
-              "type": "font_weight",
-            },
-          ],
           "text": "hello world",
           "type": "text",
         },
       ],
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "value": "700",
+          },
+          "type": "font_weight",
+        },
+      ],
       "type": "paragraph",
     },
   ],
@@ -56,24 +56,24 @@ Object {
     Object {
       "content": Array [
         Object {
-          "marks": Array [
-            Object {
-              "attrs": Object {
-                "value": "Bungee",
-              },
-              "type": "font_family",
-            },
-            Object {
-              "attrs": Object {
-                "value": "800",
-              },
-              "type": "font_weight",
-            },
-          ],
           "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",
     },
   ],
@@ -87,24 +87,24 @@ Object {
     Object {
       "content": Array [
         Object {
-          "marks": Array [
-            Object {
-              "attrs": Object {
-                "value": "Bungee",
-              },
-              "type": "font_family",
-            },
-            Object {
-              "attrs": Object {
-                "value": "300",
-              },
-              "type": "font_weight",
-            },
-          ],
           "text": "hello world",
           "type": "text",
         },
       ],
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "value": "Bungee",
+          },
+          "type": "font_family",
+        },
+        Object {
+          "attrs": Object {
+            "value": "300",
+          },
+          "type": "font_weight",
+        },
+      ],
       "type": "paragraph",
     },
   ],
@@ -118,18 +118,18 @@ Object {
     Object {
       "content": Array [
         Object {
-          "marks": Array [
-            Object {
-              "attrs": Object {
-                "value": "400",
-              },
-              "type": "font_weight",
-            },
-          ],
           "text": "hello world",
           "type": "text",
         },
       ],
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "value": "400",
+          },
+          "type": "font_weight",
+        },
+      ],
       "type": "paragraph",
     },
   ],
@@ -172,18 +172,18 @@ Object {
     Object {
       "content": Array [
         Object {
-          "marks": Array [
-            Object {
-              "attrs": Object {
-                "value": "700",
-              },
-              "type": "font_weight",
-            },
-          ],
           "text": "test",
           "type": "text",
         },
       ],
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "value": "700",
+          },
+          "type": "font_weight",
+        },
+      ],
       "type": "paragraph",
     },
   ],
@@ -313,18 +313,18 @@ Object {
           "type": "text",
         },
         Object {
-          "marks": Array [
-            Object {
-              "attrs": Object {
-                "value": "500",
-              },
-              "type": "font_weight",
-            },
-          ],
           "text": " ipsum",
           "type": "text",
         },
       ],
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "value": "500",
+          },
+          "type": "font_weight",
+        },
+      ],
       "type": "paragraph",
     },
   ],
@@ -338,18 +338,18 @@ Object {
     Object {
       "content": Array [
         Object {
-          "marks": Array [
-            Object {
-              "attrs": Object {
-                "value": "700",
-              },
-              "type": "font_weight",
-            },
-          ],
           "text": "test",
           "type": "text",
         },
       ],
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "value": "700",
+          },
+          "type": "font_weight",
+        },
+      ],
       "type": "paragraph",
     },
   ],
@@ -357,4 +357,4 @@ Object {
 }
 `;
 
-exports[`rendering should render html 1`] = `"<p class="zw-style"><span style="--zw-font-weight:700;" class="zw-style">hello world</span></p>"`;
+exports[`rendering should render html 1`] = `"<span style="--zw-font-weight:700;" class="zw-style"><p class="zw-style">hello world</p></span>"`;

package/lib/extensions/__tests__/__snapshots__/TextDecoration.test.js.snap

@@ -26,6 +26,71 @@ Object {
 }
 `;
 
+exports[`apply decoration should apply decoration with decorated parent false value 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "strike_through": false,
+                "underline": true,
+              },
+              "type": "text_decoration",
+            },
+          ],
+          "text": "hello",
+          "type": "text",
+        },
+        Object {
+          "text": " world",
+          "type": "text",
+        },
+      ],
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "strike_through": false,
+            "underline": false,
+          },
+          "type": "text_decoration",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`apply decoration should not apply decoration with decorated parent 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "strike_through": false,
+                "underline": true,
+              },
+              "type": "text_decoration",
+            },
+          ],
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
 exports[`apply decoration should second decoration 1`] = `
 Object {
   "content": Array [
@@ -62,7 +127,7 @@ Object {
             Object {
               "attrs": Object {
                 "strike_through": false,
-                "underline": true,
+                "underline": false,
               },
               "type": "text_decoration",
             },
@@ -113,7 +178,7 @@ Object {
           "marks": Array [
             Object {
               "attrs": Object {
-                "strike_through": true,
+                "strike_through": false,
                 "underline": false,
               },
               "type": "text_decoration",
@@ -454,7 +519,7 @@ Object {
             Object {
               "attrs": Object {
                 "strike_through": true,
-                "underline": false,
+                "underline": true,
               },
               "type": "text_decoration",
             },

package/lib/extensions/core/Document.js

@@ -0,0 +1,5 @@
+import { Document as Base } from '@tiptap/extension-document';
+
+export const Document = Base.extend({
+    marks: 'settings'
+});

package/lib/extensions/core/Heading.js

@@ -0,0 +1,10 @@
+import { Heading as Base } from '@tiptap/extension-heading';
+
+export const Heading = Base.extend({
+    marks: '_',
+
+    addOptions: () => ({
+        levels: [1, 2, 3, 4],
+        HTMLAttributes: { class: 'zw-style' }
+    })
+});

package/lib/extensions/core/NodeProcessor.js

@@ -1,21 +1,31 @@
-import { Extension } from '@tiptap/vue-2';
-import { computed, unref } from 'vue';
-import { createCommand } from '../../utils';
+import { Extension, getMarkType } from '@tiptap/vue-2';
+import { computed, toRef, unref } from 'vue';
+import {
+    createCommand,
+    findMarkByType,
+    isMarkAppliedToParent,
+    isNodeFullySelected,
+    resolveTextPosition
+} from '../../utils';
 import { NodeTypes } from '../../enums';
+import { AddNodeMarkStep, AttrStep, RemoveNodeMarkStep } from './steps';
 
 export const NodeProcessor = Extension.create({
     name: 'node_processor',
 
     addCommands() {
         return {
-            setBlockAttributes: createCommand(({ commands }, name, attrs, defaults = {}) => {
+            setBlockAttributes: createCommand(({ commands, state }, name, attrs, defaults = {}) => {
                 const current = unref(commands.getBlockAttributes(name)) ?? {};
+                const { doc, tr } = state;
+                const { selection } = tr;
+                const { from, to } = selection;
 
-                for (const type of NodeTypes.blocks) {
-                    commands.updateAttributes(type, {
-                        [name]: { ...defaults, ...current, ...attrs }
-                    });
-                }
+                doc.nodesBetween(from, to, (node, position) => {
+                    if (!NodeTypes.blocks.includes(node.type.name)) return;
+
+                    tr.step(new AttrStep(position, name, { ...defaults, ...current, ...attrs }));
+                });
             }),
 
             getBlockAttributes: createCommand(({ editor }, name, defaults) => computed(() => {
@@ -26,7 +36,99 @@ export const NodeProcessor = Extension.create({
                 }
 
                 return Object.keys(attrs).length ? attrs : null;
-            }))
+            })),
+
+            applyMark: createCommand(({ state, commands }, name, value) => {
+                const { tr, doc, schema } = state;
+                const { $from, $to } = tr.selection;
+                const markType = getMarkType(name, schema);
+                const markGroup = markType.spec.group || '';
+
+                if (!markGroup.includes('settings')) {
+                    // Apply inline mark if block level not supported
+                    return commands.setMark(name, value);
+                }
+
+                if ($from.pos === $to.pos) return;
+
+                doc.nodesBetween($from.pos, $to.pos, (node, position) => {
+                    if (node.type.name === NodeTypes.LIST) return;
+
+                    const initialMark = findMarkByType(node.marks, name);
+                    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 (node.isText) {
+                        tr.addMark(textPosition.from, textPosition.to, applyingMark);
+                        return;
+                    }
+
+                    if (isNodeFullySelected($from, $to, node, position)) {
+                        tr.step(new AddNodeMarkStep(position, applyingMark));
+                    }
+                });
+            }),
+
+            getMarks: createCommand(({ editor }, name) => {
+                const stateRef = toRef(editor, 'state');
+
+                return computed(() => {
+                    const { selection, doc } = unref(stateRef);
+                    const { from, to } = unref(selection);
+                    const marks = [];
+
+                    doc.nodesBetween(from, to, (node) => {
+                        for (const mark of node.marks) {
+                            if (mark.type.name === name) marks.unshift(mark.attrs);
+                        }
+                    });
+
+                    return marks;
+                });
+            }),
+
+            getMark: createCommand(({ commands }, name) => {
+                const marksRef = commands.getMarks(name);
+
+                return computed(() => unref(marksRef)[0] ?? null);
+            }),
+
+            getCommonSettingMark: createCommand(({ commands }, name, defaultRef) => {
+                const selectionRef = commands.getMark(name);
+
+                return computed(() => unref(selectionRef)?.value ?? unref(defaultRef));
+            }),
+
+            getDeviceSettingMark: createCommand(({ commands }, name, defaultRef) => {
+                const selectionRef = commands.getMark(name);
+                const deviceRef = commands.getDevice();
+
+                return computed(() => unref(selectionRef)?.[unref(deviceRef)] ?? unref(defaultRef));
+            }),
+
+            removeMarks: createCommand(({ state }, marks) => {
+                const { tr, selection, doc } = state;
+                const { $from, $to } = selection;
+
+                if ($from.pos === $to.pos) return;
+
+                doc.nodesBetween($from.pos, $to.pos, (node, position) => {
+                    const textPosition = resolveTextPosition($from, $to, node, position);
+
+                    const removeMark = (mark) => node.isText
+                        ? tr.removeMark(textPosition.from, textPosition.to, mark)
+                        : tr.step(new RemoveNodeMarkStep(position, mark));
+
+                    for (const mark of node.marks) {
+                        if (marks.includes(mark.type.name)) removeMark(mark);
+                    }
+                });
+            })
         };
     }
 });

package/lib/extensions/core/Paragraph.js

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

package/lib/extensions/core/TextProcessor.js

@@ -1,5 +1,5 @@
 import { Extension } from '@tiptap/vue-2';
-import { createCommand } from '../../utils';
+import { createCommand, resolveTextPosition } from '../../utils';
 
 export const TextProcessor = Extension.create({
     name: 'text_processor',
@@ -12,31 +12,24 @@ export const TextProcessor = Extension.create({
                 return state.doc.textBetween(from, to, ' ');
             }),
 
-            unsetMarks: createCommand(({ commands }, marks) => {
-                marks.forEach((mark) => commands.unsetMark(mark));
-            }),
-
             transformText: createCommand(({ state }, transform) => {
-                const { selection } = state.tr;
+                const { $from, $to } = state.tr.selection;
 
-                if (selection.from === selection.to) return;
+                if ($from.pos === $to.pos) return;
 
-                state.doc.nodesBetween(selection.from, selection.to, (node, position) => {
+                state.doc.nodesBetween($from.pos, $to.pos, (node, position) => {
                     if (!node.isText) return;
 
-                    const startPosition = Math.max(position, selection.from);
-                    const endPosition = Math.min(position + node.nodeSize, selection.to);
-
-                    const substringFrom = Math.max(0, selection.from - position);
-                    const substringTo = Math.max(0, selection.to - position);
+                    const textPosition = resolveTextPosition($from, $to, node, position);
+                    const substringFrom = Math.max(0, $from.pos - position);
+                    const substringTo = Math.max(0, $to.pos - position);
 
                     const updatedText = transform({
-                        text: node.textContent.substring(substringFrom, substringTo),
-                        position: { start: startPosition, end: endPosition }
+                        text: node.textContent.substring(substringFrom, substringTo)
                     });
                     const updatedNode = state.schema.text(updatedText, node.marks);
 
-                    state.tr.replaceWith(startPosition, endPosition, updatedNode);
+                    state.tr.replaceWith(textPosition.from, textPosition.to, updatedNode);
                 });
             })
         };