Implement code and pre blocks support on Android

Author: maksg

android/src/main/java/com/expensify/livemarkdown/MarkdownBackgroundColorSpan.java

@@ -6,19 +6,24 @@
 import android.text.TextPaint;
 import android.text.style.MetricAffectingSpan;
 
+import androidx.annotation.ColorInt;
 import androidx.annotation.NonNull;
 
-import com.facebook.react.common.assets.ReactFontManager.TypefaceStyle;
-import com.facebook.react.views.text.ReactFontManager;
+import com.facebook.react.common.assets.ReactFontManager;
+import com.facebook.react.uimanager.PixelUtil;
 
-public class MarkdownFontFamilySpan extends MetricAffectingSpan implements MarkdownSpan {
+public class MarkdownBlockSpan extends MetricAffectingSpan implements MarkdownSpan {
 
-  private final @NonNull String mFontFamily;
   private final @NonNull AssetManager mAssetManager;
+  private final @NonNull String mFontFamily;
+  private final float mFontSize;
+  private final int mColor;
 
-  public MarkdownFontFamilySpan(@NonNull String fontFamily, @NonNull AssetManager assetManager) {
-    mFontFamily = fontFamily;
+  public MarkdownBlockSpan(@NonNull AssetManager assetManager, @NonNull String fontFamily, float fontSize, @ColorInt int color) {
     mAssetManager = assetManager;
+    mFontFamily = fontFamily;
+    mFontSize = PixelUtil.toPixelFromDIP(fontSize);
+    mColor = color;
   }
 
   @Override
@@ -31,15 +36,15 @@ public void updateDrawState(TextPaint tp) {
     apply(tp);
   }
 
-  private void apply(@NonNull TextPaint textPaint) {
-    int style = TypefaceStyle.NORMAL;
+  void apply(@NonNull TextPaint textPaint) {
+    int style = ReactFontManager.TypefaceStyle.NORMAL;
     if (textPaint.getTypeface() != null) {
       style = textPaint.getTypeface().getStyle();
-    } else {
-      style = TypefaceStyle.NORMAL;
     }
     Typeface typeface = ReactFontManager.getInstance().getTypeface(mFontFamily, style, mAssetManager);
     textPaint.setTypeface(typeface);
     textPaint.setFlags(textPaint.getFlags() | Paint.SUBPIXEL_TEXT_FLAG);
+    textPaint.setTextSize(mFontSize);
+    textPaint.setColor(mColor);
   }
 }

android/src/main/java/com/expensify/livemarkdown/MarkdownFontFamilySpan.java renamed to android/src/main/java/com/expensify/livemarkdown/MarkdownBlockSpan.java

@@ -0,0 +1,13 @@
+package com.expensify.livemarkdown;
+
+import android.content.res.AssetManager;
+
+import androidx.annotation.ColorInt;
+import androidx.annotation.NonNull;
+
+public class MarkdownCodeSpan extends MarkdownBlockSpan {
+  public MarkdownCodeSpan(@NonNull AssetManager assetManager, @NonNull String fontFamily, float fontSize, @ColorInt int color) {
+    super(assetManager, fontFamily, fontSize, color);
+  }
+}
+

android/src/main/java/com/expensify/livemarkdown/MarkdownCodeSpan.java

@@ -0,0 +1,47 @@
+package com.expensify.livemarkdown;
+
+import android.graphics.Paint;
+import android.graphics.Typeface;
+import android.text.TextPaint;
+import android.text.style.LineHeightSpan;
+import android.text.style.StyleSpan;
+
+import androidx.annotation.NonNull;
+
+import com.facebook.react.uimanager.PixelUtil;
+
+public class MarkdownH1Span extends StyleSpan implements LineHeightSpan, MarkdownSpan {
+
+  private final float mFontSize;
+  private final Integer mLineHeight;
+
+  public MarkdownH1Span(float fontSize, Integer lineHeight) {
+    super(Typeface.BOLD);
+    mFontSize = PixelUtil.toPixelFromDIP(fontSize);
+    mLineHeight = lineHeight;
+  }
+
+  @Override
+  public void updateMeasureState(@NonNull TextPaint textPaint) {
+    super.updateMeasureState(textPaint);
+    apply(textPaint);
+  }
+
+  @Override
+  public void updateDrawState(TextPaint tp) {
+    super.updateDrawState(tp);
+    apply(tp);
+  }
+
+  private void apply(@NonNull TextPaint textPaint) {
+    textPaint.setTextSize(mFontSize);
+  }
+
+  @Override
+  public void chooseHeight(CharSequence text, int start, int end, int spanstartv, int lineHeight, Paint.FontMetricsInt fm) {
+    if (mLineHeight != null) {
+      fm.top -= mLineHeight / 4;
+      fm.ascent -= mLineHeight / 4;
+    }
+  }
+}

android/src/main/java/com/expensify/livemarkdown/MarkdownFontSizeSpan.java

@@ -0,0 +1,30 @@
+package com.expensify.livemarkdown;
+
+import android.text.TextPaint;
+import android.text.style.MetricAffectingSpan;
+
+import androidx.annotation.NonNull;
+
+public class MarkdownLinkSpan extends MetricAffectingSpan implements MarkdownSpan {
+
+  private final int mForegroundColor;
+
+  public MarkdownLinkSpan(int foregroundColor) {
+    mForegroundColor = foregroundColor;
+  }
+
+  @Override
+  public void updateMeasureState(@NonNull TextPaint textPaint) {
+    apply(textPaint);
+  }
+
+  @Override
+  public void updateDrawState(TextPaint tp) {
+    apply(tp);
+  }
+
+  private void apply(@NonNull TextPaint textPaint) {
+    textPaint.setUnderlineText(true);
+    textPaint.setColor(mForegroundColor);
+  }
+}

android/src/main/java/com/expensify/livemarkdown/MarkdownH1Span.java

@@ -0,0 +1,32 @@
+package com.expensify.livemarkdown;
+
+import android.text.TextPaint;
+import android.text.style.MetricAffectingSpan;
+
+import androidx.annotation.NonNull;
+
+public class MarkdownMentionSpan extends MetricAffectingSpan implements MarkdownSpan {
+
+  private final int mBackgroundColor;
+  private final int mForegroundColor;
+
+  public MarkdownMentionSpan(int backgroundColor, int foregroundColor) {
+    mBackgroundColor = backgroundColor;
+    mForegroundColor = foregroundColor;
+  }
+
+  @Override
+  public void updateMeasureState(@NonNull TextPaint textPaint) {
+    apply(textPaint);
+  }
+
+  @Override
+  public void updateDrawState(TextPaint tp) {
+    apply(tp);
+  }
+
+  private void apply(@NonNull TextPaint textPaint) {
+    textPaint.bgColor = mBackgroundColor;
+    textPaint.setColor(mForegroundColor);
+  }
+}

android/src/main/java/com/expensify/livemarkdown/MarkdownLineHeightSpan.java

@@ -0,0 +1,28 @@
+package com.expensify.livemarkdown;
+
+import android.content.res.AssetManager;
+import android.graphics.Canvas;
+import android.graphics.Paint;
+import android.text.Layout;
+import android.text.style.LeadingMarginSpan;
+
+import androidx.annotation.ColorInt;
+import androidx.annotation.NonNull;
+
+public class MarkdownPreSpan extends MarkdownBlockSpan implements LeadingMarginSpan {
+
+  private final int mLeadingMargin;
+
+  public MarkdownPreSpan(@NonNull AssetManager assetManager, @NonNull String fontFamily, float fontSize, @ColorInt int color, int leadingMargin) {
+    super(assetManager, fontFamily, fontSize, color);
+    mLeadingMargin = leadingMargin;
+  }
+
+  @Override
+  public int getLeadingMargin(boolean first) {
+    return mLeadingMargin;
+  }
+
+  @Override
+  public void drawLeadingMargin(Canvas c, Paint p, int x, int dir, int top, int baseline, int bottom, CharSequence text, int start, int end, boolean first, Layout layout) {}
+}

android/src/main/java/com/expensify/livemarkdown/MarkdownLinkSpan.java

@@ -25,42 +25,41 @@ public class MarkdownStyle {
 
   @ColorInt
   private final int mBlockquoteBorderColor;
-
   private final float mBlockquoteBorderWidth;
-
   private final float mBlockquoteMarginLeft;
-
   private final float mBlockquotePaddingLeft;
 
   private final String mCodeFontFamily;
-
   private final float mCodeFontSize;
-
   @ColorInt
   private final int mCodeColor;
-
   @ColorInt
   private final int mCodeBackgroundColor;
+  @ColorInt
+  private final int mCodeBorderColor;
+  private final float mCodeBorderWidth;
+  private final float mCodeBorderRadius;
+  private final float mCodePadding;
 
   private final String mPreFontFamily;
-
   private final float mPreFontSize;
-
   @ColorInt
   private final int mPreColor;
-
   @ColorInt
   private final int mPreBackgroundColor;
+  @ColorInt
+  private final int mPreBorderColor;
+  private final float mPreBorderWidth;
+  private final float mPreBorderRadius;
+  private final float mPrePadding;
 
   @ColorInt
   private final int mMentionHereColor;
-
   @ColorInt
   private final int mMentionHereBackgroundColor;
 
   @ColorInt
   private final int mMentionUserColor;
-
   @ColorInt
   private final int mMentionUserBackgroundColor;
 
@@ -83,10 +82,18 @@ public MarkdownStyle(@NonNull ReadableMap map, @NonNull Context context) {
     mCodeFontSize = parseFloat(map, "code", "fontSize");
     mCodeColor = parseColor(map, "code", "color", context);
     mCodeBackgroundColor = parseColor(map, "code", "backgroundColor", context);
+    mCodeBorderColor = parseColor(map, "code", "borderColor", context);
+    mCodeBorderWidth = parseFloat(map, "code", "borderWidth");
+    mCodeBorderRadius = parseFloat(map, "code", "borderRadius");
+    mCodePadding = parseFloat(map, "code", "padding");
     mPreFontFamily = parseString(map, "pre", "fontFamily");
     mPreFontSize = parseFloat(map, "pre", "fontSize");
     mPreColor = parseColor(map, "pre", "color", context);
     mPreBackgroundColor = parseColor(map, "pre", "backgroundColor", context);
+    mPreBorderColor = parseColor(map, "pre", "borderColor", context);
+    mPreBorderWidth = parseFloat(map, "pre", "borderWidth");
+    mPreBorderRadius = parseFloat(map, "pre", "borderRadius");
+    mPrePadding = parseFloat(map, "pre", "padding");
     mMentionHereColor = parseColor(map, "mentionHere", "color", context);
     mMentionHereBackgroundColor = parseColor(map, "mentionHere", "backgroundColor", context);
     mMentionUserColor = parseColor(map, "mentionUser", "color", context);
@@ -99,14 +106,11 @@ private static int parseColor(@NonNull ReadableMap map, @NonNull String key, @No
     ReadableMap style = map.getMap(key);
     Objects.requireNonNull(style);
     Dynamic value = style.getDynamic(prop);
-    switch (value.getType()) {
-      case Number:
-        return ColorPropConverter.getColor(value.asDouble(), context);
-      case Map:
-        return ColorPropConverter.getColor(value.asMap(), context);
-      default:
-        throw new JSApplicationCausedNativeException("ColorValue: the value must be a number or Object.");
-    }
+    return switch (value.getType()) {
+      case Number -> ColorPropConverter.getColor(value.asDouble(), context);
+      case Map -> ColorPropConverter.getColor(value.asMap(), context);
+      default -> throw new JSApplicationCausedNativeException("ColorValue: the value must be a number or Object.");
+    };
   }
 
   private static float parseFloat(@NonNull ReadableMap map, @NonNull String key, @NonNull String prop) {
@@ -175,6 +179,23 @@ public int getCodeBackgroundColor() {
     return mCodeBackgroundColor;
   }
 
+  @ColorInt
+  public int getCodeBorderColor() {
+    return mCodeBorderColor;
+  }
+
+  public float getCodeBorderWidth() {
+    return mCodeBorderWidth;
+  }
+
+  public float getCodeBorderRadius() {
+    return mCodeBorderRadius;
+  }
+
+  public float getCodePadding() {
+    return mCodePadding;
+  }
+
   public String getPreFontFamily() {
     return mPreFontFamily;
   }
@@ -193,6 +214,23 @@ public int getPreBackgroundColor() {
     return mPreBackgroundColor;
   }
 
+  @ColorInt
+  public int getPreBorderColor() {
+    return mPreBorderColor;
+  }
+
+  public float getPreBorderWidth() {
+    return mPreBorderWidth;
+  }
+
+  public float getPreBorderRadius() {
+    return mPreBorderRadius;
+  }
+
+  public float getPrePadding() {
+    return mPrePadding;
+  }
+
   @ColorInt
   public int getMentionHereColor() {
     return mMentionHereColor;