carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 2.39 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@lexical/react/LexicalComposerContext"),n=require("@lexical/react/LexicalTypeaheadMenuPlugin"),i=require("lexical"),r=require("react"),o=require("react-dom"),s=require("./constants.js"),a=require("./helpers.js"),l=require("./mentions-typeahead-menu-item.component.js"),u=require("./mention-typeahead-option.class.js"),c=require("../../__nodes__/mention.node.js"),d=require("../../../../../hooks/__internal__/useLocale/useLocale.js"),p=require("./mentions.style.js");function m(e){return e&&e.__esModule?e:{default:e}}var x=m(o);const M=({namespace:o,searchOptions:m})=>{const[M]=t.useLexicalComposerContext(),[g,h]=r.useState(null),_=r.useMemo((()=>g?m.filter((e=>e.name.toLowerCase().includes(g.toLowerCase()))):[]),[g,m]),C=d.default(),T=r.useMemo((()=>_.map((e=>new u.MentionTypeaheadOption(e.id,e.name,e.initials,e.iconType,e.src))).slice(0,s.SUGGESTION_LIST_LENGTH_LIMIT)),[_]),y=r.useCallback(((e,t,n)=>{M.update((()=>{const r=c.$createMentionNode(`@${e.name}`);t&&t.replace(r);const o=r.getNextSibling();if(i.$isTextNode(o)&&o.getTextContent().startsWith(" "))o.select(1,1);else{const e=i.$createTextNode(" ");r.insertAfter(e),e.select()}n()}))}),[M]);return r.useEffect((()=>M.registerCommand(i.KEY_BACKSPACE_COMMAND,(()=>{const e=i.$getSelection();if(!i.$isRangeSelection(e)||!e.isCollapsed())return!1;const{anchor:t}=e,n=t.getNode();if(c.$isMentionNode(n)){const e=new i.TextNode(n.getTextContent());return n.replace(e),!0}return!1}),i.COMMAND_PRIORITY_LOW)),[M]),e.jsx(n.LexicalTypeaheadMenuPlugin,{onQueryChange:h,onSelectOption:y,triggerFn:e=>a.getPossibleQueryMatch(e),options:T,menuRenderFn:(t,{selectedIndex:n,selectOptionAndCleanUp:i,setHighlightedIndex:r})=>t.current&&_.length?x.default.createPortal(e.jsx(p.TypeaheadPopover,{id:`${o}-mentions-menu`,children:e.jsx(p.MentionsList,{"data-role":"mention-list",id:`${o}-mention-list`,role:"listbox","aria-label":C.textEditor.mentions.listAriaLabel(),children:T.map(((t,s)=>{var a,u;const c=null!==(u=null!==(a=t.key)&&void 0!==a?a:t.id)&&void 0!==u?u:`${o}-${s}`;return e.jsx(l.MentionsTypeaheadMenuItem,{index:s,isSelected:n===s,onClick:()=>{r(s),i(t)},onMouseEnter:()=>{r(s)},option:t,namespace:o,currentQueryString:null!=g?g:void 0},c)}))})}),t.current):null})};exports.MentionsPlugin=M,exports.default=M;