@bikdotai/bik-component-library 0.0.821-3 → 0.0.821-beta.0

package/dist/esm/editor/extensions/buildExtensions.js

@@ -4,23 +4,23 @@ import f from "@tiptap/extension-font-family";
 import c from "@tiptap/extension-hard-break";
 import x from "@tiptap/extension-highlight";
 import S from "@tiptap/extension-image";
-import k from "@tiptap/extension-link";
-import M from "../../node_modules/@tiptap/extension-paragraph/dist/index.js";
+import M from "@tiptap/extension-link";
+import k from "../../node_modules/@tiptap/extension-paragraph/dist/index.js";
 import b from "@tiptap/extension-placeholder";
 import y from "@tiptap/extension-subscript";
 import C from "@tiptap/extension-superscript";
 import E from "@tiptap/extension-text-align";
-import { TextStyle as P } from "@tiptap/extension-text-style";
-import T from "@tiptap/extension-underline";
-import H from "@tiptap/starter-kit";
-import { FontSizeExtension as w } from "./FontSizeExtension.js";
-import { buildAgentMentionExtension as B, buildTeamMentionExtension as D } from "./mention/MentionExtension.js";
-import { PasteExtension as I } from "./paste/PasteExtension.js";
-import { PasteNormalizationExtension as L } from "./plainClipboard/PasteNormalizationExtension.js";
-import { SectionDividerNode as g } from "./sectionDivider/SectionDividerNode.js";
-import { SendShortcutExtension as A } from "./sendShortcut/SendShortcutExtension.js";
-import { buildSlashCommandExtension as R } from "./slashCommand/SlashCommandExtension.js";
-import { VariableDecorationExtension as F } from "./variable/VariableDecorationExtension.js";
+import { TextStyle as T } from "@tiptap/extension-text-style";
+import P from "@tiptap/extension-underline";
+import D from "@tiptap/starter-kit";
+import { FontSizeExtension as g } from "./FontSizeExtension.js";
+import { buildAgentMentionExtension as H, buildTeamMentionExtension as w } from "./mention/MentionExtension.js";
+import { PasteExtension as B } from "./paste/PasteExtension.js";
+import { PasteNormalizationExtension as I } from "./plainClipboard/PasteNormalizationExtension.js";
+import { SectionDividerNode as L } from "./sectionDivider/SectionDividerNode.js";
+import { SendShortcutExtension as O } from "./sendShortcut/SendShortcutExtension.js";
+import { buildSlashCommandExtension as A } from "./slashCommand/SlashCommandExtension.js";
+import { VariableDecorationExtension as R } from "./variable/VariableDecorationExtension.js";
 function ae(e) {
   const o = e.features?.richPaste ?? !1, i = e.features?.richTypography ?? !1, n = e.features?.allowedMarks, t = (r) => !n || n.includes(r), m = c.extend({
     addKeyboardShortcuts() {
@@ -28,7 +28,7 @@ function ae(e) {
         "Shift-Enter": () => this.editor.commands.setHardBreak()
       };
     }
-  }), a = (r) => r === "0" || r === "0px" || r === "0pt" || r === "0em", l = M.extend({
+  }), a = (r) => r === "0" || r === "0px" || r === "0pt" || r === "0em", l = k.extend({
     addAttributes() {
       return {
         ...this.parent?.() ?? {},
@@ -43,7 +43,7 @@ function ae(e) {
     // Exclude Link and Underline from StarterKit — TipTap v3 bundles both.
     // Without this, two copies of each are registered and the StarterKit copy's
     // click handler calls window.open even when openOnClick: false is set.
-    H.configure({
+    D.configure({
       link: !1,
       underline: !1,
       hardBreak: !1,
@@ -55,10 +55,10 @@ function ae(e) {
     }),
     l,
     m,
-    ...t("underline") ? [T] : [],
+    ...t("underline") ? [P] : [],
     // Extend Link to strip addPasteRules() and addInputRules() so pasting a
     // URL never creates a hyperlink regardless of autolink/linkOnPaste values.
-    k.extend({
+    M.extend({
       addPasteRules: () => [],
       addInputRules: () => []
     }).configure({
@@ -70,52 +70,54 @@ function ae(e) {
         class: "bik-link"
       }
     }),
-    P,
+    T,
     b.configure({
       placeholder: e.placeholder ?? "Type a message..."
     }),
     // Consumer paste callback runs first. If it returns true the event is
     // consumed and neither PlainClipboardExtension nor the editor's default
     // paste handling will run for that event.
-    ...e.onPaste ? [I.configure({ onPaste: e.onPaste })] : [],
-    L.configure({
+    ...e.onPaste ? [B.configure({ onPaste: e.onPaste })] : [],
+    I.configure({
       preserveMarks: o,
       // Only email + signature (richPaste) keep the rich HTML paste pipeline.
       // Every other channel (WhatsApp, IG, FB, comments) forces plain-text
       // paste for BOTH Cmd/Ctrl+V and Cmd/Ctrl+Shift+V — no formatting.
       plainOnly: !o
     }),
-    A.configure({
+    O.configure({
       onSend: e.onSend,
       sendShortcut: e.sendShortcut,
       extraShortcuts: e.shortcuts ?? []
     }),
-    F,
+    R,
     ...e.maxCharacters ? [h.configure({ limit: e.maxCharacters })] : [],
     // Always register SectionDividerNode so the custom <div data-section-divider>
     // node is part of the schema in every editor instance.  This means imperative
     // callers (setBodyAndSections / setSectionContent) work even when no
     // `sections` prop was provided at mount time.
-    g
+    L
   ], p = [
     ...e.mentions?.agents ? [
-      B(
+      H(
         e.mentions.agents,
         e.onMentionSelected,
         e.renderMentionItem,
-        e.renderMentionDropdown
+        e.renderMentionDropdown,
+        e.removeMentionTriggerOnDismiss
       )
     ] : [],
     ...e.mentions?.teams ? [
-      D(
+      w(
         e.mentions.teams,
         e.onMentionSelected,
         e.renderMentionItem,
-        e.renderMentionDropdown
+        e.renderMentionDropdown,
+        e.removeMentionTriggerOnDismiss
       )
     ] : [],
     ...e.slashCommands ? [
-      R(
+      A(
         e.slashCommands,
         e.onSlashCommandSelected,
         e.renderSlashCommandItem,
@@ -126,7 +128,7 @@ function ae(e) {
     s,
     x.configure({ multicolor: !0 }),
     f,
-    w,
+    g,
     E.configure({ types: ["heading", "paragraph"] }),
     y,
     C,

package/dist/esm/editor/extensions/buildExtensions.js.map

@@ -1 +1 @@
-{"version":3,"file":"buildExtensions.js","sources":["../../../../src/editor/extensions/buildExtensions.ts"],"sourcesContent":["import CharacterCount from '@tiptap/extension-character-count';\nimport Color from '@tiptap/extension-color';\nimport FontFamily from '@tiptap/extension-font-family';\nimport HardBreak from '@tiptap/extension-hard-break';\nimport Highlight from '@tiptap/extension-highlight';\nimport Image from '@tiptap/extension-image';\nimport Link from '@tiptap/extension-link';\nimport Paragraph from '@tiptap/extension-paragraph';\nimport Placeholder from '@tiptap/extension-placeholder';\nimport Subscript from '@tiptap/extension-subscript';\nimport Superscript from '@tiptap/extension-superscript';\nimport TextAlign from '@tiptap/extension-text-align';\nimport { TextStyle } from '@tiptap/extension-text-style';\nimport Underline from '@tiptap/extension-underline';\nimport StarterKit from '@tiptap/starter-kit';\nimport type { ReactNode } from 'react';\nimport type {\n\tEditorFeatures,\n\tEditorSnapshot,\n\tKeyboardShortcut,\n\tMentionDropdownRenderProps,\n\tMentionItem,\n\tPasteData,\n\tSlashCommandDropdownRenderProps,\n\tSlashCommandItem,\n} from '../BikEditor.types';\nimport { FontSizeExtension } from './FontSizeExtension';\nimport {\n\tbuildAgentMentionExtension,\n\tbuildTeamMentionExtension,\n} from './mention/MentionExtension';\nimport { PasteExtension } from './paste/PasteExtension';\nimport { PasteNormalizationExtension } from './plainClipboard/PasteNormalizationExtension';\nimport { SectionDividerNode } from './sectionDivider/SectionDividerNode';\nimport { SendShortcutExtension } from './sendShortcut/SendShortcutExtension';\nimport { buildSlashCommandExtension } from './slashCommand/SlashCommandExtension';\nimport { VariableDecorationExtension } from './variable/VariableDecorationExtension';\n\ninterface ExtensionConfig {\n\tfeatures?: EditorFeatures;\n\tplaceholder?: string;\n\tmaxCharacters?: number;\n\thasSections?: boolean;\n\tmentions?: {\n\t\tagents?: { current: MentionItem[] };\n\t\tteams?: { current: MentionItem[] };\n\t};\n\tslashCommands?: { current: SlashCommandItem[] };\n\tonPaste?: (data: PasteData) => boolean | void;\n\tonSend?: (content: EditorSnapshot) => void;\n\tsendShortcut?:\n\t\t| { key: string; modifiers?: Array<'mod' | 'ctrl' | 'shift' | 'alt'> }\n\t\t| Array<{\n\t\t\t\tkey: string;\n\t\t\t\tmodifiers?: Array<'mod' | 'ctrl' | 'shift' | 'alt'>;\n\t\t  }>;\n\tshortcuts?: KeyboardShortcut[];\n\tonMentionSelected?: (item: MentionItem, char: '@' | '#') => void;\n\tonSlashCommandSelected?: (command: SlashCommandItem) => void;\n\trenderMentionItem?: (item: MentionItem, isActive: boolean) => ReactNode;\n\trenderMentionDropdown?: (props: MentionDropdownRenderProps) => ReactNode;\n\trenderSlashCommandItem?: (\n\t\titem: SlashCommandItem,\n\t\tisActive: boolean,\n\t) => ReactNode;\n\trenderSlashCommandDropdown?: (\n\t\tprops: SlashCommandDropdownRenderProps,\n\t) => ReactNode;\n}\n\nexport function buildExtensions(config: ExtensionConfig) {\n\tconst hasRichPaste = config.features?.richPaste ?? false;\n\tconst hasRichTypography = config.features?.richTypography ?? false;\n\n\t// When allowedMarks is specified only those marks are registered in the schema.\n\t// This disables rendering, keyboard shortcuts AND paste-preservation for the\n\t// excluded marks — all three come for free when the extension is absent.\n\tconst allowedMarks = config.features?.allowedMarks;\n\tconst isMark = (m: 'bold' | 'italic' | 'strike' | 'underline' | 'code') =>\n\t\t!allowedMarks || allowedMarks.includes(m);\n\n\t// Soft line break. Shift-Enter inserts a <br> inside the current block\n\t// (matches Gmail); plain Enter still splits the block into a new paragraph\n\t// via StarterKit's default. HardBreak is registered standalone — like Link\n\t// and Underline above — instead of through StarterKit, so we can bind ONLY\n\t// Shift-Enter here and leave Mod-Enter free for the send shortcut.\n\tconst softBreak = HardBreak.extend({\n\t\taddKeyboardShortcuts() {\n\t\t\treturn {\n\t\t\t\t'Shift-Enter': () => this.editor.commands.setHardBreak(),\n\t\t\t};\n\t\t},\n\t});\n\n\t// Paragraph that preserves a zero block-margin from the source (Gmail-style).\n\t// Most sources (ChatGPT, typed text) use plain <p> → no margin attr → the\n\t// editor/viewer default 1em margin provides the gap. Google-Docs-style\n\t// content uses margin:0 paragraphs and a separate blank-line paragraph for\n\t// spacing; we keep that margin:0 so the blank line — not stacked margins —\n\t// provides a single-line gap, exactly like Gmail. The paste pipeline also\n\t// sets margin:'0' on every paragraph when a paste contains blank-line\n\t// paragraphs (see applyParagraphSpacing), so spacing comes from EITHER the\n\t// margin OR the blank line, never both (no double gap).\n\tconst isZeroLen = (v: string) =>\n\t\tv === '0' || v === '0px' || v === '0pt' || v === '0em';\n\tconst ParagraphWithMargin = Paragraph.extend({\n\t\taddAttributes() {\n\t\t\treturn {\n\t\t\t\t...(this.parent?.() ?? {}),\n\t\t\t\tmargin: {\n\t\t\t\t\tdefault: null,\n\t\t\t\t\tparseHTML: (el: HTMLElement) =>\n\t\t\t\t\t\tisZeroLen(el.style.marginTop) && isZeroLen(el.style.marginBottom)\n\t\t\t\t\t\t\t? '0'\n\t\t\t\t\t\t\t: null,\n\t\t\t\t\trenderHTML: (attrs: { margin?: string | null }) =>\n\t\t\t\t\t\tattrs.margin === '0' ? { style: 'margin: 0px' } : {},\n\t\t\t\t},\n\t\t\t};\n\t\t},\n\t});\n\n\tconst base = [\n\t\t// Exclude Link and Underline from StarterKit — TipTap v3 bundles both.\n\t\t// Without this, two copies of each are registered and the StarterKit copy's\n\t\t// click handler calls window.open even when openOnClick: false is set.\n\t\tStarterKit.configure({\n\t\t\tlink: false,\n\t\t\tunderline: false,\n\t\t\thardBreak: false,\n\t\t\tparagraph: false,\n\t\t\tbold: isMark('bold') ? {} : false,\n\t\t\titalic: isMark('italic') ? {} : false,\n\t\t\tstrike: isMark('strike') ? {} : false,\n\t\t\tcode: isMark('code') ? {} : false,\n\t\t}),\n\t\tParagraphWithMargin,\n\t\tsoftBreak,\n\t\t...(isMark('underline') ? [Underline] : []),\n\t\t// Extend Link to strip addPasteRules() and addInputRules() so pasting a\n\t\t// URL never creates a hyperlink regardless of autolink/linkOnPaste values.\n\t\tLink.extend({\n\t\t\taddPasteRules: () => [],\n\t\t\taddInputRules: () => [],\n\t\t}).configure({\n\t\t\topenOnClick: false,\n\t\t\tautolink: false,\n\t\t\tlinkOnPaste: false,\n\t\t\tHTMLAttributes: {\n\t\t\t\trel: 'noopener noreferrer',\n\t\t\t\tclass: 'bik-link',\n\t\t\t},\n\t\t}),\n\t\tTextStyle,\n\t\tPlaceholder.configure({\n\t\t\tplaceholder: config.placeholder ?? 'Type a message...',\n\t\t}),\n\t\t// Consumer paste callback runs first. If it returns true the event is\n\t\t// consumed and neither PlainClipboardExtension nor the editor's default\n\t\t// paste handling will run for that event.\n\t\t...(config.onPaste\n\t\t\t? [PasteExtension.configure({ onPaste: config.onPaste })]\n\t\t\t: []),\n\t\tPasteNormalizationExtension.configure({\n\t\t\tpreserveMarks: hasRichPaste,\n\t\t\t// Only email + signature (richPaste) keep the rich HTML paste pipeline.\n\t\t\t// Every other channel (WhatsApp, IG, FB, comments) forces plain-text\n\t\t\t// paste for BOTH Cmd/Ctrl+V and Cmd/Ctrl+Shift+V — no formatting.\n\t\t\tplainOnly: !hasRichPaste,\n\t\t}),\n\t\tSendShortcutExtension.configure({\n\t\t\tonSend: config.onSend,\n\t\t\tsendShortcut: config.sendShortcut,\n\t\t\textraShortcuts: config.shortcuts ?? [],\n\t\t}),\n\t\tVariableDecorationExtension,\n\t\t...(config.maxCharacters\n\t\t\t? [CharacterCount.configure({ limit: config.maxCharacters })]\n\t\t\t: []),\n\t\t// Always register SectionDividerNode so the custom <div data-section-divider>\n\t\t// node is part of the schema in every editor instance.  This means imperative\n\t\t// callers (setBodyAndSections / setSectionContent) work even when no\n\t\t// `sections` prop was provided at mount time.\n\t\tSectionDividerNode,\n\t];\n\n\tconst mentionExtensions = [\n\t\t...(config.mentions?.agents\n\t\t\t? [\n\t\t\t\t\tbuildAgentMentionExtension(\n\t\t\t\t\t\tconfig.mentions.agents,\n\t\t\t\t\t\tconfig.onMentionSelected,\n\t\t\t\t\t\tconfig.renderMentionItem,\n\t\t\t\t\t\tconfig.renderMentionDropdown,\n\t\t\t\t\t),\n\t\t\t  ]\n\t\t\t: []),\n\t\t...(config.mentions?.teams\n\t\t\t? [\n\t\t\t\t\tbuildTeamMentionExtension(\n\t\t\t\t\t\tconfig.mentions.teams,\n\t\t\t\t\t\tconfig.onMentionSelected,\n\t\t\t\t\t\tconfig.renderMentionItem,\n\t\t\t\t\t\tconfig.renderMentionDropdown,\n\t\t\t\t\t),\n\t\t\t  ]\n\t\t\t: []),\n\t\t...(config.slashCommands\n\t\t\t? [\n\t\t\t\t\tbuildSlashCommandExtension(\n\t\t\t\t\t\tconfig.slashCommands,\n\t\t\t\t\t\tconfig.onSlashCommandSelected,\n\t\t\t\t\t\tconfig.renderSlashCommandItem,\n\t\t\t\t\t\tconfig.renderSlashCommandDropdown,\n\t\t\t\t\t),\n\t\t\t  ]\n\t\t\t: []),\n\t];\n\n\tconst richExtensions = hasRichTypography\n\t\t? [\n\t\t\t\tColor,\n\t\t\t\tHighlight.configure({ multicolor: true }),\n\t\t\t\tFontFamily,\n\t\t\t\tFontSizeExtension,\n\t\t\t\tTextAlign.configure({ types: ['heading', 'paragraph'] }),\n\t\t\t\tSubscript,\n\t\t\t\tSuperscript,\n\t\t\t\tImage,\n\t\t  ]\n\t\t: [Color];\n\n\treturn [...base, ...mentionExtensions, ...richExtensions];\n}\n"],"names":["buildExtensions","config","hasRichPaste","hasRichTypography","allowedMarks","isMark","m","softBreak","HardBreak","isZeroLen","v","ParagraphWithMargin","Paragraph","el","attrs","base","StarterKit","Underline","Link","TextStyle","Placeholder","PasteExtension","PasteNormalizationExtension","SendShortcutExtension","VariableDecorationExtension","CharacterCount","SectionDividerNode","mentionExtensions","buildAgentMentionExtension","buildTeamMentionExtension","buildSlashCommandExtension","richExtensions","Color","Highlight","FontFamily","FontSizeExtension","TextAlign","Subscript","Superscript","Image"],"mappings":"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"}
+{"version":3,"file":"buildExtensions.js","sources":["../../../../src/editor/extensions/buildExtensions.ts"],"sourcesContent":["import CharacterCount from '@tiptap/extension-character-count';\nimport Color from '@tiptap/extension-color';\nimport FontFamily from '@tiptap/extension-font-family';\nimport HardBreak from '@tiptap/extension-hard-break';\nimport Highlight from '@tiptap/extension-highlight';\nimport Image from '@tiptap/extension-image';\nimport Link from '@tiptap/extension-link';\nimport Paragraph from '@tiptap/extension-paragraph';\nimport Placeholder from '@tiptap/extension-placeholder';\nimport Subscript from '@tiptap/extension-subscript';\nimport Superscript from '@tiptap/extension-superscript';\nimport TextAlign from '@tiptap/extension-text-align';\nimport { TextStyle } from '@tiptap/extension-text-style';\nimport Underline from '@tiptap/extension-underline';\nimport StarterKit from '@tiptap/starter-kit';\nimport type { ReactNode } from 'react';\nimport type {\n\tEditorFeatures,\n\tEditorSnapshot,\n\tKeyboardShortcut,\n\tMentionDropdownRenderProps,\n\tMentionItem,\n\tPasteData,\n\tSlashCommandDropdownRenderProps,\n\tSlashCommandItem,\n} from '../BikEditor.types';\nimport { FontSizeExtension } from './FontSizeExtension';\nimport {\n\tbuildAgentMentionExtension,\n\tbuildTeamMentionExtension,\n} from './mention/MentionExtension';\nimport { PasteExtension } from './paste/PasteExtension';\nimport { PasteNormalizationExtension } from './plainClipboard/PasteNormalizationExtension';\nimport { SectionDividerNode } from './sectionDivider/SectionDividerNode';\nimport { SendShortcutExtension } from './sendShortcut/SendShortcutExtension';\nimport { buildSlashCommandExtension } from './slashCommand/SlashCommandExtension';\nimport { VariableDecorationExtension } from './variable/VariableDecorationExtension';\n\ninterface ExtensionConfig {\n\tfeatures?: EditorFeatures;\n\tplaceholder?: string;\n\tmaxCharacters?: number;\n\thasSections?: boolean;\n\tmentions?: {\n\t\tagents?: { current: MentionItem[] };\n\t\tteams?: { current: MentionItem[] };\n\t};\n\tslashCommands?: { current: SlashCommandItem[] };\n\tonPaste?: (data: PasteData) => boolean | void;\n\tonSend?: (content: EditorSnapshot) => void;\n\tsendShortcut?:\n\t\t| { key: string; modifiers?: Array<'mod' | 'ctrl' | 'shift' | 'alt'> }\n\t\t| Array<{\n\t\t\t\tkey: string;\n\t\t\t\tmodifiers?: Array<'mod' | 'ctrl' | 'shift' | 'alt'>;\n\t\t  }>;\n\tshortcuts?: KeyboardShortcut[];\n\tonMentionSelected?: (item: MentionItem, char: '@' | '#') => void;\n\tonSlashCommandSelected?: (command: SlashCommandItem) => void;\n\trenderMentionItem?: (item: MentionItem, isActive: boolean) => ReactNode;\n\trenderMentionDropdown?: (props: MentionDropdownRenderProps) => ReactNode;\n\tremoveMentionTriggerOnDismiss?: boolean;\n\trenderSlashCommandItem?: (\n\t\titem: SlashCommandItem,\n\t\tisActive: boolean,\n\t) => ReactNode;\n\trenderSlashCommandDropdown?: (\n\t\tprops: SlashCommandDropdownRenderProps,\n\t) => ReactNode;\n}\n\nexport function buildExtensions(config: ExtensionConfig) {\n\tconst hasRichPaste = config.features?.richPaste ?? false;\n\tconst hasRichTypography = config.features?.richTypography ?? false;\n\n\t// When allowedMarks is specified only those marks are registered in the schema.\n\t// This disables rendering, keyboard shortcuts AND paste-preservation for the\n\t// excluded marks — all three come for free when the extension is absent.\n\tconst allowedMarks = config.features?.allowedMarks;\n\tconst isMark = (m: 'bold' | 'italic' | 'strike' | 'underline' | 'code') =>\n\t\t!allowedMarks || allowedMarks.includes(m);\n\n\t// Soft line break. Shift-Enter inserts a <br> inside the current block\n\t// (matches Gmail); plain Enter still splits the block into a new paragraph\n\t// via StarterKit's default. HardBreak is registered standalone — like Link\n\t// and Underline above — instead of through StarterKit, so we can bind ONLY\n\t// Shift-Enter here and leave Mod-Enter free for the send shortcut.\n\tconst softBreak = HardBreak.extend({\n\t\taddKeyboardShortcuts() {\n\t\t\treturn {\n\t\t\t\t'Shift-Enter': () => this.editor.commands.setHardBreak(),\n\t\t\t};\n\t\t},\n\t});\n\n\t// Paragraph that preserves a zero block-margin from the source (Gmail-style).\n\t// Most sources (ChatGPT, typed text) use plain <p> → no margin attr → the\n\t// editor/viewer default 1em margin provides the gap. Google-Docs-style\n\t// content uses margin:0 paragraphs and a separate blank-line paragraph for\n\t// spacing; we keep that margin:0 so the blank line — not stacked margins —\n\t// provides a single-line gap, exactly like Gmail. The paste pipeline also\n\t// sets margin:'0' on every paragraph when a paste contains blank-line\n\t// paragraphs (see applyParagraphSpacing), so spacing comes from EITHER the\n\t// margin OR the blank line, never both (no double gap).\n\tconst isZeroLen = (v: string) =>\n\t\tv === '0' || v === '0px' || v === '0pt' || v === '0em';\n\tconst ParagraphWithMargin = Paragraph.extend({\n\t\taddAttributes() {\n\t\t\treturn {\n\t\t\t\t...(this.parent?.() ?? {}),\n\t\t\t\tmargin: {\n\t\t\t\t\tdefault: null,\n\t\t\t\t\tparseHTML: (el: HTMLElement) =>\n\t\t\t\t\t\tisZeroLen(el.style.marginTop) && isZeroLen(el.style.marginBottom)\n\t\t\t\t\t\t\t? '0'\n\t\t\t\t\t\t\t: null,\n\t\t\t\t\trenderHTML: (attrs: { margin?: string | null }) =>\n\t\t\t\t\t\tattrs.margin === '0' ? { style: 'margin: 0px' } : {},\n\t\t\t\t},\n\t\t\t};\n\t\t},\n\t});\n\n\tconst base = [\n\t\t// Exclude Link and Underline from StarterKit — TipTap v3 bundles both.\n\t\t// Without this, two copies of each are registered and the StarterKit copy's\n\t\t// click handler calls window.open even when openOnClick: false is set.\n\t\tStarterKit.configure({\n\t\t\tlink: false,\n\t\t\tunderline: false,\n\t\t\thardBreak: false,\n\t\t\tparagraph: false,\n\t\t\tbold: isMark('bold') ? {} : false,\n\t\t\titalic: isMark('italic') ? {} : false,\n\t\t\tstrike: isMark('strike') ? {} : false,\n\t\t\tcode: isMark('code') ? {} : false,\n\t\t}),\n\t\tParagraphWithMargin,\n\t\tsoftBreak,\n\t\t...(isMark('underline') ? [Underline] : []),\n\t\t// Extend Link to strip addPasteRules() and addInputRules() so pasting a\n\t\t// URL never creates a hyperlink regardless of autolink/linkOnPaste values.\n\t\tLink.extend({\n\t\t\taddPasteRules: () => [],\n\t\t\taddInputRules: () => [],\n\t\t}).configure({\n\t\t\topenOnClick: false,\n\t\t\tautolink: false,\n\t\t\tlinkOnPaste: false,\n\t\t\tHTMLAttributes: {\n\t\t\t\trel: 'noopener noreferrer',\n\t\t\t\tclass: 'bik-link',\n\t\t\t},\n\t\t}),\n\t\tTextStyle,\n\t\tPlaceholder.configure({\n\t\t\tplaceholder: config.placeholder ?? 'Type a message...',\n\t\t}),\n\t\t// Consumer paste callback runs first. If it returns true the event is\n\t\t// consumed and neither PlainClipboardExtension nor the editor's default\n\t\t// paste handling will run for that event.\n\t\t...(config.onPaste\n\t\t\t? [PasteExtension.configure({ onPaste: config.onPaste })]\n\t\t\t: []),\n\t\tPasteNormalizationExtension.configure({\n\t\t\tpreserveMarks: hasRichPaste,\n\t\t\t// Only email + signature (richPaste) keep the rich HTML paste pipeline.\n\t\t\t// Every other channel (WhatsApp, IG, FB, comments) forces plain-text\n\t\t\t// paste for BOTH Cmd/Ctrl+V and Cmd/Ctrl+Shift+V — no formatting.\n\t\t\tplainOnly: !hasRichPaste,\n\t\t}),\n\t\tSendShortcutExtension.configure({\n\t\t\tonSend: config.onSend,\n\t\t\tsendShortcut: config.sendShortcut,\n\t\t\textraShortcuts: config.shortcuts ?? [],\n\t\t}),\n\t\tVariableDecorationExtension,\n\t\t...(config.maxCharacters\n\t\t\t? [CharacterCount.configure({ limit: config.maxCharacters })]\n\t\t\t: []),\n\t\t// Always register SectionDividerNode so the custom <div data-section-divider>\n\t\t// node is part of the schema in every editor instance.  This means imperative\n\t\t// callers (setBodyAndSections / setSectionContent) work even when no\n\t\t// `sections` prop was provided at mount time.\n\t\tSectionDividerNode,\n\t];\n\n\tconst mentionExtensions = [\n\t\t...(config.mentions?.agents\n\t\t\t? [\n\t\t\t\t\tbuildAgentMentionExtension(\n\t\t\t\t\t\tconfig.mentions.agents,\n\t\t\t\t\t\tconfig.onMentionSelected,\n\t\t\t\t\t\tconfig.renderMentionItem,\n\t\t\t\t\t\tconfig.renderMentionDropdown,\n\t\t\t\t\t\tconfig.removeMentionTriggerOnDismiss,\n\t\t\t\t\t),\n\t\t\t  ]\n\t\t\t: []),\n\t\t...(config.mentions?.teams\n\t\t\t? [\n\t\t\t\t\tbuildTeamMentionExtension(\n\t\t\t\t\t\tconfig.mentions.teams,\n\t\t\t\t\t\tconfig.onMentionSelected,\n\t\t\t\t\t\tconfig.renderMentionItem,\n\t\t\t\t\t\tconfig.renderMentionDropdown,\n\t\t\t\t\t\tconfig.removeMentionTriggerOnDismiss,\n\t\t\t\t\t),\n\t\t\t  ]\n\t\t\t: []),\n\t\t...(config.slashCommands\n\t\t\t? [\n\t\t\t\t\tbuildSlashCommandExtension(\n\t\t\t\t\t\tconfig.slashCommands,\n\t\t\t\t\t\tconfig.onSlashCommandSelected,\n\t\t\t\t\t\tconfig.renderSlashCommandItem,\n\t\t\t\t\t\tconfig.renderSlashCommandDropdown,\n\t\t\t\t\t),\n\t\t\t  ]\n\t\t\t: []),\n\t];\n\n\tconst richExtensions = hasRichTypography\n\t\t? [\n\t\t\t\tColor,\n\t\t\t\tHighlight.configure({ multicolor: true }),\n\t\t\t\tFontFamily,\n\t\t\t\tFontSizeExtension,\n\t\t\t\tTextAlign.configure({ types: ['heading', 'paragraph'] }),\n\t\t\t\tSubscript,\n\t\t\t\tSuperscript,\n\t\t\t\tImage,\n\t\t  ]\n\t\t: [Color];\n\n\treturn [...base, ...mentionExtensions, ...richExtensions];\n}\n"],"names":["buildExtensions","config","hasRichPaste","hasRichTypography","allowedMarks","isMark","m","softBreak","HardBreak","isZeroLen","v","ParagraphWithMargin","Paragraph","el","attrs","base","StarterKit","Underline","Link","TextStyle","Placeholder","PasteExtension","PasteNormalizationExtension","SendShortcutExtension","VariableDecorationExtension","CharacterCount","SectionDividerNode","mentionExtensions","buildAgentMentionExtension","buildTeamMentionExtension","buildSlashCommandExtension","richExtensions","Color","Highlight","FontFamily","FontSizeExtension","TextAlign","Subscript","Superscript","Image"],"mappings":"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"}

package/dist/esm/editor/extensions/editorDropdown.styles.d.ts

@@ -8,11 +8,5 @@ export declare const MentionLabel: import('styled-components').StyledComponent<"
 export declare const MentionPresenceDot: import('styled-components').StyledComponent<"span", any, {
     $online?: boolean | undefined;
 }, never>;
-export declare const SlashLabel: import('styled-components').StyledComponent<"div", any, {
-    numberOfLines?: number | undefined;
-    color?: string | undefined;
-}, never>;
-export declare const SlashDescription: import('styled-components').StyledComponent<"div", any, {
-    numberOfLines?: number | undefined;
-    color?: string | undefined;
-}, never>;
+export declare const SlashLabel: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const SlashDescription: import('styled-components').StyledComponent<"span", any, {}, never>;

package/dist/esm/editor/extensions/editorDropdown.styles.js

@@ -1,31 +1,33 @@
 import t from "styled-components";
 import { COLORS as o } from "../../constants/Theme.js";
-import { BodyCaption as n } from "../../components/TypographyStyle.js";
-const c = t.div`
+const i = t.div`
 	background: ${o.surface.standard};
-	border-radius: 4px;
+	border: 1px solid ${o.stroke.primary};
+	border-radius: 8px;
 	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+	padding: 4px;
 	min-width: 330px;
 	max-height: 260px;
 	overflow-y: auto;
 	font-size: 14px;
 	color: ${o.content.primary};
-`, p = t.div`
+`, a = t.div`
 	display: flex;
 	align-items: center;
 	gap: 8px;
-	padding: 8px;
+	padding: 12px 16px;
 	min-height: 43px;
+	border-radius: 6px;
 	cursor: pointer;
 	color: ${o.content.primary};
 	background: ${({ $isActive: r }) => r ? o.surface.hovered : "transparent"};
-`, s = t.img`
+`, p = t.img`
 	width: 24px;
 	height: 24px;
 	border-radius: 50%;
 	object-fit: cover;
 	flex-shrink: 0;
-`, d = t.div`
+`, s = t.div`
 	width: 24px;
 	height: 24px;
 	border-radius: 50%;
@@ -37,30 +39,32 @@ const c = t.div`
 	font-weight: 600;
 	color: ${o.content.primary};
 	flex-shrink: 0;
-`, l = t.span`
+`, c = t.span`
 	font-weight: 500;
 	color: ${o.content.primary};
-`, h = t.span`
+`, d = t.span`
 	width: 8px;
 	height: 8px;
 	border-radius: 50%;
 	background: ${({ $online: r }) => r ? o.content.positive : o.content.placeholder};
 	margin-left: auto;
 	flex-shrink: 0;
-`, x = t(n)`
+`, x = t.span`
+	font-weight: 500;
 	color: ${o.content.primary};
-`, f = t(n)`
+`, l = t.span`
+	font-size: 12px;
 	color: ${o.content.secondary};
 	margin-left: auto;
 `;
 export {
-  c as DropdownContainer,
-  p as DropdownItem,
-  s as MentionAvatar,
-  d as MentionAvatarFallback,
-  l as MentionLabel,
-  h as MentionPresenceDot,
-  f as SlashDescription,
+  i as DropdownContainer,
+  a as DropdownItem,
+  p as MentionAvatar,
+  s as MentionAvatarFallback,
+  c as MentionLabel,
+  d as MentionPresenceDot,
+  l as SlashDescription,
   x as SlashLabel
 };
 //# sourceMappingURL=editorDropdown.styles.js.map

package/dist/esm/editor/extensions/editorDropdown.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"editorDropdown.styles.js","sources":["../../../../src/editor/extensions/editorDropdown.styles.ts"],"sourcesContent":["import { BodyCaption } from '@src/index';\nimport styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const DropdownContainer = styled.div`\n\tbackground: ${COLORS.surface.standard};\n\tborder-radius: 4px;\n\tbox-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n\tmin-width: 330px;\n\tmax-height: 260px;\n\toverflow-y: auto;\n\tfont-size: 14px;\n\tcolor: ${COLORS.content.primary};\n`;\n\nexport const DropdownItem = styled.div<{ $isActive?: boolean }>`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 8px;\n\tmin-height: 43px;\n\tcursor: pointer;\n\tcolor: ${COLORS.content.primary};\n\tbackground: ${({ $isActive }) =>\n\t\t$isActive ? COLORS.surface.hovered : 'transparent'};\n`;\n\nexport const MentionAvatar = styled.img`\n\twidth: 24px;\n\theight: 24px;\n\tborder-radius: 50%;\n\tobject-fit: cover;\n\tflex-shrink: 0;\n`;\n\nexport const MentionAvatarFallback = styled.div`\n\twidth: 24px;\n\theight: 24px;\n\tborder-radius: 50%;\n\tbackground: ${COLORS.surface.hovered};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-size: 12px;\n\tfont-weight: 600;\n\tcolor: ${COLORS.content.primary};\n\tflex-shrink: 0;\n`;\n\nexport const MentionLabel = styled.span`\n\tfont-weight: 500;\n\tcolor: ${COLORS.content.primary};\n`;\n\nexport const MentionPresenceDot = styled.span<{ $online?: boolean }>`\n\twidth: 8px;\n\theight: 8px;\n\tborder-radius: 50%;\n\tbackground: ${({ $online }) =>\n\t\t$online ? COLORS.content.positive : COLORS.content.placeholder};\n\tmargin-left: auto;\n\tflex-shrink: 0;\n`;\n\nexport const SlashLabel = styled(BodyCaption)`\n\tcolor: ${COLORS.content.primary};\n`;\n\nexport const SlashDescription = styled(BodyCaption)`\n\tcolor: ${COLORS.content.secondary};\n\tmargin-left: auto;\n`;\n"],"names":["DropdownContainer","styled","COLORS","DropdownItem","$isActive","MentionAvatar","MentionAvatarFallback","MentionLabel","MentionPresenceDot","$online","SlashLabel","BodyCaption","SlashDescription"],"mappings":";;;AAIO,MAAMA,IAAoBC,EAAO;AAAA,eACzBC,EAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAO5BA,EAAO,QAAQ,OAAO;AAAA,GAGnBC,IAAeF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAOzBC,EAAO,QAAQ,OAAO;AAAA,eACjB,CAAC,EAAE,WAAAE,QAChBA,IAAYF,EAAO,QAAQ,UAAU,aAAa;AAAA,GAGvCG,IAAgBJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQvBK,IAAwBL,EAAO;AAAA;AAAA;AAAA;AAAA,eAI7BC,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAM3BA,EAAO,QAAQ,OAAO;AAAA;AAAA,GAInBK,IAAeN,EAAO;AAAA;AAAA,UAEzBC,EAAO,QAAQ,OAAO;AAAA,GAGnBM,IAAqBP,EAAO;AAAA;AAAA;AAAA;AAAA,eAI1B,CAAC,EAAE,SAAAQ,EAAA,MAChBA,IAAUP,EAAO,QAAQ,WAAWA,EAAO,QAAQ,WAAW;AAAA;AAAA;AAAA,GAKnDQ,IAAaT,EAAOU,CAAW;AAAA,UAClCT,EAAO,QAAQ,OAAO;AAAA,GAGnBU,IAAmBX,EAAOU,CAAW;AAAA,UACxCT,EAAO,QAAQ,SAAS;AAAA;AAAA;"}
+{"version":3,"file":"editorDropdown.styles.js","sources":["../../../../src/editor/extensions/editorDropdown.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const DropdownContainer = styled.div`\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 8px;\n\tbox-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n\tpadding: 4px;\n\tmin-width: 330px;\n\tmax-height: 260px;\n\toverflow-y: auto;\n\tfont-size: 14px;\n\tcolor: ${COLORS.content.primary};\n`;\n\nexport const DropdownItem = styled.div<{ $isActive?: boolean }>`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 12px 16px;\n\tmin-height: 43px;\n\tborder-radius: 6px;\n\tcursor: pointer;\n\tcolor: ${COLORS.content.primary};\n\tbackground: ${({ $isActive }) =>\n\t\t$isActive ? COLORS.surface.hovered : 'transparent'};\n`;\n\nexport const MentionAvatar = styled.img`\n\twidth: 24px;\n\theight: 24px;\n\tborder-radius: 50%;\n\tobject-fit: cover;\n\tflex-shrink: 0;\n`;\n\nexport const MentionAvatarFallback = styled.div`\n\twidth: 24px;\n\theight: 24px;\n\tborder-radius: 50%;\n\tbackground: ${COLORS.surface.hovered};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-size: 12px;\n\tfont-weight: 600;\n\tcolor: ${COLORS.content.primary};\n\tflex-shrink: 0;\n`;\n\nexport const MentionLabel = styled.span`\n\tfont-weight: 500;\n\tcolor: ${COLORS.content.primary};\n`;\n\nexport const MentionPresenceDot = styled.span<{ $online?: boolean }>`\n\twidth: 8px;\n\theight: 8px;\n\tborder-radius: 50%;\n\tbackground: ${({ $online }) =>\n\t\t$online ? COLORS.content.positive : COLORS.content.placeholder};\n\tmargin-left: auto;\n\tflex-shrink: 0;\n`;\n\nexport const SlashLabel = styled.span`\n\tfont-weight: 500;\n\tcolor: ${COLORS.content.primary};\n`;\n\nexport const SlashDescription = styled.span`\n\tfont-size: 12px;\n\tcolor: ${COLORS.content.secondary};\n\tmargin-left: auto;\n`;\n"],"names":["DropdownContainer","styled","COLORS","DropdownItem","$isActive","MentionAvatar","MentionAvatarFallback","MentionLabel","MentionPresenceDot","$online","SlashLabel","SlashDescription"],"mappings":";;AAGO,MAAMA,IAAoBC,EAAO;AAAA,eACzBC,EAAO,QAAQ,QAAQ;AAAA,qBACjBA,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQhCA,EAAO,QAAQ,OAAO;AAAA,GAGnBC,IAAeF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQzBC,EAAO,QAAQ,OAAO;AAAA,eACjB,CAAC,EAAE,WAAAE,QAChBA,IAAYF,EAAO,QAAQ,UAAU,aAAa;AAAA,GAGvCG,IAAgBJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQvBK,IAAwBL,EAAO;AAAA;AAAA;AAAA;AAAA,eAI7BC,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAM3BA,EAAO,QAAQ,OAAO;AAAA;AAAA,GAInBK,IAAeN,EAAO;AAAA;AAAA,UAEzBC,EAAO,QAAQ,OAAO;AAAA,GAGnBM,IAAqBP,EAAO;AAAA;AAAA;AAAA;AAAA,eAI1B,CAAC,EAAE,SAAAQ,EAAA,MAChBA,IAAUP,EAAO,QAAQ,WAAWA,EAAO,QAAQ,WAAW;AAAA;AAAA;AAAA,GAKnDQ,IAAaT,EAAO;AAAA;AAAA,UAEvBC,EAAO,QAAQ,OAAO;AAAA,GAGnBS,IAAmBV,EAAO;AAAA;AAAA,UAE7BC,EAAO,QAAQ,SAAS;AAAA;AAAA;"}

package/dist/esm/editor/extensions/mention/MentionDropdown.js

@@ -1,46 +1,52 @@
-import { jsx as t, Fragment as h, jsxs as x } from "react/jsx-runtime";
-import { forwardRef as k, useState as M, useRef as b, useCallback as g, useImperativeHandle as v, useEffect as A } from "react";
-import { DropdownContainer as D, DropdownItem as I, MentionAvatar as y, MentionAvatarFallback as C, MentionLabel as U, MentionPresenceDot as E } from "../editorDropdown.styles.js";
-const R = k(
-  ({ items: r, query: p, command: c, renderItem: s, renderDropdown: i }, w) => {
-    const [l, a] = M(0), u = b(null), f = g((n) => {
-      const e = u.current;
+import { jsx as t, Fragment as p, jsxs as M } from "react/jsx-runtime";
+import { forwardRef as b, useState as A, useRef as x, useCallback as w, useImperativeHandle as I, useEffect as v } from "react";
+import { DropdownContainer as D, DropdownItem as C, MentionAvatar as R, MentionAvatarFallback as U, MentionLabel as E, MentionPresenceDot as H } from "../editorDropdown.styles.js";
+const K = b(
+  ({ items: r, query: g, command: s, renderItem: i, renderDropdown: a }, k) => {
+    const [l, c] = A(0), f = x(null), u = x(null), y = w(
+      (n) => {
+        u.current = n;
+      },
+      []
+    ), d = w((n) => {
+      const e = f.current;
       if (!e) return;
       e.children[n]?.scrollIntoView({ block: "nearest" });
-    }, []), d = (n) => {
-      r[n] && c(r[n]);
+    }, []), h = (n) => {
+      r[n] && s(r[n]);
     };
-    return v(w, () => ({
-      onKeyDown: ({ event: n }) => r.length ? n.key === "ArrowUp" ? (a((e) => {
+    return I(k, () => ({
+      onKeyDown: ({ event: n }) => a && u.current ? u.current(n) : r.length ? n.key === "ArrowUp" ? (c((e) => {
         const o = (e + r.length - 1) % r.length;
-        return f(o), o;
-      }), !0) : n.key === "ArrowDown" ? (a((e) => {
+        return d(o), o;
+      }), !0) : n.key === "ArrowDown" ? (c((e) => {
         const o = (e + 1) % r.length;
-        return f(o), o;
-      }), !0) : n.key === "Enter" ? (d(l), !0) : !1 : !1
-    })), A(() => a(0), [r]), r.length ? i ? /* @__PURE__ */ t(h, { children: i({
+        return d(o), o;
+      }), !0) : n.key === "Enter" ? (h(l), !0) : !1 : !1
+    })), v(() => c(0), [r]), r.length ? a ? /* @__PURE__ */ t(p, { children: a({
       items: r,
-      query: p,
+      query: g,
       activeIndex: l,
-      onSelect: (n) => c(n)
-    }) }) : /* @__PURE__ */ t(D, { ref: u, children: r.map((n, e) => /* @__PURE__ */ t(
-      I,
+      onSelect: (n) => s(n),
+      registerKeyHandler: y
+    }) }) : /* @__PURE__ */ t(D, { ref: f, children: r.map((n, e) => /* @__PURE__ */ t(
+      C,
       {
         $isActive: e === l,
-        onMouseEnter: () => a(e),
-        onClick: () => d(e),
-        children: s ? s(n, e === l) : /* @__PURE__ */ x(h, { children: [
-          n.avatarUrl ? /* @__PURE__ */ t(y, { src: n.avatarUrl, alt: "" }) : /* @__PURE__ */ t(C, { children: n.label.charAt(0).toUpperCase() }),
-          /* @__PURE__ */ t(U, { children: n.label }),
-          n.isOnline !== void 0 && /* @__PURE__ */ t(E, { $online: n.isOnline })
+        onMouseEnter: () => c(e),
+        onClick: () => h(e),
+        children: i ? i(n, e === l) : /* @__PURE__ */ M(p, { children: [
+          n.avatarUrl ? /* @__PURE__ */ t(R, { src: n.avatarUrl, alt: "" }) : /* @__PURE__ */ t(U, { children: n.label.charAt(0).toUpperCase() }),
+          /* @__PURE__ */ t(E, { children: n.label }),
+          n.isOnline !== void 0 && /* @__PURE__ */ t(H, { $online: n.isOnline })
         ] })
       },
       n.id
     )) }) : null;
   }
 );
-R.displayName = "MentionDropdown";
+K.displayName = "MentionDropdown";
 export {
-  R as MentionDropdown
+  K as MentionDropdown
 };
 //# sourceMappingURL=MentionDropdown.js.map

package/dist/esm/editor/extensions/mention/MentionDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"MentionDropdown.js","sources":["../../../../../src/editor/extensions/mention/MentionDropdown.tsx"],"sourcesContent":["import React, {\n\tforwardRef,\n\tuseCallback,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport type {\n\tMentionDropdownRenderProps,\n\tMentionItem,\n} from '../../BikEditor.types';\nimport {\n\tDropdownContainer,\n\tDropdownItem,\n\tMentionAvatar,\n\tMentionAvatarFallback,\n\tMentionLabel,\n\tMentionPresenceDot,\n} from '../editorDropdown.styles';\n\ninterface Props {\n\titems: MentionItem[];\n\tquery: string;\n\tcommand: (item: MentionItem) => void;\n\t/** Custom per-row renderer. Receives the item and whether it is the active row. */\n\trenderItem?: (item: MentionItem, isActive: boolean) => React.ReactNode;\n\t/**\n\t * Full custom dropdown renderer. Takes priority over renderItem.\n\t * The editor passes activeIndex and onSelect — you handle all the visual rendering.\n\t */\n\trenderDropdown?: (props: MentionDropdownRenderProps) => React.ReactNode;\n}\n\nexport const MentionDropdown = forwardRef<any, Props>(\n\t({ items, query, command, renderItem, renderDropdown }, ref) => {\n\t\tconst [selectedIndex, setSelectedIndex] = useState(0);\n\t\tconst containerRef = useRef<HTMLDivElement>(null);\n\n\t\tconst scrollToIndex = useCallback((index: number) => {\n\t\t\tconst container = containerRef.current;\n\t\t\tif (!container) return;\n\t\t\tconst item = container.children[index] as HTMLElement | undefined;\n\t\t\titem?.scrollIntoView({ block: 'nearest' });\n\t\t}, []);\n\n\t\tconst select = (i: number) => {\n\t\t\tif (items[i]) command(items[i]);\n\t\t};\n\n\t\tuseImperativeHandle(ref, () => ({\n\t\t\tonKeyDown: ({ event }: { event: KeyboardEvent }) => {\n\t\t\t\tif (!items.length) return false;\n\t\t\t\tif (event.key === 'ArrowUp') {\n\t\t\t\t\tsetSelectedIndex((prev) => {\n\t\t\t\t\t\tconst next = (prev + items.length - 1) % items.length;\n\t\t\t\t\t\tscrollToIndex(next);\n\t\t\t\t\t\treturn next;\n\t\t\t\t\t});\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\t\t\t\tif (event.key === 'ArrowDown') {\n\t\t\t\t\tsetSelectedIndex((prev) => {\n\t\t\t\t\t\tconst next = (prev + 1) % items.length;\n\t\t\t\t\t\tscrollToIndex(next);\n\t\t\t\t\t\treturn next;\n\t\t\t\t\t});\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\t\t\t\tif (event.key === 'Enter') {\n\t\t\t\t\tselect(selectedIndex);\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\t\t\t\treturn false;\n\t\t\t},\n\t\t}));\n\n\t\tuseEffect(() => setSelectedIndex(0), [items]);\n\n\t\tif (!items.length) return null;\n\n\t\t// Full custom dropdown — editor still manages keyboard nav via selectedIndex\n\t\tif (renderDropdown) {\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t{renderDropdown({\n\t\t\t\t\t\titems,\n\t\t\t\t\t\tquery,\n\t\t\t\t\t\tactiveIndex: selectedIndex,\n\t\t\t\t\t\tonSelect: (item) => command(item),\n\t\t\t\t\t})}\n\t\t\t\t</>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<DropdownContainer ref={containerRef}>\n\t\t\t\t{items.map((item, i) => (\n\t\t\t\t\t<DropdownItem\n\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t$isActive={i === selectedIndex}\n\t\t\t\t\t\tonMouseEnter={() => setSelectedIndex(i)}\n\t\t\t\t\t\tonClick={() => select(i)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderItem ? (\n\t\t\t\t\t\t\trenderItem(item, i === selectedIndex)\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{item.avatarUrl ? (\n\t\t\t\t\t\t\t\t\t<MentionAvatar src={item.avatarUrl} alt=\"\" />\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<MentionAvatarFallback>\n\t\t\t\t\t\t\t\t\t\t{item.label.charAt(0).toUpperCase()}\n\t\t\t\t\t\t\t\t\t</MentionAvatarFallback>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t<MentionLabel>{item.label}</MentionLabel>\n\t\t\t\t\t\t\t\t{item.isOnline !== undefined && (\n\t\t\t\t\t\t\t\t\t<MentionPresenceDot $online={item.isOnline} />\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</DropdownItem>\n\t\t\t\t))}\n\t\t\t</DropdownContainer>\n\t\t);\n\t},\n);\nMentionDropdown.displayName = 'MentionDropdown';\n"],"names":["MentionDropdown","forwardRef","items","query","command","renderItem","renderDropdown","ref","selectedIndex","setSelectedIndex","useState","containerRef","useRef","scrollToIndex","useCallback","index","container","select","i","useImperativeHandle","event","prev","next","useEffect","item","jsx","DropdownContainer","DropdownItem","jsxs","Fragment","MentionAvatar","MentionAvatarFallback","MentionLabel","MentionPresenceDot"],"mappings":";;;AAkCO,MAAMA,IAAkBC;AAAA,EAC9B,CAAC,EAAE,OAAAC,GAAO,OAAAC,GAAO,SAAAC,GAAS,YAAAC,GAAY,gBAAAC,EAAA,GAAkBC,MAAQ;AAC/D,UAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAS,CAAC,GAC9CC,IAAeC,EAAuB,IAAI,GAE1CC,IAAgBC,EAAY,CAACC,MAAkB;AACpD,YAAMC,IAAYL,EAAa;AAC/B,UAAI,CAACK,EAAW;AAEhB,MADaA,EAAU,SAASD,CAAK,GAC/B,eAAe,EAAE,OAAO,UAAA,CAAW;AAAA,IAC1C,GAAG,CAAA,CAAE,GAECE,IAAS,CAACC,MAAc;AAC7B,MAAIhB,EAAMgB,CAAC,KAAGd,EAAQF,EAAMgB,CAAC,CAAC;AAAA,IAC/B;AA+BA,WA7BAC,EAAoBZ,GAAK,OAAO;AAAA,MAC/B,WAAW,CAAC,EAAE,OAAAa,QACRlB,EAAM,SACPkB,EAAM,QAAQ,aACjBX,EAAiB,CAACY,MAAS;AAC1B,cAAMC,KAAQD,IAAOnB,EAAM,SAAS,KAAKA,EAAM;AAC/C,eAAAW,EAAcS,CAAI,GACXA;AAAA,MACR,CAAC,GACM,MAEJF,EAAM,QAAQ,eACjBX,EAAiB,CAACY,MAAS;AAC1B,cAAMC,KAAQD,IAAO,KAAKnB,EAAM;AAChC,eAAAW,EAAcS,CAAI,GACXA;AAAA,MACR,CAAC,GACM,MAEJF,EAAM,QAAQ,WACjBH,EAAOT,CAAa,GACb,MAED,KArBmB;AAAA,IAsB3B,EACC,GAEFe,EAAU,MAAMd,EAAiB,CAAC,GAAG,CAACP,CAAK,CAAC,GAEvCA,EAAM,SAGPI,2BAGA,UAAAA,EAAe;AAAA,MACf,OAAAJ;AAAA,MACA,OAAAC;AAAA,MACA,aAAaK;AAAA,MACb,UAAU,CAACgB,MAASpB,EAAQoB,CAAI;AAAA,IAAA,CAChC,GACF,IAKD,gBAAAC,EAACC,KAAkB,KAAKf,GACtB,YAAM,IAAI,CAACa,GAAMN,MACjB,gBAAAO;AAAA,MAACE;AAAA,MAAA;AAAA,QAEA,WAAWT,MAAMV;AAAA,QACjB,cAAc,MAAMC,EAAiBS,CAAC;AAAA,QACtC,SAAS,MAAMD,EAAOC,CAAC;AAAA,QAEtB,cACAb,EAAWmB,GAAMN,MAAMV,CAAa,IAEpC,gBAAAoB,EAAAC,GAAA,EACE,UAAA;AAAA,UAAAL,EAAK,YACL,gBAAAC,EAACK,GAAA,EAAc,KAAKN,EAAK,WAAW,KAAI,GAAA,CAAG,IAE3C,gBAAAC,EAACM,KACC,UAAAP,EAAK,MAAM,OAAO,CAAC,EAAE,eACvB;AAAA,UAED,gBAAAC,EAACO,GAAA,EAAc,UAAAR,EAAK,MAAA,CAAM;AAAA,UACzBA,EAAK,aAAa,4BACjBS,GAAA,EAAmB,SAAST,EAAK,SAAA,CAAU;AAAA,QAAA,EAAA,CAE9C;AAAA,MAAA;AAAA,MApBIA,EAAK;AAAA,IAAA,CAuBX,GACF,IA5CyB;AAAA,EA8C3B;AACD;AACAxB,EAAgB,cAAc;"}
+{"version":3,"file":"MentionDropdown.js","sources":["../../../../../src/editor/extensions/mention/MentionDropdown.tsx"],"sourcesContent":["import React, {\n\tforwardRef,\n\tuseCallback,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport type {\n\tMentionDropdownRenderProps,\n\tMentionItem,\n} from '../../BikEditor.types';\nimport {\n\tDropdownContainer,\n\tDropdownItem,\n\tMentionAvatar,\n\tMentionAvatarFallback,\n\tMentionLabel,\n\tMentionPresenceDot,\n} from '../editorDropdown.styles';\n\ninterface Props {\n\titems: MentionItem[];\n\tquery: string;\n\tcommand: (item: MentionItem) => void;\n\t/** Custom per-row renderer. Receives the item and whether it is the active row. */\n\trenderItem?: (item: MentionItem, isActive: boolean) => React.ReactNode;\n\t/**\n\t * Full custom dropdown renderer. Takes priority over renderItem.\n\t * The editor passes activeIndex and onSelect — you handle all the visual rendering.\n\t */\n\trenderDropdown?: (props: MentionDropdownRenderProps) => React.ReactNode;\n}\n\nexport const MentionDropdown = forwardRef<any, Props>(\n\t({ items, query, command, renderItem, renderDropdown }, ref) => {\n\t\tconst [selectedIndex, setSelectedIndex] = useState(0);\n\t\tconst containerRef = useRef<HTMLDivElement>(null);\n\t\t// A custom dropdown (renderDropdown) can claim keyboard nav for itself.\n\t\tconst customKeyHandlerRef = useRef<\n\t\t\t((event: KeyboardEvent) => boolean) | null\n\t\t>(null);\n\n\t\tconst registerKeyHandler = useCallback(\n\t\t\t(handler: ((event: KeyboardEvent) => boolean) | null) => {\n\t\t\t\tcustomKeyHandlerRef.current = handler;\n\t\t\t},\n\t\t\t[],\n\t\t);\n\n\t\tconst scrollToIndex = useCallback((index: number) => {\n\t\t\tconst container = containerRef.current;\n\t\t\tif (!container) return;\n\t\t\tconst item = container.children[index] as HTMLElement | undefined;\n\t\t\titem?.scrollIntoView({ block: 'nearest' });\n\t\t}, []);\n\n\t\tconst select = (i: number) => {\n\t\t\tif (items[i]) command(items[i]);\n\t\t};\n\n\t\tuseImperativeHandle(ref, () => ({\n\t\t\tonKeyDown: ({ event }: { event: KeyboardEvent }) => {\n\t\t\t\t// A custom dropdown that registered a handler owns navigation.\n\t\t\t\tif (renderDropdown && customKeyHandlerRef.current) {\n\t\t\t\t\treturn customKeyHandlerRef.current(event);\n\t\t\t\t}\n\t\t\t\tif (!items.length) return false;\n\t\t\t\tif (event.key === 'ArrowUp') {\n\t\t\t\t\tsetSelectedIndex((prev) => {\n\t\t\t\t\t\tconst next = (prev + items.length - 1) % items.length;\n\t\t\t\t\t\tscrollToIndex(next);\n\t\t\t\t\t\treturn next;\n\t\t\t\t\t});\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\t\t\t\tif (event.key === 'ArrowDown') {\n\t\t\t\t\tsetSelectedIndex((prev) => {\n\t\t\t\t\t\tconst next = (prev + 1) % items.length;\n\t\t\t\t\t\tscrollToIndex(next);\n\t\t\t\t\t\treturn next;\n\t\t\t\t\t});\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\t\t\t\tif (event.key === 'Enter') {\n\t\t\t\t\tselect(selectedIndex);\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\t\t\t\treturn false;\n\t\t\t},\n\t\t}));\n\n\t\tuseEffect(() => setSelectedIndex(0), [items]);\n\n\t\tif (!items.length) return null;\n\n\t\t// Full custom dropdown — editor still manages keyboard nav via selectedIndex\n\t\tif (renderDropdown) {\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t{renderDropdown({\n\t\t\t\t\t\titems,\n\t\t\t\t\t\tquery,\n\t\t\t\t\t\tactiveIndex: selectedIndex,\n\t\t\t\t\t\tonSelect: (item) => command(item),\n\t\t\t\t\t\tregisterKeyHandler,\n\t\t\t\t\t})}\n\t\t\t\t</>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<DropdownContainer ref={containerRef}>\n\t\t\t\t{items.map((item, i) => (\n\t\t\t\t\t<DropdownItem\n\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t$isActive={i === selectedIndex}\n\t\t\t\t\t\tonMouseEnter={() => setSelectedIndex(i)}\n\t\t\t\t\t\tonClick={() => select(i)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderItem ? (\n\t\t\t\t\t\t\trenderItem(item, i === selectedIndex)\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{item.avatarUrl ? (\n\t\t\t\t\t\t\t\t\t<MentionAvatar src={item.avatarUrl} alt=\"\" />\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<MentionAvatarFallback>\n\t\t\t\t\t\t\t\t\t\t{item.label.charAt(0).toUpperCase()}\n\t\t\t\t\t\t\t\t\t</MentionAvatarFallback>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t<MentionLabel>{item.label}</MentionLabel>\n\t\t\t\t\t\t\t\t{item.isOnline !== undefined && (\n\t\t\t\t\t\t\t\t\t<MentionPresenceDot $online={item.isOnline} />\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</DropdownItem>\n\t\t\t\t))}\n\t\t\t</DropdownContainer>\n\t\t);\n\t},\n);\nMentionDropdown.displayName = 'MentionDropdown';\n"],"names":["MentionDropdown","forwardRef","items","query","command","renderItem","renderDropdown","ref","selectedIndex","setSelectedIndex","useState","containerRef","useRef","customKeyHandlerRef","registerKeyHandler","useCallback","handler","scrollToIndex","index","container","select","i","useImperativeHandle","event","prev","next","useEffect","item","jsx","DropdownContainer","DropdownItem","jsxs","Fragment","MentionAvatar","MentionAvatarFallback","MentionLabel","MentionPresenceDot"],"mappings":";;;AAkCO,MAAMA,IAAkBC;AAAA,EAC9B,CAAC,EAAE,OAAAC,GAAO,OAAAC,GAAO,SAAAC,GAAS,YAAAC,GAAY,gBAAAC,EAAA,GAAkBC,MAAQ;AAC/D,UAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAS,CAAC,GAC9CC,IAAeC,EAAuB,IAAI,GAE1CC,IAAsBD,EAE1B,IAAI,GAEAE,IAAqBC;AAAA,MAC1B,CAACC,MAAwD;AACxD,QAAAH,EAAoB,UAAUG;AAAA,MAC/B;AAAA,MACA,CAAA;AAAA,IAAC,GAGIC,IAAgBF,EAAY,CAACG,MAAkB;AACpD,YAAMC,IAAYR,EAAa;AAC/B,UAAI,CAACQ,EAAW;AAEhB,MADaA,EAAU,SAASD,CAAK,GAC/B,eAAe,EAAE,OAAO,UAAA,CAAW;AAAA,IAC1C,GAAG,CAAA,CAAE,GAECE,IAAS,CAACC,MAAc;AAC7B,MAAInB,EAAMmB,CAAC,KAAGjB,EAAQF,EAAMmB,CAAC,CAAC;AAAA,IAC/B;AAmCA,WAjCAC,EAAoBf,GAAK,OAAO;AAAA,MAC/B,WAAW,CAAC,EAAE,OAAAgB,QAETjB,KAAkBO,EAAoB,UAClCA,EAAoB,QAAQU,CAAK,IAEpCrB,EAAM,SACPqB,EAAM,QAAQ,aACjBd,EAAiB,CAACe,MAAS;AAC1B,cAAMC,KAAQD,IAAOtB,EAAM,SAAS,KAAKA,EAAM;AAC/C,eAAAe,EAAcQ,CAAI,GACXA;AAAA,MACR,CAAC,GACM,MAEJF,EAAM,QAAQ,eACjBd,EAAiB,CAACe,MAAS;AAC1B,cAAMC,KAAQD,IAAO,KAAKtB,EAAM;AAChC,eAAAe,EAAcQ,CAAI,GACXA;AAAA,MACR,CAAC,GACM,MAEJF,EAAM,QAAQ,WACjBH,EAAOZ,CAAa,GACb,MAED,KArBmB;AAAA,IAsB3B,EACC,GAEFkB,EAAU,MAAMjB,EAAiB,CAAC,GAAG,CAACP,CAAK,CAAC,GAEvCA,EAAM,SAGPI,2BAGA,UAAAA,EAAe;AAAA,MACf,OAAAJ;AAAA,MACA,OAAAC;AAAA,MACA,aAAaK;AAAA,MACb,UAAU,CAACmB,MAASvB,EAAQuB,CAAI;AAAA,MAChC,oBAAAb;AAAA,IAAA,CACA,GACF,IAKD,gBAAAc,EAACC,KAAkB,KAAKlB,GACtB,YAAM,IAAI,CAACgB,GAAMN,MACjB,gBAAAO;AAAA,MAACE;AAAA,MAAA;AAAA,QAEA,WAAWT,MAAMb;AAAA,QACjB,cAAc,MAAMC,EAAiBY,CAAC;AAAA,QACtC,SAAS,MAAMD,EAAOC,CAAC;AAAA,QAEtB,cACAhB,EAAWsB,GAAMN,MAAMb,CAAa,IAEpC,gBAAAuB,EAAAC,GAAA,EACE,UAAA;AAAA,UAAAL,EAAK,YACL,gBAAAC,EAACK,GAAA,EAAc,KAAKN,EAAK,WAAW,KAAI,GAAA,CAAG,IAE3C,gBAAAC,EAACM,KACC,UAAAP,EAAK,MAAM,OAAO,CAAC,EAAE,eACvB;AAAA,UAED,gBAAAC,EAACO,GAAA,EAAc,UAAAR,EAAK,MAAA,CAAM;AAAA,UACzBA,EAAK,aAAa,4BACjBS,GAAA,EAAmB,SAAST,EAAK,SAAA,CAAU;AAAA,QAAA,EAAA,CAE9C;AAAA,MAAA;AAAA,MApBIA,EAAK;AAAA,IAAA,CAuBX,GACF,IA7CyB;AAAA,EA+C3B;AACD;AACA3B,EAAgB,cAAc;"}

package/dist/esm/editor/extensions/mention/MentionExtension.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { MentionDropdownRenderProps, MentionItem } from '../../BikEditor.types';
 export declare function buildAgentMentionExtension(agentsRef: {
     current: MentionItem[];
-}, onSelect?: (item: MentionItem, char: '@' | '#') => void, renderItem?: (item: MentionItem, isActive: boolean) => ReactNode, renderDropdown?: (props: MentionDropdownRenderProps) => ReactNode): import('@tiptap/core').Node<import('@tiptap/extension-mention').MentionOptions<any, import('@tiptap/extension-mention').MentionNodeAttrs>, any>;
+}, onSelect?: (item: MentionItem, char: '@' | '#') => void, renderItem?: (item: MentionItem, isActive: boolean) => ReactNode, renderDropdown?: (props: MentionDropdownRenderProps) => ReactNode, removeTriggerOnDismiss?: boolean): import('@tiptap/core').Node<import('@tiptap/extension-mention').MentionOptions<any, import('@tiptap/extension-mention').MentionNodeAttrs>, any>;
 export declare function buildTeamMentionExtension(teamsRef: {
     current: MentionItem[];
-}, onSelect?: (item: MentionItem, char: '@' | '#') => void, renderItem?: (item: MentionItem, isActive: boolean) => ReactNode, renderDropdown?: (props: MentionDropdownRenderProps) => ReactNode): import('@tiptap/core').Node<import('@tiptap/extension-mention').MentionOptions<any, import('@tiptap/extension-mention').MentionNodeAttrs>, any>;
+}, onSelect?: (item: MentionItem, char: '@' | '#') => void, renderItem?: (item: MentionItem, isActive: boolean) => ReactNode, renderDropdown?: (props: MentionDropdownRenderProps) => ReactNode, removeTriggerOnDismiss?: boolean): import('@tiptap/core').Node<import('@tiptap/extension-mention').MentionOptions<any, import('@tiptap/extension-mention').MentionNodeAttrs>, any>;

package/dist/esm/editor/extensions/mention/MentionExtension.js

@@ -1,84 +1,105 @@
-import { mergeAttributes as s } from "../../../node_modules/@tiptap/core/dist/index.js";
-import u from "@tiptap/extension-mention";
-import { ReactRenderer as c } from "@tiptap/react";
-import { createSuggestionPopup as m } from "../suggestionPopup.js";
-import { MentionDropdown as d } from "./MentionDropdown.js";
-function l(a, r = "@", i, o) {
+import { mergeAttributes as m } from "../../../node_modules/@tiptap/core/dist/index.js";
+import c from "@tiptap/extension-mention";
+import { ReactRenderer as g } from "@tiptap/react";
+import { createSuggestionPopup as f } from "../suggestionPopup.js";
+import { MentionDropdown as k } from "./MentionDropdown.js";
+function b(r, o) {
+  const { renderItem: n, renderDropdown: d, removeTriggerOnDismiss: a } = r;
   return () => {
-    let e, t;
+    let s, i, t;
     return {
-      onStart: (n) => {
-        e = new c(d, {
-          props: { ...n, renderItem: i, renderDropdown: o },
-          editor: n.editor
-        }), t = m(e.element, n.clientRect);
+      onStart: (e) => {
+        t = e, o.picked = !1, s = new g(k, {
+          props: { ...e, renderItem: n, renderDropdown: d },
+          editor: e.editor
+        }), i = f(s.element, e.clientRect);
       },
-      onUpdate: (n) => {
-        if (e.updateProps({ ...n, renderItem: i, renderDropdown: o }), !n.items?.length) {
-          t.hide();
+      onUpdate: (e) => {
+        if (t = e, s.updateProps({ ...e, renderItem: n, renderDropdown: d }), !e.items?.length) {
+          i.hide();
           return;
         }
-        t.show(), t.updatePosition(n.clientRect);
+        i.show(), i.updatePosition(e.clientRect);
       },
-      onKeyDown: (n) => n.event.key === "Escape" ? (t.hide(), !0) : e.ref?.onKeyDown(n) ?? !1,
+      onKeyDown: (e) => e.event.key === "Escape" ? (i.hide(), !0) : s.ref?.onKeyDown(e) ?? !1,
       onExit: () => {
-        t.destroy(), e.destroy();
+        if (i.destroy(), s.destroy(), a && !o.picked && t?.editor && t?.range) {
+          const { editor: e, range: u } = t;
+          setTimeout(() => {
+            e.isDestroyed || e.chain().deleteRange(u).run();
+          }, 0);
+        }
       }
     };
   };
 }
-function w(a, r, i, o) {
-  return u.extend({ name: "mentionAgent" }).configure({
-    HTMLAttributes: { class: "bik-mention bik-mention--agent" },
-    renderText: ({ options: e, node: t }) => `${e.suggestion.char}${t.attrs.label}`,
-    renderHTML: ({ options: e, node: t }) => [
-      "span",
-      s(e.HTMLAttributes),
-      `${e.suggestion.char}${t.attrs.label}`
-    ],
-    suggestion: {
-      char: "@",
-      allowSpaces: !0,
-      items: ({ query: e }) => a.current.filter(
-        (t) => t.label.toLowerCase().includes(e.toLowerCase())
-      ),
-      command: ({ editor: e, range: t, props: n }) => {
-        e.chain().focus().deleteRange(t).insertContent({
-          type: "mentionAgent",
-          attrs: { id: n.id, label: n.label }
-        }).run(), r?.(n, "@");
-      },
-      render: l(r, "@", i, o)
+function l(r, o, n, d, a, s) {
+  const i = { picked: !1 };
+  return c.extend({
+    name: r,
+    addAttributes() {
+      return {
+        ...this.parent?.(),
+        kind: {
+          default: null,
+          parseHTML: (t) => t.getAttribute("data-kind"),
+          renderHTML: (t) => t.kind ? { "data-kind": String(t.kind) } : {}
+        }
+      };
     }
-  });
-}
-function L(a, r, i, o) {
-  return u.extend({ name: "mentionTeam" }).configure({
-    HTMLAttributes: { class: "bik-mention bik-mention--team" },
-    renderText: ({ options: e, node: t }) => `${e.suggestion.char}${t.attrs.label}`,
-    renderHTML: ({ options: e, node: t }) => [
+  }).configure({
+    HTMLAttributes: { class: o },
+    renderText: ({ options: t, node: e }) => `${e.attrs.kind ? "" : t.suggestion.char}${e.attrs.label}`,
+    renderHTML: ({ options: t, node: e }) => [
       "span",
-      s(e.HTMLAttributes),
-      `${e.suggestion.char}${t.attrs.label}`
+      m(
+        t.HTMLAttributes,
+        e.attrs.kind ? { "data-kind": String(e.attrs.kind) } : {}
+      ),
+      `${e.attrs.kind ? "" : t.suggestion.char}${e.attrs.label}`
     ],
     suggestion: {
-      char: "#",
+      char: n,
       allowSpaces: !0,
-      items: ({ query: e }) => a.current.filter(
-        (t) => t.label.toLowerCase().includes(e.toLowerCase())
+      items: ({ query: t }) => d.current.filter(
+        (e) => e.label.toLowerCase().includes(t.toLowerCase())
       ),
-      command: ({ editor: e, range: t, props: n }) => {
-        e.chain().focus().deleteRange(t).insertContent({
-          type: "mentionTeam",
-          attrs: { id: n.id, label: n.label }
-        }).run(), r?.(n, "#");
+      command: ({ editor: t, range: e, props: u }) => {
+        i.picked = !0, t.chain().focus().deleteRange(e).insertContent({
+          type: r,
+          attrs: {
+            id: u.id,
+            label: u.label,
+            kind: u.meta?.kind ?? null
+          }
+        }).run(), a?.(u, n);
       },
-      render: l(r, "#", i, o)
+      render: b(s, i)
     }
   });
 }
+function x(r, o, n, d, a) {
+  return l(
+    "mentionAgent",
+    "bik-mention bik-mention--agent",
+    "@",
+    r,
+    o,
+    { renderItem: n, renderDropdown: d, removeTriggerOnDismiss: a }
+  );
+}
+function y(r, o, n, d, a) {
+  return l(
+    "mentionTeam",
+    "bik-mention bik-mention--team",
+    "#",
+    r,
+    o,
+    { renderItem: n, renderDropdown: d, removeTriggerOnDismiss: a }
+  );
+}
 export {
-  w as buildAgentMentionExtension,
-  L as buildTeamMentionExtension
+  x as buildAgentMentionExtension,
+  y as buildTeamMentionExtension
 };
 //# sourceMappingURL=MentionExtension.js.map