📖

Author: wcandillon

docs/docs/text/paragraph.md

@@ -78,32 +78,42 @@ const textStyle = {
 };
 ```
 
-## Paragraph Height
+## Paragraph Bounding Box
 
-To get the paragraph height, you can calculate the layout using `layout()` and once done, you can invoke `getHeight()`.
+Before getting the paragraph height and width, you need to compute its layout using `layout()` and and once done, you can invoke `getHeight()` for the height and `getLongestLine()` for the width.
 
 ```tsx twoslash
 import { useMemo } from "react";
-import { Paragraph, Skia, useFonts } from "@shopify/react-native-skia";
+import { Paragraph, Skia, useFonts, Canvas, Rect } from "@shopify/react-native-skia";
 
 const MyParagraph = () => {
   const paragraph = useMemo(() => {
     const para = Skia.ParagraphBuilder.Make()
-      .addText("Say Hello to ")
-      .addText("Skia 🎨")
-      .pop()
+      .addText("Say Hello to React Native Skia")
       .build();
     // Calculate the layout
-    para.layout(300);
+    para.layout(200);
     return para;
   }, []);
   // Now the paragraph height is available
   const height = paragraph.getHeight();
+  const width = paragraph.getLongestLine();
   // Render the paragraph
-  return <Paragraph paragraph={paragraph} x={0} y={0} width={300} />;
+  return (
+    <Canvas style={{ width: 256, height: 256 }}>
+      {/* Maximum paragraph width */}
+      <Rect x={0} y={0} width={200} height={256} color="magenta" />
+      {/* Paragraph bounding box */}
+      <Rect x={0} y={0} width={width} height={height} color="cyan" />
+      <Paragraph paragraph={paragraph} x={0} y={0} width={200} />
+    </Canvas>
+  );
 };
 ```
 
+<img src={require("/static/img/paragraph/boundingbox-node.png").default} width="256" height="256" />
+
+
 ## Fonts
 
 By default, the paragraph API will use the system fonts.

docs/static/img/paragraph/boundingbox-node.png

@@ -528,6 +528,42 @@ describe("Paragraphs", () => {
       `snapshots/paragraph/paragraph-bounding-box-${surface.OS}.png`
     );
   });
+  it("should draw the bounding box (3)", async () => {
+    const img = await surface.drawOffscreen(
+      (Skia, canvas, ctx) => {
+        const robotoRegular = Skia.Typeface.MakeFreeTypeFaceFromData(
+          Skia.Data.fromBytes(new Uint8Array(ctx.RobotoRegular))
+        )!;
+        const provider = Skia.TypefaceFontProvider.Make();
+        provider.registerFont(robotoRegular, "Roboto");
+        const para = Skia.ParagraphBuilder.Make({}, provider)
+          .pushStyle({
+            fontFamilies: ["Roboto"],
+            color: Skia.Color("black"),
+            fontSize: 30,
+          })
+          .addText("Say Hello to React Native Skia")
+          .pop()
+          .build();
+        const maxWidth = ctx.canvasWidth * 0.78125;
+        para.layout(maxWidth);
+        const paint = Skia.Paint();
+        paint.setColor(Skia.Color("magenta"));
+        const height = para.getHeight();
+        const width = para.getLongestLine();
+        canvas.drawRect(Skia.XYWHRect(0, 0, maxWidth, ctx.canvasHeight), paint);
+        paint.setColor(Skia.Color("cyan"));
+        canvas.drawRect(Skia.XYWHRect(0, 0, width, height), paint);
+        para.paint(canvas, 0, 0);
+      },
+      {
+        RobotoRegular,
+        canvasWidth: surface.width,
+        canvasHeight: surface.height,
+      }
+    );
+    checkImage(img, docPath(`paragraph/boundingbox-${surface.OS}.png`));
+  });
 
   itRunsE2eOnly("should return the paragraph height", async () => {
     const { width, height } = await surface.eval((Skia) => {

package/src/renderer/__tests__/e2e/Paragraphs.spec.tsx

@@ -9,7 +9,7 @@ import type {
 import { Host } from "./Host";
 import { JsiSkParagraphBuilder } from "./JsiSkParagraphBuilder";
 import { JsiSkParagraphStyle } from "./JsiSkParagraphStyle";
-import { JsiSkTypeface } from "./JsiSkTypeface";
+import { JsiSkTypefaceFontProvider } from "./JsiSkTypefaceFontProvider";
 
 export class JsiSkParagraphBuilderFactory
   extends Host
@@ -31,11 +31,17 @@ export class JsiSkParagraphBuilderFactory
         "SkTypefaceFontProvider is required on React Native Web."
       );
     }
+    const fontCollection = this.CanvasKit.FontCollection.Make();
+    fontCollection.setDefaultFontManager(
+      JsiSkTypefaceFontProvider.fromValue(typefaceProvider)
+    );
+    fontCollection.enableFontFallback();
+
     return new JsiSkParagraphBuilder(
       this.CanvasKit,
-      this.CanvasKit.ParagraphBuilder.MakeFromFontProvider(
+      this.CanvasKit.ParagraphBuilder.MakeFromFontCollection(
         style,
-        JsiSkTypeface.fromValue(typefaceProvider)
+        fontCollection
       )
     );
   }