@zipify/wysiwyg 3.1.2 → 3.1.3-0

package/lib/extensions/Link.js

@@ -3,14 +3,17 @@ import { computed, unref } from 'vue';
 import { createCommand } from '../utils';
 import { LinkDestinations, LinkTargets, TextSettings } from '../enums';
 import { NodeFactory } from '../services';
+import { PasteLinkPlugin } from './proseMirror';
 
 export const Link = Base.extend({
     name: TextSettings.LINK,
+    addPasteRules: null,
 
     addOptions() {
         return {
             ...this.parent?.(),
-            openOnClick: false
+            openOnClick: false,
+            linkOnPaste: false
         };
     },
 
@@ -52,8 +55,6 @@ export const Link = Base.extend({
 
     addCommands() {
         return {
-            ...this.parent?.(),
-
             applyLink: createCommand(({ commands, chain }, attributes) => {
                 commands.setMeta('preventAutolink', true);
 
@@ -67,7 +68,9 @@ export const Link = Base.extend({
                     .applyMark(this.name, attributes)
                     .expandSelectionToLink()
                     .command(({ tr }) => {
-                        tr.insertText(attributes.text, tr.selection.from, tr.selection.to);
+                        if (attributes.text) {
+                            tr.insertText(attributes.text, tr.selection.from, tr.selection.to);
+                        }
                         return true;
                     })
                     .run();
@@ -82,11 +85,17 @@ export const Link = Base.extend({
         };
     },
 
+    addProseMirrorPlugins() {
+        return [
+            ...this.parent(),
+            PasteLinkPlugin.create(this.editor)
+        ];
+    },
+
     renderHTML({ HTMLAttributes: attrs }) {
         const href = attrs.destination === LinkDestinations.BLOCK ? `#${attrs.href}` : attrs.href;
         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: `${presetClass} zw-style` };
 
         return ['a', linkAttrs, 0];
     }

package/lib/extensions/core/index.js

@@ -1,13 +1,13 @@
 import { Extension } from '@tiptap/vue-2';
 import Text from '@tiptap/extension-text';
 import History from '@tiptap/extension-history';
+import { PastePlugin, PlaceholderPlugin } from '../proseMirror';
 import { NodeProcessor } from './NodeProcessor';
 import { TextProcessor } from './TextProcessor';
 import { SelectionProcessor } from './SelectionProcessor';
 import { Document } from './Document';
 import { Paragraph } from './Paragraph';
 import { Heading } from './Heading';
-import { PastePlugin, PlaceholderPlugin } from './plugins';
 
 const ProseMirrorPlugins = Extension.create({
     name: 'prose_mirror_plugins',

package/lib/extensions/proseMirror/PasteLinkPlugin.js

@@ -0,0 +1,29 @@
+import { test as testLink } from 'linkifyjs';
+import { NodeSelector } from '../../services';
+import { NodeTypes, TextSettings } from '../../enums';
+import { ProseMirrorPlugin } from './ProseMirrorPlugin';
+
+export class PasteLinkPlugin extends ProseMirrorPlugin {
+    addProps() {
+        return { handlePaste: this._handlePaste };
+    }
+
+    _handlePaste(view, event, slice) {
+        if (view.state.selection.empty) return false;
+
+        const textContent = slice.content.textBetween(0, slice.content.size).trim();
+        const isLink = testLink(textContent);
+
+        if (!textContent || !isLink) return false;
+
+        const pastingLink = NodeSelector.query(slice.content, {
+            typeName: NodeTypes.TEXT,
+            mark: { typeName: TextSettings.LINK },
+            getMark: { typeName: TextSettings.LINK }
+        });
+
+        this.editor.commands.applyLink(pastingLink.attrs);
+
+        return true;
+    }
+}

package/lib/extensions/{core/plugins → proseMirror}/PastePlugin.js

@@ -1,12 +1,12 @@
-import { ContentNormalizer } from '../../../services';
-import { NodeTypes } from '../../../enums';
+import { ContentNormalizer } from '../../services';
+import { NodeTypes } from '../../enums';
 import { ProseMirrorPlugin } from './ProseMirrorPlugin';
 
 export class PastePlugin extends ProseMirrorPlugin {
-    buildProps() {
+    addProps() {
         return {
-            transformPastedHTML: this._transformPastedHTML.bind(this),
-            handlePaste: this._handlePaste.bind(this)
+            transformPastedHTML: this._transformPastedHTML,
+            handlePaste: this._handlePaste
         };
     }
 

package/lib/extensions/{core/plugins → proseMirror}/PlaceholderPlugin.js

@@ -2,8 +2,8 @@ import { Decoration, DecorationSet } from 'prosemirror-view';
 import { ProseMirrorPlugin } from './ProseMirrorPlugin';
 
 export class PlaceholderPlugin extends ProseMirrorPlugin {
-    buildProps() {
-        return { decorations: this._buildDecorations.bind(this) };
+    addProps() {
+        return { decorations: this._buildDecorations };
     }
 
     _buildDecorations({ doc }) {

package/lib/extensions/{core/plugins → proseMirror}/ProseMirrorPlugin.js

@@ -6,7 +6,7 @@ export class ProseMirrorPlugin {
 
         return new Plugin({
             key: new PluginKey(this.name),
-            props: plugin.buildProps()
+            props: plugin._buildProps()
         });
     }
 
@@ -15,7 +15,14 @@ export class ProseMirrorPlugin {
         this.editor = editor;
     }
 
-    buildProps() {
+    _buildProps() {
+        const props = Object.entries(this.addProps());
+        const bound = props.map(([name, handler]) => [name, handler.bind(this)]);
+
+        return Object.fromEntries(bound);
+    }
+
+    addProps() {
         return {};
     }
 }

package/lib/extensions/{core/plugins → proseMirror}/index.js

@@ -1,2 +1,3 @@
 export { PastePlugin } from './PastePlugin';
 export { PlaceholderPlugin } from './PlaceholderPlugin';
+export { PasteLinkPlugin } from './PasteLinkPlugin';

package/lib/services/NodeFactory.js

@@ -111,7 +111,7 @@ export class NodeFactory {
 
     /**
      * @param {String} text
-     * @param {Array<MarkJson>} marks
+     * @param {Array<MarkJson>} [marks]
      * @returns {NodeJson}
      */
     static text(text, marks) {

package/lib/services/NodeSelector.js

@@ -0,0 +1,50 @@
+export class NodeSelector {
+    static _instance;
+
+    static get instance() {
+        this._instance ??= new NodeSelector();
+        return this._instance;
+    }
+
+    static query(containerNode, selector) {
+        return this.instance.query(containerNode, selector);
+    }
+
+    query(containerNode, selector) {
+        let found = null;
+
+        containerNode.descendants((node) => {
+            if (found) return false;
+
+            if (this.matchNode(node, selector)) {
+                found = node;
+                return false;
+            }
+        });
+
+        if (!found) return null;
+        if (!selector.getMark) return found;
+
+        return this.getMark(found, selector.getMark);
+    }
+
+    matchNode(node, selector) {
+        if (selector.typeName && selector.typeName !== node.type.name) {
+            return false;
+        }
+
+        if (selector.mark && !this.getMark(node, selector.mark)) {
+            return false;
+        }
+
+        return true;
+    }
+
+    getMark(node, selector) {
+        return node.marks.find((mark) => this.matchMark(mark, selector)) || null;
+    }
+
+    matchMark(mark, selector) {
+        return mark.type.name === selector.typeName;
+    }
+}

package/lib/services/__tests__/NodeSelector.test.js

@@ -0,0 +1,129 @@
+import { Schema } from 'prosemirror-model';
+import { NodeFactory } from '../NodeFactory';
+import { NodeSelector } from '../NodeSelector';
+import { NodeTypes, TextSettings } from '../../enums';
+
+const createSchema = () => new Schema({
+    nodes: {
+        [NodeTypes.DOCUMENT]: { content: 'paragraph+' },
+        [NodeTypes.PARAGRAPH]: { content: 'text*' },
+        [NodeTypes.TEXT]: { inline: true }
+    },
+    marks: {
+        [TextSettings.FONT_SIZE]: {}
+    }
+});
+
+const createSelector = () => new NodeSelector();
+
+describe('match node', () => {
+    test('should match node by type name', () => {
+        const schema = createSchema();
+        const selector = createSelector();
+        const node = schema.nodeFromJSON(NodeFactory.text('lorem ipsum'));
+        const isMatch = selector.matchNode(node, { typeName: NodeTypes.TEXT });
+
+        expect(isMatch).toBe(true);
+    });
+
+    test('should not match node by type name', () => {
+        const schema = createSchema();
+        const selector = createSelector();
+        const node = schema.nodeFromJSON(NodeFactory.text('lorem ipsum'));
+        const isMatch = selector.matchNode(node, { typeName: NodeTypes.PARAGRAPH });
+
+        expect(isMatch).toBe(false);
+    });
+
+    test('should match node with mark', () => {
+        const schema = createSchema();
+        const selector = createSelector();
+
+        const node = schema.nodeFromJSON(NodeFactory.text('lorem ipsum', [
+            NodeFactory.mark(TextSettings.FONT_SIZE, {})
+        ]));
+
+        const isMatch = selector.matchNode(node, {
+            mark: { typeName: TextSettings.FONT_SIZE }
+        });
+
+        expect(isMatch).toBe(true);
+    });
+
+    test('should not match node with another mark', () => {
+        const schema = createSchema();
+        const selector = createSelector();
+
+        const node = schema.nodeFromJSON(NodeFactory.text('lorem ipsum', [
+            NodeFactory.mark(TextSettings.FONT_SIZE, {})
+        ]));
+
+        const isMatch = selector.matchNode(node, {
+            mark: { typeName: TextSettings.FONT_FAMILY }
+        });
+
+        expect(isMatch).toBe(false);
+    });
+});
+
+describe('match mark', () => {
+    test('should match mark by type name', () => {
+        const schema = createSchema();
+        const selector = createSelector();
+        const mark = schema.markFromJSON(NodeFactory.mark(TextSettings.FONT_SIZE, {}));
+        const isMatch = selector.matchMark(mark, { typeName: TextSettings.FONT_SIZE });
+
+        expect(isMatch).toBe(true);
+    });
+
+    test('should not match mark by type name', () => {
+        const schema = createSchema();
+        const selector = createSelector();
+        const mark = schema.markFromJSON(NodeFactory.mark(TextSettings.FONT_SIZE, {}));
+        const isMatch = selector.matchMark(mark, { typeName: TextSettings.FONT_FAMILY });
+
+        expect(isMatch).toBe(false);
+    });
+});
+
+describe('query node', () => {
+    test('should find node', () => {
+        const schema = createSchema();
+        const selector = createSelector();
+
+        const doc = schema.nodeFromJSON(NodeFactory.doc([
+            NodeFactory.paragraph('lorem ipsum')
+        ]));
+
+        const textNode = selector.query(doc, { typeName: NodeTypes.TEXT });
+
+        expect(textNode.text).toBe('lorem ipsum');
+    });
+
+    test('should find first matching node', () => {
+        const schema = createSchema();
+        const selector = createSelector();
+
+        const doc = schema.nodeFromJSON(NodeFactory.doc([
+            NodeFactory.paragraph('lorem ipsum 1'),
+            NodeFactory.paragraph('lorem ipsum 2')
+        ]));
+
+        const textNode = selector.query(doc, { typeName: NodeTypes.TEXT });
+
+        expect(textNode.text).toBe('lorem ipsum 1');
+    });
+
+    test('should not find any node', () => {
+        const schema = createSchema();
+        const selector = createSelector();
+
+        const doc = schema.nodeFromJSON(NodeFactory.doc([
+            NodeFactory.paragraph('lorem ipsum 1')
+        ]));
+
+        const node = selector.query(doc, { typeName: NodeTypes.LIST });
+
+        expect(node).toBeNull();
+    });
+});

package/lib/services/index.js

@@ -7,3 +7,4 @@ export { ContextWindow } from './ContextWindow';
 export { NodeFactory } from './NodeFactory';
 export { HtmlToJsonParser } from './HtmlToJsonParser';
 export { StylePresetRenderer } from './StylePresetRenderer';
+export { NodeSelector } from './NodeSelector';

package/package.json

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