Improve "read only" mode

This commit is contained in:
Oliver Walters 2024-08-24 05:13:59 +00:00
parent b71df1e46f
commit 8799a80bd6

View File

@ -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,28 +193,15 @@ export default function NotesEditor({
linkPlugin(),
linkDialogPlugin(),
listsPlugin(),
markdownShortcutPlugin(),
quotePlugin(),
tablePlugin(),
thematicBreakPlugin()
thematicBreakPlugin(),
markdownShortcutPlugin()
];
let toolbar: ReactNode[] = [];
if (editable) {
if (editable && editing) {
toolbar = [
<ButtonWithTooltip
key="toggle-editing"
aria-label="toggle-notes-editing"
title={editing ? t`Preview Notes` : t`Edit Notes`}
onClick={() => setEditing(!editing)}
>
{editing ? <IconEye /> : <IconEdit />}
</ButtonWithTooltip>
];
if (editing) {
toolbar = [
...toolbar,
<ButtonWithTooltip
key="save-notes"
aria-label="save-notes"
@ -215,7 +209,16 @@ export default function NotesEditor({
title={t`Save Notes`}
disabled={false}
>
<IconDeviceFloppy />
<IconDeviceFloppy color="green" />
</ButtonWithTooltip>,
<ButtonWithTooltip
key="close-notes"
aria-label="close-notes"
onClick={() => setEditing(false)}
title={t`Close Editor`}
disabled={false}
>
<IconX color="red" />
</ButtonWithTooltip>,
<Separator key="separator-1" />,
<UndoRedo key="undo-redo" />,
@ -232,7 +235,6 @@ export default function NotesEditor({
<InsertThematicBreak key="insert-thematic-break" />
];
}
}
// If the user is allowed to edit, then add the toolbar
if (editable) {
@ -259,14 +261,29 @@ export default function NotesEditor({
]);
return (
<Paper p="sm" shadow="xs">
<Stack gap="xs">
{editable && (
<Group justify="left">
{!editing && (
<ActionButton
tooltip={t`Edit`}
onClick={() => setEditing(true)}
icon={<IconEdit color="blue" />}
/>
)}
</Group>
)}
<MDXEditor
ref={ref}
markdown={''}
readOnly={!editable}
readOnly={!editing}
plugins={plugins}
toMarkdownOptions={{
rule: '-' // Use dashes for thematic breaks
}}
/>
</Stack>
</Paper>
);
}