Merge pull request #62 from Tarhche/enhancement/article-editor-usability

feat: add editor ref to ArticleEditor component
Tarhche · Jan 14, 2025 · f72b825 · f72b825
2 parents 6b1f30b + 5c2f33e
commit f72b825
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 24 deletions.
diff --git a/frontend/src/features/articles/components/article-editor/article-editor.css b/frontend/src/features/articles/components/article-editor/article-editor.css
@@ -18,7 +18,7 @@
 }
 
 .ck.ck-editor__main > .ck-editor__editable {
-  background-color: var(--mantine-color-body);
+  background-color: var(--mantine-color-dark-6);
 }
 
 .editor-container_classic-editor .editor-container__editor {
@@ -182,7 +182,7 @@
 
 :root[data-mantine-color-scheme="dark"] {
   /* Helper variables to avoid duplication in the colors. */
-  --ck-custom-background: var(--mantine-color-body);
+  --ck-custom-background: var(--mantine-color-dark-6);
   --ck-custom-foreground: hsl(255, 3%, 18%);
   --ck-custom-border: var(--mantine-color-dark-4);
   --ck-color-base-border: var(--mantine-color-dark-4);
@@ -215,6 +215,7 @@
 
   --ck-color-button-save: hsl(120, 100%, 46%);
   --ck-color-button-cancel: hsl(15, 100%, 56%);
+  --ck-color-button-on-color: var(--mantine-color-blue-6);
 
   /* -- Overrides the default .ck-dropdown class colors. -------------------------------------- */
 
@@ -281,7 +282,6 @@
   --ck-color-widget-editable-focus-background: var(--ck-custom-white);
 
   /* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */
-
   --ck-color-link-default: hsl(190, 100%, 75%);
 }
 

diff --git a/frontend/src/features/articles/components/article-editor/article-editor.tsx b/frontend/src/features/articles/components/article-editor/article-editor.tsx
@@ -1,20 +1,19 @@
 "use client";
-import {useRef, useMemo} from "react";
+import {useMemo, type RefObject} from "react";
 import {CKEditor} from "@ckeditor/ckeditor5-react";
 import {ClassicEditor, EditorConfig} from "ckeditor5";
 import {editorConfig} from "./editor-config";
 import "ckeditor5/ckeditor5.css";
 import "./article-editor.css";
 
+export type EditorRef = CKEditor<ClassicEditor>;
+
 type Props = {
   initialData?: string;
+  editorRef?: RefObject<EditorRef>;
 };
 
-export function ArticleEditor({initialData}: Props) {
-  const editorContainerRef = useRef<any>(null);
-  const editorRef = useRef<any>(null);
-  const editorWordCountRef = useRef<any>(null);
-
+export function ArticleEditor({initialData, editorRef}: Props) {
   const config: EditorConfig = useMemo(() => {
     return {
       ...editorConfig,
@@ -24,19 +23,12 @@ export function ArticleEditor({initialData}: Props) {
 
   return (
     <div className="main-container">
-      <div
-        className="editor-container editor-container_classic-editor editor-container_include-style editor-container_include-block-toolbar editor-container_include-word-count"
-        ref={editorContainerRef}
-      >
+      <div className="editor-container editor-container_classic-editor editor-container_include-style editor-container_include-block-toolbar editor-container_include-word-count">
         <div className="editor-container__editor">
-          <div ref={editorRef}>
-            {config && <CKEditor editor={ClassicEditor} config={config} />}
-          </div>
+          {config && (
+            <CKEditor editor={ClassicEditor} config={config} ref={editorRef} />
+          )}
         </div>
-        <div
-          className="editor_container__word-count"
-          ref={editorWordCountRef}
-        ></div>
       </div>
     </div>
   );

diff --git a/frontend/src/features/articles/components/article-editor/index.ts b/frontend/src/features/articles/components/article-editor/index.ts
@@ -1 +1 @@
-export {ArticleEditor} from "./article-editor";
+export {ArticleEditor, type EditorRef} from "./article-editor";
diff --git a/frontend/src/features/articles/components/article-upsert-form/article-upsert-form.tsx b/frontend/src/features/articles/components/article-upsert-form/article-upsert-form.tsx
@@ -1,5 +1,5 @@
 "use client";
-import dynamic from "next/dynamic";
+import {useRef} from "react";
 import {useFormState} from "react-dom";
 import {
   Box,
@@ -13,10 +13,12 @@ import {
 } from "@mantine/core";
 import {DateTimeInput} from "@/components/date-time-input";
 import {FormButton} from "@/components/form-button";
+import {type EditorRef} from "@/features/articles/components/article-editor";
 import {FileInput} from "./file-input";
 import {IconPhotoPlus, IconMovie} from "@tabler/icons-react";
 import {upsertArticleAction} from "../../actions/upsert-article";
 import {isGregorianStartDateTime} from "@/lib/date-and-time";
+import dynamic from "next/dynamic";
 
 const ArticleEditor = dynamic(
   async () => {
@@ -43,6 +45,7 @@ type Props = {
 };
 
 export function ArticleUpsertForm({article}: Props) {
+  const editorRef = useRef<EditorRef>(null);
   const [state, dispatch] = useFormState(upsertArticleAction, {
     success: true,
   });
@@ -53,7 +56,10 @@ export function ArticleUpsertForm({article}: Props) {
     : null;
 
   const handleSubmit = async (formData: FormData) => {
-    formData.set("body", "");
+    if (Boolean(editorRef.current?.editor?.getData) === false) {
+      throw new Error("ArticleEditor getData is undefined");
+    }
+    formData.set("body", editorRef.current?.editor?.getData() || "");
     if (article?.articleId) {
       formData.set("uuid", article.articleId);
     }
@@ -78,7 +84,10 @@ export function ArticleUpsertForm({article}: Props) {
         />
         <Box>
           <InputLabel>محتوا</InputLabel>
-          <ArticleEditor initialData={article?.defaultBody} />
+          <ArticleEditor
+            initialData={article?.defaultBody}
+            editorRef={editorRef}
+          />
         </Box>
         <FileInput
           name="cover"
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export {ArticleEditor} from "./article-editor";
		export {ArticleEditor, type EditorRef} from "./article-editor";