diff --git a/typescript/frontend-marios2/src/content/dashboards/Tickets/CommentFormatToolbar.tsx b/typescript/frontend-marios2/src/content/dashboards/Tickets/CommentFormatToolbar.tsx new file mode 100644 index 000000000..af1b62fa7 --- /dev/null +++ b/typescript/frontend-marios2/src/content/dashboards/Tickets/CommentFormatToolbar.tsx @@ -0,0 +1,62 @@ +import React from 'react'; +import { Box, Button, Tooltip } from '@mui/material'; +import FormatBoldIcon from '@mui/icons-material/FormatBold'; +import { useIntl } from 'react-intl'; +import { applyFormat, FormatKind } from './commentMarkdown'; + +interface CommentFormatToolbarProps { + textareaRef: React.RefObject; + value: string; + onChange: (next: string) => void; + disabled?: boolean; +} + +function CommentFormatToolbar({ + textareaRef, + value, + onChange, + disabled +}: CommentFormatToolbarProps) { + const intl = useIntl(); + + const handle = (kind: FormatKind) => () => { + applyFormat(textareaRef.current, value, kind, onChange); + }; + + const btnSx = { minWidth: 32, px: 1, py: 0.25, fontSize: 12, textTransform: 'none' as const }; + + return ( + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default CommentFormatToolbar; diff --git a/typescript/frontend-marios2/src/content/dashboards/Tickets/CommentThread.tsx b/typescript/frontend-marios2/src/content/dashboards/Tickets/CommentThread.tsx index 07e33f38f..8802dc883 100644 --- a/typescript/frontend-marios2/src/content/dashboards/Tickets/CommentThread.tsx +++ b/typescript/frontend-marios2/src/content/dashboards/Tickets/CommentThread.tsx @@ -25,6 +25,8 @@ import { FormattedMessage, useIntl } from 'react-intl'; import axiosConfig from 'src/Resources/axiosConfig'; import { AdminUser, CommentAuthorType, TicketComment } from 'src/interfaces/TicketTypes'; import DocumentList from 'src/components/DocumentList'; +import CommentFormatToolbar from './CommentFormatToolbar'; +import { renderCommentBody } from './commentMarkdown'; interface CommentThreadProps { ticketId: number; @@ -55,6 +57,7 @@ function CommentThread({ const [mentionedIds, setMentionedIds] = useState([]); const [mentionQuery, setMentionQuery] = useState(null); const commentInputRef = useRef(null); + const editInputRef = useRef(null); const MENTION_EXCLUDED_NAMES = ['inesco energy Master Admin']; @@ -280,6 +283,12 @@ function CommentThread({ {isEditing ? ( + setEditBody(e.target.value)} + inputRef={editInputRef} />