wcrisman/Tempest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switched to Lexican Rich Text editor. Got editor working. Need to test signup.

Browse Source
This commit is contained in:
DESKTOP-C9V2M01\Zeeri
2022-10-31 08:28:20 -07:00
parent cab09e59b9
commit 8196c02b4e
8 changed files with 285 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
imports/api/workshops.js
View File

@@ -27,7 +27,10 @@ if(Meteor.isServer) {
Meteor.methods({
'workshops.add'(name, description, signupLimit) {
let signupSheet = [];
console.log(name)
console.log(description)
console.log(signupLimit)
check(name, String);
check(description, Match.Maybe(String));
// Match a positive integer or undefined/null.

2
imports/ui/components/RichText/Editor.jsx
View File

@@ -96,7 +96,7 @@ export const Editor = (props) => {
// <LinkPlugin/>
// <MarkdownShortcutPlugin/>
// </LexicalComposer>
<EditorComposer>
<InternalEditor hashtagsEnabled={true} onChange={props.onChange} initialEditorState={props.state}>
<ToolbarPlugin defaultFontSize="20px">

89
imports/ui/pages/Student/WorkshopList.jsx
View File

@@ -117,54 +117,63 @@ export const WorkshopList = () => {
const lexicalComposerTheme = {
}
const lexicalComposerChanged = (e) => {
console.log(e)
const editorChanged = (content, editor) => {
console.log(content)
console.log(editor)
}
const descriptionEditorNodes = [LinkNode]
return (
<>
<Dialog open={openWorkshopEditor} onClose={workshopEditorClosed}>
<DialogTitle>Workshop Editor</DialogTitle>
<DialogContent style={{display: 'flex', flexDirection: 'column'}}>
<TextField style={{marginTop: '1rem',minWidth: '30rem'}} variant="standard" label="Name" value={editedName} onChange={(e) => {setEditedName(e.target.value)}}/>
<Editor config={{namespace: 'WorkshopDescriptionEditor', state: selectedWorkshop ? selectedWorkshop.description : "", theme: lexicalComposerTheme}}></Editor>
<TextField style={{marginTop: '1rem',minWidth: '30rem'}} variant="standard" type="number" label="Signup Limit" value={editedSignupLimit} onChange={(e) => {setEditedSignupLimit(e.target.value)}}/>
</DialogContent>
<DialogActions>
{openWorkshopEditor ? (
<>
<h1>Workshop Editor</h1>
<Box style={{display: 'flex', flexDirection: 'column'}}>
<TextField style={{marginTop: '1rem',minWidth: '30rem', maxWidth: '50rem'}} variant="standard" label="Name" value={editedName} onChange={(e) => {setEditedName(e.target.value)}}/>
<TextField style={{marginTop: '1rem',minWidth: '30rem', maxWidth: '50rem'}} variant="standard" type="number" label="Signup Limit" value={editedSignupLimit} onChange={(e) => {setEditedSignupLimit(e.target.value)}}/>
<Box style={{marginTop: '2rem'}}>
<InputLabel>Description</InputLabel>
<Box style={{border: "1px solid black"}}>
<Editor namespace='WorkshopDescriptionEditor' state={selectedWorkshop ? selectedWorkshop.description : ""} theme={lexicalComposerTheme} onChange={editorChanged}/>
</Box>
</Box>
</Box>
<Button onClick={() => workshopEditorClosed(true)}>Save</Button>
<Button onClick={() => workshopEditorClosed(false)}>Cancel</Button>
</DialogActions>
</Dialog>
<Box style={{marginTop: '1rem',...cssTwoColumnContainer}}>
{isAdmin && <Button onClick={() => newWorkshop()}>New...</Button>}
<List>
{workshops.map((next, i) => {
return (
<ListItemButton key={next._id} onDoubleClick={editWorkshop} style={getListItemStyle(next)} selected={selectedWorkshop === next} onClick={(e) => {setSelectedWorkshop(next)}}>
<ListItemText primary={next.name}/>
</ListItemButton>
)
})}
</List>
</Box>
</>
) : (
<>
<Box style={{marginTop: '1rem',...cssTwoColumnContainer}}>
{isAdmin && <Button onClick={() => newWorkshop()}>New...</Button>}
<List>
{workshops.map((next, i) => {
return (
<ListItemButton key={next._id} onDoubleClick={editWorkshop} style={getListItemStyle(next)} selected={selectedWorkshop === next} onClick={(e) => {setSelectedWorkshop(next)}}>
<ListItemText primary={next.name}/>
</ListItemButton>
)
})}
</List>
</Box>
<Box style={{...cssTwoColumnContainer}}>
<Paper>
{/*<Editor editorState={selectedWorkshop.description} toolbarClassName="editorToolbar" wrapperClassName="editorWrapper" editorClassName="editor" onEditorStateChange={(e) => {selectedWorkshop.description = ""}}/>*/}
{selectedWorkshop && `${selectedWorkshop.description}`}
</Paper>
<List>
{selectedWorkshop && selectedWorkshop.signupSheet.map((next, i) => {
return (
<ListItem key={next._id}>
<ListItemText primary={next.data.firstName + " " + next.data.lastName} secondary={next.data.email}/>
</ListItem>
)
})}
</List>
</Box>
<Box style={{...cssTwoColumnContainer}}>
<Paper>
{/*<Editor editorState={selectedWorkshop.description} toolbarClassName="editorToolbar" wrapperClassName="editorWrapper" editorClassName="editor" onEditorStateChange={(e) => {selectedWorkshop.description = ""}}/>*/}
{selectedWorkshop && `${selectedWorkshop.description}`}
</Paper>
<List>
{selectedWorkshop && selectedWorkshop.signupSheet.map((next, i) => {
return (
<ListItem key={next._id}>
<ListItemText primary={next.data.firstName + " " + next.data.lastName} secondary={next.data.email}/>
</ListItem>
)
})}
</List>
</Box>
</>
)}
</>
)
}