@expensify/react-native-live-markdown 0.1.44 → 0.1.46

package/cpp/react/renderer/components/RNLiveMarkdownSpec/MarkdownTextInputDecoratorState.h

@@ -0,0 +1,34 @@
+#pragma once
+
+#include <react/renderer/core/ShadowNodeFamily.h>
+
+namespace facebook {
+namespace react {
+
+class JSI_EXPORT MarkdownTextInputDecoratorState final {
+public:
+  using Shared = std::shared_ptr<const MarkdownTextInputDecoratorState>;
+
+  MarkdownTextInputDecoratorState() : decoratorFamily(nullptr){};
+  MarkdownTextInputDecoratorState(
+      const ShadowNodeFamily::Shared textInputFamily_)
+      : decoratorFamily(textInputFamily_){};
+
+#ifdef ANDROID
+  MarkdownTextInputDecoratorState(
+      MarkdownTextInputDecoratorState const &previousState, folly::dynamic data)
+      : decoratorFamily(previousState.decoratorFamily){};
+#endif
+
+  const ShadowNodeFamily::Shared decoratorFamily;
+
+#ifdef ANDROID
+  folly::dynamic getDynamic() const {
+    return folly::dynamic::object("decoratorFamily", "pointer should be here?");
+  }
+  MapBuffer getMapBuffer() const { return MapBufferBuilder::EMPTY(); };
+#endif
+};
+
+} // namespace react
+} // namespace facebook

package/cpp/react/renderer/components/RNLiveMarkdownSpec/MarkdownTextInputDecoratorViewComponentDescriptor.h

@@ -0,0 +1,17 @@
+#pragma once
+
+#include "MarkdownTextInputDecoratorShadowNode.h"
+#include <react/debug/react_native_assert.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+
+namespace facebook {
+namespace react {
+
+class MarkdownTextInputDecoratorViewComponentDescriptor final
+    : public ConcreteComponentDescriptor<MarkdownTextInputDecoratorShadowNode> {
+public:
+  using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
+};
+
+} // namespace react
+} // namespace facebook

package/ios/MarkdownCommitHook.h

@@ -0,0 +1,42 @@
+#pragma once
+#ifdef RCT_NEW_ARCH_ENABLED
+
+#include <react/renderer/components/iostextinput/TextInputShadowNode.h>
+#include <react/renderer/uimanager/UIManager.h>
+#include <react/renderer/uimanager/UIManagerCommitHook.h>
+
+#include <memory>
+
+#include "MarkdownTextInputDecoratorShadowNode.h"
+
+using namespace facebook::react;
+
+namespace livemarkdown {
+
+struct MarkdownTextInputDecoratorPair {
+  const std::shared_ptr<const TextInputShadowNode> textInput;
+  const std::shared_ptr<const MarkdownTextInputDecoratorShadowNode> decorator;
+};
+
+class MarkdownCommitHook : public UIManagerCommitHook {
+public:
+  MarkdownCommitHook(const std::shared_ptr<UIManager> &uiManager);
+
+  ~MarkdownCommitHook() noexcept override;
+
+  void commitHookWasRegistered(UIManager const &) noexcept override {}
+
+  void commitHookWasUnregistered(UIManager const &) noexcept override {}
+
+  RootShadowNode::Unshared shadowTreeWillCommit(
+      ShadowTree const &shadowTree,
+      RootShadowNode::Shared const &oldRootShadowNode,
+      RootShadowNode::Unshared const &newRootShadowNode) noexcept override;
+
+private:
+  const std::shared_ptr<UIManager> uiManager_;
+};
+
+} // namespace livemarkdown
+
+#endif // RCT_NEW_ARCH_ENABLED

package/ios/MarkdownCommitHook.mm

@@ -0,0 +1,195 @@
+#ifdef RCT_NEW_ARCH_ENABLED
+
+#include <React/RCTUtils.h>
+#include <react/renderer/core/ComponentDescriptor.h>
+#include <react/renderer/textlayoutmanager/RCTAttributedTextUtils.h>
+
+#include "MarkdownCommitHook.h"
+#include "MarkdownShadowFamilyRegistry.h"
+#include "RCTMarkdownStyle.h"
+#include "RCTMarkdownUtils.h"
+
+using namespace facebook::react;
+
+namespace livemarkdown {
+
+MarkdownCommitHook::MarkdownCommitHook(
+    const std::shared_ptr<UIManager> &uiManager)
+    : uiManager_(uiManager) {
+  uiManager_->registerCommitHook(*this);
+}
+
+MarkdownCommitHook::~MarkdownCommitHook() noexcept {
+  uiManager_->unregisterCommitHook(*this);
+}
+
+RootShadowNode::Unshared MarkdownCommitHook::shadowTreeWillCommit(
+    ShadowTree const &, RootShadowNode::Shared const &,
+    RootShadowNode::Unshared const &newRootShadowNode) noexcept {
+  auto rootNode = newRootShadowNode->ShadowNode::clone(ShadowNodeFragment{});
+
+  // A preface to why we do the weird thing below:
+  // On the new architecture there are two ways of measuring text on iOS: by
+  // value and by pointer. When done by value, the attributed string to be
+  // measured is created on the c++ side. We cannot modify this process as we do
+  // not extend TextInputShadowNode. We also cannot really change the layout
+  // manager used to do this, since it's a private field (ok, we can but in a
+  // not very nice way). But also, the logic for parsing and applying markdown
+  // is written in JS/ObjC and we really wouldn't want to reimplement it in c++.
+  //
+  // Nice thing is that it can also be done by pointer to NSAttributedString,
+  // which is the platform's way to handle styled text, and is also used by Live
+  // Markdown. On this path, the measurement is done by the OS APIs. The thing
+  // we want to make sure of, is that markdown-decorated text input always uses
+  // this path and uses a pointer to a string with markdown styles applied.
+  // Thankfully, RN provides nice utility functions that allow to convert
+  // between the RN's AttributedString and iOS's NSAttributedString. The logic
+  // below does exactly that.
+
+  // In order to properly apply markdown formatting to the text input, we need
+  // to update the TextInputShadowNode's state with styled string, but we only
+  // have access to the ShadowNodeFamilies of the decorator components. We also
+  // know that a markdown decorator is always preceded with the TextInput to
+  // decorate, so we need to take the sibling.
+  std::vector<MarkdownTextInputDecoratorPair> nodesToUpdate;
+  MarkdownShadowFamilyRegistry::runForEveryFamily([&rootNode, &nodesToUpdate](
+                                                      ShadowNodeFamily::Shared
+                                                          family) {
+    // get the path from the root to the node from the decorator family
+    const auto ancestors = family->getAncestors(*rootNode);
+
+    if (!ancestors.empty()) {
+      auto &parentNode = ancestors.back().first.get();
+      auto index = ancestors.back().second;
+
+      // this is node represented by one of the registered families and since we
+      // only register markdown decorator shadow families, static casting should
+      // be safe here
+      const auto &decoratorNode =
+          std::static_pointer_cast<const MarkdownTextInputDecoratorShadowNode>(
+              parentNode.getChildren().at(index));
+      // text input always precedes the decorator component
+      const auto &previousSibling = parentNode.getChildren().at(index - 1);
+
+      if (const auto &textInputNode =
+              std::dynamic_pointer_cast<const TextInputShadowNode>(
+                  previousSibling)) {
+        // store the pair of text input and decorator to update in the next step
+        // we need both, decorator to get markdown style and text input to
+        // update it
+        nodesToUpdate.push_back({
+            textInputNode,
+            decoratorNode,
+        });
+      }
+    }
+  });
+
+  for (const auto &nodes : nodesToUpdate) {
+    const auto &textInputState =
+        *std::static_pointer_cast<const ConcreteState<TextInputState>>(
+            nodes.textInput->getState());
+    const auto &stateData = textInputState.getData();
+    const auto fontSizeMultiplier =
+        newRootShadowNode->getConcreteProps().layoutContext.fontSizeMultiplier;
+
+    // We only want to update the shadow node when the attributed string is
+    // stored by value If it's stored by pointer, the markdown formatting should
+    // already by applied to it, since the only source of that pointer (besides
+    // this commit hook) is RCTTextInputComponentView, which has the relevant
+    // method swizzled to make sure the markdown styles are always applied
+    // before updating state. There are two caveats:
+    // 1. On the first render the swizzled method will not apply markdown since
+    // the native component
+    //   is not mounted yet. In that case we save the tag to update in the
+    //   method applying markdown formatting and apply it here instead,
+    //   preventing wrong layout on reloads.
+    // 2. When the markdown style prop is changed, the native state needs to be
+    // updated to reflect
+    //    them. In that case the relevant tag is saved in the registry when the
+    //    new shadow node is created.
+    if (stateData.attributedStringBox.getMode() ==
+            AttributedStringBox::Mode::Value ||
+        MarkdownShadowFamilyRegistry::shouldForceUpdate(
+            nodes.textInput->getTag())) {
+      rootNode = rootNode->cloneTree(
+          nodes.textInput->getFamily(),
+          [&nodes, &textInputState, &stateData,
+           fontSizeMultiplier](const ShadowNode &node) {
+            const auto &markdownProps = *std::static_pointer_cast<
+                MarkdownTextInputDecoratorViewProps const>(
+                nodes.decorator->getProps());
+            const auto &textInputProps =
+                *std::static_pointer_cast<TextInputProps const>(
+                    nodes.textInput->getProps());
+
+            const auto defaultTextAttributes =
+                textInputProps.getEffectiveTextAttributes(fontSizeMultiplier);
+            const auto defaultNSTextAttributes =
+                RCTNSTextAttributesFromTextAttributes(defaultTextAttributes);
+
+            // this can possibly be optimized
+            RCTMarkdownStyle *markdownStyle = [[RCTMarkdownStyle alloc]
+                initWithStruct:markdownProps.markdownStyle];
+            RCTMarkdownUtils *utils = [[RCTMarkdownUtils alloc] init];
+            [utils setMarkdownStyle:markdownStyle];
+
+            // convert the attibuted string stored in state to
+            // NSAttributedString
+            auto nsAttributedString =
+                RCTNSAttributedStringFromAttributedStringBox(
+                    stateData.attributedStringBox);
+
+            // Handles the first render, where the text stored in props is
+            // different than the one stored in state The one in state is empty,
+            // while the one in props is passed from JS If we don't update the
+            // state here, we'll end up with a one-default-line-sized text
+            // input. A better condition to do that can be probably chosen, but
+            // this seems to work
+            auto plainString =
+                std::string([[nsAttributedString string] UTF8String]);
+            if (plainString != textInputProps.text) {
+              // creates new AttributedString from props, adapted from
+              // TextInputShadowNode (ios one, text inputs are
+              // platform-specific)
+              auto attributedString = AttributedString{};
+              attributedString.appendFragment(AttributedString::Fragment{
+                  textInputProps.text, defaultTextAttributes});
+
+              auto attachments = BaseTextShadowNode::Attachments{};
+              BaseTextShadowNode::buildAttributedString(
+                  defaultTextAttributes, *nodes.textInput, attributedString,
+                  attachments);
+
+              // convert the newly created attributed string to
+              // NSAttributedString
+              nsAttributedString = RCTNSAttributedStringFromAttributedStringBox(
+                  AttributedStringBox{attributedString});
+            }
+
+            // apply markdown
+            auto newString = [utils parseMarkdown:nsAttributedString
+                                   withAttributes:defaultNSTextAttributes];
+
+            // create a clone of the old TextInputState and update the
+            // attributed string box to point to the string with markdown
+            // applied
+            auto newStateData = std::make_shared<TextInputState>(stateData);
+            newStateData->attributedStringBox =
+                RCTAttributedStringBoxFromNSAttributedString(newString);
+
+            // clone the text input with the new state
+            return node.clone({
+                .state = std::make_shared<const ConcreteState<TextInputState>>(
+                    newStateData, textInputState),
+            });
+          });
+    }
+  }
+
+  return std::static_pointer_cast<RootShadowNode>(rootNode);
+}
+
+} // namespace livemarkdown
+
+#endif // RCT_NEW_ARCH_ENABLED

package/ios/MarkdownTextInputDecoratorComponentView.mm

@@ -1,18 +1,20 @@
 // This guard prevent this file to be compiled in the old architecture.
 #ifdef RCT_NEW_ARCH_ENABLED
-#import <react/renderer/components/RNLiveMarkdownSpec/ComponentDescriptors.h>
 #import <react/renderer/components/RNLiveMarkdownSpec/Props.h>
 
 #import <RNLiveMarkdown/MarkdownTextInputDecoratorComponentView.h>
 #import <RNLiveMarkdown/MarkdownTextInputDecoratorView.h>
 #import <RNLiveMarkdown/RCTMarkdownStyle.h>
 
+#import <RNLiveMarkdown/MarkdownTextInputDecoratorViewComponentDescriptor.h>
+#import "MarkdownShadowFamilyRegistry.h"
 #import "RCTFabricComponentsPlugins.h"
 
 using namespace facebook::react;
 
 @implementation MarkdownTextInputDecoratorComponentView {
   MarkdownTextInputDecoratorView *_view;
+  ShadowNodeFamily::Shared _decoratorFamily;
 }
 
 + (ComponentDescriptorProvider)componentDescriptorProvider
@@ -34,6 +36,27 @@ using namespace facebook::react;
   return self;
 }
 
+- (void)updateState:(const facebook::react::State::Shared &)state oldState:(const facebook::react::State::Shared &)oldState
+{
+    auto data = std::static_pointer_cast<MarkdownTextInputDecoratorShadowNode::ConcreteState const>(state)->getData();
+    
+    if (_decoratorFamily != nullptr) {
+        MarkdownShadowFamilyRegistry::unregisterFamilyForUpdates(_decoratorFamily);
+    }
+    
+    _decoratorFamily = data.decoratorFamily;
+    MarkdownShadowFamilyRegistry::registerFamilyForUpdates(_decoratorFamily);
+}
+
+- (void)willMoveToSuperview:(UIView *)newSuperview {
+    if (newSuperview == nil) {
+        MarkdownShadowFamilyRegistry::unregisterFamilyForUpdates(_decoratorFamily);
+      _decoratorFamily = nullptr;
+    }
+    
+    [super willMoveToSuperview:newSuperview];
+}
+
 - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
 {
     const auto &oldViewProps = *std::static_pointer_cast<MarkdownTextInputDecoratorViewProps const>(_props);

package/ios/MarkdownTextInputDecoratorView.mm

@@ -58,7 +58,7 @@
   UIView<RCTBackedTextInputViewProtocol> *backedTextInputView = _textInput.backedTextInputView;
 #endif /* RCT_NEW_ARCH_ENABLED */
 
-  _markdownUtils = [[RCTMarkdownUtils alloc] initWithBackedTextInputView:backedTextInputView];
+  _markdownUtils = [[RCTMarkdownUtils alloc] init];
   react_native_assert(_markdownStyle != nil);
   [_markdownUtils setMarkdownStyle:_markdownStyle];
 
@@ -100,7 +100,11 @@
 {
   _markdownStyle = markdownStyle;
   [_markdownUtils setMarkdownStyle:markdownStyle];
+#ifdef RCT_NEW_ARCH_ENABLED
+  [_textInput textInputDidChange]; // apply new styles
+#else
   [_textInput setAttributedText:_textInput.attributedText]; // apply new styles
+#endif
 }
 
 @end

package/ios/RCTBackedTextFieldDelegateAdapter+Markdown.m

@@ -19,7 +19,7 @@
   if (markdownUtils != nil) {
     RCTUITextField *backedTextInputView = [self valueForKey:@"_backedTextInputView"];
     UITextRange *range = backedTextInputView.selectedTextRange;
-    backedTextInputView.attributedText = [markdownUtils parseMarkdown:backedTextInputView.attributedText];
+    backedTextInputView.attributedText = [markdownUtils parseMarkdown:backedTextInputView.attributedText withAttributes:backedTextInputView.defaultTextAttributes];
     [backedTextInputView setSelectedTextRange:range notifyDelegate:YES];
   }
 

package/ios/RCTBaseTextInputView+Markdown.m

@@ -16,7 +16,7 @@
 {
   RCTMarkdownUtils *markdownUtils = [self getMarkdownUtils];
   if (markdownUtils != nil) {
-    attributedText = [markdownUtils parseMarkdown:attributedText];
+    attributedText = [markdownUtils parseMarkdown:attributedText withAttributes:self.backedTextInputView.defaultTextAttributes];
   }
 
   // Call the original method
@@ -29,7 +29,7 @@
   if (markdownUtils != nil) {
     id<RCTBackedTextInputViewProtocol> backedTextInputView = self.backedTextInputView;
     NSAttributedString *oldAttributedText = backedTextInputView.attributedText;
-    NSAttributedString *newAttributedText = [markdownUtils parseMarkdown:oldAttributedText];
+    NSAttributedString *newAttributedText = [markdownUtils parseMarkdown:oldAttributedText withAttributes:backedTextInputView.defaultTextAttributes];
     UITextRange *range = backedTextInputView.selectedTextRange;
 
     // update attributed text without emitting onSelectionChange event

package/ios/RCTLiveMarkdownModule.h

@@ -0,0 +1,12 @@
+#ifdef RCT_NEW_ARCH_ENABLED
+
+#import <RNLiveMarkdownSpec/RNLiveMarkdownSpec.h>
+#import <React/RCTEventEmitter.h>
+#import <React/RCTUIManager.h>
+
+// Without inheriting after RCTEventEmitter we don't get access to bridge
+@interface RCTLiveMarkdownModule
+    : RCTEventEmitter <NativeLiveMarkdownModuleSpec>
+@end
+
+#endif // RCT_NEW_ARCH_ENABLED

package/ios/RCTLiveMarkdownModule.mm

@@ -0,0 +1,48 @@
+#ifdef RCT_NEW_ARCH_ENABLED
+
+#import <React/RCTScheduler.h>
+#import <React/RCTSurfacePresenter.h>
+
+#import "MarkdownCommitHook.h"
+#import "MarkdownShadowFamilyRegistry.h"
+#import "RCTLiveMarkdownModule.h"
+
+// A turbomodule used to register the commit hook
+// I think this is the easiest way to access the UIManager, which we need to
+// actually register the hook
+
+@implementation RCTLiveMarkdownModule {
+  BOOL installed_;
+  std::shared_ptr<livemarkdown::MarkdownCommitHook> commitHook_;
+}
+
+RCT_EXPORT_MODULE(@"LiveMarkdownModule")
+
+- (NSNumber *)install {
+  if (!installed_) {
+    installed_ = YES;
+
+    RCTBridge *bridge = self.bridge;
+    RCTSurfacePresenter *surfacePresenter = bridge.surfacePresenter;
+    RCTScheduler *scheduler = [surfacePresenter scheduler];
+
+    commitHook_ =
+        std::make_shared<livemarkdown::MarkdownCommitHook>(scheduler.uiManager);
+  }
+  return @1;
+}
+
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
+    (const facebook::react::ObjCTurboModule::InitParams &)params {
+  return std::make_shared<facebook::react::NativeLiveMarkdownModuleSpecJSI>(
+      params);
+}
+
+- (void)invalidate {
+  MarkdownShadowFamilyRegistry::reset();
+  [super invalidate];
+}
+
+@end
+
+#endif // RCT_NEW_ARCH_ENABLED

package/ios/RCTMarkdownUtils.h

@@ -9,9 +9,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic) NSMutableArray<NSDictionary *> *blockquoteRangesAndLevels;
 @property (weak, nonatomic) UIView<RCTBackedTextInputViewProtocol> *backedTextInputView;
 
-- (instancetype)initWithBackedTextInputView:(UIView<RCTBackedTextInputViewProtocol> *)backedTextInputView;
-
-- (NSAttributedString *)parseMarkdown:(nullable NSAttributedString *)input;
+- (NSAttributedString *)parseMarkdown:(nullable NSAttributedString *)input withAttributes:(nullable NSDictionary<NSAttributedStringKey, id>*)attributes;
 
 @end