add ckEditor

src/components/Editor.jsx

@@ -1,55 +1,30 @@
-import { forwardRef, useEffect, useLayoutEffect, useRef } from 'react';
-
-// Editor is an uncontrolled React component
-const Editor = forwardRef(
-  ({ readOnly, defaultValue, onTextChange, onSelectionChange }, ref) => {
-    const containerRef = useRef(null);
-    const defaultValueRef = useRef(defaultValue);
-    const onTextChangeRef = useRef(onTextChange);
-    const onSelectionChangeRef = useRef(onSelectionChange);
-
-    useLayoutEffect(() => {
-      onTextChangeRef.current = onTextChange;
-      onSelectionChangeRef.current = onSelectionChange;
-    });
-
-    useEffect(() => {
-      ref.current?.enable(!readOnly);
-    }, [ref, readOnly]);
-
-    useEffect(() => {
-      const container = containerRef.current;
-      const editorContainer = container.appendChild(
-        container.ownerDocument.createElement('div'),
-      );
-      const quill = new Quill(editorContainer, {
-        theme: 'snow',
-      });
-
-      ref.current = quill;
-
-      if (defaultValueRef.current) {
-        quill.setContents(defaultValueRef.current);
-      }
-
-      quill.on(Quill.events.TEXT_CHANGE, (...args) => {
-        onTextChangeRef.current?.(...args);
-      });
-
-      quill.on(Quill.events.SELECTION_CHANGE, (...args) => {
-        onSelectionChangeRef.current?.(...args);
-      });
-
-      return () => {
-        ref.current = null;
-        container.innerHTML = '';
-      };
-    }, [ref]);
-
-    return <div ref={containerRef}></div>;
-  },
-);
-
-Editor.displayName = 'Editor';
-
-export default Editor;
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {Editor, EditorState} from 'draft-js';
+ 
+function MyEditor() {
+  const [editorState, setEditorState] = React.useState(
+    EditorState.createEmpty()
+  );
+ 
+  const editor = React.useRef(null);
+ 
+  function focusEditor() {
+    editor.current.focus();
+  }
+ 
+  React.useEffect(() => {
+    focusEditor()
+  }, []);
+ 
+  return (
+    <div onClick={focusEditor}>
+      <Editor
+        ref={editor}
+        editorState={editorState}
+        onChange={editorState => setEditorState(editorState)}
+      />
+    </div>
+  );
+}
+export default MyEditor