@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) • 4.48 kB
JavaScript
import{jsx as t,jsxs as o}from"react/jsx-runtime";import{useState as e,useRef as i,useEffect as n,useMemo as a}from"react";import{LexicalComposer as r}from"@lexical/react/LexicalComposer";import{RichTextPlugin as l}from"@lexical/react/LexicalRichTextPlugin";import{ContentEditable as m}from"@lexical/react/LexicalContentEditable";import{OnChangePlugin as s}from"@lexical/react/LexicalOnChangePlugin";import{ClearEditorPlugin as c}from"@lexical/react/LexicalClearEditorPlugin";import d from"@lexical/react/LexicalErrorBoundary";import{HistoryPlugin as p}from"@lexical/react/LexicalHistoryPlugin";import{AutoFocusPlugin as g}from"@lexical/react/LexicalAutoFocusPlugin";import u from"@mui/material/Box";import{useTheme as f}from"@mui/material/styles";import{CLEAR_EDITOR_COMMAND as x}from"lexical";import h from"@mui/icons-material/Send";import b from"@mui/material/Stack";import{ToolbarPlugin as C}from"./plugins/ToolbarPlugin.js";import{MentionPlugin as y}from"./plugins/MentionPlugin.js";import{KeyboardPlugin as j}from"./plugins/KeyboardPlugin.js";import{AutoLinkPlugin as S}from"./plugins/AutoLinkPlugin.js";import{LinkPlugin as A}from"./plugins/LinkPlugin.js";import{InsertLinkPlugin as P}from"./plugins/InsertLinkPlugin.js";import{TagsPlugin as E}from"./plugins/TagsPlugin.js";import{ReadOnlyContentEditable as L}from"./plugins/ReadonlyContentEditable.js";import{sharedEditorConfig as T,sharedSxProps as v}from"./CommentRichTextConfig.js";import{useTranslate as M}from"../../locales/index.js";import N from"../locale.json.js";import{convertNodes as O}from"./utils/url.js";import{AttachmentsPlugin as R}from"./plugins/AttachmentsPlugin.js";import{TOGGLE_ADD_TAGS_COMMAND as w}from"./command/index.js";const B="NexusCommentRichTextInput",I=I=>{const{initialComment:k,initialAttachments:J,initialTags:$,initialMetadata:D,state:H="add",placeholder:V,onSave:z,onCancel:F,onCommentChange:K,richTextConfig:q,autofocus:G,disabled:Q,sx:U,...W}=I,[X,Y]=e(),[Z,_]=e(J||[]),[tt,ot]=e($||[]),[et,it]=e(D),[nt,at]=e(!k),[rt,lt]=e(!1),mt=M(N),st=i(),ct=i(),dt=f(),pt=q?.toolbox?.defaultExpanded,gt={...T,namespace:"MyEditor",editorState:k,editable:!0};n((()=>{if(K){let t=k||"";if(X){const o=X.toJSON();t=JSON.stringify(o)}K?.(t,Z,tt,et)}}),[X,k,Z,tt,et,K]),n((()=>{at(!!st.current)}),[X]);const ut=t=>{if(k||X||Z.length>0){let o=k||"",e=!0;if(X){const t=O(X?.toJSON());o=JSON.stringify(t)}q?.onValidBeforeSubmit&&(e=q.onValidBeforeSubmit(o,Z,tt,et)),e&&(z?.(o,Z,tt,et),_([]),ot([]),it(void 0),Y(void 0),lt(!1),t.dispatchCommand(x,void 0),t.dispatchCommand(w,!1))}},ft=q?.plugin?.InputMetaPlugin,xt=a((()=>q?.toolbox?.moreActions?"function"==typeof q.toolbox.moreActions?q.toolbox.moreActions(H,et):q.toolbox.moreActions:[]),[q,H,et]);return t(u,{sx:[{border:"1px solid",borderColor:Q?"action.disabled":"grey.100",borderRadius:1,outline:"none",width:"100%","& .NexusCommentRichTextInput-contentEditable":{p:3,outline:"none",width:"100%","&:after":{content:"attr(data-placeholder)",position:"absolute",color:"text.secondary",pointerEvents:"none",top:"12px",fontSize:"12px",lineHeight:"16px"}},"&:hover":{borderColor:Q?"action.disabled":"text.primary"},"&:focus-within":{borderColor:"primary.main",boxShadow:`0 0 0 1px ${dt.vars.palette.primary.main}`},...v},...Array.isArray(U)?U:[U]],ref:ct,...W,children:o(r,{initialConfig:gt,children:[t(b,{direction:"row",position:"relative",children:t(l,{contentEditable:t(Q?L:m,{"data-placeholder":nt?V:"",className:`${B}-contentEditable`,"data-testid":`${B}-contentEditable`}),ErrorBoundary:d,placeholder:"edit"===H||Z.length>0||tt.length>0||et?null:t(u,{ref:st,sx:{display:"flex",flexDirection:"row",alignItems:"center",mr:3},children:!pt&&t(h,{"data-testid":`${B}-send`,sx:{color:"action.disabled"}})})})}),ft&&t(ft,{boxRef:ct,metadata:et,onMetadataChange:t=>{it(t),lt(!0)}}),t(R,{editable:!0,attachments:Z,onAttachmentsChange:t=>{_(t),lt(!0)},...q?.attachment,t:mt}),t(E,{ref:ct,t:mt,tags:tt,tagOptions:q?.tag?.tagOptions,onTagsChange:t=>{ot(t),lt(!0)},mode:"edit"}),t(C,{onSave:ut,onCancel:F,state:H,t:mt,isDataChanged:rt,acceptableMimeTypes:q?.attachment?.acceptableMimeTypes,hasAttachments:Z.length>0||tt.length>0||!!et,...q?.toolbox,moreActions:xt}),t(p,{}),G&&t(g,{defaultSelection:"rootEnd"}),t(y,{...q?.mention,t:mt}),t(A,{}),t(S,{}),t(P,{ref:ct,t:mt}),t(j,{onSave:ut,isDataChanged:rt,hasAttachments:Z.length>0||tt.length>0||!!et}),t(s,{ignoreSelectionChange:!0,onChange:t=>{Y(t),lt(!0)}}),t(c,{})]})})};export{I as CommentRichTextInput};