@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.37 kB
JavaScript
import{jsx as t,jsxs as a}from"react/jsx-runtime";import{CONTROLLED_TEXT_INSERTION_COMMAND as e}from"lexical";import{useLexicalComposerContext as i}from"@lexical/react/LexicalComposerContext";import{useLexicalIsTextContentEmpty as o}from"@lexical/react/useLexicalIsTextContentEmpty";import l from"@mui/material/Stack";import n from"@mui/icons-material/AlternateEmail";import r from"@mui/icons-material/Send";import m from"@mui/icons-material/Link";import s from"@mui/icons-material/LocalOfferOutlined";import c from"@mui/icons-material/AttachFile";import d from"@mui/icons-material/Close";import p from"@mui/material/IconButton";import f from"@mui/material/Tooltip";import{useRef as u,useMemo as h}from"react";import x from"@mui/material/Divider";import{TOGGLE_INSERT_LINK_MODAL_COMMAND as C,TOGGLE_ADD_TAGS_COMMAND as g,TOGGLE_ATTACH_FILE_COMMAND as k}from"../command/index.js";import{ACCEPTABLE_IMAGE_TYPES as S}from"./AttachmentsPlugin.js";import{ActionGroup as y}from"../../../ActionGroup/ActionGroup.container.js";const $="NexusRichTextToolbar",b=b=>{const{state:T,onSave:z,onCancel:L,isDataChanged:A,hasAttachments:j,acceptableMimeTypes:v=S,max:F=5,moreActions:N,defaultExpanded:w=!1,t:B}=b,[E]=i(),I=o(E)&&!j,D=u(null),G=t=>({color:"grey.600",...t.applyStyles("dark",{color:"grey.400"})}),O=()=>{z?.(E)},P=h((()=>({tagSomeone:B("Tag someone"),insertLink:B("insertLink"),attachFile:B("attachFile"),addTags:B("addTags"),send:B("addComment"),save:B("Save"),cancel:B("Cancel")})),[B]),M=h((()=>[{label:P.tagSomeone,icon:t(n,{fontSize:"small",sx:G}),"data-testid":`${$}-tagSomeone`,className:`${$}-tagSomeone`,onClick:()=>{E.focus(),E.dispatchCommand(e,I?"@":" @")}},{label:P.attachFile,icon:t(c,{fontSize:"small",sx:G}),"data-testid":`${$}-attachFile`,className:`${$}-attachFile`,onClick:()=>{D.current&&D.current.click()}},{label:P.insertLink,icon:t(m,{fontSize:"small",sx:G}),"data-testid":`${$}-insertLink`,className:`${$}-insertLink`,onClick:()=>{E.focus(),E.dispatchCommand(C,"")}},{label:P.addTags,icon:t(s,{fontSize:"small",sx:G}),"data-testid":`${$}-addTags`,className:`${$}-addTags`,onClick:()=>{E.focus(),E.dispatchCommand(g,!0)}}]),[P,E,I]),R=h((()=>N&&N.length>0?[...M,...N.map((t=>({...t,onClick:a=>{t?.onClick(a,E)}})))]:M),[N,M,E]);return a(l,{sx:{display:"edit"===T||!I||w?"normal":"none",height:"40px"},className:`${$}-root`,"data-testid":`${$}-root`,children:[t(x,{}),a(l,{direction:"row",justifyContent:"space-between",alignItems:"center",flex:1,sx:{px:1.5},children:[t(y,{actions:R,max:F,size:"small",moreActionsTooltipProps:{title:B("moreTools")}}),t("input",{type:"file",multiple:!0,accept:v.map((t=>t.endsWith("/")?`${t}*`:t)).join(),style:{display:"none"},id:"file-upload",ref:D,onChange:t=>{E.focus(),E.dispatchCommand(k,t)}}),"add"===T?t(p,{disabled:I,color:"primary","aria-label":P.send,"data-testid":`${$}-sendButton`,onClick:O,children:t(r,{})}):a(l,{"data-testid":"edit-buttons",direction:"row",justifyContent:"flex-end",children:[t(f,{title:P.cancel,arrow:!0,children:t(p,{size:"small","aria-label":P.cancel,"data-testid":`${$}-cancelButton`,onClick:L,children:t(d,{fontSize:"small"})})}),t(f,{title:P.save,arrow:!0,children:t("span",{children:t(p,{size:"small",color:"primary","aria-label":P.save,"data-testid":`${$}-saveButton`,disabled:!A||I,onClick:O,children:t(r,{fontSize:"small"})})})})]})]})]})};export{b as ToolbarPlugin};