CRDCDH-3860 RichTextEditor - Support Links

[Alejandro-Vega]

Overview

Updated the RichTextEditor component to support external links.

Change Details (Specifics)

• Added toolbar button for inserting links using text label and link URL
• When user clicks on a link it will open a popup so that they can view the label, click the link, make edits to each of them, or remove it as a link
• Auto-detect links if you paste or type a URL + a space or you press enter
• Updated rich text viewer to render links as anchor elements with safe URL's
• Prevent clicking out of modal to avoid accidentally losing progress
• Fixed character counter not counting trailing spaces/new lines
• Updated tests and storybook accordingly

Rich Text Editor with links

Rich Text Editor link toolbar button expanded

Rich Text Viewer with links

Related Ticket(s)

CRDCDH-3659 (US)
CRDCDH-3860 (Task)

[Copilot]

Pull request overview

Adds end-to-end external-link support to the rich-text editor and viewer.

Changes:

• Adds link insertion, editing, removal, auto-detection, validation, and Markdown serialization.
• Safely renders HTTP(S) links with updated tests and stories.
• Preserves trailing whitespace and prevents backdrop dismissal of review dialogs.

Reviewed changes

Copilot reviewed 27 out of 27 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
RichTextViewer/index.tsx	Safely renders links.
RichTextViewer/index.test.tsx	Tests link rendering and sanitization.
RichTextViewer/index.stories.tsx	Adds link stories.
markdown/markdownUtils.ts	Escapes link-label brackets.
markdown/markdownSerializer.ts	Serializes links and preserves whitespace.
markdown/markdownSerializer.test.ts	Updates whitespace expectations.
markdown/markdownInlineParser.ts	Parses Markdown links.
linkUrlUtils.ts	Validates and detects URLs.
linkUrlUtils.test.ts	Tests URL utilities.
linkEditorUtils.ts	Implements Slate link operations.
linkEditorUtils.test.ts	Tests link editing and auto-linking.
utils/index.ts	Exports link utilities.
editorTransforms.ts	Installs link behavior.
editorGuards.ts	Adds the link type guard.
editorGuards.test.ts	Tests link detection.
documentUtils.ts	Supports inline link children.
types.ts	Defines link node types.
Toolbar.tsx	Adds the insert-link button.
Toolbar.test.tsx	Tests link toolbar behavior.
LinkPopup.tsx	Adds link management UI.
LinkPopup.test.tsx	Tests popup workflows.
hooks/useLinkPopup.tsx	Manages popup state and actions.
hooks/useLinkPopup.test.tsx	Tests popup state management.
EditorElement.tsx	Renders editable links.
Controller.tsx	Integrates links and popup handling.
ReviewFormDialog.tsx	Blocks backdrop dismissal.
ReviewFormDialog.test.tsx	Tests backdrop behavior.

---

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

[relativeci]

#306 Bundle Size — 12.89MiB (+0.09%).

f28a747(current) vs 079a5c9 3.7.0#301(baseline)

Warning

Bundle contains 54 duplicate packages – View duplicate packages

Bundle metrics   5 changes 1 regression

	Current #306	Baseline #301
Initial JS	878.39KiB(~+0.01%)	878.38KiB
Initial CSS	0B	0B
Cache Invalidation	27.93%	28.67%
Chunks	75(+1.35%)	74
Assets	118(+0.85%)	117
Modules	9172(+0.11%)	9162
Duplicate Modules	0	0
Duplicate Code	0%	0%
Packages	320	320
Duplicate Packages	53	53

Bundle size by type   1 change 1 regression

	Current #306	Baseline #301
JS	10.37MiB (+0.11%)	10.35MiB
IMG	1.72MiB	1.72MiB
Fonts	805.07KiB	805.07KiB
CSS	18KiB	18KiB

Bundle analysis report Branch CRDCDH-3860 Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[amattu2]

Didn't test super thoroughly, but seems to work well on the URLs I tried. I did notice it doesn't allow IP-based URLs, but I think that's probably acceptable for this usecase.

Nice use of zod here, BTW.

LGTM, merging AS-IS.