@zipify/wysiwyg 2.0.0-2 → 2.0.0-4

package/example/ExampleApp.vue

@@ -12,6 +12,10 @@
             </option>
         </select>
 
+        <button type="button" class="zw-load-content" @click="saveContent">
+            Save Content
+        </button>
+
         <button type="button" class="zw-load-content" @click="loadContent">
             Load Content
         </button>
@@ -45,7 +49,7 @@
 </template>
 
 <script>
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, unref } from 'vue';
 import { Wysiwyg } from '../lib/entry-lib';
 import { FONTS } from './fonts';
 import { PRESETS, renderPresetVariable } from './presets';
@@ -109,6 +113,10 @@ export default {
             window.location.reload();
         }
 
+        function saveContent() {
+            sessionStorage.setItem('wswg-data', JSON.stringify(unref(content)));
+        }
+
         document.addEventListener('click', (event) => {
             isActive.value = wswgRef.value.$el.contains(event.target);
         });
@@ -121,6 +129,7 @@ export default {
             favoriteColors,
             updateFavoriteColors,
             loadContent,
+            saveContent,
             device,
             updatedAt,
             presets,

package/lib/entry-cli.js

@@ -9,6 +9,7 @@ function rubifyJSON(object) {
     const json = JSON.stringify(object, skipNullValue, 2);
 
     return json
+        .replace(/'/g, '\'')
         .replace(/^[\t ]*"[^:\n\r]+(?<!\\)":/gm, (match) => match.replace(/"/g, ''))
         .replace(/: "(.+)"([,\n])/g, ': \'$1\'$2');
 }
@@ -19,7 +20,7 @@ program.command('to-json')
     .action((html, { config }) => {
         const configPath = resolve(process.cwd(), config);
         const serializer = ContentSerializer.build(require(configPath).editor);
-        const json = rubifyJSON(serializer.toJSON(html));
+        const json = rubifyJSON(serializer.toJSON(html.replace(/\\"/g, '"')));
 
         // eslint-disable-next-line no-console
         console.log(json);

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/extensions/list/List.js

@@ -1,7 +1,8 @@
 import { Node, wrappingInputRule } from '@tiptap/vue-2';
 import { computed, unref } from 'vue';
-import { createCommand } from '../../utils';
+import { copyMark, createCommand } from '../../utils';
 import { ListTypes, MarkGroups, NodeTypes } from '../../enums';
+import { AddNodeMarkStep } from '../core/steps';
 import { ListItem } from './ListItem';
 
 export const List = Node.create({
@@ -79,21 +80,37 @@ export const List = Node.create({
 
                 // Remove List
                 if (currentType === type) {
-                    commands.applyDefaultPreset();
+                    commands.removeList();
                     return;
                 }
 
-                return chain().applyDefaultPreset()._addList(type).run();
-            }),
-
-            _addList: createCommand(({ chain }, type) => {
                 return chain()
+                    .applyDefaultPreset()
                     .toggleList(NodeTypes.LIST, NodeTypes.LIST_ITEM)
                     .setBlockAttributes('bullet', { type })
                     .run();
             }),
 
-            removeList: createCommand(({ commands }) => {
+            removeList: createCommand(({ commands, state }) => {
+                const { tr, doc, selection } = state;
+                const from = selection.$from.start();
+                const to = selection.$to.end();
+
+                doc.nodesBetween(from, to, (node, position, parent) => {
+                    if ([NodeTypes.LIST, NodeTypes.LIST_ITEM].includes(node.type.name)) return;
+                    if (parent.type.name !== NodeTypes.LIST_ITEM) return false;
+
+                    const addingMarks = parent.marks.filter(function (mark) {
+                        return !mark.type.isInSet(node.marks);
+                    });
+
+                    for (const mark of addingMarks) {
+                        tr.step(new AddNodeMarkStep(position, copyMark(mark)));
+                    }
+
+                    return false;
+                });
+
                 commands.liftListItem(NodeTypes.LIST_ITEM);
             })
         };

package/lib/extensions/list/__tests__/List.test.js

@@ -1,10 +1,16 @@
-import { Editor } from '@tiptap/vue-2';
+import { Editor, Mark } from '@tiptap/vue-2';
 import { buildTestExtensions } from '../../../__tests__/utils';
-import { ListTypes } from '../../../enums';
+import { ListTypes, TextSettings } from '../../../enums';
 import { StylePreset } from '../../StylePreset';
 import { ContentNormalizer, NodeFactory } from '../../../services';
 import { List } from '../List';
 
+const MockFontWeight = Mark.create({
+    name: TextSettings.FONT_WEIGHT,
+    renderHTML: () => ['span', {}, 0],
+    addAttributes: () => ({ value: { required: true } })
+});
+
 function createEditor({ content }) {
     return new Editor({
         content: ContentNormalizer.normalize(content),
@@ -24,7 +30,8 @@ function createEditor({ content }) {
                     ],
                     defaultId: 'regular-1',
                     baseClass: 'zw ts-'
-                })
+                }),
+                MockFontWeight
             ]
         })
     });
@@ -73,7 +80,7 @@ describe('apply list', () => {
         expect(editor.getJSON()).toMatchSnapshot();
     });
 
-    test('should remove list', () => {
+    test('should toggle list', () => {
         const editor = createEditor({
             content: NodeFactory.doc([
                 NodeFactory.list(ListTypes.LATIN, [
@@ -84,12 +91,12 @@ describe('apply list', () => {
         });
 
         editor.commands.selectAll();
-        editor.commands.removeList();
+        editor.commands.applyList(ListTypes.LATIN);
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
 
-    test('should toggle list', () => {
+    test('should change list type', () => {
         const editor = createEditor({
             content: NodeFactory.doc([
                 NodeFactory.list(ListTypes.LATIN, [
@@ -100,37 +107,39 @@ describe('apply list', () => {
         });
 
         editor.commands.selectAll();
-        editor.commands.applyList(ListTypes.LATIN);
+        editor.commands.applyList(ListTypes.ROMAN);
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
 
-    test('should change list type', () => {
+    test('should remove preset', () => {
         const editor = createEditor({
             content: NodeFactory.doc([
-                NodeFactory.list(ListTypes.LATIN, [
-                    NodeFactory.paragraph('Item 1'),
-                    NodeFactory.paragraph('Item 2')
-                ])
+                NodeFactory.paragraph({ preset: { id: 'regular-1' } }, 'Item 1'),
+                NodeFactory.paragraph({ preset: { id: 'regular-1' } }, 'Item 2')
             ])
         });
 
         editor.commands.selectAll();
-        editor.commands.applyList(ListTypes.ROMAN);
+        editor.commands.applyList(ListTypes.LATIN);
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
+});
 
-    test('should remove preset', () => {
+describe('remove list', () => {
+    test('should remove list', () => {
         const editor = createEditor({
             content: NodeFactory.doc([
-                NodeFactory.paragraph({ preset: { id: 'regular-1' } }, 'Item 1'),
-                NodeFactory.paragraph({ preset: { id: 'regular-1' } }, 'Item 2')
+                NodeFactory.list(ListTypes.LATIN, [
+                    NodeFactory.paragraph('Item 1'),
+                    NodeFactory.paragraph('Item 2')
+                ])
             ])
         });
 
         editor.commands.selectAll();
-        editor.commands.applyList(ListTypes.LATIN);
+        editor.commands.removeList();
 
         expect(editor.getJSON()).toMatchSnapshot();
     });

package/lib/extensions/list/__tests__/__snapshots__/List.test.js.snap

@@ -93,42 +93,6 @@ Object {
 }
 `;
 
-exports[`apply list should remove list 1`] = `
-Object {
-  "content": Array [
-    Object {
-      "attrs": Object {
-        "preset": Object {
-          "id": "regular-1",
-        },
-      },
-      "content": Array [
-        Object {
-          "text": "Item 1",
-          "type": "text",
-        },
-      ],
-      "type": "paragraph",
-    },
-    Object {
-      "attrs": Object {
-        "preset": Object {
-          "id": "regular-1",
-        },
-      },
-      "content": Array [
-        Object {
-          "text": "Item 2",
-          "type": "text",
-        },
-      ],
-      "type": "paragraph",
-    },
-  ],
-  "type": "doc",
-}
-`;
-
 exports[`apply list should remove preset 1`] = `
 Object {
   "content": Array [
@@ -701,3 +665,39 @@ Object {
   "type": "doc",
 }
 `;
+
+exports[`remove list should remove list 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "preset": Object {
+          "id": "regular-1",
+        },
+      },
+      "content": Array [
+        Object {
+          "text": "Item 1",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+    Object {
+      "attrs": Object {
+        "preset": Object {
+          "id": "regular-1",
+        },
+      },
+      "content": Array [
+        Object {
+          "text": "Item 2",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;

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/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

@@ -12,3 +12,4 @@ export { resolveTextPosition } from './resolveTextPosition';
 export { isNodeFullySelected } from './isNodeFullySelected';
 export { isMarkAppliedToParent } from './isMarkAppliedToParent';
 export { findMarkByType } from './findMarkByType';
+export { copyMark } from './copyMark';

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-4",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "bin": {