feat(form): Add editor to auto form

[aXenDeveloper]

Improving Documentation

• Run pnpm lint:fix to fix formatting issues before opening the PR.
• Read the Docs Contribution Guide: https://vitnode.com/docs/dev/contribution

Description

What?

Why?

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
vitnode-docs	Ready	Preview, Comment	Jul 7, 2026 8:13pm

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[gemini-code-assist]

Code Review

This pull request introduces a new AutoFormEditor component, integrates it into the auto-form fields, and provides comprehensive documentation, examples, and tests. It also refactors AutoFormRadioGroup and AutoFormSelect to use controlled value props instead of defaultValue to prevent uncontrolled-to-controlled warnings. The feedback highlights a critical issue in the Editor component where the TipTap editor content does not synchronize when the value prop changes dynamically (such as during form resets). To resolve this, it is recommended to import and use a useEffect hook to set the editor content when the value prop updates.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

Import useEffect from react to allow synchronizing the editor content when the value prop changes dynamically.

Suggested change

	import type React from "react";
	import React, { useEffect } from "react";

[gemini-code-assist]

TipTap's useEditor hook only sets the content once during initialization. If the value prop changes from the outside (e.g., when the form is reset or updated programmatically), the editor's content will not update. Adding a useEffect hook ensures the editor content stays in sync with the value prop. Note that we must place this hook before the conditional return if (!editor) return <Loader />; to adhere to the Rules of Hooks.

    onUpdate: ({ editor: currentEditor }) => {
      onChange?.(currentEditor.getHTML());
    },
  });

  useEffect(() => {
    if (editor && !editor.isDestroyed && value !== editor.getHTML()) {
      editor.commands.setContent(value);
    }
  }, [value, editor]);