#8 Add toolbar for edit hint

UniRegensburg · Aug 20, 2022 · 46d4b8b · 46d4b8b
1 parent fb9e8aa
commit 46d4b8b
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 7 deletions.
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -4,12 +4,13 @@ interface ButtonProps {
   icon?: any;
   bgColor?: string;
   textColor?: string;
-  size?: "sm" | "md" | "lg";
+  size?: "xs" | "sm" | "md" | "lg";
   onClick?: () => void;
   children?: React.ReactNode;
   disabled?: boolean;
   hasText?: boolean;
   alternativePadding?: string;
+  gap?: string;
 }
 
 export const Button: React.FC<ButtonProps> = ({
@@ -20,6 +21,7 @@ export const Button: React.FC<ButtonProps> = ({
   disabled = false,
   hasText = true,
   alternativePadding = "",
+  gap = "gap-3",
   onClick,
   children,
 }) => {
@@ -28,9 +30,8 @@ export const Button: React.FC<ButtonProps> = ({
       onClick={onClick}
       className={cx(
         `flex items-center
-        ${icon && "gap-3"} ${size} ${bgColor} ${alternativePadding}
-        ${textColor} ${disabled && "disabled"} font`,
-        { "rounded-lg": !hasText }
+        ${icon && gap} ${size} ${bgColor} ${alternativePadding}
+        ${textColor} ${disabled && "disabled"} font rounded-lg`
       )}
     >
       <span>{icon}</span>

diff --git a/src/components/sidebar/Hint.tsx b/src/components/sidebar/Hint.tsx
@@ -1,7 +1,16 @@
-import { Eye, DotsThree, PencilSimple, Trash } from "phosphor-react";
+import {
+  Eye,
+  DotsThree,
+  PencilSimple,
+  Trash,
+  FloppyDisk,
+  X,
+} from "phosphor-react";
 import { useState } from "react";
 import { Button } from "../Button";
 import cx from "classnames";
+import { Editor } from "react-draft-wysiwyg";
+import { ContentState, convertFromHTML, EditorState } from "draft-js";
 
 export interface HintProps {
   id: string;
@@ -12,21 +21,56 @@ export interface HintProps {
   referenceTo?: string;
 }
 
+const toolbarOptions = {
+  options: ["inline", "list"],
+  inline: {
+    className: ["!mb-0 flex gap-2 items-center"],
+    options: ["bold", "italic", "underline", "strikethrough"],
+  },
+  list: {
+    className: ["!mb-0 flex gap-2 items-center"],
+    options: ["unordered", "ordered"],
+  },
+};
+
 export const Hint: React.FC<HintProps> = (hint: HintProps) => {
   const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
+  const [editMode, setEditMode] = useState<boolean>(false);
+  const [editorState, setEditorState] = useState(() => {
+    const blocksFromHTML = convertFromHTML(hint.content || "");
+    const contentState = ContentState.createFromBlockArray(
+      blocksFromHTML.contentBlocks,
+      blocksFromHTML.entityMap
+    );
+
+    return EditorState.createWithContent(contentState);
+  });
 
   const showReference = (e: React.MouseEvent) => {
     //TODO
   };
 
   const editHint = (e: React.MouseEvent) => {
+    setIsMenuOpen(false);
+    setEditMode(!editMode);
+
     //TODO
   };
 
   const deleteHint = (e: React.MouseEvent) => {
     //TODO
   };
 
+  const onAbort = () => {
+    setEditMode(!editMode);
+    //TODO
+  };
+
+  const onSave = () => {
+    setEditMode(!editMode);
+    //TODO
+  };
+
   return (
     <div>
       <div className="flex flex-col bg-offWhite mt-4 rounded-xl text-darkGrey text-xs font-medium">
@@ -43,7 +87,50 @@ export const Hint: React.FC<HintProps> = (hint: HintProps) => {
 
         <div className={cx("mx-3", { "mt-3": !hint.referenceTo })}>
           <div className="mb-2 text-sm font-bold">{hint.title}</div>
-          <div className="mb-2">{hint.content}</div>
+          {editMode ? (
+            <div>
+              <Editor
+                defaultEditorState={editorState}
+                onEditorStateChange={setEditorState}
+                wrapperClassName={cx(
+                  "min-h-[140px] w-full focus:outline-none bg-white rounded-t-lg"
+                )}
+                editorClassName="p-2"
+                placeholder="Text eingeben..."
+                toolbarClassName={cx(
+                  "p-2 relative rounded-none border border-x-0 border-t-0 border-lightGrey flex gap-5"
+                )}
+                toolbar={toolbarOptions}
+                toolbarCustomButtons={[]}
+              />
+              <div className="flex justify-end gap-1 p-2 border-t border-lightGrey bg-white rounded-b-lg">
+                <Button
+                  icon={<X size={16} />}
+                  onClick={() => onAbort()}
+                  size="xs"
+                  gap="gap-0.5"
+                  bgColor="bg-lightRed"
+                  alternativePadding="p-1"
+                  textColor="font-bold text-darkRed"
+                >
+                  Abbrechen
+                </Button>
+                <Button
+                  icon={<FloppyDisk size={16} />}
+                  onClick={() => onSave()}
+                  size="xs"
+                  gap="gap-0.5"
+                  bgColor="bg-lightGreen"
+                  alternativePadding="p-1"
+                  textColor="font-bold text-darkGreen"
+                >
+                  Speichern
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <div className="mb-2">{hint.content}</div>
+          )}
 
           <div className="flex justify-between items-center mb-3">
             <div className="">
@@ -57,7 +144,7 @@ export const Hint: React.FC<HintProps> = (hint: HintProps) => {
 
             <div
               className="self-end relative"
-              onBlur={() => setIsMenuOpen(false)}
+              // onBlur={() => setIsMenuOpen(false)}
             >
               <Button
                 key="createHint"