@mathers101/react-native-render-rich-text 0.0.0-stage → 0.1.9

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2025 Software Mansion
+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

@@ -1,3 +1,140 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# react-native-render-rich-text
+
+A React Native Fabric library that renders a [Tiptap](https://tiptap.dev/) document on iOS and Android. The public component is `RichText`. Its `document` prop is a Tiptap JSON tree, or that tree already encoded as a string.
+
+There is no web renderer and no text-input component. New Architecture is required (React Native 0.88).
+
+The display renderers are adapted from Software Mansion. That copyright stays on the copied sources. See `LICENSE`.
+
+## Install
+
+```sh
+npm install @mathers101/react-native-render-rich-text
+```
+
+## What it draws
+
+Nodes: `doc`, `paragraph`, `heading`, `bulletList`, `orderedList`, `listItem`, `blockquote`, `codeBlock`, `horizontalRule`, `hardBreak`, `factoid`, and `mention`. Marks: `bold` (or `strong`), `italic` (or `em`), `strike` (or `strikethrough`), `code`, `underline`, `highlight`, and `link`. A link's URL is `marks[].attrs.href`. A factoid is an inline node; its `id` is what `onFactoidPress` receives, and a factoid that contains a link emits `onLinkPress` instead. A mention is an inline atom with `id` and `label`. It draws as `@label` (or `@id` when `label` is blank). `onMentionPress` and `onMentionLongPress` receive both attributes.
+
+Unknown nodes, including tables, images, and task lists, are skipped with their children so the rest of the document still renders. A code block keeps its `language` attribute. Syntax colors apply only when the optional highlighting module is compiled in; otherwise the block is plain monospace.
+
+## Use it
+
+```tsx
+import { RichText } from "@mathers101/react-native-render-rich-text";
+
+<RichText
+  document={document}
+  onLinkPress={(url) => {
+    // url comes from the link mark's href
+  }}
+  onFactoidPress={(factoidId) => {
+    // factoidId comes from the factoid node's id
+  }}
+  onMentionPress={(mention) => {
+    // mention.id and mention.label come from the mention node
+  }}
+  onMentionLongPress={(mention) => {
+    // same payload as onMentionPress
+  }}
+/>;
+```
+
+`document` is either a `TiptapNode` or a JSON string. `selectable` defaults to true. `allowFontScaling` defaults to true, and `maxFontSizeMultiplier` caps that scale. `numberOfLines` and `ellipsizeMode` (`'head' | 'middle' | 'tail' | 'clip'`) truncate the view. `style` is a normal React Native view style for the container, not the text.
+
+## Styling
+
+Pass a partial `TiptapStyle` as `textStyle`. Omitted keys keep the built-in defaults. JavaScript fills in that complete style before it crosses the bridge; native does not invent colors of its own.
+
+```tsx
+<RichText
+  document={document}
+  textStyle={{
+    paragraph: { color: "#1c1917", fontSize: 17, lineHeight: 26 },
+    link: { color: "#9a3412" },
+    blockquote: { borderColor: "#c2410c", padding: 16 },
+  }}
+/>
+```
+
+The type is exported as `TiptapStyle`. Each node has its own block: `paragraph`, `h1` through `h6`, `blockquote`, `list`, `code`, `codeBlock`, `link`, `linkVariants`, `strong`, `em`, `strikethrough`, `underline`, `mention`, `factoid`, `highlight`, `thematicBreak`, and the table, image, math, and task-list blocks the style object still carries. Color fields take any string `processColor` accepts.
+
+With no `textStyle`, body text is `#1F2937`, headings are near-black, links are `#2563EB`, and inline code is pink on a light chip. Blockquotes use a gray bar, a light fill, and 10 points of padding. Bold and italic do not set a color, so they inherit the surrounding text. Fenced code blocks are the exception: they default to a dark background (`#1F2937`) and a GitHub-dark syntax palette.
+
+A factoid's `color`, `backgroundColor`, and `borderColor` attributes replace that one channel of `textStyle.factoid`. The other channels stay on the style.
+
+A mention uses `textStyle.mention`. `color` is the label and `backgroundColor` is the chip. Defaults are `#1D4ED8` on `#DBEAFE`. iOS draws semibold text in a rounded rect on each line the name wraps onto. Android draws one medium-weight chip and keeps it on a single line, and darkens the fill while a finger is down.
+
+`linkVariants` maps a URL regex to a link override. Longer patterns win. Omitted `color` and `underline` inherit the base link style.
+
+## Dark mode
+
+The library does not follow the system appearance. Pass a dark `textStyle` yourself when the screen is dark. `darkModeTextStyle` is a ready-made palette for that: light text (`#E6EDF3`), brighter headings, blue links (`#58A6FF`), and dark surfaces for quotes, tables, and code. It sets colors only. Font sizes, spacing, and the rest of the geometry stay on the built-in defaults, including the 10-point blockquote padding. Bold and italic are left unset so they still inherit.
+
+```tsx
+import { darkModeTextStyle, RichText } from "@mathers101/react-native-render-rich-text";
+
+<RichText document={document} textStyle={darkModeTextStyle} />;
+```
+
+Spread it and override a few keys when the preset is close but not exact:
+
+```tsx
+textStyle={{
+  ...darkModeTextStyle,
+  paragraph: { ...darkModeTextStyle.paragraph, fontSize: 17, lineHeight: 26 },
+  link: { color: '#93C5FD' },
+}}
+```
+
+The preset lives in `src/darkModeTextStyle.ts`. The light defaults live in `src/normalizeTiptapStyle.ts`.
+
+## Run the example
+
+The example app is a Yarn workspace of this package. Metro serves it on port 41873:
+
+```sh
+yarn example
+```
+
+One screen shows five fixtures: mixed document, lists, code, links, and a long tab of two documents that mix every node. The header button labeled **Dark** swaps the document to `darkModeTextStyle` and darkens the screen around it. It reads **Light** after the switch. Open a link, a factoid, or a mention and the footer shows what was pressed. Hold a mention and the footer says it was held.
+
+iOS: from `example/ios`, run `bundle install` and `bundle exec pod install`, then `yarn example ios` (or `yarn workspace render-rich-text-example ios`). The pod is `ReactNativeRenderRichText`.
+
+Android: from `example`, run `yarn android`. The native package is `com.renderrichtext`. The codegen spec name is `RichTextSpec`.
+
+## Release
+
+Pushing a `vX.Y.Z` tag publishes that version to the public npm registry. The tag has to match `version` in `package.json`. The workflow is `.github/workflows/publish.yml`. It typechecks, runs the parser tests, publishes, and opens a GitHub Release.
+
+```sh
+# commit the version bump first, then:
+git tag v0.1.7
+git push origin v0.1.7
+```
+
+The repository secret `NPM_TOKEN` has to be an npm automation token that can publish `@mathers101`. The package is public, so Expo EAS and other installs do not need a token.
+
+## Build the library
+
+Install dependencies from the repository root.
+
+```sh
+corepack enable
+yarn install
+yarn typecheck
+```
+
+## Parser tests
+
+The C++ parser tests check mark nesting, lists, factoids, empty documents, and unknown nodes.
+
+```sh
+yarn test:parser
+```
+
+That compiles `cpp/parser/TiptapParser.cpp` with `cpp/tests/parser_tests.cpp` and runs the binary. A passing run prints `all parser tests passed`.
+
+## What this environment cannot verify
+
+iOS and Android rendering need a simulator or a device. Typecheck and the parser tests run here. Metro can serve the JavaScript bundle here. A device render does not.

package/ReactNativeRenderRichText.podspec

@@ -0,0 +1,23 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "ReactNativeRenderRichText"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+  s.platforms    = { :ios => min_ios_version_supported }
+  s.source       = { :git => package["repository"]["url"], :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm}", "cpp/parser/*.{hpp,cpp}"
+  s.private_header_files = "ios/**/*.h", "cpp/parser/*.hpp"
+  s.pod_target_xcconfig = {
+    "CLANG_CXX_LANGUAGE_STANDARD" => "c++20",
+    "HEADER_SEARCH_PATHS" => "$(inherited) \"$(PODS_TARGET_SRCROOT)/cpp/parser\" \"$(PODS_TARGET_SRCROOT)/cpp/vendor\""
+  }
+
+  install_modules_dependencies(s)
+end

package/android/build.gradle

@@ -0,0 +1,86 @@
+buildscript {
+  repositories {
+    google()
+    mavenCentral()
+  }
+  dependencies {
+    classpath "com.android.tools.build:gradle:8.12.0"
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:2.2.0"
+  }
+}
+
+apply plugin: "com.android.library"
+
+def shouldApplyKotlinPlugin() {
+  def agpMajor = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION.tokenize('.')[0].toInteger()
+  if (agpMajor <= 8) {
+    return true
+  }
+  if (agpMajor >= 10) {
+    return false
+  }
+  def propertyVal = providers.gradleProperty("android.builtInKotlin").orNull
+  def builtInKotlinEnabled = propertyVal != null ? propertyVal.toBoolean() : true
+  return !builtInKotlinEnabled
+}
+
+if (shouldApplyKotlinPlugin()) {
+  apply plugin: "kotlin-android"
+}
+
+apply plugin: "com.facebook.react"
+
+def getExtOrDefault = { name, fallback ->
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : fallback
+}
+
+android {
+  namespace "com.renderrichtext"
+  compileSdkVersion getExtOrDefault("compileSdkVersion", 37)
+
+  defaultConfig {
+    minSdkVersion getExtOrDefault("minSdkVersion", 24)
+    targetSdkVersion getExtOrDefault("targetSdkVersion", 36)
+    consumerProguardFiles "consumer-rules.pro"
+    buildConfigField "boolean", "ENABLE_MATH", "false"
+    buildConfigField "boolean", "ENABLE_VIDEO", "false"
+    buildConfigField "boolean", "ENABLE_CODE_HIGHLIGHT", "false"
+  }
+
+  buildFeatures {
+    buildConfig true
+  }
+
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_17
+    targetCompatibility JavaVersion.VERSION_17
+  }
+
+  sourceSets {
+    main {
+      java.srcDirs += ["generated/java", "generated/jni"]
+    }
+  }
+}
+
+repositories {
+  mavenCentral()
+  google()
+}
+
+dependencies {
+  implementation "com.facebook.react:react-android"
+  implementation "org.jetbrains.kotlin:kotlin-stdlib:2.2.0"
+}
+
+react {
+  jsRootDir = file("../src/")
+  libraryName = "RichTextSpec"
+  codegenJavaPackageName = "com.renderrichtext"
+}

package/android/consumer-rules.pro

@@ -0,0 +1,3 @@
+# JNI looks up these classes by name from jni-adapter.cpp.
+-keep class com.renderrichtext.parser.TiptapASTNode { *; }
+-keep class com.renderrichtext.parser.TiptapASTNode$NodeType { *; }

package/android/src/main/AndroidManifest.xml

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

package/android/src/main/cpp/jni-adapter.cpp

@@ -0,0 +1,191 @@
+#include "TiptapParser.hpp"
+#include <android/log.h>
+#include <jni.h>
+#include <string>
+
+using namespace Tiptap;
+
+#ifdef LOG_TAG
+#undef LOG_TAG
+#endif
+#define LOG_TAG "RenderRichTextJNI"
+#define LOGE(...) __android_log_print(ANDROID_LOG_ERROR, LOG_TAG, __VA_ARGS__)
+
+static jint nodeTypeToJavaOrdinal(NodeType type) {
+  switch (type) {
+    case NodeType::Document:
+      return 0;
+    case NodeType::Paragraph:
+      return 1;
+    case NodeType::Text:
+      return 2;
+    case NodeType::Link:
+      return 3;
+    case NodeType::Heading:
+      return 4;
+    case NodeType::LineBreak:
+      return 5;
+    case NodeType::Strong:
+      return 6;
+    case NodeType::Emphasis:
+      return 7;
+    case NodeType::Strikethrough:
+      return 8;
+    case NodeType::Underline:
+      return 9;
+    case NodeType::Code:
+      return 10;
+    case NodeType::Image:
+      return 11;
+    case NodeType::Blockquote:
+      return 12;
+    case NodeType::UnorderedList:
+      return 13;
+    case NodeType::OrderedList:
+      return 14;
+    case NodeType::ListItem:
+      return 15;
+    case NodeType::CodeBlock:
+      return 16;
+    case NodeType::ThematicBreak:
+      return 17;
+    case NodeType::Table:
+      return 18;
+    case NodeType::TableHead:
+      return 19;
+    case NodeType::TableBody:
+      return 20;
+    case NodeType::TableRow:
+      return 21;
+    case NodeType::TableHeaderCell:
+      return 22;
+    case NodeType::TableCell:
+      return 23;
+    case NodeType::LatexMathInline:
+      return 24;
+    case NodeType::LatexMathDisplay:
+      return 25;
+    case NodeType::Spoiler:
+      return 26;
+    case NodeType::Superscript:
+      return 27;
+    case NodeType::Subscript:
+      return 28;
+    case NodeType::Highlight:
+      return 29;
+    case NodeType::SoftBreak:
+      return 30;
+    case NodeType::BlankLine:
+      return 31;
+    case NodeType::Admonition:
+      return 32;
+    case NodeType::Video:
+      return 33;
+    case NodeType::Factoid:
+      return 34;
+    case NodeType::Mention:
+      return 35;
+    default:
+      return 0;
+  }
+}
+
+static jobject createJavaNode(JNIEnv *env, const std::shared_ptr<TiptapASTNode> &node) {
+  if (!node) {
+    return nullptr;
+  }
+
+  jclass nodeClass = env->FindClass("com/renderrichtext/parser/TiptapASTNode");
+  if (!nodeClass) {
+    LOGE("Failed to find TiptapASTNode class");
+    return nullptr;
+  }
+
+  jclass nodeTypeClass = env->FindClass("com/renderrichtext/parser/TiptapASTNode$NodeType");
+  if (!nodeTypeClass) {
+    LOGE("Failed to find NodeType enum class");
+    return nullptr;
+  }
+
+  jmethodID valuesMethod = env->GetStaticMethodID(
+      nodeTypeClass, "values", "()[Lcom/renderrichtext/parser/TiptapASTNode$NodeType;");
+  if (!valuesMethod) {
+    LOGE("Failed to find NodeType.values() method");
+    return nullptr;
+  }
+
+  jobjectArray enumValues = (jobjectArray)env->CallStaticObjectMethod(nodeTypeClass, valuesMethod);
+  if (!enumValues) {
+    LOGE("Failed to get NodeType enum values");
+    return nullptr;
+  }
+
+  jint ordinal = nodeTypeToJavaOrdinal(node->type);
+  jobject nodeTypeEnum = env->GetObjectArrayElement(enumValues, ordinal);
+  if (!nodeTypeEnum) {
+    LOGE("Failed to get NodeType enum value at index %d", ordinal);
+    return nullptr;
+  }
+
+  jstring contentStr = env->NewStringUTF(node->content.c_str());
+
+  jclass mapClass = env->FindClass("java/util/HashMap");
+  jmethodID mapInit = env->GetMethodID(mapClass, "<init>", "(I)V");
+  jmethodID mapPut = env->GetMethodID(mapClass, "put", "(Ljava/lang/Object;Ljava/lang/Object;)Ljava/lang/Object;");
+  jobject attributesMap = env->NewObject(mapClass, mapInit, static_cast<jint>(node->attributes.size()));
+  for (const auto &pair : node->attributes) {
+    jstring key = env->NewStringUTF(pair.first.c_str());
+    jstring value = env->NewStringUTF(pair.second.c_str());
+    env->CallObjectMethod(attributesMap, mapPut, key, value);
+    env->DeleteLocalRef(key);
+    env->DeleteLocalRef(value);
+  }
+
+  jclass listClass = env->FindClass("java/util/ArrayList");
+  jmethodID listInit = env->GetMethodID(listClass, "<init>", "(I)V");
+  jmethodID listAdd = env->GetMethodID(listClass, "add", "(Ljava/lang/Object;)Z");
+  jobject childrenList = env->NewObject(listClass, listInit, static_cast<jint>(node->children.size()));
+  for (const auto &child : node->children) {
+    jobject childObj = createJavaNode(env, child);
+    if (childObj) {
+      env->CallBooleanMethod(childrenList, listAdd, childObj);
+      env->DeleteLocalRef(childObj);
+    }
+  }
+
+  jmethodID constructor = env->GetMethodID(
+      nodeClass, "<init>",
+      "(Lcom/renderrichtext/parser/TiptapASTNode$NodeType;Ljava/lang/String;Ljava/util/Map;Ljava/util/List;)V");
+  if (!constructor) {
+    LOGE("Failed to find TiptapASTNode constructor");
+    return nullptr;
+  }
+
+  jobject javaNode = env->NewObject(nodeClass, constructor, nodeTypeEnum, contentStr, attributesMap, childrenList);
+
+  env->DeleteLocalRef(nodeTypeClass);
+  env->DeleteLocalRef(enumValues);
+  env->DeleteLocalRef(nodeTypeEnum);
+  if (contentStr) {
+    env->DeleteLocalRef(contentStr);
+  }
+  env->DeleteLocalRef(attributesMap);
+  env->DeleteLocalRef(childrenList);
+  env->DeleteLocalRef(nodeClass);
+  return javaNode;
+}
+
+extern "C" JNIEXPORT jobject JNICALL Java_com_renderrichtext_parser_Parser_nativeParseDocument(JNIEnv *env, jclass,
+                                                                                               jstring document) {
+  if (document == nullptr) {
+    return nullptr;
+  }
+  const char *utf8 = env->GetStringUTFChars(document, nullptr);
+  if (utf8 == nullptr) {
+    return nullptr;
+  }
+  std::string json(utf8);
+  env->ReleaseStringUTFChars(document, utf8);
+  auto ast = parseTiptapDocument(json);
+  return createJavaNode(env, ast);
+}