ui-rich-text-editor

Wrap the TipTap-based editor in a React Hook Form Controller or FormField render prop, passing field.value to the editor's value prop and field.onChange to its onChange callback. The editor emits an HTML string on every update, which Zod can validate as a plain string.

Create a toolbar component that receives the TipTap Editor instance and calls chain commands like editor.chain().focus().toggleBold().run(). Use editor.isActive('bold') to highlight active states, and set type="button" on each button to prevent accidental form submission.

TipTap always wraps content in paragraph nodes, so getHTML() returns '<p></p>' for empty editors. Check editor.isEmpty in the onUpdate callback and emit an empty string instead, which keeps database storage and Zod min-length validation consistent.

Install @tiptap/extension-character-count and configure it with a limit option. Read the current count via editor.storage.characterCount.characters() and display it in a counter below the editor, applying danger styling when the count exceeds the maximum.

Yes, the editor outputs an HTML string that can be stored as NVARCHAR(MAX) in a database. Validate the raw HTML string with Zod rules like z.string().min(10).max(5000) before submission to enforce content constraints.