Added editor to EditForm

apps/comments-ui/src/components/EditForm.js

@@ -1,16 +1,20 @@
-import React, {useContext, useState} from 'react';
+import React, {useContext} from 'react';
 import Avatar from './Avatar';
 import AppContext from '../AppContext';
+import {useEditor, EditorContent} from '@tiptap/react';
+import {getEditorConfig} from '../utils/editor';
 
 const EditForm = (props) => {
     // todo: we need to convert the HTML back to an editable state instead of putting it into the textarea
-    const [message, setMessage] = useState(props.comment.html);
     const {dispatchAction} = useContext(AppContext);
 
-    const getHTML = () => {
+    const editor = useEditor({
-        // Convert newlines to <br> for now (until we add a real editor)
+        ...getEditorConfig({
-        return message.replace('\n', '<br>');
+            placeholder: 'Edit comment',
-    };
+            autofocus: true,
+            content: props.comment.html
+        })
+    });
 
     const submitForm = async (event) => {
         event.preventDefault();
@@ -18,7 +22,7 @@ const EditForm = (props) => {
         await dispatchAction('editComment', {
             comment: {
                 id: props.comment.id,
-                html: getHTML()
+                html: editor.getHTML()
             },
             parent: props.parent
         });
@@ -28,14 +32,10 @@ const EditForm = (props) => {
         return false;
     };
 
-    const handleChange = (event) => {
-        setMessage(event.target.value);
-    };
-
     const comment = props.comment;
 
     return (
-        <form onSubmit={submitForm} className={`comment-form transition duration-200 bg-white dark:bg-[rgba(255,255,255,0.08)] rounded-md px-3 pt-3 pb-2 -ml-[13px] -mr-3 -mt-[13px] mb-10 shadow-lg dark:shadow-transparent hover:shadow-xl`}>
+        <form className={`comment-form transition duration-200 bg-white dark:bg-[rgba(255,255,255,0.08)] rounded-md px-3 pt-3 pb-2 -ml-[13px] -mr-3 -mt-[13px] mb-10 shadow-lg dark:shadow-transparent hover:shadow-xl`}>
             <div>
                 <div className="flex justify-start items-center">
                     <Avatar saturation={props.avatarSaturation} />
@@ -45,23 +45,16 @@ const EditForm = (props) => {
                 </div>
                 <div className="pr-3 font-sans leading-normal dark:text-neutral-300">
                     <div className="relative w-full">
-                        <textarea
+                        <EditorContent
                             className={`w-full h-40 pl-[56px] border-none resize-none p-0 font-sans text-[16.5px] mb-1 leading-normal placeholder:text-neutral-300 focus:outline-0 bg-transparent dark:placeholder:text-[rgba(255,255,255,0.3)] dark:border-none dark:text-[rgba(255,255,255,0.9)] dark:shadow-transparent`}
-                            value={message}
+                            editor={editor} 
-                            onChange={handleChange}
-                            onFocus={function (e) {
-                                var val = e.target.value;
-                                e.target.value = '';
-                                e.target.value = val;
-                            }}
-                            autoFocus
-                            placeholder='Join the discussion'
                         />
                         <div className="flex space-x-4 transition-[opacity] duration-150 absolute -right-3 bottom-2">
                             <button type="button" className="font-sans text-sm font-medium ml-2.5 text-neutral-500 dark:text-neutral-400" onClick={props.toggle}>Cancel</button>
                             <button
                                 className={`rounded-md border py-3 px-4 font-sans text-sm text-center bg-black font-semibold text-white dark:bg-[rgba(255,255,255,0.9)] dark:text-neutral-800`}
-                                type="submit">
+                                type="button"
+                                onClick={submitForm}>
                                 Edit comment
                             </button>
                         </div>

apps/comments-ui/src/utils/editor.js

@@ -4,7 +4,7 @@ import Link from '@tiptap/extension-link';
 import Paragraph from '@tiptap/extension-paragraph';
 import Document from '@tiptap/extension-document';
 
-export function getEditorConfig({placeholder, autofocus = false}) {
+export function getEditorConfig({placeholder, autofocus = false, content = ''}) {
     return {
         extensions: [
             Document,
@@ -22,7 +22,7 @@ export function getEditorConfig({placeholder, autofocus = false}) {
                 placeholder
             })
         ],
-        content: '',
+        content,
         autofocus,
         editorProps: {
             attributes: {