docs: Rich text formatting section by hejsztynx · Pull Request #713 · software-mansion/react-native-enriched-html

hejsztynx · 2026-07-20T12:14:15Z

Summary

Rich text formatting section with:

basic styles,
links,
mentions,
lists,
inline images,
text alignment,
text shortcuts

Copilot

Pull request overview

Adds a new “Rich text formatting” documentation section to the Docusaurus docs, introducing core formatting features of react-native-enriched-html with interactive editor examples.

Changes:

Adds new interactive example components for basic styles, links, mentions, lists, inline images, text alignment, and text shortcuts.
Replaces placeholder .md pages with full .mdx pages that embed the interactive examples.
Documents key API concepts for each feature (props/events/ref methods) with runnable snippets.

Reviewed changes

Copilot reviewed 21 out of 21 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
docs/src/examples/BasicStylesEditor.tsx	Adds interactive toolbar example for inline + paragraph style toggles.
docs/src/examples/LinksEditor.tsx	Adds example showing autolink via `linkRegex` and manual linking via `setLink`.
docs/src/examples/MentionEditor.tsx	Adds minimal mention insertion example using `setMention`.
docs/src/examples/ListsEditor.tsx	Adds list toggling example (unordered/ordered/checkbox) driven by `onChangeState`.
docs/src/examples/ImagesEditor.tsx	Adds inline image insertion example using `setImage`.
docs/src/examples/TextAlignmentEditor.tsx	Adds alignment buttons example using `setTextAlignment` and `state.alignment`.
docs/src/examples/TextShortcutsEditor.tsx	Adds example configuring `textShortcuts` for paragraph + inline shortcuts.
docs/docs/rich-text-formatting/basic-styles.mdx	New “Basic styles” page describing inline vs paragraph styles with embedded example.
docs/docs/rich-text-formatting/basic-styles.md	Removes placeholder TODO page (replaced by `.mdx`).
docs/docs/rich-text-formatting/links.mdx	New “Links” page covering autolinks vs manual links with embedded example.
docs/docs/rich-text-formatting/links.md	Removes placeholder TODO page (replaced by `.mdx`).
docs/docs/rich-text-formatting/mentions.mdx	New “Mentions” page covering indicators, `setMention`, and mention events.
docs/docs/rich-text-formatting/mentions.md	Removes placeholder TODO page (replaced by `.mdx`).
docs/docs/rich-text-formatting/lists.mdx	New “Lists” page describing list toggles and behavior with embedded example.
docs/docs/rich-text-formatting/lists.md	Removes placeholder TODO page (replaced by `.mdx`).
docs/docs/rich-text-formatting/inline-images.mdx	New “Inline images” page describing `setImage` and failure behavior with example.
docs/docs/rich-text-formatting/inline-images.md	Removes placeholder TODO page (replaced by `.mdx`).
docs/docs/rich-text-formatting/text-alignment.mdx	New “Text alignment” page describing `setTextAlignment` + state reporting.
docs/docs/rich-text-formatting/text-alignment.md	Removes placeholder TODO page (replaced by `.mdx`).
docs/docs/rich-text-formatting/text-shortcuts.mdx	New “Text shortcuts” page explaining paragraph vs inline shortcuts and defaults.
docs/docs/rich-text-formatting/text-shortcuts.md	Removes placeholder TODO page (replaced by `.mdx`).

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

Copilot

Pull request overview

Copilot reviewed 21 out of 21 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (3)

docs/docs/rich-text-formatting/text-shortcuts.mdx:12

The prose says typing # turns a line into a heading, but your configured trigger is '# ' (hash + space). Using # without the trailing space is misleading for readers trying the feature.

Text shortcuts let users format as they type, the way Markdown editors do -
typing `#` turns a line into a heading, wrapping a word in `**` makes it bold.

docs/docs/rich-text-formatting/text-shortcuts.mdx:38

Paragraph shortcut examples should include the trailing spaces required by the actual triggers (e.g. # , - , 1. ). Otherwise readers may try the prefix without a space and think shortcuts are broken.

  e.g. `#` for a heading, `-` for a bulleted list. Since a paragraph can only hold

docs/docs/rich-text-formatting/text-shortcuts.mdx:72

In the "Try it out" section, the paragraph shortcut is described as # but the example/editor uses the '# ' trigger. Updating this makes the instructions match the actual behavior.

The editor below wires up one shortcut of each kind - a paragraph one (`#` → H1)
and an inline one (`**` → bold). Start a line with `#` and watch it become a
heading, then wrap a word in `**stars**` to bold it.

kacperzolkiewski

LGTM

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Co-authored-by: Kacper Żółkiewski <74975508+kacperzolkiewski@users.noreply.github.com>

Co-authored-by: Mikołaj Szydłowski <9szydlowski9@gmail.com>

exploIF · 2026-08-11T14:47:29Z

+whether the style is active. The only exceptions to that rule are **mentions**,
+**links** and **inline images**, which work a bit differently. They cannot be toggled


How about alignment?

exploIF · 2026-08-11T14:51:50Z

+- **Unordered list** - `toggleUnorderedList()`
+- **Ordered list** - `toggleOrderedList()`
+- **Checkbox list** - `toggleCheckboxList(checked: boolean)`
+


Same here, about alignement?

exploIF · 2026-08-11T15:24:16Z

+import ListsEditor from '@site/src/examples/ListsEditor';
+import ListsEditorSrc from '!!raw-loader!@site/src/examples/ListsEditor';
+
+# Lists


It would be good to mention that ordered and unordered list are recognized automatically by default after typing 1. and - . We can also mention that this behavior can be changed and provide a hyperlink to text shortcuts API

exploIF · 2026-08-11T15:28:29Z

+
+:::
+Unlike the paragraph styles from [Basic styles](/rich-text-formatting/basic-styles),
+text alignment does not report its state with the `isActive` / `isConflicting` booleans in `onChangeState`. Instead it exposes `alignment` with its relevant string value.


We don't have isConflicting for text alignement?

exploIF · 2026-08-11T15:29:41Z

+- **Paragraph shortcuts** (`h1`–`h6`, `blockquote`, `codeblock`,
+  `unordered_list`, `ordered_list`, `checkbox_list`) fire at the **start of a


Same here, missing alignment

exploIF · 2026-08-11T15:31:01Z

+## Try it out
+
+The editor below wires up one shortcut of each kind - a paragraph one (`#` → H1)
+and an inline one (`**` → bold). Start a line with `#` and watch it become a


Suggested change

and an inline one (`**` → bold). Start a line with `#` and watch it become a

and an inline one (`**` → bold). Start a line with `# ` and watch it become a

Co-authored-by: Igor Furgała <74370735+exploIF@users.noreply.github.com>

hejsztynx requested a review from Copilot July 20, 2026 12:14

Copilot started reviewing on behalf of hejsztynx July 20, 2026 12:14 View session

Copilot AI reviewed Jul 20, 2026

View reviewed changes

hejsztynx requested a review from Copilot July 20, 2026 12:51

Copilot started reviewing on behalf of hejsztynx July 20, 2026 12:51 View session

Copilot AI reviewed Jul 20, 2026

View reviewed changes

Comment thread docs/src/examples/BasicStylesEditor.tsx Outdated

kacperzolkiewski assigned kacperzolkiewski and unassigned kacperzolkiewski Jul 20, 2026

hejsztynx force-pushed the @ksienkiewicz/docs-rich-text-formatting branch from 24db158 to 942497f Compare July 20, 2026 13:10

kacperzolkiewski reviewed Jul 20, 2026

View reviewed changes

hejsztynx requested review from exploIF and szydlovsky July 21, 2026 07:50

hejsztynx mentioned this pull request Jul 21, 2026

docs: add api reference section #716

Open

kacperzolkiewski approved these changes Jul 22, 2026

View reviewed changes

szydlovsky reviewed Aug 10, 2026

View reviewed changes

szydlovsky approved these changes Aug 11, 2026

View reviewed changes

Base automatically changed from @ksienkiewicz/docs-fundamentals to feat/docs August 11, 2026 10:24

hejsztynx and others added 12 commits August 11, 2026 12:24

docs: basic styles, mentions, links sections

f04da21

docs: lists, imgs, alignment, shortcuts sections

a02b7f6

docs: update links section

72cc637

Apply suggestions from code review

1a6b5a9

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

refactor: basic styles editor types clarity

313d619

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Update docs/docs/rich-text-formatting/lists.mdx

094cf02

Co-authored-by: Kacper Żółkiewski <74975508+kacperzolkiewski@users.noreply.github.com>

docs: links and mention onDeteced events

7b90280

docs: web sanitization acknowledgement

fd0fbd0

docs: broken links

480ed9a

docs: clarifiaction

8c7da88

Co-authored-by: Mikołaj Szydłowski <9szydlowski9@gmail.com>

docs: split notes / mention enrichedText press events

6789640

docs: rewording tweaks

8f82336

hejsztynx force-pushed the @ksienkiewicz/docs-rich-text-formatting branch from 15c59c4 to 8f82336 Compare August 11, 2026 10:24

exploIF reviewed Aug 11, 2026

View reviewed changes

docs: code review suggestions

77fcddb

Co-authored-by: Igor Furgała <74370735+exploIF@users.noreply.github.com>

		whether the style is active. The only exceptions to that rule are mentions,
		links and inline images, which work a bit differently. They cannot be toggled

		- Paragraph shortcuts (`h1`–`h6`, `blockquote`, `codeblock`,
		`unordered_list`, `ordered_list`, `checkbox_list`) fire at the **start of a

	and an inline one (`**` → bold). Start a line with `#` and watch it become a
	and an inline one (`**` → bold). Start a line with `# ` and watch it become a

Uh oh!

Conversation

hejsztynx commented Jul 20, 2026

Summary

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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kacperzolkiewski left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

exploIF Aug 11, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

exploIF Aug 11, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

exploIF Aug 11, 2026

Choose a reason for hiding this comment

Uh oh!

exploIF Aug 11, 2026

Choose a reason for hiding this comment

Uh oh!

exploIF Aug 11, 2026

Choose a reason for hiding this comment

Uh oh!

exploIF Aug 11, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants