From ee645c1eca20ef8c5d3939437efb3ae6e9c53f55 Mon Sep 17 00:00:00 2001
From: Tommy-Sun <61365904+Tommy-Sun@users.noreply.github.com>
Date: Sat, 6 Apr 2024 00:26:48 +0200
Subject: [PATCH] Optionally delete full mention chip (#3341)

* Optionally delete full mention chip

* Added documentation for deleteOnBackspace

* rename all references of deleteOnBackspace to deleteTriggerWithBackspace
---
 docs/api/nodes/mention.md                 | 10 ++++++++++
 packages/extension-mention/src/mention.ts |  8 +++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/docs/api/nodes/mention.md b/docs/api/nodes/mention.md
index 564682c8d..635c34be1 100644
--- a/docs/api/nodes/mention.md
+++ b/docs/api/nodes/mention.md
@@ -67,6 +67,16 @@ Mention.configure({
   }
 })
 ```
+
+### deleteTriggerWithBackspace
+Toggle whether the suggestion character(s) should also be deleted on deletion of a mention node. Default is `false`.
+
+```js
+Mention.configure({
+  deleteTriggerWithBackspace: true
+})
+```
+
 ### suggestion
 [Read more](/api/utilities/suggestion)
 
diff --git a/packages/extension-mention/src/mention.ts b/packages/extension-mention/src/mention.ts
index 04f426aa3..5eaf4c4e5 100644
--- a/packages/extension-mention/src/mention.ts
+++ b/packages/extension-mention/src/mention.ts
@@ -9,6 +9,7 @@ export type MentionOptions = {
   renderLabel?: (props: { options: MentionOptions; node: ProseMirrorNode }) => string
   renderText: (props: { options: MentionOptions; node: ProseMirrorNode }) => string
   renderHTML: (props: { options: MentionOptions; node: ProseMirrorNode }) => DOMOutputSpec
+  deleteTriggerWithBackspace: boolean
   suggestion: Omit<SuggestionOptions, 'editor'>
 }
 
@@ -23,6 +24,7 @@ export const Mention = Node.create<MentionOptions>({
       renderText({ options, node }) {
         return `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`
       },
+      deleteTriggerWithBackspace: false,
       renderHTML({ options, node }) {
         return [
           'span',
@@ -177,7 +179,11 @@ export const Mention = Node.create<MentionOptions>({
         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)
+            tr.insertText(
+              this.options.deleteTriggerWithBackspace ? '' : this.options.suggestion.char || '',
+              pos,
+              pos + node.nodeSize,
+            )
 
             return false
           }