diff --git a/change/react-native-windows-363573e0-b320-4ecb-a1c0-ad9eac1b6845.json b/change/react-native-windows-363573e0-b320-4ecb-a1c0-ad9eac1b6845.json new file mode 100644 index 00000000000..320c19a0d23 --- /dev/null +++ b/change/react-native-windows-363573e0-b320-4ecb-a1c0-ad9eac1b6845.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix Unicode length Calculation in Text Component", + "packageName": "react-native-windows", + "email": "66076509+vineethkuttan@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp index 8016850246a..24d136ed36c 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp @@ -149,11 +149,13 @@ facebook::react::SharedViewEventEmitter ParagraphComponentView::eventEmitterAtPo uint32_t textPosition = metrics.textPosition; for (auto fragment : m_attributedStringBox.getValue().getFragments()) { - if (textPosition < fragment.string.length()) { + uint32_t utf16Length = + static_cast(::Microsoft::Common::Unicode::Utf8ToUtf16(fragment.string).length()); + if (textPosition < utf16Length) { return std::static_pointer_cast( fragment.parentShadowView.eventEmitter); } - textPosition -= static_cast(fragment.string.length()); + textPosition -= utf16Length; } } } @@ -206,10 +208,12 @@ bool ParagraphComponentView::IsTextSelectableAtPoint(facebook::react::Point pt) // Finds which fragment contains this text position for (auto fragment : m_attributedStringBox.getValue().getFragments()) { - if (textPosition < fragment.string.length()) { + uint32_t utf16Length = + static_cast(::Microsoft::Common::Unicode::Utf8ToUtf16(fragment.string).length()); + if (textPosition < utf16Length) { return true; } - textPosition -= static_cast(fragment.string.length()); + textPosition -= utf16Length; } } } diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/TextDrawing.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/TextDrawing.cpp index 29a33dff048..a7768cc6be6 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/TextDrawing.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/TextDrawing.cpp @@ -66,7 +66,7 @@ void RenderText( unsigned int position = 0; unsigned int length = 0; for (auto fragment : attributedString.getFragments()) { - length = static_cast(fragment.string.length()); + length = static_cast(::Microsoft::Common::Unicode::Utf8ToUtf16(fragment.string).length()); DWRITE_TEXT_RANGE range = {position, length}; if (fragment.textAttributes.foregroundColor && (fragment.textAttributes.foregroundColor != textAttributes.foregroundColor) || diff --git a/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/WindowsTextLayoutManager.cpp b/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/WindowsTextLayoutManager.cpp index 1a9afbf97d8..4b4e7baaa77 100644 --- a/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/WindowsTextLayoutManager.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/WindowsTextLayoutManager.cpp @@ -262,7 +262,7 @@ void WindowsTextLayoutManager::GetTextLayout( attachments.push_back(attachment); position += 1; } else { - unsigned int length = static_cast(fragment.string.length()); + unsigned int length = static_cast(Microsoft::Common::Unicode::Utf8ToUtf16(fragment.string).length()); DWRITE_TEXT_RANGE range = {position, length}; TextAttributes attributes = fragment.textAttributes; DWRITE_FONT_STYLE fragmentStyle = DWRITE_FONT_STYLE_NORMAL;