From 575e747e76494a8e5b8506c23c3ee13a072af4dc Mon Sep 17 00:00:00 2001
From: Stian Alexander Solli <stianasolli@hotmail.com>
Date: Fri, 1 Mar 2024 17:52:53 +0100
Subject: [PATCH 01/11] Started with creating a markdown editor, still needs
 more functionality and some css fixing

---
 src/components/molecules/forms/eventForm/EventForm.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/molecules/forms/eventForm/EventForm.tsx b/src/components/molecules/forms/eventForm/EventForm.tsx
index 305daa9f..79083825 100644
--- a/src/components/molecules/forms/eventForm/EventForm.tsx
+++ b/src/components/molecules/forms/eventForm/EventForm.tsx
@@ -18,6 +18,7 @@ import { Button } from '@chakra-ui/react';
 import { createEvent, uploadEventPicture } from 'api';
 import { useHistory } from 'react-router-dom';
 import Textarea from 'components/atoms/textarea/Textarea';
+import MarkdownEditor from 'components/atoms/markdown/MarkdownEditor';
 import ToggleButton from 'components/atoms/toggleButton/ToggleButton';
 import DropdownHeader from 'components/atoms/dropdown/dropdownHeader/DropdownHeader';
 import { useToast } from 'hooks/useToast';
@@ -197,6 +198,15 @@ const EventForm = () => {
           error={fields['description'].error}
         />
 
+        <MarkdownEditor
+          name={'description'}
+          label={'Beskrivelse'}
+          minWidth={25}
+          onChange={onFieldChange}
+          resize={true}
+          error={fields['description'].error}
+        />
+
         <DropdownHeader
           title={'Valgfritt: Sett dato for når påmeldingen åpner'}
           style={{ width: '100%' }}>

From f6d28db159eba22d173b51e216c8e0a5d26bf644 Mon Sep 17 00:00:00 2001
From: Stian Alexander Solli <stianasolli@hotmail.com>
Date: Fri, 1 Mar 2024 17:53:11 +0100
Subject: [PATCH 02/11] Started with creating a markdown editor, still needs
 more functionality and some css fixing

---
 .../atoms/markdown/MarkdownEditor.tsx         | 139 ++++++++++++++++++
 1 file changed, 139 insertions(+)
 create mode 100644 src/components/atoms/markdown/MarkdownEditor.tsx

diff --git a/src/components/atoms/markdown/MarkdownEditor.tsx b/src/components/atoms/markdown/MarkdownEditor.tsx
new file mode 100644
index 00000000..8e5b40da
--- /dev/null
+++ b/src/components/atoms/markdown/MarkdownEditor.tsx
@@ -0,0 +1,139 @@
+import React, { useState, ChangeEvent, TextareaHTMLAttributes, useEffect } from 'react';
+import ReactMarkdown from 'react-markdown';
+import styles from '../textarea/textarea.module.scss';
+import { Button, Stack } from '@chakra-ui/react'
+import { MdInsertLink , MdFormatBold, MdFormatItalic } from "react-icons/md"
+
+
+interface MarkdownEditorProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    maxWidth?: number;
+    minWidth?: number;
+    error?: string[] | undefined;
+    resize?: boolean;
+  }
+
+const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
+    error,
+    maxWidth,
+    minWidth,
+    label,
+    value,
+    resize,
+    onChange,
+    ...rest
+}) => {
+    const [input, setInput] = useState("");
+    const [isFocused, setIsFocused] = useState(false);
+    // 2 is textarea default value for rows
+    const [rows, setRows] = useState(2);
+    const [view, setShowPreview] = useState(false); // Add state variable for toggle
+
+    const handleInputChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+        setInput(event.target.value);
+    };
+
+    const getLabelStyle = () => {
+        return !!input || isFocused
+          ? `${styles.label} ${styles.styledLabel}`
+          : styles.label;
+      };
+    
+      useEffect(() => {
+        if (!resize) {
+          return;
+        }
+        const rowlen = input ? input.toString().split('\n').length : 2;
+        const max = 14;
+        setRows(rowlen < max ? rowlen : max);
+      }, [input, resize]);
+
+    const showEditor = () => {
+        setShowPreview(false);
+    };
+    const showPreview = () => {
+        setShowPreview(true);
+    };
+
+    
+    const insertLink = () => {
+        const textarea = document.getElementById('myEditor') as HTMLTextAreaElement;
+        const text = "[Display text](URL)"
+        if (textarea !== null){
+            let position = textarea.selectionStart;
+            const end = position + text.length;
+            textarea.setRangeText(text, position, end, 'select');
+        }
+    };
+    const insertBold = () => {
+        const textarea = document.getElementById('myEditor') as HTMLTextAreaElement;
+        const text = "**Text**"
+        if (textarea !== null){
+            let position = textarea.selectionStart;
+            const end = position + text.length;
+            textarea.setRangeText(text, position, end, 'select');
+        }
+    };
+    const insertItalic = () => {
+        const textarea = document.getElementById('myEditor') as HTMLTextAreaElement;
+        const text = "[Display text](URL)"
+        if (textarea !== null){
+            let position = textarea.selectionStart;
+            const end = position + text.length;
+            textarea.setRangeText(text, position, end, 'select');
+        }
+    };
+    const insertHeader = () => {
+        const textarea = document.getElementById('myEditor') as HTMLTextAreaElement;
+        const text = "[Display text](URL)"
+        if (textarea !== null){
+            let position = textarea.selectionStart;
+            const end = position + text.length;
+            textarea.setRangeText(text, position, end, 'select');
+        }
+    };
+
+    
+
+    return (
+        <div className={styles.container}>
+            <Stack direction='row' spacing={4}>
+                <Button size='xs' colorScheme='purple' variant={view ? ('outline'):('solid')} onClick={showEditor}>
+                    Write
+                </Button>
+                <Button size='xs' colorScheme='purple' variant={view ? ('solid'):('outline')} onClick={showPreview}>
+                    Preview
+                </Button>
+                <Button size='xs' rightIcon={<MdInsertLink/>} colorScheme='purple' variant='outline' onClick={insertLink}>
+                    Link
+                </Button>
+                <Button size='xs' colorScheme='purple' variant='outline' onClick={insertBold}>B</Button>
+            </Stack>
+            {view ? ( // Conditionally render markdown or preview based on toggle state
+                <ReactMarkdown>{input}</ReactMarkdown>
+            ) : <div className={styles.inputContainer}>
+                    <textarea
+                        id='myEditor'
+                        style={{
+                            maxWidth: maxWidth ? maxWidth + 'ch' : '',
+                            minWidth: minWidth ? minWidth + 'ch' : '',
+                        }}
+                        rows={rows}
+                        className={styles.text}
+                        // onFocus={() => setIsFocused(true)}
+                        // onBlur={() => setIsFocused(false)}
+                        value={input}
+                        onChange={handleInputChange}
+                        placeholder="Beskrivelse"
+                        // cols={50}
+                        />
+                </div> }
+            
+
+            
+            {/* {label && <label className={getLabelStyle()}>{label}</label>} */}
+        </div>
+    );
+};
+
+export default MarkdownEditor;
\ No newline at end of file

From 4a6e4bb949ddea7f0f33c88c7c9d76b3c9b15198 Mon Sep 17 00:00:00 2001
From: Stian Alexander Solli <stianasolli@hotmail.com>
Date: Tue, 13 Aug 2024 00:59:22 +0200
Subject: [PATCH 03/11] added features for merkdown editor, needs cleanup, and
 some minor fixing

---
 package.json                                  |   1 +
 .../atoms/markdown/MarkdownEditor.tsx         | 210 ++++++++++++------
 .../atoms/markdown/markdown.module.scss       |  48 ++++
 .../molecules/event/eventBody/EventBody.tsx   |  29 ++-
 .../molecules/forms/eventForm/EventForm.tsx   |  21 +-
 yarn.lock                                     |  17 +-
 6 files changed, 252 insertions(+), 74 deletions(-)
 create mode 100644 src/components/atoms/markdown/markdown.module.scss

diff --git a/package.json b/package.json
index aecf7223..cf6904ba 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "classnames": "^2.3.1",
     "echarts": "^5.4.0",
     "echarts-for-react": "^3.0.2",
+    "emoji-picker-react": "^4.8.0",
     "env-cmd": "^10.1.0",
     "eslint": "^7.11.0",
     "framer-motion": "^10.12.18",
diff --git a/src/components/atoms/markdown/MarkdownEditor.tsx b/src/components/atoms/markdown/MarkdownEditor.tsx
index 8e5b40da..0599f507 100644
--- a/src/components/atoms/markdown/MarkdownEditor.tsx
+++ b/src/components/atoms/markdown/MarkdownEditor.tsx
@@ -1,8 +1,17 @@
-import React, { useState, ChangeEvent, TextareaHTMLAttributes, useEffect } from 'react';
+import React, { useState, ChangeEvent, TextareaHTMLAttributes, useEffect, Suspense} from 'react';
 import ReactMarkdown from 'react-markdown';
-import styles from '../textarea/textarea.module.scss';
+import styles from './markdown.module.scss';
 import { Button, Stack } from '@chakra-ui/react'
 import { MdInsertLink , MdFormatBold, MdFormatItalic } from "react-icons/md"
+import EmojiPicker, { EmojiClickData } from 'emoji-picker-react';
+// const Lazycomponent = lazy(() => import('emoji-picker-react'))
+
+
+const Lazycomponent = React.lazy(() =>
+  import("emoji-picker-react").then(module => {
+    return { default: module.default };
+  })
+);
 
 
 interface MarkdownEditorProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
@@ -11,6 +20,7 @@ interface MarkdownEditorProps extends TextareaHTMLAttributes<HTMLTextAreaElement
     minWidth?: number;
     error?: string[] | undefined;
     resize?: boolean;
+    value?: string;
   }
 
 const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
@@ -23,15 +33,17 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
     onChange,
     ...rest
 }) => {
-    const [input, setInput] = useState("");
+    const [input, setInput] = useState(value ? value : "");
+    // const [input, setInput] = useState(value);
     const [isFocused, setIsFocused] = useState(false);
     // 2 is textarea default value for rows
     const [rows, setRows] = useState(2);
     const [view, setShowPreview] = useState(false); // Add state variable for toggle
+    const [showEmoji, setShowEmoji] = useState(false);
 
-    const handleInputChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
-        setInput(event.target.value);
-    };
+    // const handleInputChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    //     setInput(event.target.value);
+    // };
 
     const getLabelStyle = () => {
         return !!input || isFocused
@@ -48,90 +60,164 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
         setRows(rowlen < max ? rowlen : max);
       }, [input, resize]);
 
-    const showEditor = () => {
-        setShowPreview(false);
-    };
-    const showPreview = () => {
-        setShowPreview(true);
-    };
-
     
     const insertLink = () => {
         const textarea = document.getElementById('myEditor') as HTMLTextAreaElement;
         const text = "[Display text](URL)"
         if (textarea !== null){
-            let position = textarea.selectionStart;
-            const end = position + text.length;
-            textarea.setRangeText(text, position, end, 'select');
+            const position = textarea.selectionStart;
+            // const end = position + text.length;
+            // textarea.setRangeText(text, position, end, 'select');
+            const before = textarea.value.substring(0, position);
+            const after = textarea.value.substring(position, textarea.value.length);
+
+            // Insert the new text at the cursor position
+            textarea.value = before + text + after;
+            setInput(textarea.value)
+            textarea.selectionStart = textarea.selectionEnd = position + text.length-1;
         }
     };
     const insertBold = () => {
         const textarea = document.getElementById('myEditor') as HTMLTextAreaElement;
-        const text = "**Text**"
+        const text = "****"
         if (textarea !== null){
-            let position = textarea.selectionStart;
-            const end = position + text.length;
-            textarea.setRangeText(text, position, end, 'select');
+            const position = textarea.selectionStart;
+            const before = textarea.value.substring(0, position);
+            const after = textarea.value.substring(position, textarea.value.length);
+
+            // Insert the new text at the cursor position
+            textarea.value = before + text + after;
+            setInput(textarea.value)
+            textarea.selectionStart = textarea.selectionEnd = position + text.length-2;
         }
     };
     const insertItalic = () => {
         const textarea = document.getElementById('myEditor') as HTMLTextAreaElement;
-        const text = "[Display text](URL)"
+        const text = "**"
         if (textarea !== null){
-            let position = textarea.selectionStart;
-            const end = position + text.length;
-            textarea.setRangeText(text, position, end, 'select');
+            const position = textarea.selectionStart;
+            const before = textarea.value.substring(0, position);
+            const after = textarea.value.substring(position, textarea.value.length);
+
+            // Insert the new text at the cursor position
+            textarea.value = before + text + after;
+            setInput(textarea.value)
+            textarea.selectionStart = textarea.selectionEnd = position + text.length-1;
         }
     };
     const insertHeader = () => {
         const textarea = document.getElementById('myEditor') as HTMLTextAreaElement;
-        const text = "[Display text](URL)"
+        const text = "### "
         if (textarea !== null){
-            let position = textarea.selectionStart;
-            const end = position + text.length;
-            textarea.setRangeText(text, position, end, 'select');
+            const position = textarea.selectionStart;
+            const before = textarea.value.substring(0, position);
+            const after = textarea.value.substring(position, textarea.value.length);
+
+            // Insert the new text at the cursor position
+            textarea.value = before + text + after;
+            setInput(textarea.value)
+            textarea.selectionStart = textarea.selectionEnd = position + text.length;
+        }
+    };
+
+    const onClickEmoji = (EmojiObject: EmojiClickData) => {
+        const textarea = document.getElementById('myEditor') as HTMLTextAreaElement;
+        if (textarea !== null){
+            const position = textarea.selectionStart;
+            const before = textarea.value.substring(0, position);
+            const after = textarea.value.substring(position, textarea.value.length);
+
+            // Insert the new text at the cursor position
+            textarea.value = before + EmojiObject.emoji + after;
+            setInput(textarea.value)
+            textarea.selectionStart = textarea.selectionEnd = position + EmojiObject.emoji.length;
         }
     };
 
     
 
     return (
-        <div className={styles.container}>
-            <Stack direction='row' spacing={4}>
-                <Button size='xs' colorScheme='purple' variant={view ? ('outline'):('solid')} onClick={showEditor}>
-                    Write
-                </Button>
-                <Button size='xs' colorScheme='purple' variant={view ? ('solid'):('outline')} onClick={showPreview}>
-                    Preview
-                </Button>
-                <Button size='xs' rightIcon={<MdInsertLink/>} colorScheme='purple' variant='outline' onClick={insertLink}>
-                    Link
-                </Button>
-                <Button size='xs' colorScheme='purple' variant='outline' onClick={insertBold}>B</Button>
-            </Stack>
-            {view ? ( // Conditionally render markdown or preview based on toggle state
-                <ReactMarkdown>{input}</ReactMarkdown>
-            ) : <div className={styles.inputContainer}>
-                    <textarea
-                        id='myEditor'
-                        style={{
-                            maxWidth: maxWidth ? maxWidth + 'ch' : '',
-                            minWidth: minWidth ? minWidth + 'ch' : '',
-                        }}
-                        rows={rows}
-                        className={styles.text}
-                        // onFocus={() => setIsFocused(true)}
-                        // onBlur={() => setIsFocused(false)}
-                        value={input}
-                        onChange={handleInputChange}
-                        placeholder="Beskrivelse"
-                        // cols={50}
-                        />
-                </div> }
-            
+        <div className={styles.markdown_container}>
 
             
-            {/* {label && <label className={getLabelStyle()}>{label}</label>} */}
+
+            <div className={styles.fuck}>
+                <Stack direction='row' spacing={2} justify={'space-between'}>
+                    <Button size='xs' colorScheme='purple' variant={view ? ('outline'):('solid')} onClick={() => setShowPreview(false)}>
+                        Write
+                    </Button>
+                    <Button size='xs' colorScheme='purple' variant={view ? ('solid'):('outline')} onClick={() => setShowPreview(true)}>
+                        Preview
+                    </Button>
+                    <Button size='xs' rightIcon={<MdInsertLink/>} colorScheme='purple' variant='outline' onClick={insertLink}>
+                        Link
+                    </Button>
+                    <Button size='xs' colorScheme='purple' variant='outline' onClick={insertBold}>B</Button>
+                    <Button size='xs' colorScheme='purple' variant='outline' onClick={insertItalic}>Italic</Button>
+                    <Button size='xs' colorScheme='purple' variant='outline' onClick={insertHeader}>H</Button>
+                    <Button size='xs' colorScheme='purple' variant={showEmoji ? 'solid' : 'outline'} onClick={() =>setShowEmoji(!showEmoji)}>Emoji</Button>
+                </Stack>
+
+            </div>
+            <div className={styles.container}>
+                {/* <Stack direction='row' spacing={2} justify={'end'}>
+                </Stack> */}
+
+                {view ? ( // Conditionally render markdown or preview based on toggle state
+                    <ReactMarkdown className={styles.preview}>{input}</ReactMarkdown>
+                    ) : (<div className={styles.inputContainer}>
+                        <textarea
+                            id='myEditor'
+                            style={{
+                                maxWidth: maxWidth ? maxWidth + 'ch' : '',
+                                minWidth: minWidth ? minWidth + 'ch' : '',
+                            }}
+                            rows={rows}
+                            className={styles.text}
+                            onFocus={() => setIsFocused(true)}
+                            onBlur={() => setIsFocused(false)}
+                            value={input}
+                            onChange={(e) => {
+                                setInput(e.target.value);
+                                onChange && onChange(e);
+                              }}
+                            // placeholder="Beskrivelse"
+                            // cols={50}
+                            {...rest}
+                            />
+                    </div>)
+                }
+                {label && <label className={getLabelStyle()}>{label}</label>}
+                
+
+                
+                {showEmoji ? (
+                    <div style={{display: 'flex'}}>
+                        <EmojiPicker onEmojiClick={onClickEmoji} />
+                    </div>) : (
+                    <div style={{display: 'none'}}>
+                        <EmojiPicker onEmojiClick={onClickEmoji} />
+                    </div>)
+                }
+
+                
+                {/* <Suspense fallback={<div>Loading...</div>}>
+                    <Lazycomponent/>
+                </Suspense> */}
+                
+
+                {error && (
+                    <div className={styles.errors}>
+                    {error.map((err, index: number) =>
+                        error.length > 1 ? <li key={index}>{err}</li> : err
+                    )}
+                    </div>
+                )}
+                
+            </div>
+            {/* <Suspense fallback={<div>Loading...</div>}>
+                <Lazycomponent/>
+            </Suspense> */}
         </div>
     );
 };
diff --git a/src/components/atoms/markdown/markdown.module.scss b/src/components/atoms/markdown/markdown.module.scss
new file mode 100644
index 00000000..50301275
--- /dev/null
+++ b/src/components/atoms/markdown/markdown.module.scss
@@ -0,0 +1,48 @@
+@import 'styles/text.scss';
+
+.markdown_container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: flex-start;
+}
+// .container {
+//     // align-items: end;
+//     // background-color: aqua;
+//     // display: flex;
+//     // text-align: center;
+
+//     // textarea {
+//       //   padding-top: 50px;
+//       // }
+//       // div {
+//         //   align-items: end;
+//         //   // background-color: aqua;
+//         // }
+//       }
+.fuck {
+    width: 100%;
+    // align-items: end;
+    justify-content: space-between;
+    padding-bottom: 3%;
+    // margin-bottom: 100px;
+  }
+.preview {
+  padding: 5%;
+  border: 2px solid plum;
+  border-radius: 5px;
+  text-align: start;
+  
+}
+      
+//   .fuck {
+//     width: 100%;
+//     // align-items: center;
+//     // align-content: center;
+//     // align-self: center;
+//     background-color: aqua;
+// }
+// .container .fuck {
+//     align-items: end;
+// }
\ No newline at end of file
diff --git a/src/components/molecules/event/eventBody/EventBody.tsx b/src/components/molecules/event/eventBody/EventBody.tsx
index de7f245a..a10188b0 100644
--- a/src/components/molecules/event/eventBody/EventBody.tsx
+++ b/src/components/molecules/event/eventBody/EventBody.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState, Suspense, lazy } from 'react';
 import styles from './eventBody.module.scss';
 import { transformDate } from 'utils/timeConverter';
 import EventButton from '../eventButton/EventButton';
@@ -25,6 +25,8 @@ import { AuthenticateContext, RoleOptions, Roles } from 'contexts/authProvider';
 import ReactMarkdown from 'react-markdown';
 import FileSelector from 'components/atoms/fileSelector/FileSelector';
 import { useToast } from 'hooks/useToast';
+// import MarkdownEditor from 'components/atoms/markdown/MarkdownEditor';
+const Lazycomponent = lazy(() => import('components/atoms/markdown/MarkdownEditor'));
 
 // TODO extend the admin features
 export const EditEvent: React.FC<{ event: Event; setEdit: () => void }> = ({
@@ -200,14 +202,35 @@ export const EditEvent: React.FC<{ event: Event; setEdit: () => void }> = ({
               style={{ boxSizing: 'border-box', width: '100%' }}
             />
             <br />
-            <Textarea
+            <div>
+
+              <Suspense fallback={<div>Loading...</div>}>
+                <Lazycomponent
+                  name={'description'}
+                  onChange={onFieldChange}
+                  label={'Beskrivelse'}
+                  value={fields['description'].value ?? ''}
+                  error={fields['description'].error}
+                  style={{ boxSizing: 'border-box', width: '100%' }}
+                />
+              </Suspense>
+            </div>
+            {/* <MarkdownEditor
               name={'description'}
               onChange={onFieldChange}
               label={'Beskrivelse'}
               value={fields['description'].value ?? ''}
               error={fields['description'].error}
               style={{ boxSizing: 'border-box', width: '100%' }}
-            />
+            /> */}
+            {/* <Textarea
+              name={'description'}
+              onChange={onFieldChange}
+              label={'Beskrivelse'}
+              value={fields['description'].value ?? ''}
+              error={fields['description'].error}
+              style={{ boxSizing: 'border-box', width: '100%' }}
+            /> */}
             <FileSelector
               setFile={setFile}
               text="Endre arrangementbilde"
diff --git a/src/components/molecules/forms/eventForm/EventForm.tsx b/src/components/molecules/forms/eventForm/EventForm.tsx
index 79083825..7da90ca8 100644
--- a/src/components/molecules/forms/eventForm/EventForm.tsx
+++ b/src/components/molecules/forms/eventForm/EventForm.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, Suspense, lazy } from 'react';
 import useForm from 'hooks/useForm';
 import TextField from 'components/atoms/textfield/Textfield';
 import {
@@ -17,8 +17,9 @@ import styles from './eventForm.module.scss';
 import { Button } from '@chakra-ui/react';
 import { createEvent, uploadEventPicture } from 'api';
 import { useHistory } from 'react-router-dom';
-import Textarea from 'components/atoms/textarea/Textarea';
+// import Textarea from 'components/atoms/textarea/Textarea';
 import MarkdownEditor from 'components/atoms/markdown/MarkdownEditor';
+const Lazycomponent = lazy(() => import('components/atoms/markdown/MarkdownEditor'));
 import ToggleButton from 'components/atoms/toggleButton/ToggleButton';
 import DropdownHeader from 'components/atoms/dropdown/dropdownHeader/DropdownHeader';
 import { useToast } from 'hooks/useToast';
@@ -189,14 +190,26 @@ const EventForm = () => {
           error={fields['maxParticipants'].error}
         />
 
-        <Textarea
+        {/* <Suspense fallback={<div>Loading...</div>}>
+          <Lazycomponent
+            name={'description'}
+            label={'Beskrivelse'}
+            minWidth={25}
+            onChange={onFieldChange}
+            resize={true}
+            error={fields['description'].error}
+          />
+        </Suspense> */}
+
+
+        {/* <Textarea
           name={'description'}
           label={'Beskrivelse'}
           minWidth={25}
           onChange={onFieldChange}
           resize={true}
           error={fields['description'].error}
-        />
+        /> */}
 
         <MarkdownEditor
           name={'description'}
diff --git a/yarn.lock b/yarn.lock
index 385e31e5..b2d3c799 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5091,6 +5091,13 @@ emittery@^0.8.1:
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.8.1.tgz#bb23cc86d03b30aa75a7f734819dee2e1ba70860"
   integrity sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==
 
+emoji-picker-react@^4.8.0:
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/emoji-picker-react/-/emoji-picker-react-4.8.0.tgz#1c0a888cacd2be8f93cf9620c4fe3d8306a822c1"
+  integrity sha512-gKv+NOM2FjNAokXqlhhmDJMLp1hBTx4X+OoYrPAK1qpTVBseoeybtqPBR1NXixTow7Vbxv1WOuI3SSTiEB089A==
+  dependencies:
+    flairup "0.0.38"
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
@@ -5818,6 +5825,11 @@ find-up@^5.0.0:
     locate-path "^6.0.0"
     path-exists "^4.0.0"
 
+flairup@0.0.38:
+  version "0.0.38"
+  resolved "https://registry.yarnpkg.com/flairup/-/flairup-0.0.38.tgz#62216990a8317a1b07d1d816033624c5b2130f31"
+  integrity sha512-W9QA5TM7eYNlGoBYwfVn/o6v4yWBCxfq4+EJ5w774oFeyWvVWnYq6Dgt4CJltjG9y/lPwbOqz3jSSr8K66ToGg==
+
 flat-cache@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
@@ -9398,11 +9410,6 @@ react-scripts@^5.0.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
-react-snow@^0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/react-snow/-/react-snow-0.0.1.tgz#92189142cf7ed68e15641ce3e951c6a9fe402644"
-  integrity sha512-YkgZZ2hjdzBuVa3ahiWxzBh5rjpMU0BLwRjiFXhJ6sGBvet80wZmQfxUbb0zAzQgdIK+lhlpnmzjE+sedU7dPQ==
-
 react-snowfall@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/react-snowfall/-/react-snowfall-1.2.1.tgz#68cab6a1d05aa7c3211bce96a3a97977ca7dc57f"

From d73aaa92971312d94b993c380c027d4ddfdcf3fb Mon Sep 17 00:00:00 2001
From: Stian Alexander Solli <stianasolli@hotmail.com>
Date: Wed, 14 Aug 2024 21:35:24 +0200
Subject: [PATCH 04/11] Added emoji-picker

---
 package.json |  2 +-
 yarn.lock    | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index cf6904ba..e27dc15c 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "classnames": "^2.3.1",
     "echarts": "^5.4.0",
     "echarts-for-react": "^3.0.2",
-    "emoji-picker-react": "^4.8.0",
+    "emoji-picker-react": "^4.11.1",
     "env-cmd": "^10.1.0",
     "eslint": "^7.11.0",
     "framer-motion": "^10.12.18",
diff --git a/yarn.lock b/yarn.lock
index b2d3c799..daab1d86 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5091,12 +5091,12 @@ emittery@^0.8.1:
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.8.1.tgz#bb23cc86d03b30aa75a7f734819dee2e1ba70860"
   integrity sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==
 
-emoji-picker-react@^4.8.0:
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/emoji-picker-react/-/emoji-picker-react-4.8.0.tgz#1c0a888cacd2be8f93cf9620c4fe3d8306a822c1"
-  integrity sha512-gKv+NOM2FjNAokXqlhhmDJMLp1hBTx4X+OoYrPAK1qpTVBseoeybtqPBR1NXixTow7Vbxv1WOuI3SSTiEB089A==
+emoji-picker-react@^4.11.1:
+  version "4.11.1"
+  resolved "https://registry.yarnpkg.com/emoji-picker-react/-/emoji-picker-react-4.11.1.tgz#5be830d50b9ea8a606c8a4d46dfe5e0021cc2e93"
+  integrity sha512-e3vhGcZyyNu7GqJaXzgoVxtASXs97duAP/vh7aL88dHJcW72DjuwYMjipzNBCjPFxXwUiQas483SKCAxPwwaUQ==
   dependencies:
-    flairup "0.0.38"
+    flairup "1.0.0"
 
 emoji-regex@^8.0.0:
   version "8.0.0"
@@ -5825,10 +5825,10 @@ find-up@^5.0.0:
     locate-path "^6.0.0"
     path-exists "^4.0.0"
 
-flairup@0.0.38:
-  version "0.0.38"
-  resolved "https://registry.yarnpkg.com/flairup/-/flairup-0.0.38.tgz#62216990a8317a1b07d1d816033624c5b2130f31"
-  integrity sha512-W9QA5TM7eYNlGoBYwfVn/o6v4yWBCxfq4+EJ5w774oFeyWvVWnYq6Dgt4CJltjG9y/lPwbOqz3jSSr8K66ToGg==
+flairup@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/flairup/-/flairup-1.0.0.tgz#d3af0052ad02734c12d2446608a869498adb351b"
+  integrity sha512-IKlE+pNvL2R+kVL1kEhUYqRxVqeFnjiIvHWDMLFXNaqyUdFXQM2wte44EfMYJNHkW16X991t2Zg8apKkhv7OBA==
 
 flat-cache@^3.0.4:
   version "3.0.4"

From 44dbcd855c56c8e362b15a5d231c5e6c927ca484 Mon Sep 17 00:00:00 2001
From: Stian Alexander Solli <stianasolli@hotmail.com>
Date: Sat, 17 Aug 2024 18:49:16 +0200
Subject: [PATCH 05/11] Fixed focus bug when pushing buttons

---
 .../atoms/markdown/MarkdownEditor.tsx         | 45 ++++++++++++-------
 1 file changed, 30 insertions(+), 15 deletions(-)

diff --git a/src/components/atoms/markdown/MarkdownEditor.tsx b/src/components/atoms/markdown/MarkdownEditor.tsx
index 0599f507..378e801f 100644
--- a/src/components/atoms/markdown/MarkdownEditor.tsx
+++ b/src/components/atoms/markdown/MarkdownEditor.tsx
@@ -1,4 +1,4 @@
-import React, { useState, ChangeEvent, TextareaHTMLAttributes, useEffect, Suspense} from 'react';
+import React, { useState, ChangeEvent, TextareaHTMLAttributes, useEffect, Suspense, useRef} from 'react';
 import ReactMarkdown from 'react-markdown';
 import styles from './markdown.module.scss';
 import { Button, Stack } from '@chakra-ui/react'
@@ -7,11 +7,11 @@ import EmojiPicker, { EmojiClickData } from 'emoji-picker-react';
 // const Lazycomponent = lazy(() => import('emoji-picker-react'))
 
 
-const Lazycomponent = React.lazy(() =>
-  import("emoji-picker-react").then(module => {
-    return { default: module.default };
-  })
-);
+// const Lazycomponent = React.lazy(() =>
+//   import("emoji-picker-react").then(module => {
+//     return { default: module.default };
+//   })
+// );
 
 
 interface MarkdownEditorProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
@@ -45,6 +45,16 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
     //     setInput(event.target.value);
     // };
 
+
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+    const handleButtonClick = (callback: () => void) => {
+        callback();
+        if (textareaRef.current) {
+            textareaRef.current.focus();
+        }
+    };
+
     const getLabelStyle = () => {
         return !!input || isFocused
           ? `${styles.label} ${styles.styledLabel}`
@@ -62,7 +72,8 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
 
     
     const insertLink = () => {
-        const textarea = document.getElementById('myEditor') as HTMLTextAreaElement;
+        // const textarea = document.getElementById('myEditor') as HTMLTextAreaElement;
+        const textarea = textareaRef.current;
         const text = "[Display text](URL)"
         if (textarea !== null){
             const position = textarea.selectionStart;
@@ -74,11 +85,12 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
             // Insert the new text at the cursor position
             textarea.value = before + text + after;
             setInput(textarea.value)
-            textarea.selectionStart = textarea.selectionEnd = position + text.length-1;
+            textarea.selectionStart = textarea.selectionEnd = position + text.length-1;            
         }
     };
     const insertBold = () => {
-        const textarea = document.getElementById('myEditor') as HTMLTextAreaElement;
+        // const textarea = document.getElementById('myEditor') as HTMLTextAreaElement;
+        const textarea = textareaRef.current;
         const text = "****"
         if (textarea !== null){
             const position = textarea.selectionStart;
@@ -92,7 +104,8 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
         }
     };
     const insertItalic = () => {
-        const textarea = document.getElementById('myEditor') as HTMLTextAreaElement;
+        // const textarea = document.getElementById('myEditor') as HTMLTextAreaElement;
+        const textarea = textareaRef.current;
         const text = "**"
         if (textarea !== null){
             const position = textarea.selectionStart;
@@ -106,7 +119,8 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
         }
     };
     const insertHeader = () => {
-        const textarea = document.getElementById('myEditor') as HTMLTextAreaElement;
+        // const textarea = document.getElementById('myEditor') as HTMLTextAreaElement;
+        const textarea = textareaRef.current;
         const text = "### "
         if (textarea !== null){
             const position = textarea.selectionStart;
@@ -149,12 +163,12 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
                     <Button size='xs' colorScheme='purple' variant={view ? ('solid'):('outline')} onClick={() => setShowPreview(true)}>
                         Preview
                     </Button>
-                    <Button size='xs' rightIcon={<MdInsertLink/>} colorScheme='purple' variant='outline' onClick={insertLink}>
+                    <Button size='xs' rightIcon={<MdInsertLink/>} colorScheme='purple' variant='outline' onClick={() => handleButtonClick(insertLink)}>
                         Link
                     </Button>
-                    <Button size='xs' colorScheme='purple' variant='outline' onClick={insertBold}>B</Button>
-                    <Button size='xs' colorScheme='purple' variant='outline' onClick={insertItalic}>Italic</Button>
-                    <Button size='xs' colorScheme='purple' variant='outline' onClick={insertHeader}>H</Button>
+                    <Button size='xs' colorScheme='purple' variant='outline' onClick={() => handleButtonClick(insertBold)}>B</Button>
+                    <Button size='xs' colorScheme='purple' variant='outline' onClick={() => handleButtonClick(insertItalic)}>Italic</Button>
+                    <Button size='xs' colorScheme='purple' variant='outline' onClick={() => handleButtonClick(insertHeader)}>H</Button>
                     <Button size='xs' colorScheme='purple' variant={showEmoji ? 'solid' : 'outline'} onClick={() =>setShowEmoji(!showEmoji)}>Emoji</Button>
                 </Stack>
 
@@ -168,6 +182,7 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
                     ) : (<div className={styles.inputContainer}>
                         <textarea
                             id='myEditor'
+                            ref={textareaRef}
                             style={{
                                 maxWidth: maxWidth ? maxWidth + 'ch' : '',
                                 minWidth: minWidth ? minWidth + 'ch' : '',

From e50445af86b676432fba5ce5ba1104270a898f23 Mon Sep 17 00:00:00 2001
From: Stian Alexander Solli <stianasolli@hotmail.com>
Date: Sat, 17 Aug 2024 19:29:37 +0200
Subject: [PATCH 06/11] Cleanup code

---
 .../atoms/markdown/MarkdownEditor.tsx         | 122 +++++-------------
 .../atoms/markdown/markdown.module.scss       |  32 +----
 .../molecules/event/eventBody/EventBody.tsx   |  32 +----
 .../molecules/forms/eventForm/EventForm.tsx   |  26 +---
 4 files changed, 43 insertions(+), 169 deletions(-)

diff --git a/src/components/atoms/markdown/MarkdownEditor.tsx b/src/components/atoms/markdown/MarkdownEditor.tsx
index 378e801f..b8e32617 100644
--- a/src/components/atoms/markdown/MarkdownEditor.tsx
+++ b/src/components/atoms/markdown/MarkdownEditor.tsx
@@ -1,17 +1,9 @@
-import React, { useState, ChangeEvent, TextareaHTMLAttributes, useEffect, Suspense, useRef} from 'react';
+import React, { useState, TextareaHTMLAttributes, useEffect, useRef} from 'react';
 import ReactMarkdown from 'react-markdown';
 import styles from './markdown.module.scss';
 import { Button, Stack } from '@chakra-ui/react'
-import { MdInsertLink , MdFormatBold, MdFormatItalic } from "react-icons/md"
+import { MdInsertLink } from "react-icons/md"
 import EmojiPicker, { EmojiClickData } from 'emoji-picker-react';
-// const Lazycomponent = lazy(() => import('emoji-picker-react'))
-
-
-// const Lazycomponent = React.lazy(() =>
-//   import("emoji-picker-react").then(module => {
-//     return { default: module.default };
-//   })
-// );
 
 
 interface MarkdownEditorProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
@@ -34,18 +26,11 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
     ...rest
 }) => {
     const [input, setInput] = useState(value ? value : "");
-    // const [input, setInput] = useState(value);
     const [isFocused, setIsFocused] = useState(false);
     // 2 is textarea default value for rows
     const [rows, setRows] = useState(2);
     const [view, setShowPreview] = useState(false); // Add state variable for toggle
     const [showEmoji, setShowEmoji] = useState(false);
-
-    // const handleInputChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
-    //     setInput(event.target.value);
-    // };
-
-
     const textareaRef = useRef<HTMLTextAreaElement>(null);
 
     const handleButtonClick = (callback: () => void) => {
@@ -71,71 +56,45 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
       }, [input, resize]);
 
     
-    const insertLink = () => {
-        // const textarea = document.getElementById('myEditor') as HTMLTextAreaElement;
-        const textarea = textareaRef.current;
-        const text = "[Display text](URL)"
-        if (textarea !== null){
-            const position = textarea.selectionStart;
-            // const end = position + text.length;
-            // textarea.setRangeText(text, position, end, 'select');
-            const before = textarea.value.substring(0, position);
-            const after = textarea.value.substring(position, textarea.value.length);
+    const insertText = (text: string, offset: number) => {
 
-            // Insert the new text at the cursor position
-            textarea.value = before + text + after;
-            setInput(textarea.value)
-            textarea.selectionStart = textarea.selectionEnd = position + text.length-1;            
+        const textarea = textareaRef.current;
+        if (textarea === null) {
+            return;
         }
+        const position = textarea.selectionStart;
+        const before = textarea.value.substring(0, position);
+        const after = textarea.value.substring(position, textarea.value.length);
+
+        // Insert the new text at the cursor position
+        textarea.value = before + text + after;
+        setInput(textarea.value)
+        textarea.selectionStart = textarea.selectionEnd = position + text.length-offset;   
+    }
+
+
+    const insertLink = () => {
+        const text = "[Display text](https://www.example.com)"
+        insertText(text, 1)
     };
+
     const insertBold = () => {
-        // const textarea = document.getElementById('myEditor') as HTMLTextAreaElement;
-        const textarea = textareaRef.current;
         const text = "****"
-        if (textarea !== null){
-            const position = textarea.selectionStart;
-            const before = textarea.value.substring(0, position);
-            const after = textarea.value.substring(position, textarea.value.length);
-
-            // Insert the new text at the cursor position
-            textarea.value = before + text + after;
-            setInput(textarea.value)
-            textarea.selectionStart = textarea.selectionEnd = position + text.length-2;
-        }
+        insertText(text, 2)
     };
+
     const insertItalic = () => {
-        // const textarea = document.getElementById('myEditor') as HTMLTextAreaElement;
-        const textarea = textareaRef.current;
         const text = "**"
-        if (textarea !== null){
-            const position = textarea.selectionStart;
-            const before = textarea.value.substring(0, position);
-            const after = textarea.value.substring(position, textarea.value.length);
-
-            // Insert the new text at the cursor position
-            textarea.value = before + text + after;
-            setInput(textarea.value)
-            textarea.selectionStart = textarea.selectionEnd = position + text.length-1;
-        }
+        insertText(text, 1)
     };
+
     const insertHeader = () => {
-        // const textarea = document.getElementById('myEditor') as HTMLTextAreaElement;
-        const textarea = textareaRef.current;
         const text = "### "
-        if (textarea !== null){
-            const position = textarea.selectionStart;
-            const before = textarea.value.substring(0, position);
-            const after = textarea.value.substring(position, textarea.value.length);
-
-            // Insert the new text at the cursor position
-            textarea.value = before + text + after;
-            setInput(textarea.value)
-            textarea.selectionStart = textarea.selectionEnd = position + text.length;
-        }
+        insertText(text, 0)
     };
 
     const onClickEmoji = (EmojiObject: EmojiClickData) => {
-        const textarea = document.getElementById('myEditor') as HTMLTextAreaElement;
+        const textarea = textareaRef.current;
         if (textarea !== null){
             const position = textarea.selectionStart;
             const before = textarea.value.substring(0, position);
@@ -151,11 +110,9 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
     
 
     return (
-        <div className={styles.markdown_container}>
-
-            
+        <div className={styles.markdownContainer}>
 
-            <div className={styles.fuck}>
+            <div className={styles.buttonContainer}>
                 <Stack direction='row' spacing={2} justify={'space-between'}>
                     <Button size='xs' colorScheme='purple' variant={view ? ('outline'):('solid')} onClick={() => setShowPreview(false)}>
                         Write
@@ -174,14 +131,13 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
 
             </div>
             <div className={styles.container}>
-                {/* <Stack direction='row' spacing={2} justify={'end'}>
-                </Stack> */}
+
+                {label && <label className={getLabelStyle()}>{label}</label>}
 
                 {view ? ( // Conditionally render markdown or preview based on toggle state
                     <ReactMarkdown className={styles.preview}>{input}</ReactMarkdown>
                     ) : (<div className={styles.inputContainer}>
                         <textarea
-                            id='myEditor'
                             ref={textareaRef}
                             style={{
                                 maxWidth: maxWidth ? maxWidth + 'ch' : '',
@@ -196,15 +152,11 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
                                 setInput(e.target.value);
                                 onChange && onChange(e);
                               }}
-                            // placeholder="Beskrivelse"
-                            // cols={50}
+                            cols={50}
                             {...rest}
                             />
                     </div>)
                 }
-                {label && <label className={getLabelStyle()}>{label}</label>}
-                
-
                 
                 {showEmoji ? (
                     <div style={{display: 'flex'}}>
@@ -214,12 +166,7 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
                         <EmojiPicker onEmojiClick={onClickEmoji} />
                     </div>)
                 }
-
-                
-                {/* <Suspense fallback={<div>Loading...</div>}>
-                    <Lazycomponent/>
-                </Suspense> */}
-                
+         
 
                 {error && (
                     <div className={styles.errors}>
@@ -230,9 +177,6 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
                 )}
                 
             </div>
-            {/* <Suspense fallback={<div>Loading...</div>}>
-                <Lazycomponent/>
-            </Suspense> */}
         </div>
     );
 };
diff --git a/src/components/atoms/markdown/markdown.module.scss b/src/components/atoms/markdown/markdown.module.scss
index 50301275..fd465c99 100644
--- a/src/components/atoms/markdown/markdown.module.scss
+++ b/src/components/atoms/markdown/markdown.module.scss
@@ -1,48 +1,22 @@
 @import 'styles/text.scss';
 
-.markdown_container {
+.markdownContainer {
   position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
   justify-content: flex-start;
 }
-// .container {
-//     // align-items: end;
-//     // background-color: aqua;
-//     // display: flex;
-//     // text-align: center;
 
-//     // textarea {
-//       //   padding-top: 50px;
-//       // }
-//       // div {
-//         //   align-items: end;
-//         //   // background-color: aqua;
-//         // }
-//       }
-.fuck {
+.buttonContainer {
     width: 100%;
-    // align-items: end;
     justify-content: space-between;
     padding-bottom: 3%;
-    // margin-bottom: 100px;
   }
+
 .preview {
   padding: 5%;
   border: 2px solid plum;
   border-radius: 5px;
   text-align: start;
-  
 }
-      
-//   .fuck {
-//     width: 100%;
-//     // align-items: center;
-//     // align-content: center;
-//     // align-self: center;
-//     background-color: aqua;
-// }
-// .container .fuck {
-//     align-items: end;
-// }
\ No newline at end of file
diff --git a/src/components/molecules/event/eventBody/EventBody.tsx b/src/components/molecules/event/eventBody/EventBody.tsx
index 9674f6c0..c32ac5f7 100644
--- a/src/components/molecules/event/eventBody/EventBody.tsx
+++ b/src/components/molecules/event/eventBody/EventBody.tsx
@@ -1,9 +1,8 @@
-import { useCallback, useContext, useEffect, useState, Suspense, lazy } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import styles from './eventBody.module.scss';
 import { transformDate } from 'utils/timeConverter';
 import EventButton from '../eventButton/EventButton';
 import TextField from 'components/atoms/textfield/Textfield';
-import Textarea from 'components/atoms/textarea/Textarea';
 import { Button } from '@chakra-ui/react';
 import ToggleButton from 'components/atoms/toggleButton/ToggleButton';
 import { Text } from '@chakra-ui/react';
@@ -27,8 +26,8 @@ import { AuthenticateContext, RoleOptions, Roles } from 'contexts/authProvider';
 import ReactMarkdown from 'react-markdown';
 import FileSelector from 'components/atoms/fileSelector/FileSelector';
 import { useToast } from 'hooks/useToast';
-// import MarkdownEditor from 'components/atoms/markdown/MarkdownEditor';
-const Lazycomponent = lazy(() => import('components/atoms/markdown/MarkdownEditor'));
+import MarkdownEditor from 'components/atoms/markdown/MarkdownEditor';
+
 
 // TODO extend the admin features
 export const EditEvent: React.FC<{ event: Event; setEdit: () => void }> = ({
@@ -204,35 +203,14 @@ export const EditEvent: React.FC<{ event: Event; setEdit: () => void }> = ({
               style={{ boxSizing: 'border-box', width: '100%' }}
             />
             <br />
-            <div>
-
-              <Suspense fallback={<div>Loading...</div>}>
-                <Lazycomponent
-                  name={'description'}
-                  onChange={onFieldChange}
-                  label={'Beskrivelse'}
-                  value={fields['description'].value ?? ''}
-                  error={fields['description'].error}
-                  style={{ boxSizing: 'border-box', width: '100%' }}
-                />
-              </Suspense>
-            </div>
-            {/* <MarkdownEditor
+            <MarkdownEditor
               name={'description'}
               onChange={onFieldChange}
               label={'Beskrivelse'}
               value={fields['description'].value ?? ''}
               error={fields['description'].error}
               style={{ boxSizing: 'border-box', width: '100%' }}
-            /> */}
-            {/* <Textarea
-              name={'description'}
-              onChange={onFieldChange}
-              label={'Beskrivelse'}
-              value={fields['description'].value ?? ''}
-              error={fields['description'].error}
-              style={{ boxSizing: 'border-box', width: '100%' }}
-            /> */}
+            />
             <FileSelector
               setFile={setFile}
               text="Endre arrangementbilde"
diff --git a/src/components/molecules/forms/eventForm/EventForm.tsx b/src/components/molecules/forms/eventForm/EventForm.tsx
index 7da90ca8..49f9377e 100644
--- a/src/components/molecules/forms/eventForm/EventForm.tsx
+++ b/src/components/molecules/forms/eventForm/EventForm.tsx
@@ -1,4 +1,4 @@
-import { useState, Suspense, lazy } from 'react';
+import { useState } from 'react';
 import useForm from 'hooks/useForm';
 import TextField from 'components/atoms/textfield/Textfield';
 import {
@@ -17,9 +17,7 @@ import styles from './eventForm.module.scss';
 import { Button } from '@chakra-ui/react';
 import { createEvent, uploadEventPicture } from 'api';
 import { useHistory } from 'react-router-dom';
-// import Textarea from 'components/atoms/textarea/Textarea';
 import MarkdownEditor from 'components/atoms/markdown/MarkdownEditor';
-const Lazycomponent = lazy(() => import('components/atoms/markdown/MarkdownEditor'));
 import ToggleButton from 'components/atoms/toggleButton/ToggleButton';
 import DropdownHeader from 'components/atoms/dropdown/dropdownHeader/DropdownHeader';
 import { useToast } from 'hooks/useToast';
@@ -181,6 +179,7 @@ const EventForm = () => {
           onChange={onFieldChange}
           error={fields['price'].error}
         />
+        
         <TextField
           name={'maxParticipants'}
           label={'Maks antall deltagere (valgfritt)'}
@@ -190,27 +189,6 @@ const EventForm = () => {
           error={fields['maxParticipants'].error}
         />
 
-        {/* <Suspense fallback={<div>Loading...</div>}>
-          <Lazycomponent
-            name={'description'}
-            label={'Beskrivelse'}
-            minWidth={25}
-            onChange={onFieldChange}
-            resize={true}
-            error={fields['description'].error}
-          />
-        </Suspense> */}
-
-
-        {/* <Textarea
-          name={'description'}
-          label={'Beskrivelse'}
-          minWidth={25}
-          onChange={onFieldChange}
-          resize={true}
-          error={fields['description'].error}
-        /> */}
-
         <MarkdownEditor
           name={'description'}
           label={'Beskrivelse'}

From 680d313ebd50b41a1a35e18fd63dd3da75615d5f Mon Sep 17 00:00:00 2001
From: Stian Alexander Solli <stianasolli@hotmail.com>
Date: Sat, 17 Aug 2024 19:38:14 +0200
Subject: [PATCH 07/11] Formatted code

---
 .../atoms/markdown/MarkdownEditor.tsx         | 380 ++++++++++--------
 .../atoms/markdown/markdown.module.scss       |   8 +-
 .../molecules/event/eventBody/EventBody.tsx   |   1 -
 .../molecules/forms/eventForm/EventForm.tsx   |   2 +-
 4 files changed, 213 insertions(+), 178 deletions(-)

diff --git a/src/components/atoms/markdown/MarkdownEditor.tsx b/src/components/atoms/markdown/MarkdownEditor.tsx
index b8e32617..bbb43db0 100644
--- a/src/components/atoms/markdown/MarkdownEditor.tsx
+++ b/src/components/atoms/markdown/MarkdownEditor.tsx
@@ -1,184 +1,220 @@
-import React, { useState, TextareaHTMLAttributes, useEffect, useRef} from 'react';
+import React, {
+  useState,
+  TextareaHTMLAttributes,
+  useEffect,
+  useRef,
+} from 'react';
 import ReactMarkdown from 'react-markdown';
 import styles from './markdown.module.scss';
-import { Button, Stack } from '@chakra-ui/react'
-import { MdInsertLink } from "react-icons/md"
+import { Button, Stack } from '@chakra-ui/react';
+import { MdInsertLink } from 'react-icons/md';
 import EmojiPicker, { EmojiClickData } from 'emoji-picker-react';
 
-
-interface MarkdownEditorProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
-    label?: string;
-    maxWidth?: number;
-    minWidth?: number;
-    error?: string[] | undefined;
-    resize?: boolean;
-    value?: string;
-  }
+interface MarkdownEditorProps
+  extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+  maxWidth?: number;
+  minWidth?: number;
+  error?: string[] | undefined;
+  resize?: boolean;
+  value?: string;
+}
 
 const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
-    error,
-    maxWidth,
-    minWidth,
-    label,
-    value,
-    resize,
-    onChange,
-    ...rest
+  error,
+  maxWidth,
+  minWidth,
+  label,
+  value,
+  resize,
+  onChange,
+  ...rest
 }) => {
-    const [input, setInput] = useState(value ? value : "");
-    const [isFocused, setIsFocused] = useState(false);
-    // 2 is textarea default value for rows
-    const [rows, setRows] = useState(2);
-    const [view, setShowPreview] = useState(false); // Add state variable for toggle
-    const [showEmoji, setShowEmoji] = useState(false);
-    const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-    const handleButtonClick = (callback: () => void) => {
-        callback();
-        if (textareaRef.current) {
-            textareaRef.current.focus();
-        }
-    };
-
-    const getLabelStyle = () => {
-        return !!input || isFocused
-          ? `${styles.label} ${styles.styledLabel}`
-          : styles.label;
-      };
-    
-      useEffect(() => {
-        if (!resize) {
-          return;
-        }
-        const rowlen = input ? input.toString().split('\n').length : 2;
-        const max = 14;
-        setRows(rowlen < max ? rowlen : max);
-      }, [input, resize]);
-
-    
-    const insertText = (text: string, offset: number) => {
-
-        const textarea = textareaRef.current;
-        if (textarea === null) {
-            return;
-        }
-        const position = textarea.selectionStart;
-        const before = textarea.value.substring(0, position);
-        const after = textarea.value.substring(position, textarea.value.length);
-
-        // Insert the new text at the cursor position
-        textarea.value = before + text + after;
-        setInput(textarea.value)
-        textarea.selectionStart = textarea.selectionEnd = position + text.length-offset;   
+  const [input, setInput] = useState(value ? value : '');
+  const [isFocused, setIsFocused] = useState(false);
+  // 2 is textarea default value for rows
+  const [rows, setRows] = useState(2);
+  const [view, setShowPreview] = useState(false); // Add state variable for toggle
+  const [showEmoji, setShowEmoji] = useState(false);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const handleButtonClick = (callback: () => void) => {
+    callback();
+    if (textareaRef.current) {
+      textareaRef.current.focus();
     }
+  };
 
+  const getLabelStyle = () => {
+    return !!input || isFocused
+      ? `${styles.label} ${styles.styledLabel}`
+      : styles.label;
+  };
 
-    const insertLink = () => {
-        const text = "[Display text](https://www.example.com)"
-        insertText(text, 1)
-    };
-
-    const insertBold = () => {
-        const text = "****"
-        insertText(text, 2)
-    };
-
-    const insertItalic = () => {
-        const text = "**"
-        insertText(text, 1)
-    };
-
-    const insertHeader = () => {
-        const text = "### "
-        insertText(text, 0)
-    };
-
-    const onClickEmoji = (EmojiObject: EmojiClickData) => {
-        const textarea = textareaRef.current;
-        if (textarea !== null){
-            const position = textarea.selectionStart;
-            const before = textarea.value.substring(0, position);
-            const after = textarea.value.substring(position, textarea.value.length);
-
-            // Insert the new text at the cursor position
-            textarea.value = before + EmojiObject.emoji + after;
-            setInput(textarea.value)
-            textarea.selectionStart = textarea.selectionEnd = position + EmojiObject.emoji.length;
-        }
-    };
-
-    
-
-    return (
-        <div className={styles.markdownContainer}>
-
-            <div className={styles.buttonContainer}>
-                <Stack direction='row' spacing={2} justify={'space-between'}>
-                    <Button size='xs' colorScheme='purple' variant={view ? ('outline'):('solid')} onClick={() => setShowPreview(false)}>
-                        Write
-                    </Button>
-                    <Button size='xs' colorScheme='purple' variant={view ? ('solid'):('outline')} onClick={() => setShowPreview(true)}>
-                        Preview
-                    </Button>
-                    <Button size='xs' rightIcon={<MdInsertLink/>} colorScheme='purple' variant='outline' onClick={() => handleButtonClick(insertLink)}>
-                        Link
-                    </Button>
-                    <Button size='xs' colorScheme='purple' variant='outline' onClick={() => handleButtonClick(insertBold)}>B</Button>
-                    <Button size='xs' colorScheme='purple' variant='outline' onClick={() => handleButtonClick(insertItalic)}>Italic</Button>
-                    <Button size='xs' colorScheme='purple' variant='outline' onClick={() => handleButtonClick(insertHeader)}>H</Button>
-                    <Button size='xs' colorScheme='purple' variant={showEmoji ? 'solid' : 'outline'} onClick={() =>setShowEmoji(!showEmoji)}>Emoji</Button>
-                </Stack>
-
-            </div>
-            <div className={styles.container}>
-
-                {label && <label className={getLabelStyle()}>{label}</label>}
-
-                {view ? ( // Conditionally render markdown or preview based on toggle state
-                    <ReactMarkdown className={styles.preview}>{input}</ReactMarkdown>
-                    ) : (<div className={styles.inputContainer}>
-                        <textarea
-                            ref={textareaRef}
-                            style={{
-                                maxWidth: maxWidth ? maxWidth + 'ch' : '',
-                                minWidth: minWidth ? minWidth + 'ch' : '',
-                            }}
-                            rows={rows}
-                            className={styles.text}
-                            onFocus={() => setIsFocused(true)}
-                            onBlur={() => setIsFocused(false)}
-                            value={input}
-                            onChange={(e) => {
-                                setInput(e.target.value);
-                                onChange && onChange(e);
-                              }}
-                            cols={50}
-                            {...rest}
-                            />
-                    </div>)
-                }
-                
-                {showEmoji ? (
-                    <div style={{display: 'flex'}}>
-                        <EmojiPicker onEmojiClick={onClickEmoji} />
-                    </div>) : (
-                    <div style={{display: 'none'}}>
-                        <EmojiPicker onEmojiClick={onClickEmoji} />
-                    </div>)
-                }
-         
-
-                {error && (
-                    <div className={styles.errors}>
-                    {error.map((err, index: number) =>
-                        error.length > 1 ? <li key={index}>{err}</li> : err
-                    )}
-                    </div>
-                )}
-                
-            </div>
-        </div>
-    );
+  useEffect(() => {
+    if (!resize) {
+      return;
+    }
+    const rowlen = input ? input.toString().split('\n').length : 2;
+    const max = 14;
+    setRows(rowlen < max ? rowlen : max);
+  }, [input, resize]);
+
+  const insertText = (text: string, offset: number) => {
+    const textarea = textareaRef.current;
+    if (textarea === null) {
+      return;
+    }
+    const position = textarea.selectionStart;
+    const before = textarea.value.substring(0, position);
+    const after = textarea.value.substring(position, textarea.value.length);
+
+    // Insert the new text at the cursor position
+    textarea.value = before + text + after;
+    setInput(textarea.value);
+    textarea.selectionStart = textarea.selectionEnd =
+      position + text.length - offset;
+  };
+
+  const insertLink = () => {
+    const text = '[Display text](https://www.example.com)';
+    insertText(text, 1);
+  };
+
+  const insertBold = () => {
+    const text = '****';
+    insertText(text, 2);
+  };
+
+  const insertItalic = () => {
+    const text = '**';
+    insertText(text, 1);
+  };
+
+  const insertHeader = () => {
+    const text = '### ';
+    insertText(text, 0);
+  };
+
+  const onClickEmoji = (EmojiObject: EmojiClickData) => {
+    const textarea = textareaRef.current;
+    if (textarea !== null) {
+      const position = textarea.selectionStart;
+      const before = textarea.value.substring(0, position);
+      const after = textarea.value.substring(position, textarea.value.length);
+
+      // Insert the new text at the cursor position
+      textarea.value = before + EmojiObject.emoji + after;
+      setInput(textarea.value);
+      textarea.selectionStart = textarea.selectionEnd =
+        position + EmojiObject.emoji.length;
+    }
+  };
+
+  return (
+    <div className={styles.markdownContainer}>
+      <div className={styles.buttonContainer}>
+        <Stack direction="row" spacing={2} justify={'space-between'}>
+          <Button
+            size="xs"
+            colorScheme="purple"
+            variant={view ? 'outline' : 'solid'}
+            onClick={() => setShowPreview(false)}>
+            Write
+          </Button>
+          <Button
+            size="xs"
+            colorScheme="purple"
+            variant={view ? 'solid' : 'outline'}
+            onClick={() => setShowPreview(true)}>
+            Preview
+          </Button>
+          <Button
+            size="xs"
+            rightIcon={<MdInsertLink />}
+            colorScheme="purple"
+            variant="outline"
+            onClick={() => handleButtonClick(insertLink)}>
+            Link
+          </Button>
+          <Button
+            size="xs"
+            colorScheme="purple"
+            variant="outline"
+            onClick={() => handleButtonClick(insertBold)}>
+            B
+          </Button>
+          <Button
+            size="xs"
+            colorScheme="purple"
+            variant="outline"
+            onClick={() => handleButtonClick(insertItalic)}>
+            Italic
+          </Button>
+          <Button
+            size="xs"
+            colorScheme="purple"
+            variant="outline"
+            onClick={() => handleButtonClick(insertHeader)}>
+            H
+          </Button>
+          <Button
+            size="xs"
+            colorScheme="purple"
+            variant={showEmoji ? 'solid' : 'outline'}
+            onClick={() => setShowEmoji(!showEmoji)}>
+            Emoji
+          </Button>
+        </Stack>
+      </div>
+      <div className={styles.container}>
+        {label && <label className={getLabelStyle()}>{label}</label>}
+
+        {view ? ( // Conditionally render markdown or preview based on toggle state
+          <ReactMarkdown className={styles.preview}>{input}</ReactMarkdown>
+        ) : (
+          <div className={styles.inputContainer}>
+            <textarea
+              ref={textareaRef}
+              style={{
+                maxWidth: maxWidth ? maxWidth + 'ch' : '',
+                minWidth: minWidth ? minWidth + 'ch' : '',
+              }}
+              rows={rows}
+              className={styles.text}
+              onFocus={() => setIsFocused(true)}
+              onBlur={() => setIsFocused(false)}
+              value={input}
+              onChange={(e) => {
+                setInput(e.target.value);
+                onChange && onChange(e);
+              }}
+              cols={50}
+              {...rest}
+            />
+          </div>
+        )}
+
+        {showEmoji ? (
+          <div style={{ display: 'flex' }}>
+            <EmojiPicker onEmojiClick={onClickEmoji} />
+          </div>
+        ) : (
+          <div style={{ display: 'none' }}>
+            <EmojiPicker onEmojiClick={onClickEmoji} />
+          </div>
+        )}
+
+        {error && (
+          <div className={styles.errors}>
+            {error.map((err, index: number) =>
+              error.length > 1 ? <li key={index}>{err}</li> : err
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
 };
 
-export default MarkdownEditor;
\ No newline at end of file
+export default MarkdownEditor;
diff --git a/src/components/atoms/markdown/markdown.module.scss b/src/components/atoms/markdown/markdown.module.scss
index fd465c99..6d74329f 100644
--- a/src/components/atoms/markdown/markdown.module.scss
+++ b/src/components/atoms/markdown/markdown.module.scss
@@ -9,10 +9,10 @@
 }
 
 .buttonContainer {
-    width: 100%;
-    justify-content: space-between;
-    padding-bottom: 3%;
-  }
+  width: 100%;
+  justify-content: space-between;
+  padding-bottom: 3%;
+}
 
 .preview {
   padding: 5%;
diff --git a/src/components/molecules/event/eventBody/EventBody.tsx b/src/components/molecules/event/eventBody/EventBody.tsx
index c32ac5f7..93c1d027 100644
--- a/src/components/molecules/event/eventBody/EventBody.tsx
+++ b/src/components/molecules/event/eventBody/EventBody.tsx
@@ -28,7 +28,6 @@ import FileSelector from 'components/atoms/fileSelector/FileSelector';
 import { useToast } from 'hooks/useToast';
 import MarkdownEditor from 'components/atoms/markdown/MarkdownEditor';
 
-
 // TODO extend the admin features
 export const EditEvent: React.FC<{ event: Event; setEdit: () => void }> = ({
   event,
diff --git a/src/components/molecules/forms/eventForm/EventForm.tsx b/src/components/molecules/forms/eventForm/EventForm.tsx
index 49f9377e..d320658b 100644
--- a/src/components/molecules/forms/eventForm/EventForm.tsx
+++ b/src/components/molecules/forms/eventForm/EventForm.tsx
@@ -179,7 +179,7 @@ const EventForm = () => {
           onChange={onFieldChange}
           error={fields['price'].error}
         />
-        
+
         <TextField
           name={'maxParticipants'}
           label={'Maks antall deltagere (valgfritt)'}

From 84f8f142f74ff2d2ea3a9a2cee8414c0bb54fd5a Mon Sep 17 00:00:00 2001
From: Stian Alexander Solli <stianasolli@hotmail.com>
Date: Sat, 17 Aug 2024 20:00:15 +0200
Subject: [PATCH 08/11] Added dropdown button for header levels

---
 .../atoms/markdown/MarkdownEditor.tsx         | 55 +++++++++++++++----
 1 file changed, 45 insertions(+), 10 deletions(-)

diff --git a/src/components/atoms/markdown/MarkdownEditor.tsx b/src/components/atoms/markdown/MarkdownEditor.tsx
index bbb43db0..3a5da45d 100644
--- a/src/components/atoms/markdown/MarkdownEditor.tsx
+++ b/src/components/atoms/markdown/MarkdownEditor.tsx
@@ -6,7 +6,14 @@ import React, {
 } from 'react';
 import ReactMarkdown from 'react-markdown';
 import styles from './markdown.module.scss';
-import { Button, Stack } from '@chakra-ui/react';
+import {
+  Button,
+  Stack,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+} from '@chakra-ui/react';
 import { MdInsertLink } from 'react-icons/md';
 import EmojiPicker, { EmojiClickData } from 'emoji-picker-react';
 
@@ -91,8 +98,8 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
     insertText(text, 1);
   };
 
-  const insertHeader = () => {
-    const text = '### ';
+  const insertHeader = (level: number) => {
+    const text = '#'.repeat(level) + ' ';
     insertText(text, 0);
   };
 
@@ -151,13 +158,41 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
             onClick={() => handleButtonClick(insertItalic)}>
             Italic
           </Button>
-          <Button
-            size="xs"
-            colorScheme="purple"
-            variant="outline"
-            onClick={() => handleButtonClick(insertHeader)}>
-            H
-          </Button>
+          <Menu>
+            <MenuButton
+              as={Button}
+              colorScheme="purple"
+              size="xs"
+              variant="outline">
+              H
+            </MenuButton>
+            <MenuList>
+              <MenuItem
+                onClick={() => handleButtonClick(() => insertHeader(1))}>
+                H1
+              </MenuItem>
+              <MenuItem
+                onClick={() => handleButtonClick(() => insertHeader(2))}>
+                H2
+              </MenuItem>
+              <MenuItem
+                onClick={() => handleButtonClick(() => insertHeader(3))}>
+                H3
+              </MenuItem>
+              <MenuItem
+                onClick={() => handleButtonClick(() => insertHeader(4))}>
+                H4
+              </MenuItem>
+              <MenuItem
+                onClick={() => handleButtonClick(() => insertHeader(5))}>
+                H5
+              </MenuItem>
+              <MenuItem
+                onClick={() => handleButtonClick(() => insertHeader(6))}>
+                H6
+              </MenuItem>
+            </MenuList>
+          </Menu>
           <Button
             size="xs"
             colorScheme="purple"

From 24de0542ba2698890871e25c632d0296d73e3f7d Mon Sep 17 00:00:00 2001
From: Stian Alexander Solli <stianasolli@hotmail.com>
Date: Sat, 17 Aug 2024 20:43:06 +0200
Subject: [PATCH 09/11] Refactored and fixed bug with cursor position after
 inserting emoji

---
 src/components/atoms/markdown/MarkdownEditor.tsx | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/components/atoms/markdown/MarkdownEditor.tsx b/src/components/atoms/markdown/MarkdownEditor.tsx
index 3a5da45d..63d4d083 100644
--- a/src/components/atoms/markdown/MarkdownEditor.tsx
+++ b/src/components/atoms/markdown/MarkdownEditor.tsx
@@ -104,17 +104,9 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
   };
 
   const onClickEmoji = (EmojiObject: EmojiClickData) => {
-    const textarea = textareaRef.current;
-    if (textarea !== null) {
-      const position = textarea.selectionStart;
-      const before = textarea.value.substring(0, position);
-      const after = textarea.value.substring(position, textarea.value.length);
-
-      // Insert the new text at the cursor position
-      textarea.value = before + EmojiObject.emoji + after;
-      setInput(textarea.value);
-      textarea.selectionStart = textarea.selectionEnd =
-        position + EmojiObject.emoji.length;
+    insertText(EmojiObject.emoji, 0);
+    if (textareaRef.current) {
+      textareaRef.current.focus();
     }
   };
 

From 4f9ca959ff0f0e7fe73c3ad342dfd8acaf237cba Mon Sep 17 00:00:00 2001
From: Stian Alexander Solli <stianasolli@hotmail.com>
Date: Sat, 17 Aug 2024 20:56:31 +0200
Subject: [PATCH 10/11] Set theme of emoji picker to same as browser/os, and
 added lazyloading of emojis

---
 src/components/atoms/markdown/MarkdownEditor.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/atoms/markdown/MarkdownEditor.tsx b/src/components/atoms/markdown/MarkdownEditor.tsx
index 63d4d083..bbd0bfb3 100644
--- a/src/components/atoms/markdown/MarkdownEditor.tsx
+++ b/src/components/atoms/markdown/MarkdownEditor.tsx
@@ -15,7 +15,7 @@ import {
   MenuItem,
 } from '@chakra-ui/react';
 import { MdInsertLink } from 'react-icons/md';
-import EmojiPicker, { EmojiClickData } from 'emoji-picker-react';
+import EmojiPicker, { EmojiClickData, Theme } from 'emoji-picker-react';
 
 interface MarkdownEditorProps
   extends TextareaHTMLAttributes<HTMLTextAreaElement> {
@@ -224,7 +224,7 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
 
         {showEmoji ? (
           <div style={{ display: 'flex' }}>
-            <EmojiPicker onEmojiClick={onClickEmoji} />
+            <EmojiPicker theme={Theme.AUTO} lazyLoadEmojis={true} onEmojiClick={onClickEmoji} />
           </div>
         ) : (
           <div style={{ display: 'none' }}>

From bb5d613ebd1a4ce25cfb9d6f2e488e9da8f57c70 Mon Sep 17 00:00:00 2001
From: Stian Alexander Solli <stianasolli@hotmail.com>
Date: Sun, 18 Aug 2024 01:28:30 +0200
Subject: [PATCH 11/11] Prettier

---
 src/components/atoms/markdown/MarkdownEditor.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/atoms/markdown/MarkdownEditor.tsx b/src/components/atoms/markdown/MarkdownEditor.tsx
index bbd0bfb3..dcd03aac 100644
--- a/src/components/atoms/markdown/MarkdownEditor.tsx
+++ b/src/components/atoms/markdown/MarkdownEditor.tsx
@@ -224,7 +224,11 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
 
         {showEmoji ? (
           <div style={{ display: 'flex' }}>
-            <EmojiPicker theme={Theme.AUTO} lazyLoadEmojis={true} onEmojiClick={onClickEmoji} />
+            <EmojiPicker
+              theme={Theme.AUTO}
+              lazyLoadEmojis={true}
+              onEmojiClick={onClickEmoji}
+            />
           </div>
         ) : (
           <div style={{ display: 'none' }}>