Skip to content

feat: add ==highlight== inline spans with markdownStyle.highlight#389

Open
hryhoriiK97 wants to merge 5 commits into
mainfrom
@hryhoriiK97/feat/highlight
Open

feat: add ==highlight== inline spans with markdownStyle.highlight#389
hryhoriiK97 wants to merge 5 commits into
mainfrom
@hryhoriiK97/feat/highlight

Conversation

@hryhoriiK97

@hryhoriiK97 hryhoriiK97 commented Jun 10, 2026

Copy link
Copy Markdown
Collaborator

What/Why?

Adds support for CommonMark-style highlight spans (==text==) to EnrichedMarkdownText, gated behind a new opt-in parser flag so existing markdown is unaffected.

Testing

Screenshot

iOS Android

PR Checklist

  • Code compiles and runs on iOS
  • Code compiles and runs on Android
  • Updated documentation/README if applicable
  • Ran example app to verify changes
  • E2E tests are passing
  • Required E2E tests have been added (if applicable)

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Pull request overview

Adds opt-in support for CommonMark-style highlight spans (==text==) across the Enriched Markdown pipeline (parser → AST → renderers) with a new md4cFlags.highlight toggle and a new markdownStyle.highlight style bucket.

Changes:

  • Extends MD4C parsing (C++ + WASM + native bridges) to emit a Highlight inline node when md4cFlags.highlight is enabled.
  • Adds highlight rendering/styling on Web (<mark>), iOS (new HighlightRenderer + style config), and Android (new HighlightSpan/renderer + style config).
  • Updates docs and example Storybook stories to demonstrate the new flag and style options.

Reviewed changes

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

Show a summary per file
File Description
src/web/types.ts Adds Highlight to the web AST node type union.
src/web/styles.ts Introduces highlight CSS style and wires it into buildStyles.
src/web/renderers/InlineRenderers.tsx Adds <mark> renderer for Highlight inline nodes.
src/web/parseMarkdown.ts Extends WASM parseMarkdown binding to pass the new highlight flag.
src/web/EnrichedMarkdownText.tsx Plumbs md4cFlags.highlight through parsing and effect dependencies.
src/types/MarkdownStyleInternal.ts Adds internal highlight style shape.
src/types/MarkdownStyle.ts Adds public markdownStyle.highlight + md4cFlags.highlight docs/types.
src/normalizeMarkdownStyle.web.ts Adds default highlight style + normalization for highlight color fallback.
src/normalizeMarkdownStyle.ts Adds default highlight style + normalization for highlight color fallback (native).
src/native/EnrichedMarkdownText.tsx Adds default + normalized md4cFlags.highlight for native components.
src/EnrichedMarkdownTextNativeComponent.ts Extends codegen types with highlight style + md4cFlags.highlight.
src/EnrichedMarkdownNativeComponent.ts Extends codegen types with highlight style + md4cFlags.highlight.
ios/utils/StylePropsUtils.h Applies highlight colors from props into StyleConfig.
ios/utils/MarkdownExtractor.m Extracts highlight spans back to ==...== when serializing to markdown.
ios/utils/MarkdownASTSerializer.m Serializes highlight AST nodes as ==...==.
ios/utils/HTMLGenerator.m Emits <mark> with highlight styles in generated HTML output.
ios/styles/StyleConfig.mm Stores highlight colors in style config and supports copying/accessors.
ios/styles/StyleConfig.h Declares highlight style config accessors.
ios/renderer/RendererFactory.m Registers iOS HighlightRenderer for highlight nodes.
ios/renderer/RenderContext.m Adds helper to resolve highlight foreground color vs block/paragraph colors.
ios/renderer/RenderContext.h Exposes calculateHighlightColor API.
ios/renderer/HighlightRenderer.m New renderer applying highlight foreground/background attributes.
ios/renderer/HighlightRenderer.h New highlight renderer header + attribute name.
ios/parser/MarkdownParserBridge.mm Bridges Highlight node type + flag into ObjC/C++ parser.
ios/parser/MarkdownASTNode.h Adds MarkdownNodeTypeHighlight.
ios/parser/ENRMMarkdownParser.mm Adds _highlight default/copy behavior for parser flags.
ios/parser/ENRMMarkdownParser.h Adds highlight flag property.
ios/internals/MeasurementCache.h Includes highlight flag + style fields in measurement cache key/hash.
ios/EnrichedMarkdownText.mm Triggers re-render/measure when md4cFlags.highlight changes.
ios/EnrichedMarkdown.mm Triggers re-render/measure when md4cFlags.highlight changes.
docs/STYLES.md Documents markdownStyle.highlight and usage example.
docs/API_REFERENCE.md Documents md4cFlags.highlight and updates defaults.
cpp/wasm/md4c_wasm.cpp Extends WASM export signature + wires highlight flag.
cpp/wasm/ASTSerializer.cpp Serializes C++ Highlight node type to "Highlight".
cpp/parser/MD4CParser.hpp Adds highlight to Md4cFlags struct.
cpp/parser/MD4CParser.cpp Enables MD_FLAG_HIGHLIGHT and maps MD_SPAN_MARKHighlight node.
cpp/parser/MarkdownASTNode.hpp Adds Highlight to C++ NodeType enum.
apps/example/ios/Podfile.lock Updates iOS example pod lockfile checksums/tooling versions.
apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/shared/storybookStyleBuilders.ts Adds builder for highlight style controls.
apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/shared/storybookMarkdownStyles.ts Adds highlight control defaults/types for Storybook.
apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/props/Md4cFlags.stories.tsx Adds highlight flag toggle to md4cFlags Storybook story.
apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/Highlight.stories.tsx Adds a dedicated Storybook story for highlight spans.
android/src/main/java/com/swmansion/enriched/markdown/utils/text/conversion/MarkdownExtractor.kt Extracts highlight spans back to ==...== when serializing markdown.
android/src/main/java/com/swmansion/enriched/markdown/utils/text/conversion/HTMLGenerator.kt Emits <mark> for highlight spans in generated HTML.
android/src/main/java/com/swmansion/enriched/markdown/utils/common/serialization/MarkdownASTSerializer.kt Serializes highlight AST nodes as ==...==.
android/src/main/java/com/swmansion/enriched/markdown/utils/common/MarkdownViewManagerUtils.kt Parses md4cFlags.highlight from JS props.
android/src/main/java/com/swmansion/enriched/markdown/styles/StyleConfig.kt Adds highlight style parsing and includes it in equality/hashCode.
android/src/main/java/com/swmansion/enriched/markdown/styles/HighlightStyle.kt New Android highlight style value object.
android/src/main/java/com/swmansion/enriched/markdown/spans/HighlightSpan.kt New span applying highlight foreground/background without clobbering nested styles.
android/src/main/java/com/swmansion/enriched/markdown/renderer/SpanStyleCache.kt Adds cached highlight colors + block-aware highlight foreground resolver.
android/src/main/java/com/swmansion/enriched/markdown/renderer/NodeRenderer.kt Registers Android HighlightRenderer.
android/src/main/java/com/swmansion/enriched/markdown/renderer/HighlightRenderer.kt New renderer that wraps children with HighlightSpan.
android/src/main/java/com/swmansion/enriched/markdown/parser/Parser.kt Adds highlight to Android Md4cFlags.
android/src/main/java/com/swmansion/enriched/markdown/parser/MarkdownASTNode.kt Adds Highlight node type to Android AST model.
android/src/main/java/com/swmansion/enriched/markdown/MeasurementStore.kt Includes md4cFlags.highlight in measurement parsing/cache key inputs.
android/src/main/cpp/jni-adapter.cpp Bridges highlight flag and node type ordinal to Java.

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

Comment thread src/web/styles.ts

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 58 out of 60 changed files in this pull request and generated 4 comments.

Comment thread src/web/styles.ts
Comment thread ios/utils/HTMLGenerator.m
Comment thread ios/renderer/ParagraphRenderer.m
Comment on lines +772 to +782
if (isHighlight) {
html
.append("<mark style=\"background-color: ")
.append(styles.highlightBackgroundColor)
if (styles.highlightColor != styles.paragraphColor) {
html
.append("; color: ")
.append(styles.highlightColor)
}
html.append(";\">")
}

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.

nit/question: Personally I find string interpolation more readable here — you can see the whole tag at once rather than mentally splicing across chained .append() calls. Something like in suggested change

I get that the rest of the file uses the chained-append style for consistency, so happy to leave it for now but it might be worth a separate refactor PR to convert the other tag-assembly sites (handleBlockquote, handleList, etc.) the same way. The cost of the extra string allocation per tag should be negligible compared to the readability improvement.

Suggested change
if (isHighlight) {
html
.append("<mark style=\"background-color: ")
.append(styles.highlightBackgroundColor)
if (styles.highlightColor != styles.paragraphColor) {
html
.append("; color: ")
.append(styles.highlightColor)
}
html.append(";\">")
}
if (isHighlight) {
val colorPart = if (styles.highlightColor != styles.paragraphColor) "color: ${styles.highlightColor};" else ""
html.append("<mark style=\"background-color: ${styles.highlightBackgroundColor}; $colorPart\">")
}

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

@eszlamczyk yes, agreed! Let's keep this as it is for now, and we'll implement the refactor when we have some free bandwidth.

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