Skip to content

docs: htmlStyle for interactive examples components - #719

Open
hejsztynx wants to merge 4 commits into
@ksienkiewicz/docs-guidesfrom
@ksienkiewicz/docs-html-style
Open

docs: htmlStyle for interactive examples components#719
hejsztynx wants to merge 4 commits into
@ksienkiewicz/docs-guidesfrom
@ksienkiewicz/docs-html-style

Conversation

@hejsztynx

Copy link
Copy Markdown
Collaborator

Summary

Provided an htmlStyle for the EnrichedTextInput and EnrichedText components in the interactive examples. The internal default values didn't look too well, so this htmlStyle provides colorings that match the docs' style both in dark and light mode.

That makes the interactive examples' code not directly copiable, as htmlStyle is not present there to reduce noise. Added a note explaining that in the your-first-editor section.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR improves the visual consistency of the interactive documentation examples by supplying a shared htmlStyle (and a specialized EnrichedText variant) so rendered rich text matches the docs’ light/dark color palette, and adds a note explaining why this extra styling appears in the Code tab.

Changes:

  • Added a shared docs/src/examples/htmlStyle.ts and applied it to all interactive EnrichedTextInput examples.
  • Updated the rendering example to use an EnrichedText-specific enrichedTextHtmlStyle (with press-state styling for links/mentions).
  • Added a docs note explaining that the htmlStyle is only present for visual parity and isn’t part of the minimal “copy/paste” sample.

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
docs/src/examples/TextShortcutsEditor.tsx Applies shared htmlStyle to the shortcuts editor example.
docs/src/examples/TextAlignmentEditor.tsx Applies shared htmlStyle to the alignment editor example.
docs/src/examples/RenderingEditor.tsx Applies htmlStyle to input and enrichedTextHtmlStyle to rendered output.
docs/src/examples/MentionEditor.tsx Applies shared htmlStyle to the mention editor example.
docs/src/examples/ListsEditor.tsx Applies shared htmlStyle to the lists editor example.
docs/src/examples/LinksEditor.tsx Applies shared htmlStyle to the links editor example.
docs/src/examples/ImagesEditor.tsx Applies shared htmlStyle to the images editor example.
docs/src/examples/htmlStyle.ts Introduces centralized style definitions for interactive docs examples.
docs/src/examples/FirstEditor.tsx Applies shared htmlStyle to the first editor example.
docs/src/examples/BasicStylesEditor.tsx Applies shared htmlStyle to the basic styles editor example.
docs/docs/fundamentals/your-first-editor.mdx Adds a note explaining why htmlStyle appears in the interactive example source.

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

Comment thread docs/src/examples/htmlStyle.ts
Comment thread docs/docs/fundamentals/your-first-editor.mdx Outdated
@hejsztynx
hejsztynx force-pushed the @ksienkiewicz/docs-html-style branch from af4a429 to c50bf9c Compare July 22, 2026 09:41
@hejsztynx
hejsztynx changed the base branch from @ksienkiewicz/docs-colors to @ksienkiewicz/docs-guides July 22, 2026 09:41
Comment thread docs/src/examples/FirstEditor.tsx
Comment thread docs/docs/fundamentals/your-first-editor.mdx
Comment thread docs/src/examples/htmlStyle.ts Outdated

@kacperzolkiewski kacperzolkiewski left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@hejsztynx
hejsztynx requested review from exploIF and szydlovsky July 24, 2026 13:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants