diff --git a/client/index.html b/client/index.html
index d785152..8c3b1b1 100644
--- a/client/index.html
+++ b/client/index.html
@@ -14,6 +14,8 @@
DebateMe
+
+
diff --git a/client/package-lock.json b/client/package-lock.json
index ec9521b..ff56656 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -8,6 +8,9 @@
"name": "client",
"version": "0.0.0",
"dependencies": {
+ "@syncfusion/ej2-base": "^26.1.37",
+ "@syncfusion/ej2-react-inputs": "^26.1.41",
+ "@syncfusion/ej2-react-richtexteditor": "^26.1.41",
"lottie-react": "^2.4.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
@@ -17,7 +20,6 @@
"zustand": "^4.5.1"
},
"devDependencies": {
- "@types/aos": "^3.0.7",
"@types/react": "^18.2.56",
"@types/react-dom": "^18.2.19",
"@typescript-eslint/eslint-plugin": "^7.0.2",
@@ -962,11 +964,245 @@
"integrity": "sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==",
"dev": true
},
- "node_modules/@types/aos": {
- "version": "3.0.7",
- "resolved": "https://registry.npmjs.org/@types/aos/-/aos-3.0.7.tgz",
- "integrity": "sha512-sEhyFqvKauUJZDbvAB3Pggynrq6g+2PS4XB3tmUr+mDL1gfDJnwslUC4QQ7/l8UD+LWpr3RxZVR/rHoZrLqZVg==",
- "dev": true
+ "node_modules/@syncfusion/ej2-base": {
+ "version": "26.1.37",
+ "resolved": "https://registry.npmjs.org/@syncfusion/ej2-base/-/ej2-base-26.1.37.tgz",
+ "integrity": "sha512-aDnABkOg+5Uw9SiORkCas8p+5/U+GWI0lL1czZJAwsJ1OGw3vN1zju6klwTX8prefOEh9/aQ67pmt2yepO00bg==",
+ "dependencies": {
+ "@syncfusion/ej2-icons": "~26.1.35"
+ },
+ "bin": {
+ "syncfusion-license": "bin/syncfusion-license.js"
+ }
+ },
+ "node_modules/@syncfusion/ej2-buttons": {
+ "version": "26.1.40",
+ "resolved": "https://registry.npmjs.org/@syncfusion/ej2-buttons/-/ej2-buttons-26.1.40.tgz",
+ "integrity": "sha512-ki4EOqm9A8FY6JMrEivdUz2etTNYoryfCUagVwRpArJtRcRK1VH83UGZuOrQD2osSo2BwD2TgIqmCp8d51iYKQ==",
+ "dependencies": {
+ "@syncfusion/ej2-base": "~26.1.37"
+ }
+ },
+ "node_modules/@syncfusion/ej2-calendars": {
+ "version": "26.1.41",
+ "resolved": "https://registry.npmjs.org/@syncfusion/ej2-calendars/-/ej2-calendars-26.1.41.tgz",
+ "integrity": "sha512-vgPu1ueZSncrVUk0y+x5q5bb7DxQDs1ogWzSZW4I2R8cRS2ufEmafBxKhThRYxIs+toA/dJpo4BT0lTlTnnjrw==",
+ "dependencies": {
+ "@syncfusion/ej2-base": "~26.1.37",
+ "@syncfusion/ej2-buttons": "~26.1.40",
+ "@syncfusion/ej2-inputs": "~26.1.41",
+ "@syncfusion/ej2-lists": "~26.1.35",
+ "@syncfusion/ej2-popups": "~26.1.41"
+ }
+ },
+ "node_modules/@syncfusion/ej2-compression": {
+ "version": "26.1.35",
+ "resolved": "https://registry.npmjs.org/@syncfusion/ej2-compression/-/ej2-compression-26.1.35.tgz",
+ "integrity": "sha512-gTWqnDC3321mLaUE/T1LfdZ+Pu5NhY7Y7GlOX3Q1lqWKqE9BQDaIkZx31TqtmwwCQ35i/ZOFdg0F93Kb3PM8dA==",
+ "dependencies": {
+ "@syncfusion/ej2-file-utils": "~26.1.35"
+ }
+ },
+ "node_modules/@syncfusion/ej2-data": {
+ "version": "26.1.41",
+ "resolved": "https://registry.npmjs.org/@syncfusion/ej2-data/-/ej2-data-26.1.41.tgz",
+ "integrity": "sha512-FYDfyVY/IN17vUmt6bDaSWDYe6xPFUiCE417MVj6GSzZMGSDyfNE76uf+QrKshDFc+3mcjER8SKyhpdWB0HW1Q==",
+ "dependencies": {
+ "@syncfusion/ej2-base": "~26.1.37"
+ }
+ },
+ "node_modules/@syncfusion/ej2-dropdowns": {
+ "version": "26.1.41",
+ "resolved": "https://registry.npmjs.org/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-26.1.41.tgz",
+ "integrity": "sha512-+jdkodDlYGGFjdY93DkFFdL2K3GN6/5uAgKM7CNb+EC8MkQ9wx50IAi5tXIGWqPVu56Qvpf5ByUcR7dXviV6MA==",
+ "dependencies": {
+ "@syncfusion/ej2-base": "~26.1.37",
+ "@syncfusion/ej2-data": "~26.1.41",
+ "@syncfusion/ej2-inputs": "~26.1.41",
+ "@syncfusion/ej2-lists": "~26.1.35",
+ "@syncfusion/ej2-navigations": "~26.1.41",
+ "@syncfusion/ej2-notifications": "~26.1.35",
+ "@syncfusion/ej2-popups": "~26.1.41"
+ }
+ },
+ "node_modules/@syncfusion/ej2-excel-export": {
+ "version": "26.1.35",
+ "resolved": "https://registry.npmjs.org/@syncfusion/ej2-excel-export/-/ej2-excel-export-26.1.35.tgz",
+ "integrity": "sha512-AlFYEBI97I0zjzGrVlqu18mux7TH6l7bSXNdWbjMf961tMSh/TkqjxkbsIWdUjqKz5M/6Vy7ElsnkjDGN1emIA==",
+ "dependencies": {
+ "@syncfusion/ej2-base": "~26.1.35",
+ "@syncfusion/ej2-compression": "~26.1.35"
+ }
+ },
+ "node_modules/@syncfusion/ej2-file-utils": {
+ "version": "26.1.35",
+ "resolved": "https://registry.npmjs.org/@syncfusion/ej2-file-utils/-/ej2-file-utils-26.1.35.tgz",
+ "integrity": "sha512-0aeFbfs1kL/UV/LV+jFeuY/63dN0N4z5xU7mhD+7W4wFyXH9S60rfgE/UawC+UFJAT7H+TrGdOGQ3ZfacQTEmQ=="
+ },
+ "node_modules/@syncfusion/ej2-filemanager": {
+ "version": "26.1.41",
+ "resolved": "https://registry.npmjs.org/@syncfusion/ej2-filemanager/-/ej2-filemanager-26.1.41.tgz",
+ "integrity": "sha512-VL+xIoc0H54Y6l/apOo8enxN+36RJo+aZqNbsLtHbIIwMhDjfmYrp5cNZFDQeFiMi/xO4kM3ANDuavoWXPq7pw==",
+ "dependencies": {
+ "@syncfusion/ej2-base": "~26.1.37",
+ "@syncfusion/ej2-buttons": "~26.1.40",
+ "@syncfusion/ej2-data": "~26.1.41",
+ "@syncfusion/ej2-grids": "~26.1.41",
+ "@syncfusion/ej2-inputs": "~26.1.41",
+ "@syncfusion/ej2-layouts": "~26.1.38",
+ "@syncfusion/ej2-lists": "~26.1.35",
+ "@syncfusion/ej2-navigations": "~26.1.41",
+ "@syncfusion/ej2-popups": "~26.1.41",
+ "@syncfusion/ej2-splitbuttons": "~26.1.35"
+ }
+ },
+ "node_modules/@syncfusion/ej2-grids": {
+ "version": "26.1.41",
+ "resolved": "https://registry.npmjs.org/@syncfusion/ej2-grids/-/ej2-grids-26.1.41.tgz",
+ "integrity": "sha512-fY7bAAzfuaffMRiWsgSbKlUdgDfuAsWmV6gpzzvyQscfnAFCtTbYeMlZ91lpv1+xIXXQqMxYFHYKP6tXVmrybg==",
+ "dependencies": {
+ "@syncfusion/ej2-base": "~26.1.37",
+ "@syncfusion/ej2-buttons": "~26.1.40",
+ "@syncfusion/ej2-calendars": "~26.1.41",
+ "@syncfusion/ej2-compression": "~26.1.35",
+ "@syncfusion/ej2-data": "~26.1.41",
+ "@syncfusion/ej2-dropdowns": "~26.1.41",
+ "@syncfusion/ej2-excel-export": "~26.1.35",
+ "@syncfusion/ej2-file-utils": "~26.1.35",
+ "@syncfusion/ej2-inputs": "~26.1.41",
+ "@syncfusion/ej2-lists": "~26.1.35",
+ "@syncfusion/ej2-navigations": "~26.1.41",
+ "@syncfusion/ej2-notifications": "~26.1.35",
+ "@syncfusion/ej2-pdf-export": "~26.1.35",
+ "@syncfusion/ej2-popups": "~26.1.41",
+ "@syncfusion/ej2-splitbuttons": "~26.1.35"
+ }
+ },
+ "node_modules/@syncfusion/ej2-icons": {
+ "version": "26.1.35",
+ "resolved": "https://registry.npmjs.org/@syncfusion/ej2-icons/-/ej2-icons-26.1.35.tgz",
+ "integrity": "sha512-rhaJDhN+vDBai+7xSw+xMnzAvLtG75vYoWvVA7wgUawA4boA4ODtkEgNYbMPJOEbtYaEQO7s3b7nzzWbXI3v+Q=="
+ },
+ "node_modules/@syncfusion/ej2-inputs": {
+ "version": "26.1.41",
+ "resolved": "https://registry.npmjs.org/@syncfusion/ej2-inputs/-/ej2-inputs-26.1.41.tgz",
+ "integrity": "sha512-+FgxU0xy32u1BC3LjJykvIIa5II/n8sGS81sOYt8deP+6k0tzyOll4KDX1xI5oCk1nm8OX8nVV8hDR/GsW0WWQ==",
+ "dependencies": {
+ "@syncfusion/ej2-base": "~26.1.37",
+ "@syncfusion/ej2-buttons": "~26.1.40",
+ "@syncfusion/ej2-popups": "~26.1.41",
+ "@syncfusion/ej2-splitbuttons": "~26.1.35"
+ }
+ },
+ "node_modules/@syncfusion/ej2-layouts": {
+ "version": "26.1.38",
+ "resolved": "https://registry.npmjs.org/@syncfusion/ej2-layouts/-/ej2-layouts-26.1.38.tgz",
+ "integrity": "sha512-qiJF7EjfC2fMUPFMB4kQjAjk+reFhK3DDj/xeSBitHk4uyJrSK6H5rfPIgSe/fcN2l5YxWSDBP2+Sk+pHPAWwg==",
+ "dependencies": {
+ "@syncfusion/ej2-base": "~26.1.37"
+ }
+ },
+ "node_modules/@syncfusion/ej2-lists": {
+ "version": "26.1.35",
+ "resolved": "https://registry.npmjs.org/@syncfusion/ej2-lists/-/ej2-lists-26.1.35.tgz",
+ "integrity": "sha512-XVLm+u11+63dpudZVrgrocK/DihYyAq9jTamfKQ1HkAV27gPTyilV+6ywizGmZmSystgMB+0YBKRDjqv85D1+A==",
+ "dependencies": {
+ "@syncfusion/ej2-base": "~26.1.35",
+ "@syncfusion/ej2-buttons": "~26.1.35",
+ "@syncfusion/ej2-data": "~26.1.35",
+ "@syncfusion/ej2-popups": "~26.1.35"
+ }
+ },
+ "node_modules/@syncfusion/ej2-navigations": {
+ "version": "26.1.41",
+ "resolved": "https://registry.npmjs.org/@syncfusion/ej2-navigations/-/ej2-navigations-26.1.41.tgz",
+ "integrity": "sha512-QzXvIdF3Oquy+xFGPXlosGd8VLjBj4wFPKeqXtza23IYZWJCkx6ViGUntLCqC14z8wqjK+kjpAGeNW9BP6toFA==",
+ "dependencies": {
+ "@syncfusion/ej2-base": "~26.1.37",
+ "@syncfusion/ej2-buttons": "~26.1.40",
+ "@syncfusion/ej2-data": "~26.1.41",
+ "@syncfusion/ej2-inputs": "~26.1.41",
+ "@syncfusion/ej2-lists": "~26.1.35",
+ "@syncfusion/ej2-popups": "~26.1.41"
+ }
+ },
+ "node_modules/@syncfusion/ej2-notifications": {
+ "version": "26.1.35",
+ "resolved": "https://registry.npmjs.org/@syncfusion/ej2-notifications/-/ej2-notifications-26.1.35.tgz",
+ "integrity": "sha512-R8r1Wbfo2saM/jqbPmCfuZ9Y1Uq6QCjjEQkSzz8fSA/slddutl67RfVWCbjg9aTGx64sQctXHO7r3GjFqfPUjQ==",
+ "dependencies": {
+ "@syncfusion/ej2-base": "~26.1.35",
+ "@syncfusion/ej2-buttons": "~26.1.35",
+ "@syncfusion/ej2-popups": "~26.1.35"
+ }
+ },
+ "node_modules/@syncfusion/ej2-pdf-export": {
+ "version": "26.1.35",
+ "resolved": "https://registry.npmjs.org/@syncfusion/ej2-pdf-export/-/ej2-pdf-export-26.1.35.tgz",
+ "integrity": "sha512-oGUGHR0x5Z/M3w4VXqfx75rZSuqeIzqsas4YCV3r0gFFn2Vj1m9OqTTgoTZaSuF6SFqiq4Jgoivai7LE/16lsw==",
+ "dependencies": {
+ "@syncfusion/ej2-compression": "~26.1.35"
+ }
+ },
+ "node_modules/@syncfusion/ej2-popups": {
+ "version": "26.1.41",
+ "resolved": "https://registry.npmjs.org/@syncfusion/ej2-popups/-/ej2-popups-26.1.41.tgz",
+ "integrity": "sha512-IO7eCu6b88lRwdOf6SVCyji51pPXNIrEjp6tZ1SBMj/yaA26jo6U1rvtJJdaEbzN1mOpHx+gUl4XQ4/w2AxUeg==",
+ "dependencies": {
+ "@syncfusion/ej2-base": "~26.1.37",
+ "@syncfusion/ej2-buttons": "~26.1.40"
+ }
+ },
+ "node_modules/@syncfusion/ej2-react-base": {
+ "version": "26.1.35",
+ "resolved": "https://registry.npmjs.org/@syncfusion/ej2-react-base/-/ej2-react-base-26.1.35.tgz",
+ "integrity": "sha512-TTSvdHLKFtCsuZ+lWrWXpUcz04sH5D+K+j4vuDGm/qZ9kGiQfGZKNkSkfQYHRyrquyU8zadeZzTDsLUZCR7THA==",
+ "dependencies": {
+ "@syncfusion/ej2-base": "~26.1.35"
+ }
+ },
+ "node_modules/@syncfusion/ej2-react-inputs": {
+ "version": "26.1.41",
+ "resolved": "https://registry.npmjs.org/@syncfusion/ej2-react-inputs/-/ej2-react-inputs-26.1.41.tgz",
+ "integrity": "sha512-Iu2qNcNPIbsKMg2yUAHsiUXeu+GMWz7e69Jtk4xZq2x6pg6GC6d/sMATkHDwH7r0wFjUP2SqGSVZWwOyKjBzKg==",
+ "dependencies": {
+ "@syncfusion/ej2-base": "~26.1.37",
+ "@syncfusion/ej2-inputs": "26.1.41",
+ "@syncfusion/ej2-react-base": "~26.1.35"
+ }
+ },
+ "node_modules/@syncfusion/ej2-react-richtexteditor": {
+ "version": "26.1.41",
+ "resolved": "https://registry.npmjs.org/@syncfusion/ej2-react-richtexteditor/-/ej2-react-richtexteditor-26.1.41.tgz",
+ "integrity": "sha512-HPvwhZ9egpCXFP8fL22EUi9/+5dQETg5+ffR24zlQMcHyTAWS3bN4gTvTBZ6leX+b3PUc4XEEDsJGEbsmA+3Wg==",
+ "dependencies": {
+ "@syncfusion/ej2-base": "~26.1.37",
+ "@syncfusion/ej2-react-base": "~26.1.35",
+ "@syncfusion/ej2-richtexteditor": "26.1.41"
+ }
+ },
+ "node_modules/@syncfusion/ej2-richtexteditor": {
+ "version": "26.1.41",
+ "resolved": "https://registry.npmjs.org/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-26.1.41.tgz",
+ "integrity": "sha512-u38Kv3j1t3V1ZwblaqgO1zg9O3U2hfP7AwCYpl+QyAXHByuA41LSgGgMrg9NSLcW5ewi/KE9apTYUot8QCHveQ==",
+ "dependencies": {
+ "@syncfusion/ej2-base": "~26.1.37",
+ "@syncfusion/ej2-buttons": "~26.1.40",
+ "@syncfusion/ej2-filemanager": "~26.1.41",
+ "@syncfusion/ej2-inputs": "~26.1.41",
+ "@syncfusion/ej2-navigations": "~26.1.41",
+ "@syncfusion/ej2-popups": "~26.1.41",
+ "@syncfusion/ej2-splitbuttons": "~26.1.35"
+ }
+ },
+ "node_modules/@syncfusion/ej2-splitbuttons": {
+ "version": "26.1.35",
+ "resolved": "https://registry.npmjs.org/@syncfusion/ej2-splitbuttons/-/ej2-splitbuttons-26.1.35.tgz",
+ "integrity": "sha512-c+iUzD+9rvbriglYzQGJRFAijZ0vRHxnsUNo5whSdDoQCjZnE8avuz/6cJpkY/HyGNIzTpDEayQXB4Z+JgMRqw==",
+ "dependencies": {
+ "@syncfusion/ej2-base": "~26.1.35",
+ "@syncfusion/ej2-popups": "~26.1.35"
+ }
},
"node_modules/@types/estree": {
"version": "1.0.5",
diff --git a/client/package.json b/client/package.json
index 6bffc6f..9544df8 100644
--- a/client/package.json
+++ b/client/package.json
@@ -11,6 +11,9 @@
"preview": "vite preview"
},
"dependencies": {
+ "@syncfusion/ej2-base": "^26.1.37",
+ "@syncfusion/ej2-react-inputs": "^26.1.41",
+ "@syncfusion/ej2-react-richtexteditor": "^26.1.41",
"lottie-react": "^2.4.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
@@ -20,7 +23,6 @@
"zustand": "^4.5.1"
},
"devDependencies": {
- "@types/aos": "^3.0.7",
"@types/react": "^18.2.56",
"@types/react-dom": "^18.2.19",
"@typescript-eslint/eslint-plugin": "^7.0.2",
diff --git a/client/src/pages/create-debate/index.tsx b/client/src/pages/create-debate/index.tsx
index 948b535..4ee9f50 100644
--- a/client/src/pages/create-debate/index.tsx
+++ b/client/src/pages/create-debate/index.tsx
@@ -1,5 +1,136 @@
-export default function CreateDebatePage() {
+import "./style.css"
+import { useRef } from "react"
+import {
+ RichTextEditorComponent,
+ Toolbar,
+ Inject,
+ Image,
+ Link,
+ HtmlEditor,
+ Count,
+ QuickToolbar,
+ Table,
+ EmojiPicker,
+ Video,
+ Audio,
+ FormatPainter,
+ PasteCleanup
+} from "@syncfusion/ej2-react-richtexteditor"
+
+function CreateDebatePage() {
+ const editorRef = useRef(null);
+ // const [editorContent, setEditorContent] = useState('');
+ const rteValue = ``;
+ const hostUrl = 'https://services.syncfusion.com/react/production/';
+ 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 insertImageSettings = {
+ saveUrl: hostUrl + 'api/RichTextEditor/SaveFile',
+ removeUrl: hostUrl + 'api/RichTextEditor/DeleteFile',
+ path: hostUrl + 'RichTextEditor/',
+ };
+
+ // const saveEditorContent = () => {
+ // if (editorRef.current) {
+ // const content = editorRef.current.value;
+ // setEditorContent(content);
+ // }
+ // };
+
return (
-
- )
-}
\ No newline at end of file
+
+ );
+}
+
+export default CreateDebatePage;
\ No newline at end of file
diff --git a/client/src/pages/create-debate/style.css b/client/src/pages/create-debate/style.css
new file mode 100644
index 0000000..c76ea30
--- /dev/null
+++ b/client/src/pages/create-debate/style.css
@@ -0,0 +1,11 @@
+.e-rte-container {
+ margin-top: 40px;
+ height: calc(100dvh - 40px - 40px) !important;
+}
+
+@media screen and (max-width: 480px) {
+ .e-rte-container {
+ margin-top: 60px;
+ height: calc(100dvh - 70px - 70px - 60px) !important;
+ }
+}
\ No newline at end of file