react-native-markdown-native 1.0.0

package/android/src/main/java/com/markdownnative/MarkdownView.java

@@ -0,0 +1,516 @@
+package com.markdownnative;
+
+import android.content.Context;
+import android.graphics.Color;
+import android.graphics.Typeface;
+import android.text.method.ArrowKeyMovementMethod;
+import android.text.method.LinkMovementMethod;
+import android.text.style.ForegroundColorSpan;
+import android.widget.TextView;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.uimanager.PixelUtil;
+import com.facebook.react.uimanager.events.RCTEventEmitter;
+
+import android.text.Layout;
+import android.text.Spannable;
+import android.text.style.ClickableSpan;
+import android.view.MotionEvent;
+import android.graphics.PorterDuff;
+import android.graphics.drawable.Drawable;
+import android.os.Build;
+
+import io.noties.markwon.Markwon;
+import io.noties.markwon.MarkwonSpansFactory;
+import io.noties.markwon.core.MarkwonTheme;
+import io.noties.markwon.html.HtmlPlugin;
+import com.facebook.react.views.text.ReactFontManager;
+
+public class MarkdownView extends TextView {
+
+    private Markwon markwon;
+    private String markdownText = "";
+    private Context context;
+    
+    // Styling props
+    private int linkColor = Color.parseColor("#0066CC");
+    private float lineSpacing = 0f;
+    private float paragraphSpacing = 0f;
+    private float bulletIndent = 0f;
+    private float listLeftInset = 0f;
+    private float listSpacingBefore = 0f;
+    private float listSpacingAfter = 0f;
+    
+    // Rules-based styling system
+    private String markdownRulesJson = "";
+    private org.json.JSONObject parsedRules = null;
+
+    public MarkdownView(Context context) {
+        super(context);
+        this.context = context;
+        this.setTextIsSelectable(true);
+        this.setFocusable(true);
+        this.setFocusableInTouchMode(true);
+        rebuildMarkwon();
+    }
+    
+    private void rebuildMarkwon() {
+        // Get values from rules if available, otherwise use defaults
+        final int finalBulletIndent = parsedRules != null ? 
+            (int) PixelUtil.toPixelFromDIP(getRuleFloatValue("listItem", "bulletIndent", bulletIndent > 0 ? bulletIndent : 16f)) :
+            bulletIndent > 0 ? (int) PixelUtil.toPixelFromDIP(bulletIndent) : (int) PixelUtil.toPixelFromDIP(16);
+            
+        final int finalListLeftInset = parsedRules != null ?
+            (int) PixelUtil.toPixelFromDIP(getRuleFloatValue("listItem", "listLeftInset", listLeftInset)) :
+            (int) PixelUtil.toPixelFromDIP(listLeftInset);
+            
+        final int finalLinkColor = parsedRules != null ?
+            getRuleColorValue("link", "color", linkColor) :
+            linkColor;
+        
+        // Get heading size multipliers from rules or use defaults
+        final float[] headingMultipliers = new float[6];
+        for (int i = 0; i < 6; i++) {
+            String headingType = "heading" + (i + 1);
+            float defaultSize;
+            switch (i) {
+                case 0: defaultSize = 32f; break;  // H1
+                case 1: defaultSize = 28f; break;  // H2
+                case 2: defaultSize = 24f; break;  // H3
+                case 3: defaultSize = 20f; break;  // H4
+                case 4: defaultSize = 18f; break;  // H5
+                case 5: defaultSize = 16f; break;  // H6
+                default: defaultSize = 16f;
+            }
+            
+            if (parsedRules != null) {
+                float ruleSize = getRuleFloatValue(headingType, "fontSize", defaultSize);
+                // Convert to multiplier based on base font size (16)
+                headingMultipliers[i] = ruleSize / 16f;
+            } else {
+                // Use default multipliers
+                headingMultipliers[i] = defaultSize / 16f;
+            }
+        }
+        
+        this.markwon = Markwon.builder(context)
+            .usePlugin(HtmlPlugin.create())
+            .usePlugin(new io.noties.markwon.AbstractMarkwonPlugin() {
+                 @Override
+                 public void configureTheme(@androidx.annotation.NonNull MarkwonTheme.Builder builder) {
+                     builder
+                       .headingBreakHeight(0)
+                       .bulletWidth(finalBulletIndent)
+                       .listItemColor(markdownColor)
+                       .linkColor(finalLinkColor)
+                       .headingTextSizeMultipliers(headingMultipliers);
+                 }
+            })
+            .build();
+    }
+
+
+    private int lastDispatchedHeight = -1;
+
+    @Override
+    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
+        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
+        
+        android.text.Layout layout = getLayout();
+        if (layout != null) {
+            int textHeight = layout.getHeight() + getPaddingTop() + getPaddingBottom();
+            int width = getMeasuredWidth();
+            
+            if (width > 0 && textHeight > 0 && Math.abs(textHeight - lastDispatchedHeight) > 1) {
+                lastDispatchedHeight = textHeight;
+                
+                WritableMap map = Arguments.createMap();
+                map.putDouble("width", PixelUtil.toDIPFromPixel(width));
+                map.putDouble("height", PixelUtil.toDIPFromPixel(textHeight));
+                
+                Context ctx = getContext();
+                if (ctx instanceof ReactContext) {
+                    ((ReactContext) ctx)
+                        .getJSModule(RCTEventEmitter.class)
+                        .receiveEvent(getId(), "onNativeSizeChange", map);
+                }
+            }
+        }
+    }
+
+    @Override
+    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
+        super.onLayout(changed, left, top, right, bottom);
+    }
+
+
+    private boolean isInLongPress = false;
+
+    @Override
+    public boolean onTouchEvent(MotionEvent event) {
+        // If text is selectable, we need to handle touch events carefully
+        // We only want to block parent scrolling when:
+        // 1. User is long-pressing (text selection is starting)
+        // 2. User is dragging selection handles (text is already selected)
+        // Otherwise, allow normal scrolling
+        
+        if (isTextSelectable()) {
+            int action = event.getAction();
+            
+            switch (action) {
+                case MotionEvent.ACTION_DOWN:
+                    // Don't block on ACTION_DOWN - allow scrolling to work normally
+                    // We'll only block if long press is detected or text is selected
+                    isInLongPress = false;
+                    break;
+                    
+                case MotionEvent.ACTION_MOVE:
+                    // Only block scrolling if:
+                    // - We're in a long press (selection menu is showing)
+                    // - OR text is currently selected (user might be dragging handles)
+                    if (isInLongPress || hasTextSelection()) {
+                        if (getParent() != null) {
+                            getParent().requestDisallowInterceptTouchEvent(true);
+                        }
+                    }
+                    break;
+                    
+                case MotionEvent.ACTION_UP:
+                case MotionEvent.ACTION_CANCEL:
+                    // Always release on touch end
+                    isInLongPress = false;
+                    if (getParent() != null) {
+                        getParent().requestDisallowInterceptTouchEvent(false);
+                    }
+                    break;
+            }
+        }
+        
+        return super.onTouchEvent(event);
+    }
+    
+    /**
+     * Check if this TextView currently has selected text
+     */
+    private boolean hasTextSelection() {
+        return getSelectionStart() != getSelectionEnd();
+    }
+
+    @Override
+    public boolean performLongClick() {
+        // Mark that we're in a long press - this will prevent scrolling
+        // during the selection process
+        isInLongPress = true;
+        if (getParent() != null) {
+            getParent().requestDisallowInterceptTouchEvent(true);
+        }
+        return super.performLongClick();
+    }
+
+    public void setMarkdownText(String text) {
+        if (text == null) text = "";
+        if (this.markdownText.equals(text)) return;
+        this.markdownText = text;
+        renderMarkdown();
+    }
+
+    private void renderMarkdown() {
+        if (this.markdownText == null) return;
+        
+        try {
+            markwon.setMarkdown(this, this.markdownText);
+            if (lineSpacing > 0) {
+                this.setLineSpacing(PixelUtil.toPixelFromDIP(lineSpacing), 1.0f);
+            }
+        } catch (Exception e) {
+            this.setText(this.markdownText);
+        }
+        
+        if (isTextSelectable()) {
+             // Re-apply properties ensuring it captures touches
+             this.setTextIsSelectable(true);
+             this.setFocusable(true);
+             this.setFocusableInTouchMode(true);
+             this.setClickable(true);
+             this.setLongClickable(true);
+             this.setMovementMethod(MarkdownMovementMethod.getInstance());
+        }
+        requestLayout();
+    }
+    
+    private int markdownColor = Integer.MIN_VALUE;
+
+    public void setMarkdownColor(String colorStr) {
+        try {
+            int color = (colorStr != null && !colorStr.isEmpty()) ? Color.parseColor(colorStr) : Color.BLACK;
+             if (this.markdownColor == color) return;
+             this.markdownColor = color;
+             this.setTextColor(color);
+             rebuildMarkwon();
+             renderMarkdown();
+        } catch (Exception e) {
+            this.setTextColor(Color.BLACK);
+        }
+    }
+    
+    private float markdownFontSize = Float.NaN;
+
+    public void setMarkdownFontSize(float size) {
+        if (size == this.markdownFontSize) return;
+        this.markdownFontSize = size;
+        this.setTextSize(size);
+        renderMarkdown();
+    }
+    
+    public void setMarkdownFontFamily(String fontFamily) {
+        if (fontFamily != null && !fontFamily.isEmpty()) {
+            try {
+                Typeface tf = ReactFontManager.getInstance().getTypeface(fontFamily, Typeface.NORMAL, this.context.getAssets());
+                if (tf == null) {
+                    tf = Typeface.create(fontFamily, Typeface.NORMAL);
+                }
+                this.setTypeface(tf);
+                this.setTypeface(tf);
+                
+                rebuildMarkwon();
+                renderMarkdown();
+            } catch (Exception e) {
+                // Keep default
+            }
+        }
+    }
+
+    public void setMarkdownSelectionColor(String color) {
+        try {
+            if (color != null && !color.isEmpty()) {
+                int parsedColor = Color.parseColor(color);
+                this.setHighlightColor(parsedColor);
+                
+                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+                     Drawable left = getTextSelectHandleLeft();
+                     if (left != null) {
+                         left.mutate().setColorFilter(parsedColor, PorterDuff.Mode.SRC_IN);
+                         setTextSelectHandleLeft(left);
+                     }
+                     
+                     Drawable right = getTextSelectHandleRight();
+                     if (right != null) {
+                         right.mutate().setColorFilter(parsedColor, PorterDuff.Mode.SRC_IN);
+                         setTextSelectHandleRight(right);
+                     }
+                     
+                     Drawable handle = getTextSelectHandle();
+                     if (handle != null) {
+                         handle.mutate().setColorFilter(parsedColor, PorterDuff.Mode.SRC_IN);
+                         setTextSelectHandle(handle);
+                     }
+                }
+            }
+        } catch (Exception e) {
+             // Ignore
+        }
+    }
+
+    public void setMarkdownSelectable(boolean selectable) {
+        this.setTextIsSelectable(selectable);
+        this.setFocusable(selectable);
+        this.setFocusableInTouchMode(selectable);
+        
+        // We do NOT set the movement method here directly anymore if we rely on renderMarkdown
+        // determining it, OR we set it here but ensure renderMarkdown respects it.
+        // Actually, renderMarkdown re-applies it if isTextSelectable() is true.
+        // So just calling requestLayout() or letting the next render pass handle it?
+        // Better:
+        if (selectable) {
+             this.setMovementMethod(MarkdownMovementMethod.getInstance());
+        } else {
+             this.setMovementMethod(LinkMovementMethod.getInstance());
+        }
+    }
+
+    public void setMarkdownScrollEnabled(boolean scrollEnabled) {
+         this.setVerticalScrollBarEnabled(scrollEnabled);
+    }
+
+    // New customization methods
+    public void setMarkdownLinkColor(String color) {
+        try {
+            if (color != null && !color.isEmpty()) {
+                this.linkColor = Color.parseColor(color);
+                rebuildMarkwon();
+                renderMarkdown();
+            }
+        } catch (Exception e) {
+            // Ignore
+        }
+    }
+
+    public void setMarkdownLineSpacing(float spacing) {
+        this.lineSpacing = spacing;
+        if (spacing > 0) {
+            this.setLineSpacing(PixelUtil.toPixelFromDIP(spacing), 1.0f);
+        } else {
+            this.setLineSpacing(0, 1.0f);
+        }
+    }
+
+    public void setMarkdownParagraphSpacing(float spacing) {
+        this.paragraphSpacing = spacing;
+    }
+
+    public void setMarkdownBulletIndent(float indent) {
+        this.bulletIndent = indent;
+        rebuildMarkwon();
+        renderMarkdown();
+    }
+
+    public void setMarkdownListLeftInset(float inset) {
+        this.listLeftInset = inset;
+    }
+
+    public void setMarkdownListSpacingBefore(float spacing) {
+        this.listSpacingBefore = spacing;
+    }
+
+    public void setMarkdownListSpacingAfter(float spacing) {
+        this.listSpacingAfter = spacing;
+    }
+
+    private static class MarkdownMovementMethod extends ArrowKeyMovementMethod {
+        private static MarkdownMovementMethod instance;
+
+        public static android.text.method.MovementMethod getInstance() {
+            if (instance == null) {
+                instance = new MarkdownMovementMethod();
+            }
+            return instance;
+        }
+
+        @Override
+        public boolean onTouchEvent(android.widget.TextView widget, android.text.Spannable buffer, android.view.MotionEvent event) {
+            int action = event.getAction();
+
+            if (action == MotionEvent.ACTION_UP || action == MotionEvent.ACTION_DOWN) {
+                int x = (int) event.getX();
+                int y = (int) event.getY();
+
+                x -= widget.getTotalPaddingLeft();
+                y -= widget.getTotalPaddingTop();
+
+                x += widget.getScrollX();
+                y += widget.getScrollY();
+
+                Layout layout = widget.getLayout();
+                // Check if layout is null
+                if (layout == null) {
+                    return super.onTouchEvent(widget, buffer, event);
+                }
+
+                int line = layout.getLineForVertical(y);
+                
+                if (x < layout.getLineLeft(line) || x > layout.getLineRight(line)) {
+                     return super.onTouchEvent(widget, buffer, event);
+                }
+                
+                int off = layout.getOffsetForHorizontal(line, x);
+
+                ClickableSpan[] links = buffer.getSpans(off, off, ClickableSpan.class);
+
+                if (links.length != 0) {
+                    ClickableSpan link = links[0];
+                    
+                    int start = buffer.getSpanStart(link);
+                    int end = buffer.getSpanEnd(link);
+                    
+                    if (off >= start && off < end) {
+                        if (action == MotionEvent.ACTION_UP) {
+                            if (android.text.Selection.getSelectionStart(buffer) == android.text.Selection.getSelectionEnd(buffer)) {
+                                link.onClick(widget);
+                            }
+                            return true;
+                        } 
+                        else if (action == MotionEvent.ACTION_DOWN) {
+                             // We don't return true here for links, because we want to allow long press
+                             // for selection to still work even if the touch started on a link.
+                             // super.onTouchEvent() handles the long press check.
+                             return super.onTouchEvent(widget, buffer, event);
+                        }
+                    }
+                }
+            }
+            return super.onTouchEvent(widget, buffer, event);
+        }
+    }
+    
+    // MARK: - Rules Parsing and Application
+    
+    public void setMarkdownRulesJson(String rulesJson) {
+        if (rulesJson == null) rulesJson = "";
+        if (this.markdownRulesJson.equals(rulesJson)) return;
+        this.markdownRulesJson = rulesJson;
+        parseAndApplyRules();
+    }
+    
+    private void parseAndApplyRules() {
+        if (markdownRulesJson == null || markdownRulesJson.isEmpty()) {
+            parsedRules = null;
+            return;
+        }
+        
+        try {
+            parsedRules = new org.json.JSONObject(markdownRulesJson);
+            rebuildMarkwon();
+            renderMarkdown();
+        } catch (org.json.JSONException e) {
+            parsedRules = null;
+        }
+    }
+    
+    private int getRuleColorValue(String elementType, String key, int defaultValue) {
+        if (parsedRules == null) return defaultValue;
+        
+        try {
+            org.json.JSONObject element = parsedRules.optJSONObject(elementType);
+            if (element == null) return defaultValue;
+            
+            String colorStr = element.optString(key, null);
+            if (colorStr != null && !colorStr.isEmpty()) {
+                return Color.parseColor(colorStr);
+            }
+        } catch (Exception e) {
+            // Ignore parsing errors
+        }
+        
+        return defaultValue;
+    }
+    
+    private float getRuleFloatValue(String elementType, String key, float defaultValue) {
+        if (parsedRules == null) return defaultValue;
+        
+        try {
+            org.json.JSONObject element = parsedRules.optJSONObject(elementType);
+            if (element == null) return defaultValue;
+            
+            return (float) element.optDouble(key, defaultValue);
+        } catch (Exception e) {
+            return defaultValue;
+        }
+    }
+    
+    private int getRuleIntValue(String elementType, String key, int defaultValue) {
+        if (parsedRules == null) return defaultValue;
+        
+        try {
+            org.json.JSONObject element = parsedRules.optJSONObject(elementType);
+            if (element == null) return defaultValue;
+            
+            return element.optInt(key, defaultValue);
+        } catch (Exception e) {
+            return defaultValue;
+        }
+    }
+}
+
+

package/android/src/main/java/com/markdownnative/MarkdownViewManager.java

@@ -0,0 +1,107 @@
+package com.markdownnative;
+
+import com.facebook.react.common.MapBuilder;
+import com.facebook.react.uimanager.SimpleViewManager;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.annotations.ReactProp;
+import java.util.Map;
+
+public class MarkdownViewManager extends SimpleViewManager<MarkdownView> {
+
+    public static final String REACT_CLASS = "MarkdownView";
+
+    @Override
+    public String getName() {
+        return REACT_CLASS;
+    }
+
+    @Override
+    public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
+        return MapBuilder.<String, Object>builder()
+            .put("onNativeSizeChange", MapBuilder.of("registrationName", "onNativeSizeChange"))
+            .build();
+    }
+
+    @Override
+    protected MarkdownView createViewInstance(ThemedReactContext reactContext) {
+        return new MarkdownView(reactContext);
+    }
+
+    @ReactProp(name = "markdownText")
+    public void setMarkdownText(MarkdownView view, String text) {
+        view.setMarkdownText(text);
+    }
+    
+    @ReactProp(name = "markdownColor")
+    public void setMarkdownColor(MarkdownView view, String color) {
+        view.setMarkdownColor(color);
+    }
+    
+    @ReactProp(name = "markdownFontSize")
+    public void setMarkdownFontSize(MarkdownView view, float size) {
+        view.setMarkdownFontSize(size);
+    }
+    
+    @ReactProp(name = "markdownFontFamily")
+    public void setMarkdownFontFamily(MarkdownView view, String fontFamily) {
+        view.setMarkdownFontFamily(fontFamily);
+    }
+
+    @ReactProp(name = "markdownSelectionColor")
+    public void setMarkdownSelectionColor(MarkdownView view, String color) {
+        view.setMarkdownSelectionColor(color);
+    }
+
+    @ReactProp(name = "markdownSelectable")
+    public void setMarkdownSelectable(MarkdownView view, boolean selectable) {
+        view.setMarkdownSelectable(selectable);
+    }
+
+    @ReactProp(name = "markdownScrollEnabled")
+    public void setMarkdownScrollEnabled(MarkdownView view, boolean scrollEnabled) {
+        view.setMarkdownScrollEnabled(scrollEnabled);
+    }
+
+    // New customization props
+    @ReactProp(name = "markdownLinkColor")
+    public void setMarkdownLinkColor(MarkdownView view, String color) {
+        view.setMarkdownLinkColor(color);
+    }
+
+    @ReactProp(name = "markdownLineSpacing", defaultFloat = 0f)
+    public void setMarkdownLineSpacing(MarkdownView view, float spacing) {
+        view.setMarkdownLineSpacing(spacing);
+    }
+
+    @ReactProp(name = "markdownParagraphSpacing", defaultFloat = 0f)
+    public void setMarkdownParagraphSpacing(MarkdownView view, float spacing) {
+        view.setMarkdownParagraphSpacing(spacing);
+    }
+
+    @ReactProp(name = "markdownBulletIndent", defaultFloat = 0f)
+    public void setMarkdownBulletIndent(MarkdownView view, float indent) {
+        view.setMarkdownBulletIndent(indent);
+    }
+
+    @ReactProp(name = "markdownListLeftInset", defaultFloat = 0f)
+    public void setMarkdownListLeftInset(MarkdownView view, float inset) {
+        view.setMarkdownListLeftInset(inset);
+    }
+
+    @ReactProp(name = "markdownListSpacingBefore", defaultFloat = 0f)
+    public void setMarkdownListSpacingBefore(MarkdownView view, float spacing) {
+        view.setMarkdownListSpacingBefore(spacing);
+    }
+
+    @ReactProp(name = "markdownListSpacingAfter", defaultFloat = 0f)
+    public void setMarkdownListSpacingAfter(MarkdownView view, float spacing) {
+        view.setMarkdownListSpacingAfter(spacing);
+    }
+
+    // New rules-based styling system
+    @ReactProp(name = "markdownRulesJson")
+    public void setMarkdownRulesJson(MarkdownView view, String rulesJson) {
+        view.setMarkdownRulesJson(rulesJson);
+    }
+}
+