Merge branch 'main' into add-codeblock

Author: kacperzolkiewski

README.md

@@ -101,11 +101,11 @@ export default function App() {
     <View style={styles.container}>
       <EnrichedTextInput
         ref={ref}
-        onChangeState={(e) => setStylesState(e.nativeEvent)}
+        onChangeState={e => setStylesState(e.nativeEvent)}
         style={styles.input}
       />
       <Button
-        title="Toggle bold"
+        title={stylesState?.isBold ? 'Unbold' : 'Bold'}
         color={stylesState?.isBold ? 'green' : 'gray'}
         onPress={() => ref.current?.toggleBold()}
       />

android/src/main/java/com/swmansion/enriched/EnrichedTextInputViewManager.kt

@@ -279,7 +279,8 @@ class EnrichedTextInputViewManager : SimpleViewManager<EnrichedTextInputView>(),
     heightMode: YogaMeasureMode?,
     attachmentsPositions: FloatArray?
   ): Long {
-    return MeasurementStore.getMeasureById(localData?.getInt("viewTag"), width)
+    val id = localData?.getInt("viewTag")
+    return MeasurementStore.getMeasureById(context, id, width, props)
   }
 
   companion object {

android/src/main/java/com/swmansion/enriched/MeasurementStore.kt

@@ -1,14 +1,23 @@
 package com.swmansion.enriched
 
+import android.content.Context
 import android.graphics.Typeface
 import android.graphics.text.LineBreaker
 import android.os.Build
 import android.text.Spannable
 import android.text.StaticLayout
 import android.text.TextPaint
+import android.util.Log
+import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.uimanager.PixelUtil
+import com.facebook.react.views.text.ReactTypefaceUtils.applyStyles
+import com.facebook.react.views.text.ReactTypefaceUtils.parseFontStyle
+import com.facebook.react.views.text.ReactTypefaceUtils.parseFontWeight
 import com.facebook.yoga.YogaMeasureOutput
+import com.swmansion.enriched.styles.HtmlStyle
+import com.swmansion.enriched.utils.EnrichedParser
 import java.util.concurrent.ConcurrentHashMap
+import kotlin.math.ceil
 
 object MeasurementStore {
   data class PaintParams(
@@ -17,10 +26,12 @@ object MeasurementStore {
   )
 
   data class MeasurementParams(
+    val initialized: Boolean,
+
     val cachedWidth: Float,
     val cachedSize: Long,
 
-    val spannable: Spannable?,
+    val spannable: CharSequence?,
     val paintParams: PaintParams,
   )
 
@@ -29,18 +40,20 @@ object MeasurementStore {
   fun store(id: Int, spannable: Spannable?, paint: TextPaint): Boolean {
     val cachedWidth = data[id]?.cachedWidth ?: 0f
     val cachedSize = data[id]?.cachedSize ?: 0L
+    val initialized = data[id]?.initialized ?: true
+
     val size = measure(cachedWidth, spannable, paint)
     val paintParams = PaintParams(paint.typeface, paint.textSize)
 
-    data[id] = MeasurementParams(cachedWidth, size, spannable, paintParams)
+    data[id] = MeasurementParams(initialized, cachedWidth, size, spannable, paintParams)
     return cachedSize != size
   }
 
   fun release(id: Int) {
     data.remove(id)
   }
 
-  fun measure(maxWidth: Float, spannable: Spannable?, paintParams: PaintParams): Long {
+  private fun measure(maxWidth: Float, spannable: CharSequence?, paintParams: PaintParams): Long {
     val paint = TextPaint().apply {
       typeface = paintParams.typeface
       textSize = paintParams.fontSize
@@ -49,7 +62,7 @@ object MeasurementStore {
     return measure(maxWidth, spannable, paint)
   }
 
-  fun measure(maxWidth: Float, spannable: Spannable?, paint: TextPaint): Long {
+  private fun measure(maxWidth: Float, spannable: CharSequence?, paint: TextPaint): Long {
     val text = spannable ?: ""
     val textLength = text.length
     val builder = StaticLayout.Builder
@@ -71,9 +84,63 @@ object MeasurementStore {
     return YogaMeasureOutput.make(widthInSP, heightInSP)
   }
 
-  fun getMeasureById(id: Int?, width: Float): Long {
-    val id = id ?: return YogaMeasureOutput.make(0, 0)
-    val value = data[id] ?: return YogaMeasureOutput.make(0, 0)
+  // Returns either: Spannable parsed from HTML defaultValue, or plain text defaultValue, or "I" if no defaultValue
+  private fun getInitialText(defaultView: EnrichedTextInputView, props: ReadableMap?): CharSequence {
+    val defaultValue = props?.getString("defaultValue")
+
+    // If there is no default value, assume text is one line, "I" is a good approximation of height
+    if (defaultValue == null) return "I"
+
+    val isHtml = defaultValue.startsWith("<html>") && defaultValue.endsWith("</html>")
+    if (!isHtml) return defaultValue
+
+    try {
+      val htmlStyle = HtmlStyle(defaultView, props.getMap("htmlStyle"))
+      val parsed = EnrichedParser.fromHtml(defaultValue, htmlStyle, null)
+      return parsed.trimEnd('\n')
+    } catch (e: Exception) {
+      Log.w("MeasurementStore", "Error parsing initial HTML text: ${e.message}")
+      return defaultValue
+    }
+  }
+
+  private fun getInitialFontSize(defaultView: EnrichedTextInputView, props: ReadableMap?): Float {
+    val propsFontSize = props?.getDouble("fontSize")?.toFloat()
+    if (propsFontSize == null) return defaultView.textSize
+
+    return ceil(PixelUtil.toPixelFromSP(propsFontSize))
+  }
+
+  // Called when view measurements are not available in the store
+  // Most likely first measurement, we can use defaultValue, as no native state is set yet
+  private fun initialMeasure(context: Context, id: Int?, width: Float, props: ReadableMap?): Long {
+    val defaultView = EnrichedTextInputView(context)
+
+    val text = getInitialText(defaultView, props)
+    val fontSize = getInitialFontSize(defaultView, props)
+
+    val fontFamily = props?.getString("fontFamily")
+    val fontStyle = parseFontStyle(props?.getString("fontStyle"))
+    val fontWeight = parseFontWeight(props?.getString("fontWeight"))
+
+    val typeface = applyStyles(defaultView.typeface, fontStyle, fontWeight, fontFamily, context.assets)
+    val paintParams = PaintParams(typeface, fontSize)
+    val size = measure(width, text, PaintParams(typeface, fontSize))
+
+    if (id != null) {
+      data[id] = MeasurementParams(true, width, size, text, paintParams)
+    }
+
+    return size
+  }
+
+  fun getMeasureById(context: Context, id: Int?, width: Float, props: ReadableMap?): Long {
+    val id = id ?: return initialMeasure(context, id, width, props)
+    val value = data[id] ?: return initialMeasure(context, id, width, props)
+
+    // First measure has to be done using initialMeasure
+    // That way it's free of any side effects and async initializations
+    if (!value.initialized) return initialMeasure(context, id, width, props)
 
     if (width == value.cachedWidth) {
       return value.cachedSize
@@ -83,8 +150,9 @@ object MeasurementStore {
       typeface = value.paintParams.typeface
       textSize = value.paintParams.fontSize
     }
+
     val size = measure(width, value.spannable, paint)
-    data[id] = MeasurementParams(width, size, value.spannable, value.paintParams)
+    data[id] = MeasurementParams(true, width, size, value.spannable, value.paintParams)
     return size
   }
 }

android/src/main/new_arch/react/renderer/components/RNEnrichedTextInputViewSpec/EnrichedTextInputMeasurementManager.cpp

@@ -1,4 +1,5 @@
 #include "EnrichedTextInputMeasurementManager.h"
+#include "conversions.h"
 
 #include <fbjni/fbjni.h>
 #include <react/jni/ReadableNativeMap.h>
@@ -11,6 +12,7 @@ namespace facebook::react {
     Size EnrichedTextInputMeasurementManager::measure(
             SurfaceId surfaceId,
             int viewTag,
+            const EnrichedTextInputViewProps& props,
             LayoutConstraints layoutConstraints) const {
         const jni::global_ref<jobject>& fabricUIManager =
                 contextContainer_->at<jni::global_ref<jobject>>("FabricUIManager");
@@ -33,17 +35,23 @@ namespace facebook::react {
 
         local_ref<JString> componentName = make_jstring("EnrichedTextInputView");
 
-        folly::dynamic extra = folly::dynamic::object();
-        extra["viewTag"] = viewTag;
-        local_ref<ReadableNativeMap::javaobject> extraData = ReadableNativeMap::newObjectCxxArgs(extra);
-        local_ref<ReadableMap::javaobject> extraDataRM = make_local(reinterpret_cast<ReadableMap::javaobject>(extraData.get()));
+        // 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(),
-                nullptr,
+                propsRM.get(),
                 nullptr,
                 minimumSize.width,
                 maximumSize.width,

android/src/main/new_arch/react/renderer/components/RNEnrichedTextInputViewSpec/EnrichedTextInputMeasurementManager.h

@@ -17,6 +17,7 @@ namespace facebook::react {
         Size measure(
                 SurfaceId surfaceId,
                 int viewTag,
+                const EnrichedTextInputViewProps& props,
                 LayoutConstraints layoutConstraints) const;
 
     private:

android/src/main/new_arch/react/renderer/components/RNEnrichedTextInputViewSpec/EnrichedTextInputShadowNode.cpp

@@ -27,7 +27,7 @@ extern const char EnrichedTextInputComponentName[] = "EnrichedTextInputView";
     Size EnrichedTextInputShadowNode::measureContent(
             const LayoutContext &layoutContext,
             const LayoutConstraints &layoutConstraints) const {
-        return measurementsManager_->measure(getSurfaceId(), getTag(), layoutConstraints);
+        return measurementsManager_->measure(getSurfaceId(), getTag(), getConcreteProps(), layoutConstraints);
     }
 
 } // namespace facebook::react

android/src/main/new_arch/react/renderer/components/RNEnrichedTextInputViewSpec/conversions.h

@@ -0,0 +1,27 @@
+#pragma once
+
+#include <folly/dynamic.h>
+#include <react/renderer/components/FBReactNativeSpec/Props.h>
+#include <react/renderer/core/propsConversions.h>
+#include <react/renderer/components/RNEnrichedTextInputViewSpec/Props.h>
+
+namespace facebook::react {
+
+#ifdef RN_SERIALIZABLE_STATE
+inline folly::dynamic toDynamic(const EnrichedTextInputViewProps &props)
+{
+    // Serialize only metrics affecting props
+    folly::dynamic serializedProps = folly::dynamic::object();
+    serializedProps["defaultValue"] = props.defaultValue;
+    serializedProps["placeholder"] = props.placeholder;
+    serializedProps["fontSize"] = props.fontSize;
+    serializedProps["fontWeight"] = props.fontWeight;
+    serializedProps["fontStyle"] = props.fontStyle;
+    serializedProps["fontFamily"] = props.fontFamily;
+    serializedProps["htmlStyle"] = toDynamic(props.htmlStyle);
+
+    return serializedProps;
+}
+#endif
+
+} // namespace facebook::react

example/ios/Podfile.lock

@@ -2349,7 +2349,7 @@ PODS:
     - React-perflogger (= 0.82.1)
     - React-utils (= 0.82.1)
     - SocketRocket
-  - ReactNativeEnriched (0.1.5):
+  - ReactNativeEnriched (0.1.6):
     - boost
     - DoubleConversion
     - fast_float
@@ -2690,7 +2690,7 @@ SPEC CHECKSUMS:
   ReactAppDependencyProvider: cc2795efe30a023c3a505676b9c748b664b9c0a1
   ReactCodegen: 897bad2d2f722ff4dc46fc144f9cc018db0e2ce4
   ReactCommon: c5803af00bd3737dc1631749b1f1da5beba5b049
-  ReactNativeEnriched: 9b9a2496bd301eca5df9a5c1ea208033d4d25b55
+  ReactNativeEnriched: c96634c617190d2cd94f9a474d68430dfc8d6dc0
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: 689c8e04277f3ad631e60fe2a08e41d411daf8eb
 

ios/EnrichedTextInputView.mm

@@ -73,7 +73,7 @@ - (void)setDefaults {
   _recentlyActiveMentionRange = NSMakeRange(0, 0);
   recentlyChangedRange = NSMakeRange(0, 0);
   _recentlyEmittedString = @"";
-  _recentlyEmittedHtml = @"";
+  _recentlyEmittedHtml = @"<html>\n<p></p>\n</html>";
   _emitHtml = NO;
   blockEmitting = NO;
   _emitFocusBlur = YES;
@@ -731,9 +731,6 @@ - (void)tryUpdatingActiveStyles {
   if(detectedLinkData != nullptr) {
     // emit onLinkeDetected event
     [self emitOnLinkDetectedEvent:detectedLinkData.text url:detectedLinkData.url range:detectedLinkRange];
-    
-    _recentlyActiveLinkData = detectedLinkData;
-    _recentlyActiveLinkRange = detectedLinkRange;
   }
 
   if(detectedMentionParams != nullptr) {
@@ -834,6 +831,13 @@ - (void)setValue:(NSString *)value {
 - (void)emitOnLinkDetectedEvent:(NSString *)text url:(NSString *)url range:(NSRange)range {
   auto emitter = [self getEventEmitter];
   if(emitter != nullptr) {
+    // update recently active link info
+    LinkData *newLinkData = [[LinkData alloc] init];
+    newLinkData.text = text;
+    newLinkData.url = url;
+    _recentlyActiveLinkData = newLinkData;
+    _recentlyActiveLinkRange = range;
+  
     emitter->onLinkDetected({
       .text = [text toCppString],
       .url = [url toCppString],
@@ -1081,10 +1085,10 @@ - (void)anyTextMayHaveBeenModified {
     [h3Style handleImproperHeadings];
   }
 
-  // manage mention editing also here
-  MentionStyle *mentionStyle = stylesDict[@([MentionStyle getStyleType])];
-  if(mentionStyle != nullptr) {
-    [mentionStyle manageMentionEditing];
+  // mentions removal management
+  MentionStyle *mentionStyleClass = (MentionStyle *)stylesDict[@([MentionStyle getStyleType])];
+  if(mentionStyleClass != nullptr) {
+    [mentionStyleClass handleExistingMentions];
   }
 
   // placholder management
@@ -1095,12 +1099,6 @@ - (void)anyTextMayHaveBeenModified {
   }
 
   if(![textView.textStorage.string isEqualToString:_recentlyEmittedString]) {
-    // mentions removal management
-    MentionStyle *mentionStyleClass = (MentionStyle *)stylesDict[@([MentionStyle getStyleType])];
-    if(mentionStyleClass != nullptr) {
-      [mentionStyleClass handleExistingMentions];
-    }
-    
     // modified words handling
     NSArray *modifiedWords = [WordsUtils getAffectedWordsFromText:textView.textStorage.string modificationRange:recentlyChangedRange];
     if(modifiedWords != nullptr) {
@@ -1122,13 +1120,13 @@ - (void)anyTextMayHaveBeenModified {
     // emit onChangeText event
     auto emitter = [self getEventEmitter];
     if(emitter != nullptr) {
+      // set the recently emitted string only if the emitter is defined
+      _recentlyEmittedString = stringToBeEmitted;
+      
       emitter->onChangeText({
         .value = [stringToBeEmitted toCppString]
       });
     }
-    
-    // set the recently emitted string
-    _recentlyEmittedString = stringToBeEmitted;
   }
 
   // update height on each character change

ios/inputParser/InputParser.mm

@@ -631,9 +631,21 @@ - (NSArray *)getTextAndStylesFromHtml:(NSString *)fixedHtml {
     } else if([tagName isEqualToString:@"code"]) {
       [styleArr addObject:@([InlineCodeStyle getStyleType])];
     } else if([tagName isEqualToString:@"a"]) {
+      NSRegularExpression *hrefRegex = [NSRegularExpression regularExpressionWithPattern:@"href=\".+\""
+        options:0
+        error:nullptr
+      ];
+      NSTextCheckingResult* match = [hrefRegex firstMatchInString:params options:0 range: NSMakeRange(0, params.length)];
+      
+      if(match == nullptr) {
+        // same as on Android, no href (or empty href) equals no link style
+        continue;
+      }
+      
+      NSRange hrefRange = match.range;
       [styleArr addObject:@([LinkStyle getStyleType])];
       // cut only the url from the href="..." string
-      NSString *url = [params substringWithRange:NSMakeRange(6, params.length - 7)];
+      NSString *url = [params substringWithRange:NSMakeRange(hrefRange.location + 6, hrefRange.length - 7)];
       stylePair.styleValue = url;
     } else if([tagName isEqualToString:@"mention"]) {
       [styleArr addObject:@([MentionStyle getStyleType])];
@@ -680,7 +692,7 @@ - (NSArray *)getTextAndStylesFromHtml:(NSString *)fixedHtml {
     } else if([tagName isEqualToString:@"codeblock"]) {
       [styleArr addObject:@([CodeBlockStyle getStyleType])];
     } else {
-    // some other external tags like span just don't get put into the processed styles
+      // some other external tags like span just don't get put into the processed styles
       continue;
     }