Start draft.js implementation

package.json

@@ -28,6 +28,7 @@
     "axios": "^1.6.0",
     "bcrypt": "^5.1.1",
     "dayjs": "^1.11.10",
+    "draft-js": "^0.11.7",
     "framer-motion": "^10.16.4",
     "intro.js-react": "^1.0.0",
     "ioredis": "^5.3.2",
@@ -57,6 +58,7 @@
   "devDependencies": {
     "@next-auth/prisma-adapter": "^1.0.7",
     "@types/bcrypt": "^5.0.1",
+    "@types/draft-js": "^0.11.14",
     "@types/jsonwebtoken": "^9.0.4",
     "@types/multer": "^1.4.9",
     "@types/node": "^20",

src/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/forms/log/LogDreamForm.tsx

@@ -7,7 +7,8 @@ import Input from "@/app/(site)/components/inputs/Input";
 import TextArea from "@/app/(site)/components/inputs/TextArea";
 import Button from "@/app/(site)/components/Button";
 import {useDreamsData} from "@/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/DreamsProvider";
-import DreamCharacterSelect from "@/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/forms/log/DreamCharacterSelect";
+import DreamCharacterSelect
+    from "@/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/forms/log/DreamCharacterSelect";
 import DreamTagSelect from "@/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/forms/log/DreamTagSelect";
 import {Divider} from "@nextui-org/divider";
 import PencilIcon from "@/app/(site)/components/icons/PencilIcon";
@@ -18,8 +19,11 @@ import {handleAxiosError, postMutator} from "@/utils/client/client-utils";
 import {useSession} from "next-auth/react";
 import toast from "react-hot-toast";
 import AddTagModal from "@/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/forms/tags/AddTagModal";
-import AddCharacterModal from "@/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/forms/characters/AddCharacterModal";
+import AddCharacterModal
+    from "@/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/forms/characters/AddCharacterModal";
 import {Spacer} from "@nextui-org/react";
+import Editor from "@/app/(site)/components/Editor";
+import {EditorState} from "draft-js";
 
 type FormProps = Omit<PostDreamDto, 'tags' | 'characters'> & {
     tags?: string[] | string
@@ -42,6 +46,7 @@ const LogDreamForm: FC<Props> = ({onCreate, onForget}) => {
     const {characters, tags, dreams} = useDreamsData()
     const {register, handleSubmit} = useForm<FormProps>()
     const {trigger: createDream, isMutating: dreamIsCreating} = CreateDream()
+    const [editorState, setEditorState] = useState(EditorState.createEmpty())
 
     const handleDreamCreation = useCallback(async (dto: PostDreamDto) => (
         createDream({body: dto})
@@ -93,6 +98,8 @@ const LogDreamForm: FC<Props> = ({onCreate, onForget}) => {
             )
     }, [dreams.optimisticData, handleDreamCreation, session?.user])
 
+    console.log(editorState.toJS())
+
     return (
         <Fragment>
             <AddTagModal
@@ -119,6 +126,7 @@ const LogDreamForm: FC<Props> = ({onCreate, onForget}) => {
                         maxLength={500}
                         isDisabled={dreamIsCreating}
                     />
+                    <Editor state={editorState} onChange={setEditorState}/>
                     <TextArea
                         isRequired
                         register={register}
@@ -141,7 +149,7 @@ const LogDreamForm: FC<Props> = ({onCreate, onForget}) => {
                         isDisabled={dreamIsCreating}
                         onModalOpen={() => setAddCharacterModalOpen(true)}
                     />
-                    <Spacer y={6} />
+                    <Spacer y={6}/>
                     <Input
                         register={register}
                         id="comments"

src/app/(site)/components/Editor.tsx

@@ -0,0 +1,18 @@
+"use client"
+
+import {FC, MutableRefObject, useState} from "react";
+import {Editor as DraftEditor, EditorState} from 'draft-js';
+
+type EditorProps = {
+    state: EditorState,
+    onChange: (state: EditorState) => void;
+}
+
+const Editor: FC<EditorProps> = ({state, onChange}) => {
+
+    return (
+        <DraftEditor editorState={state} onChange={onChange}/>
+    )
+}
+
+export default Editor