diff --git a/src/components/AcceptRiskDialog.tsx b/src/components/AcceptRiskDialog.tsx index 7c2abd9b..96b43f41 100644 --- a/src/components/AcceptRiskDialog.tsx +++ b/src/components/AcceptRiskDialog.tsx @@ -83,13 +83,19 @@ const AcceptRiskDialog: FunctionComponent = ({ placeholder="Add your comment here..." value={justification} setValue={(value) => setJustification(value ?? "")} + maxLength={4000} /> - Accept Risk + 4000} + > + Accept Risk + diff --git a/src/components/CommentDialog.tsx b/src/components/CommentDialog.tsx index 41276c99..e36bbc29 100644 --- a/src/components/CommentDialog.tsx +++ b/src/components/CommentDialog.tsx @@ -62,13 +62,19 @@ const CommentDialog: FunctionComponent = ({ placeholder="Add your comment here..." value={justification} setValue={(value) => setJustification(value ?? "")} + maxLength={4000} /> - Add Comment + 4000} + > + Add Comment + diff --git a/src/components/FalsePositiveDialog.tsx b/src/components/FalsePositiveDialog.tsx index a77920d2..cad8c958 100644 --- a/src/components/FalsePositiveDialog.tsx +++ b/src/components/FalsePositiveDialog.tsx @@ -205,6 +205,7 @@ const FalsePositiveDialog: FunctionComponent = ({ placeholder="Add your comment here..." value={justification} setValue={(value) => setJustification(value ?? "")} + maxLength={4000} /> @@ -217,6 +218,7 @@ const FalsePositiveDialog: FunctionComponent = ({ onClick={handleSubmit} variant={"default"} className="mr-0 rounded-r-none pr-0 capitalize" + disabled={justification.length > 4000} > {removeUnderscores(selectedOption)} diff --git a/src/components/MitigateDialog.tsx b/src/components/MitigateDialog.tsx index 73752b94..6d704361 100644 --- a/src/components/MitigateDialog.tsx +++ b/src/components/MitigateDialog.tsx @@ -73,13 +73,14 @@ const MitigateDialog: FunctionComponent = ({ placeholder="Add your justification for mitigating this vulnerability..." value={justification} setValue={(value) => setJustification(value ?? "")} + maxLength={4000} /> - + 4000}>
{integrationType === "gitlab" && ( <> diff --git a/src/components/common/MarkdownEditor.tsx b/src/components/common/MarkdownEditor.tsx index 39ea9e0f..697cfcbb 100644 --- a/src/components/common/MarkdownEditor.tsx +++ b/src/components/common/MarkdownEditor.tsx @@ -28,12 +28,14 @@ interface Props extends Partial { value: string; setValue: (value?: string) => void; placeholder?: string; + maxLength?: number; } const MarkdownEditor: FunctionComponent = ({ value, setValue, placeholder, + maxLength, ...rest }) => { const markdownRef = useRef(null); @@ -41,51 +43,68 @@ const MarkdownEditor: FunctionComponent = ({ useEffect(() => { markdownRef.current?.setMarkdown(value); }, [value]); + + const charCount = value.length; + const isOverLimit = maxLength !== undefined && charCount > maxLength; + return ( - setValue(value)} - placeholder={placeholder} - markdown={value} - contentEditableClassName="mdx-editor-content" - plugins={[ - // toolbarPlugin({ toolbarContents: () => }), - toolbarPlugin({ - toolbarContents: () => ( - <> - - - - - ), - }), - listsPlugin(), - quotePlugin(), - headingsPlugin(), - linkPlugin(), - imagePlugin(), - tablePlugin(), - thematicBreakPlugin(), - frontmatterPlugin(), - codeBlockPlugin({ defaultCodeBlockLanguage: "go" }), - codeMirrorPlugin({ - codeBlockLanguages: { - js: "JavaScript", - css: "CSS", - txt: "text", - tsx: "TypeScript", - go: "Go", - }, - }), +
+ setValue(value)} + placeholder={placeholder} + markdown={value} + contentEditableClassName="mdx-editor-content" + plugins={[ + // toolbarPlugin({ toolbarContents: () => }), + toolbarPlugin({ + toolbarContents: () => ( + <> + + + + + ), + }), + listsPlugin(), + quotePlugin(), + headingsPlugin(), + linkPlugin(), + imagePlugin(), + tablePlugin(), + thematicBreakPlugin(), + frontmatterPlugin(), + codeBlockPlugin({ defaultCodeBlockLanguage: "go" }), + codeMirrorPlugin({ + codeBlockLanguages: { + js: "JavaScript", + css: "CSS", + txt: "text", + tsx: "TypeScript", + go: "Go", + }, + }), - markdownShortcutPlugin(), - ]} - /> + markdownShortcutPlugin(), + ]} + /> + {maxLength !== undefined && ( +

+ {charCount} / {maxLength} +

+ )} +
); };