react-native-enriched-markdown-scaffold 0.7.4-scaffold.9 → 1.0.2-scaffold.10

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

@@ -25,8 +25,17 @@ endif()
 
 set(ANDROID_CPP_DIR "${LIB_ANDROID_DIR}/src/main/cpp")
 
+# Optional tree-sitter code highlighting. build.gradle writes this config during
+# configuration (enable flag, selected languages, generated registry dir); absent
+# on a bare CMake invocation, in which case highlighting stays compiled out.
+set(HIGHLIGHT_CONFIG "${LIB_ANDROID_DIR}/build/generated/highlight/highlight-config.cmake")
+if(EXISTS "${HIGHLIGHT_CONFIG}")
+  include("${HIGHLIGHT_CONFIG}")
+endif()
+
 file(GLOB MD4C_SOURCES "${CPP_ROOT}/md4c/*.c")
 file(GLOB PARSER_SOURCES "${CPP_ROOT}/parser/*.cpp")
+file(GLOB HIGHLIGHT_SOURCES "${CPP_ROOT}/highlight/*.cpp")
 
 # md4c is C code, build as separate static library with C flags
 add_library(md4c_lib STATIC ${MD4C_SOURCES})
@@ -46,6 +55,7 @@ add_library(
   ${LIB_CODEGEN_SRCS}
   ${LIB_CUSTOM_JNI_SRCS}
   ${PARSER_SOURCES}
+  ${HIGHLIGHT_SOURCES}
   ${ANDROID_CPP_DIR}/jni-adapter.cpp
 )
 
@@ -58,6 +68,7 @@ target_include_directories(
   ${LIB_ANDROID_GENERATED_COMPONENTS_DIR}
   ${CPP_ROOT}/md4c
   ${CPP_ROOT}/parser
+  ${CPP_ROOT}/highlight
 )
 
 target_compile_definitions(${LIB_TARGET_NAME} PRIVATE MD4C_USE_UTF8=1)
@@ -82,3 +93,45 @@ target_include_directories(
 )
 
 target_compile_reactnative_options(${LIB_TARGET_NAME} PRIVATE)
+
+# --- Code-block syntax highlighting (tree-sitter) ---
+# CodeBlockHighlighter.cpp / CodeBlockLanguages.cpp are already in the target via
+# HIGHLIGHT_SOURCES; without the define below CodeBlockHighlighter.cpp is the stub.
+# When enabled we add the runtime, the generated registry, and one OBJECT lib per
+# selected grammar (each isolated to its own dir so grammar parser.h files never
+# collide), then define ENRICHED_MARKDOWN_CODE_HIGHLIGHT so the real seam compiles.
+if(ENRICHED_MARKDOWN_CODE_HIGHLIGHT)
+  set(TS_VENDOR "${CPP_ROOT}/highlight/vendor")
+
+  add_library(tree_sitter_runtime STATIC "${TS_VENDOR}/tree-sitter/src/lib.c")
+  target_include_directories(tree_sitter_runtime
+    PRIVATE "${TS_VENDOR}/tree-sitter/src"
+    PUBLIC "${TS_VENDOR}/tree-sitter/include")
+  set_target_properties(tree_sitter_runtime PROPERTIES
+    C_STANDARD 11 C_STANDARD_REQUIRED ON POSITION_INDEPENDENT_CODE ON)
+  target_compile_options(tree_sitter_runtime PRIVATE -fvisibility=hidden)
+
+  set(GRAMMAR_OBJECTS "")
+  foreach(lang IN LISTS ENRICHED_MARKDOWN_HIGHLIGHT_LANGUAGES)
+    set(gdir "${TS_VENDOR}/grammars/${lang}")
+    set(gsrcs "${gdir}/parser.c")
+    if(EXISTS "${gdir}/scanner.c")
+      list(APPEND gsrcs "${gdir}/scanner.c")
+    endif()
+    add_library(ts_grammar_${lang} OBJECT ${gsrcs})
+    target_include_directories(ts_grammar_${lang} PRIVATE "${gdir}")
+    set_target_properties(ts_grammar_${lang} PROPERTIES
+      C_STANDARD 11 C_STANDARD_REQUIRED ON POSITION_INDEPENDENT_CODE ON)
+    target_compile_options(ts_grammar_${lang} PRIVATE -fvisibility=hidden)
+    list(APPEND GRAMMAR_OBJECTS $<TARGET_OBJECTS:ts_grammar_${lang}>)
+  endforeach()
+
+  target_sources(${LIB_TARGET_NAME} PRIVATE
+    "${ENRICHED_MARKDOWN_HIGHLIGHT_GENERATED_DIR}/generated_registry.cpp"
+    ${GRAMMAR_OBJECTS})
+  target_include_directories(${LIB_TARGET_NAME} PRIVATE
+    "${TS_VENDOR}/tree-sitter/include"
+    "${ENRICHED_MARKDOWN_HIGHLIGHT_GENERATED_DIR}")
+  target_compile_definitions(${LIB_TARGET_NAME} PRIVATE ENRICHED_MARKDOWN_CODE_HIGHLIGHT=1)
+  target_link_libraries(${LIB_TARGET_NAME} tree_sitter_runtime)
+endif()

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

@@ -12,6 +12,16 @@ void MarkdownContainerShadowNode::setMeasurementsManager(
   measurementsManager_ = measurementsManager;
 }
 
+void MarkdownContainerShadowNode::dirtyLayoutIfNeeded() {
+  const auto state = this->getStateData();
+  const auto counter = state.getForceHeightRecalculationCounter();
+
+  if (forceHeightRecalculationCounter_ != counter) {
+    forceHeightRecalculationCounter_ = counter;
+    dirtyLayout();
+  }
+}
+
 Size MarkdownContainerShadowNode::measureContent(const LayoutContext &layoutContext,
                                                  const LayoutConstraints &layoutConstraints) const {
   return measurementsManager_->measure(getSurfaceId(), getTag(), getConcreteProps(), layoutConstraints);

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

@@ -1,6 +1,7 @@
 #pragma once
 
 #include "MarkdownContainerMeasurementManager.h"
+#include "MarkdownTextState.h"
 
 #include <react/renderer/components/EnrichedMarkdownTextSpec/EventEmitters.h>
 #include <react/renderer/components/EnrichedMarkdownTextSpec/Props.h>
@@ -11,11 +12,16 @@ namespace facebook::react {
 JSI_EXPORT extern const char MarkdownContainerComponentName[];
 
 class MarkdownContainerShadowNode final
-    : public ConcreteViewShadowNode<MarkdownContainerComponentName, EnrichedMarkdownProps,
-                                    EnrichedMarkdownEventEmitter> {
+    : public ConcreteViewShadowNode<MarkdownContainerComponentName, EnrichedMarkdownProps, EnrichedMarkdownEventEmitter,
+                                    MarkdownTextState> {
 public:
   using ConcreteViewShadowNode::ConcreteViewShadowNode;
 
+  MarkdownContainerShadowNode(ShadowNode const &sourceShadowNode, ShadowNodeFragment const &fragment)
+      : ConcreteViewShadowNode(sourceShadowNode, fragment) {
+    dirtyLayoutIfNeeded();
+  }
+
   static ShadowNodeTraits BaseTraits() {
     auto traits = ConcreteViewShadowNode::BaseTraits();
     traits.set(ShadowNodeTraits::Trait::LeafYogaNode);
@@ -25,9 +31,12 @@ public:
 
   void setMeasurementsManager(const std::shared_ptr<MarkdownContainerMeasurementManager> &measurementsManager);
 
+  void dirtyLayoutIfNeeded();
+
   Size measureContent(const LayoutContext &layoutContext, const LayoutConstraints &layoutConstraints) const override;
 
 private:
+  int forceHeightRecalculationCounter_{0};
   std::shared_ptr<MarkdownContainerMeasurementManager> measurementsManager_;
 };
 

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

@@ -12,6 +12,16 @@ void MarkdownTextShadowNode::setMeasurementsManager(
   measurementsManager_ = measurementsManager;
 }
 
+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,6 +1,7 @@
 #pragma once
 
 #include "MarkdownTextMeasurementManager.h"
+#include "MarkdownTextState.h"
 
 #include <react/renderer/components/EnrichedMarkdownTextSpec/EventEmitters.h>
 #include <react/renderer/components/EnrichedMarkdownTextSpec/Props.h>
@@ -13,11 +14,17 @@ JSI_EXPORT extern const char MarkdownTextComponentName[];
 /*
  * `ShadowNode` for <EnrichedMarkdownText> component.
  */
-class MarkdownTextShadowNode final : public ConcreteViewShadowNode<MarkdownTextComponentName, EnrichedMarkdownTextProps,
-                                                                   EnrichedMarkdownTextEventEmitter> {
+class MarkdownTextShadowNode final
+    : public ConcreteViewShadowNode<MarkdownTextComponentName, EnrichedMarkdownTextProps,
+                                    EnrichedMarkdownTextEventEmitter, MarkdownTextState> {
 public:
   using ConcreteViewShadowNode::ConcreteViewShadowNode;
 
+  MarkdownTextShadowNode(ShadowNode const &sourceShadowNode, ShadowNodeFragment const &fragment)
+      : ConcreteViewShadowNode(sourceShadowNode, fragment) {
+    dirtyLayoutIfNeeded();
+  }
+
   static ShadowNodeTraits BaseTraits() {
     auto traits = ConcreteViewShadowNode::BaseTraits();
     traits.set(ShadowNodeTraits::Trait::LeafYogaNode);
@@ -28,9 +35,12 @@ 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_{0};
   std::shared_ptr<MarkdownTextMeasurementManager> measurementsManager_;
 };
 

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

@@ -0,0 +1,9 @@
+#include "MarkdownTextState.h"
+
+namespace facebook::react {
+
+int MarkdownTextState::getForceHeightRecalculationCounter() const {
+  return forceHeightRecalculationCounter_;
+}
+
+} // namespace facebook::react

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

@@ -0,0 +1,24 @@
+#pragma once
+
+#include <folly/dynamic.h>
+
+namespace facebook::react {
+
+class MarkdownTextState {
+public:
+  MarkdownTextState() : forceHeightRecalculationCounter_(0) {}
+
+  MarkdownTextState(MarkdownTextState const &previousState, folly::dynamic data)
+      : forceHeightRecalculationCounter_((int)data["forceHeightRecalculationCounter"].getInt()) {}
+
+  folly::dynamic getDynamic() const {
+    return {};
+  }
+
+  int getForceHeightRecalculationCounter() const;
+
+private:
+  const int forceHeightRecalculationCounter_{};
+};
+
+} // namespace facebook::react

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

@@ -12,9 +12,17 @@ inline folly::dynamic toDynamic(const EnrichedMarkdownTextProps &props) {
   serializedProps["markdown"] = props.markdown;
   serializedProps["markdownStyle"] = toDynamic(props.markdownStyle);
   serializedProps["md4cFlags"] = toDynamic(props.md4cFlags);
+  serializedProps["allowFontScaling"] = props.allowFontScaling;
+  serializedProps["maxFontSizeMultiplier"] = props.maxFontSizeMultiplier;
   serializedProps["allowTrailingMargin"] = props.allowTrailingMargin;
   serializedProps["streamingAnimation"] = props.streamingAnimation;
 
+  folly::dynamic imageRequestHeaders = folly::dynamic::array();
+  for (const auto &header : props.imageRequestHeaders) {
+    imageRequestHeaders.push_back(toDynamic(header));
+  }
+  serializedProps["imageRequestHeaders"] = std::move(imageRequestHeaders);
+
   return serializedProps;
 }
 
@@ -23,9 +31,17 @@ inline folly::dynamic toDynamic(const EnrichedMarkdownProps &props) {
   serializedProps["markdown"] = props.markdown;
   serializedProps["markdownStyle"] = toDynamic(props.markdownStyle);
   serializedProps["md4cFlags"] = toDynamic(props.md4cFlags);
+  serializedProps["allowFontScaling"] = props.allowFontScaling;
+  serializedProps["maxFontSizeMultiplier"] = props.maxFontSizeMultiplier;
   serializedProps["allowTrailingMargin"] = props.allowTrailingMargin;
   serializedProps["streamingAnimation"] = props.streamingAnimation;
 
+  folly::dynamic imageRequestHeaders = folly::dynamic::array();
+  for (const auto &header : props.imageRequestHeaders) {
+    imageRequestHeaders.push_back(toDynamic(header));
+  }
+  serializedProps["imageRequestHeaders"] = std::move(imageRequestHeaders);
+
   return serializedProps;
 }
 

package/android/src/math/java/com/swmansion/enriched/markdown/input/math/MathChipControllerImpl.kt

@@ -195,11 +195,28 @@ class MathChipControllerImpl(
   ) {
     if (!displayMode) return
     val blockStyle = style as? MathBlockStyle ?: return
-    if (blockStyle.alignment == Layout.Alignment.ALIGN_NORMAL) return
+    if (blockStyle.textAlign == Layout.Alignment.ALIGN_NORMAL) return
+
+    // An AlignmentSpan is paragraph-scoped, and SpannableStringBuilder *throws* unless a
+    // SPAN_PARAGRAPH span starts at a paragraph boundary and ends just past one — its end
+    // check is `charAt(end - 1) == '\n' || end == length`. A bare (position, position + 1)
+    // span therefore crashes for every chip that is not the buffer's last character, so
+    // the span has to cover the chip's whole paragraph, trailing newline included.
+    var start = position
+    while (start > 0 && editable[start - 1] != '\n') start--
+    var end = position + 1
+    while (end < editable.length && editable[end - 1] != '\n') end++
+
+    // Align only a paragraph the chip owns. Display math can also arrive from the middle
+    // of a paragraph ("text $$x$$ more", upstream #537); aligning that whole paragraph
+    // because of one formula would move the surrounding prose too.
+    val glyphCount = (start until end).count { editable[it] != '\n' }
+    if (glyphCount != 1) return
+
     editable.setSpan(
-      AlignmentSpan.Standard(blockStyle.alignment),
-      position,
-      position + 1,
+      AlignmentSpan.Standard(blockStyle.textAlign),
+      start,
+      end,
       Spanned.SPAN_PARAGRAPH,
     )
   }

package/android/src/math/java/com/swmansion/enriched/markdown/renderer/MathInlineRenderer.kt

@@ -37,13 +37,19 @@ class MathInlineRenderer(
         textColor = config.style.inlineMathStyle.color,
         paddingVertical = config.style.inlineMathStyle.paddingVertical,
         fontWeight = config.style.inlineMathStyle.fontWeight,
+        glyphOverflow = config.style.inlineMathStyle.glyphOverflow,
       )
 
     builder.setSpan(span, start, end, SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE)
   }
 
   private fun extractLatex(node: MarkdownASTNode): String {
-    if (!node.content.isNullOrEmpty()) return node.content!!
-    return node.children.mapNotNull { it.content }.joinToString("")
+    if (node.content.isNotEmpty()) return node.content
+    return node.children.joinToString("") { child ->
+      when (child.type) {
+        MarkdownASTNode.NodeType.SoftBreak, MarkdownASTNode.NodeType.LineBreak -> " "
+        else -> child.content
+      }
+    }
   }
 }

package/android/src/math/java/com/swmansion/enriched/markdown/spans/MathChipSpan.kt

@@ -185,7 +185,7 @@ class MathChipSpan(
         if (blockStyle != null && totalWidth > intrinsicWidth) {
           val slack = totalWidth - formulaWidth - style.paddingHorizontal * 2f
           val offset =
-            when (blockStyle.alignment) {
+            when (blockStyle.textAlign) {
               Layout.Alignment.ALIGN_CENTER -> slack / 2f
               Layout.Alignment.ALIGN_OPPOSITE -> slack
               else -> 0f

package/android/src/math/java/com/swmansion/enriched/markdown/spans/MathInlineSpan.kt

@@ -16,6 +16,7 @@ class MathInlineSpan(
   private val textColor: Int,
   private val paddingVertical: Float,
   private val fontWeight: String = "normal",
+  private val glyphOverflow: Float = 0f,
 ) : ReplacementSpan() {
   private var cachedBitmap: Bitmap? = null
   private var cachedWidth = 0
@@ -31,18 +32,24 @@ class MathInlineSpan(
       val displayList = RaTeXEngine.parseBlocking(latex, displayMode = false, color = textColor)
       val renderer = RaTeXRenderer(displayList, fontSize, ratexTypefaceLoader(fontWeight))
 
-      cachedWidth = renderer.widthPx.toInt().coerceAtLeast(1)
+      cachedWidth = ceil(renderer.widthPx).toInt().coerceAtLeast(1)
       mathAscent = renderer.heightPx
       mathDescent = renderer.depthPx
 
+      // RaTeX reports TeX metric boxes, which digit and capital outlines (and the
+      // fake-bold stroke) overshoot; the bitmap keeps glyphOverflow px of headroom
+      // on both sides so that ink is not cut off.
+      val overflowPx = glyphOverflow.toInt()
       val bitmap =
         Bitmap.createBitmap(
           cachedWidth,
-          ceil(renderer.totalHeightPx).toInt().coerceAtLeast(1),
+          ceil(renderer.totalHeightPx).toInt().coerceAtLeast(1) + overflowPx * 2,
           Bitmap.Config.ARGB_8888,
         )
 
-      renderer.draw(Canvas(bitmap))
+      val canvas = Canvas(bitmap)
+      canvas.translate(0f, overflowPx.toFloat())
+      renderer.draw(canvas)
       cachedBitmap = bitmap
     } catch (_: Exception) {
       renderFailed = true
@@ -66,9 +73,9 @@ class MathInlineSpan(
       // Must stay identical to MathInlinePlaceholderSpan.getSize: that span measures
       // this one off the main thread, and a box that disagrees by even a pixel either
       // clips the formula or eats the padding this field is here to add.
-      ascent = -ceil(mathAscent + paddingVertical).toInt()
+      ascent = -ceil(mathAscent + (paddingVertical + glyphOverflow)).toInt()
       top = ascent
-      descent = ceil(mathDescent + paddingVertical).toInt()
+      descent = ceil(mathDescent + (paddingVertical + glyphOverflow)).toInt()
       bottom = descent
     }
 
@@ -88,7 +95,7 @@ class MathInlineSpan(
   ) {
     prepareResources()
     cachedBitmap?.let {
-      val bitmapY = y - ceil(mathAscent)
+      val bitmapY = y - ceil(mathAscent) - glyphOverflow
       canvas.drawBitmap(it, x, bitmapY, paint)
     }
   }

package/android/src/math/java/com/swmansion/enriched/markdown/spans/MathMeasureHelper.kt

@@ -5,6 +5,7 @@ import android.util.Log
 import io.ratex.RaTeXEngine
 import io.ratex.RaTeXFontLoader
 import io.ratex.RaTeXRenderer
+import kotlin.math.ceil
 
 object MathMeasureHelper {
   @JvmStatic
@@ -37,7 +38,7 @@ object MathMeasureHelper {
       }
 
     return MathMetrics(
-      renderer.widthPx.toInt(),
+      ceil(renderer.widthPx).toInt().coerceAtLeast(1),
       renderer.heightPx,
       renderer.depthPx,
     )

package/android/src/math/java/com/swmansion/enriched/markdown/views/MathContainerView.kt

@@ -41,6 +41,12 @@ class MathContainerView(
   // Set reflectively by EnrichedMarkdown (math is an optional module).
   var copyLabel: String = ""
   var copyAsMarkdownLabel: String = ""
+  var contextMenuHidden: Boolean = false
+  var menuOptions: BlockMenuOptions = BlockMenuOptions()
+
+  // Called instead of the menu on long press while contextMenuHidden is on, so
+  // the owner can report the block (onSelectionChange) and show its own UI.
+  var onMenuSuppressed: ((markdown: String, text: String) -> Unit)? = null
 
   override val segmentMarginTop: Int get() = mathStyle.marginTop.toInt()
   override val segmentMarginBottom: Int get() = mathStyle.marginBottom.toInt()
@@ -52,7 +58,7 @@ class MathContainerView(
       else -> Gravity.CENTER_HORIZONTAL
     }
 
-  private val mathView = RaTeXCanvasView(context)
+  private val mathView = RaTeXCanvasView(context, mathStyle.glyphOverflow)
 
   init {
     setBackgroundColor(mathStyle.backgroundColor)
@@ -117,19 +123,27 @@ class MathContainerView(
   }
 
   private fun showContextMenu(anchor: View) {
+    if (contextMenuHidden) {
+      onMenuSuppressed?.invoke("$$\n$cachedLatex\n$$", cachedLatex)
+      return
+    }
     val clipboard = context.getSystemService(Context.CLIPBOARD_SERVICE) as ClipboardManager
     ContextMenuPopup.show(anchor, this) {
-      item(ContextMenuPopup.Icon.COPY, copyLabel) {
+      blockCopyItems(menuOptions, copyLabel, copyAsMarkdownLabel, markdown = {
+        "$$\n$cachedLatex\n$$"
+      }, rawText = { cachedLatex }, copyRaw = {
         clipboard.setPrimaryClip(ClipData.newPlainText("Math", cachedLatex))
-      }
-      item(ContextMenuPopup.Icon.DOCUMENT, copyAsMarkdownLabel) {
+      }, copyMarkdown = {
         clipboard.setPrimaryClip(ClipData.newPlainText("Math", "$$\n$cachedLatex\n$$"))
-      }
+      })
     }
   }
 
+  // glyphOverflow px of headroom above and below the RaTeX box: digit and capital
+  // outlines (and the fake-bold stroke) overshoot it, and this view clips to its size.
   private class RaTeXCanvasView(
     context: Context,
+    private val glyphOverflow: Float,
   ) : View(context) {
     var renderer: RaTeXRenderer? = null
 
@@ -142,12 +156,16 @@ class MathContainerView(
           ?: return setMeasuredDimension(0, 0)
       setMeasuredDimension(
         ceil(currentRenderer.widthPx).toInt().coerceAtLeast(1),
-        ceil(currentRenderer.totalHeightPx).toInt().coerceAtLeast(1),
+        ceil(currentRenderer.totalHeightPx).toInt().coerceAtLeast(1) + (glyphOverflow * 2).toInt(),
       )
     }
 
     override fun onDraw(canvas: Canvas) {
-      renderer?.draw(canvas)
+      val currentRenderer = renderer ?: return
+      canvas.save()
+      canvas.translate(0f, glyphOverflow)
+      currentRenderer.draw(canvas)
+      canvas.restore()
     }
   }
 
@@ -164,7 +182,7 @@ class MathContainerView(
           mode = MathRenderMode.Display,
         )
       val metrics = MathMeasureHelper.measure(context, listOf(request)).first()
-      return ceil(metrics.ascent + metrics.descent).toInt() + (mathStyle.padding * 2)
+      return ceil(metrics.ascent + metrics.descent).toInt() + (mathStyle.padding * 2) + (mathStyle.glyphOverflow * 2)
     }
 
     private const val TAG = "MathContainerView"