docs: guides section by hejsztynx · Pull Request #717 · software-mansion/react-native-enriched-html

hejsztynx · 2026-07-21T12:41:30Z

Summary

Added the Guides section to the docs. Aside from basic tutorials that taught general features in the Rich text formatting section, this section present 3 tutorials:

building user and channel mentions - similarly as it is in the main example app in the repo
building an emoji picker using mentions - shows that mentions are pretty powerful and can be used in more interesting situations
contextMenuItems - no live demo, as it is not available on web

I tested the same code in an RN app - everything works nicely, the code is portable

Copilot

Pull request overview

Adds a new Guides section to the Docusaurus docs with interactive/tutorial-style pages demonstrating more complete, real-world patterns (mentions pickers, emoji picker via mentions, and native context menu customization), replacing placeholder guide pages.

Changes:

Added two new interactive example components for guides: user/channel mention picker and emoji picker.
Added new MDX guide pages for user/channel mentions and emojis, wired to live interactive examples (Preview/Code).
Replaced the placeholder “Custom context menu” page with a full native-only guide and removed other placeholder guide stubs.

Reviewed changes

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

Show a summary per file

File	Description
docs/src/examples/MentionOnlyEditor.tsx	New interactive example implementing `@`/`#` mention pickers for the Guides section.
docs/src/examples/EmojiEditor.tsx	New interactive example implementing an emoji picker using mention mechanics (`:`).
docs/docs/guides/user-and-channel-mentions.mdx	New guide page explaining how to build user/channel mentions with a picker + live example embed.
docs/docs/guides/emojis.mdx	New guide page explaining emoji insertion via mentions + live example embed.
docs/docs/guides/custom-context-menu.md	Replaced placeholder with a full guide and example snippet for `contextMenuItems` (native-only).
docs/docs/guides/mention-only-input.md	Removed placeholder stub page.
docs/docs/guides/emojis.md	Removed placeholder stub page (replaced by `.mdx`).
docs/docs/guides/chat-input-with-images.md	Removed placeholder stub page.

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

kacperzolkiewski

LGTM, just three small suggestions

szydlovsky

Just a super small comment

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

This is dope 🔥

exploIF · 2026-08-11T16:02:04Z

+// `onPress` fires - so `setMention` would do nothing. Preventing the default
+// mousedown keeps focus in the editor. It's a no-op on native, where tapping a
+// Pressable never steals focus.
+const keepEditorFocused: any =


Please provide correct types, any should be avoided

exploIF · 2026-08-11T16:02:39Z

+];
+
+// Each mention kind is styled by its indicator.
+const htmlStyle: HtmlStyle = {


Could you move it below component definition, so it sits next to component styles?

exploIF · 2026-08-11T16:03:04Z

+
+export default function App() {
+  const ref = useRef<EnrichedTextInputInstance>(null);
+  // The indicator of the mention being edited ('@' | '#'), or null when idle.


Doesn't give any value imo, code is self explanatory

Suggested change

// The indicator of the mention being edited ('@' | '#'), or null when idle.

exploIF · 2026-08-11T16:03:43Z

+    const q = query.toLowerCase();
+    return source.filter(item => item.name.toLowerCase().startsWith(q));


Suggested change

const q = query.toLowerCase();

return source.filter(item => item.name.toLowerCase().startsWith(q));

return source.filter(item => item.name.toLowerCase().startsWith(q.toLowerCase()));

exploIF · 2026-08-11T16:04:47Z

+        onChangeMention={({ indicator: ind, text }: OnChangeMentionEvent) => {
+          setIndicator(ind);
+          setQuery(text);
+        }}


Let's create a separate function for this logic

exploIF · 2026-08-11T16:06:25Z

+:::info
+
+If you want to see the whole code used to build this example, you can find it by switching the tab from `Preview` to `Code`.
+
+:::


We don't need this explanation, we already have those snippets everywhere in the docs, so user should be familiar with that.

Suggested change

:::info

If you want to see the whole code used to build this example, you can find it by switching the tab from `Preview` to `Code`.

:::

exploIF · 2026-08-11T16:09:35Z

+:::info
+
+If you want to see the whole code used to build this example, you can find it by switching the tab from `Preview` to `Code`.
+
+:::


Same here, I think it's redundant

exploIF · 2026-08-11T16:11:39Z

+
+  const hasRangedSelection = !!selection && selection.start !== selection.end;
+
+  const contextMenuItems: ContextMenuItem[] = useMemo(


I think useMemo can be omitted. It's just a snippet, what's more nowadays most project should already use react-compiler and manual memoization can be redundant

exploIF · 2026-08-11T16:11:56Z

+
+:::info
+
+This is a **native-only** feature (iOS and Android) - which


Can we add a video/gif then?

hejsztynx requested a review from Copilot July 21, 2026 12:41

Copilot started reviewing on behalf of hejsztynx July 21, 2026 12:42 View session

Copilot AI reviewed Jul 21, 2026

View reviewed changes

Comment thread docs/docs/guides/emojis.mdx Outdated

Comment thread docs/docs/guides/custom-context-menu.md Outdated

Comment thread docs/docs/guides/custom-context-menu.md

hejsztynx requested review from exploIF, kacperzolkiewski and szydlovsky July 21, 2026 13:05

kacperzolkiewski reviewed Jul 22, 2026

View reviewed changes

Comment thread docs/docs/guides/user-and-channel-mentions.mdx

Comment thread docs/docs/guides/emojis.mdx Outdated

Comment thread docs/docs/guides/emojis.mdx Outdated

Comment thread docs/docs/guides/emojis.mdx Outdated

hejsztynx requested a review from kacperzolkiewski July 22, 2026 12:47

kacperzolkiewski approved these changes Jul 23, 2026

View reviewed changes

Comment thread docs/docs/guides/custom-context-menu.md Outdated

Comment thread docs/docs/guides/emojis.mdx Outdated

Comment thread docs/docs/guides/user-and-channel-mentions.mdx Outdated

szydlovsky approved these changes Aug 10, 2026

View reviewed changes

Comment thread docs/docs/guides/user-and-channel-mentions.mdx Outdated

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

docs: guides section

c1b6daa

fix: grammar

b216109

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

fix: stale link

56a2cb4

refactor: note order

9752471

Update docs/docs/guides/emojis.mdx

50479b6

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

fix: updated sidebar positions in guides section

4c82b0b

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

refactor: tweak a comment for clarity

89bb38f

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

hejsztynx force-pushed the @ksienkiewicz/docs-guides branch from 19caac3 to 89bb38f Compare August 11, 2026 10:24

exploIF reviewed Aug 11, 2026

View reviewed changes

		const q = query.toLowerCase();
		return source.filter(item => item.name.toLowerCase().startsWith(q));


		const hasRangedSelection = !!selection && selection.start !== selection.end;

		const contextMenuItems: ContextMenuItem[] = useMemo(


		:::info

		This is a native-only feature (iOS and Android) - which

Uh oh!

Conversation

hejsztynx commented Jul 21, 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!

kacperzolkiewski left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

szydlovsky left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

exploIF 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!

5 participants