Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support custom font family for codeblocks and inline code on Android #133

Merged
merged 2 commits into from
Jan 18, 2024
Merged

Support custom font family for codeblocks and inline code on Android #133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7db75b4
Support custom font family for codeblocks and inline code on Android
tomekzaw Jan 18, 2024
2aff82a
Add `@NonNull`
tomekzaw Jan 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 32 additions & 4 deletions android/src/main/java/com/expensify/livemarkdown/MarkdownFontFamilySpan.java
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,39 @@
package com.expensify.livemarkdown;

import android.text.style.TypefaceSpan;
import android.content.res.AssetManager;
import android.graphics.Paint;
import android.graphics.Typeface;
import android.text.TextPaint;
import android.text.style.MetricAffectingSpan;

import androidx.annotation.NonNull;

public class MarkdownFontFamilySpan extends TypefaceSpan implements MarkdownSpan {
public MarkdownFontFamilySpan(@NonNull String fontFamily) {
super(fontFamily);
Comment on lines -7 to -9
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TypefaceSpan does not support custom fonts added by React Native so we need to come up with our own solution.

import com.facebook.react.views.text.ReactFontManager;

public class MarkdownFontFamilySpan extends MetricAffectingSpan implements MarkdownSpan {

private final @NonNull String mFontFamily;
private final @NonNull AssetManager mAssetManager;

public MarkdownFontFamilySpan(@NonNull String fontFamily, @NonNull AssetManager assetManager) {
mFontFamily = fontFamily;
mAssetManager = assetManager;
}

@Override
public void updateMeasureState(@NonNull TextPaint textPaint) {
apply(textPaint);
}

@Override
public void updateDrawState(TextPaint tp) {
apply(tp);
}

private void apply(@NonNull TextPaint textPaint) {
int style = textPaint.getTypeface().getStyle();
Typeface typeface = ReactFontManager.getInstance().getTypeface(mFontFamily, style, mAssetManager);
textPaint.setTypeface(typeface);
textPaint.setFlags(textPaint.getFlags() | Paint.SUBPIXEL_TEXT_FLAG);
}
}
6 changes: 4 additions & 2 deletions android/src/main/java/com/expensify/livemarkdown/MarkdownTextInputDecoratorView.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import androidx.annotation.Nullable;

import android.content.Context;
import android.content.res.AssetManager;
import android.text.TextWatcher;
import android.util.AttributeSet;

Expand Down Expand Up @@ -51,8 +52,9 @@ protected void onAttachedToWindow() {
}

if (previousSibling instanceof ReactEditText) {
MarkdownUtils.maybeInitializeRuntime(getContext().getAssets());
mMarkdownUtils = new MarkdownUtils();
AssetManager assetManager = getContext().getAssets();
MarkdownUtils.maybeInitializeRuntime(assetManager);
mMarkdownUtils = new MarkdownUtils(assetManager);
mMarkdownUtils.setMarkdownStyle(mMarkdownStyle);
mReactEditText = (ReactEditText) previousSibling;
mTextWatcher = new MarkdownTextWatcher(mMarkdownUtils);
Expand Down
11 changes: 9 additions & 2 deletions android/src/main/java/com/expensify/livemarkdown/MarkdownUtils.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@

import androidx.annotation.NonNull;

import com.facebook.infer.annotation.Assertions;
import com.facebook.infer.annotation.ThreadConfined;
import com.facebook.react.bridge.UiThreadUtil;
import com.facebook.react.views.text.CustomLineHeightSpan;
Expand Down Expand Up @@ -56,6 +57,12 @@ private static String parseMarkdown(String input) {

private static native String nativeParseMarkdown(String input);

public MarkdownUtils(@NonNull AssetManager assetManager) {
mAssetManager = assetManager;
}

private final @NonNull AssetManager mAssetManager;

private String mPrevInput;

private String mPrevOutput;
Expand Down Expand Up @@ -124,12 +131,12 @@ private void applyRange(SpannableStringBuilder ssb, String type, int start, int
setSpan(ssb, new MarkdownForegroundColorSpan(mMarkdownStyle.getLinkColor()), start, end);
break;
case "code":
setSpan(ssb, new MarkdownFontFamilySpan(mMarkdownStyle.getCodeFontFamily()), start, end);
setSpan(ssb, new MarkdownFontFamilySpan(mMarkdownStyle.getCodeFontFamily(), mAssetManager), start, end);
setSpan(ssb, new MarkdownForegroundColorSpan(mMarkdownStyle.getCodeColor()), start, end);
setSpan(ssb, new MarkdownBackgroundColorSpan(mMarkdownStyle.getCodeBackgroundColor()), start, end);
break;
case "pre":
setSpan(ssb, new MarkdownFontFamilySpan(mMarkdownStyle.getPreFontFamily()), start, end);
setSpan(ssb, new MarkdownFontFamilySpan(mMarkdownStyle.getPreFontFamily(), mAssetManager), start, end);
setSpan(ssb, new MarkdownForegroundColorSpan(mMarkdownStyle.getPreColor()), start, end);
setSpan(ssb, new MarkdownBackgroundColorSpan(mMarkdownStyle.getPreBackgroundColor()), start, end);
break;
Expand Down
Loading