react-native-windows 0.0.0-canary.487 → 0.0.0-canary.490

package/Chakra/ChakraHelpers.cpp

@@ -3,7 +3,6 @@
 
 #include "pch.h"
 
-#include <RuntimeOptions.h>
 #include "ChakraHelpers.h"
 #include "ChakraUtils.h"
 #include "ChakraValue.h"

package/Libraries/Components/Button.windows.js

@@ -342,6 +342,7 @@ class Button extends React.Component<
     if (Platform.OS === 'windows') {
       return (
         <Touchable
+          accessible={accessible}
           accessibilityLabel={accessibilityLabel}
           accessibilityHint={accessibilityHint}
           accessibilityLanguage={accessibilityLanguage}

package/Libraries/Pressability/Pressability.windows.js

@@ -721,6 +721,11 @@ export default class Pressability {
     }
   }
 
+  // [Windows]
+  _isDefaultPressButton(button) {
+    return !button; // Treat 0 or undefined as default press
+  }
+
   /**
    * Performs a transition between touchable states and identify any activations
    * or deactivations (and callback invocations).
@@ -771,7 +776,10 @@ export default class Pressability {
       }
       const {onLongPress, onPress, android_disableSound} = this._config;
 
-      if (onPress != null && getTouchFromPressEvent(event).button === 0) {
+      if (
+        onPress != null &&
+        this._isDefaultPressButton(getTouchFromPressEvent(event).button)
+      ) {
         const isPressCanceledByLongPress =
           onLongPress != null &&
           prevState === 'RESPONDER_ACTIVE_LONG_PRESS_IN' &&
@@ -800,7 +808,10 @@ export default class Pressability {
 
   _deactivate(event: PressEvent): void {
     const {onPressOut} = this._config;
-    if (onPressOut != null && getTouchFromPressEvent(event).button === 0) {
+    if (
+      onPressOut != null &&
+      this._isDefaultPressButton(getTouchFromPressEvent(event).button)
+    ) {
       const minPressDuration = normalizeDelay(
         this._config.minPressDuration,
         0,

package/Libraries/StyleSheet/processTransform.windows.js

@@ -0,0 +1,272 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+const MatrixMath = require('../Utilities/MatrixMath');
+const Platform = require('../Utilities/Platform');
+
+const invariant = require('invariant');
+const stringifySafe = require('../Utilities/stringifySafe').default;
+
+/**
+ * Generate a transform matrix based on the provided transforms, and use that
+ * within the style object instead.
+ *
+ * This allows us to provide an API that is similar to CSS, where transforms may
+ * be applied in an arbitrary order, and yet have a universal, singular
+ * interface to native code.
+ */
+function processTransform(
+  transform: Array<Object>,
+): Array<Object> | Array<number> {
+  if (__DEV__) {
+    _validateTransforms(transform);
+  }
+
+  // Android & iOS implementations of transform property accept the list of
+  // transform properties as opposed to a transform Matrix. This is necessary
+  // to control transform property updates completely on the native thread.
+  if (
+    Platform.OS === 'android' ||
+    Platform.OS === 'ios' ||
+    Platform.OS === 'windows'
+  ) {
+    return transform;
+  }
+
+  const result = MatrixMath.createIdentityMatrix();
+
+  transform.forEach(transformation => {
+    const key = Object.keys(transformation)[0];
+    const value = transformation[key];
+
+    switch (key) {
+      case 'matrix':
+        MatrixMath.multiplyInto(result, result, value);
+        break;
+      case 'perspective':
+        _multiplyTransform(result, MatrixMath.reusePerspectiveCommand, [value]);
+        break;
+      case 'rotateX':
+        _multiplyTransform(result, MatrixMath.reuseRotateXCommand, [
+          _convertToRadians(value),
+        ]);
+        break;
+      case 'rotateY':
+        _multiplyTransform(result, MatrixMath.reuseRotateYCommand, [
+          _convertToRadians(value),
+        ]);
+        break;
+      case 'rotate':
+      case 'rotateZ':
+        _multiplyTransform(result, MatrixMath.reuseRotateZCommand, [
+          _convertToRadians(value),
+        ]);
+        break;
+      case 'scale':
+        _multiplyTransform(result, MatrixMath.reuseScaleCommand, [value]);
+        break;
+      case 'scaleX':
+        _multiplyTransform(result, MatrixMath.reuseScaleXCommand, [value]);
+        break;
+      case 'scaleY':
+        _multiplyTransform(result, MatrixMath.reuseScaleYCommand, [value]);
+        break;
+      case 'translate':
+        _multiplyTransform(result, MatrixMath.reuseTranslate3dCommand, [
+          value[0],
+          value[1],
+          value[2] || 0,
+        ]);
+        break;
+      case 'translateX':
+        _multiplyTransform(result, MatrixMath.reuseTranslate2dCommand, [
+          value,
+          0,
+        ]);
+        break;
+      case 'translateY':
+        _multiplyTransform(result, MatrixMath.reuseTranslate2dCommand, [
+          0,
+          value,
+        ]);
+        break;
+      case 'skewX':
+        _multiplyTransform(result, MatrixMath.reuseSkewXCommand, [
+          _convertToRadians(value),
+        ]);
+        break;
+      case 'skewY':
+        _multiplyTransform(result, MatrixMath.reuseSkewYCommand, [
+          _convertToRadians(value),
+        ]);
+        break;
+      default:
+        throw new Error('Invalid transform name: ' + key);
+    }
+  });
+
+  return result;
+}
+
+/**
+ * Performs a destructive operation on a transform matrix.
+ */
+function _multiplyTransform(
+  result: Array<number>,
+  matrixMathFunction: Function,
+  args: Array<number>,
+): void {
+  const matrixToApply = MatrixMath.createIdentityMatrix();
+  const argsWithIdentity = [matrixToApply].concat(args);
+  matrixMathFunction.apply(this, argsWithIdentity);
+  MatrixMath.multiplyInto(result, result, matrixToApply);
+}
+
+/**
+ * Parses a string like '0.5rad' or '60deg' into radians expressed in a float.
+ * Note that validation on the string is done in `_validateTransform()`.
+ */
+function _convertToRadians(value: string): number {
+  const floatValue = parseFloat(value);
+  return value.indexOf('rad') > -1 ? floatValue : (floatValue * Math.PI) / 180;
+}
+
+function _validateTransforms(transform: Array<Object>): void {
+  transform.forEach(transformation => {
+    const keys = Object.keys(transformation);
+    invariant(
+      keys.length === 1,
+      'You must specify exactly one property per transform object. Passed properties: %s',
+      stringifySafe(transformation),
+    );
+    const key = keys[0];
+    const value = transformation[key];
+    _validateTransform(key, value, transformation);
+  });
+}
+
+function _validateTransform(
+  key:
+    | string
+    | $TEMPORARY$string<'matrix'>
+    | $TEMPORARY$string<'perspective'>
+    | $TEMPORARY$string<'rotate'>
+    | $TEMPORARY$string<'rotateX'>
+    | $TEMPORARY$string<'rotateY'>
+    | $TEMPORARY$string<'rotateZ'>
+    | $TEMPORARY$string<'scale'>
+    | $TEMPORARY$string<'scaleX'>
+    | $TEMPORARY$string<'scaleY'>
+    | $TEMPORARY$string<'skewX'>
+    | $TEMPORARY$string<'skewY'>
+    | $TEMPORARY$string<'translate'>
+    | $TEMPORARY$string<'translateX'>
+    | $TEMPORARY$string<'translateY'>,
+  value: any | number | string,
+  transformation: any,
+) {
+  invariant(
+    !value.getValue,
+    'You passed an Animated.Value to a normal component. ' +
+      'You need to wrap that component in an Animated. For example, ' +
+      'replace <View /> by <Animated.View />.',
+  );
+
+  const multivalueTransforms = ['matrix', 'translate'];
+  if (multivalueTransforms.indexOf(key) !== -1) {
+    invariant(
+      Array.isArray(value),
+      'Transform with key of %s must have an array as the value: %s',
+      key,
+      stringifySafe(transformation),
+    );
+  }
+  switch (key) {
+    case 'matrix':
+      invariant(
+        value.length === 9 || value.length === 16,
+        'Matrix transform must have a length of 9 (2d) or 16 (3d). ' +
+          'Provided matrix has a length of %s: %s',
+        /* $FlowFixMe[prop-missing] (>=0.84.0 site=react_native_fb) This
+         * comment suppresses an error found when Flow v0.84 was deployed. To
+         * see the error, delete this comment and run Flow. */
+        value.length,
+        stringifySafe(transformation),
+      );
+      break;
+    case 'translate':
+      invariant(
+        value.length === 2 || value.length === 3,
+        'Transform with key translate must be an array of length 2 or 3, found %s: %s',
+        /* $FlowFixMe[prop-missing] (>=0.84.0 site=react_native_fb) This
+         * comment suppresses an error found when Flow v0.84 was deployed. To
+         * see the error, delete this comment and run Flow. */
+        value.length,
+        stringifySafe(transformation),
+      );
+      break;
+    case 'rotateX':
+    case 'rotateY':
+    case 'rotateZ':
+    case 'rotate':
+    case 'skewX':
+    case 'skewY':
+      invariant(
+        typeof value === 'string',
+        'Transform with key of "%s" must be a string: %s',
+        key,
+        stringifySafe(transformation),
+      );
+      invariant(
+        value.indexOf('deg') > -1 || value.indexOf('rad') > -1,
+        'Rotate transform must be expressed in degrees (deg) or radians ' +
+          '(rad): %s',
+        stringifySafe(transformation),
+      );
+      break;
+    case 'perspective':
+      invariant(
+        typeof value === 'number',
+        'Transform with key of "%s" must be a number: %s',
+        key,
+        stringifySafe(transformation),
+      );
+      invariant(
+        value !== 0,
+        'Transform with key of "%s" cannot be zero: %s',
+        key,
+        stringifySafe(transformation),
+      );
+      break;
+    case 'translateX':
+    case 'translateY':
+    case 'scale':
+    case 'scaleX':
+    case 'scaleY':
+      invariant(
+        typeof value === 'number',
+        'Transform with key of "%s" must be a number: %s',
+        key,
+        stringifySafe(transformation),
+      );
+      break;
+    default:
+      invariant(
+        false,
+        'Invalid transform %s: %s',
+        key,
+        stringifySafe(transformation),
+      );
+  }
+}
+
+module.exports = processTransform;

package/Microsoft.ReactNative/DynamicReader.cpp

@@ -140,9 +140,9 @@ bool DynamicReader::GetBoolean() noexcept {
 }
 
 int64_t DynamicReader::GetInt64() noexcept {
-  return (m_current->type() == folly::dynamic::Type::INT64)
-      ? m_current->getInt()
-      : (m_current->type() == folly::dynamic::Type::DOUBLE) ? static_cast<int64_t>(m_current->getDouble()) : 0;
+  return (m_current->type() == folly::dynamic::Type::INT64) ? m_current->getInt()
+      : (m_current->type() == folly::dynamic::Type::DOUBLE) ? static_cast<int64_t>(m_current->getDouble())
+                                                            : 0;
 }
 
 double DynamicReader::GetDouble() noexcept {

package/Microsoft.ReactNative/Fabric/DWriteHelpers.cpp

@@ -0,0 +1,19 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include "DWriteHelpers.h"
+
+namespace Microsoft::ReactNative {
+
+winrt::com_ptr<::IDWriteFactory> DWriteFactory() noexcept {
+  static winrt::com_ptr<::IDWriteFactory> s_dwriteFactory;
+  if (!s_dwriteFactory) {
+    winrt::check_hresult(::DWriteCreateFactory(
+        DWRITE_FACTORY_TYPE_SHARED, __uuidof(s_dwriteFactory), reinterpret_cast<::IUnknown **>(s_dwriteFactory.put())));
+  }
+  return s_dwriteFactory;
+}
+
+} // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Fabric/DWriteHelpers.h

@@ -0,0 +1,13 @@
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include <dwrite.h>
+
+namespace Microsoft::ReactNative {
+
+winrt::com_ptr<::IDWriteFactory> DWriteFactory() noexcept;
+
+} // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Fabric/ParagraphComponentView.cpp

@@ -7,6 +7,7 @@
 #include "ParagraphComponentView.h"
 
 #include <UI.Xaml.Controls.h>
+#include <UI.Xaml.Documents.h>
 #include <Utils/ValueUtils.h>
 #include <dwrite.h>
 #include <react/renderer/components/text/ParagraphShadowNode.h>
@@ -30,14 +31,12 @@ void ParagraphComponentView::mountChildComponentView(
     uint32_t index) noexcept {
   auto v = static_cast<const ParagraphComponentView &>(childComponentView);
   assert(false);
-  // m_element.Children().InsertAt(index, v.Element());
 }
 
 void ParagraphComponentView::unmountChildComponentView(
     const IComponentView &childComponentView,
     uint32_t index) noexcept {
   assert(false);
-  // m_element.Children().RemoveAt(index);
 }
 
 void ParagraphComponentView::updateProps(
@@ -99,11 +98,40 @@ void ParagraphComponentView::updateState(
     facebook::react::State::Shared const &oldState) noexcept {
   const auto &newState = *std::static_pointer_cast<facebook::react::ParagraphShadowNode::ConcreteState const>(state);
 
-  // Only handle single/empty fragments right now -- ignore the other fragments
-  m_element.Text(
-      newState.getData().attributedString.getFragments().size()
-          ? Microsoft::Common::Unicode::Utf8ToUtf16(newState.getData().attributedString.getFragments()[0].string)
-          : L"");
+  m_element.Inlines().Clear();
+
+  for (const auto &fragment : newState.getData().attributedString.getFragments()) {
+    auto inlines = m_element.Inlines();
+
+    if (auto tdlt = fragment.textAttributes.textDecorationLineType; tdlt &&
+        (*tdlt == facebook::react::TextDecorationLineType::Underline ||
+         *tdlt == facebook::react::TextDecorationLineType::UnderlineStrikethrough)) {
+      auto underline = xaml::Documents::Underline();
+      inlines.Append(underline);
+      inlines = underline.Inlines();
+    }
+
+    if (fragment.textAttributes.fontStyle == facebook::react::FontStyle::Italic ||
+        fragment.textAttributes.fontStyle == facebook::react::FontStyle::Oblique) {
+      auto italic = xaml::Documents::Italic();
+      inlines.Append(italic);
+      inlines = italic.Inlines();
+    }
+
+    auto run = xaml::Documents::Run();
+    run.Text(winrt::to_hstring(fragment.string));
+    run.FontFamily(xaml::Media::FontFamily(
+        fragment.textAttributes.fontFamily.empty() ? L"Segoe UI"
+                                                   : winrt::to_hstring(fragment.textAttributes.fontFamily)));
+
+    run.FontWeight(
+        winrt::Windows::UI::Text::FontWeight{static_cast<uint16_t>(fragment.textAttributes.fontWeight.value_or(
+            static_cast<facebook::react::FontWeight>(DWRITE_FONT_WEIGHT_REGULAR)))});
+
+    run.FontSize(fragment.textAttributes.fontSize);
+    run.Foreground(fragment.textAttributes.foregroundColor.AsWindowsBrush());
+    inlines.Append(run);
+  }
 }
 void ParagraphComponentView::updateLayoutMetrics(
     facebook::react::LayoutMetrics const &layoutMetrics,
@@ -118,9 +146,7 @@ void ParagraphComponentView::updateLayoutMetrics(
   m_element.Width(layoutMetrics.frame.size.width);
   m_element.Height(layoutMetrics.frame.size.height);
 }
-void ParagraphComponentView::finalizeUpdates(RNComponentViewUpdateMask updateMask) noexcept {
-  // m_element.FinalizeProperties();
-}
+void ParagraphComponentView::finalizeUpdates(RNComponentViewUpdateMask updateMask) noexcept {}
 void ParagraphComponentView::prepareForRecycle() noexcept {}
 facebook::react::SharedProps ParagraphComponentView::props() noexcept {
   assert(false);

package/Microsoft.ReactNative/Fabric/SliderComponentView.h

@@ -13,7 +13,7 @@
 
 #pragma warning(push)
 #pragma warning(disable : 4244 4305)
-//#include <react/renderer/components/view/ViewProps.h>
+// #include <react/renderer/components/view/ViewProps.h>
 #pragma warning(pop)
 
 namespace Microsoft::ReactNative {

package/Microsoft.ReactNative/Fabric/SwitchComponentView.h

@@ -13,7 +13,7 @@
 
 #pragma warning(push)
 #pragma warning(disable : 4244 4305)
-//#include <react/renderer/components/view/ViewProps.h>
+// #include <react/renderer/components/view/ViewProps.h>
 #pragma warning(pop)
 
 namespace Microsoft::ReactNative {

package/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/TextLayoutManager.cpp

@@ -5,72 +5,125 @@
 
 #include "pch.h"
 
+#include <Fabric/DWriteHelpers.h>
+#include <dwrite.h>
 #include "TextLayoutManager.h"
 
 #include <unicode.h>
 
 namespace facebook::react {
 
-TextLayoutManager::~TextLayoutManager() {}
+void TextLayoutManager::GetTextLayout(
+    AttributedStringBox attributedStringBox,
+    ParagraphAttributes paragraphAttributes,
+    LayoutConstraints layoutConstraints,
+    const std::optional<TextAlignment> &textAlignment,
+    winrt::com_ptr<IDWriteTextLayout> &spTextLayout) noexcept {
+  if (attributedStringBox.getValue().isEmpty())
+    return;
+
+  auto fragments = attributedStringBox.getValue().getFragments();
+  auto outerFragment = fragments[0];
+
+  DWRITE_FONT_STYLE style = DWRITE_FONT_STYLE_NORMAL;
+  if (outerFragment.textAttributes.fontStyle == facebook::react::FontStyle::Italic)
+    style = DWRITE_FONT_STYLE_ITALIC;
+  else if (outerFragment.textAttributes.fontStyle == facebook::react::FontStyle::Oblique)
+    style = DWRITE_FONT_STYLE_OBLIQUE;
+
+  winrt::com_ptr<IDWriteTextFormat> spTextFormat;
+  winrt::check_hresult(Microsoft::ReactNative::DWriteFactory()->CreateTextFormat(
+      outerFragment.textAttributes.fontFamily.empty()
+          ? L"Segoe UI"
+          : Microsoft::Common::Unicode::Utf8ToUtf16(outerFragment.textAttributes.fontFamily).c_str(),
+      nullptr, // Font collection (nullptr sets it to use the system font collection).
+      static_cast<DWRITE_FONT_WEIGHT>(outerFragment.textAttributes.fontWeight.value_or(
+          static_cast<facebook::react::FontWeight>(DWRITE_FONT_WEIGHT_REGULAR))),
+      style,
+      DWRITE_FONT_STRETCH_NORMAL,
+      outerFragment.textAttributes.fontSize,
+      L"",
+      spTextFormat.put()));
+
+  DWRITE_TEXT_ALIGNMENT alignment = DWRITE_TEXT_ALIGNMENT_LEADING;
+  if (textAlignment) {
+    switch (*textAlignment) {
+      case facebook::react::TextAlignment::Center:
+        alignment = DWRITE_TEXT_ALIGNMENT_CENTER;
+        break;
+      case facebook::react::TextAlignment::Justified:
+        alignment = DWRITE_TEXT_ALIGNMENT_JUSTIFIED;
+        break;
+      case facebook::react::TextAlignment::Left:
+        alignment = DWRITE_TEXT_ALIGNMENT_LEADING;
+        break;
+      case facebook::react::TextAlignment::Right:
+        alignment = DWRITE_TEXT_ALIGNMENT_TRAILING;
+        break;
+      // TODO use LTR values
+      case facebook::react::TextAlignment::Natural:
+        alignment = DWRITE_TEXT_ALIGNMENT_LEADING;
+        break;
+      default:
+        assert(false);
+    }
+  }
+  winrt::check_hresult(spTextFormat->SetTextAlignment(alignment));
+
+  auto str = Microsoft::Common::Unicode::Utf8ToUtf16(attributedStringBox.getValue().getString());
+
+  winrt::check_hresult(Microsoft::ReactNative::DWriteFactory()->CreateTextLayout(
+      str.c_str(), // The string to be laid out and formatted.
+      static_cast<UINT32>(str.length()), // The length of the string.
+      spTextFormat.get(), // The text format to apply to the string (contains font information, etc).
+      layoutConstraints.maximumSize.width, // The width of the layout box.
+      layoutConstraints.maximumSize.height, // The height of the layout box.
+      spTextLayout.put() // The IDWriteTextLayout interface pointer.
+      ));
+
+  unsigned int position = 0;
+  unsigned int length = 0;
+  for (const auto &fragment : fragments) {
+    length = static_cast<UINT32>(fragment.string.length());
+    DWRITE_TEXT_RANGE range = {position, length};
+    TextAttributes attributes = fragment.textAttributes;
+    DWRITE_FONT_STYLE fragmentStyle = DWRITE_FONT_STYLE_NORMAL;
+    if (attributes.fontStyle == facebook::react::FontStyle::Italic)
+      fragmentStyle = DWRITE_FONT_STYLE_ITALIC;
+    else if (attributes.fontStyle == facebook::react::FontStyle::Oblique)
+      fragmentStyle = DWRITE_FONT_STYLE_OBLIQUE;
+
+    winrt::check_hresult(spTextLayout->SetFontFamilyName(
+        attributes.fontFamily.empty() ? L"Segoe UI"
+                                      : Microsoft::Common::Unicode::Utf8ToUtf16(attributes.fontFamily).c_str(),
+        range));
+    winrt::check_hresult(spTextLayout->SetFontWeight(
+        static_cast<DWRITE_FONT_WEIGHT>(
+            attributes.fontWeight.value_or(static_cast<facebook::react::FontWeight>(DWRITE_FONT_WEIGHT_REGULAR))),
+        range));
+    winrt::check_hresult(spTextLayout->SetFontStyle(fragmentStyle, range));
+    winrt::check_hresult(spTextLayout->SetFontSize(attributes.fontSize, range));
+
+    position += length;
+  }
+}
 
 TextMeasurement TextLayoutManager::measure(
     AttributedStringBox attributedStringBox,
     ParagraphAttributes paragraphAttributes,
     LayoutConstraints layoutConstraints) const {
-  winrt::com_ptr<IDWriteFactory> spDWriteFactory;
+  winrt::com_ptr<IDWriteTextLayout> spTextLayout;
 
-  if (!m_spDWriteFactory) {
-    DWriteCreateFactory(
-        DWRITE_FACTORY_TYPE_SHARED, __uuidof(IDWriteFactory), reinterpret_cast<IUnknown **>(m_spDWriteFactory.put()));
-  }
+  GetTextLayout(attributedStringBox, paragraphAttributes, layoutConstraints, TextAlignment::Left, spTextLayout);
 
-  for (auto &fragment : attributedStringBox.getValue().getFragments()) {
-    DWRITE_FONT_STYLE style = DWRITE_FONT_STYLE_NORMAL;
-    if (fragment.textAttributes.fontStyle == facebook::react::FontStyle::Italic)
-      style = DWRITE_FONT_STYLE_ITALIC;
-    else if (fragment.textAttributes.fontStyle == facebook::react::FontStyle::Oblique)
-      style = DWRITE_FONT_STYLE_OBLIQUE;
-
-    winrt::com_ptr<IDWriteTextFormat> spTextFormat;
-    m_spDWriteFactory->CreateTextFormat(
-        fragment.textAttributes.fontFamily.empty()
-            ? L"Segoe UI"
-            : Microsoft::Common::Unicode::Utf8ToUtf16(fragment.textAttributes.fontFamily).c_str(),
-        nullptr, // Font collection (nullptr sets it to use the system font collection).
-        static_cast<DWRITE_FONT_WEIGHT>(fragment.textAttributes.fontWeight.value_or(
-            static_cast<facebook::react::FontWeight>(DWRITE_FONT_WEIGHT_REGULAR))),
-        style,
-        DWRITE_FONT_STRETCH_NORMAL,
-        fragment.textAttributes.fontSize * fragment.textAttributes.fontSizeMultiplier,
-        L"en-us",
-        spTextFormat.put());
-
-    auto str = Microsoft::Common::Unicode::Utf8ToUtf16(fragment.string);
-
-    winrt::com_ptr<IDWriteTextLayout> spTextLayout;
-    // TODO - For now assuming fragment.textAttributes.fontSizeMultiplier is the same as the pointScaleFactor
-    m_spDWriteFactory->CreateTextLayout(
-        str.c_str(), // The string to be laid out and formatted.
-        static_cast<UINT32>(str.length()), // The length of the string.
-        spTextFormat.get(), // The text format to apply to the string (contains font information, etc).
-        layoutConstraints.maximumSize.width *
-            fragment.textAttributes.fontSizeMultiplier, // The width of the layout box.
-        layoutConstraints.maximumSize.height *
-            fragment.textAttributes.fontSizeMultiplier, // The height of the layout box.
-        spTextLayout.put() // The IDWriteTextLayout interface pointer.
-    );
-
-    TextMeasurement tm;
-    DWRITE_TEXT_METRICS dtm;
-    spTextLayout->GetMetrics(&dtm);
-    tm.size = {
-        dtm.width / fragment.textAttributes.fontSizeMultiplier,
-        dtm.height / fragment.textAttributes.fontSizeMultiplier};
-    return tm;
+  TextMeasurement tm{};
+  if (spTextLayout) {
+    DWRITE_TEXT_METRICS dtm{};
+    winrt::check_hresult(spTextLayout->GetMetrics(&dtm));
+    tm.size = {dtm.width, dtm.height};
   }
-
-  return {};
-};
+  return tm;
+}
 
 /**
  * Measures an AttributedString on the platform, as identified by some
@@ -81,8 +134,7 @@ TextMeasurement TextLayoutManager::measureCachedSpannableById(
     ParagraphAttributes const &paragraphAttributes,
     LayoutConstraints layoutConstraints) const {
   assert(false);
-  TextMeasurement tm;
-  return tm;
+  return {};
 }
 
 LinesMeasurements TextLayoutManager::measureLines(
@@ -90,9 +142,7 @@ LinesMeasurements TextLayoutManager::measureLines(
     ParagraphAttributes paragraphAttributes,
     Size size) const {
   assert(false);
-
-  std::vector<LineMeasurement> paragraphLines{};
-  return paragraphLines;
+  return {};
 }
 
 void *TextLayoutManager::getNativeTextLayoutManager() const {