react-native-enriched-markdown 0.1.1 → 0.2.0

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

@@ -0,0 +1,121 @@
+package com.swmansion.enriched.markdown.utils
+
+import android.os.Handler
+import android.os.Looper
+import android.text.Selection
+import android.text.Spannable
+import android.text.method.LinkMovementMethod
+import android.view.MotionEvent
+import android.view.ViewConfiguration
+import android.widget.TextView
+import com.swmansion.enriched.markdown.spans.LinkSpan
+import kotlin.math.abs
+
+/**
+ * Custom MovementMethod that handles both link clicks and long presses.
+ * Extends LinkMovementMethod to maintain click functionality while adding long press support.
+ */
+class LinkLongPressMovementMethod : LinkMovementMethod() {
+  private val handler = Handler(Looper.getMainLooper())
+  private var longPressRunnable: Runnable? = null
+
+  private var startX = 0f
+  private var startY = 0f
+
+  override fun onTouchEvent(
+    widget: TextView,
+    buffer: Spannable,
+    event: MotionEvent,
+  ): Boolean {
+    when (event.action) {
+      MotionEvent.ACTION_DOWN -> {
+        startX = event.x
+        startY = event.y
+
+        // Identify if a LinkSpan exists at the touch coordinates
+        findLinkSpan(widget, buffer, event)?.let { span ->
+          scheduleLongPress(widget, span)
+        }
+      }
+
+      MotionEvent.ACTION_MOVE -> {
+        val config = ViewConfiguration.get(widget.context)
+        // Cancel if the finger moves beyond the standard system touch slop
+        if (abs(event.x - startX) > config.scaledTouchSlop ||
+          abs(event.y - startY) > config.scaledTouchSlop
+        ) {
+          cancelLongPress()
+        }
+      }
+
+      MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
+        cancelLongPress()
+        // Clear text selection to prevent the "stuck" highlight look
+        if (widget.hasSelection()) {
+          Selection.removeSelection(buffer)
+        }
+      }
+    }
+
+    // Let the parent LinkMovementMethod handle the standard click logic
+    val result = super.onTouchEvent(widget, buffer, event)
+
+    // LinkMovementMethod sets a Selection highlight around the link on ACTION_DOWN,
+    // which causes a visible selection color on the link text while pressed.
+    // We remove that selection immediately so the user never sees it.
+    if (event.action == MotionEvent.ACTION_DOWN) {
+      Selection.removeSelection(buffer)
+    }
+
+    return result
+  }
+
+  private fun scheduleLongPress(
+    widget: TextView,
+    span: LinkSpan,
+  ) {
+    cancelLongPress()
+
+    longPressRunnable =
+      Runnable {
+        if (widget.hasSelection()) {
+          Selection.removeSelection(widget.text as Spannable)
+        }
+        // Execute the long click logic on the span
+        if (span.onLongClick(widget)) {
+          // If consumed, cancel the system's own long-press logic (like context menus)
+          widget.cancelLongPress()
+        }
+        longPressRunnable = null
+      }.also {
+        handler.postDelayed(it, ViewConfiguration.getLongPressTimeout().toLong())
+      }
+  }
+
+  private fun cancelLongPress() {
+    longPressRunnable?.let(handler::removeCallbacks)
+    longPressRunnable = null
+  }
+
+  private fun findLinkSpan(
+    widget: TextView,
+    buffer: Spannable,
+    event: MotionEvent,
+  ): LinkSpan? {
+    // Adjust coordinates for padding and scroll
+    val x = event.x.toInt() - widget.totalPaddingLeft + widget.scrollX
+    val y = event.y.toInt() - widget.totalPaddingTop + widget.scrollY
+
+    val layout = widget.layout ?: return null
+    val line = layout.getLineForVertical(y)
+    val offset = layout.getOffsetForHorizontal(line, x.toFloat())
+
+    // Ensure the touch is within the character bounds
+    return buffer.getSpans(offset, offset, LinkSpan::class.java).firstOrNull()
+  }
+
+  companion object {
+    @JvmStatic
+    fun createInstance(): LinkLongPressMovementMethod = LinkLongPressMovementMethod()
+  }
+}

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

@@ -1,6 +1,7 @@
 package com.swmansion.enriched.markdown.utils
 
 import android.text.Spannable
+import android.text.style.UnderlineSpan
 import android.widget.TextView
 import com.swmansion.enriched.markdown.EnrichedMarkdownText
 import com.swmansion.enriched.markdown.spans.BlockquoteSpan
@@ -11,6 +12,7 @@ import com.swmansion.enriched.markdown.spans.HeadingSpan
 import com.swmansion.enriched.markdown.spans.ImageSpan
 import com.swmansion.enriched.markdown.spans.LinkSpan
 import com.swmansion.enriched.markdown.spans.OrderedListSpan
+import com.swmansion.enriched.markdown.spans.StrikethroughSpan
 import com.swmansion.enriched.markdown.spans.StrongSpan
 import com.swmansion.enriched.markdown.spans.ThematicBreakSpan
 import com.swmansion.enriched.markdown.spans.UnorderedListSpan
@@ -283,6 +285,8 @@ object MarkdownExtractor {
     val hasStrong = spannable.getSpans(start, end, StrongSpan::class.java).isNotEmpty()
     val hasEmphasis = spannable.getSpans(start, end, EmphasisSpan::class.java).isNotEmpty()
     val hasCode = spannable.getSpans(start, end, CodeSpan::class.java).isNotEmpty()
+    val hasStrikethrough = spannable.getSpans(start, end, StrikethroughSpan::class.java).isNotEmpty()
+    val hasUnderline = spannable.getSpans(start, end, UnderlineSpan::class.java).isNotEmpty()
     val linkSpans = spannable.getSpans(start, end, LinkSpan::class.java)
 
     var result = text
@@ -291,6 +295,12 @@ object MarkdownExtractor {
     if (hasCode && linkSpans.isEmpty()) {
       result = "`$result`"
     }
+    if (hasStrikethrough) {
+      result = "~~$result~~"
+    }
+    if (hasUnderline && linkSpans.isEmpty()) {
+      result = "<u>$result</u>"
+    }
     if (hasEmphasis) {
       result = "*$result*"
     }

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

@@ -2,10 +2,10 @@ package com.swmansion.enriched.markdown.utils
 
 import android.content.Context
 import android.graphics.Typeface
-import android.os.Build
 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
@@ -13,8 +13,6 @@ 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 com.swmansion.enriched.markdown.styles.ParagraphStyle
-import com.swmansion.enriched.markdown.styles.StyleConfig
 import android.text.style.LineHeightSpan as AndroidLineHeightSpan
 
 // ============================================================================
@@ -95,37 +93,6 @@ fun MarkdownASTNode.containsBlockImage(): Boolean {
   return firstChild != null && children.size == 1 && firstChild.type == MarkdownASTNode.NodeType.Image
 }
 
-/**
- * Determines the appropriate marginBottom for a paragraph.
- * If paragraph contains only a single block-level element (e.g., image), uses that element's marginBottom.
- * Otherwise, uses paragraph's marginBottom.
- */
-fun getMarginBottomForParagraph(
-  paragraph: MarkdownASTNode,
-  paragraphStyle: ParagraphStyle,
-  style: StyleConfig,
-): Float {
-  // If paragraph contains only a single block-level element, use that element's marginBottom
-  // Otherwise, use paragraph's marginBottom
-  if (paragraph.children.size == 1) {
-    // Paragraph has exactly one child
-    when (paragraph.children.first().type) {
-      MarkdownASTNode.NodeType.Image -> {
-        // Image: use image's marginBottom
-        return style.imageStyle.marginBottom
-      }
-
-      // Future: Add other block elements here as they're implemented
-      else -> {
-        // Not a block element we handle specially
-      }
-    }
-  }
-
-  // Default: use paragraph's marginBottom
-  return paragraphStyle.marginBottom
-}
-
 // ============================================================================
 // SpannableStringBuilder Extensions
 // ============================================================================
@@ -144,38 +111,73 @@ fun SpannableStringBuilder.isInlineImage(): Boolean {
 // Span Creation Utilities
 // ============================================================================
 
-/**
- * Creates a LineHeightSpan appropriate for the current API level.
- *
- * @param lineHeight The desired line height in pixels
- */
-fun createLineHeightSpan(lineHeight: Float): AndroidLineHeightSpan =
-  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
-    AndroidLineHeightSpan.Standard(lineHeight.toInt())
-  } else {
-    LineHeightSpan(lineHeight)
-  }
+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 and applies MarginBottomSpan if marginBottom > 0.
+ * 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 start The start position of the block content (before appending newline)
  * @param marginBottom The spacing value to apply after the block
  */
 fun applyMarginBottom(
   builder: SpannableStringBuilder,
-  start: Int,
   marginBottom: Float,
 ) {
+  val spacerStart = builder.length
   builder.append("\n")
-  if (marginBottom > 0) {
-    builder.setSpan(
-      MarginBottomSpan(marginBottom),
-      start,
-      builder.length, // Includes the newline we just appended
-      SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE,
-    )
-  }
+  // 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

@@ -67,16 +67,4 @@ target_include_directories(
   ${CMAKE_CURRENT_SOURCE_DIR}
 )
 
-if(ReactAndroid_VERSION_MINOR GREATER_EQUAL 80)
-  target_compile_reactnative_options(${LIB_TARGET_NAME} PRIVATE)
-else()
-  target_compile_options(
-    ${LIB_TARGET_NAME}
-    PRIVATE
-    -DLOG_TAG=\"ReactNative\"
-    -fexceptions
-    -frtti
-    -std=c++20
-    -Wall
-  )
-endif()
+target_compile_reactnative_options(${LIB_TARGET_NAME} PRIVATE)

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

@@ -12,19 +12,6 @@ void MarkdownTextShadowNode::setMeasurementsManager(
   measurementsManager_ = measurementsManager;
 }
 
-// Mark layout as dirty after state has been updated.
-// Once layout is marked as dirty, `measureContent` will be called in order to
-// recalculate layout.
-void MarkdownTextShadowNode::dirtyLayoutIfNeeded() {
-  const auto state = this->getStateData();
-  const auto counter = state.getForceHeightRecalculationCounter();
-
-  if (forceHeightRecalculationCounter_ != counter) {
-    forceHeightRecalculationCounter_ = counter;
-    dirtyLayout();
-  }
-}
-
 Size MarkdownTextShadowNode::measureContent(const LayoutContext &layoutContext,
                                             const LayoutConstraints &layoutConstraints) const {
   return measurementsManager_->measure(getSurfaceId(), getTag(), getConcreteProps(), layoutConstraints);

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

@@ -1,7 +1,6 @@
 #pragma once
 
 #include "MarkdownTextMeasurementManager.h"
-#include "MarkdownTextState.h"
 
 #include <react/renderer/components/EnrichedMarkdownTextSpec/EventEmitters.h>
 #include <react/renderer/components/EnrichedMarkdownTextSpec/Props.h>
@@ -14,19 +13,11 @@ JSI_EXPORT extern const char MarkdownTextComponentName[];
 /*
  * `ShadowNode` for <EnrichedMarkdownText> component.
  */
-class MarkdownTextShadowNode final
-    : public ConcreteViewShadowNode<MarkdownTextComponentName, EnrichedMarkdownTextProps,
-                                    EnrichedMarkdownTextEventEmitter, MarkdownTextState> {
+class MarkdownTextShadowNode final : public ConcreteViewShadowNode<MarkdownTextComponentName, EnrichedMarkdownTextProps,
+                                                                   EnrichedMarkdownTextEventEmitter> {
 public:
   using ConcreteViewShadowNode::ConcreteViewShadowNode;
 
-  // This constructor is called when we "update" shadow node, e.g. after
-  // updating shadow node's state
-  MarkdownTextShadowNode(ShadowNode const &sourceShadowNode, ShadowNodeFragment const &fragment)
-      : ConcreteViewShadowNode(sourceShadowNode, fragment) {
-    dirtyLayoutIfNeeded();
-  }
-
   static ShadowNodeTraits BaseTraits() {
     auto traits = ConcreteViewShadowNode::BaseTraits();
     traits.set(ShadowNodeTraits::Trait::LeafYogaNode);
@@ -37,12 +28,9 @@ public:
   // Associates a shared `MarkdownTextMeasurementManager` with the node.
   void setMeasurementsManager(const std::shared_ptr<MarkdownTextMeasurementManager> &measurementsManager);
 
-  void dirtyLayoutIfNeeded();
-
   Size measureContent(const LayoutContext &layoutContext, const LayoutConstraints &layoutConstraints) const override;
 
 private:
-  int forceHeightRecalculationCounter_;
   std::shared_ptr<MarkdownTextMeasurementManager> measurementsManager_;
 };
 

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

@@ -12,6 +12,9 @@ inline folly::dynamic toDynamic(const EnrichedMarkdownTextProps &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

package/cpp/parser/MD4CParser.cpp

@@ -194,11 +194,21 @@ public:
         break;
       }
 
+      case MD_SPAN_U: {
+        impl->pushNode(std::make_shared<MarkdownASTNode>(NodeType::Underline));
+        break;
+      }
+
       case MD_SPAN_CODE: {
         impl->pushNode(std::make_shared<MarkdownASTNode>(NodeType::Code));
         break;
       }
 
+      case MD_SPAN_DEL: {
+        impl->pushNode(std::make_shared<MarkdownASTNode>(NodeType::Strikethrough));
+        break;
+      }
+
       case MD_SPAN_IMG: {
         auto node = std::make_shared<MarkdownASTNode>(NodeType::Image);
         if (detail) {
@@ -261,7 +271,7 @@ MD4CParser::MD4CParser() : impl_(std::make_unique<Impl>()) {}
 
 MD4CParser::~MD4CParser() = default;
 
-std::shared_ptr<MarkdownASTNode> MD4CParser::parse(const std::string &markdown) {
+std::shared_ptr<MarkdownASTNode> MD4CParser::parse(const std::string &markdown, const Md4cFlags &md4cFlags) {
   if (markdown.empty()) {
     return std::make_shared<MarkdownASTNode>(NodeType::Document);
   }
@@ -279,15 +289,18 @@ std::shared_ptr<MarkdownASTNode> MD4CParser::parse(const std::string &markdown)
   impl_->reset(estimatedDepth);
   impl_->inputText = markdown.c_str();
 
+  // MD_FLAG_NOHTML: Disable HTML parsing
+  // MD_FLAG_STRIKETHROUGH: Enable ~~strikethrough~~ syntax
+  // MD_FLAG_UNDERLINE: When enabled, __ creates underline; when disabled, __ creates emphasis
+  unsigned flags = MD_FLAG_NOHTML | MD_FLAG_STRIKETHROUGH;
+  if (md4cFlags.underline) {
+    flags |= MD_FLAG_UNDERLINE;
+  }
+
   // Configure MD4C parser with callbacks
   MD_PARSER parser = {
-      0,              // abi_version
-      MD_FLAG_NOHTML, // flags - disable HTML for security
-      &Impl::enterBlock,
-      &Impl::leaveBlock,
-      &Impl::enterSpan,
-      &Impl::leaveSpan,
-      &Impl::text,
+      0, // abi_version
+      flags,   &Impl::enterBlock, &Impl::leaveBlock, &Impl::enterSpan, &Impl::leaveSpan, &Impl::text,
       nullptr, // debug_log
       nullptr  // syntax
   };

package/cpp/parser/MD4CParser.hpp

@@ -6,13 +6,17 @@
 
 namespace Markdown {
 
+struct Md4cFlags {
+    bool underline = false;
+};
+
 class MD4CParser {
 public:
     MD4CParser();
     ~MD4CParser();
 
     // Parse markdown string and return AST root node
-    std::shared_ptr<MarkdownASTNode> parse(const std::string& markdown);
+    std::shared_ptr<MarkdownASTNode> parse(const std::string& markdown, const Md4cFlags& flags = Md4cFlags{});
 
 private:
     class Impl;

package/cpp/parser/MarkdownASTNode.hpp

@@ -16,6 +16,8 @@ enum class NodeType {
     LineBreak,
     Strong,
     Emphasis,
+    Strikethrough,
+    Underline,
     Code,
     Image,
     Blockquote,