@expensify/react-native-live-markdown 0.1.3

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2024 Expensify, Inc.
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,139 @@
+<img src="./assets/hero-animation.gif" alt="@expensify/react-native-live-markdown" />
+
+## Features
+
+- ⚛️ Drop-in replacement for `<TextInput>` component
+- ⌨️ Live synchronous formatting on every keystroke
+- ⚡ Fully native experience (selection, spellcheck, autocomplete)
+- 🎨 Customizable styles
+- 🌐 Universal support (Android, iOS, web)
+- 🏗️ Supports New Architecture
+
+## Installation
+
+First, install the library from npm with the package manager of your choice:
+
+```sh
+yarn add @expensify/react-native-live-markdown
+npm install @expensify/react-native-live-markdown --save
+npx expo install @expensify/react-native-live-markdown
+```
+
+Then, install the iOS dependencies with CocoaPods:
+
+```sh
+cd ios && pod install
+```
+
+The library includes native code so you will need to re-build the native app.
+
+> [!NOTE]
+> The library does not support Expo Go, you will need to setup Expo Dev Client (see [here](https://docs.expo.dev/workflow/prebuild/)).
+
+## Usage
+
+```tsx
+import {MarkdownTextInput} from '@expensify/react-native-live-markdown';
+import React from 'react';
+
+export default function App() {
+  const [text, setText] = React.useState('Hello, *world*!');
+
+  return (
+    <MarkdownTextInput
+      value={text}
+      onChangeText={setText}
+    />
+  );
+}
+```
+
+## Styling
+
+`MarkdownTextInput` can be styled using `style` prop just like regular `TextInput` component.
+
+It is also possible to customize the styling of the formatted contents of `MarkdownTextInput` component. The style object supports all color representations from React Native including `PlatformColor` and `DynamicColorIOS` according to the [color reference](https://reactnative.dev/docs/colors). Currently, a limited set of styles is customizable but this is subject to change in the future.
+
+```tsx
+import type {MarkdownStyle} from '@expensify/react-native-live-markdown';
+
+const markdownStyle: MarkdownStyle = {
+  syntax: {
+    color: 'gray',
+  },
+  link: {
+    color: 'blue',
+  },
+  h1: {
+    fontSize: 25,
+  },
+  blockquote: {
+    borderColor: 'gray',
+    borderWidth: 6,
+    marginLeft: 6,
+    paddingLeft: 6,
+  },
+  code: {
+    fontFamily: 'monospace',
+    color: 'black',
+    backgroundColor: 'lightgray',
+  },
+  pre: {
+    fontFamily: 'monospace',
+    color: 'black',
+    backgroundColor: 'lightgray',
+  },
+  mentionHere: {
+    color: 'green',
+    backgroundColor: 'lime',
+  },
+  mentionUser: {
+    color: 'blue',
+    backgroundColor: 'cyan',
+  },
+};
+```
+
+The style object can be passed to multiple `MarkdownTextInput` components using `markdownStyle` prop:
+
+```tsx
+<MarkdownTextInput
+  value={text}
+  onChangeText={setText}
+  style={styles.input}
+  markdownStyle={markdownStyle}
+/>
+```
+
+> [!TIP]
+> We recommend to store the style object outside of a component body or memoize the style object with `React.useMemo`.
+
+## Markdown flavors support
+
+Currently, `react-native-live-markdown` supports only [ExpensiMark](https://github.com/Expensify/expensify-common/blob/main/lib/ExpensiMark.js) flavor. We are working on CommonMark support as well as possibility to use other Markdown parsers.
+
+## API reference
+
+`MarkdownTextInput` inherits all props of React Native's `TextInput` component as well as introduces the following properties:
+
+| Prop            | Type            | Default     | Note                                                                                                                                                                                                                   |
+| --------------- | --------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `markdownStyle` | `MarkdownStyle` | `undefined` | Adds custom styling to Markdown text. The provided value is merged with default style object. See [Styling](https://github.com/expensify/react-native-live-markdown/blob/main/README.md#styling) for more information. |
+
+## Compatibility
+
+`react-native-live-markdown` requires React Native 0.71 or newer.
+
+## License
+
+MIT
+
+---
+
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: light)" srcset="./assets/signature-light.png" />
+    <source media="(prefers-color-scheme: dark)" srcset="./assets/signature-dark.png" />
+    <img alt="Brought to you by Software Mansion + Expensify" src="./assets/signature-light.png" width="600" />
+  </picture>
+</p>

package/RNLiveMarkdown.podspec

@@ -0,0 +1,44 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
+
+Pod::Spec.new do |s|
+  s.name         = "RNLiveMarkdown"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => "11.0" }
+  s.source       = { :git => "https://github.com/expensify/react-native-live-markdown.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm}"
+
+  s.resources = "parser/react-native-live-markdown-parser.js"
+
+  # Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0.
+  # See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79.
+  if respond_to?(:install_modules_dependencies, true)
+    install_modules_dependencies(s)
+  else
+  s.dependency "React-Core"
+
+  # Don't install the dependencies when we run `pod install` in the old architecture.
+  if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
+    s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
+    s.pod_target_xcconfig    = {
+        "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
+        "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
+        "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
+    }
+    s.dependency "React-RCTFabric"
+    s.dependency "React-Codegen"
+    s.dependency "RCT-Folly"
+    s.dependency "RCTRequired"
+    s.dependency "RCTTypeSafety"
+    s.dependency "ReactCommon/turbomodule/core"
+   end
+  end
+end

package/android/build.gradle

@@ -0,0 +1,143 @@
+buildscript {
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:7.2.1"
+  }
+}
+
+def isNewArchitectureEnabled() {
+  return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
+}
+
+apply plugin: "com.android.library"
+
+if (isNewArchitectureEnabled()) {
+  apply plugin: "com.facebook.react"
+}
+
+def getExtOrDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties["LiveMarkdown_" + name]
+}
+
+def getExtOrIntegerDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["LiveMarkdown_" + name]).toInteger()
+}
+
+def supportsNamespace() {
+  def parsed = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION.tokenize('.')
+  def major = parsed[0].toInteger()
+  def minor = parsed[1].toInteger()
+
+  // Namespace support was added in 7.3.0
+  return (major == 7 && minor >= 3) || major >= 8
+}
+
+android {
+  if (supportsNamespace()) {
+    namespace "com.expensify.livemarkdown"
+
+    sourceSets {
+      main {
+        manifest.srcFile "src/main/AndroidManifestNew.xml"
+      }
+    }
+  }
+
+  compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrIntegerDefault("minSdkVersion")
+    targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
+    buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
+    externalNativeBuild {
+      cmake {
+        arguments "-DANDROID_STL=c++_shared", "-DANDROID_TOOLCHAIN=clang"
+      }
+    }
+  }
+
+  buildFeatures {
+    buildConfig true
+    prefab true
+  }
+
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lintOptions {
+    disable "GradleCompatible"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+
+  sourceSets {
+    main {
+      if (isNewArchitectureEnabled()) {
+        java.srcDirs += [
+          "src/newarch",
+          // This is needed to build Kotlin project with NewArch enabled
+          "${project.buildDir}/generated/source/codegen/java"
+        ]
+      } else {
+        java.srcDirs += ["src/oldarch"]
+      }
+    }
+  }
+
+  externalNativeBuild {
+    cmake {
+      path file('src/main/cpp/CMakeLists.txt')
+      version '3.22.1'
+    }
+  }
+
+  packagingOptions {
+    doNotStrip '**/**/*.so'
+    excludes = [
+      "META-INF",
+      "META-INF/**",
+      "**/libc++_shared.so",
+      "**/libfbjni.so",
+      "**/libjsi.so",
+      "**/libreactnativejni.so",
+    ]
+  }
+}
+
+repositories {
+  mavenCentral()
+  google()
+}
+
+
+dependencies {
+  implementation "com.facebook.react:react-android" // version substituted by RNGP
+  implementation "com.facebook.react:hermes-android" // version substituted by RNGP
+}
+
+if (isNewArchitectureEnabled()) {
+  react {
+    jsRootDir = file("../src/")
+    libraryName = "LiveMarkdown"
+    codegenJavaPackageName = "com.expensify.livemarkdown"
+  }
+}
+
+task copyJS(type: Copy) {
+  from '../parser/react-native-live-markdown-parser.js'
+  into 'src/main/assets'
+}
+
+tasks.preBuild {
+  dependsOn copyJS
+}

package/android/gradle.properties

@@ -0,0 +1,5 @@
+LiveMarkdown_kotlinVersion=1.7.0
+LiveMarkdown_minSdkVersion=21
+LiveMarkdown_targetSdkVersion=31
+LiveMarkdown_compileSdkVersion=31
+LiveMarkdown_ndkversion=21.4.7075529

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,3 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+          package="com.expensify.livemarkdown">
+</manifest>

package/android/src/main/AndroidManifestNew.xml

@@ -0,0 +1,2 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+</manifest>

package/android/src/main/cpp/CMakeLists.txt

@@ -0,0 +1,23 @@
+project("livemarkdown")
+
+cmake_minimum_required(VERSION 3.13)
+
+set(CMAKE_VERBOSE_MAKEFILE on)
+
+add_compile_options(-fvisibility=hidden -fexceptions -frtti)
+
+file(GLOB livemarkdown_SRC CONFIGURE_DEPENDS ${CMAKE_CURRENT_SOURCE_DIR}/*.cpp)
+
+add_library(${CMAKE_PROJECT_NAME} SHARED ${livemarkdown_SRC})
+
+target_include_directories(${CMAKE_PROJECT_NAME} PRIVATE ${CMAKE_CURRENT_SOURCE_DIR})
+
+find_package(fbjni REQUIRED CONFIG)
+find_package(ReactAndroid REQUIRED CONFIG)
+find_package(hermes-engine REQUIRED CONFIG)
+
+target_link_libraries(${CMAKE_PROJECT_NAME}
+        fbjni::fbjni
+        ReactAndroid::jsi
+        ReactAndroid::reactnativejni
+        hermes-engine::libhermes)

package/android/src/main/cpp/MarkdownUtils.cpp

@@ -0,0 +1,44 @@
+#include "MarkdownUtils.h"
+
+#include <fbjni/fbjni.h>
+#include <hermes/hermes.h>
+
+using namespace facebook;
+
+namespace expensify {
+namespace livemarkdown {
+  std::shared_ptr<jsi::Runtime> MarkdownUtils::runtime_;
+
+  void MarkdownUtils::nativeInitializeRuntime(
+      jni::alias_ref<jhybridobject> jThis,
+      jni::alias_ref<jni::JString> code) {
+    assert(runtime_ == nullptr && "Markdown runtime is already initialized");
+    runtime_ = facebook::hermes::makeHermesRuntime();
+    auto codeBuffer = std::make_shared<const jsi::StringBuffer>(code->toStdString());
+    runtime_->evaluateJavaScript(codeBuffer, "nativeInitializeRuntime");
+  }
+
+  jni::local_ref<jni::JString> MarkdownUtils::nativeParseMarkdown(
+      jni::alias_ref<jhybridobject> jThis,
+      jni::alias_ref<jni::JString> input) {
+    jsi::Runtime &rt = *runtime_;
+    auto func = rt.global().getPropertyAsFunction(rt, "parseExpensiMarkToRanges");
+    auto arg = input->toStdString();
+    jsi::Value result;
+    try {
+      result = func.call(rt, arg);
+    } catch (jsi::JSError e) {
+      result = jsi::Array(rt, 0);
+    }
+    auto json = rt.global().getPropertyAsObject(rt, "JSON").getPropertyAsFunction(rt, "stringify").call(rt, result).asString(rt).utf8(rt);
+    return jni::make_jstring(json);
+  }
+
+  void MarkdownUtils::registerNatives() {
+    registerHybrid({
+        makeNativeMethod("nativeInitializeRuntime", MarkdownUtils::nativeInitializeRuntime),
+        makeNativeMethod("nativeParseMarkdown", MarkdownUtils::nativeParseMarkdown)});
+  }
+
+} // namespace livemarkdown
+} // namespace expensify

package/android/src/main/cpp/MarkdownUtils.h

@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <fbjni/fbjni.h>
+#include <jsi/jsi.h>
+
+using namespace facebook;
+
+namespace expensify {
+namespace livemarkdown {
+
+  class MarkdownUtils : public jni::HybridClass<MarkdownUtils>,
+                        public jsi::HostObject {
+  public:
+    static constexpr auto kJavaDescriptor =
+        "Lcom/expensify/livemarkdown/MarkdownUtils;";
+
+    static void nativeInitializeRuntime(
+        jni::alias_ref<jhybridobject> jThis,
+        jni::alias_ref<jni::JString> code);
+
+    static jni::local_ref<jni::JString> nativeParseMarkdown(
+        jni::alias_ref<jhybridobject> jThis,
+        jni::alias_ref<jni::JString> input);
+
+    static void registerNatives();
+
+  private:
+    static std::shared_ptr<jsi::Runtime> runtime_;
+
+    friend HybridBase;
+  };
+
+} // namespace livemarkdown
+} // namespace expensify

package/android/src/main/cpp/OnLoad.cpp

@@ -0,0 +1,8 @@
+#include <fbjni/fbjni.h>
+
+#include "MarkdownUtils.h"
+
+JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void *reserved) {
+    return facebook::jni::initialize(
+            vm, [] { expensify::livemarkdown::MarkdownUtils::registerNatives(); });
+}

package/android/src/main/java/com/expensify/livemarkdown/LiveMarkdownPackage.java

@@ -0,0 +1,24 @@
+package com.expensify.livemarkdown;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+public class LiveMarkdownPackage implements ReactPackage {
+  @Override
+  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+    List<ViewManager> viewManagers = new ArrayList<>();
+    viewManagers.add(new MarkdownTextInputDecoratorViewManager());
+    return viewManagers;
+  }
+
+  @Override
+  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
+    return Collections.emptyList();
+  }
+}

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

@@ -0,0 +1,11 @@
+package com.expensify.livemarkdown;
+
+import android.text.style.BackgroundColorSpan;
+
+import androidx.annotation.ColorInt;
+
+public class MarkdownBackgroundColorSpan extends BackgroundColorSpan implements MarkdownSpan {
+  public MarkdownBackgroundColorSpan(@ColorInt int color) {
+    super(color);
+  }
+}

package/android/src/main/java/com/expensify/livemarkdown/MarkdownBlockquoteSpan.java

@@ -0,0 +1,47 @@
+package com.expensify.livemarkdown;
+
+import android.graphics.Canvas;
+import android.graphics.Paint;
+import android.text.Layout;
+import android.text.style.LeadingMarginSpan;
+
+import androidx.annotation.ColorInt;
+
+import com.facebook.react.uimanager.PixelUtil;
+
+public class MarkdownBlockquoteSpan implements MarkdownSpan, LeadingMarginSpan {
+  @ColorInt
+  private final int borderColor;
+  private final float borderWidth;
+  private final float marginLeft;
+  private final float paddingLeft;
+
+  public MarkdownBlockquoteSpan(@ColorInt int borderColor, float borderWidth, float marginLeft, float paddingLeft) {
+    this.borderColor = borderColor;
+    this.borderWidth = PixelUtil.toPixelFromDIP(borderWidth);
+    this.marginLeft = PixelUtil.toPixelFromDIP(marginLeft);
+    this.paddingLeft = PixelUtil.toPixelFromDIP(paddingLeft);
+  }
+
+  @Override
+  public int getLeadingMargin(boolean first) {
+    return (int) (marginLeft + borderWidth + paddingLeft);
+  }
+
+  @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) {
+    Paint.Style originalStyle = p.getStyle();
+    int originalColor = p.getColor();
+
+    p.setStyle(Paint.Style.FILL);
+    p.setColor(borderColor);
+
+    float left = x + dir * marginLeft;
+    float right = x + dir * (marginLeft + borderWidth);
+    c.drawRect(left, top, right, bottom, p);
+
+    p.setStyle(originalStyle);
+    p.setColor(originalColor);
+  }
+}

package/android/src/main/java/com/expensify/livemarkdown/MarkdownBoldSpan.java

@@ -0,0 +1,10 @@
+package com.expensify.livemarkdown;
+
+import android.graphics.Typeface;
+import android.text.style.StyleSpan;
+
+public class MarkdownBoldSpan extends StyleSpan implements MarkdownSpan {
+  public MarkdownBoldSpan() {
+    super(Typeface.BOLD);
+  }
+}

package/android/src/main/java/com/expensify/livemarkdown/MarkdownFontFamilySpan.java

@@ -0,0 +1,39 @@
+package com.expensify.livemarkdown;
+
+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;
+
+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);
+  }
+}

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

@@ -0,0 +1,9 @@
+package com.expensify.livemarkdown;
+
+import android.text.style.AbsoluteSizeSpan;
+
+public class MarkdownFontSizeSpan extends AbsoluteSizeSpan implements MarkdownSpan {
+  public MarkdownFontSizeSpan(float fontSize) {
+    super((int) fontSize, true);
+  }
+}

package/android/src/main/java/com/expensify/livemarkdown/MarkdownForegroundColorSpan.java

@@ -0,0 +1,11 @@
+package com.expensify.livemarkdown;
+
+import android.text.style.ForegroundColorSpan;
+
+import androidx.annotation.ColorInt;
+
+public class MarkdownForegroundColorSpan extends ForegroundColorSpan implements MarkdownSpan {
+  public MarkdownForegroundColorSpan(@ColorInt int color) {
+    super(color);
+  }
+}

package/android/src/main/java/com/expensify/livemarkdown/MarkdownItalicSpan.java

@@ -0,0 +1,10 @@
+package com.expensify.livemarkdown;
+
+import android.graphics.Typeface;
+import android.text.style.StyleSpan;
+
+public class MarkdownItalicSpan extends StyleSpan implements MarkdownSpan {
+  public MarkdownItalicSpan() {
+    super(Typeface.ITALIC);
+  }
+}

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

@@ -0,0 +1,18 @@
+package com.expensify.livemarkdown;
+
+import android.graphics.Paint;
+import android.text.style.LineHeightSpan;
+
+public class MarkdownLineHeightSpan implements MarkdownSpan, LineHeightSpan {
+  private final float mLineHeight;
+
+  public MarkdownLineHeightSpan(float lineHeight) {
+    mLineHeight = lineHeight;
+  }
+
+  @Override
+  public void chooseHeight(CharSequence text, int start, int end, int spanstartv, int lineHeight, Paint.FontMetricsInt fm) {
+    fm.top -= mLineHeight / 4;
+    fm.ascent -= mLineHeight / 4;
+  }
+}

package/android/src/main/java/com/expensify/livemarkdown/MarkdownSpan.java

@@ -0,0 +1,7 @@
+package com.expensify.livemarkdown;
+
+/*
+ * Enables us to distinguish between spans that were added by Live Markdown and spans that were
+ * added by something else. All spans that Live Markdown adds should implement this interface.
+ */
+public interface MarkdownSpan {}