[WIP] Paragraph API (Rich Text)

package/android/CMakeLists.txt

@@ -9,8 +9,8 @@ set (PACKAGE_NAME "rnskia")
 set (SKIA_LIB "skia")
 set (SKIA_SVG_LIB "svg")
 set (SKIA_SKSHAPER_LIB "skshaper")
-#set (SKIA_SKPARAGRAPH_LIB "skparagraph")
-#set (SKIA_SKUNICODE_LIB "skunicode")
+set (SKIA_SKPARAGRAPH_LIB "skparagraph")
+set (SKIA_SKUNICODE_LIB "skunicode")
 
 # Clear some variables
 unset(LIBRN_DIR CACHE)
@@ -80,7 +80,7 @@ target_include_directories(
         cpp/skia/include/utils/
         cpp/skia/include/pathops/
         cpp/skia/modules/
-        #cpp/skia/modules/skparagraph/include/
+        cpp/skia/modules/skparagraph/include/
         cpp/skia/include/
         cpp/skia
 
@@ -111,12 +111,11 @@ set_property(TARGET svg PROPERTY IMPORTED_LOCATION "${SKIA_LIBS_PATH}/libsvg.a")
 add_library(skshaper STATIC IMPORTED)
 set_property(TARGET skshaper PROPERTY IMPORTED_LOCATION "${SKIA_LIBS_PATH}/libskshaper.a")
 
-#add_library(skparagraph STATIC IMPORTED)
-#set_property(TARGET skparagraph PROPERTY IMPORTED_LOCATION "${SKIA_LIBS_PATH}/libskparagraph.a")
-
-#add_library(skunicode STATIC IMPORTED)
-#set_property(TARGET skunicode PROPERTY IMPORTED_LOCATION "${SKIA_LIBS_PATH}/libskunicode.a")
+add_library(skparagraph STATIC IMPORTED)
+set_property(TARGET skparagraph PROPERTY IMPORTED_LOCATION "${SKIA_LIBS_PATH}/libskparagraph.a")
 
+add_library(skunicode STATIC IMPORTED)
+set_property(TARGET skunicode PROPERTY IMPORTED_LOCATION "${SKIA_LIBS_PATH}/libskunicode.a")
 
 find_library(
         LOG_LIB
@@ -200,8 +199,8 @@ target_link_libraries(
         ${TURBOMODULES_LIB}
         ${SKIA_SVG_LIB}
         ${SKIA_SKSHAPER_LIB}
-        #${SKIA_SKPARAGRAPH_LIB}
-        #${SKIA_SKUNICODE_LIB}
+        ${SKIA_SKPARAGRAPH_LIB}
+        ${SKIA_SKUNICODE_LIB}
         ${SKIA_LIB}
         -ljnigraphics
         -lGLESv2

package/android/cpp/api

@@ -1 +1 @@
-../../cpp/api
+../../cpp/api

package/android/cpp/jsi

@@ -1 +1 @@
-../../cpp/jsi
+../../cpp/jsi

package/android/cpp/rnskia

@@ -1 +1 @@
-../../cpp/rnskia
+../../cpp/rnskia

package/android/cpp/skia

@@ -1 +1 @@
-../../cpp/skia
+../../cpp/skia

package/android/cpp/utils

@@ -1 +1 @@
-../../cpp/utils
+../../cpp/utils

package/package.json

@@ -33,6 +33,8 @@
     "libs/ios/libsvg.xcframework",
     "libs/ios/libskottie.xcframework",
     "libs/ios/libsksg.xcframework",
+    "libs/ios/libskparagraph.xcframework",
+    "libs/ios/libskunicode.xcframework",
     "react-native-skia.podspec",
     "scripts/install-npm.js",
     "scripts/setup-canvaskit.js",

package/react-native-skia.podspec

@@ -34,8 +34,8 @@ Pod::Spec.new do |s|
     'libs/ios/libskia.xcframework', 
     'libs/ios/libsvg.xcframework', 
     'libs/ios/libskshaper.xcframework',
-    #'libs/ios/libskparagraph.xcframework',
-    #'libs/ios/libskunicode.xcframework',
+    'libs/ios/libskparagraph.xcframework',
+    'libs/ios/libskunicode.xcframework',
   ]
 
   # All iOS cpp/h files

package/src/dom/__tests__/RichText.spec.tsx

@@ -0,0 +1,92 @@
+import {
+  getSkDOM,
+  importSkia,
+  resolveFile,
+  width,
+  height,
+} from "../../renderer/__tests__/setup";
+import { setupSkia } from "../../skia/__tests__/setup";
+import { processResult } from "../../__tests__/setup";
+import { JsiDrawingContext } from "../types";
+
+const roboto = resolveFile("skia/__tests__/assets/Roboto-Medium.ttf");
+const noto = resolveFile("skia/__tests__/assets/NotoColorEmoji.ttf");
+
+describe("Paragraph", () => {
+  it("should display the paragraph layout properly using the typeface provider", async () => {
+    const { surface, canvas } = setupSkia(width, height);
+    const { Skia } = importSkia();
+    const Sk = getSkDOM();
+    expect(roboto).toBeDefined();
+    expect(noto).toBeDefined();
+    const ctx = new JsiDrawingContext(Skia, canvas);
+    ctx.typefaceProvider.registerFont(roboto, "Roboto");
+    ctx.typefaceProvider.registerFont(noto, "Noto Color Emoji");
+    const root = Sk.RichText({
+      x: 0,
+      y: 0,
+      width,
+      color: "black",
+      fontFamilies: ["Roboto", "Noto Color Emoji"],
+      fontSize: 35,
+      textAlign: "left",
+      maxLines: 4,
+      ellipsis: "...",
+    });
+    root.addChild(
+      Sk.Span({
+        text: "The quick brown fox 🦊 ate a zesty hamburgerfons 🍔.\nThe 👩‍👩‍👧‍👧 laughed.",
+      })
+    );
+    root.render(ctx);
+    processResult(surface, "snapshots/drawings/paragraph.png");
+  });
+  it("should display the paragraph layout with different text color", async () => {
+    const { surface, canvas } = setupSkia(width, height);
+    const { Skia } = importSkia();
+    const Sk = getSkDOM();
+    const ctx = new JsiDrawingContext(Skia, canvas);
+    ctx.typefaceProvider.registerFont(roboto, "Roboto");
+    ctx.typefaceProvider.registerFont(noto, "Noto Color Emoji");
+    const root = Sk.RichText({
+      x: 0,
+      y: 0,
+      width,
+      color: "black",
+      fontFamilies: ["Roboto", "Noto Color Emoji"],
+      fontSize: 16,
+      textAlign: "left",
+      maxLines: 4,
+      ellipsis: "...",
+    });
+    root.addChild(
+      Sk.Span({
+        text: "The quick brown fox 🦊",
+      })
+    );
+    const backgroundPaint = Skia.Paint();
+    backgroundPaint.setColor(Skia.Color("black"));
+    const foregroundPaint = Skia.Paint();
+    foregroundPaint.setColor(Skia.Color("white"));
+    root.addChild(
+      Sk.Span({
+        foregroundPaint,
+        backgroundPaint,
+        text: " ate a zesty hamburgerfons 🍔.",
+      })
+    );
+    root.addChild(
+      Sk.Span({
+        color: "pink",
+        text: "\nThe 👩‍👩‍👧‍👧",
+      })
+    );
+    root.addChild(
+      Sk.Span({
+        text: " laughed.",
+      })
+    );
+    root.render(ctx);
+    processResult(surface, "snapshots/drawings/paragraph-with-colors.png");
+  });
+});

package/src/dom/nodes/JsiSkDOM.ts

@@ -39,6 +39,8 @@ import type {
   BoxProps,
   BoxShadowProps,
   ChildrenProps,
+  RichTextProps,
+  SpanProps,
 } from "../types";
 import type {
   BlendImageFilterProps,
@@ -123,6 +125,7 @@ import { GroupNode } from "./GroupNode";
 import { PaintNode } from "./PaintNode";
 import type { NodeContext } from "./Node";
 import { LayerNode } from "./LayerNode";
+import { RichTextNode, SpanNode } from "./drawings/RichText";
 
 export class JsiSkDOM implements SkDOM {
   constructor(private ctx: NodeContext) {}
@@ -224,6 +227,20 @@ export class JsiSkDOM implements SkDOM {
       : new TextNode(this.ctx, props);
   }
 
+  RichText(props: RichTextProps) {
+    if (NATIVE_DOM) {
+      throw new Error("Not implemented yet");
+    }
+    return new RichTextNode(this.ctx, props);
+  }
+
+  Span(props: SpanProps) {
+    if (NATIVE_DOM) {
+      throw new Error("Not implemented yet");
+    }
+    return new SpanNode(this.ctx, props);
+  }
+
   TextPath(props: TextPathProps) {
     return NATIVE_DOM
       ? global.SkiaDomApi.TextPathNode(props)