CRDCDH-3760 Implement Rich Text Editor and add to SRF review comments by Alejandro-Vega · Pull Request #40 · CBIIT/crdc-datahub-codebase

Alejandro-Vega · 2026-06-10T20:14:53Z

Overview

Created a Rich Text Editor component and replaced existing review comment input for both approval and inquire dialogs.

Change Details (Specifics)

Created a reusable Rich Text Editor input component that provides a toolbar for formatting, keyboard shortcuts, and text modifications within the textarea
The editor uses markdown and sends markdown to API
Created a reusable Rich Text viewer to ensure consistent view of the rich text markdown value
Added slate packages to assist managing WYSIWYG behavior
Updated Approve/Inquire modals in the review page within an SRF to include the rich text editor
Updated "View Comments" dialog to show the formatted content. Couldn't find another area where this is shown

Related Ticket(s)

CRDCDH-3659 (US)
CRDCDH-3760 (Task)

…into CRDCDH-3760

relativeci · 2026-06-10T20:16:27Z

#144 Bundle Size — 12.86MiB (+3.42%).

3a9ea21(current) vs a8ce1bb 3.7.0#141(baseline)

Important

Bundle introduced 4 and removed 1 duplicate packages – View changed duplicate packages

Warning

Bundle introduced 22 new packages: direction, compute-scroll-into-view, scroll-into-view-if-needed and 19 more – View changed packages

Bundle metrics

7 changes

3 regressions

	Current #144	Baseline #141
Initial JS	`876.35KiB`(`~+0.01%`)	`876.35KiB`
Initial CSS	`0B`	`0B`
Cache Invalidation	`28.67%`	`6.13%`
Chunks	`74`(`+4.23%`)	`71`
Assets	`117`(`+2.63%`)	`114`
Modules	`9157`(`+1.72%`)	`9002`
Duplicate Modules	`0`	`0`
Duplicate Code	`0%`	`0%`
Packages	`320`(`+8.47%`)	`295`
Duplicate Packages	`53`(`+6%`)	`50`

Bundle size by type

1 change

1 regression

	Current #144	Baseline #141
JS	`10.34MiB` (`+4.29%`)	`9.91MiB`
IMG	`1.72MiB`	`1.72MiB`
Fonts	`805.07KiB`	`805.07KiB`
CSS	`18KiB`	`18KiB`

Bundle analysis report Branch CRDCDH-3760 Project dashboard

^{Generated by RelativeCI Documentation Report issue}

…odebase into CRDCDH-3760

Copilot

Pull request overview

This PR introduces a new Slate-based Rich Text Editor (storing a constrained markdown subset) and updates SRF review comment entry/display to use rich text instead of a plain textarea.

Changes:

Added RichTextEditor component (toolbar, Slate controller/hook, markdown serialize/deserialize, keyboard handlers) plus unit/accessibility tests and Storybook stories.
Added RichTextViewer to render stored markdown in the review comments dialog.
Updated review dialogs/tests and added frontend dependencies (slate*, rehype-raw) to support the editor/viewer.

Reviewed changes

Copilot reviewed 46 out of 47 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
apps/frontend/src/content/questionnaire/FormView.test.tsx	Mocks the new `RichTextEditor` for FormView tests.
apps/frontend/src/config/EditorConfig.ts	Defines mark/block formats (bold/italic + lists) used by the editor.
apps/frontend/src/components/RichTextViewer/index.tsx	New markdown viewer for rendering stored rich text in the UI.
apps/frontend/src/components/RichTextViewer/index.test.tsx	Viewer accessibility/basic rendering tests.
apps/frontend/src/components/RichTextViewer/index.stories.tsx	Storybook stories for viewer formatting/edge cases.
apps/frontend/src/components/RichTextEditor/utils/markdown/markdownUtils.ts	Markdown line-ending normalization + list-line parsing helpers.
apps/frontend/src/components/RichTextEditor/utils/markdown/markdownUtils.test.ts	Unit tests for markdown utils.
apps/frontend/src/components/RichTextEditor/utils/markdown/markdownSerializer.ts	Slate → markdown serialization and plain-text-length computation.
apps/frontend/src/components/RichTextEditor/utils/markdown/markdownSerializer.test.ts	Unit tests for serializer/plain-text-length.
apps/frontend/src/components/RichTextEditor/utils/markdown/markdownInlineParser.ts	Inline markdown → Slate text node parsing for supported marks.
apps/frontend/src/components/RichTextEditor/utils/markdown/markdownInlineParser.test.ts	Unit tests for inline parser.
apps/frontend/src/components/RichTextEditor/utils/markdown/markdownDeserializer.ts	Markdown → Slate document deserialization (paragraphs/lists).
apps/frontend/src/components/RichTextEditor/utils/markdown/markdownDeserializer.test.ts	Unit tests for deserializer.
apps/frontend/src/components/RichTextEditor/utils/keyboard/keyboardSelectionUtils.ts	Keyboard selection helpers for indentation/list behaviors.
apps/frontend/src/components/RichTextEditor/utils/keyboard/keyboardSelectionUtils.test.ts	Unit tests for keyboard selection helpers.
apps/frontend/src/components/RichTextEditor/utils/keyboard/keyboardListHandlers.ts	Tab/Enter/Backspace/list-shortcut handlers for editor UX.
apps/frontend/src/components/RichTextEditor/utils/keyboard/keyboardListHandlers.test.ts	Unit tests for list/keyboard handlers.
apps/frontend/src/components/RichTextEditor/utils/keyboard/keyboardHotkeyHandlers.ts	Ctrl/Cmd hotkeys for undo/redo and enabled marks.
apps/frontend/src/components/RichTextEditor/utils/keyboard/keyboardHotkeyHandlers.test.ts	Unit tests for hotkey handlers.
apps/frontend/src/components/RichTextEditor/utils/index.ts	Barrel exports for editor utilities.
apps/frontend/src/components/RichTextEditor/utils/editorTransforms.ts	Slate transforms for mark/block toggling and list wrapping.
apps/frontend/src/components/RichTextEditor/utils/editorTransforms.test.ts	Unit tests for editor transforms.
apps/frontend/src/components/RichTextEditor/utils/editorGuards.ts	Type guards for list formats/elements.
apps/frontend/src/components/RichTextEditor/utils/editorGuards.test.ts	Unit tests for editor guards.
apps/frontend/src/components/RichTextEditor/utils/documentUtils.ts	Helpers for creating/normalizing Slate documents and emptiness checks.
apps/frontend/src/components/RichTextEditor/utils/documentUtils.test.ts	Unit tests for document utils.
apps/frontend/src/components/RichTextEditor/types.ts	Shared editor types (marks, blocks, Slate custom types).
apps/frontend/src/components/RichTextEditor/ToolbarButton.tsx	Toolbar icon-button component.
apps/frontend/src/components/RichTextEditor/ToolbarButton.test.tsx	ToolbarButton accessibility/basic tests.
apps/frontend/src/components/RichTextEditor/Toolbar.tsx	Editor toolbar (marks, lists, undo/redo).
apps/frontend/src/components/RichTextEditor/Toolbar.test.tsx	Toolbar rendering + interaction tests.
apps/frontend/src/components/RichTextEditor/index.tsx	Lazy-loaded editor entrypoint + exports.
apps/frontend/src/components/RichTextEditor/index.test.tsx	Editor wrapper accessibility/basic tests.
apps/frontend/src/components/RichTextEditor/index.stories.tsx	Storybook stories for editor usage and states.
apps/frontend/src/components/RichTextEditor/hooks/useRichTextEditor.tsx	Hook owning editor instance, serialization, handlers, reset.
apps/frontend/src/components/RichTextEditor/hooks/useRichTextEditor.test.tsx	Hook unit tests (serialization calls, reset behavior).
apps/frontend/src/components/RichTextEditor/EditorLeaf.tsx	Renders marked inline leaves using configured HTML tags.
apps/frontend/src/components/RichTextEditor/EditorLeaf.test.tsx	EditorLeaf accessibility/basic tests.
apps/frontend/src/components/RichTextEditor/EditorElement.tsx	Renders block elements (p/ul/ol/li).
apps/frontend/src/components/RichTextEditor/EditorElement.test.tsx	EditorElement accessibility/basic tests.
apps/frontend/src/components/RichTextEditor/Controller.tsx	Slate controller wiring toolbar + editable area + imperative reset.
apps/frontend/src/components/RichTextEditor/Controller.test.tsx	Controller behavior tests (toolbar toggle, aria/readOnly).
apps/frontend/src/components/ReviewCommentsDialog/index.tsx	Uses `RichTextViewer` to display stored review comments.
apps/frontend/src/components/Questionnaire/ReviewFormDialog.tsx	Replaces textarea with `RichTextEditor` + markdown-based validation.
apps/frontend/src/components/Questionnaire/ReviewFormDialog.test.tsx	Updates dialog tests to mock the new editor and validate behavior.
apps/frontend/package.json	Adds dependencies for viewer/editor (`rehype-raw`, `slate*`).
apps/frontend/package-lock.json	Lockfile updates for new dependencies/transitives.

Files not reviewed (1)

apps/frontend/package-lock.json: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

amattu2

Overall there's really not that many issues. I left some comments to consider.

Some comments were written before you made some additional commits, so if they're outdated, just ignore them.

amattu2 · 2026-06-11T20:30:19Z

+  </Suspense>
+));
+
+RichTextEditor.displayName = "RichTextEditor";


Both this component and the controller have the same displayName. Is that intentional?

amattu2 · 2026-06-11T20:31:16Z

+    format: "underline",
+    tooltip: "Underline (Ctrl+U)",
+    icon: FormatUnderlinedIcon,
+    enabled: false,
+    hotkey: "u",
+    htmlTag: "u",
+    markdownSyntax: ["<u>", "</u>"],
+  },


amattu2 · 2026-06-11T20:34:21Z

+            value={field.value}
+            onChange={field.onChange}
+            onTextLengthChange={setPlainTextLength}
            placeholder={`${reviewCommentLimitLabel} characters allowed`}


The placeholder itself is getting formatted.

amattu2 · 2026-06-11T20:35:26Z

+import { useRichTextEditor } from "./hooks/useRichTextEditor";
+import Toolbar from "./Toolbar";
+
+const StyledEditorWrapper = styled(Box)({


The background of the editor itself probably should be white, not transparent.

Or a slightly off-white is fine too. Whatever is consistent with the rest of the app.

amattu2 · 2026-06-11T20:37:20Z

+  "&:hover": {
+    borderColor: "#6B7294",
+  },
+  "&:focus-within": {


This might not be an issue, but when focusing on the textarea, the box shadow is applied to the entire text editor, rather than just the textarea itself. I'm not sure that there's a better alternative, as it would look weird if the box shadow was between the textarea and the toolbar. It might be worth just confirming that what we've done here is consistent with other WYSIWYG editors.

amattu2 · 2026-06-11T20:41:45Z

+ * Owns the Slate editor instance, initial value, serialization, render callbacks,
+ * and keyboard handler for the rich text editor component.
+ */
+export const useRichTextEditor = ({


The exact same text produces different counts between the old text editor and the markdown editor. Can this be safely mitigated?

amattu2 · 2026-06-11T20:43:58Z

+  className?: string;
+};
+
+const RichTextViewer = ({ content, className }: Props): ReactElement | null => {


This is a challenging issue because of the nature of markdown, but single dashes become bullet points, and triple dashes disappear.

Any chance we can fix this?

amattu2 · 2026-06-11T20:48:58Z

+  }
+
+  return (
+    <StyledMarkdown


I'm not sure whether this can be fixed, but HTML is just stripped out completely. We obviously don't want to render it, but can we still visually preserve the content without treating it as markdown+HTML?

I also noticed here that the x2 newlines between the headings gets removed. This is probably not a deal breaker, just pointing it out.

Alejandro-Vega added 30 commits May 31, 2026 23:18

chore(deps): install slate and rehype-raw

6425a6a

add custom editor types and utilities for list formatting

13392f9

feat: create editor toolbar

86b5c56

add keyboard handlers and utils

0be3e48

add markdown handlers and utils

a8cdc42

add: EditorLeaf to render Slate leaf nodes

72b705b

add: EditorElement for for rendering element types

a85562f

added hook for handling editor keydown

c7b9ae1

add: document utilities for Slate editor and update markdown parser

f0f2bd3

fix: documentation wording

d7f3536

add: useRichTextEditor hook for Slate editor handling

ed6e0bf

add: RichTextEditor component entry

773ffa1

created rich text viewer component

bf58a3f

update review form dialog to include rich text editor

9fe4bfe

update review comments dialog to include rich text viewer

61187e0

fix: incorrect import path

66fb3ff

Merge branch '3.7.0' of https://github.com/CBIIT/crdc-datahub-codebase …

b9f879d

…into CRDCDH-3760

add storybook support for rich text editor and viewer

80a60ee

refactor: toolbar components and add test coverage

29ed575

fix: whitespace causing issues when formatting

6b76941

refactor: lazy load component and add test coverage for rich text editor

dcbb6a0

refactor: clean up component and add test coverage to EditorLeaf

2a60235

refactor: clean up EditorElement component and add test coverage

d56010e

refactor: document utils and add test coverage

549701d

add test coverage for useRichTextEditor hook

d0d14fb

refactor: cleanup documentation for utils

7f995d7

add test coverage for editor transformation utils

42eec14

refactor: cleanup docs for editor guards and add test coverage

603d7fe

refactor: move functions to relevant utils file and add test coverage

0e4c24e

refactor: centralize mark definitions

8a361b2

Alejandro-Vega added 2 commits June 10, 2026 16:05

fix: new lines not being preserved in rich text viewer

d434f9d

fix: clearing all in editor resulting in invalid cursor state

b66d6ca

Alejandro-Vega added this to the 3.7.0 milestone Jun 10, 2026

Alejandro-Vega added the Frontend ⚛️ label Jun 10, 2026

Merge branch '3.7.0' into CRDCDH-3760

e866a49

Alejandro-Vega added 6 commits June 10, 2026 16:30

fix: type error

07cf640

Merge branch 'CRDCDH-3760' of https://github.com/CBIIT/crdc-datahub-c…

8eaee7c

…odebase into CRDCDH-3760

refactor: general cleanup and reduce regex usage

f59cffd

add basic test coverage for rich text viewer

e226be1

update rich text viewer story

29ec4ab

fix: storybook titles

7142fdf

Alejandro-Vega marked this pull request as ready for review June 11, 2026 07:03

Alejandro-Vega requested review from a team and Copilot June 11, 2026 07:03

Alejandro-Vega added the 🚧 Do Not Merge label Jun 11, 2026

Copilot started reviewing on behalf of Alejandro-Vega June 11, 2026 07:03 View session

Copilot AI reviewed Jun 11, 2026

View reviewed changes

Comment thread apps/frontend/src/components/RichTextViewer/index.tsx

Comment thread apps/frontend/src/components/RichTextEditor/hooks/useRichTextEditor.tsx

Comment thread apps/frontend/src/components/RichTextEditor/hooks/useRichTextEditor.tsx

Alejandro-Vega added 6 commits June 11, 2026 03:55

fix: remove export causing bundle size increase

c7bf022

fix: lazy load pdf generation lib

37cea9f

fix: optimize bundle to avoid loading unecessary deps

0c2ac62

fix: strip attributes from components in rich text viewer for security

f34db61

fix: incorrect text length calculation

68bc482

revert: lazy load causing failing tests

42213a6

Alejandro-Vega removed the 🚧 Do Not Merge label Jun 11, 2026

Alejandro-Vega added 3 commits June 11, 2026 13:49

Merge branch '3.7.0' into CRDCDH-3760

1097c00

fix: hide placeholder when list item and update background color

826e8da

fix: new lines in between causing incorrect character count

3a9ea21

amattu2 requested changes Jun 11, 2026

View reviewed changes

amattu2 added the 📝 Change Requested label Jun 11, 2026

Conversation

Alejandro-Vega commented Jun 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

Change Details (Specifics)

Related Ticket(s)

Uh oh!

relativeci Bot commented Jun 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

#144 Bundle Size — 12.86MiB (+3.42%).

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

amattu2 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Alejandro-Vega commented Jun 10, 2026 •

edited

Loading

relativeci Bot commented Jun 10, 2026 •

edited

Loading