Align admin tables with ticket styling and add board view

src/components/ui/rich-text-editor.tsx

@@ -10,6 +10,7 @@ import {
 } from "react"
 import type { ReactNode } from "react"
 import { useEditor, EditorContent } from "@tiptap/react"
+import type { Editor } from "@tiptap/react"
 import StarterKit from "@tiptap/starter-kit"
 import Placeholder from "@tiptap/extension-placeholder"
 import Mention from "@tiptap/extension-mention"
@@ -253,6 +254,10 @@ const TicketMentionListComponent = (props: TicketMentionSuggestionProps) => (
 
 const TicketMentionExtension = Mention.extend({
   name: "ticketMention",
+  group: "inline",
+  inline: true,
+  draggable: false,
+  selectable: true,
   addAttributes() {
     return {
       id: { default: null },
@@ -263,6 +268,48 @@ const TicketMentionExtension = Mention.extend({
       url: { default: null },
     }
   },
+  addKeyboardShortcuts() {
+    const mentionPrototype = Mention as unknown as {
+      prototype: { addKeyboardShortcuts?: (this: unknown) => unknown }
+    }
+    const parentShortcuts = mentionPrototype.prototype.addKeyboardShortcuts?.call(this) as
+      | Record<string, (args: { editor: Editor }) => boolean>
+      | undefined
+    const parent = parentShortcuts ?? {}
+    return {
+      ...parent,
+      Backspace: ({ editor }: { editor: Editor }) => {
+        const { state } = editor
+        const { selection } = state
+        if (selection.empty) {
+          const { $from } = selection
+          const nodeBefore = $from.nodeBefore
+          if (nodeBefore?.type?.name === this.name) {
+            const from = $from.pos - nodeBefore.nodeSize
+            const to = $from.pos
+            editor.chain().focus().deleteRange({ from, to }).run()
+            return true
+          }
+        }
+        return parent.Backspace ? parent.Backspace({ editor }) : false
+      },
+      Delete: ({ editor }: { editor: Editor }) => {
+        const { state } = editor
+        const { selection } = state
+        if (selection.empty) {
+          const { $from } = selection
+          const nodeAfter = $from.nodeAfter
+          if (nodeAfter?.type?.name === this.name) {
+            const from = $from.pos
+            const to = $from.pos + nodeAfter.nodeSize
+            editor.chain().focus().deleteRange({ from, to }).run()
+            return true
+          }
+        }
+        return parent.Delete ? parent.Delete({ editor }) : false
+      },
+    }
+  },
   parseHTML() {
     return [
       {