docs: mention guides refinement and text alignment section tweak

[hejsztynx]

Summary

• now you can reclick an alignment option in the Text alignment demo, to set the alignment back to 'auto'
• in both mention guides the layout jumped when query changed, provided a bottom margin, so list has the space to render
• now in emoji picker guide, you can apply an emoji (call setMention), by closing the query with a typed ':'

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Updates the docs example editors to improve UX: toggling text alignment, auto-selecting emojis when a shortcode is completed, and adjusting picker positioning/layout.

Changes:

• Toggle active text alignment back to a default alignment in TextAlignmentEditor.
• Add “auto-pick on trailing colon” behavior for emoji shortcodes and adjust emoji picker layout.
• Rework mention/emoji picker layout to use absolute positioning with extra bottom spacing.

Reviewed changes

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

File	Description
docs/src/examples/TextAlignmentEditor.tsx	Adds toggle-to-default behavior when re-tapping an active alignment option.
docs/src/examples/MentionOnlyEditor.tsx	Changes layout strategy to absolute-position the picker and reserve space below the input.
docs/src/examples/EmojiEditor.tsx	Adds auto-pick when ending with : and updates suggestion filtering + picker layout.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

Pull request overview

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

Suppressed comments (4)

docs/src/examples/EmojiEditor.tsx:36

• This changes behavior from the previous implementation that stripped a trailing :. With the new filter, typing smile: (or any partial query ending in :) will typically produce no suggestions because shortcodes won’t start with a value that includes the trailing colon. Consider restoring query.replace(/:$/, '') (or equivalent) for the suggestion filter, while keeping the exact-match auto-pick behavior in updateQuery.

    return EMOJIS.filter(emoji =>
      emoji.shortcode.startsWith(query.toLowerCase())
    );

docs/src/examples/EmojiEditor.tsx:36

• query.toLowerCase() is executed for each emoji during filtering. Compute the lowercased query once (outside the filter callback) and reuse it to avoid repeated work, especially if the emoji list grows.

    return EMOJIS.filter(emoji =>
      emoji.shortcode.startsWith(query.toLowerCase())
    );

docs/src/examples/MentionOnlyEditor.tsx:137

• The picker layout relies on hard-coded, coupled values (marginBottom: 192 and marginTop: -176). This is brittle and can drift over time, and it may not scale well with font scaling or changes to picker height. Consider deriving both from a single shared constant (e.g., PICKER_HEIGHT plus spacing), or measuring the picker height (e.g., via onLayout) and using that value to reserve space and position the picker.

  input: {
    fontSize: 18,
    color: '#232736',
    padding: 12,
    marginBottom: 192,
    borderRadius: 12,
    minHeight: 96,
    backgroundColor: '#eef0ff',
  },
  picker: {
    position: 'absolute',
    top: '100%',
    marginTop: -176,
    width: '100%',
    borderWidth: 1,
    borderColor: '#dfe3f5',
    borderRadius: 12,

docs/src/examples/EmojiEditor.tsx:131

• Same concern as the mention example: these hard-coded spacing/offset values are tightly coupled and likely to break with UI changes. Consider consolidating them into a shared constant (or computed/measured height) so the reserved input space and picker offset stay in sync.

  input: {
    fontSize: 18,
    color: '#232736',
    padding: 12,
    marginBottom: 186,
    borderRadius: 12,
    minHeight: 96,
    backgroundColor: '#eef0ff',
  },
  picker: {
    position: 'absolute',
    top: '100%',
    marginTop: -170,
    width: '100%',
    borderWidth: 1,
    borderColor: '#dfe3f5',
    borderRadius: 12,