@nexusui/components
Version:
These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.
2 lines (1 loc) • 3.27 kB
JavaScript
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useLexicalComposerContext as r}from"@lexical/react/LexicalComposerContext";import{useBasicTypeaheadTriggerMatch as i,LexicalTypeaheadMenuPlugin as n,MenuOption as a,PUNCTUATION as o}from"@lexical/react/LexicalTypeaheadMenuPlugin";import{COMMAND_PRIORITY_NORMAL as s}from"lexical";import{useState as l,useMemo as m,useCallback as u}from"react";import*as c from"react-dom";import d from"@mui/material/Paper";import h from"@mui/material/MenuList";import p from"@mui/material/MenuItem";import f from"@mui/material/ListItemText";import x from"@mui/material/ListItemIcon";import $ from"@mui/icons-material/PersonAdd";import g from"@mui/material/Divider";import{createMentionNode as N}from"../nodes/MentionNode.js";import{useMentionLookupService as b}from"../hooks/useMentionLookupService.js";import{StatusAvatar as v}from"../../../StatusAvatar/StatusAvatar.container.js";const I="NexusRichTextMention",w={NAME:`\\b[A-Z][^\\s${o}]`,PUNCTUATION:o}.PUNCTUATION,A=["@"].join(""),P=`[^${A}${w}\\s]`,C=new RegExp(`(^|\\s|\\()([${A}]((?:${P}${`(?:\\.[ |$]| |[${w}]|)`}){0,75}))$`),L=new RegExp(`(^|\\s|\\()([${A}]((?:${P}){0,50}))$`);function M(e){return function(e,t){let r=C.exec(e);if(null===r&&(r=L.exec(e)),null!==r){const e=r[1],i=r[3];if(i.length>=t)return{leadOffset:r.index+e.length,matchingString:i,replaceableString:r[2]}}return null}(e,0)}class U extends a{constructor(e,t,r){super(e),Object.defineProperty(this,"id",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"name",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"user",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.id=e,this.name=t,this.user=r}}const j=a=>{const{allowedMentionUsers:o,onShare:w,t:A}=a,[P]=r(),[C,L]=l(null),j=b(C,o),O=i("/",{minLength:0}),S=m((()=>j.map((e=>new U(e.id,`${e.firstName||""} ${e.lastName||""}`.trim(),e))).slice(0,5)),[j]),T=u(((e,t,r)=>{P.update((()=>{const i=N(`@${e.name}`,e.user);t&&t.replace(i),i.select(),r()}))}),[P]),y=u((e=>null!==O(e,P)?null:M(e)),[O,P]);return e(n,{onQueryChange:L,onSelectOption:T,triggerFn:y,options:S,commandPriority:s,menuRenderFn:(r,{selectedIndex:i,selectOptionAndCleanUp:n,setHighlightedIndex:a})=>{if(r.current&&j.length){const o=r.current.getBoundingClientRect().top,s=45*(S.length+1)+25,l=window.innerHeight-o<s?o-s:"unset";return c.createPortal(e(d,{"data-testid":`${I}-root`,className:`${I}-root`,sx:{width:320,maxWidth:"100%",position:"fixed",zIndex:e=>e.zIndex.drawer+1,top:l},elevation:7,children:t(h,{"data-testid":`${I}-menuList`,className:`${I}-menuList`,children:[S.map(((r,o)=>r.user&&t(p,{"data-testid":`${I}-menuItem`,className:`${I}-menuItem`,selected:i===o,onClick:()=>{a(o),n(r)},onMouseEnter:()=>{a(o)},children:[e(x,{children:e(v,{firstName:r.user.firstName,lastName:r.user.lastName})}),e(f,{sx:{ml:4},children:`${r.user.firstName} ${r.user.lastName}`})]},o))),e(g,{},"divider"),t(p,{"data-testid":`${I}-shareWithAnotherUser`,className:`${I}-shareWithAnotherUser`,onClick:()=>{L(null),w?.()},children:[e(x,{children:e($,{})}),e(f,{sx:{ml:4},children:A("shareWithAnotherUser")})]},"share")]})}),r.current)}return null}})};export{j as MentionPlugin,M as getPossibleQueryMatch};