Workaround for nesting <Text> inside <TextInput>

[Jihoo Byeon (jihoobyeon)]

Hello, I had to nest <Text> inside <TextInput> for my project.
but as mentioned at #5689 it is not supported, both Fabric and Paper.
so I tried to modify Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp,
and could able to make some workaround for Fabric at v0.81.35.

What did i do:
First, I added private method named ApplyTextAttributes to struct WindowsTextInputComponentView:

void WindowsTextInputComponentView::ApplyTextAttributes(const facebook::react::AttributedString &attributedString) noexcept {
  // 1. get the TOM document
  IRichEditOle *richEditOle = nullptr;
  LRESULT res{};
  HRESULT hr = m_textServices->TxSendMessage(EM_GETOLEINTERFACE, 0, reinterpret_cast<LPARAM>(&richEditOle), &res);

  if (FAILED(hr) || !richEditOle) return;

  ITextDocument *document = nullptr;
  hr = richEditOle->QueryInterface(__uuidof(ITextDocument), reinterpret_cast<void **>(&document));
  richEditOle->Release();

  if (FAILED(hr) || !document) return;

  // 2. set TOM range for each fragments
  LONG start = 0;

  for (const auto &fragment : attributedString.getFragments()) {
    const auto &attributes = fragment.textAttributes;
    const auto htext = winrt::to_hstring(fragment.string);
    const LONG length = static_cast<LONG>(htext.size());

    ITextRange *range = nullptr;
    // order by cpActive, cpAnchor
    hr = document->Range(start + length, start, &range);

    if (SUCCEEDED(hr) && range) {
      ITextFont *font = nullptr;
      hr = range->GetFont(&font);

      if (SUCCEEDED(hr) && font) {
        if (attributes.foregroundColor) { // foregroundColor
          auto color = facebook::react::colorComponentsFromColor(fragment.textAttributes.foregroundColor);
          font->SetForeColor(RGB(color.red * 255.0f, color.green * 255.0f, color.blue * 255.0f));
        }

        if (!attributes.fontFamily.empty()) { // fontFamily
          const auto family = winrt::to_hstring(attributes.fontFamily);
          BSTR name = SysAllocString(family.c_str());
          if (name) {
            font->SetName(name);
            SysFreeString(name);
          }
        }
        font->Release();
      }

      if (!std::isnan(attributes.lineHeight)) { // lineHeight
        ITextPara *para = nullptr;
        hr = range->GetPara(&para);
      
        if (SUCCEEDED(hr) && para) {
          para->SetLineSpacing(tomLineSpaceExactly, attributes.lineHeight * .75f); // convert DIP <-> point
        }
        para->Release();
      }
      range->Release();
    }
    start += length;
  }
  document->Release();
}

as you can see, I only added color, fontFamily and lineHeight, which I needed.

Then I modified updateState from this:

void WindowsTextInputComponentView::updateState(
    facebook::react::State::Shared const &state,
    facebook::react::State::Shared const &oldState) noexcept {
  m_state = std::static_pointer_cast<facebook::react::WindowsTextInputShadowNode::ConcreteState const>(state);

  if (!m_state) {
    assert(false && "State is `null` for <TextInput> component.");
    return;
  }

  if (!oldState) {
    m_mostRecentEventCount = m_state->getData().mostRecentEventCount;
  }

  if (auto root = rootComponentView()) {
    auto fontSizeMultiplier = root->FontSizeMultiplier();
    if (fontSizeMultiplier != m_fontSizeMultiplier) {
      fontSizeMultiplier = m_fontSizeMultiplier;
      m_propBitsMask |= TXTBIT_CHARFORMATCHANGE;
      m_propBits |= TXTBIT_CHARFORMATCHANGE;
    }
  }

  if (m_mostRecentEventCount == m_state->getData().mostRecentEventCount) {
    m_comingFromState = true;
    auto &fragments = m_state->getData().attributedStringBox.getValue().getFragments();
    {
      // DrawBlock defers DrawText() until after UpdateText completes
      DrawBlock db(*this);
      UpdateText(fragments.size() ? fragments[0].string : ""); // this drops all fragments except the first one
    }
    m_comingFromState = false;
  }
}

to this - invoking newly created ApplyTextAttributes:

void WindowsTextInputComponentView::updateState(
    facebook::react::State::Shared const &state,
    facebook::react::State::Shared const &oldState) noexcept {
  m_state = ...
  if (!m_state) {...}
  if (!oldState) {...}
  if (auto root = rootComponentView()) {...}
  // same as original code above this line
  
  auto &attributedString = m_state->getData().attributedStringBox.getValue();
  std::string plainText;

  for (const auto &fragment : attributedString.getFragments()) {
    plainText += fragment.string; // add all fragments so any of those should not drop
  }

  if (m_mostRecentEventCount == m_state->getData().mostRecentEventCount) {
    m_comingFromState = true;
    {
      DrawBlock db(*this);
      UpdateText(plainText);
      ApplyTextAttributes(attributedString); // adding selected attributes for children Text components
    }
    m_comingFromState = false;
  } else if (plainText == GetTextFromRichEdit()) { // this prevents infinite loop when text attributes are modified dynamically
    m_comingFromState = true;
    {
      DrawBlock db(*this);
      ApplyTextAttributes(attributedString);
    }
    m_comingFromState = false;
  }
}

and also modified OnTextUpdated:

void WindowsTextInputComponentView::OnTextUpdated() noexcept {
  if (!m_comingFromState) {
    auto data = m_state->getData();

    // prevent prop losing when input is done by Korean IME
    const auto nativeText = GetTextFromRichEdit();
    std::string stateText;
    for (const auto &fragment : data.attributedStringBox.getValue().getFragments()) {
      stateText += fragment.string;
    }

    if (nativeText != stateText) {
      data.attributedStringBox = facebook::react::AttributedStringBox(getAttributedString());
    }
    data.mostRecentEventCount = m_nativeEventCount;

    m_state->updateState(std::move(data));
  }

  // same as original code below this line
  if (m_eventEmitter && !m_comingFromJS) {...}
  if (UiaClientsAreListening()) {...}
}

and lastly, changed a line in createVisual:
winrt::check_hresult(m_textServices->TxSendMessage(EM_SETTEXTMODE, TM_RICHTEXT, 0, &res));
originally the second argument was TM_PLAINTEXT.

as this workaround, I could able to show selected 3 attributes at RNW app.
but as you know, there are much more style props on Text component - as mentioned in here and some more inherited from View style props(e. g. backgroundColor)

Would full implementation of those props be possible?
if it's impossible, how many props can be included at nearest future releases?