@zipify/wysiwyg 3.1.0-2 → 3.1.1

package/lib/composables/useToolbar.js

@@ -1,33 +1,38 @@
-import { onUnmounted } from 'vue';
-import { autoUpdate, computePosition, limitShift, offset, shift } from '@floating-ui/dom';
+import { createPopper } from '@popperjs/core';
 import { useElementRef } from '../components/base';
 
 export function useToolbar({ wrapperRef, offsets, isActiveRef, placementRef }) {
     const wrapperEl = useElementRef(wrapperRef);
-    let floatingInstance;
+    let popper;
 
     function mount(element) {
-        floatingInstance = autoUpdate(wrapperEl.value, element, async () => {
-            const positioning = await computePosition(wrapperEl.value, element, {
-                placement: placementRef.value,
-                strategy: 'fixed',
-                middleware: [
-                    shift({ padding: 16, crossAxis: true, limiter: limitShift() }),
-                    offset({ crossAxis: offsets[0], mainAxis: offsets[1] })]
-            });
-
-            const { x, y } = positioning;
-
-            Object.assign(element.style, {
-                left: `${x}px`,
-                top: `${y}px`
-            });
+        popper = createPopper(wrapperEl.value, element, {
+            placement: placementRef.value,
+            strategy: 'fixed',
+            modifiers: [
+                {
+                    name: 'offset',
+                    options: { offset: offsets }
+                },
+                {
+                    name: 'preventOverflow',
+                    options: {
+                        altAxis: true,
+                        padding: 2
+                    }
+                },
+                {
+                    name: 'flip',
+                    enabled: false
+                }
+            ]
         });
     }
 
-    onUnmounted(() => floatingInstance?.());
+    const update = () => popper?.update();
 
     return {
+        update,
         mount,
         isActiveRef,
         offsets

package/lib/extensions/FontSize.js

@@ -2,7 +2,6 @@ import { Mark } from '@tiptap/vue-2';
 import { computed, unref } from 'vue';
 import { convertFontSize, createCommand, createKeyboardShortcut, renderMark } from '../utils';
 import { MarkGroups, TextSettings } from '../enums';
-import { AddNodeMarkStep } from './core';
 
 export const FontSize = Mark.create({
     name: TextSettings.FONT_SIZE,
@@ -57,7 +56,7 @@ export const FontSize = Mark.create({
                             return;
                         }
 
-                        tr.step(new AddNodeMarkStep(position, updated));
+                        tr.addNodeMark(position, updated);
                     }
                 });
             }),

package/lib/extensions/Link.js

@@ -55,6 +55,8 @@ export const Link = Base.extend({
             ...this.parent?.(),
 
             applyLink: createCommand(({ commands, chain }, attributes) => {
+                commands.setMeta('preventAutolink', true);
+
                 if (!commands.getSelectedText()) {
                     return commands.insertContent(NodeFactory.text(attributes.text, [
                         NodeFactory.mark(TextSettings.LINK, attributes)

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

@@ -41,7 +41,7 @@ describe('get background color', () => {
 
         editor.commands.selectAll();
 
-        expect(editor.commands.getBackgroundColor().value).toEqual('green');
+        expect(editor.commands.getBackgroundColor().value).toBe('green');
     });
 
     test('should get default background color', () => {
@@ -49,7 +49,7 @@ describe('get background color', () => {
             content: createContent(NodeFactory.text('hello world'))
         });
 
-        expect(editor.commands.getBackgroundColor().value).toEqual('rgba(255, 255, 255, 0%)');
+        expect(editor.commands.getBackgroundColor().value).toBe('rgba(255, 255, 255, 0%)');
     });
 });
 

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

@@ -41,7 +41,7 @@ describe('get font color', () => {
 
         editor.commands.selectAll();
 
-        expect(editor.commands.getFontColor().value).toEqual('green');
+        expect(editor.commands.getFontColor().value).toBe('green');
     });
 
     test('should get default font color', () => {
@@ -49,7 +49,7 @@ describe('get font color', () => {
             content: createContent(NodeFactory.text('hello world'))
         });
 
-        expect(editor.commands.getDefaultFontColor().value).toEqual('red');
+        expect(editor.commands.getDefaultFontColor().value).toBe('red');
     });
 
     test('should get from preset', () => {
@@ -59,7 +59,7 @@ describe('get font color', () => {
 
         editor.commands.selectAll();
 
-        expect(editor.commands.getFontColor().value).toEqual('red');
+        expect(editor.commands.getFontColor().value).toBe('red');
     });
 });
 

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

@@ -62,7 +62,7 @@ describe('get font family', () => {
 
         editor.commands.selectAll();
 
-        expect(editor.commands.getFontFamily().value).toEqual('Bungee');
+        expect(editor.commands.getFontFamily().value).toBe('Bungee');
     });
 
     test('should get default font family', () => {
@@ -70,7 +70,7 @@ describe('get font family', () => {
             content: createContent(NodeFactory.text('hello world'))
         });
 
-        expect(editor.commands.getDefaultFontFamily().value).toEqual('Lato');
+        expect(editor.commands.getDefaultFontFamily().value).toBe('Lato');
     });
 
     test('should get from preset', () => {
@@ -80,7 +80,7 @@ describe('get font family', () => {
 
         editor.commands.selectAll();
 
-        expect(editor.commands.getFontFamily().value).toEqual('Lato');
+        expect(editor.commands.getFontFamily().value).toBe('Lato');
     });
 
     test('should find font model by name', () => {

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

@@ -58,7 +58,7 @@ describe('get font size', () => {
 
         editor.commands.selectAll();
 
-        expect(editor.commands.getFontSize().value).toEqual('14');
+        expect(editor.commands.getFontSize().value).toBe('14');
     });
 
     test('should default value', () => {
@@ -66,7 +66,7 @@ describe('get font size', () => {
             content: createContent(NodeFactory.text('hello world'))
         });
 
-        expect(editor.commands.getDefaultFontSize().value).toEqual('14');
+        expect(editor.commands.getDefaultFontSize().value).toBe('14');
     });
 
     test('should get from preset', () => {
@@ -76,7 +76,7 @@ describe('get font size', () => {
 
         editor.commands.selectAll();
 
-        expect(editor.commands.getFontSize().value).toEqual('14');
+        expect(editor.commands.getFontSize().value).toBe('14');
     });
 });
 

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

@@ -60,7 +60,7 @@ describe('get font weight', () => {
 
         editor.commands.selectAll();
 
-        expect(editor.commands.getFontWeight().value).toEqual('700');
+        expect(editor.commands.getFontWeight().value).toBe('700');
     });
 
     test('should default value', () => {
@@ -68,7 +68,7 @@ describe('get font weight', () => {
             content: createContent(NodeFactory.text('hello world'))
         });
 
-        expect(editor.commands.getDefaultFontWeight().value).toEqual('400');
+        expect(editor.commands.getDefaultFontWeight().value).toBe('400');
     });
 
     test('should get from preset', () => {
@@ -78,7 +78,7 @@ describe('get font weight', () => {
 
         editor.commands.selectAll();
 
-        expect(editor.commands.getFontWeight().value).toEqual('400');
+        expect(editor.commands.getFontWeight().value).toBe('400');
     });
 
     test('should get closest available font weight', () => {
@@ -90,7 +90,7 @@ describe('get font weight', () => {
 
         editor.commands.selectAll();
 
-        expect(editor.commands.getFontWeight().value).toEqual('700');
+        expect(editor.commands.getFontWeight().value).toBe('700');
     });
 });
 

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

@@ -62,7 +62,7 @@ describe('get value', () => {
             content: createContent({ line_height: null })
         });
 
-        expect(editor.commands.getDefaultLineHeight().value).toEqual('1.2');
+        expect(editor.commands.getDefaultLineHeight().value).toBe('1.2');
     });
 
     test('should get from preset', () => {
@@ -70,7 +70,7 @@ describe('get value', () => {
             content: createContent({ line_height: null })
         });
 
-        expect(editor.commands.getLineHeight().value).toEqual('1.2');
+        expect(editor.commands.getLineHeight().value).toBe('1.2');
     });
 });
 

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

@@ -3,7 +3,7 @@ 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';
+import { LinkDestinations, LinkTargets, TextSettings } from '../../enums';
 
 const MockFontWeight = Mark.create({
     name: TextSettings.FONT_WEIGHT,
@@ -27,11 +27,12 @@ function createEditor({ content }) {
     });
 }
 
-const createLink = (href) => ({
-    href: href ?? '/test',
+const createLink = (attrs = {}) => ({
+    href: '/test',
     text: 'Hello world link',
-    target: '_self',
-    destination: 'url'
+    target: LinkTargets.SELF,
+    destination: LinkDestinations.URL,
+    ...attrs
 });
 
 describe('get link', () => {
@@ -108,6 +109,33 @@ describe('apply link', () => {
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
+
+    test('should apply link to text with link', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph([
+                    NodeFactory.text('https://google.com', [
+                        NodeFactory.mark(TextSettings.LINK, {
+                            href: 'https://google.com',
+                            destination: LinkDestinations.URL,
+                            target: LinkTargets.SELF
+                        })
+                    ])
+                ])
+            ])
+        });
+
+        editor.commands.selectAll();
+
+        editor.commands.applyLink({
+            text: 'https://google.com',
+            href: 'https://google.com',
+            destination: LinkDestinations.URL,
+            target: LinkTargets.BLANK
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
 });
 
 describe('parse html', () => {

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

@@ -60,6 +60,33 @@ Object {
 }
 `;
 
+exports[`apply link should apply link to text with link 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "destination": "url",
+                "href": "https://google.com",
+                "target": "_blank",
+              },
+              "type": "link",
+            },
+          ],
+          "text": "https://google.com",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
 exports[`apply link should apply link when no selected text 1`] = `
 Object {
   "content": Array [

package/lib/extensions/core/Document.js

@@ -2,5 +2,12 @@ import { Document as Base } from '@tiptap/extension-document';
 import { MarkGroups } from '../../enums';
 
 export const Document = Base.extend({
-    marks: MarkGroups.SETTINGS
+    marks: MarkGroups.SETTINGS,
+
+    onCreate() {
+        // Prevent open links in new tab when editor is readonly
+        this.editor.view.dom.addEventListener('click', (event) => {
+            if (event.target.closest('a')) event.preventDefault();
+        });
+    }
 });

package/lib/extensions/core/NodeProcessor.js

@@ -8,7 +8,6 @@ import {
     resolveTextPosition
 } from '../../utils';
 import { MarkGroups, NodeTypes, TextSettings } from '../../enums';
-import { AddNodeMarkStep, AttrStep, RemoveNodeMarkStep } from './steps';
 
 export const NodeProcessor = Extension.create({
     name: 'node_processor',
@@ -23,7 +22,7 @@ export const NodeProcessor = Extension.create({
                 doc.nodesBetween(from, to, (node, position) => {
                     if (!NodeTypes.blocks.includes(node.type.name)) return;
 
-                    tr.step(new AttrStep(position, name, { ...defaults, ...current, ...attrs }));
+                    tr.setNodeAttribute(position, name, { ...defaults, ...current, ...attrs });
                 });
             }),
 
@@ -85,7 +84,7 @@ export const NodeProcessor = Extension.create({
                     }
 
                     if (isNodeFullySelected(tr.doc, tr.selection, node, position)) {
-                        tr.step(new AddNodeMarkStep(position, applyingMark));
+                        tr.addNodeMark(position, applyingMark);
                     }
                 });
             }),
@@ -168,7 +167,7 @@ export const NodeProcessor = Extension.create({
             _removeNodeMark: createCommand((context, { tr, node, position, mark }) => {
                 return node.isText
                     ? tr.removeMark(position, position + node.nodeSize, mark)
-                    : tr.step(new RemoveNodeMarkStep(position, mark));
+                    : tr.removeNodeMark(position, mark);
             })
         };
     }

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

@@ -127,7 +127,7 @@ describe('block attributes', () => {
         });
         const attrs = editor.commands.getBlockAttributes(TextSettings.LINE_HEIGHT);
 
-        expect(attrs.value).toEqual(null);
+        expect(attrs.value).toBeNull();
     });
 
     test('should set attributes', () => {
@@ -267,9 +267,7 @@ describe('apply mark', () => {
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
-});
 
-describe('apply mark', () => {
     test('should apply inline mark', () => {
         const editor = createEditor({
             content: NodeFactory.doc([
@@ -481,7 +479,7 @@ describe('get setting mark', () => {
         editor.commands.selectAll();
         const selectionRef = editor.commands.getCommonSettingMark(TextSettings.FONT_WEIGHT);
 
-        expect(selectionRef.value).toEqual('400');
+        expect(selectionRef.value).toBe('400');
     });
 
     test('should get default of common setting mark', () => {
@@ -494,7 +492,7 @@ describe('get setting mark', () => {
         editor.commands.selectAll();
         const selectionRef = editor.commands.getCommonSettingMark(TextSettings.FONT_WEIGHT, ref('400'));
 
-        expect(selectionRef.value).toEqual('400');
+        expect(selectionRef.value).toBe('400');
     });
 
     test('should get device setting mark', () => {
@@ -510,7 +508,7 @@ describe('get setting mark', () => {
         editor.commands.selectAll();
         const selectionRef = editor.commands.getDeviceSettingMark(TextSettings.FONT_SIZE);
 
-        expect(selectionRef.value).toEqual('23');
+        expect(selectionRef.value).toBe('23');
     });
 
     test('should get default of device setting mark', () => {
@@ -524,7 +522,7 @@ describe('get setting mark', () => {
         editor.commands.selectAll();
         const selectionRef = editor.commands.getDeviceSettingMark(TextSettings.FONT_SIZE, ref('23'));
 
-        expect(selectionRef.value).toEqual('23');
+        expect(selectionRef.value).toBe('23');
     });
 
     test('should inherit device setting mark', () => {
@@ -545,7 +543,7 @@ describe('get setting mark', () => {
         editor.commands.selectAll();
         const selectionRef = editor.commands.getDeviceSettingMark(TextSettings.FONT_SIZE);
 
-        expect(selectionRef.value).toEqual('23');
+        expect(selectionRef.value).toBe('23');
     });
 });
 

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

@@ -161,6 +161,6 @@ describe('selected text', () => {
 
         editor.commands.setTextSelection({ from: 5, to: 11 });
 
-        expect(editor.commands.getSelectedText()).toEqual('o worl');
+        expect(editor.commands.getSelectedText()).toBe('o worl');
     });
 });

package/lib/extensions/core/index.js

@@ -31,5 +31,3 @@ export const buildCoreExtensions = () => [
     SelectionProcessor,
     ProseMirrorPlugins
 ];
-
-export * from './steps';

package/lib/extensions/core/plugins/PlaceholderPlugin.js

@@ -3,10 +3,10 @@ import { ProseMirrorPlugin } from './ProseMirrorPlugin';
 
 export class PlaceholderPlugin extends ProseMirrorPlugin {
     buildProps() {
-        return { decorations: this.#buildDecorations.bind(this) };
+        return { decorations: this._buildDecorations.bind(this) };
     }
 
-    #buildDecorations({ doc }) {
+    _buildDecorations({ doc }) {
         const decorations = [];
 
         if (!this.editor.isEditable) return null;

package/lib/extensions/list/List.js

@@ -2,7 +2,6 @@ import { Node, wrappingInputRule } from '@tiptap/vue-2';
 import { computed, unref } from 'vue';
 import { copyMark, createCommand } from '../../utils';
 import { ListTypes, MarkGroups, NodeTypes, TextSettings } from '../../enums';
-import { AddNodeMarkStep, RemoveNodeMarkStep } from '../core/steps';
 import { ListItem } from './ListItem';
 
 export const List = Node.create({
@@ -122,13 +121,13 @@ export const List = Node.create({
                     node.forEach((child) => {
                         for (const childMark of child.marks) {
                             if (childMark.isInSet(bubbled)) {
-                                tr.step(new RemoveNodeMarkStep(position + 1, childMark));
+                                tr.removeNodeMark(position + 1, childMark);
                                 continue;
                             }
 
                             if (canBubbleMark(node, childMark)) {
-                                tr.step(new RemoveNodeMarkStep(position + 1, childMark));
-                                tr.step(new AddNodeMarkStep(position, copyMark(childMark)));
+                                tr.removeNodeMark(position + 1, childMark);
+                                tr.addNodeMark(position, copyMark(childMark));
                                 bubbled.push(childMark);
                             }
                         }
@@ -152,7 +151,7 @@ export const List = Node.create({
                     });
 
                     for (const mark of addingMarks) {
-                        tr.step(new AddNodeMarkStep(position, copyMark(mark)));
+                        tr.addNodeMark(position, copyMark(mark));
                     }
 
                     return false;

package/lib/extensions/list/ListItem.js

@@ -1,7 +1,6 @@
 import Base from '@tiptap/extension-list-item';
 import { MarkGroups, NodeTypes } from '../../enums';
 import { copyMark, createCommand } from '../../utils';
-import { AddNodeMarkStep } from '../core/steps';
 
 export const ListItem = Base.extend({
     name: NodeTypes.LIST_ITEM,
@@ -22,7 +21,7 @@ export const ListItem = Base.extend({
                 const position = getItemPosition(tr);
 
                 for (const mark of initialNode.marks) {
-                    tr.step(new AddNodeMarkStep(position, copyMark(mark)));
+                    tr.addNodeMark(position, copyMark(mark));
                 }
 
                 return true;

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

@@ -67,7 +67,7 @@ describe('get list type', () => {
 
         editor.commands.selectAll();
 
-        expect(editor.commands.getListType().value).toBe(null);
+        expect(editor.commands.getListType().value).toBeNull();
     });
 });
 

package/lib/models/Font.js

@@ -3,10 +3,10 @@ export class Font {
         this.name = name;
         this.category = category;
         this.styles = styles;
-        this.weights = this.#getWeights();
+        this.weights = this._getWeights();
     }
 
-    #getWeights() {
+    _getWeights() {
         const weights = this.styles.map((style) => style.replace('i', ''));
 
         return Array.from(new Set(weights));

package/lib/models/__tests__/Font.test.js

@@ -19,21 +19,21 @@ describe('weights', () => {
         const font = new Font({ styles: ['400', '700'] });
         const weight = font.findClosestWeight('500');
 
-        expect(weight).toEqual('400');
+        expect(weight).toBe('400');
     });
 
     test('should find closest font weight from upper side', () => {
         const font = new Font({ styles: ['400', '700'] });
         const weight = font.findClosestWeight('900');
 
-        expect(weight).toEqual('700');
+        expect(weight).toBe('700');
     });
 
     test('should find closest font weight from lower side', () => {
         const font = new Font({ styles: ['400', '700'] });
         const weight = font.findClosestWeight('200');
 
-        expect(weight).toEqual('400');
+        expect(weight).toBe('400');
     });
 });
 
@@ -56,12 +56,6 @@ describe('style checks', () => {
         expect(font.isItalicSupported('400')).toBe(true);
     });
 
-    test('should detect if weight not supported', () => {
-        const font = new Font({ styles: ['400', '700'] });
-
-        expect(font.isItalicSupported('700')).toBe(false);
-    });
-
     test('should detect italic only weight', () => {
         const font = new Font({ styles: ['400i'] });
 

package/lib/services/ContentSerializer.js

@@ -31,21 +31,21 @@ export class ContentSerializer {
         });
     }
 
-    #schema;
-    #domParser;
-    #nodeDomParser;
+    _schema;
+    _domParser;
+    _nodeDomParser;
 
     constructor({ schema, domParser, nodeDomParser }) {
-        this.#schema = schema;
-        this.#domParser = domParser;
-        this.#nodeDomParser = nodeDomParser;
+        this._schema = schema;
+        this._domParser = domParser;
+        this._nodeDomParser = nodeDomParser;
     }
 
     toJSON(html) {
-        const normalizer = ContentNormalizer.build(html, { parser: this.#nodeDomParser });
+        const normalizer = ContentNormalizer.build(html, { parser: this._nodeDomParser });
 
         normalizer.normalizeHTML();
 
-        return this.#domParser.parse(normalizer.dom.body).toJSON();
+        return this._domParser.parse(normalizer.dom.body).toJSON();
     }
 }

package/lib/services/HtmlToJsonParser.js

@@ -5,13 +5,13 @@ export class HtmlToJsonParser {
         return new HtmlToJsonParser(ContentSerializer.build({ config }));
     }
 
-    #contentSerializer;
+    _contentSerializer;
 
     constructor(contentSerializer) {
-        this.#contentSerializer = contentSerializer;
+        this._contentSerializer = contentSerializer;
     }
 
     toJSON(html) {
-        return this.#contentSerializer.toJSON(html);
+        return this._contentSerializer.toJSON(html);
     }
 }