fix: web paragraph styles not working

[SamuelScheit]

I've tried to use the paragraph api on the web, however the paragraph didn't render and show up on the canvas.
After debugging I found out that paragraph.getHeight() returned 0 and the style.textStyle.fontSize was -1 and style.textStyle.fontFamilies was undefined.

I've tried to directly create the style using new CanvasKit.ParagraphStyle(...) and that returned a style object with correct fontSize/fontFamily and when used also returned the correct paragraph height.

That means the issue lies in the JsiSkParagraphStyle.toParagraphStyle() function:

react-native-skia/packages/skia/src/skia/web/JsiSkParagraphStyle.ts

Lines 7 to 65 in 4a2d7af

	static toParagraphStyle(
	ck: CanvasKit,
	value: SkParagraphStyle
	): ParagraphStyle {
	// Seems like we need to provide the textStyle.color value, otherwise
	// the constructor crashes.
	const ps = new ck.ParagraphStyle({ textStyle: { color: ck.BLACK } });
	ps.disableHinting = value.disableHinting ?? ps.disableHinting;
	ps.ellipsis = value.ellipsis ?? ps.ellipsis;
	ps.heightMultiplier = value.heightMultiplier ?? ps.heightMultiplier;
	ps.maxLines = value.maxLines ?? ps.maxLines;
	ps.replaceTabCharacters =
	value.replaceTabCharacters ?? ps.replaceTabCharacters;
	ps.textAlign =
	value.textAlign !== undefined
	? { value: value.textAlign }
	: undefined ?? ps.textAlign;
	ps.textDirection =
	value.textDirection !== undefined
	? { value: value.textDirection === TextDirection.LTR ? 1 : 0 }
	: ps.textDirection;
	ps.textHeightBehavior =
	value.textHeightBehavior !== undefined
	? { value: value.textHeightBehavior }
	: ps.textHeightBehavior;
	ps.strutStyle = ps.strutStyle ?? {};
	ps.strutStyle.fontFamilies =
	value.strutStyle?.fontFamilies ?? ps.strutStyle.fontFamilies;
	ps.strutStyle.fontSize =
	value.strutStyle?.fontSize ?? ps.strutStyle.fontSize;
	ps.strutStyle.heightMultiplier =
	value.strutStyle?.heightMultiplier ?? ps.strutStyle.heightMultiplier;
	ps.strutStyle.leading = value.strutStyle?.leading ?? ps.strutStyle.leading;
	ps.strutStyle.forceStrutHeight =
	value.strutStyle?.forceStrutHeight ?? ps.strutStyle.forceStrutHeight;
	ps.strutStyle.fontStyle = ps.strutStyle.fontStyle ?? {};
	ps.strutStyle.fontStyle.slant =
	value.strutStyle?.fontStyle?.slant !== undefined
	? { value: value.strutStyle.fontStyle.slant }
	: ps.strutStyle.fontStyle.slant;
	ps.strutStyle.fontStyle.width =
	value.strutStyle?.fontStyle?.width !== undefined
	? { value: value.strutStyle.fontStyle.width }
	: ps.strutStyle.fontStyle.width;
	ps.strutStyle.fontStyle.weight =
	value.strutStyle?.fontStyle?.weight !== undefined
	? { value: value.strutStyle.fontStyle.weight }
	: ps.strutStyle.fontStyle.weight;
	ps.strutStyle.halfLeading =
	value.strutStyle?.halfLeading ?? ps.strutStyle.halfLeading;
	ps.strutStyle.strutEnabled =
	value.strutStyle?.strutEnabled ?? ps.strutStyle.strutEnabled;
	return ps;
	}

Inside of the toParagraphStyle() function I've changed the assignments from strutStyle to textStyle (except for leading, forceStrutHeight and strutEnabled) and also added some properties like textDecoration, backgroundColor and shadows.

This fixed the issue and now the paragraph correctly renders:

const paragraphBuilder = Skia.ParagraphBuilder.Make(
	{
		textStyle: {
			color: Skia.Color("red"),
			fontSize: 50,
			fontFamilies: ["Roboto"],
			decoration: TextDecoration.Underline,
			decorationColor: Skia.Color("green"),
			decorationStyle: TextDecorationStyle.Wavy,
			decorationThickness: 1,
			letterSpacing: 1,
			fontStyle: {
				slant: FontSlant.Italic,
				weight: FontWeight.Normal,
				width: FontWidth.Normal,
			},
			shadows: [
				{
					blurRadius: 10,
					color: Skia.Color("blue"),
					offset: { x: 10, y: 10 },
				},
			],
			textBaseline: TextBaseline.Ideographic,
		},
	},
    fontManager
)

[wcandillon]

Nice, we have some tests for the paragraph API available at https://github.com/Shopify/react-native-skia/blob/main/packages/skia/src/renderer/__tests__/e2e/Paragraphs.spec.tsx Any tests you could suggest that would highlight the bug fix?