react-native-enriched-markdown 0.1.0 → 0.2.0

package/android/src/main/java/com/swmansion/enriched/markdown/utils/Utils.kt

@@ -0,0 +1,183 @@
+package com.swmansion.enriched.markdown.utils
+
+import android.content.Context
+import android.graphics.Typeface
+import android.text.SpannableString
+import android.text.SpannableStringBuilder
+import android.text.TextPaint
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.common.ReactConstants
+import com.facebook.react.views.text.ReactTypefaceUtils.applyStyles
+import com.facebook.react.views.text.ReactTypefaceUtils.parseFontWeight
+import com.swmansion.enriched.markdown.parser.MarkdownASTNode
+import com.swmansion.enriched.markdown.renderer.BlockStyle
+import com.swmansion.enriched.markdown.spans.LineHeightSpan
+import com.swmansion.enriched.markdown.spans.MarginBottomSpan
+import android.text.style.LineHeightSpan as AndroidLineHeightSpan
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+/**
+ * Standard span flags for exclusive span boundaries.
+ * Spans with these flags do not expand when text is inserted at their boundaries.
+ */
+const val SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE = SpannableString.SPAN_EXCLUSIVE_EXCLUSIVE
+
+// ============================================================================
+// TextPaint Extensions
+// ============================================================================
+
+/**
+ * Applies a color to TextPaint while preserving priority colors (e.g., link color).
+ */
+fun TextPaint.applyColorPreserving(
+  color: Int,
+  vararg preserveColors: Int,
+) {
+  if (this.color !in preserveColors) {
+    this.color = color
+  }
+}
+
+private val typefaceCache = mutableMapOf<String, Typeface>()
+private val fontWeightCache = mutableMapOf<String?, Int>()
+
+/**
+ * Applies fontFamily and fontWeight from BlockStyle to TextPaint.
+ * Uses caching to avoid expensive typeface creation on every call.
+ */
+fun TextPaint.applyBlockStyleFont(
+  blockStyle: BlockStyle,
+  context: Context,
+) {
+  val cacheKey = "${blockStyle.fontFamily}|${blockStyle.fontWeight}"
+
+  val cachedTypeface = typefaceCache[cacheKey]
+  if (cachedTypeface != null) {
+    this.typeface = cachedTypeface
+    return
+  }
+
+  val fontWeight =
+    fontWeightCache.getOrPut(blockStyle.fontWeight) {
+      parseFontWeight(blockStyle.fontWeight)
+    }
+
+  // Pass null as base typeface - this matches React Native Text behavior
+  // applyStyles will use ReactFontManager to load custom fonts from assets
+  val newTypeface =
+    applyStyles(
+      null, // Let applyStyles handle font loading from assets
+      ReactConstants.UNSET,
+      fontWeight,
+      blockStyle.fontFamily.takeIf { it.isNotEmpty() },
+      context.assets,
+    )
+
+  typefaceCache[cacheKey] = newTypeface
+  this.typeface = newTypeface
+}
+
+// ============================================================================
+// Paragraph/Node Utilities
+// ============================================================================
+
+/**
+ * Determines if a paragraph contains only a single block image.
+ */
+fun MarkdownASTNode.containsBlockImage(): Boolean {
+  if (type != MarkdownASTNode.NodeType.Paragraph) return false
+  val firstChild = children.firstOrNull()
+  return firstChild != null && children.size == 1 && firstChild.type == MarkdownASTNode.NodeType.Image
+}
+
+// ============================================================================
+// SpannableStringBuilder Extensions
+// ============================================================================
+
+/**
+ * Determines if an image should be rendered inline (within text) or as a block element.
+ * An image is inline if it's not preceded by a line break or zero-width space.
+ */
+fun SpannableStringBuilder.isInlineImage(): Boolean {
+  if (isEmpty()) return false
+  val lastChar = last()
+  return lastChar != '\n' && lastChar != '\u200B'
+}
+
+// ============================================================================
+// Span Creation Utilities
+// ============================================================================
+
+fun createLineHeightSpan(lineHeight: Float): AndroidLineHeightSpan = LineHeightSpan(lineHeight)
+
+fun applyMarginTop(
+  builder: SpannableStringBuilder,
+  insertionPoint: Int,
+  marginTop: Float,
+) {
+  if (marginTop <= 0) return
+
+  // Insert a newline character to act as a vertical spacer
+  builder.insert(insertionPoint, "\n")
+
+  // Apply MarginBottomSpan to the spacer character to create the gap before the content
+  builder.setSpan(
+    MarginBottomSpan(marginTop),
+    insertionPoint,
+    insertionPoint + 1,
+    SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE,
+  )
+}
+
+/**
+ * Applies marginBottom spacing to a block element.
+ * Appends a newline spacer and applies MarginBottomSpan to ONLY the spacer character.
+ *
+ * The span covers only the trailing newline to avoid overlapping with LineHeightSpan
+ * on content lines, which would cause incorrect spacing due to conflicting font metric
+ * modifications in chooseHeight().
+ *
+ * @param builder The SpannableStringBuilder to modify
+ * @param marginBottom The spacing value to apply after the block
+ */
+fun applyMarginBottom(
+  builder: SpannableStringBuilder,
+  marginBottom: Float,
+) {
+  val spacerStart = builder.length
+  builder.append("\n")
+  // Always create a MarginBottomSpan, even when marginBottom = 0.
+  // This ensures removeTrailingMargin can correctly identify the LAST element's
+  // margin value. Without a span on the last element, it would pick up a previous
+  // element's span (e.g. blockquote with marginBottom: 16) and use that wrong value.
+  builder.setSpan(
+    MarginBottomSpan(marginBottom),
+    spacerStart,
+    builder.length,
+    SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE,
+  )
+}
+
+// ============================================================================
+// ReadableMap Extensions
+// ============================================================================
+
+fun ReadableMap?.getBooleanOrDefault(
+  key: String,
+  default: Boolean,
+): Boolean = if (this?.hasKey(key) == true) getBoolean(key) else default
+
+fun ReadableMap?.getFloatOrDefault(
+  key: String,
+  default: Float,
+): Float = if (this?.hasKey(key) == true) getDouble(key).toFloat() else default
+
+fun ReadableMap?.getStringOrDefault(
+  key: String,
+  default: String,
+): String = if (this?.hasKey(key) == true) getString(key) ?: default else default
+
+fun ReadableMap?.getMapOrNull(key: String): ReadableMap? = if (this?.hasKey(key) == true) getMap(key) else null

package/android/src/main/jni/CMakeLists.txt

@@ -0,0 +1,70 @@
+cmake_minimum_required(VERSION 3.13)
+set(CMAKE_VERBOSE_MAKEFILE ON)
+
+set(LIB_LITERAL EnrichedMarkdownTextSpec)
+set(LIB_TARGET_NAME react_codegen_${LIB_LITERAL})
+
+set(LIB_ANDROID_DIR ${CMAKE_CURRENT_SOURCE_DIR}/../../..)
+set(LIB_ANDROID_GENERATED_JNI_DIR ${LIB_ANDROID_DIR}/generated/jni)
+set(LIB_ANDROID_GENERATED_COMPONENTS_DIR ${LIB_ANDROID_GENERATED_JNI_DIR}/react/renderer/components/${LIB_LITERAL})
+
+set(CPP_ROOT "${LIB_ANDROID_DIR}/../cpp")
+set(ANDROID_CPP_DIR "${LIB_ANDROID_DIR}/src/main/cpp")
+
+file(GLOB MD4C_SOURCES "${CPP_ROOT}/md4c/*.c")
+file(GLOB PARSER_SOURCES "${CPP_ROOT}/parser/*.cpp")
+
+# md4c is C code, build as separate static library with C flags
+add_library(md4c_lib STATIC ${MD4C_SOURCES})
+target_include_directories(md4c_lib PUBLIC ${CPP_ROOT}/md4c)
+target_compile_definitions(md4c_lib PRIVATE MD4C_USE_UTF8=1)
+set_target_properties(md4c_lib PROPERTIES
+  C_STANDARD 11
+  C_STANDARD_REQUIRED ON
+)
+
+file(GLOB LIB_CODEGEN_SRCS CONFIGURE_DEPENDS ${LIB_ANDROID_GENERATED_JNI_DIR}/*.cpp ${LIB_ANDROID_GENERATED_COMPONENTS_DIR}/*.cpp)
+file(GLOB LIB_CUSTOM_JNI_SRCS CONFIGURE_DEPENDS ${CMAKE_CURRENT_SOURCE_DIR}/*.cpp ${CMAKE_CURRENT_SOURCE_DIR}/react/renderer/components/${LIB_LITERAL}/*.cpp)
+
+add_library(
+  ${LIB_TARGET_NAME}
+  SHARED
+  ${LIB_CODEGEN_SRCS}
+  ${LIB_CUSTOM_JNI_SRCS}
+  ${PARSER_SOURCES}
+  ${ANDROID_CPP_DIR}/jni-adapter.cpp
+)
+
+target_include_directories(
+  ${LIB_TARGET_NAME}
+  PUBLIC
+  ${CMAKE_CURRENT_SOURCE_DIR}
+  ${CMAKE_CURRENT_SOURCE_DIR}/react/renderer/components/${LIB_LITERAL}
+  ${LIB_ANDROID_GENERATED_JNI_DIR}
+  ${LIB_ANDROID_GENERATED_COMPONENTS_DIR}
+  ${CPP_ROOT}/md4c
+  ${CPP_ROOT}/parser
+)
+
+target_compile_definitions(${LIB_TARGET_NAME} PRIVATE MD4C_USE_UTF8=1)
+
+find_package(fbjni REQUIRED CONFIG)
+find_package(ReactAndroid REQUIRED CONFIG)
+find_library(LOG_LIB log)
+
+target_link_libraries(
+  ${LIB_TARGET_NAME}
+  ${LOG_LIB}
+  md4c_lib
+  fbjni::fbjni
+  ReactAndroid::jsi
+  ReactAndroid::reactnative
+)
+
+target_include_directories(
+  ${CMAKE_PROJECT_NAME}
+  PUBLIC
+  ${CMAKE_CURRENT_SOURCE_DIR}
+)
+
+target_compile_reactnative_options(${LIB_TARGET_NAME} PRIVATE)

package/android/src/main/jni/EnrichedMarkdownTextSpec.cpp

@@ -0,0 +1,21 @@
+/**
+ * This code was generated by
+ * [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be
+ * lost once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateModuleJniCpp.js
+ */
+
+#include "EnrichedMarkdownTextSpec.h"
+
+namespace facebook::react {
+
+std::shared_ptr<TurboModule> EnrichedMarkdownTextSpec_ModuleProvider(const std::string &moduleName,
+                                                                     const JavaTurboModule::InitParams &params) {
+
+  return nullptr;
+}
+
+} // namespace facebook::react

package/android/src/main/jni/EnrichedMarkdownTextSpec.h

@@ -0,0 +1,25 @@
+/**
+ * This code was generated by
+ * [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be
+ * lost once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateModuleJniH.js
+ */
+
+#pragma once
+
+#include <ReactCommon/JavaTurboModule.h>
+#include <ReactCommon/TurboModule.h>
+#include <jsi/jsi.h>
+
+#include <react/renderer/components/EnrichedMarkdownTextSpec/MarkdownTextComponentDescriptor.h>
+
+namespace facebook::react {
+
+JSI_EXPORT
+std::shared_ptr<TurboModule> EnrichedMarkdownTextSpec_ModuleProvider(const std::string &moduleName,
+                                                                     const JavaTurboModule::InitParams &params);
+
+} // namespace facebook::react

package/android/src/main/jni/react/renderer/components/EnrichedMarkdownTextSpec/MarkdownTextComponentDescriptor.h

@@ -0,0 +1,29 @@
+#pragma once
+
+#include "MarkdownTextMeasurementManager.h"
+#include "MarkdownTextShadowNode.h"
+
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+
+namespace facebook::react {
+
+class MarkdownTextComponentDescriptor final : public ConcreteComponentDescriptor<MarkdownTextShadowNode> {
+public:
+  MarkdownTextComponentDescriptor(const ComponentDescriptorParameters &parameters)
+      : ConcreteComponentDescriptor(parameters),
+        measurementsManager_(std::make_shared<MarkdownTextMeasurementManager>(contextContainer_)) {}
+
+  void adopt(ShadowNode &shadowNode) const override {
+    ConcreteComponentDescriptor::adopt(shadowNode);
+    auto &markdownTextShadowNode = static_cast<MarkdownTextShadowNode &>(shadowNode);
+
+    // MarkdownTextShadowNode uses MarkdownTextMeasurementManager
+    // to provide measurements to Yoga.
+    markdownTextShadowNode.setMeasurementsManager(measurementsManager_);
+  }
+
+private:
+  const std::shared_ptr<MarkdownTextMeasurementManager> measurementsManager_;
+};
+
+} // namespace facebook::react

package/android/src/main/jni/react/renderer/components/EnrichedMarkdownTextSpec/MarkdownTextMeasurementManager.cpp

@@ -0,0 +1,45 @@
+#include "MarkdownTextMeasurementManager.h"
+#include "conversions.h"
+
+#include <fbjni/fbjni.h>
+#include <react/jni/ReadableNativeMap.h>
+#include <react/renderer/core/conversions.h>
+
+using namespace facebook::jni;
+
+namespace facebook::react {
+
+Size MarkdownTextMeasurementManager::measure(SurfaceId surfaceId, int viewTag, const EnrichedMarkdownTextProps &props,
+                                             LayoutConstraints layoutConstraints) const {
+  const jni::global_ref<jobject> &fabricUIManager = contextContainer_->at<jni::global_ref<jobject>>("FabricUIManager");
+
+  static const auto measure =
+      facebook::jni::findClassStatic("com/facebook/react/fabric/FabricUIManager")
+          ->getMethod<jlong(jint, jstring, ReadableMap::javaobject, ReadableMap::javaobject, ReadableMap::javaobject,
+                            jfloat, jfloat, jfloat, jfloat)>("measure");
+
+  auto minimumSize = layoutConstraints.minimumSize;
+  auto maximumSize = layoutConstraints.maximumSize;
+
+  local_ref<JString> componentName = make_jstring("EnrichedMarkdownText");
+
+  // Prepare extraData map with viewTag
+  folly::dynamic extraData = folly::dynamic::object();
+  extraData["viewTag"] = viewTag;
+  local_ref<ReadableNativeMap::javaobject> extraDataRNM = ReadableNativeMap::newObjectCxxArgs(extraData);
+  local_ref<ReadableMap::javaobject> extraDataRM =
+      make_local(reinterpret_cast<ReadableMap::javaobject>(extraDataRNM.get()));
+
+  // Prepare layout metrics affecting props
+  auto serializedProps = toDynamic(props);
+  local_ref<ReadableNativeMap::javaobject> propsRNM = ReadableNativeMap::newObjectCxxArgs(serializedProps);
+  local_ref<ReadableMap::javaobject> propsRM = make_local(reinterpret_cast<ReadableMap::javaobject>(propsRNM.get()));
+
+  auto measurement = yogaMeassureToSize(measure(fabricUIManager, surfaceId, componentName.get(), extraDataRM.get(),
+                                                propsRM.get(), nullptr, minimumSize.width, maximumSize.width,
+                                                minimumSize.height, maximumSize.height));
+
+  return measurement;
+}
+
+} // namespace facebook::react

package/android/src/main/jni/react/renderer/components/EnrichedMarkdownTextSpec/MarkdownTextMeasurementManager.h

@@ -0,0 +1,21 @@
+#pragma once
+
+#include <react/renderer/components/EnrichedMarkdownTextSpec/Props.h>
+#include <react/renderer/core/LayoutConstraints.h>
+#include <react/utils/ContextContainer.h>
+
+namespace facebook::react {
+
+class MarkdownTextMeasurementManager {
+public:
+  MarkdownTextMeasurementManager(const std::shared_ptr<const ContextContainer> &contextContainer)
+      : contextContainer_(contextContainer) {}
+
+  Size measure(SurfaceId surfaceId, int viewTag, const EnrichedMarkdownTextProps &props,
+               LayoutConstraints layoutConstraints) const;
+
+private:
+  const std::shared_ptr<const ContextContainer> contextContainer_;
+};
+
+} // namespace facebook::react

package/android/src/main/jni/react/renderer/components/EnrichedMarkdownTextSpec/MarkdownTextShadowNode.cpp

@@ -0,0 +1,20 @@
+#include "MarkdownTextShadowNode.h"
+
+#include <react/renderer/core/LayoutContext.h>
+
+namespace facebook::react {
+
+extern const char MarkdownTextComponentName[] = "EnrichedMarkdownText";
+
+void MarkdownTextShadowNode::setMeasurementsManager(
+    const std::shared_ptr<MarkdownTextMeasurementManager> &measurementsManager) {
+  ensureUnsealed();
+  measurementsManager_ = measurementsManager;
+}
+
+Size MarkdownTextShadowNode::measureContent(const LayoutContext &layoutContext,
+                                            const LayoutConstraints &layoutConstraints) const {
+  return measurementsManager_->measure(getSurfaceId(), getTag(), getConcreteProps(), layoutConstraints);
+}
+
+} // namespace facebook::react

package/android/src/main/jni/react/renderer/components/EnrichedMarkdownTextSpec/MarkdownTextShadowNode.h

@@ -0,0 +1,37 @@
+#pragma once
+
+#include "MarkdownTextMeasurementManager.h"
+
+#include <react/renderer/components/EnrichedMarkdownTextSpec/EventEmitters.h>
+#include <react/renderer/components/EnrichedMarkdownTextSpec/Props.h>
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+
+namespace facebook::react {
+
+JSI_EXPORT extern const char MarkdownTextComponentName[];
+
+/*
+ * `ShadowNode` for <EnrichedMarkdownText> component.
+ */
+class MarkdownTextShadowNode final : public ConcreteViewShadowNode<MarkdownTextComponentName, EnrichedMarkdownTextProps,
+                                                                   EnrichedMarkdownTextEventEmitter> {
+public:
+  using ConcreteViewShadowNode::ConcreteViewShadowNode;
+
+  static ShadowNodeTraits BaseTraits() {
+    auto traits = ConcreteViewShadowNode::BaseTraits();
+    traits.set(ShadowNodeTraits::Trait::LeafYogaNode);
+    traits.set(ShadowNodeTraits::Trait::MeasurableYogaNode);
+    return traits;
+  }
+
+  // Associates a shared `MarkdownTextMeasurementManager` with the node.
+  void setMeasurementsManager(const std::shared_ptr<MarkdownTextMeasurementManager> &measurementsManager);
+
+  Size measureContent(const LayoutContext &layoutContext, const LayoutConstraints &layoutConstraints) const override;
+
+private:
+  std::shared_ptr<MarkdownTextMeasurementManager> measurementsManager_;
+};
+
+} // namespace facebook::react

package/android/src/main/jni/react/renderer/components/EnrichedMarkdownTextSpec/conversions.h

@@ -0,0 +1,22 @@
+#pragma once
+
+#include <folly/dynamic.h>
+#include <react/renderer/components/EnrichedMarkdownTextSpec/Props.h>
+#include <react/renderer/core/propsConversions.h>
+
+namespace facebook::react {
+
+#ifdef RN_SERIALIZABLE_STATE
+inline folly::dynamic toDynamic(const EnrichedMarkdownTextProps &props) {
+  // Serialize measurement-affecting props
+  folly::dynamic serializedProps = folly::dynamic::object();
+  serializedProps["markdown"] = props.markdown;
+  serializedProps["markdownStyle"] = toDynamic(props.markdownStyle);
+  serializedProps["md4cFlags"] = toDynamic(props.md4cFlags);
+  serializedProps["allowTrailingMargin"] = props.allowTrailingMargin;
+
+  return serializedProps;
+}
+#endif
+
+} // namespace facebook::react