react-native-windows 0.72.13 → 0.73.0-preview.1

package/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

@@ -1,4 +1,3 @@
-
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
@@ -10,9 +9,11 @@
 #include <Utils/ValueUtils.h>
 #include <tom.h>
 #include <unicode.h>
+#include <winrt/Windows.System.h>
 #include <winrt/Windows.UI.h>
 #include "../CompositionHelpers.h"
 #include "../RootComponentView.h"
+#include "Composition/AutoDraw.h"
 #include "WindowsTextInputShadowNode.h"
 #include "WindowsTextInputState.h"
 #include "guid/msoGuid.h"
@@ -252,7 +253,7 @@ struct CompTextHost : public winrt::implements<CompTextHost, ITextHost> {
 
   //@cmember Retrieves the coordinates of a window's client area
   HRESULT TxGetClientRect(LPRECT prc) override {
-    *prc = m_outer->getClientRect();
+    *prc = m_outer->m_rcClient;
     return S_OK;
   }
 
@@ -341,8 +342,8 @@ struct CompTextHost : public winrt::implements<CompTextHost, ITextHost> {
 
   //@cmember Get the background (either opaque or transparent)
   HRESULT TxGetBackStyle(TXTBACKSTYLE *pstyle) override {
+    // We draw the background color as part of the composition visual, not the text
     *pstyle = TXTBACK_TRANSPARENT;
-    //*pstyle = TXTBACK_OPAQUE;
     return S_OK;
   }
 
@@ -364,9 +365,9 @@ struct CompTextHost : public winrt::implements<CompTextHost, ITextHost> {
   }
 
   //@cmember Get the character to display for password input
-  HRESULT TxGetPasswordChar(_Out_ TCHAR *pch) override {
-    assert(false);
-    return {};
+  HRESULT TxGetPasswordChar(_Out_ wchar_t *pch) override {
+    *pch = L'\u2022';
+    return S_OK;
   }
 
   //@cmember Get the accelerator character
@@ -545,7 +546,7 @@ void WindowsTextInputComponentView::handleCommand(std::string const &commandName
 int64_t WindowsTextInputComponentView::sendMessage(uint32_t msg, uint64_t wParam, int64_t lParam) noexcept {
   // Do not forward tab keys into the TextInput, since we want that to do the tab loop instead.  This aligns with WinUI
   // behavior We do forward Ctrl+Tab to the textinput.
-  if (((msg == WM_KEYDOWN || msg == WM_KEYUP) && wParam == VK_TAB) || (msg == WM_CHAR && wParam == '\t')) {
+  if ((msg == WM_CHAR && wParam == '\t')) {
     BYTE bKeys[256];
     if (GetKeyboardState(bKeys)) {
       bool fCtrl = false;
@@ -566,6 +567,255 @@ int64_t WindowsTextInputComponentView::sendMessage(uint32_t msg, uint64_t wParam
   return Super::sendMessage(msg, wParam, lParam);
 }
 
+WPARAM PointerPointToPointerWParam(const winrt::Microsoft::ReactNative::Composition::Input::PointerPoint &pp) noexcept {
+  WPARAM wParam = pp.PointerId();
+  wParam |= (POINTER_MESSAGE_FLAG_NEW << 16);
+  auto ppp = pp.Properties();
+  if (ppp.IsInRange()) {
+    wParam |= (POINTER_MESSAGE_FLAG_INRANGE << 16);
+  }
+  if (pp.IsInContact()) {
+    wParam |= (POINTER_MESSAGE_FLAG_INCONTACT << 16);
+  }
+  if (ppp.IsLeftButtonPressed()) {
+    wParam |= (POINTER_MESSAGE_FLAG_FIRSTBUTTON << 16);
+  }
+  if (ppp.IsRightButtonPressed()) {
+    wParam |= (POINTER_MESSAGE_FLAG_SECONDBUTTON << 16);
+  }
+  if (ppp.IsMiddleButtonPressed()) {
+    wParam |= (POINTER_MESSAGE_FLAG_THIRDBUTTON << 16);
+  }
+  if (ppp.IsXButton1Pressed()) {
+    wParam |= (POINTER_MESSAGE_FLAG_FOURTHBUTTON << 16);
+  }
+  if (ppp.IsXButton2Pressed()) {
+    wParam |= (POINTER_MESSAGE_FLAG_FIFTHBUTTON << 16);
+  }
+  if (ppp.IsPrimary()) {
+    wParam |= (POINTER_MESSAGE_FLAG_PRIMARY << 16);
+  }
+  if (ppp.TouchConfidence()) {
+    wParam |= (POINTER_MESSAGE_FLAG_CONFIDENCE << 16);
+  }
+  if (ppp.IsCanceled()) {
+    wParam |= (POINTER_MESSAGE_FLAG_CANCELED << 16);
+  }
+  return wParam;
+}
+
+WPARAM PointerRoutedEventArgsToMouseWParam(
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  WPARAM wParam = 0;
+  auto pp = args.GetCurrentPoint(-1);
+
+  auto keyModifiers = args.KeyModifiers();
+  if ((keyModifiers & winrt::Windows::System::VirtualKeyModifiers::Control) ==
+      winrt::Windows::System::VirtualKeyModifiers::Control) {
+    wParam |= MK_CONTROL;
+  }
+  if ((keyModifiers & winrt::Windows::System::VirtualKeyModifiers::Shift) ==
+      winrt::Windows::System::VirtualKeyModifiers::Shift) {
+    wParam |= MK_SHIFT;
+  }
+
+  auto ppp = pp.Properties();
+  if (ppp.IsLeftButtonPressed()) {
+    wParam |= MK_LBUTTON;
+  }
+  if (ppp.IsMiddleButtonPressed()) {
+    wParam |= MK_MBUTTON;
+  }
+  if (ppp.IsRightButtonPressed()) {
+    wParam |= MK_RBUTTON;
+  }
+  if (ppp.IsXButton1Pressed()) {
+    wParam |= MK_XBUTTON1;
+  }
+  if (ppp.IsXButton2Pressed()) {
+    wParam |= MK_XBUTTON2;
+  }
+  return wParam;
+}
+
+void WindowsTextInputComponentView::onPointerPressed(
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  UINT msg = 0;
+  LPARAM lParam = 0;
+  WPARAM wParam = 0;
+
+  auto pp = args.GetCurrentPoint(-1); // TODO use local coords?
+  auto position = pp.Position();
+  POINT ptContainer = {static_cast<LONG>(position.X), static_cast<LONG>(position.Y)};
+  lParam = static_cast<LPARAM>(POINTTOPOINTS(ptContainer));
+
+  if (pp.PointerDeviceType() == winrt::Microsoft::ReactNative::Composition::Input::PointerDeviceType::Mouse) {
+    switch (pp.Properties().PointerUpdateKind()) {
+      case winrt::Microsoft::ReactNative::Composition::Input::PointerUpdateKind::LeftButtonPressed:
+        msg = WM_LBUTTONDOWN;
+        break;
+      case winrt::Microsoft::ReactNative::Composition::Input::PointerUpdateKind::MiddleButtonPressed:
+        msg = WM_MBUTTONDOWN;
+        break;
+      case winrt::Microsoft::ReactNative::Composition::Input::PointerUpdateKind::RightButtonPressed:
+        msg = WM_RBUTTONDOWN;
+        break;
+      case winrt::Microsoft::ReactNative::Composition::Input::PointerUpdateKind::XButton1Pressed:
+        msg = WM_XBUTTONDOWN;
+        wParam |= (XBUTTON1 << 16);
+        break;
+      case winrt::Microsoft::ReactNative::Composition::Input::PointerUpdateKind::XButton2Pressed:
+        msg = WM_XBUTTONDOWN;
+        wParam |= (XBUTTON2 << 16);
+        break;
+    }
+    wParam = PointerRoutedEventArgsToMouseWParam(args);
+  } else {
+    msg = WM_POINTERDOWN;
+    wParam = PointerPointToPointerWParam(pp);
+  }
+
+  if (m_textServices && msg) {
+    LRESULT lresult;
+    DrawBlock db(*this);
+    auto hr = m_textServices->TxSendMessage(msg, static_cast<WPARAM>(wParam), static_cast<LPARAM>(lParam), &lresult);
+    args.Handled(hr != S_FALSE);
+  }
+}
+
+void WindowsTextInputComponentView::onPointerReleased(
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  UINT msg = 0;
+  LPARAM lParam = 0;
+  WPARAM wParam = 0;
+
+  auto pp = args.GetCurrentPoint(-1);
+  auto position = pp.Position();
+  POINT ptContainer = {static_cast<LONG>(position.X), static_cast<LONG>(position.Y)};
+  lParam = static_cast<LPARAM>(POINTTOPOINTS(ptContainer));
+
+  if (pp.PointerDeviceType() == winrt::Microsoft::ReactNative::Composition::Input::PointerDeviceType::Mouse) {
+    switch (pp.Properties().PointerUpdateKind()) {
+      case winrt::Microsoft::ReactNative::Composition::Input::PointerUpdateKind::LeftButtonReleased:
+        msg = WM_LBUTTONUP;
+        break;
+      case winrt::Microsoft::ReactNative::Composition::Input::PointerUpdateKind::MiddleButtonReleased:
+        msg = WM_MBUTTONUP;
+        break;
+      case winrt::Microsoft::ReactNative::Composition::Input::PointerUpdateKind::RightButtonReleased:
+        msg = WM_RBUTTONUP;
+        break;
+      case winrt::Microsoft::ReactNative::Composition::Input::PointerUpdateKind::XButton1Released:
+        msg = WM_XBUTTONUP;
+        wParam |= (XBUTTON1 << 16);
+        break;
+      case winrt::Microsoft::ReactNative::Composition::Input::PointerUpdateKind::XButton2Released:
+        msg = WM_XBUTTONUP;
+        wParam |= (XBUTTON2 << 16);
+        break;
+    }
+    wParam = PointerRoutedEventArgsToMouseWParam(args);
+  } else {
+    msg = WM_POINTERUP;
+    wParam = PointerPointToPointerWParam(pp);
+  }
+
+  if (m_textServices && msg) {
+    LRESULT lresult;
+    DrawBlock db(*this);
+    auto hr = m_textServices->TxSendMessage(msg, static_cast<WPARAM>(wParam), static_cast<LPARAM>(lParam), &lresult);
+    args.Handled(hr != S_FALSE);
+  }
+}
+
+void WindowsTextInputComponentView::onPointerMoved(
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  UINT msg = 0;
+  LPARAM lParam = 0;
+  WPARAM wParam = 0;
+
+  auto pp = args.GetCurrentPoint(-1);
+  auto position = pp.Position();
+  POINT ptContainer = {static_cast<LONG>(position.X), static_cast<LONG>(position.Y)};
+  lParam = static_cast<LPARAM>(POINTTOPOINTS(ptContainer));
+
+  if (pp.PointerDeviceType() == winrt::Microsoft::ReactNative::Composition::Input::PointerDeviceType::Mouse) {
+    msg = WM_MOUSEMOVE;
+    wParam = PointerRoutedEventArgsToMouseWParam(args);
+  } else {
+    msg = WM_POINTERUP;
+    wParam = PointerPointToPointerWParam(pp);
+  }
+
+  if (m_textServices) {
+    LRESULT lresult;
+    DrawBlock db(*this);
+    auto hr = m_textServices->TxSendMessage(msg, static_cast<WPARAM>(wParam), static_cast<LPARAM>(lParam), &lresult);
+    args.Handled(hr != S_FALSE);
+  }
+}
+
+void WindowsTextInputComponentView::onKeyDown(
+    const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source,
+    const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept {
+  // Do not forward tab keys into the TextInput, since we want that to do the tab loop instead.  This aligns with WinUI
+  // behavior We do forward Ctrl+Tab to the textinput.
+  if (args.Key() != winrt::Windows::System::VirtualKey::Tab ||
+      source.GetKeyState(winrt::Windows::System::VirtualKey::Control) ==
+          winrt::Windows::UI::Core::CoreVirtualKeyStates::Down) {
+    WPARAM wParam = static_cast<WPARAM>(args.Key());
+    LPARAM lParam = 0;
+    lParam = args.KeyStatus().RepeatCount; // bits 0-15
+    lParam |= args.KeyStatus().ScanCode << 16; // bits 16-23
+    if (args.KeyStatus().IsExtendedKey)
+      lParam |= 0x01000000; // bit 24
+    // if sysKey - bit 29 = 1, otherwise 0
+    if (args.KeyStatus().WasKeyDown)
+      lParam |= 0x40000000; // bit 30
+
+    LRESULT lresult;
+    DrawBlock db(*this);
+    auto hr = m_textServices->TxSendMessage(
+        args.KeyStatus().IsMenuKeyDown ? WM_SYSKEYDOWN : WM_KEYDOWN, wParam, lParam, &lresult);
+    if (hr >= 0 && lresult) {
+      args.Handled(true);
+    }
+  }
+
+  Super::onKeyDown(source, args);
+}
+
+void WindowsTextInputComponentView::onKeyUp(
+    const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source,
+    const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept {
+  // Do not forward tab keys into the TextInput, since we want that to do the tab loop instead.  This aligns with WinUI
+  // behavior We do forward Ctrl+Tab to the textinput.
+  if (args.Key() != winrt::Windows::System::VirtualKey::Tab ||
+      source.GetKeyState(winrt::Windows::System::VirtualKey::Control) ==
+          winrt::Windows::UI::Core::CoreVirtualKeyStates::Down) {
+    WPARAM wParam = static_cast<WPARAM>(args.Key());
+    LPARAM lParam = 1;
+    lParam = args.KeyStatus().RepeatCount; // bits 0-15
+    lParam |= args.KeyStatus().ScanCode << 16; // bits 16-23
+    if (args.KeyStatus().IsExtendedKey)
+      lParam |= 0x01000000; // bit 24
+    // if sysKey - bit 29 = 1, otherwise 0
+    if (args.KeyStatus().WasKeyDown)
+      lParam |= 0x40000000; // bit 30
+    lParam |= 0x80000000; // bit 31 always 1 for WM_KEYUP
+
+    LRESULT lresult;
+    DrawBlock db(*this);
+    auto hr = m_textServices->TxSendMessage(
+        args.KeyStatus().IsMenuKeyDown ? WM_SYSKEYUP : WM_KEYUP, wParam, lParam, &lresult);
+    if (hr >= 0 && lresult) {
+      args.Handled(true);
+    }
+  }
+
+  Super::onKeyDown(source, args);
+}
+
 void WindowsTextInputComponentView::mountChildComponentView(
     IComponentView &childComponentView,
     uint32_t index) noexcept {
@@ -583,6 +833,7 @@ void WindowsTextInputComponentView::unmountChildComponentView(
 void WindowsTextInputComponentView::onFocusLost() noexcept {
   Super::onFocusLost();
   sendMessage(WM_KILLFOCUS, 0, 0);
+  m_caretVisual.IsVisible(false);
 }
 
 void WindowsTextInputComponentView::onFocusGained() noexcept {
@@ -594,6 +845,18 @@ bool WindowsTextInputComponentView::focusable() const noexcept {
   return m_props->focusable;
 }
 
+std::string WindowsTextInputComponentView::DefaultControlType() const noexcept {
+  return "textinput";
+}
+
+std::string WindowsTextInputComponentView::DefaultAccessibleName() const noexcept {
+  return m_props->placeholder;
+}
+
+std::string WindowsTextInputComponentView::DefaultHelpText() const noexcept {
+  return m_props->placeholder;
+}
+
 void WindowsTextInputComponentView::updateProps(
     facebook::react::Props::Shared const &props,
     facebook::react::Props::Shared const &oldProps) noexcept {
@@ -605,6 +868,9 @@ void WindowsTextInputComponentView::updateProps(
 
   ensureVisual();
 
+  // update BaseComponentView props
+  updateShadowProps(oldTextInputProps, newTextInputProps, m_visual);
+  updateTransformProps(oldTextInputProps, newTextInputProps, m_visual);
   updateBorderProps(oldTextInputProps, newTextInputProps);
 
   if (!facebook::react::floatEquality(
@@ -614,6 +880,40 @@ void WindowsTextInputComponentView::updateProps(
     propBits |= TXTBIT_CHARFORMATCHANGE;
   }
 
+  if (oldTextInputProps.secureTextEntry != newTextInputProps.secureTextEntry) {
+    propBitsMask |= TXTBIT_USEPASSWORD;
+    if (newTextInputProps.secureTextEntry) {
+      propBits |= TXTBIT_USEPASSWORD;
+    }
+  }
+
+  if (oldTextInputProps.multiline != newTextInputProps.multiline) {
+    propBitsMask |= TXTBIT_MULTILINE | TXTBIT_WORDWRAP;
+    if (newTextInputProps.multiline) {
+      propBits |= TXTBIT_MULTILINE | TXTBIT_WORDWRAP;
+    }
+  }
+
+  if (oldTextInputProps.editable != newTextInputProps.editable) {
+    propBitsMask |= TXTBIT_READONLY;
+    if (!newTextInputProps.editable) {
+      propBits |= TXTBIT_READONLY;
+    }
+  }
+
+  if (oldTextInputProps.placeholder != newTextInputProps.placeholder ||
+      oldTextInputProps.placeholderTextColor != newTextInputProps.placeholderTextColor) {
+    m_needsRedraw = true;
+  }
+
+  if (oldTextInputProps.backgroundColor != newTextInputProps.backgroundColor) {
+    m_needsRedraw = true;
+  }
+
+  if (oldTextInputProps.cursorColor != newTextInputProps.cursorColor) {
+    m_caretVisual.Color(newTextInputProps.cursorColor.AsWindowsColor());
+  }
+
   /*
   if (oldTextInputProps.textAttributes.foregroundColor != newTextInputProps.textAttributes.foregroundColor) {
     if (newTextInputProps.textAttributes.foregroundColor)
@@ -650,21 +950,6 @@ void WindowsTextInputComponentView::updateProps(
     m_element.IsTextScaleFactorEnabled(newTextInputProps.allowFontScaling);
   }
 
-  if (oldTextInputProps.placeholder != newTextInputProps.placeholder) {
-    m_element.PlaceholderText(winrt::to_hstring(newTextInputProps.placeholder));
-  }
-
-  if (oldTextInputProps.editable != newTextInputProps.editable) {
-    m_element.IsReadOnly(!newTextInputProps.editable);
-  }
-
-
-    if (oldTextInputProps.multiline != newTextInputProps.multiline) {
-      m_element.TextWrapping(newTextInputProps.multiline ? xaml::TextWrapping::Wrap : xaml::TextWrapping::NoWrap);
-      m_element.AcceptsReturn(newTextInputProps.multiline);
-    }
-
-
   if (oldTextInputProps.selection.start != newTextInputProps.selection.start ||
       oldTextInputProps.selection.end != newTextInputProps.selection.end) {
     m_element.Select(
@@ -675,20 +960,10 @@ void WindowsTextInputComponentView::updateProps(
     if (newTextInputProps.autoCapitalize == "characters") {
       m_element.CharacterCasing(xaml::Controls::CharacterCasing::Upper);
     } else { // anything else turns off autoCap (should be "None" but
-             // we don't support "words"/"senetences" yet)
+             // we don't support "words"/"sentences" yet)
       m_element.CharacterCasing(xaml::Controls::CharacterCasing::Normal);
     }
   }
-
-  if (oldViewProps.backgroundColor != newViewProps.backgroundColor) {
-    auto color = *newViewProps.backgroundColor;
-
-    if (newViewProps.backgroundColor) {
-      m_element.ViewBackground(SolidColorBrushFrom(newViewProps.backgroundColor));
-    } else {
-      m_element.ClearValue(winrt::Microsoft::ReactNative::ViewPanel::ViewBackgroundProperty());
-    }
-  }
   */
 
   m_props = std::static_pointer_cast<facebook::react::WindowsTextInputProps const>(props);
@@ -752,6 +1027,10 @@ void WindowsTextInputComponentView::UpdateText(const std::string &str) noexcept
       EM_SETTEXTEX, reinterpret_cast<WPARAM>(&stt), reinterpret_cast<LPARAM>(str.c_str()), &res));
 
   winrt::check_hresult(m_textServices->TxSendMessage(EM_EXGETSEL, 0, reinterpret_cast<LPARAM>(&cr), &res));
+
+  // enable colored emojis
+  winrt::check_hresult(
+      m_textServices->TxSendMessage(EM_SETTYPOGRAPHYOPTIONS, 0x1000 | 0x2000, 0x1000 | 0x2000, nullptr));
 }
 
 void WindowsTextInputComponentView::updateLayoutMetrics(
@@ -801,6 +1080,7 @@ void WindowsTextInputComponentView::OnTextUpdated() noexcept {
   //    return;
   data.attributedString = getAttributedString();
   data.mostRecentEventCount = m_nativeEventCount;
+
   m_state->updateState(std::move(data));
 
   if (m_eventEmitter && !m_comingFromJS) {
@@ -831,10 +1111,10 @@ std::string WindowsTextInputComponentView::GetTextFromRichEdit() const noexcept
   auto str = BstrToStdString(bstr);
 
   // JS gets confused by the \r\0 ending
-  if (*(str.end() - 1) == '\0') {
+  if (str.size() > 0 && *(str.end() - 1) == '\0') {
     str.pop_back();
   }
-  if (*(str.end() - 1) == '\r') {
+  if (str.size() > 0 && *(str.end() - 1) == '\r') {
     str.pop_back();
   }
   SysFreeString(bstr);
@@ -842,10 +1122,16 @@ std::string WindowsTextInputComponentView::GetTextFromRichEdit() const noexcept
 }
 
 void WindowsTextInputComponentView::finalizeUpdates(RNComponentViewUpdateMask updateMask) noexcept {
-  // m_element.FinalizeProperties();
-
+  if (m_needsBorderUpdate) {
+    m_needsBorderUpdate = false;
+    UpdateSpecialBorderLayers(m_layoutMetrics, *m_props);
+  }
   ensureDrawingSurface();
+  if (m_needsRedraw) {
+    DrawText();
+  }
 }
+
 void WindowsTextInputComponentView::prepareForRecycle() noexcept {}
 facebook::react::Props::Shared WindowsTextInputComponentView::props() noexcept {
   return m_props;
@@ -935,13 +1221,13 @@ void WindowsTextInputComponentView::ensureDrawingSurface() noexcept {
   assert(m_context.UIDispatcher().HasThreadAccess());
 
   if (!m_drawingSurface) {
-    m_drawingSurface = m_compContext.CreateDrawingSurface(
+    m_drawingSurface = m_compContext.CreateDrawingSurfaceBrush(
         {static_cast<float>(m_imgWidth), static_cast<float>(m_imgHeight)},
         winrt::Windows::Graphics::DirectX::DirectXPixelFormat::B8G8R8A8UIntNormalized,
         winrt::Windows::Graphics::DirectX::DirectXAlphaMode::Premultiplied);
 
-    auto rcClient = getClientRect();
-    winrt::check_hresult(m_textServices->OnTxInPlaceActivate(&rcClient));
+    m_rcClient = getClientRect();
+    winrt::check_hresult(m_textServices->OnTxInPlaceActivate(&m_rcClient));
 
     LRESULT lresult;
     winrt::check_hresult(
@@ -949,11 +1235,10 @@ void WindowsTextInputComponentView::ensureDrawingSurface() noexcept {
 
     DrawText();
 
-    auto surfaceBrush = m_compContext.CreateSurfaceBrush(m_drawingSurface);
-    surfaceBrush.HorizontalAlignmentRatio(0.f);
-    surfaceBrush.VerticalAlignmentRatio(0.f);
-    surfaceBrush.Stretch(winrt::Microsoft::ReactNative::Composition::CompositionStretch::None);
-    m_visual.Brush(surfaceBrush);
+    m_drawingSurface.HorizontalAlignmentRatio(0.f);
+    m_drawingSurface.VerticalAlignmentRatio(0.f);
+    m_drawingSurface.Stretch(winrt::Microsoft::ReactNative::Composition::CompositionStretch::None);
+    m_visual.Brush(m_drawingSurface);
   }
 }
 
@@ -962,67 +1247,122 @@ void WindowsTextInputComponentView::ShowCaret(bool show) noexcept {
   m_caretVisual.IsVisible(show);
 }
 
+winrt::com_ptr<::IDWriteTextLayout> WindowsTextInputComponentView::CreatePlaceholderLayout() {
+  // Create a fragment with text attributes
+  winrt::com_ptr<::IDWriteTextLayout> textLayout = nullptr;
+  facebook::react::AttributedString attributedString;
+  facebook::react::AttributedString::Fragment fragment1;
+  facebook::react::TextAttributes textAttributes = m_props->textAttributes;
+  if (std::isnan(m_props->textAttributes.fontSize)) {
+    textAttributes.fontSize = 12.0f;
+  }
+  fragment1.string = m_props->placeholder;
+  fragment1.textAttributes = textAttributes;
+  attributedString.appendFragment(fragment1);
+
+  facebook::react::LayoutConstraints constraints;
+  constraints.maximumSize.width = static_cast<FLOAT>(m_imgWidth);
+  constraints.maximumSize.height = static_cast<FLOAT>(m_imgHeight);
+
+  facebook::react::TextLayoutManager::GetTextLayout(
+      facebook::react::AttributedStringBox(attributedString), {} /*TODO*/, constraints, textLayout);
+
+  return textLayout;
+}
+
 void WindowsTextInputComponentView::DrawText() noexcept {
   m_needsRedraw = true;
   if (m_cDrawBlock) {
     return;
   }
 
-  if (!m_drawingSurface)
+  bool isZeroSized =
+      m_layoutMetrics.frame.size.width <= (m_layoutMetrics.contentInsets.left + m_layoutMetrics.contentInsets.right);
+  if (!m_drawingSurface || isZeroSized)
     return;
 
-  // Begin our update of the surface pixels. If this is our first update, we are required
-  // to specify the entire surface, which nullptr is shorthand for (but, as it works out,
-  // any time we make an update we touch the entire surface, so we always pass nullptr).
-  winrt::com_ptr<ID2D1DeviceContext> d2dDeviceContext;
   POINT offset;
 
   assert(m_context.UIDispatcher().HasThreadAccess());
 
-  winrt::com_ptr<Composition::ICompositionDrawingSurfaceInterop> drawingSurfaceInterop;
-  m_drawingSurface.as(drawingSurfaceInterop);
-
   m_drawing = true;
-  if (CheckForDeviceRemoved(drawingSurfaceInterop->BeginDraw(d2dDeviceContext.put(), &offset))) {
-    d2dDeviceContext->Clear(D2D1::ColorF(D2D1::ColorF::Black, 0.0f));
-    assert(d2dDeviceContext->GetUnitMode() == D2D1_UNIT_MODE_DIPS);
-    const auto dpi = m_layoutMetrics.pointScaleFactor * 96.0f;
-    float oldDpiX, oldDpiY;
-    d2dDeviceContext->GetDpi(&oldDpiX, &oldDpiY);
-    d2dDeviceContext->SetDpi(dpi, dpi);
-
-    RECTL rc{
-        static_cast<LONG>(offset.x),
-        static_cast<LONG>(offset.y),
-        static_cast<LONG>(offset.x) + static_cast<LONG>(m_imgWidth),
-        static_cast<LONG>(offset.y) + static_cast<LONG>(m_imgHeight)};
-
-    RECT rcClient{
-        static_cast<LONG>(offset.x),
-        static_cast<LONG>(offset.y),
-        static_cast<LONG>(offset.x) + static_cast<LONG>(m_imgWidth),
-        static_cast<LONG>(offset.y) + static_cast<LONG>(m_imgHeight)};
-
-    winrt::check_hresult(m_textServices->OnTxInPlaceActivate(&rcClient));
-
-    // TODO keep track of proper invalid rect
-    auto hrDraw = m_textServices->TxDrawD2D(d2dDeviceContext.get(), &rc, nullptr, TXTVIEW_ACTIVE);
-    winrt::check_hresult(hrDraw);
-
-    // restore dpi state
-    d2dDeviceContext->SetDpi(oldDpiX, oldDpiY);
-
-    // Our update is done. EndDraw never indicates rendering device removed, so any
-    // failure here is unexpected and, therefore, fatal.
-    auto hrEndDraw = drawingSurfaceInterop->EndDraw();
-    winrt::check_hresult(hrEndDraw);
+  {
+    ::Microsoft::ReactNative::Composition::AutoDrawDrawingSurface autoDraw(m_drawingSurface, &offset);
+    if (auto d2dDeviceContext = autoDraw.GetRenderTarget()) {
+      d2dDeviceContext->Clear(D2D1::ColorF(D2D1::ColorF::Black, 0.0f));
+      assert(d2dDeviceContext->GetUnitMode() == D2D1_UNIT_MODE_DIPS);
+      const auto dpi = m_layoutMetrics.pointScaleFactor * 96.0f;
+      float oldDpiX, oldDpiY;
+      d2dDeviceContext->GetDpi(&oldDpiX, &oldDpiY);
+      d2dDeviceContext->SetDpi(dpi, dpi);
+
+      RECTL rc{
+          static_cast<LONG>(offset.x),
+          static_cast<LONG>(offset.y),
+          static_cast<LONG>(offset.x) + static_cast<LONG>(m_imgWidth),
+          static_cast<LONG>(offset.y) + static_cast<LONG>(m_imgHeight)};
+
+      RECT rcClient{
+          static_cast<LONG>(offset.x),
+          static_cast<LONG>(offset.y),
+          static_cast<LONG>(offset.x) + static_cast<LONG>(m_imgWidth),
+          static_cast<LONG>(offset.y) + static_cast<LONG>(m_imgHeight)};
+
+      winrt::check_hresult(m_textServices->OnTxInPlaceActivate(&rcClient));
+
+      if (facebook::react::isColorMeaningful(m_props->backgroundColor)) {
+        auto backgroundColor = m_props->backgroundColor.AsD2DColor();
+        winrt::com_ptr<ID2D1SolidColorBrush> backgroundBrush;
+        winrt::check_hresult(d2dDeviceContext->CreateSolidColorBrush(backgroundColor, backgroundBrush.put()));
+        const D2D1_RECT_F fillRect = {
+            static_cast<float>(rcClient.left) / m_layoutMetrics.pointScaleFactor,
+            static_cast<float>(rcClient.top) / m_layoutMetrics.pointScaleFactor,
+            static_cast<float>(rcClient.right) / m_layoutMetrics.pointScaleFactor,
+            static_cast<float>(rcClient.bottom) / m_layoutMetrics.pointScaleFactor};
+        d2dDeviceContext->FillRectangle(fillRect, backgroundBrush.get());
+      }
+
+      // TODO keep track of proper invalid rect
+      auto hrDraw = m_textServices->TxDrawD2D(d2dDeviceContext, &rc, nullptr, TXTVIEW_ACTIVE);
+      winrt::check_hresult(hrDraw);
+
+      // draw placeholder text if needed
+      if (!m_props->placeholder.empty() && GetTextFromRichEdit().empty()) {
+        // set brush color
+        winrt::com_ptr<ID2D1SolidColorBrush> brush;
+        if (m_props->placeholderTextColor) {
+          auto color = m_props->placeholderTextColor.AsD2DColor();
+          winrt::check_hresult(d2dDeviceContext->CreateSolidColorBrush(color, brush.put()));
+        } else {
+          winrt::check_hresult(
+              d2dDeviceContext->CreateSolidColorBrush(D2D1::ColorF(D2D1::ColorF::Gray, 1.0f), brush.put()));
+        }
+
+        // Create placeholder text layout
+        winrt::com_ptr<::IDWriteTextLayout> textLayout = CreatePlaceholderLayout();
+
+        // draw text
+        d2dDeviceContext->DrawTextLayout(
+            D2D1::Point2F(
+                static_cast<FLOAT>((offset.x + m_layoutMetrics.contentInsets.left) / m_layoutMetrics.pointScaleFactor),
+                static_cast<FLOAT>((offset.y + m_layoutMetrics.contentInsets.top) / m_layoutMetrics.pointScaleFactor)),
+            textLayout.get(),
+            brush.get(),
+            D2D1_DRAW_TEXT_OPTIONS_ENABLE_COLOR_FONT);
+      }
+
+      // restore dpi state
+      d2dDeviceContext->SetDpi(oldDpiX, oldDpiY);
+    }
   }
   m_drawing = false;
   m_needsRedraw = false;
 }
 
-facebook::react::Tag WindowsTextInputComponentView::hitTest(facebook::react::Point pt, facebook::react::Point &localPt)
-    const noexcept {
+facebook::react::Tag WindowsTextInputComponentView::hitTest(
+    facebook::react::Point pt,
+    facebook::react::Point &localPt,
+    bool ignorePointerEvents) const noexcept {
   facebook::react::Point ptLocal{pt.x - m_layoutMetrics.frame.origin.x, pt.y - m_layoutMetrics.frame.origin.y};
 
   facebook::react::Tag targetTag;
@@ -1037,7 +1377,7 @@ facebook::react::Tag WindowsTextInputComponentView::hitTest(facebook::react::Poi
       return targetTag;
       */
 
-  if ((m_props->pointerEvents == facebook::react::PointerEventsMode::Auto ||
+  if ((ignorePointerEvents || m_props->pointerEvents == facebook::react::PointerEventsMode::Auto ||
        m_props->pointerEvents == facebook::react::PointerEventsMode::BoxOnly) &&
       ptLocal.x >= 0 && ptLocal.x <= m_layoutMetrics.frame.size.width && ptLocal.y >= 0 &&
       ptLocal.y <= m_layoutMetrics.frame.size.height) {