Skip to content

Commit

Permalink
added rich editor component (#164)
Browse files Browse the repository at this point in the history
  • Loading branch information
victorzheng02 authored Oct 11, 2023
1 parent bd76d11 commit 5ef127e
Show file tree
Hide file tree
Showing 7 changed files with 1,280 additions and 140 deletions.
17 changes: 17 additions & 0 deletions backend/models/comment.model.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
const mongoose = require('mongoose')
const { Schema } = mongoose

const CommentSchema = new Schema(
{
// reference_code would be parent ticket here
reference_code: { type: String, index: true },
commment: { type: String },
},
{
timestamps: true,
}
)

const Comment = mongoose.model('Comment', CommentSchema)

module.exports = Comment
939 changes: 801 additions & 138 deletions frontend/package-lock.json

Large diffs are not rendered by default.

9 changes: 7 additions & 2 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,11 @@
"dependencies": {
"@chakra-ui/icons": "^2.1.0",
"@chakra-ui/react": "^2.4.4",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@emotion/css": "^11.11.2",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.12",
"@mui/material": "^5.14.12",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
Expand All @@ -27,6 +30,8 @@
"react-router-dom": "^6.6.1",
"react-scripts": "5.0.1",
"recoil": "^0.7.7",
"slate-history": "^0.93.0",
"slate-react": "^0.99.0",
"web-vitals": "^2.1.4"
},
"scripts": {
Expand Down
4 changes: 4 additions & 0 deletions frontend/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Expand Down
125 changes: 125 additions & 0 deletions frontend/src/components/CommentSection.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
// modified version of https://github.com/ianstormtaylor/slate/blob/main/site/examples/richtext.tsx
import React, { useCallback, useMemo } from 'react'
import isHotkey from 'is-hotkey'
import { Editable, withReact, useSlate, Slate } from 'slate-react'
import {
Editor,
Transforms,
createEditor,
Element as SlateElement,
} from 'slate'
import { withHistory } from 'slate-history'

import {
BlockButton,
Button,
Element,
Icon,
Leaf,
MarkButton,
TEXT_ALIGN_TYPES,
Toolbar,
isBlockActive,
isMarkActive,
toggleBlock,
toggleMark,
} from './SlateComponents'
import { Box, Heading } from '@chakra-ui/react'

const HOTKEYS = {
'mod+b': 'bold',
'mod+i': 'italic',
'mod+u': 'underline',
'mod+`': 'code',
}

const CommentSection = () => {
const renderElement = useCallback((props) => <Element {...props} />, [])
const renderLeaf = useCallback((props) => <Leaf {...props} />, [])
const editor = useMemo(() => withHistory(withReact(createEditor())), [])

return (
<Box mt="20px">
<Heading textAlign="center">Comment Section </Heading>
<Slate editor={editor} initialValue={initialValue}>
<Toolbar>
<MarkButton format="bold" icon="format_bold" />
<MarkButton format="italic" icon="format_italic" />
<MarkButton format="underline" icon="format_underlined" />
<MarkButton format="code" icon="code" />
<BlockButton format="heading-one" icon="looks_one" />
<BlockButton format="heading-two" icon="looks_two" />
<BlockButton format="block-quote" icon="format_quote" />
<BlockButton
format="numbered-list"
icon="format_list_numbered"
/>
<BlockButton
format="bulleted-list"
icon="format_list_bulleted"
/>
<BlockButton format="left" icon="format_align_left" />
<BlockButton format="center" icon="format_align_center" />
<BlockButton format="right" icon="format_align_right" />
<BlockButton format="justify" icon="format_align_justify" />
</Toolbar>
<Editable
renderElement={renderElement}
renderLeaf={renderLeaf}
placeholder="Enter some rich text…"
spellCheck
autoFocus
onKeyDown={(event) => {
for (const hotkey in HOTKEYS) {
if (isHotkey(hotkey, event)) {
event.preventDefault()
const mark = HOTKEYS[hotkey]
toggleMark(editor, mark)
}
}
}}
/>
</Slate>
</Box>
)
}

// example taken from https://github.com/ianstormtaylor/slate/blob/main/site/components.tsx
// remove once dynamically fetched from backend
const initialValue = [
{
type: 'paragraph',
children: [
{ text: 'This is editable ' },
{ text: 'rich', bold: true },
{ text: ' text, ' },
{ text: 'much', italic: true },
{ text: ' better than a ' },
{ text: '<textarea>', code: true },
{ text: '!' },
],
},
{
type: 'paragraph',
children: [
{
text: "Since it's rich text, you can do things like turn a selection of text ",
},
{ text: 'bold', bold: true },
{
text: ', or add a semantically rendered block quote in the middle of the page, like this:',
},
],
},
{
type: 'block-quote',
children: [{ text: 'A wise quote.' }],
},
{
type: 'paragraph',
align: 'center',
children: [{ text: 'Try it out for yourself!' }],
},
]

export default CommentSection
Loading

0 comments on commit 5ef127e

Please sign in to comment.