diff --git a/vnext/Microsoft.ReactNative/Fabric/CompParagraphComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/CompParagraphComponentView.cpp index 1df095b75b6..ffcc7851307 100644 --- a/vnext/Microsoft.ReactNative/Fabric/CompParagraphComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/CompParagraphComponentView.cpp @@ -291,6 +291,23 @@ void CompParagraphComponentView::DrawText() noexcept { d2dDeviceContext->CreateSolidColorBrush(D2D1::ColorF(D2D1::ColorF::Black, 1.0f), brush.put())); } + // Create color effects for individual text fragments. + unsigned int position = 0; + unsigned int length = 0; + for (auto fragment : m_attributedStringBox.getValue().getFragments()) { + length = static_cast(fragment.string.length()); + DWRITE_TEXT_RANGE range = {position, length}; + if (fragment.textAttributes.foregroundColor) { + winrt::com_ptr brush; + auto winColor = fragment.textAttributes.foregroundColor.AsWindowsColor(); + D2D1::ColorF color{winColor.R / 255.0f, winColor.G / 255.0f, winColor.B / 255.0f, winColor.A / 255.0f}; + winrt::check_hresult(d2dDeviceContext->CreateSolidColorBrush(color, brush.put())); + m_textLayout->SetDrawingEffect(brush.get(), range); + } + + position += length; + } + d2dDeviceContext->Clear(D2D1::ColorF(D2D1::ColorF::Black, 0.0f)); // Draw the line of text at the specified offset, which corresponds to the top-left diff --git a/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/TextLayoutManager.cpp b/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/TextLayoutManager.cpp index 3bc150f5ebb..e50c6840a6d 100644 --- a/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/TextLayoutManager.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/TextLayoutManager.cpp @@ -80,7 +80,6 @@ void TextLayoutManager::GetTextLayout( range); spTextLayout->SetFontStyle(fragmentStyle, range); spTextLayout->SetFontSize(attributes.fontSize, range); - // ugh color stuff position += length; }