client: refactor editor component

Casuals4Fun · Jul 12, 2024 · 9221886 · 9221886
2 parents 0dcd9b2 + 106361e
commit 9221886
Show file tree

Hide file tree

Showing 9 changed files with 705 additions and 662 deletions.
diff --git a/client/.env.example b/client/.env.example
@@ -1 +1,2 @@
-VITE_SERVER_URL=http://localhost:5000
+VITE_SERVER_URL=http://localhost:5000
+VITE_SYNCFUSION_KEY=''
diff --git a/client/index.html b/client/index.html
@@ -15,7 +15,7 @@
   <title>DebateMe</title>
   <meta name="description" content="Your opinion is what matters." />
 
-  <link href="https://cdn.syncfusion.com/ej2/26.1.35/bootstrap5.css" rel="stylesheet">
+  <link rel="stylesheet" href="/syncfusion.css">
 </head>
 
 <body>

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -15,23 +15,23 @@
     "@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",
-    "react-icons": "^5.0.1",
-    "react-router-dom": "^6.22.1",
-    "sonner": "^1.4.41",
-    "zustand": "^4.5.1"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
+    "react-router-dom": "^6.24.1",
+    "sonner": "^1.5.0",
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
-    "@types/react": "^18.2.56",
-    "@types/react-dom": "^18.2.19",
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
-    "@typescript-eslint/parser": "^7.0.2",
-    "@vitejs/plugin-react-swc": "^3.5.0",
-    "eslint": "^8.56.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "typescript": "^5.2.2",
-    "vite": "^5.1.4"
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
+    "@vitejs/plugin-react-swc": "^3.7.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.8",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.3"
   }
 }
diff --git a/client/public/syncfusion.css b/client/public/syncfusion.css
diff --git a/client/src/main.tsx b/client/src/main.tsx
@@ -1,8 +1,11 @@
 import "./globals.css"
 import ReactDOM from "react-dom/client"
 import { BrowserRouter } from "react-router-dom"
+import { registerLicense } from "@syncfusion/ej2-base"
 import App from "./App.tsx"
 
+registerLicense(import.meta.env.VITE_SYNCFUSION_KEY);
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
     <BrowserRouter>
         <App />

diff --git a/client/src/pages/create-debate/editor.tsx b/client/src/pages/create-debate/editor.tsx
@@ -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
diff --git a/client/src/pages/create-debate/index.tsx b/client/src/pages/create-debate/index.tsx
@@ -1,135 +1,39 @@
 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"
+import { useRef, useState } from "react"
+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 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 [editorContent, setEditorContent] = useState<string>('');
 
-    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);
-    //     }
-    // };
+    const saveEditorContent = () => {
+        if (editorRef.current) {
+            const content = editorRef.current.value;
+            setEditorContent(content);
+        }
+    }; 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}
-                        insertImageSettings={insertImageSettings}
-                        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>
+            <div className='vertical-space'>
+                <h2>Body</h2>
+                <Editor
+                    editorRef={editorRef}
+                    rteValue=""
+                />
+            </div>
+            <div>
+                <button type='button' onClick={saveEditorContent}></button>
             </div>
-            {/* <button onClick={saveEditorContent}>Save</button> */}
-        </div>
+        </form>
     );
 }