setup rich text editor in note modal

Hartaithan · Jul 9, 2023 · cf41b16 · cf41b16
1 parent 41cb394
commit cf41b16
Show file tree

Hide file tree

Showing 3 changed files with 1,499 additions and 27 deletions.
diff --git a/modals/NoteModal.tsx b/modals/NoteModal.tsx
@@ -1,6 +1,16 @@
+import { type Dispatch, type SetStateAction, type FC, useEffect } from "react";
 import { type INoteModalState } from "@/models/NoteModel";
-import { Text, Modal } from "@mantine/core";
-import { type Dispatch, type SetStateAction, type FC } from "react";
+import { Modal, Text } from "@mantine/core";
+import { RichTextEditor, Link } from "@mantine/tiptap";
+import { useEditor } from "@tiptap/react";
+import Highlight from "@tiptap/extension-highlight";
+import StarterKit from "@tiptap/starter-kit";
+import Underline from "@tiptap/extension-underline";
+import TextAlign from "@tiptap/extension-text-align";
+import TaskList from "@tiptap/extension-task-list";
+import TaskItem from "@tiptap/extension-task-item";
+import { useGame } from "@/providers/GameProvider";
+import PlatformBadge from "@/components/PlatformBadge";
 
 interface INoteModalProps {
   state: INoteModalState;
@@ -11,6 +21,20 @@ interface INoteModalProps {
 const NoteModal: FC<INoteModalProps> = (props) => {
   const { state, setState, initial } = props;
   const { opened } = state;
+  const { game } = useGame();
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Underline,
+      Link,
+      Highlight,
+      TaskList,
+      TaskItem,
+      TextAlign.configure({ types: ["heading", "paragraph"] }),
+    ],
+    content: "",
+  });
 
   const onClose = (): void => {
     setState((prev) => ({ ...prev, opened: false }));
@@ -20,22 +44,66 @@ const NoteModal: FC<INoteModalProps> = (props) => {
     setState(initial);
   };
 
+  useEffect(() => {
+    if (editor == null) return;
+    editor.commands.setContent(
+      '<ul data-type="taskList"><li data-type="taskItem" data-checked="true">A list item</li><li data-type="taskItem" data-checked="false">And another one</li></ul>'
+    );
+  }, [editor]);
+
   return (
     <Modal.Root
       opened={opened}
       onClose={onClose}
       onAnimationEnd={onAnimationEnd}
       centered
+      size="xl"
     >
       <Modal.Overlay />
       <Modal.Content>
         <Modal.Header>
-          <Modal.Title>Title</Modal.Title>
+          <Modal.Title display="flex">
+            <Text mr="sm">Note for {game?.title ?? "[Not Found]"}</Text>
+            {game != null && <PlatformBadge platform={game.platform} />}
+          </Modal.Title>
           <Modal.CloseButton />
         </Modal.Header>
         <Modal.Body>
-          <Text>NoteModal</Text>
-          <Text component="pre">{JSON.stringify(state, null, 2)}</Text>
+          <RichTextEditor editor={editor}>
+            <RichTextEditor.Toolbar sticky stickyOffset={54}>
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.Bold />
+                <RichTextEditor.Italic />
+                <RichTextEditor.Underline />
+                <RichTextEditor.Strikethrough />
+                <RichTextEditor.ClearFormatting />
+                <RichTextEditor.Highlight />
+              </RichTextEditor.ControlsGroup>
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.H1 />
+                <RichTextEditor.H2 />
+                <RichTextEditor.H3 />
+                <RichTextEditor.H4 />
+              </RichTextEditor.ControlsGroup>
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.Blockquote />
+                <RichTextEditor.Hr />
+                <RichTextEditor.BulletList />
+                <RichTextEditor.OrderedList />
+              </RichTextEditor.ControlsGroup>
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.Link />
+                <RichTextEditor.Unlink />
+              </RichTextEditor.ControlsGroup>
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.AlignLeft />
+                <RichTextEditor.AlignCenter />
+                <RichTextEditor.AlignJustify />
+                <RichTextEditor.AlignRight />
+              </RichTextEditor.ControlsGroup>
+            </RichTextEditor.Toolbar>
+            <RichTextEditor.Content />
+          </RichTextEditor>
         </Modal.Body>
       </Modal.Content>
     </Modal.Root>