392 implement front for saving texts from quill (#404)

Co-authored-by: Filippa Högnäsbacka <filippa.hognasbacka@gmail.com>

gradesa/src/app/resources/[chapter]/page.js

@@ -33,6 +33,18 @@ export default function Chapters() {
     fetchHTML();
   }, []);
 
+  const submitEditorContent = async () => {
+    const jsonData = JSON.stringify({ content: editorContent });
+    const res = await fetch(`/api/html-content/${parseInt(chapter)}`, {
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      method: "PUT",
+      body: jsonData,
+    });
+  };
+
   const Chapter = chapters.find((c) => c.id === chapter);
   if (!Chapter) {
     router.replace("/resources");
@@ -48,9 +60,15 @@ export default function Chapters() {
   if (editorActive) {
     return (
       <Column className={layout.viewContent}>
-        <Button onClick={() => setEditorActive(false)}>Close editor</Button>
+        <Row gap="1rem">
+          <Button onClick={() => setEditorActive(false)}>Close editor</Button>
+          <Button onClick={submitEditorContent}>Save changes</Button>
+        </Row>
         <Row justify="space-between" pb="xl">
-          <Editor defaultContent={editorContent.content} />
+          <Editor
+            defaultContent={editorContent.content}
+            updateEditorContent={(content) => setEditorContent(content)}
+          />
         </Row>
       </Column>
     );

gradesa/src/components/ui/editor/ClientEditor.js

@@ -3,6 +3,7 @@ import "quill/dist/quill.snow.css";
 
 const ClientEditor = (props) => {
   const containerRef = useRef(null);
+  const updateEditorContentRef = useRef(props.updateEditorContent);
 
   useEffect(() => {
     let quill;
@@ -10,6 +11,10 @@ const ClientEditor = (props) => {
       const Quill = (await import("quill")).default;
       if (containerRef.current && containerRef.current.children.length === 0) {
         quill = new Quill(containerRef.current, { theme: "snow" });
+        quill.root.setAttribute("spellcheck", false);
+        quill.on(Quill.events.TEXT_CHANGE, () => {
+          updateEditorContentRef.current?.(quill.getSemanticHTML());
+        });
         if (props.defaultContent) {
           quill.clipboard.dangerouslyPasteHTML(props.defaultContent);
         }