diff --git a/src/frontend/src/components/editors/NotesEditor.tsx b/src/frontend/src/components/editors/NotesEditor.tsx
index eefe996e3b..d869247917 100644
--- a/src/frontend/src/components/editors/NotesEditor.tsx
+++ b/src/frontend/src/components/editors/NotesEditor.tsx
@@ -1,4 +1,5 @@
import { t } from '@lingui/macro';
+import { ActionIcon, Group, Paper, Stack } from '@mantine/core';
import { notifications } from '@mantine/notifications';
import {
AdmonitionDirectiveDescriptor,
@@ -29,7 +30,12 @@ import {
toolbarPlugin
} from '@mdxeditor/editor';
import '@mdxeditor/editor/style.css';
-import { IconDeviceFloppy, IconEdit, IconEye } from '@tabler/icons-react';
+import {
+ IconDeviceFloppy,
+ IconEdit,
+ IconEye,
+ IconX
+} from '@tabler/icons-react';
import { useQuery } from '@tanstack/react-query';
import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
import React from 'react';
@@ -39,6 +45,7 @@ import { ApiEndpoints } from '../../enums/ApiEndpoints';
import { ModelType } from '../../enums/ModelType';
import { apiUrl } from '../../states/ApiState';
import { useLocalState } from '../../states/LocalState';
+import { ActionButton } from '../buttons/ActionButton';
import { ModelInformationDict } from '../render/ModelType';
/*
@@ -186,52 +193,47 @@ export default function NotesEditor({
linkPlugin(),
linkDialogPlugin(),
listsPlugin(),
- markdownShortcutPlugin(),
quotePlugin(),
tablePlugin(),
- thematicBreakPlugin()
+ thematicBreakPlugin(),
+ markdownShortcutPlugin()
];
let toolbar: ReactNode[] = [];
- if (editable) {
+ if (editable && editing) {
toolbar = [
setEditing(!editing)}
+ key="save-notes"
+ aria-label="save-notes"
+ onClick={() => saveNotes()}
+ title={t`Save Notes`}
+ disabled={false}
>
- {editing ? : }
-
+
+ ,
+ setEditing(false)}
+ title={t`Close Editor`}
+ disabled={false}
+ >
+
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+
];
-
- if (editing) {
- toolbar = [
- ...toolbar,
- saveNotes()}
- title={t`Save Notes`}
- disabled={false}
- >
-
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
-
- ];
- }
}
// If the user is allowed to edit, then add the toolbar
@@ -259,14 +261,29 @@ export default function NotesEditor({
]);
return (
-
+
+
+ {editable && (
+
+ {!editing && (
+ setEditing(true)}
+ icon={}
+ />
+ )}
+
+ )}
+
+
+
);
}