Merge branch 'main' into multiple-blockquotes-android

.eslintignore

@@ -0,0 +1,2 @@
+**/node_modules/*
+parser/out.js

.eslintrc.js

@@ -0,0 +1,66 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: true,
+    tsconfigRootDir: __dirname,
+  },
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+    'plugin:import/typescript',
+    'plugin:prettier/recommended',
+  ],
+  plugins: [
+    'react',
+    'react-native',
+    'import',
+    '@typescript-eslint',
+    'eslint-plugin-tsdoc',
+  ],
+  settings: {
+    'import/resolver': {
+      alias: [['react-native-markdown-text-input', './src/index.tsx']],
+    },
+  },
+  root: true,
+  rules: {
+    'prettier/prettier': [
+      'error',
+      {
+        quoteProps: 'consistent',
+        singleQuote: true,
+        tabWidth: 2,
+        trailingComma: 'es5',
+        useTabs: false,
+      },
+    ],
+    'curly': 'error',
+    'import/no-unresolved': 'error',
+    'import/consistent-type-specifier-style': ['error', 'prefer-top-level'],
+    'react/jsx-uses-vars': 'error',
+    'react/jsx-uses-react': 'error',
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': 'off', // TODO consider enabling this (currently it reports styles defined at the bottom of the file)
+    '@typescript-eslint/ban-ts-comment': [
+      'error',
+      {
+        'ts-ignore': 'allow-with-description',
+        'ts-expect-error': 'allow-with-description',
+      },
+    ],
+    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+    '@typescript-eslint/no-var-requires': 'warn',
+    'eqeqeq': 'error',
+    'no-unreachable': 'error',
+    '@typescript-eslint/consistent-type-imports': [
+      'error',
+      { prefer: 'type-imports' },
+    ],
+    '@typescript-eslint/consistent-type-exports': [
+      'error',
+      { fixMixedExportsWithInlineTypeSpecifier: false },
+    ],
+    'tsdoc/syntax': 'error',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+  },
+};

WebExample/tsconfig.json

@@ -1,6 +1,8 @@
 {
-  "extends": "expo/tsconfig.base",
+  "extends": ["../tsconfig.json", "expo/tsconfig.base"],
   "compilerOptions": {
     "strict": true
-  }
+  },
+  "include": ["App.tsx"],
+  "exclude": ["node_modules"]
 }

android/src/main/java/com/markdowntextinput/MarkdownStyle.java

@@ -0,0 +1,117 @@
+package com.markdowntextinput;
+
+import android.content.Context;
+
+import androidx.annotation.NonNull;
+
+import com.facebook.react.bridge.ColorPropConverter;
+import com.facebook.react.bridge.Dynamic;
+import com.facebook.react.bridge.JSApplicationCausedNativeException;
+import com.facebook.react.bridge.ReadableMap;
+
+import java.util.Objects;
+
+public class MarkdownStyle {
+  private final int mSyntaxColor;
+  private final int mLinkColor;
+  private final float mH1FontSize;
+  private final int mQuoteBorderColor;
+  private final float mQuoteBorderWidth;
+  private final float mQuoteMarginLeft;
+  private final float mQuotePaddingLeft;
+  private final int mCodeColor;
+  private final int mCodeBackgroundColor;
+  private final int mPreColor;
+  private final int mPreBackgroundColor;
+  private final int mMentionHereBackgroundColor;
+  private final int mMentionUserBackgroundColor;
+
+  public MarkdownStyle(@NonNull ReadableMap map, @NonNull Context context) {
+    mSyntaxColor = parseColor(map, "syntax", "color", context);
+    mLinkColor = parseColor(map, "link", "color", context);
+    mH1FontSize = parseFloat(map, "h1", "fontSize");
+    mQuoteBorderColor = parseColor(map, "quote", "borderColor", context);
+    mQuoteBorderWidth = parseFloat(map, "quote", "borderWidth");
+    mQuoteMarginLeft = parseFloat(map, "quote", "marginLeft");
+    mQuotePaddingLeft = parseFloat(map, "quote", "paddingLeft");
+    mCodeColor = parseColor(map, "code", "color", context);
+    mCodeBackgroundColor = parseColor(map, "code", "backgroundColor", context);
+    mPreColor = parseColor(map, "pre", "color", context);
+    mPreBackgroundColor = parseColor(map, "pre", "backgroundColor", context);
+    mMentionHereBackgroundColor = parseColor(map, "mentionHere", "backgroundColor", context);
+    mMentionUserBackgroundColor = parseColor(map, "mentionUser", "backgroundColor", context);
+  }
+
+  private static int parseColor(@NonNull ReadableMap map, @NonNull String key, @NonNull String prop, @NonNull Context context) {
+    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.");
+    }
+  }
+
+  private static float parseFloat(@NonNull ReadableMap map, @NonNull String key, @NonNull String prop) {
+    ReadableMap style = map.getMap(key);
+    Objects.requireNonNull(style);
+    double value = style.getDouble(prop);
+    return (float) value;
+  }
+
+  public int getSyntaxColor() {
+    return mSyntaxColor;
+  }
+
+  public int getLinkColor() {
+    return mLinkColor;
+  }
+
+  public float getH1FontSize() {
+    return mH1FontSize;
+  }
+
+  public int getQuoteBorderColor() {
+    return mQuoteBorderColor;
+  }
+
+  public float getQuoteBorderWidth() {
+    return mQuoteBorderWidth;
+  }
+
+  public float getQuoteMarginLeft() {
+    return mQuoteMarginLeft;
+  }
+
+  public float getQuotePaddingLeft() {
+    return mQuotePaddingLeft;
+  }
+
+  public int getCodeColor() {
+    return mCodeColor;
+  }
+
+  public int getCodeBackgroundColor() {
+    return mCodeBackgroundColor;
+  }
+
+  public int getPreColor() {
+    return mPreColor;
+  }
+
+  public int getPreBackgroundColor() {
+    return mPreBackgroundColor;
+  }
+
+  public int getMentionHereBackgroundColor() {
+    return mMentionHereBackgroundColor;
+  }
+
+  public int getMentionUserBackgroundColor() {
+    return mMentionUserBackgroundColor;
+  }
+}

android/src/main/java/com/markdowntextinput/MarkdownTextInputView.java

@@ -26,6 +26,10 @@ public MarkdownTextInputView(Context context, @Nullable AttributeSet attrs, int
     super(context, attrs, defStyleAttr);
   }
 
+  private MarkdownStyle mMarkdownStyle;
+
+  private MarkdownUtils mMarkdownUtils;
+
   private ReactEditText mReactEditText;
 
   private TextWatcher mTextWatcher;
@@ -48,8 +52,10 @@ protected void onAttachedToWindow() {
 
     if (previousSibling instanceof ReactEditText) {
       MarkdownUtils.maybeInitializeRuntime(getContext().getAssets());
+      mMarkdownUtils = new MarkdownUtils();
+      mMarkdownUtils.setMarkdownStyle(mMarkdownStyle);
       mReactEditText = (ReactEditText) previousSibling;
-      mTextWatcher = new MarkdownTextWatcher();
+      mTextWatcher = new MarkdownTextWatcher(mMarkdownUtils);
       mReactEditText.addTextChangedListener(mTextWatcher);
     }
   }
@@ -61,6 +67,18 @@ protected void onDetachedFromWindow() {
       mReactEditText.removeTextChangedListener(mTextWatcher);
       mReactEditText = null;
       mTextWatcher = null;
+      mMarkdownUtils = null;
+      mMarkdownStyle = null;
+    }
+  }
+
+  protected void setMarkdownStyle(MarkdownStyle markdownStyle) {
+    mMarkdownStyle = markdownStyle;
+    if (mMarkdownUtils != null) {
+      mMarkdownUtils.setMarkdownStyle(mMarkdownStyle);
+    }
+    if (mReactEditText != null) {
+      mReactEditText.setText(mReactEditText.getText()); // trigger update
     }
   }
 }

android/src/main/java/com/markdowntextinput/MarkdownTextInputViewManager.java

@@ -1,7 +1,11 @@
 package com.markdowntextinput;
 
+import androidx.annotation.NonNull;
+
+import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.module.annotations.ReactModule;
 import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.annotations.ReactProp;
 
 @ReactModule(name = MarkdownTextInputViewManager.NAME)
 public class MarkdownTextInputViewManager extends MarkdownTextInputViewManagerSpec<MarkdownTextInputView> {
@@ -17,4 +21,11 @@ public String getName() {
   public MarkdownTextInputView createViewInstance(ThemedReactContext context) {
     return new MarkdownTextInputView(context);
   }
+
+  @Override
+  @ReactProp(name = "markdownStyle")
+  public void setMarkdownStyle(@NonNull MarkdownTextInputView view, @NonNull ReadableMap value) {
+    MarkdownStyle markdownStyle = new MarkdownStyle(value, view.getContext());
+    view.setMarkdownStyle(markdownStyle);
+  }
 }

android/src/main/java/com/markdowntextinput/MarkdownTextWatcher.java

@@ -4,8 +4,14 @@
 import android.text.SpannableStringBuilder;
 import android.text.TextWatcher;
 
+import androidx.annotation.NonNull;
+
 public class MarkdownTextWatcher implements TextWatcher {
-  private final MarkdownUtils mMarkdownUtils = new MarkdownUtils();
+  private final MarkdownUtils mMarkdownUtils;
+
+  public MarkdownTextWatcher(@NonNull MarkdownUtils markdownUtils) {
+    mMarkdownUtils = markdownUtils;
+  }
 
   @Override
   public void beforeTextChanged(CharSequence s, int start, int count, int after) {