@bikdotai/bik-component-library 0.0.802-beta.0 → 0.0.802-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/editor/extensions/mention/MentionDropdown.js +1 -1
- package/dist/cjs/editor/extensions/mention/MentionDropdown.js.map +1 -1
- package/dist/cjs/editor/extensions/mention/MentionExtension.js +1 -1
- package/dist/cjs/editor/extensions/mention/MentionExtension.js.map +1 -1
- package/dist/cjs/src/components/bik-layout/MockMenus.d.ts +1 -0
- package/dist/esm/editor/extensions/mention/MentionDropdown.js +1 -1
- package/dist/esm/editor/extensions/mention/MentionDropdown.js.map +1 -1
- package/dist/esm/editor/extensions/mention/MentionExtension.js +1 -1
- package/dist/esm/editor/extensions/mention/MentionExtension.js.map +1 -1
- package/dist/esm/src/components/bik-layout/MockMenus.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("react"),r=require("../editorDropdown.styles.js");const t=n.forwardRef(((t,o)=>{let{items:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("react"),r=require("../editorDropdown.styles.js");const t=n.forwardRef(((t,o)=>{let{items:s,query:l,command:i,renderItem:a,renderDropdown:c}=t;const[d,u]=n.useState(0),p=n.useRef(null),j=n.useCallback((e=>{const n=p.current;if(!n)return;const r=n.children[e];null==r||r.scrollIntoView({block:"nearest"})}),[]),m=e=>{s[e]&&i(s[e])};return n.useImperativeHandle(o,(()=>({onKeyDown:e=>{let{event:n}=e;return"ArrowUp"===n.key?(u((e=>{const n=(e+s.length-1)%s.length;return j(n),n})),!0):"ArrowDown"===n.key?(u((e=>{const n=(e+1)%s.length;return j(n),n})),!0):"Enter"===n.key&&(m(d),!0)}}))),n.useEffect((()=>u(0)),[s]),s.length?c?e.jsx(e.Fragment,{children:c({items:s,query:l,activeIndex:d,onSelect:e=>i(e)})}):e.jsx(r.DropdownContainer,Object.assign({ref:p},{children:s.map(((n,t)=>e.jsx(r.DropdownItem,Object.assign({$isActive:t===d,onMouseEnter:()=>u(t),onClick:()=>m(t)},{children:a?a(n,t===d):e.jsxs(e.Fragment,{children:[n.avatarUrl&&e.jsx(r.MentionAvatar,{src:n.avatarUrl,alt:""}),e.jsx(r.MentionLabel,{children:n.label}),void 0!==n.isOnline&&e.jsx(r.MentionPresenceDot,{$online:n.isOnline})]})}),n.id)))})):null}));t.displayName="MentionDropdown",exports.MentionDropdown=t;
|
|
2
2
|
//# sourceMappingURL=MentionDropdown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MentionDropdown.js","sources":["../../../../../src/editor/extensions/mention/MentionDropdown.tsx"],"sourcesContent":["import React, {\n\tforwardRef,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseState,\n} from 'react';\nimport type {\n\tMentionDropdownRenderProps,\n\tMentionItem,\n} from '../../BikEditor.types';\nimport {\n\tDropdownContainer,\n\tDropdownItem,\n\tMentionAvatar,\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\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 (event.key === 'ArrowUp') {\n\t\t\t\t\tsetSelectedIndex((
|
|
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\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 (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<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","_ref","ref","items","query","command","renderItem","renderDropdown","selectedIndex","setSelectedIndex","useState","containerRef","useRef","scrollToIndex","useCallback","index","container","current","item","children","scrollIntoView","block","select","i","useImperativeHandle","onKeyDown","_ref2","event","key","prev","next","length","useEffect","_jsx","_Fragment","activeIndex","onSelect","DropdownContainer","Object","assign","map","DropdownItem","$isActive","onMouseEnter","onClick","_jsxs","jsxs","avatarUrl","MentionAvatar","src","alt","jsx","MentionLabel","label","undefined","isOnline","MentionPresenceDot","$online","id","displayName"],"mappings":"mKAiCO,MAAMA,EAAkBC,EAAUA,YACxC,CAAAC,EAAwDC,KAAO,IAA9DC,MAAEA,EAAKC,MAAEA,EAAKC,QAAEA,EAAOC,WAAEA,EAAUC,eAAEA,GAAgBN,EACrD,MAAOO,EAAeC,GAAoBC,EAAQA,SAAC,GAC7CC,EAAeC,SAAuB,MAEtCC,EAAgBC,EAAWA,aAAEC,IAClC,MAAMC,EAAYL,EAAaM,QAC/B,IAAKD,EAAW,OAChB,MAAME,EAAOF,EAAUG,SAASJ,GAChCG,SAAAA,EAAME,eAAe,CAAEC,MAAO,WAAY,GACxC,IAEGC,EAAUC,IACXpB,EAAMoB,IAAIlB,EAAQF,EAAMoB,GAAG,EA+BhC,OA5BAC,EAAmBA,oBAACtB,GAAK,KAAO,CAC/BuB,UAAWC,IAAwC,IAAvCC,MAAEA,GAAiCD,EAC9C,MAAkB,YAAdC,EAAMC,KACTnB,GAAkBoB,IACjB,MAAMC,GAAQD,EAAO1B,EAAM4B,OAAS,GAAK5B,EAAM4B,OAE/C,OADAlB,EAAciB,GACPA,CAAI,KAEL,GAEU,cAAdH,EAAMC,KACTnB,GAAkBoB,IACjB,MAAMC,GAAQD,EAAO,GAAK1B,EAAM4B,OAEhC,OADAlB,EAAciB,GACPA,CAAI,KAEL,GAEU,UAAdH,EAAMC,MACTN,EAAOd,IACA,EAEI,MAIdwB,EAASA,WAAC,IAAMvB,EAAiB,IAAI,CAACN,IAEjCA,EAAM4B,OAGPxB,EAEF0B,EAAAA,IACEC,EAAAA,SAAA,CAAAf,SAAAZ,EAAe,CACfJ,QACAC,QACA+B,YAAa3B,EACb4B,SAAWlB,GAASb,EAAQa,OAO/Be,MAACI,EAAAA,kBAAkBC,OAAAC,OAAA,CAAArC,IAAKS,GACtB,CAAAQ,SAAAhB,EAAMqC,KAAI,CAACtB,EAAMK,IACjBU,MAACQ,EAAAA,aAAYH,OAAAC,OAAA,CAAAG,UAEDnB,IAAMf,EACjBmC,aAAcA,IAAMlC,EAAiBc,GACrCqB,QAASA,IAAMtB,EAAOC,IAErB,CAAAJ,SAAAb,EACAA,EAAWY,EAAMK,IAAMf,GAEvBqC,EACEC,KAAAZ,WAAA,CAAAf,SAAA,CAAAD,EAAK6B,WACLd,EAAAA,IAACe,EAAAA,cAAc,CAAAC,IAAK/B,EAAK6B,UAAWG,IAAI,KAEzCjB,EAAAkB,IAACC,eAAY,CAAAjC,SAAED,EAAKmC,aACDC,IAAlBpC,EAAKqC,UACLtB,EAAAA,IAACuB,EAAAA,mBAAkB,CAAAC,QAAUvC,EAAKqC,gBAdhCrC,EAAKwC,SApBY,IAwCL,IAIvB3D,EAAgB4D,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../node_modules/@tiptap/core/dist/index.js"),t=require("@tiptap/extension-mention"),n=require("@tiptap/react"),r=require("tippy.js"),o=require("./MentionDropdown.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=i(t),a=i(r);function
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../node_modules/@tiptap/core/dist/index.js"),t=require("@tiptap/extension-mention"),n=require("@tiptap/react"),r=require("tippy.js"),o=require("./MentionDropdown.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=i(t),a=i(r);function d(e){let t=arguments.length>2?arguments[2]:void 0,r=arguments.length>3?arguments[3]:void 0;return()=>{let e,i;return{onStart:s=>{e=new n.ReactRenderer(o.MentionDropdown,{props:Object.assign(Object.assign({},s),{renderItem:t,renderDropdown:r}),editor:s.editor}),i=a.default(document.body,{getReferenceClientRect:s.clientRect,appendTo:()=>document.body,content:e.element,showOnCreate:!0,interactive:!0,trigger:"manual",placement:"bottom-start",zIndex:9999,arrow:!1,onMount:e=>{const t=e.popper.querySelector(".tippy-box");t&&(t.style.cssText="background:none;box-shadow:none;border:none;padding:0;border-radius:0;")}})},onUpdate:n=>{var o,s,a;e.updateProps(Object.assign(Object.assign({},n),{renderItem:t,renderDropdown:r})),(null===(o=n.items)||void 0===o?void 0:o.length)?null===(a=i[0])||void 0===a||a.setProps({getReferenceClientRect:n.clientRect}):null===(s=i[0])||void 0===s||s.hide()},onKeyDown:t=>{var n,r,o;return"Escape"===t.event.key?(null===(n=i[0])||void 0===n||n.hide(),!0):null!==(o=null===(r=e.ref)||void 0===r?void 0:r.onKeyDown(t))&&void 0!==o&&o},onExit:()=>{var t;null===(t=i[0])||void 0===t||t.destroy(),e.destroy()}}}}exports.buildAgentMentionExtension=function(t,n,r,o){return s.default.extend({name:"mentionAgent"}).configure({HTMLAttributes:{class:"bik-mention bik-mention--agent"},renderText:e=>{let{options:t,node:n}=e;return`${t.suggestion.char}${n.attrs.label}`},renderHTML:t=>{let{options:n,node:r}=t;return["span",e.mergeAttributes(n.HTMLAttributes),`${n.suggestion.char}${r.attrs.label}`]},suggestion:{char:"@",items:e=>{let{query:n}=e;return t.filter((e=>e.label.toLowerCase().includes(n.toLowerCase())))},command:e=>{let{editor:t,range:r,props:o}=e;t.chain().focus().deleteRange(r).insertContent({type:"mentionAgent",attrs:{id:o.id,label:o.label}}).run(),null==n||n(o,"@")},render:d(n,"@",r,o)}})},exports.buildTeamMentionExtension=function(t,n,r,o){return s.default.extend({name:"mentionTeam"}).configure({HTMLAttributes:{class:"bik-mention bik-mention--team"},renderText:e=>{let{options:t,node:n}=e;return`${t.suggestion.char}${n.attrs.label}`},renderHTML:t=>{let{options:n,node:r}=t;return["span",e.mergeAttributes(n.HTMLAttributes),`${n.suggestion.char}${r.attrs.label}`]},suggestion:{char:"#",items:e=>{let{query:n}=e;return t.filter((e=>e.label.toLowerCase().includes(n.toLowerCase())))},command:e=>{let{editor:t,range:r,props:o}=e;t.chain().focus().deleteRange(r).insertContent({type:"mentionTeam",attrs:{id:o.id,label:o.label}}).run(),null==n||n(o,"#")},render:d(n,"#",r,o)}})};
|
|
2
2
|
//# sourceMappingURL=MentionExtension.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MentionExtension.js","sources":["../../../../../src/editor/extensions/mention/MentionExtension.ts"],"sourcesContent":["import { mergeAttributes } from '@tiptap/core';\nimport Mention from '@tiptap/extension-mention';\nimport { ReactRenderer } from '@tiptap/react';\nimport type { ReactNode } from 'react';\nimport tippy from 'tippy.js';\nimport type {\n\tMentionDropdownRenderProps,\n\tMentionItem,\n} from '../../BikEditor.types';\nimport { MentionDropdown } from './MentionDropdown';\n\nfunction buildRender(\n\tonSelect?: (item: MentionItem, char: '@' | '#') => void,\n\tchar: '@' | '#' = '@',\n\trenderItem?: (item: MentionItem, isActive: boolean) => ReactNode,\n\trenderDropdown?: (props: MentionDropdownRenderProps) => ReactNode,\n) {\n\treturn () => {\n\t\tlet component: ReactRenderer;\n\t\tlet popup: any;\n\n\t\treturn {\n\t\t\tonStart: (props: any) => {\n\t\t\t\tcomponent = new ReactRenderer(MentionDropdown, {\n\t\t\t\t\tprops: { ...props, renderItem, renderDropdown },\n\t\t\t\t\teditor: props.editor,\n\t\t\t\t});\n\t\t\t\tpopup = tippy(document.body, {\n\t\t\t\t\tgetReferenceClientRect: props.clientRect,\n\t\t\t\t\tappendTo: () => document.body,\n\t\t\t\t\tcontent: component.element,\n\t\t\t\t\tshowOnCreate: true,\n\t\t\t\t\tinteractive: true,\n\t\t\t\t\ttrigger: 'manual',\n\t\t\t\t\tplacement: 'bottom-start',\n\t\t\t\t\tzIndex: 9999,\n\t\t\t\t\tarrow: false,\n\t\t\t\t\t// tippy's default dark theme adds a visible box even when content\n\t\t\t\t\t// is empty. Strip it so our dropdown handles all visual styling.\n\t\t\t\t\tonMount: (instance) => {\n\t\t\t\t\t\tconst box =\n\t\t\t\t\t\t\tinstance.popper.querySelector<HTMLElement>('.tippy-box');\n\t\t\t\t\t\tif (box)\n\t\t\t\t\t\t\tbox.style.cssText =\n\t\t\t\t\t\t\t\t'background:none;box-shadow:none;border:none;padding:0;border-radius:0;';\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t},\n\t\t\tonUpdate: (props: any) => {\n\t\t\t\tcomponent.updateProps({ ...props, renderItem, renderDropdown });\n\t\t\t\tif (!props.items?.length) {\n\t\t\t\t\tpopup[0]?.hide();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tpopup[0]?.setProps({ getReferenceClientRect: props.clientRect });\n\t\t\t},\n\t\t\tonKeyDown: (props: any) => {\n\t\t\t\tif (props.event.key === 'Escape') {\n\t\t\t\t\tpopup[0]?.hide();\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\t\t\t\treturn (component.ref as any)?.onKeyDown(props) ?? false;\n\t\t\t},\n\t\t\tonExit: () => {\n\t\t\t\tpopup[0]?.destroy();\n\t\t\t\tcomponent.destroy();\n\t\t\t},\n\t\t};\n\t};\n}\n\nexport function buildAgentMentionExtension(\n\tagents: MentionItem[],\n\tonSelect?: (item: MentionItem, char: '@' | '#') => void,\n\trenderItem?: (item: MentionItem, isActive: boolean) => ReactNode,\n\trenderDropdown?: (props: MentionDropdownRenderProps) => ReactNode,\n) {\n\treturn Mention.extend({ name: 'mentionAgent' }).configure({\n\t\tHTMLAttributes: { class: 'bik-mention bik-mention--agent' },\n\t\trenderText: ({ options, node }) =>\n\t\t\t`${options.suggestion.char}${node.attrs['label']}`,\n\t\trenderHTML: ({ options, node }) => [\n\t\t\t'span',\n\t\t\tmergeAttributes(options.HTMLAttributes),\n\t\t\t`${options.suggestion.char}${node.attrs['label']}`,\n\t\t],\n\t\tsuggestion: {\n\t\t\tchar: '@',\n\t\t\titems: ({ query }: { query: string }) =>\n\t\t\t\tagents
|
|
1
|
+
{"version":3,"file":"MentionExtension.js","sources":["../../../../../src/editor/extensions/mention/MentionExtension.ts"],"sourcesContent":["import { mergeAttributes } from '@tiptap/core';\nimport Mention from '@tiptap/extension-mention';\nimport { ReactRenderer } from '@tiptap/react';\nimport type { ReactNode } from 'react';\nimport tippy from 'tippy.js';\nimport type {\n\tMentionDropdownRenderProps,\n\tMentionItem,\n} from '../../BikEditor.types';\nimport { MentionDropdown } from './MentionDropdown';\n\nfunction buildRender(\n\tonSelect?: (item: MentionItem, char: '@' | '#') => void,\n\tchar: '@' | '#' = '@',\n\trenderItem?: (item: MentionItem, isActive: boolean) => ReactNode,\n\trenderDropdown?: (props: MentionDropdownRenderProps) => ReactNode,\n) {\n\treturn () => {\n\t\tlet component: ReactRenderer;\n\t\tlet popup: any;\n\n\t\treturn {\n\t\t\tonStart: (props: any) => {\n\t\t\t\tcomponent = new ReactRenderer(MentionDropdown, {\n\t\t\t\t\tprops: { ...props, renderItem, renderDropdown },\n\t\t\t\t\teditor: props.editor,\n\t\t\t\t});\n\t\t\t\tpopup = tippy(document.body, {\n\t\t\t\t\tgetReferenceClientRect: props.clientRect,\n\t\t\t\t\tappendTo: () => document.body,\n\t\t\t\t\tcontent: component.element,\n\t\t\t\t\tshowOnCreate: true,\n\t\t\t\t\tinteractive: true,\n\t\t\t\t\ttrigger: 'manual',\n\t\t\t\t\tplacement: 'bottom-start',\n\t\t\t\t\tzIndex: 9999,\n\t\t\t\t\tarrow: false,\n\t\t\t\t\t// tippy's default dark theme adds a visible box even when content\n\t\t\t\t\t// is empty. Strip it so our dropdown handles all visual styling.\n\t\t\t\t\tonMount: (instance) => {\n\t\t\t\t\t\tconst box =\n\t\t\t\t\t\t\tinstance.popper.querySelector<HTMLElement>('.tippy-box');\n\t\t\t\t\t\tif (box)\n\t\t\t\t\t\t\tbox.style.cssText =\n\t\t\t\t\t\t\t\t'background:none;box-shadow:none;border:none;padding:0;border-radius:0;';\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t},\n\t\t\tonUpdate: (props: any) => {\n\t\t\t\tcomponent.updateProps({ ...props, renderItem, renderDropdown });\n\t\t\t\tif (!props.items?.length) {\n\t\t\t\t\tpopup[0]?.hide();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tpopup[0]?.setProps({ getReferenceClientRect: props.clientRect });\n\t\t\t},\n\t\t\tonKeyDown: (props: any) => {\n\t\t\t\tif (props.event.key === 'Escape') {\n\t\t\t\t\tpopup[0]?.hide();\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\t\t\t\treturn (component.ref as any)?.onKeyDown(props) ?? false;\n\t\t\t},\n\t\t\tonExit: () => {\n\t\t\t\tpopup[0]?.destroy();\n\t\t\t\tcomponent.destroy();\n\t\t\t},\n\t\t};\n\t};\n}\n\nexport function buildAgentMentionExtension(\n\tagents: MentionItem[],\n\tonSelect?: (item: MentionItem, char: '@' | '#') => void,\n\trenderItem?: (item: MentionItem, isActive: boolean) => ReactNode,\n\trenderDropdown?: (props: MentionDropdownRenderProps) => ReactNode,\n) {\n\treturn Mention.extend({ name: 'mentionAgent' }).configure({\n\t\tHTMLAttributes: { class: 'bik-mention bik-mention--agent' },\n\t\trenderText: ({ options, node }) =>\n\t\t\t`${options.suggestion.char}${node.attrs['label']}`,\n\t\trenderHTML: ({ options, node }) => [\n\t\t\t'span',\n\t\t\tmergeAttributes(options.HTMLAttributes),\n\t\t\t`${options.suggestion.char}${node.attrs['label']}`,\n\t\t],\n\t\tsuggestion: {\n\t\t\tchar: '@',\n\t\t\titems: ({ query }: { query: string }) =>\n\t\t\t\tagents.filter((a) =>\n\t\t\t\t\ta.label.toLowerCase().includes(query.toLowerCase()),\n\t\t\t\t),\n\t\t\tcommand: ({ editor, range, props }: any) => {\n\t\t\t\teditor\n\t\t\t\t\t.chain()\n\t\t\t\t\t.focus()\n\t\t\t\t\t.deleteRange(range)\n\t\t\t\t\t.insertContent({\n\t\t\t\t\t\ttype: 'mentionAgent',\n\t\t\t\t\t\tattrs: { id: props.id, label: props.label },\n\t\t\t\t\t})\n\t\t\t\t\t.run();\n\t\t\t\tonSelect?.(props, '@');\n\t\t\t},\n\t\t\trender: buildRender(onSelect, '@', renderItem, renderDropdown),\n\t\t},\n\t});\n}\n\nexport function buildTeamMentionExtension(\n\tteams: MentionItem[],\n\tonSelect?: (item: MentionItem, char: '@' | '#') => void,\n\trenderItem?: (item: MentionItem, isActive: boolean) => ReactNode,\n\trenderDropdown?: (props: MentionDropdownRenderProps) => ReactNode,\n) {\n\treturn Mention.extend({ name: 'mentionTeam' }).configure({\n\t\tHTMLAttributes: { class: 'bik-mention bik-mention--team' },\n\t\trenderText: ({ options, node }) =>\n\t\t\t`${options.suggestion.char}${node.attrs['label']}`,\n\t\trenderHTML: ({ options, node }) => [\n\t\t\t'span',\n\t\t\tmergeAttributes(options.HTMLAttributes),\n\t\t\t`${options.suggestion.char}${node.attrs['label']}`,\n\t\t],\n\t\tsuggestion: {\n\t\t\tchar: '#',\n\t\t\titems: ({ query }: { query: string }) =>\n\t\t\t\tteams.filter((t) =>\n\t\t\t\t\tt.label.toLowerCase().includes(query.toLowerCase()),\n\t\t\t\t),\n\t\t\tcommand: ({ editor, range, props }: any) => {\n\t\t\t\teditor\n\t\t\t\t\t.chain()\n\t\t\t\t\t.focus()\n\t\t\t\t\t.deleteRange(range)\n\t\t\t\t\t.insertContent({\n\t\t\t\t\t\ttype: 'mentionTeam',\n\t\t\t\t\t\tattrs: { id: props.id, label: props.label },\n\t\t\t\t\t})\n\t\t\t\t\t.run();\n\t\t\t\tonSelect?.(props, '#');\n\t\t\t},\n\t\t\trender: buildRender(onSelect, '#', renderItem, renderDropdown),\n\t\t},\n\t});\n}\n"],"names":["buildRender","onSelect","renderItem","arguments","length","undefined","renderDropdown","component","popup","onStart","props","ReactRenderer","MentionDropdown","editor","tippy","document","body","getReferenceClientRect","clientRect","appendTo","content","element","showOnCreate","interactive","trigger","placement","zIndex","arrow","onMount","instance","box","popper","querySelector","style","cssText","onUpdate","updateProps","Object","assign","_a","items","_c","setProps","_b","hide","onKeyDown","event","key","ref","onExit","destroy","agents","Mention","extend","name","configure","HTMLAttributes","class","renderText","_ref","options","node","suggestion","char","attrs","renderHTML","_ref2","mergeAttributes","_ref3","query","filter","a","label","toLowerCase","includes","command","_ref4","range","chain","focus","deleteRange","insertContent","type","id","run","render","teams","_ref5","_ref6","_ref7","t","_ref8"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,Fragment as n,jsxs as r}from"react/jsx-runtime";import{forwardRef as t,useState as o,
|
|
1
|
+
import{jsx as e,Fragment as n,jsxs as r}from"react/jsx-runtime";import{forwardRef as t,useState as o,useRef as l,useCallback as i,useImperativeHandle as c,useEffect as s}from"react";import{DropdownContainer as a,DropdownItem as d,MentionAvatar as m,MentionLabel as u,MentionPresenceDot as h}from"../editorDropdown.styles.js";const p=t(((t,p)=>{let{items:w,query:y,command:g,renderItem:v,renderDropdown:f}=t;const[k,D]=o(0),b=l(null),j=i((e=>{const n=b.current;if(!n)return;const r=n.children[e];null==r||r.scrollIntoView({block:"nearest"})}),[]),O=e=>{w[e]&&g(w[e])};return c(p,(()=>({onKeyDown:e=>{let{event:n}=e;return"ArrowUp"===n.key?(D((e=>{const n=(e+w.length-1)%w.length;return j(n),n})),!0):"ArrowDown"===n.key?(D((e=>{const n=(e+1)%w.length;return j(n),n})),!0):"Enter"===n.key&&(O(k),!0)}}))),s((()=>D(0)),[w]),w.length?f?e(n,{children:f({items:w,query:y,activeIndex:k,onSelect:e=>g(e)})}):e(a,Object.assign({ref:b},{children:w.map(((t,o)=>e(d,Object.assign({$isActive:o===k,onMouseEnter:()=>D(o),onClick:()=>O(o)},{children:v?v(t,o===k):r(n,{children:[t.avatarUrl&&e(m,{src:t.avatarUrl,alt:""}),e(u,{children:t.label}),void 0!==t.isOnline&&e(h,{$online:t.isOnline})]})}),t.id)))})):null}));p.displayName="MentionDropdown";export{p as MentionDropdown};
|
|
2
2
|
//# sourceMappingURL=MentionDropdown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MentionDropdown.js","sources":["../../../../../src/editor/extensions/mention/MentionDropdown.tsx"],"sourcesContent":["import React, {\n\tforwardRef,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseState,\n} from 'react';\nimport type {\n\tMentionDropdownRenderProps,\n\tMentionItem,\n} from '../../BikEditor.types';\nimport {\n\tDropdownContainer,\n\tDropdownItem,\n\tMentionAvatar,\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\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 (event.key === 'ArrowUp') {\n\t\t\t\t\tsetSelectedIndex((
|
|
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\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 (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<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","_ref","ref","items","query","command","renderItem","renderDropdown","selectedIndex","setSelectedIndex","useState","containerRef","useRef","scrollToIndex","useCallback","index","container","current","item","children","scrollIntoView","block","select","i","useImperativeHandle","onKeyDown","_ref2","event","key","prev","next","length","useEffect","_jsx","_Fragment","activeIndex","onSelect","DropdownContainer","Object","assign","map","DropdownItem","$isActive","onMouseEnter","onClick","_jsxs","avatarUrl","MentionAvatar","src","alt","MentionLabel","label","undefined","isOnline","MentionPresenceDot","$online","id","displayName"],"mappings":"qUAiCO,MAAMA,EAAkBC,GAC9B,CAAAC,EAAwDC,KAAO,IAA9DC,MAAEA,EAAKC,MAAEA,EAAKC,QAAEA,EAAOC,WAAEA,EAAUC,eAAEA,GAAgBN,EACrD,MAAOO,EAAeC,GAAoBC,EAAS,GAC7CC,EAAeC,EAAuB,MAEtCC,EAAgBC,GAAaC,IAClC,MAAMC,EAAYL,EAAaM,QAC/B,IAAKD,EAAW,OAChB,MAAME,EAAOF,EAAUG,SAASJ,GAChCG,SAAAA,EAAME,eAAe,CAAEC,MAAO,WAAY,GACxC,IAEGC,EAAUC,IACXpB,EAAMoB,IAAIlB,EAAQF,EAAMoB,GAAG,EA+BhC,OA5BAC,EAAoBtB,GAAK,KAAO,CAC/BuB,UAAWC,IAAwC,IAAvCC,MAAEA,GAAiCD,EAC9C,MAAkB,YAAdC,EAAMC,KACTnB,GAAkBoB,IACjB,MAAMC,GAAQD,EAAO1B,EAAM4B,OAAS,GAAK5B,EAAM4B,OAE/C,OADAlB,EAAciB,GACPA,CAAI,KAEL,GAEU,cAAdH,EAAMC,KACTnB,GAAkBoB,IACjB,MAAMC,GAAQD,EAAO,GAAK1B,EAAM4B,OAEhC,OADAlB,EAAciB,GACPA,CAAI,KAEL,GAEU,UAAdH,EAAMC,MACTN,EAAOd,IACA,EAEI,MAIdwB,GAAU,IAAMvB,EAAiB,IAAI,CAACN,IAEjCA,EAAM4B,OAGPxB,EAEF0B,EACEC,EAAA,CAAAf,SAAAZ,EAAe,CACfJ,QACAC,QACA+B,YAAa3B,EACb4B,SAAWlB,GAASb,EAAQa,OAO/Be,EAACI,EAAkBC,OAAAC,OAAA,CAAArC,IAAKS,GACtB,CAAAQ,SAAAhB,EAAMqC,KAAI,CAACtB,EAAMK,IACjBU,EAACQ,EAAYH,OAAAC,OAAA,CAAAG,UAEDnB,IAAMf,EACjBmC,aAAcA,IAAMlC,EAAiBc,GACrCqB,QAASA,IAAMtB,EAAOC,IAErB,CAAAJ,SAAAb,EACAA,EAAWY,EAAMK,IAAMf,GAEvBqC,EACEX,EAAA,CAAAf,SAAA,CAAAD,EAAK4B,WACLb,EAACc,EAAc,CAAAC,IAAK9B,EAAK4B,UAAWG,IAAI,KAEzChB,EAACiB,EAAY,CAAA/B,SAAED,EAAKiC,aACDC,IAAlBlC,EAAKmC,UACLpB,EAACqB,EAAkB,CAAAC,QAAUrC,EAAKmC,gBAdhCnC,EAAKsC,SApBY,IAwCL,IAIvBzD,EAAgB0D,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{mergeAttributes as e}from"../../../node_modules/@tiptap/core/dist/index.js";import t from"@tiptap/extension-mention";import{ReactRenderer as n}from"@tiptap/react";import r from"tippy.js";import{MentionDropdown as o}from"./MentionDropdown.js";function i(e){let t=arguments.length>2?arguments[2]:void 0,i=arguments.length>3?arguments[3]:void 0;return()=>{let e,s;return{onStart:a=>{e=new n(o,{props:Object.assign(Object.assign({},a),{renderItem:t,renderDropdown:i}),editor:a.editor}),s=r(document.body,{getReferenceClientRect:a.clientRect,appendTo:()=>document.body,content:e.element,showOnCreate:!0,interactive:!0,trigger:"manual",placement:"bottom-start",zIndex:9999,arrow:!1,onMount:e=>{const t=e.popper.querySelector(".tippy-box");t&&(t.style.cssText="background:none;box-shadow:none;border:none;padding:0;border-radius:0;")}})},onUpdate:n=>{var r,o,a;e.updateProps(Object.assign(Object.assign({},n),{renderItem:t,renderDropdown:i})),(null===(r=n.items)||void 0===r?void 0:r.length)?null===(a=s[0])||void 0===a||a.setProps({getReferenceClientRect:n.clientRect}):null===(o=s[0])||void 0===o||o.hide()},onKeyDown:t=>{var n,r,o;return"Escape"===t.event.key?(null===(n=s[0])||void 0===n||n.hide(),!0):null!==(o=null===(r=e.ref)||void 0===r?void 0:r.onKeyDown(t))&&void 0!==o&&o},onExit:()=>{var t;null===(t=s[0])||void 0===t||t.destroy(),e.destroy()}}}}function s(n,r,o,s){return t.extend({name:"mentionAgent"}).configure({HTMLAttributes:{class:"bik-mention bik-mention--agent"},renderText:e=>{let{options:t,node:n}=e;return`${t.suggestion.char}${n.attrs.label}`},renderHTML:t=>{let{options:n,node:r}=t;return["span",e(n.HTMLAttributes),`${n.suggestion.char}${r.attrs.label}`]},suggestion:{char:"@",items:e=>{let{query:t}=e;return n.filter((e=>e.label.toLowerCase().includes(t.toLowerCase())))
|
|
1
|
+
import{mergeAttributes as e}from"../../../node_modules/@tiptap/core/dist/index.js";import t from"@tiptap/extension-mention";import{ReactRenderer as n}from"@tiptap/react";import r from"tippy.js";import{MentionDropdown as o}from"./MentionDropdown.js";function i(e){let t=arguments.length>2?arguments[2]:void 0,i=arguments.length>3?arguments[3]:void 0;return()=>{let e,s;return{onStart:a=>{e=new n(o,{props:Object.assign(Object.assign({},a),{renderItem:t,renderDropdown:i}),editor:a.editor}),s=r(document.body,{getReferenceClientRect:a.clientRect,appendTo:()=>document.body,content:e.element,showOnCreate:!0,interactive:!0,trigger:"manual",placement:"bottom-start",zIndex:9999,arrow:!1,onMount:e=>{const t=e.popper.querySelector(".tippy-box");t&&(t.style.cssText="background:none;box-shadow:none;border:none;padding:0;border-radius:0;")}})},onUpdate:n=>{var r,o,a;e.updateProps(Object.assign(Object.assign({},n),{renderItem:t,renderDropdown:i})),(null===(r=n.items)||void 0===r?void 0:r.length)?null===(a=s[0])||void 0===a||a.setProps({getReferenceClientRect:n.clientRect}):null===(o=s[0])||void 0===o||o.hide()},onKeyDown:t=>{var n,r,o;return"Escape"===t.event.key?(null===(n=s[0])||void 0===n||n.hide(),!0):null!==(o=null===(r=e.ref)||void 0===r?void 0:r.onKeyDown(t))&&void 0!==o&&o},onExit:()=>{var t;null===(t=s[0])||void 0===t||t.destroy(),e.destroy()}}}}function s(n,r,o,s){return t.extend({name:"mentionAgent"}).configure({HTMLAttributes:{class:"bik-mention bik-mention--agent"},renderText:e=>{let{options:t,node:n}=e;return`${t.suggestion.char}${n.attrs.label}`},renderHTML:t=>{let{options:n,node:r}=t;return["span",e(n.HTMLAttributes),`${n.suggestion.char}${r.attrs.label}`]},suggestion:{char:"@",items:e=>{let{query:t}=e;return n.filter((e=>e.label.toLowerCase().includes(t.toLowerCase())))},command:e=>{let{editor:t,range:n,props:o}=e;t.chain().focus().deleteRange(n).insertContent({type:"mentionAgent",attrs:{id:o.id,label:o.label}}).run(),null==r||r(o,"@")},render:i(r,"@",o,s)}})}function a(n,r,o,s){return t.extend({name:"mentionTeam"}).configure({HTMLAttributes:{class:"bik-mention bik-mention--team"},renderText:e=>{let{options:t,node:n}=e;return`${t.suggestion.char}${n.attrs.label}`},renderHTML:t=>{let{options:n,node:r}=t;return["span",e(n.HTMLAttributes),`${n.suggestion.char}${r.attrs.label}`]},suggestion:{char:"#",items:e=>{let{query:t}=e;return n.filter((e=>e.label.toLowerCase().includes(t.toLowerCase())))},command:e=>{let{editor:t,range:n,props:o}=e;t.chain().focus().deleteRange(n).insertContent({type:"mentionTeam",attrs:{id:o.id,label:o.label}}).run(),null==r||r(o,"#")},render:i(r,"#",o,s)}})}export{s as buildAgentMentionExtension,a as buildTeamMentionExtension};
|
|
2
2
|
//# sourceMappingURL=MentionExtension.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MentionExtension.js","sources":["../../../../../src/editor/extensions/mention/MentionExtension.ts"],"sourcesContent":["import { mergeAttributes } from '@tiptap/core';\nimport Mention from '@tiptap/extension-mention';\nimport { ReactRenderer } from '@tiptap/react';\nimport type { ReactNode } from 'react';\nimport tippy from 'tippy.js';\nimport type {\n\tMentionDropdownRenderProps,\n\tMentionItem,\n} from '../../BikEditor.types';\nimport { MentionDropdown } from './MentionDropdown';\n\nfunction buildRender(\n\tonSelect?: (item: MentionItem, char: '@' | '#') => void,\n\tchar: '@' | '#' = '@',\n\trenderItem?: (item: MentionItem, isActive: boolean) => ReactNode,\n\trenderDropdown?: (props: MentionDropdownRenderProps) => ReactNode,\n) {\n\treturn () => {\n\t\tlet component: ReactRenderer;\n\t\tlet popup: any;\n\n\t\treturn {\n\t\t\tonStart: (props: any) => {\n\t\t\t\tcomponent = new ReactRenderer(MentionDropdown, {\n\t\t\t\t\tprops: { ...props, renderItem, renderDropdown },\n\t\t\t\t\teditor: props.editor,\n\t\t\t\t});\n\t\t\t\tpopup = tippy(document.body, {\n\t\t\t\t\tgetReferenceClientRect: props.clientRect,\n\t\t\t\t\tappendTo: () => document.body,\n\t\t\t\t\tcontent: component.element,\n\t\t\t\t\tshowOnCreate: true,\n\t\t\t\t\tinteractive: true,\n\t\t\t\t\ttrigger: 'manual',\n\t\t\t\t\tplacement: 'bottom-start',\n\t\t\t\t\tzIndex: 9999,\n\t\t\t\t\tarrow: false,\n\t\t\t\t\t// tippy's default dark theme adds a visible box even when content\n\t\t\t\t\t// is empty. Strip it so our dropdown handles all visual styling.\n\t\t\t\t\tonMount: (instance) => {\n\t\t\t\t\t\tconst box =\n\t\t\t\t\t\t\tinstance.popper.querySelector<HTMLElement>('.tippy-box');\n\t\t\t\t\t\tif (box)\n\t\t\t\t\t\t\tbox.style.cssText =\n\t\t\t\t\t\t\t\t'background:none;box-shadow:none;border:none;padding:0;border-radius:0;';\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t},\n\t\t\tonUpdate: (props: any) => {\n\t\t\t\tcomponent.updateProps({ ...props, renderItem, renderDropdown });\n\t\t\t\tif (!props.items?.length) {\n\t\t\t\t\tpopup[0]?.hide();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tpopup[0]?.setProps({ getReferenceClientRect: props.clientRect });\n\t\t\t},\n\t\t\tonKeyDown: (props: any) => {\n\t\t\t\tif (props.event.key === 'Escape') {\n\t\t\t\t\tpopup[0]?.hide();\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\t\t\t\treturn (component.ref as any)?.onKeyDown(props) ?? false;\n\t\t\t},\n\t\t\tonExit: () => {\n\t\t\t\tpopup[0]?.destroy();\n\t\t\t\tcomponent.destroy();\n\t\t\t},\n\t\t};\n\t};\n}\n\nexport function buildAgentMentionExtension(\n\tagents: MentionItem[],\n\tonSelect?: (item: MentionItem, char: '@' | '#') => void,\n\trenderItem?: (item: MentionItem, isActive: boolean) => ReactNode,\n\trenderDropdown?: (props: MentionDropdownRenderProps) => ReactNode,\n) {\n\treturn Mention.extend({ name: 'mentionAgent' }).configure({\n\t\tHTMLAttributes: { class: 'bik-mention bik-mention--agent' },\n\t\trenderText: ({ options, node }) =>\n\t\t\t`${options.suggestion.char}${node.attrs['label']}`,\n\t\trenderHTML: ({ options, node }) => [\n\t\t\t'span',\n\t\t\tmergeAttributes(options.HTMLAttributes),\n\t\t\t`${options.suggestion.char}${node.attrs['label']}`,\n\t\t],\n\t\tsuggestion: {\n\t\t\tchar: '@',\n\t\t\titems: ({ query }: { query: string }) =>\n\t\t\t\tagents
|
|
1
|
+
{"version":3,"file":"MentionExtension.js","sources":["../../../../../src/editor/extensions/mention/MentionExtension.ts"],"sourcesContent":["import { mergeAttributes } from '@tiptap/core';\nimport Mention from '@tiptap/extension-mention';\nimport { ReactRenderer } from '@tiptap/react';\nimport type { ReactNode } from 'react';\nimport tippy from 'tippy.js';\nimport type {\n\tMentionDropdownRenderProps,\n\tMentionItem,\n} from '../../BikEditor.types';\nimport { MentionDropdown } from './MentionDropdown';\n\nfunction buildRender(\n\tonSelect?: (item: MentionItem, char: '@' | '#') => void,\n\tchar: '@' | '#' = '@',\n\trenderItem?: (item: MentionItem, isActive: boolean) => ReactNode,\n\trenderDropdown?: (props: MentionDropdownRenderProps) => ReactNode,\n) {\n\treturn () => {\n\t\tlet component: ReactRenderer;\n\t\tlet popup: any;\n\n\t\treturn {\n\t\t\tonStart: (props: any) => {\n\t\t\t\tcomponent = new ReactRenderer(MentionDropdown, {\n\t\t\t\t\tprops: { ...props, renderItem, renderDropdown },\n\t\t\t\t\teditor: props.editor,\n\t\t\t\t});\n\t\t\t\tpopup = tippy(document.body, {\n\t\t\t\t\tgetReferenceClientRect: props.clientRect,\n\t\t\t\t\tappendTo: () => document.body,\n\t\t\t\t\tcontent: component.element,\n\t\t\t\t\tshowOnCreate: true,\n\t\t\t\t\tinteractive: true,\n\t\t\t\t\ttrigger: 'manual',\n\t\t\t\t\tplacement: 'bottom-start',\n\t\t\t\t\tzIndex: 9999,\n\t\t\t\t\tarrow: false,\n\t\t\t\t\t// tippy's default dark theme adds a visible box even when content\n\t\t\t\t\t// is empty. Strip it so our dropdown handles all visual styling.\n\t\t\t\t\tonMount: (instance) => {\n\t\t\t\t\t\tconst box =\n\t\t\t\t\t\t\tinstance.popper.querySelector<HTMLElement>('.tippy-box');\n\t\t\t\t\t\tif (box)\n\t\t\t\t\t\t\tbox.style.cssText =\n\t\t\t\t\t\t\t\t'background:none;box-shadow:none;border:none;padding:0;border-radius:0;';\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t},\n\t\t\tonUpdate: (props: any) => {\n\t\t\t\tcomponent.updateProps({ ...props, renderItem, renderDropdown });\n\t\t\t\tif (!props.items?.length) {\n\t\t\t\t\tpopup[0]?.hide();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tpopup[0]?.setProps({ getReferenceClientRect: props.clientRect });\n\t\t\t},\n\t\t\tonKeyDown: (props: any) => {\n\t\t\t\tif (props.event.key === 'Escape') {\n\t\t\t\t\tpopup[0]?.hide();\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\t\t\t\treturn (component.ref as any)?.onKeyDown(props) ?? false;\n\t\t\t},\n\t\t\tonExit: () => {\n\t\t\t\tpopup[0]?.destroy();\n\t\t\t\tcomponent.destroy();\n\t\t\t},\n\t\t};\n\t};\n}\n\nexport function buildAgentMentionExtension(\n\tagents: MentionItem[],\n\tonSelect?: (item: MentionItem, char: '@' | '#') => void,\n\trenderItem?: (item: MentionItem, isActive: boolean) => ReactNode,\n\trenderDropdown?: (props: MentionDropdownRenderProps) => ReactNode,\n) {\n\treturn Mention.extend({ name: 'mentionAgent' }).configure({\n\t\tHTMLAttributes: { class: 'bik-mention bik-mention--agent' },\n\t\trenderText: ({ options, node }) =>\n\t\t\t`${options.suggestion.char}${node.attrs['label']}`,\n\t\trenderHTML: ({ options, node }) => [\n\t\t\t'span',\n\t\t\tmergeAttributes(options.HTMLAttributes),\n\t\t\t`${options.suggestion.char}${node.attrs['label']}`,\n\t\t],\n\t\tsuggestion: {\n\t\t\tchar: '@',\n\t\t\titems: ({ query }: { query: string }) =>\n\t\t\t\tagents.filter((a) =>\n\t\t\t\t\ta.label.toLowerCase().includes(query.toLowerCase()),\n\t\t\t\t),\n\t\t\tcommand: ({ editor, range, props }: any) => {\n\t\t\t\teditor\n\t\t\t\t\t.chain()\n\t\t\t\t\t.focus()\n\t\t\t\t\t.deleteRange(range)\n\t\t\t\t\t.insertContent({\n\t\t\t\t\t\ttype: 'mentionAgent',\n\t\t\t\t\t\tattrs: { id: props.id, label: props.label },\n\t\t\t\t\t})\n\t\t\t\t\t.run();\n\t\t\t\tonSelect?.(props, '@');\n\t\t\t},\n\t\t\trender: buildRender(onSelect, '@', renderItem, renderDropdown),\n\t\t},\n\t});\n}\n\nexport function buildTeamMentionExtension(\n\tteams: MentionItem[],\n\tonSelect?: (item: MentionItem, char: '@' | '#') => void,\n\trenderItem?: (item: MentionItem, isActive: boolean) => ReactNode,\n\trenderDropdown?: (props: MentionDropdownRenderProps) => ReactNode,\n) {\n\treturn Mention.extend({ name: 'mentionTeam' }).configure({\n\t\tHTMLAttributes: { class: 'bik-mention bik-mention--team' },\n\t\trenderText: ({ options, node }) =>\n\t\t\t`${options.suggestion.char}${node.attrs['label']}`,\n\t\trenderHTML: ({ options, node }) => [\n\t\t\t'span',\n\t\t\tmergeAttributes(options.HTMLAttributes),\n\t\t\t`${options.suggestion.char}${node.attrs['label']}`,\n\t\t],\n\t\tsuggestion: {\n\t\t\tchar: '#',\n\t\t\titems: ({ query }: { query: string }) =>\n\t\t\t\tteams.filter((t) =>\n\t\t\t\t\tt.label.toLowerCase().includes(query.toLowerCase()),\n\t\t\t\t),\n\t\t\tcommand: ({ editor, range, props }: any) => {\n\t\t\t\teditor\n\t\t\t\t\t.chain()\n\t\t\t\t\t.focus()\n\t\t\t\t\t.deleteRange(range)\n\t\t\t\t\t.insertContent({\n\t\t\t\t\t\ttype: 'mentionTeam',\n\t\t\t\t\t\tattrs: { id: props.id, label: props.label },\n\t\t\t\t\t})\n\t\t\t\t\t.run();\n\t\t\t\tonSelect?.(props, '#');\n\t\t\t},\n\t\t\trender: buildRender(onSelect, '#', renderItem, renderDropdown),\n\t\t},\n\t});\n}\n"],"names":["buildRender","onSelect","renderItem","arguments","length","undefined","renderDropdown","component","popup","onStart","props","ReactRenderer","MentionDropdown","editor","tippy","document","body","getReferenceClientRect","clientRect","appendTo","content","element","showOnCreate","interactive","trigger","placement","zIndex","arrow","onMount","instance","box","popper","querySelector","style","cssText","onUpdate","updateProps","Object","assign","_a","items","_c","setProps","_b","hide","onKeyDown","event","key","ref","onExit","destroy","buildAgentMentionExtension","agents","Mention","extend","name","configure","HTMLAttributes","class","renderText","_ref","options","node","suggestion","char","attrs","renderHTML","_ref2","mergeAttributes","_ref3","query","filter","a","label","toLowerCase","includes","command","_ref4","range","chain","focus","deleteRange","insertContent","type","id","run","render","buildTeamMentionExtension","teams","_ref5","_ref6","_ref7","t","_ref8"],"mappings":"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"}
|