fix: enhance rich text handling in PDF generation

- Bump @tanstack/react-form version to 1.32.0 in package.json.
- Refactor rich-input component to simplify highlight configuration.
- Improve rich text HTML normalization to handle <mark> elements and apply styles correctly in PDF output.
- Update global CSS for WYSIWYG to adjust paragraph and list margins.

packages/pdf/src/templates/shared/rich-text-html.ts

@@ -1,6 +1,8 @@
 import type { Node } from "node-html-parser";
 import { NodeType, parse } from "node-html-parser";
 
+export const richTextMarkClassName = "rr-pdf-mark";
+
 const inlineTags = new Set([
 	"a",
 	"abbr",
@@ -27,6 +29,20 @@ const getTagName = (node: Node) => node.rawTagName.toLowerCase();
 const hasBlockDescendant = (node: Node): boolean =>
 	node.childNodes.some((child) => child.nodeType === NodeType.ELEMENT_NODE && !isInlineNode(child));
 
+const mergeClassNames = (...classNames: (string | undefined)[]): string =>
+	classNames
+		.flatMap((className) => className?.split(/\s+/) ?? [])
+		.filter(Boolean)
+		.filter((className, index, classNames) => classNames.indexOf(className) === index)
+		.join(" ");
+
+const normalizeMarkElements = (root: ReturnType<typeof parse>) => {
+	for (const mark of root.querySelectorAll("mark")) {
+		mark.tagName = "span";
+		mark.setAttribute("class", mergeClassNames(mark.getAttribute("class"), richTextMarkClassName));
+	}
+};
+
 const isInlineNode = (node: Node): boolean => {
 	if (node.nodeType === NodeType.TEXT_NODE || node.nodeType === NodeType.COMMENT_NODE) return true;
 	if (node.nodeType !== NodeType.ELEMENT_NODE) return false;
@@ -39,6 +55,8 @@ export const normalizeRichTextHtml = (html: string): string => {
 	const normalized: string[] = [];
 	let inlineNodes: string[] = [];
 
+	normalizeMarkElements(root);
+
 	const flushInlineNodes = () => {
 		const inlineHtml = inlineNodes.join("").trim();