Skip to content

Commit

Permalink
client: refactor editor component
Browse files Browse the repository at this point in the history
  • Loading branch information
@Shubham-Lal
Shubham-Lal committed Jul 12, 2024
1 parent 70b5c5f commit 106361e
Show file tree
Hide file tree
Showing 3 changed files with 189 additions and 111 deletions.
117 changes: 117 additions & 0 deletions client/src/pages/create-debate/editor.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
import {
RichTextEditorComponent,
Toolbar,
Inject,
Image,
Link,
HtmlEditor,
Count,
QuickToolbar,
Table,
EmojiPicker,
Video,
Audio,
FormatPainter,
PasteCleanup,
Resize,
} from "@syncfusion/ej2-react-richtexteditor"

interface EditorProps {
editorRef: React.RefObject<RichTextEditorComponent>
rteValue: string
}

const Editor: React.FC<EditorProps> = ({ editorRef, rteValue }) => {
const items = [
'Undo',
'Redo',
'|',
'Bold',
'Italic',
'Underline',
'StrikeThrough',
'SuperScript',
'SubScript',
'|',
'FontName',
'FontSize',
'FontColor',
'BackgroundColor',
'|',
'LowerCase',
'UpperCase',
'|',
'Formats',
'Alignments',
'Blockquote',
'|',
'NumberFormatList',
'BulletFormatList',
'|',
'Outdent',
'Indent',
'|',
'CreateLink',
'Image',
'Video',
'Audio',
'CreateTable',
'|',
'FormatPainter',
'ClearFormat',
'|',
'EmojiPicker',
];
const toolbarSettings = {
items: items,
};
const quickToolbarSettings = {
table: [
'TableHeader',
'TableRows',
'TableColumns',
'TableCell',
'-',
'BackgroundColor',
'TableRemove',
'TableCellVerticalAlign',
'Styles',
],
showOnRightClick: true,
};

return (
<RichTextEditorComponent
id="toolsRTE"
ref={editorRef}
value={rteValue}
showCharCount={true}
toolbarSettings={toolbarSettings}
quickToolbarSettings={quickToolbarSettings}
enableTabKey={true}
enableXhtml={true}
placeholder="Your debate body"
enableResize={true}
>
<Inject
services={[
Toolbar,
Image,
Link,
HtmlEditor,
Count,
QuickToolbar,
Table,
EmojiPicker,
Video,
Audio,
FormatPainter,
PasteCleanup,
Resize
]}
/>
</RichTextEditorComponent>
)
}

export default Editor
128 changes: 20 additions & 108 deletions client/src/pages/create-debate/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,83 +1,11 @@
import "./style.css"
import { useRef, useState } from "react"
import {
RichTextEditorComponent,
Toolbar,
Inject,
Image,
Link,
HtmlEditor,
Count,
QuickToolbar,
Table,
EmojiPicker,
Video,
Audio,
FormatPainter,
PasteCleanup,
} from "@syncfusion/ej2-react-richtexteditor"
import { RichTextEditorComponent } from "@syncfusion/ej2-react-richtexteditor"
import Editor from "./editor";

function CreateDebatePage() {
const editorRef = useRef<RichTextEditorComponent>(null);
const [editorContent, setEditorContent] = useState<string>('');
const rteValue = ``;
const items = [
'Undo',
'Redo',
'|',
'Bold',
'Italic',
'Underline',
'StrikeThrough',
'SuperScript',
'SubScript',
'|',
'FontName',
'FontSize',
'FontColor',
'BackgroundColor',
'|',
'LowerCase',
'UpperCase',
'|',
'Formats',
'Alignments',
'Blockquote',
'|',
'NumberFormatList',
'BulletFormatList',
'|',
'Outdent',
'Indent',
'|',
'CreateLink',
'Image',
'Video',
'Audio',
'CreateTable',
'|',
'FormatPainter',
'ClearFormat',
'|',
'EmojiPicker',
];
const toolbarSettings = {
items: items,
};
const quickToolbarSettings = {
table: [
'TableHeader',
'TableRows',
'TableColumns',
'TableCell',
'-',
'BackgroundColor',
'TableRemove',
'TableCellVerticalAlign',
'Styles',
],
showOnRightClick: true,
};

const saveEditorContent = () => {
if (editorRef.current) {
Expand All @@ -87,41 +15,25 @@ function CreateDebatePage() {
}; console.log(editorContent);

return (
<div className="control-pane">
<div className="control-section" id="rteTools">
<div className="rte-control-section">
<RichTextEditorComponent
id="toolsRTE"
ref={editorRef}
value={rteValue}
showCharCount={true}
toolbarSettings={toolbarSettings}
quickToolbarSettings={quickToolbarSettings}
enableTabKey={true}
enableXhtml={true}
placeholder="Type something here..."
>
<Inject
services={[
Toolbar,
Image,
Link,
HtmlEditor,
Count,
QuickToolbar,
Table,
EmojiPicker,
Video,
Audio,
FormatPainter,
PasteCleanup,
]}
/>
</RichTextEditorComponent>
</div>
<form id='create'>
<div className='vertical-space'>
<h2>Title</h2>
<textarea
className='title__input'
placeholder='Your debate topic'
/>
</div>
{/* <button onClick={saveEditorContent}>Save</button> */}
</div>
<div className='vertical-space'>
<h2>Body</h2>
<Editor
editorRef={editorRef}
rteValue=""
/>
</div>
<div>
<button type='button' onClick={saveEditorContent}></button>
</div>
</form>
);
}

Expand Down
55 changes: 52 additions & 3 deletions client/src/pages/create-debate/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,48 @@
#create {
display: flex;
flex-direction: column;
gap: 20px;
}

#create h1,
#create h2 {
font-weight: 500;
}

#create .title__input {
min-height: 56px;
resize: vertical;
padding: 5px 10px;
font-family: inherit;
font-size: 17px;
border: 1px solid #dee2e6;
border-radius: 5px;
}

#create .vertical-space {
display: flex;
flex-direction: column;
gap: 8px;
}

.e-rte-content {
border-radius: 20px !important;
}

.e-rte-container {
height: calc(100dvh - 40px) !important;
border: none;
}

.e-richtexteditor {
min-width: 100%;
max-width: 100%;
min-height: 50vh !important;
border: 1px solid #dee2e6;
}

.e-richtexteditor .e-toolbar-wrapper.e-rte-tb-float,
.e-richtexteditor .e-toolbar-container.e-rte-tb-float {
top: -20px !important;
}

.e-richtexteditor .e-toolbar-wrapper {
Expand All @@ -15,8 +58,14 @@
padding-top: 0 !important;
}

.e-richtexteditor .e-resize-handle.e-south-east {
cursor: ns-resize;
}

@media screen and (max-width: 480px) {
.e-rte-container {
height: calc(100dvh - 70px - 70px) !important;

.e-richtexteditor .e-toolbar-wrapper.e-rte-tb-float,
.e-richtexteditor .e-toolbar-container.e-rte-tb-float {
top: -70px !important;
}
}

0 comments on commit 106361e

Please sign in to comment.