feat: add ==highlight== inline spans with markdownStyle.highlight#389
feat: add ==highlight== inline spans with markdownStyle.highlight#389hryhoriiK97 wants to merge 5 commits into
Conversation
There was a problem hiding this comment.
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
Highlightinline node whenmd4cFlags.highlightis enabled. - Adds highlight rendering/styling on Web (
<mark>), iOS (newHighlightRenderer+ style config), and Android (newHighlightSpan/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_MARK → Highlight 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.
…efaulting to 'inherit'
| if (isHighlight) { | ||
| html | ||
| .append("<mark style=\"background-color: ") | ||
| .append(styles.highlightBackgroundColor) | ||
| if (styles.highlightColor != styles.paragraphColor) { | ||
| html | ||
| .append("; color: ") | ||
| .append(styles.highlightColor) | ||
| } | ||
| html.append(";\">") | ||
| } |
There was a problem hiding this comment.
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.
| 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\">") | |
| } |
There was a problem hiding this comment.
@eszlamczyk yes, agreed! Let's keep this as it is for now, and we'll implement the refactor when we have some free bandwidth.
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
PR Checklist