@zipify/wysiwyg 2.5.0 → 2.5.2

package/dist/wysiwyg.css

@@ -564,10 +564,10 @@
     width: 72px;
 }
 
-.zw-alignment-control__modal[data-v-cef30e1a] {
+.zw-alignment-control__modal[data-v-4aefb465] {
     padding: var(--zw-offset-xxs);
 }
-.zw-alignment-control__toggle[data-v-cef30e1a] {
+.zw-alignment-control__toggle[data-v-4aefb465] {
     flex-direction: column;
 }
 

package/dist/wysiwyg.mjs

@@ -14460,8 +14460,11 @@ const resolveTextPosition = ($from, $to, node, position) => ({
   from: Math.max(position, $from.pos),
   to: Math.min(position + node.nodeSize, $to.pos)
 });
+function resolvePositionOffset(doc2, position) {
+  return doc2.resolve(position).depth + 1;
+}
 function isNodeFullySelected(doc2, selection, node, position) {
-  const offset2 = doc2.resolve(position).depth + 1;
+  const offset2 = resolvePositionOffset(doc2, position);
   const isFromMatch = selection.from - offset2 <= position;
   const isToMatch = selection.to + offset2 >= node.nodeSize + position;
   return isFromMatch && isToMatch;
@@ -23303,7 +23306,7 @@ var render$c = function __render__33() {
     }
   }, [_c("Icon", {
     attrs: {
-      "name": "alignment-".concat(_vm.currentValue),
+      "name": _vm.icon,
       "size": "28px",
       "auto-color": ""
     }
@@ -23338,11 +23341,19 @@ const __vue2_script$c = {
     const currentValue = editor.commands.getAlignment();
     const wrapperRef = ref(null);
     const modalRef = ref(null);
-    const toggler = useModalToggler({ wrapperRef, modalRef });
+    const toggler = useModalToggler({
+      wrapperRef,
+      modalRef
+    });
+    const icon = computed(() => {
+      const name = unref(currentValue) || Alignments.LEFT;
+      return `alignment-${name}`;
+    });
     return {
       wrapperRef,
       modalRef,
       currentValue,
+      icon,
       toggler,
       isOpened: toggler.isOpened
     };
@@ -23355,7 +23366,7 @@ var __component__$c = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$c,
   false,
   __vue2_injectStyles$c,
-  "cef30e1a",
+  "4aefb465",
   null,
   null
 );
@@ -23779,13 +23790,12 @@ function useLink() {
     linkData.value.target = isChecked ? LinkTargets.BLANK : LinkTargets.SELF;
   }
   function prepareInitialFields() {
-    const link = editor.getAttributes(TextSettings.LINK);
+    editor.commands.expandSelectionToLink();
     linkData.value.text = editor.commands.getSelectedText();
-    currentDestination.value.id = link.destination || LinkDestinations.URL;
-    linkData.value.target = link.target || LinkTargets.SELF;
-    if (link.href) {
-      destinationHrefs.value[currentDestination.value.id] = link.href;
-    }
+    const { destination, href, target } = editor.getAttributes(TextSettings.LINK);
+    currentDestination.value.id = destination || LinkDestinations.URL;
+    linkData.value.target = target || LinkTargets.SELF;
+    destinationHrefs.value[currentDestination.value.id] = href || "";
   }
   function resetDestinations() {
     destinationHrefs.value.block = pageBlocks.value[0].id;
@@ -25629,6 +25639,10 @@ const NodeProcessor = Extension.create({
           return (_a = unref(marksRef)[0]) != null ? _a : null;
         });
       }),
+      hasMark: createCommand(({ commands: commands2 }, name) => {
+        const mark = commands2.getMark(name);
+        return computed(() => !!unref(mark));
+      }),
       getCommonSettingMark: createCommand(({ commands: commands2 }, name, defaultRef) => {
         const selectionRef = commands2.getMark(name);
         return computed(() => {
@@ -25714,16 +25728,20 @@ const SelectionProcessor = Extension.create({
       restoreSelection: createCommand(({ commands: commands2 }) => {
         this.storage.selection && commands2.setTextSelection(this.storage.selection);
       }),
-      expandSelectionToBlock: createCommand(({ state, commands: commands2 }) => {
-        let from2 = state.selection.from;
-        let to = state.selection.to;
-        state.doc.nodesBetween(from2, to, (node, position, parent) => {
-          if (parent.type.name !== NodeTypes.DOCUMENT)
-            return;
-          from2 = Math.min(from2, position + 1);
-          to = Math.max(to, position + node.nodeSize - 1);
+      expandSelection: createCommand(({ tr, commands: commands2 }, predicate) => {
+        let from2 = tr.selection.from;
+        let to = tr.selection.to;
+        tr.doc.nodesBetween(from2, to, (node, position, parent) => {
+          if (predicate({ node, parent })) {
+            const offset2 = node.isText ? 0 : resolvePositionOffset(tr.doc, position);
+            from2 = Math.min(from2, position + offset2);
+            to = Math.max(to, position + node.nodeSize - offset2);
+          }
         });
         commands2.setTextSelection({ from: from2, to });
+      }),
+      expandSelectionToBlock: createCommand(({ commands: commands2 }) => {
+        commands2.expandSelection(({ parent }) => parent.type.name === NodeTypes.DOCUMENT);
       })
     };
   }
@@ -27726,21 +27744,23 @@ const Link = Link$1.extend({
             NodeFactory.mark(TextSettings.LINK, attributes)
           ]));
         }
-        return chain().applyMark(this.name, attributes).transformText(() => attributes.text).extendMarkRange(TextSettings.LINK).run();
+        return chain().applyMark(this.name, attributes).expandSelectionToLink().command(({ tr }) => {
+          tr.insertText(attributes.text, tr.selection.from, tr.selection.to);
+          return true;
+        }).run();
+      }),
+      expandSelectionToLink: createCommand(({ commands: commands2 }) => {
+        commands2.expandSelection(({ node }) => this.type.isInSet(node.marks));
       }),
-      isLink: createCommand(({ editor }) => computed(() => editor.isActive(TextSettings.LINK))),
+      isLink: createCommand(({ commands: commands2 }) => commands2.hasMark(this.name)),
       getLinkPreset: createCommand(() => computed(() => this.options.preset))
     };
   },
   renderHTML({ HTMLAttributes: attrs }) {
     const href = attrs.destination === LinkDestinations.BLOCK ? `#${attrs.href}` : attrs.href;
-    const presetClass = this.options.basePresetClass + this.options.preset.id;
+    const presetClass = unref(this.options.basePresetClass) + unref(this.options.preset).id;
     const classes = `${presetClass} zw-style`;
-    const linkAttrs = {
-      href,
-      target: attrs.target,
-      class: classes
-    };
+    const linkAttrs = { href, target: attrs.target, class: classes };
     return ["a", linkAttrs, 0];
   }
 });

package/lib/components/toolbar/controls/AlignmentDeviceControl.vue

@@ -7,7 +7,7 @@
             @click="toggler.open"
             v-tooltip="'Alignment'"
         >
-            <Icon :name="`alignment-${currentValue}`" size="28px" auto-color />
+            <Icon :name="icon" size="28px" auto-color />
         </Button>
 
         <Modal class="zw-alignment-control__modal" ref="modalRef" :toggler="toggler">
@@ -17,10 +17,11 @@
 </template>
 
 <script>
-import { inject, ref } from 'vue';
+import { computed, inject, ref, unref } from 'vue';
 import { InjectionTokens } from '../../../injectionTokens';
-import { Button, Icon, Modal, useModalToggler } from '../../base';
 import { tooltip } from '../../../directives';
+import { Alignments } from '../../../enums';
+import { Button, Icon, Modal, useModalToggler } from '../../base';
 import AlignmentControl from './AlignmentControl';
 
 export default {
@@ -43,12 +44,22 @@ export default {
         const wrapperRef = ref(null);
         const modalRef = ref(null);
 
-        const toggler = useModalToggler({ wrapperRef, modalRef });
+        const toggler = useModalToggler({
+            wrapperRef,
+            modalRef
+        });
+
+        const icon = computed(() => {
+            const name = unref(currentValue) || Alignments.LEFT;
+
+            return `alignment-${name}`;
+        });
 
         return {
             wrapperRef,
             modalRef,
             currentValue,
+            icon,
             toggler,
             isOpened: toggler.isOpened
         };

package/lib/components/toolbar/controls/link/composables/__tests__/useLink.test.js

@@ -8,6 +8,7 @@ const createEditor = (text, destination) => ({
     commands: {
         storeSelection: jest.fn(),
         restoreSelection: jest.fn(),
+        expandSelectionToLink: jest.fn(),
         getSelectedText: jest.fn(() => text ?? ''),
         focus: jest.fn().mockReturnThis(),
         unsetLink: jest.fn().mockReturnThis(),

package/lib/components/toolbar/controls/link/composables/useLink.js

@@ -3,6 +3,7 @@ import { LinkTargets, LinkDestinations, TextSettings } from '../../../../../enum
 import { InjectionTokens } from '../../../../../injectionTokens';
 import { RegExps } from '../../../../../regExps';
 
+// TODO NEED refactor it
 export function useLink() {
     const editor = inject(InjectionTokens.EDITOR);
     const pageBlocks = inject(InjectionTokens.PAGE_BLOCKS);
@@ -16,15 +17,14 @@ export function useLink() {
     }
 
     function prepareInitialFields() {
-        const link = editor.getAttributes(TextSettings.LINK);
-
+        editor.commands.expandSelectionToLink();
         linkData.value.text = editor.commands.getSelectedText();
-        currentDestination.value.id = link.destination || LinkDestinations.URL;
-        linkData.value.target = link.target || LinkTargets.SELF;
 
-        if (link.href) {
-            destinationHrefs.value[currentDestination.value.id] = link.href;
-        }
+        const { destination, href, target } = editor.getAttributes(TextSettings.LINK);
+
+        currentDestination.value.id = destination || LinkDestinations.URL;
+        linkData.value.target = target || LinkTargets.SELF;
+        destinationHrefs.value[currentDestination.value.id] = href || '';
     }
 
     function resetDestinations() {

package/lib/extensions/Link.js

@@ -63,27 +63,28 @@ export const Link = Base.extend({
 
                 return chain()
                     .applyMark(this.name, attributes)
-                    .transformText(() => attributes.text)
-                    .extendMarkRange(TextSettings.LINK)
+                    .expandSelectionToLink()
+                    .command(({ tr }) => {
+                        tr.insertText(attributes.text, tr.selection.from, tr.selection.to);
+                        return true;
+                    })
                     .run();
             }),
 
-            isLink: createCommand(({ editor }) => computed(() => editor.isActive(TextSettings.LINK))),
+            expandSelectionToLink: createCommand(({ commands }) => {
+                commands.expandSelection(({ node }) => this.type.isInSet(node.marks));
+            }),
+
+            isLink: createCommand(({ commands }) => commands.hasMark(this.name)),
             getLinkPreset: createCommand(() => computed(() => this.options.preset))
         };
     },
 
     renderHTML({ HTMLAttributes: attrs }) {
         const href = attrs.destination === LinkDestinations.BLOCK ? `#${attrs.href}` : attrs.href;
-
-        const presetClass = this.options.basePresetClass + this.options.preset.id;
+        const presetClass = unref(this.options.basePresetClass) + unref(this.options.preset).id;
         const classes = `${presetClass} zw-style`;
-
-        const linkAttrs = {
-            href,
-            target: attrs.target,
-            class: classes
-        };
+        const linkAttrs = { href, target: attrs.target, class: classes };
 
         return ['a', linkAttrs, 0];
     }

package/lib/extensions/__tests__/Link.test.js

@@ -1,8 +1,15 @@
 import { ref } from 'vue';
-import { Editor } from '@tiptap/vue-2';
+import { Editor, Mark } from '@tiptap/vue-2';
 import { buildTestExtensions } from '../../__tests__/utils';
 import { ContentNormalizer, NodeFactory } from '../../services';
 import { Link } from '../Link';
+import { TextSettings } from '../../enums';
+
+const MockFontWeight = Mark.create({
+    name: TextSettings.FONT_WEIGHT,
+    addAttributes: () => ({ value: { required: true } }),
+    renderHTML: () => ['span', {}, 0]
+});
 
 function createEditor({ content }) {
     return new Editor({
@@ -13,42 +20,91 @@ function createEditor({ content }) {
                     preset: 'link',
                     baseClass: 'zw ts-',
                     pageBlocks: ref([{ id: 987654 }])
-                })
+                }),
+                MockFontWeight
             ]
         })
     });
 }
 
-const createContent = (text) => NodeFactory.doc([
-    NodeFactory.paragraph([text])
-]);
-
-const linkAttributes = (href) => ({
+const createLink = (href) => ({
     href: href ?? '/test',
     text: 'Hello world link',
     target: '_self',
     destination: 'url'
 });
 
+describe('get link', () => {
+    test('should check is link active', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph([
+                    NodeFactory.text('hello world', [
+                        NodeFactory.mark(TextSettings.LINK, createLink())
+                    ])
+                ])
+            ])
+        });
+
+        editor.commands.selectAll();
+
+        expect(editor.commands.isLink().value).toBe(true);
+    });
+
+    test('should check is link inactive', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph('hello world')
+            ])
+        });
+
+        editor.commands.selectAll();
+
+        expect(editor.commands.isLink().value).toBe(false);
+    });
+});
+
 describe('apply link', () => {
     test('should apply link', () => {
         const editor = createEditor({
-            content: createContent(NodeFactory.text('hello world'))
+            content: NodeFactory.doc([
+                NodeFactory.paragraph('hello world')
+            ])
         });
 
         editor.commands.selectAll();
-        editor.commands.applyLink(linkAttributes());
+        editor.commands.applyLink(createLink());
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
 
     test('should apply link when no selected text', () => {
         const editor = createEditor({
-            content: createContent(NodeFactory.text('Some  text'))
+            content: NodeFactory.doc([
+                NodeFactory.paragraph('Some  text')
+            ])
         });
 
         editor.commands.setTextSelection(6);
-        editor.commands.applyLink(linkAttributes());
+        editor.commands.applyLink(createLink());
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should apply link to multiple selected nodes', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph([
+                    NodeFactory.text('hello', [
+                        NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+                    ]),
+                    NodeFactory.text(' world')
+                ])
+            ])
+        });
+
+        editor.commands.selectAll();
+        editor.commands.applyLink(createLink());
 
         expect(editor.getJSON()).toMatchSnapshot();
     });

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

@@ -27,6 +27,39 @@ Object {
 }
 `;
 
+exports[`apply link should apply link to multiple selected nodes 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "destination": "url",
+                "href": "/test",
+                "target": "_self",
+              },
+              "type": "link",
+            },
+            Object {
+              "attrs": Object {
+                "value": "700",
+              },
+              "type": "font_weight",
+            },
+          ],
+          "text": "Hello world link",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
 exports[`apply link should apply link when no selected text 1`] = `
 Object {
   "content": Array [

package/lib/extensions/core/NodeProcessor.js

@@ -110,6 +110,12 @@ export const NodeProcessor = Extension.create({
                 return computed(() => unref(marksRef)[0] ?? null);
             }),
 
+            hasMark: createCommand(({ commands }, name) => {
+                const mark = commands.getMark(name);
+
+                return computed(() => !!unref(mark));
+            }),
+
             getCommonSettingMark: createCommand(({ commands }, name, defaultRef) => {
                 const selectionRef = commands.getMark(name);
 

package/lib/extensions/core/SelectionProcessor.js

@@ -1,5 +1,5 @@
 import { Extension } from '@tiptap/vue-2';
-import { createCommand } from '../../utils';
+import { createCommand, resolvePositionOffset } from '../../utils';
 import { NodeTypes } from '../../enums';
 
 export const SelectionProcessor = Extension.create({
@@ -19,18 +19,24 @@ export const SelectionProcessor = Extension.create({
                 this.storage.selection && commands.setTextSelection(this.storage.selection);
             }),
 
-            expandSelectionToBlock: createCommand(({ state, commands }) => {
-                let from = state.selection.from;
-                let to = state.selection.to;
+            expandSelection: createCommand(({ tr, commands }, predicate) => {
+                let from = tr.selection.from;
+                let to = tr.selection.to;
 
-                state.doc.nodesBetween(from, to, (node, position, parent) => {
-                    if (parent.type.name !== NodeTypes.DOCUMENT) return;
+                tr.doc.nodesBetween(from, to, (node, position, parent) => {
+                    if (predicate({ node, parent })) {
+                        const offset = node.isText ? 0 : resolvePositionOffset(tr.doc, position);
 
-                    from = Math.min(from, position + 1);
-                    to = Math.max(to, position + node.nodeSize - 1);
+                        from = Math.min(from, position + offset);
+                        to = Math.max(to, position + node.nodeSize - offset);
+                    }
                 });
 
                 commands.setTextSelection({ from, to });
+            }),
+
+            expandSelectionToBlock: createCommand(({ commands }) => {
+                commands.expandSelection(({ parent }) => parent.type.name === NodeTypes.DOCUMENT);
             })
         };
     }

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

@@ -442,6 +442,32 @@ describe('get mark', () => {
     });
 });
 
+describe('has mark', () => {
+    test('should detect mark', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph([
+                    NodeFactory.text('lorem ipsum', [
+                        NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+                    ])
+                ])
+            ])
+        });
+
+        expect(editor.commands.hasMark(TextSettings.FONT_WEIGHT).value).toBe(true);
+    });
+
+    test('should not detect mark', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph('lorem ipsum')
+            ])
+        });
+
+        expect(editor.commands.hasMark(TextSettings.FONT_WEIGHT).value).toBe(false);
+    });
+});
+
 describe('get setting mark', () => {
     test('should get common setting mark', () => {
         const editor = createEditor({

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

@@ -49,8 +49,22 @@ describe('store/restore selection', () => {
     });
 });
 
-describe('expand selection to block', () => {
-    test('should exand selection to one block', () => {
+describe('expand selection', () => {
+    test('should expand selection by condition', () => {
+        const editor = createEditor();
+
+        editor
+            .chain()
+            .setTextSelection({ from: 10, to: 20 })
+            .expandSelection(({ node }) => node.isText)
+            .run();
+
+        expect(editor.state.selection).toEqual(
+            expect.objectContaining({ from: 1, to: 27 })
+        );
+    });
+
+    test('should expand selection to one block', () => {
         const editor = createEditor();
 
         editor

package/lib/utils/index.js

@@ -9,6 +9,7 @@ export { convertAlignment } from './convertAlignment';
 export { importIcon } from './importIcon';
 export { isWysiwygContent, markWysiwygContent, unmarkWysiwygContent } from './isWysiwygContent';
 export { resolveTextPosition } from './resolveTextPosition';
+export { resolvePositionOffset } from './resolvePositionOffset';
 export { isNodeFullySelected } from './isNodeFullySelected';
 export { isMarkAppliedToParent } from './isMarkAppliedToParent';
 export { findMarkByType } from './findMarkByType';

package/lib/utils/isNodeFullySelected.js

@@ -1,5 +1,7 @@
+import { resolvePositionOffset } from './resolvePositionOffset';
+
 export function isNodeFullySelected(doc, selection, node, position) {
-    const offset = doc.resolve(position).depth + 1;
+    const offset = resolvePositionOffset(doc, position);
     const isFromMatch = selection.from - offset <= position;
     const isToMatch = selection.to + offset >= node.nodeSize + position;
 

package/lib/utils/resolvePositionOffset.js

@@ -0,0 +1,3 @@
+export function resolvePositionOffset(doc, position) {
+    return doc.resolve(position).depth + 1;
+}

package/package.json

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