@zipify/wysiwyg 2.0.0-2 → 2.0.0-3

package/dist/wysiwyg.mjs

@@ -26,7 +26,7 @@ var __privateMethod = (obj, member, method) => {
   __accessCheck(obj, member, "access private method");
   return method;
 };
-var _domParser, _parser, _NodeFilter, NodeFilter_get, _Node, Node_get, _removeComments, removeComments_fn, _createNodeIterator, createNodeIterator_fn, _iterateNodes, iterateNodes_fn, _runIterator, runIterator_fn, _removeEmptyNodes, removeEmptyNodes_fn, _normalizeListItems, normalizeListItems_fn, _isBlockNode, isBlockNode_fn, _assignElementProperties, assignElementProperties_fn, _removeStyleProperties, removeStyleProperties_fn, _normalizeBreakLines, normalizeBreakLines_fn, _normalizeBlockTextDecoration, normalizeBlockTextDecoration_fn, _moveTextDecorationToChildren, moveTextDecorationToChildren_fn, _parseTextDecoration, parseTextDecoration_fn, _wrapTextNode, wrapTextNode_fn, _iterateNodes2, iterateNodes_fn2, _iterateChildNodes, iterateChildNodes_fn, _bubbleMarks, bubbleMarks_fn, _canBubbleMark, canBubbleMark_fn, _includesMark, includesMark_fn, _includesMarkType, includesMarkType_fn, _removeMark, removeMark_fn, _addMark, addMark_fn, _findMarkIndexByType, findMarkIndexByType_fn, _buildHtml, buildHtml_fn, _buildJson, buildJson_fn, _textBlock, textBlock_fn, _normalizeTextBlockArgs, normalizeTextBlockArgs_fn;
+var _domParser, _parser, _NodeFilter, NodeFilter_get, _Node, Node_get, _removeComments, removeComments_fn, _createNodeIterator, createNodeIterator_fn, _iterateNodes, iterateNodes_fn, _runIterator, runIterator_fn, _removeEmptyNodes, removeEmptyNodes_fn, _normalizeListItems, normalizeListItems_fn, _isBlockNode, isBlockNode_fn, _assignElementProperties, assignElementProperties_fn, _removeStyleProperties, removeStyleProperties_fn, _normalizeBreakLines, normalizeBreakLines_fn, _normalizeBlockTextDecoration, normalizeBlockTextDecoration_fn, _moveTextDecorationToChildren, moveTextDecorationToChildren_fn, _parseTextDecoration, parseTextDecoration_fn, _normalizeBlockBackgroundColor, normalizeBlockBackgroundColor_fn, _moveBackgroundColorToChildren, moveBackgroundColorToChildren_fn, _wrapTextNode, wrapTextNode_fn, _iterateNodes2, iterateNodes_fn2, _iterateChildNodes, iterateChildNodes_fn, _bubbleMarks, bubbleMarks_fn, _canBubbleMark, canBubbleMark_fn, _includesMark, includesMark_fn, _includesMarkType, includesMarkType_fn, _removeMark, removeMark_fn, _addMark, addMark_fn, _findMarkIndexByType, findMarkIndexByType_fn, _buildHtml, buildHtml_fn, _buildJson, buildJson_fn, _textBlock, textBlock_fn, _normalizeTextBlockArgs, normalizeTextBlockArgs_fn;
 import { computed, ref, watch, inject, onUnmounted, nextTick, provide, onMounted, toRef, unref, reactive } from "vue";
 import { ColorModel, ZipifyColorPicker } from "@zipify/colorpicker";
 function OrderedMap(content) {
@@ -14031,7 +14031,7 @@ const TextSettings = Object.freeze({
     return [this.ALIGNMENT, this.LINE_HEIGHT, this.MARGIN];
   },
   get inlineMarks() {
-    return [this.TEXT_DECORATION, this.LINK, this.SUPERSCRIPT];
+    return [this.TEXT_DECORATION, this.LINK, this.SUPERSCRIPT, this.BACKGROUND_COLOR];
   },
   get marks() {
     return [
@@ -14459,15 +14459,10 @@ const resolveTextPosition = ($from, $to, node, position) => ({
   from: Math.max(position, $from.pos),
   to: Math.min(position + node.nodeSize, $to.pos)
 });
-function resolveNodeTextOffset({ path }, node) {
-  const nodes = path.filter((step) => typeof step === "object");
-  const index = nodes.indexOf(node);
-  return nodes.slice(index).reverse().length;
-}
-function isNodeFullySelected($from, $to, node, position) {
-  const offset2 = resolveNodeTextOffset($from, node);
-  const isFromMatch = $from.pos - offset2 <= position;
-  const isToMatch = $to.pos + offset2 >= node.nodeSize + position;
+function isNodeFullySelected(doc2, selection, node, position) {
+  const offset2 = doc2.resolve(position).depth + 1;
+  const isFromMatch = selection.from - offset2 <= position;
+  const isToMatch = selection.to + offset2 >= node.nodeSize + position;
   return isFromMatch && isToMatch;
 }
 function isMarkAppliedToParent(doc2, position, checkingMark) {
@@ -19558,6 +19553,8 @@ const _HtmlNormalizer = class extends BaseNormalizer {
     __privateAdd(this, _normalizeBlockTextDecoration);
     __privateAdd(this, _moveTextDecorationToChildren);
     __privateAdd(this, _parseTextDecoration);
+    __privateAdd(this, _normalizeBlockBackgroundColor);
+    __privateAdd(this, _moveBackgroundColorToChildren);
     __privateAdd(this, _wrapTextNode);
     __privateAdd(this, _parser, void 0);
     __privateSet(this, _parser, parser);
@@ -19574,6 +19571,7 @@ const _HtmlNormalizer = class extends BaseNormalizer {
     __privateMethod(this, _iterateNodes, iterateNodes_fn).call(this, __privateMethod(this, _removeEmptyNodes, removeEmptyNodes_fn), __privateMethod(this, _isBlockNode, isBlockNode_fn));
     __privateMethod(this, _iterateNodes, iterateNodes_fn).call(this, __privateMethod(this, _normalizeListItems, normalizeListItems_fn), (node) => node.tagName === "LI");
     __privateMethod(this, _normalizeBlockTextDecoration, normalizeBlockTextDecoration_fn).call(this);
+    __privateMethod(this, _normalizeBlockBackgroundColor, normalizeBlockBackgroundColor_fn).call(this);
   }
   get normalizedHTML() {
     return this.dom.body.innerHTML;
@@ -19746,6 +19744,25 @@ parseTextDecoration_fn = function(element) {
     line_through: decoration.includes("line-through")
   };
 };
+_normalizeBlockBackgroundColor = new WeakSet();
+normalizeBlockBackgroundColor_fn = function() {
+  const blockEls = this.dom.querySelectorAll('[style*="background-color"]:where(p, h1, h2, h3, h4, li)');
+  for (const blockEl of blockEls) {
+    __privateMethod(this, _moveBackgroundColorToChildren, moveBackgroundColorToChildren_fn).call(this, blockEl);
+  }
+};
+_moveBackgroundColorToChildren = new WeakSet();
+moveBackgroundColorToChildren_fn = function(blockEl) {
+  const blockColor = blockEl.style.backgroundColor;
+  blockEl.style.removeProperty("background-color");
+  if (!blockEl.style.cssText)
+    blockEl.removeAttribute("style");
+  for (const childNode of blockEl.childNodes) {
+    const textEl = __privateMethod(this, _wrapTextNode, wrapTextNode_fn).call(this, blockEl, childNode);
+    const color = textEl.style.backgroundColor || blockColor;
+    textEl.style.backgroundColor = color;
+  }
+};
 _wrapTextNode = new WeakSet();
 wrapTextNode_fn = function(parent, node) {
   if (node.nodeType !== __privateGet(this, _Node, Node_get).TEXT_NODE)
@@ -20680,7 +20697,7 @@ canBubbleMark_fn = function(node, childMark) {
   for (const child of node.content) {
     if (!child.marks)
       return false;
-    if (!__privateMethod(this, _includesMarkType, includesMarkType_fn).call(this, child, childMark.type))
+    if (!__privateMethod(this, _includesMark, includesMark_fn).call(this, child, childMark))
       return false;
   }
   return true;
@@ -24177,7 +24194,7 @@ const StylePreset = Extension.create({
         chain().storeSelection().expandSelectionToBlock().removeMarks(TextSettings.marks).resetAttributes(NodeTypes.PARAGRAPH, TextSettings.attributes).resetAttributes(NodeTypes.HEADING, TextSettings.attributes).restoreSelection().run();
       }),
       removeFormat: createCommand(({ chain }) => {
-        chain().storeSelection().expandSelectionToBlock().unsetAllMarks().applyDefaultPreset().restoreSelection().run();
+        chain().storeSelection().expandSelectionToBlock().removeAllMarks().applyDefaultPreset().restoreSelection().run();
       })
     };
   },
@@ -24394,7 +24411,6 @@ const FontColor = Mark.create({
 });
 const BackgroundColor = Mark.create({
   name: TextSettings.BACKGROUND_COLOR,
-  group: MarkGroups.SETTINGS,
   addAttributes: () => ({
     value: { required: true }
   }),
@@ -26778,7 +26794,7 @@ const NodeProcessor = Extension.create({
             tr.addMark(textPosition.from, textPosition.to, applyingMark);
             return;
           }
-          if (isNodeFullySelected($from, $to, node, position)) {
+          if (isNodeFullySelected(tr.doc, tr.selection, node, position)) {
             tr.step(new AddNodeMarkStep(position, applyingMark));
           }
         });
@@ -26824,6 +26840,15 @@ const NodeProcessor = Extension.create({
           return unref(defaultRef);
         });
       }),
+      removeAllMarks: createCommand(({ state, commands: commands2 }) => {
+        const { tr, doc: doc2 } = state;
+        const { from: from2, to } = tr.selection;
+        doc2.nodesBetween(from2, to, (node, position) => {
+          for (const mark of node.marks) {
+            commands2._removeNodeMark({ tr, node, position, mark });
+          }
+        });
+      }),
       removeMarks: createCommand(({ state, commands: commands2 }, marks) => {
         const { tr, doc: doc2 } = state;
         const { from: from2, to } = tr.selection;

package/lib/enums/TextSettings.js

@@ -18,7 +18,7 @@ export const TextSettings = Object.freeze({
     },
 
     get inlineMarks() {
-        return [this.TEXT_DECORATION, this.LINK, this.SUPERSCRIPT];
+        return [this.TEXT_DECORATION, this.LINK, this.SUPERSCRIPT, this.BACKGROUND_COLOR];
     },
 
     get marks() {

package/lib/extensions/BackgroundColor.js

@@ -1,10 +1,9 @@
 import { Mark } from '@tiptap/vue-2';
 import { convertColor, createCommand, renderMark } from '../utils';
-import { MarkGroups, TextSettings } from '../enums';
+import { TextSettings } from '../enums';
 
 export const BackgroundColor = Mark.create({
     name: TextSettings.BACKGROUND_COLOR,
-    group: MarkGroups.SETTINGS,
 
     addAttributes: () => ({
         value: { required: true }

package/lib/extensions/StylePreset.js

@@ -176,7 +176,7 @@ export const StylePreset = Extension.create({
                 chain()
                     .storeSelection()
                     .expandSelectionToBlock()
-                    .unsetAllMarks()
+                    .removeAllMarks()
                     .applyDefaultPreset()
                     .restoreSelection()
                     .run();

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

@@ -6,18 +6,18 @@ Object {
     Object {
       "content": Array [
         Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "green",
+              },
+              "type": "background_color",
+            },
+          ],
           "text": "hello world",
           "type": "text",
         },
       ],
-      "marks": Array [
-        Object {
-          "attrs": Object {
-            "value": "green",
-          },
-          "type": "background_color",
-        },
-      ],
       "type": "paragraph",
     },
   ],
@@ -31,18 +31,18 @@ Object {
     Object {
       "content": Array [
         Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "#FF0000",
+              },
+              "type": "background_color",
+            },
+          ],
           "text": "test",
           "type": "text",
         },
       ],
-      "marks": Array [
-        Object {
-          "attrs": Object {
-            "value": "#FF0000",
-          },
-          "type": "background_color",
-        },
-      ],
       "type": "paragraph",
     },
   ],
@@ -126,18 +126,18 @@ Object {
           "type": "text",
         },
         Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "#FF0000",
+              },
+              "type": "background_color",
+            },
+          ],
           "text": " ipsum",
           "type": "text",
         },
       ],
-      "marks": Array [
-        Object {
-          "attrs": Object {
-            "value": "#FF0000",
-          },
-          "type": "background_color",
-        },
-      ],
       "type": "paragraph",
     },
   ],
@@ -145,4 +145,4 @@ Object {
 }
 `;
 
-exports[`rendering should render html 1`] = `"<span style="--zw-background-color:green;" class="zw-style"><p class="zw-style">hello world</p></span>"`;
+exports[`rendering should render html 1`] = `"<p class="zw-style"><span style="--zw-background-color:green;" class="zw-style">hello world</span></p>"`;

package/lib/extensions/core/NodeProcessor.js

@@ -66,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));
                     }
                 });
@@ -117,6 +117,17 @@ export const NodeProcessor = Extension.create({
                 });
             }),
 
+            removeAllMarks: createCommand(({ state, commands }) => {
+                const { tr, doc } = state;
+                const { from, to } = tr.selection;
+
+                doc.nodesBetween(from, to, (node, position) => {
+                    for (const mark of node.marks) {
+                        commands._removeNodeMark({ tr, node, position, mark });
+                    }
+                });
+            }),
+
             removeMarks: createCommand(({ state, commands }, marks) => {
                 const { tr, doc } = state;
                 const { from, to } = tr.selection;

package/lib/services/normalizer/HtmlNormalizer.js

@@ -34,6 +34,7 @@ export class HtmlNormalizer extends BaseNormalizer {
         this.#iterateNodes(this.#removeEmptyNodes, this.#isBlockNode);
         this.#iterateNodes(this.#normalizeListItems, (node) => node.tagName === 'LI');
         this.#normalizeBlockTextDecoration();
+        this.#normalizeBlockBackgroundColor();
     }
 
     get normalizedHTML() {
@@ -232,6 +233,28 @@ export class HtmlNormalizer extends BaseNormalizer {
         };
     }
 
+    #normalizeBlockBackgroundColor() {
+        const blockEls = this.dom.querySelectorAll('[style*="background-color"]:where(p, h1, h2, h3, h4, li)');
+
+        for (const blockEl of blockEls) {
+            this.#moveBackgroundColorToChildren(blockEl);
+        }
+    }
+
+    #moveBackgroundColorToChildren(blockEl) {
+        const blockColor = blockEl.style.backgroundColor;
+
+        blockEl.style.removeProperty('background-color');
+        if (!blockEl.style.cssText) blockEl.removeAttribute('style');
+
+        for (const childNode of blockEl.childNodes) {
+            const textEl = this.#wrapTextNode(blockEl, childNode);
+            const color = textEl.style.backgroundColor || blockColor;
+
+            textEl.style.backgroundColor = color;
+        }
+    }
+
     #wrapTextNode(parent, node) {
         if (node.nodeType !== this.#Node.TEXT_NODE) return node;
 

package/lib/services/normalizer/JsonNormalizer.js

@@ -46,7 +46,7 @@ export class JsonNormalizer extends BaseNormalizer {
 
         for (const child of node.content) {
             if (!child.marks) return false;
-            if (!this.#includesMarkType(child, childMark.type)) return false;
+            if (!this.#includesMark(child, childMark)) return false;
         }
 
         return true;

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

@@ -67,4 +67,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__/isNodeFullySelected.test.js

@@ -1,52 +1,43 @@
 import { isNodeFullySelected } from '../isNodeFullySelected';
 
-const createResolvedPosition = (attrs = {}) => ({
-    pos: 0,
-    path: [],
+const createResolvedPosition = (attrs = {}) => ({ ...attrs });
+const createSelection = (from, to) => ({ from, to });
+
+const createNode = (attrs = {}) => ({
+    resolve: jest.fn(() => 0),
     ...attrs
 });
 
-const createNode = (attrs = {}) => ({ ...attrs });
-
 describe('is node fully selected', () => {
     test('should return false if selected part of text node', () => {
-        const paragraph = createNode();
-        const isSelected = isNodeFullySelected(
-            createResolvedPosition({ pos: 7, path: [createNode(), 0, 0, paragraph, 0, 1] }),
-            createResolvedPosition({ pos: 12, path: [createNode(), 0, 0, paragraph, 0, 1] }),
-            paragraph,
-            0
-        );
+        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 });
-        const isSelected = isNodeFullySelected(
-            createResolvedPosition({ pos: 1, path: [createNode(), 0, 0, paragraph, 0, 1] }),
-            createResolvedPosition({ pos: 244, path: [createNode(), 0, 0, paragraph, 0, 1] }),
-            paragraph,
-            0
-        );
+
+        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 });
-        const isSelected = isNodeFullySelected(
-            createResolvedPosition({
-                pos: 3,
-                path: [createNode(), 0, 0, createNode(), 0, 1, listItem, 0, 2, createNode(), 0, 3]
-            }),
-            createResolvedPosition({
-                pos: 246,
-                path: [createNode(), 0, 0, createNode(), 0, 1, listItem, 0, 2, createNode(), 0, 3]
-            }),
-            listItem,
-            1
-        );
+
+        doc.resolve.mockReturnValue(createResolvedPosition({ depth: 2 }));
+
+        const isSelected = isNodeFullySelected(doc, createSelection(3, 246), listItem, 1);
 
         expect(isSelected).toBe(true);
     });

package/lib/utils/isNodeFullySelected.js

@@ -1,14 +1,7 @@
-function resolveNodeTextOffset({ path }, node) {
-    const nodes = path.filter((step) => typeof step === 'object');
-    const index = nodes.indexOf(node);
-
-    return nodes.slice(index).reverse().length;
-}
-
-export function isNodeFullySelected($from, $to, node, position) {
-    const offset = resolveNodeTextOffset($from, node);
-    const isFromMatch = $from.pos - offset <= position;
-    const isToMatch = $to.pos + offset >= 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "2.0.0-2",
+  "version": "2.0.0-3",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "bin": {