react-native-marcus 0.1.1 → 0.2.0

package/android/src/main/new_arch/react/renderer/components/RNMarcusSpec/MarcusTextDecoratorShadowNode.cpp

@@ -0,0 +1,235 @@
+#include "MarcusTextDecoratorShadowNode.h"
+
+#include <fbjni/fbjni.h>
+#include <react/fabric/JFabricUIManager.h>
+#include <react/jni/ReadableNativeArray.h>
+#include <react/jni/ReadableNativeMap.h>
+#if REACT_NATIVE_MINOR_VERSION < 80
+#include <react/jni/SafeReleaseJniRef.h>
+#endif // REACT_NATIVE_MINOR_VERSION < 80
+#include <react/renderer/components/text/ParagraphShadowNode.h>
+#include <react/renderer/components/view/conversions.h>
+#include <react/renderer/core/ComponentDescriptor.h>
+
+namespace facebook {
+namespace react {
+
+extern const char MarcusTextDecoratorViewComponentName[] =
+  "MarcusTextDecoratorView";
+
+MarcusTextDecoratorShadowNode::MarcusTextDecoratorShadowNode(
+  ShadowNodeFragment const &fragment, ShadowNodeFamily::Shared const &family, ShadowNodeTraits traits
+)
+    : ConcreteViewShadowNode(fragment, family, traits) {
+  initialize();
+  createCustomContextContainer();
+  makeChildNodeMutable();
+
+  if (fragment.children) {
+    overwriteTextLayoutManager();
+  }
+}
+
+MarcusTextDecoratorShadowNode::MarcusTextDecoratorShadowNode(
+  ShadowNode const &sourceShadowNode, ShadowNodeFragment const &fragment
+)
+    : ConcreteViewShadowNode(sourceShadowNode, fragment) {
+  initialize();
+
+  const auto &sourceDecorator =
+    static_cast<const MarcusTextDecoratorShadowNode &>(sourceShadowNode);
+
+  customContextContainer_ = sourceDecorator.customContextContainer_;
+  previousMarkdownStyle_ = sourceDecorator.previousMarkdownStyle_;
+  previousRanges_ = sourceDecorator.previousRanges_;
+
+  updateCustomContextContainerIfNeeded();
+  makeChildNodeMutable();
+
+  if (fragment.children) {
+    overwriteTextLayoutManager();
+  }
+}
+
+void
+MarcusTextDecoratorShadowNode::initialize() {
+  // Setting display: contents style results in ForceFlattenView trait being set
+  // on the shadow node. This trait causes the node not to have a host view. By
+  // removing the trait, it's possible to force RN to create a host view, layout
+  // of which can then be customized.
+  ShadowNode::traits_.unset(ShadowNodeTraits::ForceFlattenView);
+}
+
+void
+MarcusTextDecoratorShadowNode::makeChildNodeMutable() {
+  // When the decorator is cloned and has a child node, the child node should be
+  // cloned as well to ensure it is mutable. Cloning it also runs the paragraph's
+  // own component descriptor, which resets the layout manager to the shared one,
+  // so overwriteTextLayoutManager() always follows this rather than preceding it.
+  const auto &children = getChildren();
+  if (!children.empty()) {
+    react_native_assert(
+      children.size() == 1 &&
+      "MarcusTextDecoratorView received more than one child"
+    );
+
+    const auto clonedChild = children[0]->clone({});
+    replaceChild(*children[0], clonedChild);
+  }
+}
+
+void
+MarcusTextDecoratorShadowNode::createCustomContextContainer() {
+  static const auto customFabricUIManagerClass =
+    jni::findClassStatic("app/getbullet/marcus/CustomFabricUIManager");
+  static const auto createMethod =
+    customFabricUIManagerClass->getStaticMethod<JFabricUIManager::javaobject(
+      JFabricUIManager::javaobject, ReadableMap::javaobject, ReadableArray::javaobject
+    )>(
+      "createForText"
+    );
+
+  const auto &rawProps = this->getProps()->rawProps;
+  const auto &markdownStyleIt = rawProps.find("markdownStyle");
+  const auto &markdownStyle = markdownStyleIt != rawProps.items().end()
+                                ? markdownStyleIt->second
+                                : previousMarkdownStyle_;
+  const auto &rangesIt = rawProps.find("ranges");
+  const auto &ranges =
+    rangesIt != rawProps.items().end() ? rangesIt->second : previousRanges_;
+
+  const auto decoratorPropsRNM =
+    ReadableNativeMap::newObjectCxxArgs(markdownStyle);
+  const auto decoratorPropsRM = jni::make_local(
+    reinterpret_cast<ReadableMap::javaobject>(decoratorPropsRNM.get())
+  );
+
+  // An absent or malformed prop still has to produce an array: the Java side
+  // takes one, and an empty one simply formats nothing.
+  const auto rangesRNA = ReadableNativeArray::newObjectCxxArgs(
+    ranges.isArray() ? ranges : folly::dynamic::array()
+  );
+  const auto rangesRA = jni::make_local(
+    reinterpret_cast<ReadableArray::javaobject>(rangesRNA.get())
+  );
+
+  const auto &fabricUIManager =
+    this->getContextContainer()->at<JFabricUIManager::javaobject>(
+      "FabricUIManager"
+    );
+
+  const auto customFabricUIManager = SafeReleaseJniRef(
+    jni::make_global(createMethod(customFabricUIManagerClass, fabricUIManager, decoratorPropsRM.get(), rangesRA.get()))
+  );
+  const auto contextContainer = std::make_shared<ContextContainer const>();
+  contextContainer->insert("FabricUIManager", customFabricUIManager);
+
+  customContextContainer_ = contextContainer;
+  previousMarkdownStyle_ = markdownStyle;
+  previousRanges_ = ranges;
+}
+
+void
+MarcusTextDecoratorShadowNode::updateCustomContextContainerIfNeeded() {
+  const auto &rawProps = this->getProps()->rawProps;
+  const auto &markdownStyleIt = rawProps.find("markdownStyle");
+  if (markdownStyleIt != rawProps.items().end() &&
+      markdownStyleIt->second != previousMarkdownStyle_) {
+    createCustomContextContainer();
+    return;
+  }
+  const auto &rangesIt = rawProps.find("ranges");
+  if (rangesIt != rawProps.items().end() &&
+      rangesIt->second != previousRanges_) {
+    createCustomContextContainer();
+  }
+}
+
+void
+MarcusTextDecoratorShadowNode::overwriteTextLayoutManager() {
+  const auto &children = getChildren();
+  if (children.empty()) {
+    return;
+  }
+  react_native_assert(
+    children.size() == 1 &&
+    "MarcusTextDecoratorView received more than one child"
+  );
+
+  const auto child =
+    std::dynamic_pointer_cast<const ParagraphShadowNode>(children[0]);
+
+  react_native_assert(
+    child != nullptr &&
+    "MarcusTextDecoratorView received child other than a Text"
+  );
+
+  if (child == nullptr) {
+    return;
+  }
+
+  child->ensureUnsealed();
+
+  const auto mutableChild =
+    std::const_pointer_cast<ParagraphShadowNode>(child);
+  mutableChild->setTextLayoutManager(
+    std::make_shared<TextLayoutManager>(customContextContainer_)
+  );
+}
+
+void
+MarcusTextDecoratorShadowNode::appendChild(
+  const std::shared_ptr<const ShadowNode> &child
+) {
+  YogaLayoutableShadowNode::appendChild(child);
+
+  overwriteTextLayoutManager();
+}
+
+void
+MarcusTextDecoratorShadowNode::replaceChild(
+  const ShadowNode &oldChild,
+  const std::shared_ptr<const ShadowNode> &newChild,
+  size_t suggestedIndex
+) {
+  YogaLayoutableShadowNode::replaceChild(oldChild, newChild, suggestedIndex);
+
+  overwriteTextLayoutManager();
+}
+
+void
+MarcusTextDecoratorShadowNode::layout(LayoutContext layoutContext) {
+  YogaLayoutableShadowNode::layout(layoutContext);
+
+  const auto &children = getChildren();
+  react_native_assert(
+    children.size() == 1 &&
+    "MarcusTextDecoratorView didn't receive exactly one child"
+  );
+
+  if (children.size() != 1) {
+    return;
+  }
+
+  auto child =
+    std::static_pointer_cast<const YogaLayoutableShadowNode>(children[0]);
+  child->ensureUnsealed();
+  auto mutableChild = std::const_pointer_cast<YogaLayoutableShadowNode>(child);
+
+  // Since nodes with display: contents are skipped during layout, they have
+  // zero-layout. To properly display the view, assign the layout metrics from
+  // the child (the paragraph, which was calculated by Yoga) to the decorator
+  // view.
+  auto childMetrics = child->getLayoutMetrics(); // makes a copy
+  setLayoutMetrics(childMetrics);
+
+  // Then, it's also needed to update the metrics on the child as the position
+  // is relative to the parent, which was just moved above. By zeroing the
+  // origin, the child is effectively moved to the same position it was before
+  // the manipulation here.
+  childMetrics.frame.origin = Point{};
+  mutableChild->setLayoutMetrics(childMetrics);
+}
+
+} // namespace react
+} // namespace facebook

package/android/src/main/new_arch/react/renderer/components/RNMarcusSpec/MarcusTextDecoratorShadowNode.h

@@ -0,0 +1,62 @@
+#pragma once
+
+#include <react/renderer/components/RNMarcusSpec/EventEmitters.h>
+#include <react/renderer/components/RNMarcusSpec/MarcusTextDecoratorState.h>
+#include <react/renderer/components/RNMarcusSpec/Props.h>
+
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <react/renderer/core/LayoutContext.h>
+
+namespace facebook {
+namespace react {
+
+JSI_EXPORT extern const char MarcusTextDecoratorViewComponentName[];
+
+/*
+ * Wraps a `Text` and gives the paragraph underneath it a text layout manager
+ * that formats before it measures.
+ *
+ * The measure half of the story only. Android builds a second spannable on the
+ * UI thread when the text is mounted, and the callback React Native offers
+ * there belongs to the view manager rather than to one `Text`, so that half is
+ * `MarcusTextDecoratorView`'s job.
+ */
+class JSI_EXPORT MarcusTextDecoratorShadowNode final
+    : public ConcreteViewShadowNode<MarcusTextDecoratorViewComponentName, MarcusTextDecoratorViewProps, MarcusTextDecoratorViewEventEmitter, MarcusTextDecoratorState> {
+public:
+  MarcusTextDecoratorShadowNode(ShadowNodeFragment const &fragment, ShadowNodeFamily::Shared const &family, ShadowNodeTraits traits);
+
+  MarcusTextDecoratorShadowNode(ShadowNode const &sourceShadowNode, ShadowNodeFragment const &fragment);
+
+  void
+  appendChild(const std::shared_ptr<const ShadowNode> &child) override;
+
+  void
+  replaceChild(const ShadowNode &oldChild, const std::shared_ptr<const ShadowNode> &newChild, size_t suggestedIndex = SIZE_MAX) override;
+
+  void
+  layout(LayoutContext layoutContext) override;
+
+private:
+  std::shared_ptr<const ContextContainer> customContextContainer_;
+  folly::dynamic previousMarkdownStyle_;
+  folly::dynamic previousRanges_;
+
+  void
+  initialize();
+
+  void
+  overwriteTextLayoutManager();
+
+  void
+  createCustomContextContainer();
+
+  void
+  updateCustomContextContainerIfNeeded();
+
+  void
+  makeChildNodeMutable();
+};
+
+} // namespace react
+} // namespace facebook

package/android/src/reactNativeVersionPatch/CustomMountingManager/81/app/getbullet/marcus/CustomFabricUIManager.java

@@ -25,6 +25,7 @@ import com.facebook.infer.annotation.Assertions;
 import com.facebook.jni.annotations.DoNotStrip;
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.common.mapbuffer.ReadableMapBuffer;
 import com.facebook.react.fabric.FabricUIManager;
@@ -49,16 +50,20 @@ public class CustomFabricUIManager extends FabricUIManager {
     BatchEventDispatchedListener batchEventDispatchedListener,
     MountingManager mountingManager,
     ReadableMap markdownProps,
-    int parserId
+    int parserId,
+    @Nullable ReadableArray ranges
   ) {
     super(reactContext, viewManagerRegistry, batchEventDispatchedListener);
 
     this.mReactApplicationContext = reactContext;
     this.mMountingManager = mountingManager;
 
-    this.mMarkdownUtils = new MarkdownUtils(reactContext);
+    // A `Text` is the one caller that arrives with ranges, and the one whose list
+    // markers are rendered rather than shown.
+    this.mMarkdownUtils = new MarkdownUtils(reactContext, null, null, ranges != null);
     this.mMarkdownUtils.setMarkdownStyle(new MarkdownStyle(markdownProps, reactContext));
     this.mMarkdownUtils.setParserId(parserId);
+    this.mMarkdownUtils.setRanges(ranges == null ? null : MarkdownRanges.read(ranges));
   }
 
   @Override
@@ -100,7 +105,20 @@ public class CustomFabricUIManager extends FabricUIManager {
       attachmentsPositions);
   }
 
+
+  // Two ways in. A `TextInput` supplies a parser id and the text is parsed here, on the background
+  // thread that measures it. A `Text` supplies finished ranges: its content only changes by a
+  // re-render, so JavaScript already knows the string and has already stripped the syntax out of
+  // it. Everything past that point is the same formatting.
   public static FabricUIManager create(FabricUIManager source, ReadableMap markdownProps, int parserId) {
+    return create(source, markdownProps, parserId, null);
+  }
+
+  public static FabricUIManager createForText(FabricUIManager source, ReadableMap markdownProps, ReadableArray ranges) {
+    return create(source, markdownProps, 0, ranges);
+  }
+
+  private static FabricUIManager create(FabricUIManager source, ReadableMap markdownProps, int parserId, @Nullable ReadableArray ranges) {
     try {
       MountingManager sourceMountingManager = readPrivateField(source, "mMountingManager");
       ReactApplicationContext reactContext = readPrivateField(source, "mReactApplicationContext");
@@ -113,7 +131,8 @@ public class CustomFabricUIManager extends FabricUIManager {
         batchEventDispatchedListener,
         sourceMountingManager,
         markdownProps,
-        parserId
+        parserId,
+        ranges
       );
 
       return customFabricUIManager;

package/android/src/reactNativeVersionPatch/CustomMountingManager/latest/app/getbullet/marcus/CustomFabricUIManager.java

@@ -23,6 +23,7 @@ import androidx.annotation.Nullable;
 
 import com.facebook.jni.annotations.DoNotStrip;
 import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.common.mapbuffer.ReadableMapBuffer;
 import com.facebook.react.fabric.FabricUIManager;
@@ -43,15 +44,19 @@ public class CustomFabricUIManager extends FabricUIManager {
     ViewManagerRegistry viewManagerRegistry,
     BatchEventDispatchedListener batchEventDispatchedListener,
     ReadableMap markdownProps,
-    int parserId
+    int parserId,
+    @Nullable ReadableArray ranges
   ) {
     super(reactContext, viewManagerRegistry, batchEventDispatchedListener);
 
     this.mReactApplicationContext = reactContext;
 
-    this.mMarkdownUtils = new MarkdownUtils(reactContext);
+    // A `Text` is the one caller that arrives with ranges, and the one whose list
+    // markers are rendered rather than shown.
+    this.mMarkdownUtils = new MarkdownUtils(reactContext, null, null, ranges != null);
     this.mMarkdownUtils.setMarkdownStyle(new MarkdownStyle(markdownProps, reactContext));
     this.mMarkdownUtils.setParserId(parserId);
+    this.mMarkdownUtils.setRanges(ranges == null ? null : MarkdownRanges.read(ranges));
   }
 
   @Override
@@ -78,7 +83,20 @@ public class CustomFabricUIManager extends FabricUIManager {
       attachmentsPositions);
   }
 
+
+  // Two ways in. A `TextInput` supplies a parser id and the text is parsed here, on the background
+  // thread that measures it. A `Text` supplies finished ranges: its content only changes by a
+  // re-render, so JavaScript already knows the string and has already stripped the syntax out of
+  // it. Everything past that point is the same formatting.
   public static FabricUIManager create(FabricUIManager source, ReadableMap markdownProps, int parserId) {
+    return create(source, markdownProps, parserId, null);
+  }
+
+  public static FabricUIManager createForText(FabricUIManager source, ReadableMap markdownProps, ReadableArray ranges) {
+    return create(source, markdownProps, 0, ranges);
+  }
+
+  private static FabricUIManager create(FabricUIManager source, ReadableMap markdownProps, int parserId, @Nullable ReadableArray ranges) {
     try {
       ReactApplicationContext reactContext = readPrivateField(source, "mReactApplicationContext");
       ViewManagerRegistry viewManagerRegistry = readPrivateField(source, "mViewManagerRegistry");
@@ -89,7 +107,8 @@ public class CustomFabricUIManager extends FabricUIManager {
         viewManagerRegistry,
         batchEventDispatchedListener,
         markdownProps,
-        parserId
+        parserId,
+        ranges
       );
     } catch (NoSuchFieldException | IllegalAccessException e) {
       throw new RuntimeException("[Marcus] Cannot read data from FabricUIManager", e);

package/android/src/test/java/app/getbullet/marcus/MarkdownCopyTest.kt

@@ -0,0 +1,69 @@
+package app.getbullet.marcus
+
+import org.junit.Assert.assertEquals
+import org.junit.Test
+
+/**
+ * What a selection copies as.
+ *
+ * The placeholder is one object replacement character standing where a view is mounted in the
+ * text, in the same string and at the same offsets the `TextView` and the formatter both work in.
+ */
+class MarkdownCopyTest {
+
+  private val substitutions =
+    listOf(
+      MarkdownSubstitution(index = 5, text = "\$\$E = mc^2\$\$"),
+      MarkdownSubstitution(index = 16, text = "\$\$\\alpha\$\$"),
+    )
+
+  private val text = "Where\uFFFCcomes from\uFFFCand more"
+
+  @Test
+  fun `writes every placeholder in the selection back out as its source`() {
+    assertEquals(
+      "Where\$\$E = mc^2\$\$comes from\$\$\\alpha\$\$and more",
+      MarkdownCopy.substitute(text, 0, text.length, substitutions),
+    )
+  }
+
+  @Test
+  fun `leaves a selection with no drawing in it exactly as it is`() {
+    assertEquals("comes from", MarkdownCopy.substitute(text, 6, 16, substitutions))
+  }
+
+  @Test
+  fun `substitutes only the drawings the selection reaches`() {
+    assertEquals("\$\$E = mc^2\$\$comes from", MarkdownCopy.substitute(text, 5, 16, substitutions))
+  }
+
+  // An image copies as nothing, so its placeholder has to go rather than stay as a character that
+  // pastes as an empty box.
+  @Test
+  fun `drops a placeholder whose source is empty`() {
+    assertEquals(
+      "Wherecomes from",
+      MarkdownCopy.substitute(text, 0, 16, listOf(MarkdownSubstitution(index = 5, text = ""))),
+    )
+  }
+
+  // The props and the laid-out text are two sides of one commit, and a paragraph mounted between
+  // them is the one frame where they can disagree.
+  @Test
+  fun `ignores an offset that is not in the text`() {
+    assertEquals(
+      text,
+      MarkdownCopy.substitute(
+        text,
+        0,
+        text.length,
+        listOf(MarkdownSubstitution(index = 999, text = "\$\$x\$\$")),
+      ),
+    )
+  }
+
+  @Test
+  fun `clamps a selection that runs past the end of the text`() {
+    assertEquals("and more", MarkdownCopy.substitute(text, 17, 9999, substitutions))
+  }
+}