@tiptap/extension-mention 2.0.0-beta.21 → 2.0.0-beta.211

package/README.md

@@ -7,8 +7,8 @@
 ## Introduction
 tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
 
-## Offical Documentation
+## Official Documentation
 Documentation can be found on the [tiptap website](https://tiptap.dev).
 
 ## License
-tiptap is open-sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap-next/blob/main/LICENSE.md).
+tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md).

package/dist/index.cjs

@@ -0,0 +1,137 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }// src/mention.ts
+var _core = require('@tiptap/core');
+var _state = require('@tiptap/pm/state');
+var _suggestion = require('@tiptap/suggestion'); var _suggestion2 = _interopRequireDefault(_suggestion);
+var MentionPluginKey = new (0, _state.PluginKey)("mention");
+var Mention = _core.Node.create({
+  name: "mention",
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      renderLabel({ options, node }) {
+        var _a;
+        return `${options.suggestion.char}${(_a = node.attrs.label) != null ? _a : node.attrs.id}`;
+      },
+      suggestion: {
+        char: "@",
+        pluginKey: MentionPluginKey,
+        command: ({ editor, range, props }) => {
+          var _a, _b;
+          const nodeAfter = editor.view.state.selection.$to.nodeAfter;
+          const overrideSpace = (_a = nodeAfter == null ? void 0 : nodeAfter.text) == null ? void 0 : _a.startsWith(" ");
+          if (overrideSpace) {
+            range.to += 1;
+          }
+          editor.chain().focus().insertContentAt(range, [
+            {
+              type: this.name,
+              attrs: props
+            },
+            {
+              type: "text",
+              text: " "
+            }
+          ]).run();
+          (_b = window.getSelection()) == null ? void 0 : _b.collapseToEnd();
+        },
+        allow: ({ state, range }) => {
+          const $from = state.doc.resolve(range.from);
+          const type = state.schema.nodes[this.name];
+          const allow = !!$from.parent.type.contentMatch.matchType(type);
+          return allow;
+        }
+      }
+    };
+  },
+  group: "inline",
+  inline: true,
+  selectable: false,
+  atom: true,
+  addAttributes() {
+    return {
+      id: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-id"),
+        renderHTML: (attributes) => {
+          if (!attributes.id) {
+            return {};
+          }
+          return {
+            "data-id": attributes.id
+          };
+        }
+      },
+      label: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-label"),
+        renderHTML: (attributes) => {
+          if (!attributes.label) {
+            return {};
+          }
+          return {
+            "data-label": attributes.label
+          };
+        }
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: `span[data-type="${this.name}"]`
+      }
+    ];
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    return [
+      "span",
+      _core.mergeAttributes.call(void 0, { "data-type": this.name }, this.options.HTMLAttributes, HTMLAttributes),
+      this.options.renderLabel({
+        options: this.options,
+        node
+      })
+    ];
+  },
+  renderText({ node }) {
+    return this.options.renderLabel({
+      options: this.options,
+      node
+    });
+  },
+  addKeyboardShortcuts() {
+    return {
+      Backspace: () => this.editor.commands.command(({ tr, state }) => {
+        let isMention = false;
+        const { selection } = state;
+        const { empty, anchor } = selection;
+        if (!empty) {
+          return false;
+        }
+        state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {
+          if (node.type.name === this.name) {
+            isMention = true;
+            tr.insertText(this.options.suggestion.char || "", pos, pos + node.nodeSize);
+            return false;
+          }
+        });
+        return isMention;
+      })
+    };
+  },
+  addProseMirrorPlugins() {
+    return [
+      _suggestion2.default.call(void 0, {
+        editor: this.editor,
+        ...this.options.suggestion
+      })
+    ];
+  }
+});
+
+// src/index.ts
+var src_default = Mention;
+
+
+
+
+exports.Mention = Mention; exports.MentionPluginKey = MentionPluginKey; exports.default = src_default;

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import { Node as Node$1 } from '@tiptap/core';
+import { Node } from '@tiptap/pm/model';
+import { PluginKey } from '@tiptap/pm/state';
+import { SuggestionOptions } from '@tiptap/suggestion';
+
+declare type MentionOptions = {
+    HTMLAttributes: Record<string, any>;
+    renderLabel: (props: {
+        options: MentionOptions;
+        node: Node;
+    }) => string;
+    suggestion: Omit<SuggestionOptions, 'editor'>;
+};
+declare const MentionPluginKey: PluginKey<any>;
+declare const Mention: Node$1<MentionOptions, any>;
+
+export { Mention, MentionOptions, MentionPluginKey, Mention as default };

package/dist/index.js

@@ -0,0 +1,137 @@
+// src/mention.ts
+import { mergeAttributes, Node } from "@tiptap/core";
+import { PluginKey } from "@tiptap/pm/state";
+import Suggestion from "@tiptap/suggestion";
+var MentionPluginKey = new PluginKey("mention");
+var Mention = Node.create({
+  name: "mention",
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      renderLabel({ options, node }) {
+        var _a;
+        return `${options.suggestion.char}${(_a = node.attrs.label) != null ? _a : node.attrs.id}`;
+      },
+      suggestion: {
+        char: "@",
+        pluginKey: MentionPluginKey,
+        command: ({ editor, range, props }) => {
+          var _a, _b;
+          const nodeAfter = editor.view.state.selection.$to.nodeAfter;
+          const overrideSpace = (_a = nodeAfter == null ? void 0 : nodeAfter.text) == null ? void 0 : _a.startsWith(" ");
+          if (overrideSpace) {
+            range.to += 1;
+          }
+          editor.chain().focus().insertContentAt(range, [
+            {
+              type: this.name,
+              attrs: props
+            },
+            {
+              type: "text",
+              text: " "
+            }
+          ]).run();
+          (_b = window.getSelection()) == null ? void 0 : _b.collapseToEnd();
+        },
+        allow: ({ state, range }) => {
+          const $from = state.doc.resolve(range.from);
+          const type = state.schema.nodes[this.name];
+          const allow = !!$from.parent.type.contentMatch.matchType(type);
+          return allow;
+        }
+      }
+    };
+  },
+  group: "inline",
+  inline: true,
+  selectable: false,
+  atom: true,
+  addAttributes() {
+    return {
+      id: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-id"),
+        renderHTML: (attributes) => {
+          if (!attributes.id) {
+            return {};
+          }
+          return {
+            "data-id": attributes.id
+          };
+        }
+      },
+      label: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-label"),
+        renderHTML: (attributes) => {
+          if (!attributes.label) {
+            return {};
+          }
+          return {
+            "data-label": attributes.label
+          };
+        }
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: `span[data-type="${this.name}"]`
+      }
+    ];
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    return [
+      "span",
+      mergeAttributes({ "data-type": this.name }, this.options.HTMLAttributes, HTMLAttributes),
+      this.options.renderLabel({
+        options: this.options,
+        node
+      })
+    ];
+  },
+  renderText({ node }) {
+    return this.options.renderLabel({
+      options: this.options,
+      node
+    });
+  },
+  addKeyboardShortcuts() {
+    return {
+      Backspace: () => this.editor.commands.command(({ tr, state }) => {
+        let isMention = false;
+        const { selection } = state;
+        const { empty, anchor } = selection;
+        if (!empty) {
+          return false;
+        }
+        state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {
+          if (node.type.name === this.name) {
+            isMention = true;
+            tr.insertText(this.options.suggestion.char || "", pos, pos + node.nodeSize);
+            return false;
+          }
+        });
+        return isMention;
+      })
+    };
+  },
+  addProseMirrorPlugins() {
+    return [
+      Suggestion({
+        editor: this.editor,
+        ...this.options.suggestion
+      })
+    ];
+  }
+});
+
+// src/index.ts
+var src_default = Mention;
+export {
+  Mention,
+  MentionPluginKey,
+  src_default as default
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/extension-mention",
   "description": "mention extension for tiptap",
-  "version": "2.0.0-beta.21",
+  "version": "2.0.0-beta.211",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -12,20 +12,48 @@
     "type": "github",
     "url": "https://github.com/sponsors/ueberdosis"
   },
-  "main": "dist/tiptap-extension-mention.cjs.js",
-  "umd": "dist/tiptap-extension-mention.umd.js",
-  "module": "dist/tiptap-extension-mention.esm.js",
-  "unpkg": "dist/tiptap-extension-mention.bundle.umd.min.js",
-  "types": "dist/packages/extension-mention/src/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "src",
     "dist"
   ],
   "peerDependencies": {
-    "@tiptap/core": "^2.0.0-beta.1"
+    "@tiptap/core": "^2.0.0-beta.209",
+    "@tiptap/pm": "^2.0.0-beta.209",
+    "@tiptap/suggestion": "^2.0.0-beta.209"
+  },
+  "devDependencies": {
+    "@tiptap/core": "^2.0.0-beta.211",
+    "@tiptap/pm": "^2.0.0-beta.211",
+    "@tiptap/suggestion": "^2.0.0-beta.211"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ueberdosis/tiptap",
+    "directory": "packages/extension-mention"
   },
-  "dependencies": {
-    "@tiptap/suggestion": "^2.0.0-beta.21"
+  "scripts": {
+    "build": "tsup"
   },
-  "gitHead": "113d50b814c8860465c8bb16ae2bee3097689016"
+  "tsup": {
+    "entry": [
+      "src/index.ts"
+    ],
+    "dts": true,
+    "splitting": true,
+    "format": [
+      "esm",
+      "cjs"
+    ]
+  }
 }

package/src/mention.ts

@@ -1,32 +1,64 @@
-import { Node, mergeAttributes } from '@tiptap/core'
+import { mergeAttributes, Node } from '@tiptap/core'
+import { Node as ProseMirrorNode } from '@tiptap/pm/model'
+import { PluginKey } from '@tiptap/pm/state'
 import Suggestion, { SuggestionOptions } from '@tiptap/suggestion'
 
 export type MentionOptions = {
-  HTMLAttributes: {
-    [key: string]: any,
-  },
-  suggestion: Omit<SuggestionOptions, 'editor'>,
+  HTMLAttributes: Record<string, any>
+  renderLabel: (props: { options: MentionOptions; node: ProseMirrorNode }) => string
+  suggestion: Omit<SuggestionOptions, 'editor'>
 }
 
+export const MentionPluginKey = new PluginKey('mention')
+
 export const Mention = Node.create<MentionOptions>({
   name: 'mention',
 
-  defaultOptions: {
-    HTMLAttributes: {},
-    suggestion: {
-      char: '@',
-      command: ({ editor, range, props }) => {
-        editor
-          .chain()
-          .focus()
-          .replaceRange(range, 'mention', props)
-          .insertContent(' ')
-          .run()
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      renderLabel({ options, node }) {
+        return `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`
       },
-      allow: ({ editor, range }) => {
-        return editor.can().replaceRange(range, 'mention')
+      suggestion: {
+        char: '@',
+        pluginKey: MentionPluginKey,
+        command: ({ editor, range, props }) => {
+          // increase range.to by one when the next node is of type "text"
+          // and starts with a space character
+          const nodeAfter = editor.view.state.selection.$to.nodeAfter
+          const overrideSpace = nodeAfter?.text?.startsWith(' ')
+
+          if (overrideSpace) {
+            range.to += 1
+          }
+
+          editor
+            .chain()
+            .focus()
+            .insertContentAt(range, [
+              {
+                type: this.name,
+                attrs: props,
+              },
+              {
+                type: 'text',
+                text: ' ',
+              },
+            ])
+            .run()
+
+          window.getSelection()?.collapseToEnd()
+        },
+        allow: ({ state, range }) => {
+          const $from = state.doc.resolve(range.from)
+          const type = state.schema.nodes[this.name]
+          const allow = !!$from.parent.type.contentMatch.matchType(type)
+
+          return allow
+        },
       },
-    },
+    }
   },
 
   group: 'inline',
@@ -41,18 +73,28 @@ export const Mention = Node.create<MentionOptions>({
     return {
       id: {
         default: null,
-        parseHTML: element => {
+        parseHTML: element => element.getAttribute('data-id'),
+        renderHTML: attributes => {
+          if (!attributes.id) {
+            return {}
+          }
+
           return {
-            id: element.getAttribute('data-mention'),
+            'data-id': attributes.id,
           }
         },
+      },
+
+      label: {
+        default: null,
+        parseHTML: element => element.getAttribute('data-label'),
         renderHTML: attributes => {
-          if (!attributes.id) {
+          if (!attributes.label) {
             return {}
           }
 
           return {
-            'data-mention': attributes.id,
+            'data-label': attributes.label,
           }
         },
       },
@@ -62,17 +104,27 @@ export const Mention = Node.create<MentionOptions>({
   parseHTML() {
     return [
       {
-        tag: 'span[data-mention]',
+        tag: `span[data-type="${this.name}"]`,
       },
     ]
   },
 
   renderHTML({ node, HTMLAttributes }) {
-    return ['span', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), `@${node.attrs.id}`]
+    return [
+      'span',
+      mergeAttributes({ 'data-type': this.name }, this.options.HTMLAttributes, HTMLAttributes),
+      this.options.renderLabel({
+        options: this.options,
+        node,
+      }),
+    ]
   },
 
   renderText({ node }) {
-    return `@${node.attrs.id}`
+    return this.options.renderLabel({
+      options: this.options,
+      node,
+    })
   },
 
   addKeyboardShortcuts() {
@@ -87,7 +139,7 @@ export const Mention = Node.create<MentionOptions>({
         }
 
         state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {
-          if (node.type.name === 'mention') {
+          if (node.type.name === this.name) {
             isMention = true
             tr.insertText(this.options.suggestion.char || '', pos, pos + node.nodeSize)