From 105e9517ed5ff4cb82beeb5635ed9db99a6a6a41 Mon Sep 17 00:00:00 2001
From: aXenDeveloper <axendeveloper@gmail.com>
Date: Tue, 7 Jul 2026 21:35:10 +0200
Subject: [PATCH 1/2] feat(form): Add editor to auto form

---
 apps/docs/content/docs/ui/auto-form.mdx       |  15 +++
 apps/docs/content/docs/ui/editor.mdx          | 112 ++++++++++++++++
 apps/docs/content/docs/ui/meta.json           |   1 +
 apps/docs/src/examples/auto-form.tsx          |  15 +++
 apps/docs/src/examples/editor.tsx             |  32 +++++
 .../components/form/fields/editor.test.tsx    | 113 ++++++++++++++++
 .../src/components/form/fields/editor.tsx     |  43 ++++++
 .../form/fields/radio-group.test.tsx          | 126 ++++++++++++++++++
 .../components/form/fields/radio-group.tsx    |   2 +-
 .../components/form/fields/select.test.tsx    | 120 +++++++++++++++++
 .../src/components/form/fields/select.tsx     |   2 +-
 .../vitnode/src/components/ui/editor.test.tsx |  46 +++++++
 packages/vitnode/src/components/ui/editor.tsx |  21 ++-
 .../src/views/admin/views/core/test.tsx       |   9 ++
 14 files changed, 650 insertions(+), 7 deletions(-)
 create mode 100644 apps/docs/content/docs/ui/editor.mdx
 create mode 100644 apps/docs/src/examples/editor.tsx
 create mode 100644 packages/vitnode/src/components/form/fields/editor.test.tsx
 create mode 100644 packages/vitnode/src/components/form/fields/editor.tsx
 create mode 100644 packages/vitnode/src/components/form/fields/radio-group.test.tsx
 create mode 100644 packages/vitnode/src/components/form/fields/select.test.tsx
 create mode 100644 packages/vitnode/src/components/ui/editor.test.tsx

diff --git a/apps/docs/content/docs/ui/auto-form.mdx b/apps/docs/content/docs/ui/auto-form.mdx
index 7e5b2e761..55dd75627 100644
--- a/apps/docs/content/docs/ui/auto-form.mdx
+++ b/apps/docs/content/docs/ui/auto-form.mdx
@@ -12,6 +12,7 @@ description: Component creates form based on Zod schemas & react-hook-form with
 ```tsx
 import { AutoForm } from "@vitnode/core/components/form/auto-form";
 import { AutoFormCheckbox } from "@vitnode/core/components/form/fields/checkbox";
+import { AutoFormEditor } from "@vitnode/core/components/form/fields/editor";
 import { AutoFormInput } from "@vitnode/core/components/form/fields/input";
 import { AutoFormSelect } from "@vitnode/core/components/form/fields/select";
 import { AutoFormTextarea } from "@vitnode/core/components/form/fields/textarea";
@@ -40,6 +41,10 @@ const formSchema = z.object({
     message: "You must accept the terms and conditions",
   }),
   description: z.string().min(10, "Description must be at least 10 characters"),
+  content: z
+    .string()
+    .min(1, "Content is required")
+    .default("<p>Write your content here...</p>"),
   search: z.string().optional(),
 });
 ```
@@ -119,6 +124,16 @@ const formSchema = z.object({
         />
       ),
     },
+    {
+      id: "content",
+      component: props => (
+        <AutoFormEditor
+          {...props}
+          description="Rich text content powered by the Editor."
+          label="Content"
+        />
+      ),
+    },
     {
       id: "search",
       component: props => (
diff --git a/apps/docs/content/docs/ui/editor.mdx b/apps/docs/content/docs/ui/editor.mdx
new file mode 100644
index 000000000..2d954c5de
--- /dev/null
+++ b/apps/docs/content/docs/ui/editor.mdx
@@ -0,0 +1,112 @@
+---
+title: Editor
+description: Rich text editor built on TipTap for editing and rendering HTML content.
+---
+
+## Preview
+
+<Preview name="editor" />
+
+## Usage
+
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+<Tabs items={['Auto Form', 'Manual']}>
+  <Tab value="Auto Form">
+
+```ts
+import { z } from "zod";
+import { AutoForm } from "@vitnode/core/components/form/auto-form";
+import { AutoFormEditor } from "@vitnode/core/components/form/fields/editor";
+```
+
+```ts
+const formSchema = z.object({
+  content: z
+    .string()
+    .min(1, "Content is required")
+    .default("<p>Write your content here...</p>"),
+});
+```
+
+```tsx
+<AutoForm
+  formSchema={formSchema}
+  fields={[
+    {
+      id: "content",
+      component: props => (
+        <AutoFormEditor
+          {...props}
+          description="Rich text content powered by the Editor."
+          label="Content"
+        />
+      ),
+    },
+  ]}
+/>
+```
+
+  </Tab>
+
+  <Tab value="Manual">
+
+```ts
+import { Editor } from "@vitnode/core/components/ui/editor";
+```
+
+The `Editor` is uncontrolled by default — pass `value` as the initial HTML and
+listen for changes with `onChange`, which receives the current HTML string:
+
+```tsx
+const [content, setContent] = useState("<p>Hello World! 🌎️</p>");
+
+<Editor value={content} onChange={setContent} />;
+```
+
+  </Tab>
+</Tabs>
+
+## Rendering Content
+
+Use `EditorContent` to render the stored HTML as read-only content outside of
+the editor (e.g. on a public page):
+
+```ts
+import { EditorContent } from "@vitnode/core/components/ui/editor-content";
+```
+
+```tsx
+<EditorContent content="<h2>Title</h2><p>Hello World! 🌎️</p>" />
+```
+
+## Props
+
+import { TypeTable } from "fumadocs-ui/components/type-table";
+
+<TypeTable
+  type={{
+    value: {
+      description: "Initial HTML content rendered inside the editor.",
+      type: "string",
+      default: '""',
+    },
+    onChange: {
+      description:
+        "Called on every change with the current content as an HTML string.",
+      type: "(value: string) => void",
+      default: "",
+    },
+    disableScroll: {
+      description:
+        "Disables the internal max-height scroll area so the editor grows with its content.",
+      type: "boolean",
+      default: "false",
+    },
+    className: {
+      description: "Additional classes applied to the editor wrapper.",
+      type: "string",
+      default: "",
+    },
+  }}
+/>
diff --git a/apps/docs/content/docs/ui/meta.json b/apps/docs/content/docs/ui/meta.json
index 8fc96c8b4..288445241 100644
--- a/apps/docs/content/docs/ui/meta.json
+++ b/apps/docs/content/docs/ui/meta.json
@@ -16,6 +16,7 @@
     "auto-form",
     "checkbox",
     "combobox",
+    "editor",
     "input",
     "input-group",
     "radio-group",
diff --git a/apps/docs/src/examples/auto-form.tsx b/apps/docs/src/examples/auto-form.tsx
index 3a8993858..685901a54 100644
--- a/apps/docs/src/examples/auto-form.tsx
+++ b/apps/docs/src/examples/auto-form.tsx
@@ -2,6 +2,7 @@
 
 import { AutoForm } from "@vitnode/core/components/form/auto-form";
 import { AutoFormCheckbox } from "@vitnode/core/components/form/fields/checkbox";
+import { AutoFormEditor } from "@vitnode/core/components/form/fields/editor";
 import { AutoFormInput } from "@vitnode/core/components/form/fields/input";
 import { AutoFormSelect } from "@vitnode/core/components/form/fields/select";
 import { AutoFormTextarea } from "@vitnode/core/components/form/fields/textarea";
@@ -22,6 +23,10 @@ export default function AutoFormExample() {
     description: z
       .string()
       .min(10, "Description must be at least 10 characters"),
+    content: z
+      .string()
+      .min(1, "Content is required")
+      .default("<p>Write your content here...</p>"),
     search: z.string().optional(),
   });
 
@@ -79,6 +84,16 @@ export default function AutoFormExample() {
             />
           ),
         },
+        {
+          id: "content",
+          component: props => (
+            <AutoFormEditor
+              description="Rich text content powered by the Editor."
+              label="Content"
+              {...props}
+            />
+          ),
+        },
         {
           id: "search",
           component: props => (
diff --git a/apps/docs/src/examples/editor.tsx b/apps/docs/src/examples/editor.tsx
new file mode 100644
index 000000000..1c9242e8c
--- /dev/null
+++ b/apps/docs/src/examples/editor.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { AutoForm } from "@vitnode/core/components/form/auto-form";
+import { AutoFormEditor } from "@vitnode/core/components/form/fields/editor";
+import { z } from "zod";
+
+export default function EditorExample() {
+  const formSchema = z.object({
+    content: z
+      .string()
+      .min(1, "Content is required")
+      .default("<p>Write your content here...</p>"),
+  });
+
+  return (
+    <AutoForm
+      fields={[
+        {
+          id: "content",
+          component: props => (
+            <AutoFormEditor
+              description="Rich text content powered by the Editor."
+              label="Content"
+              {...props}
+            />
+          ),
+        },
+      ]}
+      formSchema={formSchema}
+    />
+  );
+}
diff --git a/packages/vitnode/src/components/form/fields/editor.test.tsx b/packages/vitnode/src/components/form/fields/editor.test.tsx
new file mode 100644
index 000000000..dcd0bcb55
--- /dev/null
+++ b/packages/vitnode/src/components/form/fields/editor.test.tsx
@@ -0,0 +1,113 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { type FieldValues, useForm } from "react-hook-form";
+import { describe, expect, it, vi } from "vitest";
+
+import { Form, FormField } from "@/components/ui/form";
+
+import { AutoFormEditor } from "./editor";
+
+vi.mock("next-intl", () => ({
+  useLocale: () => "en",
+  useTranslations: () => (key: string) => key,
+}));
+
+vi.mock("@/components/ui/editor", () => ({
+  Editor: ({
+    value,
+    onChange,
+    onBlur,
+    ...props
+  }: {
+    onBlur?: () => void;
+    onChange?: (value: string) => void;
+    value?: string;
+  }) => (
+    <textarea
+      data-testid="editor"
+      onBlur={onBlur}
+      onChange={e => onChange?.(e.target.value)}
+      value={value}
+      {...props}
+    />
+  ),
+}));
+
+const Harness = ({
+  onSubmit = vi.fn(),
+  defaultValue = "<p>init</p>",
+}: {
+  defaultValue?: string;
+  onSubmit?: (values: FieldValues) => void;
+}) => {
+  const form = useForm({
+    defaultValues: { content: defaultValue } as FieldValues,
+  });
+
+  return (
+    <Form form={form} onSubmit={onSubmit}>
+      <FormField
+        control={form.control}
+        name="content"
+        render={({ field }) => (
+          <AutoFormEditor
+            description="Rich text content"
+            field={field}
+            label="Content"
+            otherProps={{ isOptional: false }}
+          />
+        )}
+      />
+      <button type="submit">submit</button>
+    </Form>
+  );
+};
+
+describe("AutoFormEditor", () => {
+  it("renders label and description", () => {
+    render(<Harness />);
+
+    expect(screen.getByText("Content")).toBeDefined();
+    expect(screen.getByText("Rich text content")).toBeDefined();
+  });
+
+  it("passes the field value as the editor initial value", () => {
+    render(<Harness defaultValue="<p>hello</p>" />);
+
+    expect(screen.getByTestId<HTMLTextAreaElement>("editor").value).toBe(
+      "<p>hello</p>",
+    );
+  });
+
+  it("wires the editor onChange back into the form value", () => {
+    render(<Harness />);
+    const editor = screen.getByTestId<HTMLTextAreaElement>("editor");
+
+    fireEvent.change(editor, { target: { value: "<p>updated</p>" } });
+
+    expect(editor.value).toBe("<p>updated</p>");
+  });
+
+  it("submits the current editor content", async () => {
+    const onSubmit = vi.fn();
+    render(<Harness onSubmit={onSubmit} />);
+    const editor = screen.getByTestId<HTMLTextAreaElement>("editor");
+
+    fireEvent.change(editor, { target: { value: "<p>final</p>" } });
+    fireEvent.click(screen.getByRole("button", { name: "submit" }));
+
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledWith(
+        { content: "<p>final</p>" },
+        expect.anything(),
+      );
+    });
+  });
+
+  it("applies the form control aria/id attributes to the editor", () => {
+    render(<Harness />);
+    const editor = screen.getByTestId("editor");
+
+    expect(editor.getAttribute("id")).toMatch(/-form-item$/);
+    expect(editor.getAttribute("aria-invalid")).toBe("false");
+  });
+});
diff --git a/packages/vitnode/src/components/form/fields/editor.tsx b/packages/vitnode/src/components/form/fields/editor.tsx
new file mode 100644
index 000000000..2b9570ad2
--- /dev/null
+++ b/packages/vitnode/src/components/form/fields/editor.tsx
@@ -0,0 +1,43 @@
+import type React from "react";
+
+import { Editor } from "@/components/ui/editor";
+import { FormControl, FormMessage } from "@/components/ui/form";
+
+import type { ItemAutoFormComponentProps } from "../auto-form";
+
+import { AutoFormDesc } from "../common/desc";
+import { AutoFormLabel } from "../common/label";
+
+export const AutoFormEditor = ({
+  label,
+  labelRight,
+  description,
+  otherProps: { isOptional },
+  field,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  itemParams,
+  ...props
+}: ItemAutoFormComponentProps &
+  Omit<React.ComponentProps<typeof Editor>, "onChange" | "value">) => {
+  return (
+    <>
+      {label && (
+        <AutoFormLabel isOptional={isOptional} labelRight={labelRight}>
+          {label}
+        </AutoFormLabel>
+      )}
+
+      <FormControl>
+        <Editor
+          onBlur={field.onBlur}
+          onChange={field.onChange}
+          value={field.value ?? ""}
+          {...props}
+        />
+      </FormControl>
+
+      {description && <AutoFormDesc>{description}</AutoFormDesc>}
+      <FormMessage />
+    </>
+  );
+};
diff --git a/packages/vitnode/src/components/form/fields/radio-group.test.tsx b/packages/vitnode/src/components/form/fields/radio-group.test.tsx
new file mode 100644
index 000000000..4f117cddf
--- /dev/null
+++ b/packages/vitnode/src/components/form/fields/radio-group.test.tsx
@@ -0,0 +1,126 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { type FieldValues, useForm } from "react-hook-form";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { Form, FormField } from "@/components/ui/form";
+
+import { AutoFormRadioGroup } from "./radio-group";
+
+vi.mock("next-intl", () => ({
+  useLocale: () => "en",
+  useTranslations: () => (key: string) => key,
+}));
+
+const ENUM = ["apple", "banana", "cherry"];
+
+const Harness = ({
+  onSubmit = vi.fn(),
+  defaultValue,
+  onReady,
+}: {
+  defaultValue?: string;
+  onReady?: (reset: (value: string) => void) => void;
+  onSubmit?: (values: FieldValues) => void;
+}) => {
+  const form = useForm({
+    defaultValues: { fruit: defaultValue } as FieldValues,
+  });
+
+  onReady?.(value => form.reset({ fruit: value }));
+
+  return (
+    <Form form={form} onSubmit={onSubmit}>
+      <FormField
+        control={form.control}
+        name="fruit"
+        render={({ field }) => (
+          <AutoFormRadioGroup
+            description="Pick one"
+            field={field}
+            label="Fruit"
+            labels={[
+              { value: "apple", label: "Apple" },
+              { value: "banana", label: "Banana" },
+              { value: "cherry", label: "Cherry" },
+            ]}
+            otherProps={{ enum: ENUM, isOptional: false }}
+          />
+        )}
+      />
+      <button type="submit">submit</button>
+    </Form>
+  );
+};
+
+describe("AutoFormRadioGroup", () => {
+  let errorSpy: ReturnType<typeof vi.spyOn>;
+
+  beforeEach(() => {
+    errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    errorSpy.mockRestore();
+  });
+
+  it("renders label, description and one radio per enum value", () => {
+    render(<Harness />);
+
+    expect(screen.getByText("Fruit")).toBeDefined();
+    expect(screen.getByText("Pick one")).toBeDefined();
+    expect(screen.getAllByRole("radio")).toHaveLength(ENUM.length);
+    expect(screen.getByText("Apple")).toBeDefined();
+    expect(screen.getByText("Banana")).toBeDefined();
+    expect(screen.getByText("Cherry")).toBeDefined();
+  });
+
+  it("reflects the initial form value as the checked radio", () => {
+    render(<Harness defaultValue="banana" />);
+
+    const banana = screen.getByRole("radio", { name: "Banana" });
+    expect(banana.getAttribute("aria-checked")).toBe("true");
+  });
+
+  it("submits the selected value", async () => {
+    const onSubmit = vi.fn();
+    render(<Harness onSubmit={onSubmit} />);
+
+    fireEvent.click(screen.getByRole("radio", { name: "Cherry" }));
+    fireEvent.click(screen.getByRole("button", { name: "submit" }));
+
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledWith(
+        { fruit: "cherry" },
+        expect.anything(),
+      );
+    });
+  });
+
+  it("stays controlled when the value arrives after mount without warning", async () => {
+    let reset: ((value: string) => void) | undefined;
+    render(<Harness onReady={fn => (reset = fn)} />);
+
+    expect(
+      screen.getByRole("radio", { name: "Apple" }).getAttribute("aria-checked"),
+    ).toBe("false");
+
+    reset?.("cherry");
+
+    await waitFor(() => {
+      expect(
+        screen
+          .getByRole("radio", { name: "Cherry" })
+          .getAttribute("aria-checked"),
+      ).toBe("true");
+    });
+
+    const warned = errorSpy.mock.calls.some(call =>
+      call.some(
+        arg =>
+          typeof arg === "string" &&
+          arg.includes("changing the default value state"),
+      ),
+    );
+    expect(warned).toBe(false);
+  });
+});
diff --git a/packages/vitnode/src/components/form/fields/radio-group.tsx b/packages/vitnode/src/components/form/fields/radio-group.tsx
index 78e934f12..62b2aa76e 100644
--- a/packages/vitnode/src/components/form/fields/radio-group.tsx
+++ b/packages/vitnode/src/components/form/fields/radio-group.tsx
@@ -60,9 +60,9 @@ export const AutoFormRadioGroup = ({
 
       <FormControl>
         <RadioGroup
-          defaultValue={field.value}
           disabled={props.disabled}
           onValueChange={field.onChange}
+          value={field.value ?? null}
           {...props}
         >
           {values.map(({ value, label, description, disabled }) =>
diff --git a/packages/vitnode/src/components/form/fields/select.test.tsx b/packages/vitnode/src/components/form/fields/select.test.tsx
new file mode 100644
index 000000000..5f6bbd3a3
--- /dev/null
+++ b/packages/vitnode/src/components/form/fields/select.test.tsx
@@ -0,0 +1,120 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { type FieldValues, useForm } from "react-hook-form";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { Form, FormField } from "@/components/ui/form";
+
+import { AutoFormSelect } from "./select";
+
+vi.mock("next-intl", () => ({
+  useLocale: () => "en",
+  useTranslations: () => (key: string) => key,
+}));
+
+const ENUM = ["apple", "banana", "cherry"];
+
+const Harness = ({
+  onSubmit = vi.fn(),
+  defaultValue,
+  onReady,
+}: {
+  defaultValue?: string;
+  onReady?: (reset: (value: string) => void) => void;
+  onSubmit?: (values: FieldValues) => void;
+}) => {
+  const form = useForm({
+    defaultValues: { fruit: defaultValue } as FieldValues,
+  });
+
+  onReady?.(value => form.reset({ fruit: value }));
+
+  return (
+    <Form form={form} onSubmit={onSubmit}>
+      <FormField
+        control={form.control}
+        name="fruit"
+        render={({ field }) => (
+          <AutoFormSelect
+            description="Pick one"
+            field={field}
+            label="Fruit"
+            labels={[
+              { value: "apple", label: "Apple" },
+              { value: "banana", label: "Banana" },
+              { value: "cherry", label: "Cherry" },
+            ]}
+            otherProps={{ enum: ENUM, isOptional: false }}
+          />
+        )}
+      />
+      <button type="submit">submit</button>
+    </Form>
+  );
+};
+
+describe("AutoFormSelect", () => {
+  let errorSpy: ReturnType<typeof vi.spyOn>;
+
+  beforeEach(() => {
+    errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    Element.prototype.scrollIntoView = vi.fn();
+    Element.prototype.hasPointerCapture = vi.fn(() => false);
+    Element.prototype.setPointerCapture = vi.fn();
+    Element.prototype.releasePointerCapture = vi.fn();
+  });
+
+  afterEach(() => {
+    errorSpy.mockRestore();
+  });
+
+  it("renders label and description", () => {
+    render(<Harness />);
+
+    expect(screen.getByText("Fruit")).toBeDefined();
+    expect(screen.getByText("Pick one")).toBeDefined();
+  });
+
+  it("reflects the initial form value on the trigger", () => {
+    render(<Harness defaultValue="banana" />);
+
+    expect(screen.getByRole("combobox").textContent).toContain("Banana");
+  });
+
+  it("submits the selected value", async () => {
+    const onSubmit = vi.fn();
+    render(<Harness onSubmit={onSubmit} />);
+
+    fireEvent.click(screen.getByRole("combobox"));
+    const option = await screen.findByRole("option", { name: "Cherry" });
+    fireEvent.pointerDown(option);
+    fireEvent.click(option);
+    fireEvent.click(screen.getByRole("button", { name: "submit" }));
+
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledWith(
+        { fruit: "cherry" },
+        expect.anything(),
+      );
+    });
+  });
+
+  it("stays controlled when the value arrives after mount without warning", async () => {
+    let reset: ((value: string) => void) | undefined;
+    render(<Harness onReady={fn => (reset = fn)} />);
+
+    reset?.("cherry");
+
+    await waitFor(() => {
+      expect(screen.getByRole("combobox").textContent).toContain("Cherry");
+    });
+
+    const warned = errorSpy.mock.calls.some(call =>
+      call.some(
+        arg =>
+          typeof arg === "string" &&
+          arg.includes("changing the default value state"),
+      ),
+    );
+    expect(warned).toBe(false);
+  });
+});
diff --git a/packages/vitnode/src/components/form/fields/select.tsx b/packages/vitnode/src/components/form/fields/select.tsx
index 9e1bd6575..0e5eea8fd 100644
--- a/packages/vitnode/src/components/form/fields/select.tsx
+++ b/packages/vitnode/src/components/form/fields/select.tsx
@@ -52,8 +52,8 @@ export const AutoFormSelect = ({
 
       <FormControl>
         <Select
-          defaultValue={field.value}
           items={values}
+          value={field.value ?? null}
           {...props}
           onValueChange={(value, eventDetails) => {
             field.onChange(value);
diff --git a/packages/vitnode/src/components/ui/editor.test.tsx b/packages/vitnode/src/components/ui/editor.test.tsx
new file mode 100644
index 000000000..b52560505
--- /dev/null
+++ b/packages/vitnode/src/components/ui/editor.test.tsx
@@ -0,0 +1,46 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+const hoisted = vi.hoisted(() => ({
+  onUpdate: undefined as
+    ((props: { editor: { getHTML: () => string } }) => void) | undefined,
+}));
+
+vi.mock("@tiptap/react", () => ({
+  EditorContent: () => null,
+  useEditor: (config: {
+    onUpdate?: (props: { editor: { getHTML: () => string } }) => void;
+  }) => {
+    hoisted.onUpdate = config.onUpdate;
+
+    return { getHTML: () => "<p>from-editor</p>" };
+  },
+}));
+
+vi.mock("@/components/tiptap/toolbar/tiptap-toolbar", () => ({
+  TipTapToolbar: () => null,
+}));
+
+import { Editor } from "./editor";
+
+describe("Editor", () => {
+  it("merges a custom className onto the wrapper", () => {
+    const { container } = render(
+      <Editor className="my-editor" value="<p>x</p>" />,
+    );
+    const wrapper = container.firstChild as HTMLElement;
+
+    expect(wrapper.classList.contains("my-editor")).toBe(true);
+    // Regression: the class list must not contain the literal "className" key.
+    expect(wrapper.classList.contains("className")).toBe(false);
+  });
+
+  it("emits the current html through onChange on update", () => {
+    const onChange = vi.fn();
+    render(<Editor onChange={onChange} value="<p>x</p>" />);
+
+    hoisted.onUpdate?.({ editor: { getHTML: () => "<p>changed</p>" } });
+
+    expect(onChange).toHaveBeenCalledWith("<p>changed</p>");
+  });
+});
diff --git a/packages/vitnode/src/components/ui/editor.tsx b/packages/vitnode/src/components/ui/editor.tsx
index 32caf2247..1ee434da8 100644
--- a/packages/vitnode/src/components/ui/editor.tsx
+++ b/packages/vitnode/src/components/ui/editor.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import type React from "react";
+
 import { EditorContent, useEditor } from "@tiptap/react";
 
 import { tiptapExtensions } from "@/components/tiptap/extension";
@@ -12,9 +14,12 @@ export const Editor = ({
   className,
   disableScroll,
   value = "",
-}: {
-  className?: string;
+  onChange,
+  onBlur,
+  ...props
+}: Omit<React.ComponentProps<"div">, "onChange"> & {
   disableScroll?: boolean;
+  onChange?: (value: string) => void;
   value?: string;
 }) => {
   const editor = useEditor({
@@ -26,16 +31,22 @@ export const Editor = ({
     },
     content: value,
     immediatelyRender: false,
+    onUpdate: ({ editor: currentEditor }) => {
+      onChange?.(currentEditor.getHTML());
+    },
   });
 
   if (!editor) return <Loader />;
 
   return (
     <div
-      className={cn("bg-card relative w-full rounded-md border shadow-xs", {
-        "max-h-80 overflow-hidden overflow-y-scroll": !disableScroll,
+      className={cn(
+        "bg-card relative w-full rounded-md border shadow-xs",
+        { "max-h-80 overflow-hidden overflow-y-scroll": !disableScroll },
         className,
-      })}
+      )}
+      onBlur={onBlur}
+      {...props}
     >
       <TipTapToolbar editor={editor} />
       <EditorContent
diff --git a/packages/vitnode/src/views/admin/views/core/test.tsx b/packages/vitnode/src/views/admin/views/core/test.tsx
index 0c9e07dca..aa8d610cb 100644
--- a/packages/vitnode/src/views/admin/views/core/test.tsx
+++ b/packages/vitnode/src/views/admin/views/core/test.tsx
@@ -7,6 +7,7 @@ import { AutoForm } from "@/components/form/auto-form";
 import { AutoFormArray } from "@/components/form/fields/array";
 import { AutoFormCheckbox } from "@/components/form/fields/checkbox";
 import { AutoFormCombobox } from "@/components/form/fields/combobox";
+import { AutoFormEditor } from "@/components/form/fields/editor";
 import { AutoFormInput } from "@/components/form/fields/input";
 import { AutoFormRadioGroup } from "@/components/form/fields/radio-group";
 import { AutoFormSelect } from "@/components/form/fields/select";
@@ -19,6 +20,10 @@ import { InputGroupAddon, InputGroupText } from "@/components/ui/input-group";
 
 export const TestView = () => {
   const formSchema = z.object({
+    editor: z
+      .string()
+      .describe("This is the editor for your application.")
+      .default("<p>Hello World! 🌎️</p>"),
     provider: z
       .string()
       .min(1, { message: "Provider is required" })
@@ -75,6 +80,10 @@ export const TestView = () => {
 
         <AutoForm
           fields={[
+            {
+              id: "editor",
+              component: props => <AutoFormEditor {...props} label="Editor" />,
+            },
             {
               id: "provider",
               component: props => (

From 30bffe64999e4a9dd3e64a3c23f6fe99375fac4c Mon Sep 17 00:00:00 2001
From: aXenDeveloper <axendeveloper@gmail.com>
Date: Tue, 7 Jul 2026 22:10:52 +0200
Subject: [PATCH 2/2] =?UTF-8?q?chore(config):=20=E2=9C=A8=20update=20exclu?=
 =?UTF-8?q?de=20patterns=20in=20tsconfig=20and=20.swcrc=20files?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-vitnode-app/copy-of-vitnode-plugin/root/.swcrc    | 1 +
 .../copy-of-vitnode-plugin/root/tsconfig.build.json          | 5 +++++
 packages/create-vitnode-app/package.json                     | 2 +-
 .../src/plugin/create/create-package-json.ts                 | 4 ++--
 packages/create-vitnode-app/tsconfig.build.json              | 5 +++++
 packages/node-cron/.swcrc                                    | 1 +
 packages/node-cron/package.json                              | 4 ++--
 packages/node-cron/tsconfig.build.json                       | 5 +++++
 packages/nodemailer/.swcrc                                   | 1 +
 packages/nodemailer/package.json                             | 4 ++--
 packages/nodemailer/tsconfig.build.json                      | 5 +++++
 packages/resend/.swcrc                                       | 1 +
 packages/resend/package.json                                 | 4 ++--
 packages/resend/tsconfig.build.json                          | 5 +++++
 packages/s3/.swcrc                                           | 1 +
 packages/s3/package.json                                     | 4 ++--
 packages/s3/tsconfig.build.json                              | 5 +++++
 packages/supabase-storage/.swcrc                             | 1 +
 packages/supabase-storage/package.json                       | 4 ++--
 packages/supabase-storage/tsconfig.build.json                | 5 +++++
 packages/vitnode/.swcrc                                      | 1 +
 packages/vitnode/package.json                                | 4 ++--
 packages/vitnode/tsconfig.build.json                         | 5 +++++
 plugins/blog/.swcrc                                          | 1 +
 plugins/blog/package.json                                    | 4 ++--
 plugins/blog/tsconfig.build.json                             | 5 +++++
 26 files changed, 70 insertions(+), 17 deletions(-)
 create mode 100644 packages/create-vitnode-app/copy-of-vitnode-plugin/root/tsconfig.build.json
 create mode 100644 packages/create-vitnode-app/tsconfig.build.json
 create mode 100644 packages/node-cron/tsconfig.build.json
 create mode 100644 packages/nodemailer/tsconfig.build.json
 create mode 100644 packages/resend/tsconfig.build.json
 create mode 100644 packages/s3/tsconfig.build.json
 create mode 100644 packages/supabase-storage/tsconfig.build.json
 create mode 100644 packages/vitnode/tsconfig.build.json
 create mode 100644 plugins/blog/tsconfig.build.json

diff --git a/packages/create-vitnode-app/copy-of-vitnode-plugin/root/.swcrc b/packages/create-vitnode-app/copy-of-vitnode-plugin/root/.swcrc
index eba97079c..8f099dc7a 100644
--- a/packages/create-vitnode-app/copy-of-vitnode-plugin/root/.swcrc
+++ b/packages/create-vitnode-app/copy-of-vitnode-plugin/root/.swcrc
@@ -1,5 +1,6 @@
 {
   "$schema": "https://swc.rs/schema.json",
+  "exclude": ["\\.test\\.tsx?$"],
   "minify": true,
   "jsc": {
     "baseUrl": "./",
diff --git a/packages/create-vitnode-app/copy-of-vitnode-plugin/root/tsconfig.build.json b/packages/create-vitnode-app/copy-of-vitnode-plugin/root/tsconfig.build.json
new file mode 100644
index 000000000..997f1529d
--- /dev/null
+++ b/packages/create-vitnode-app/copy-of-vitnode-plugin/root/tsconfig.build.json
@@ -0,0 +1,5 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx"]
+}
diff --git a/packages/create-vitnode-app/package.json b/packages/create-vitnode-app/package.json
index e75459a0b..b25c161d5 100644
--- a/packages/create-vitnode-app/package.json
+++ b/packages/create-vitnode-app/package.json
@@ -22,7 +22,7 @@
     "eslint-react"
   ],
   "scripts": {
-    "build:scripts": "tsc && node dist/src/prepare/prepare.js",
+    "build:scripts": "tsc -p tsconfig.build.json && node dist/src/prepare/prepare.js",
     "start:scripts": "node dist/src/index.js",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"
diff --git a/packages/create-vitnode-app/src/plugin/create/create-package-json.ts b/packages/create-vitnode-app/src/plugin/create/create-package-json.ts
index c08f862f3..cb9e9d6ed 100644
--- a/packages/create-vitnode-app/src/plugin/create/create-package-json.ts
+++ b/packages/create-vitnode-app/src/plugin/create/create-package-json.ts
@@ -27,8 +27,8 @@ export const createPluginPackageJSON = async ({
     type: "module",
     scripts: {
       "build:plugins":
-        "tsc && swc src -d dist --config-file .swcrc && tsc-alias -p tsconfig.json",
-      dev: 'concurrently "tsc -w --preserveWatchOutput" "swc src -d dist --config-file .swcrc -w" "tsc-alias -w" "vitnode plugin --w"',
+        "tsc -p tsconfig.build.json && swc src -d dist --config-file .swcrc && tsc-alias -p tsconfig.build.json",
+      dev: 'concurrently "tsc -w -p tsconfig.build.json --preserveWatchOutput" "swc src -d dist --config-file .swcrc -w" "tsc-alias -w -p tsconfig.build.json" "vitnode plugin --w"',
       "dev:email": "email dev --dir src/emails",
       ...withIf(eslint, {
         lint: "turbo lint",
diff --git a/packages/create-vitnode-app/tsconfig.build.json b/packages/create-vitnode-app/tsconfig.build.json
new file mode 100644
index 000000000..e15e9be99
--- /dev/null
+++ b/packages/create-vitnode-app/tsconfig.build.json
@@ -0,0 +1,5 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.test.tsx"]
+}
diff --git a/packages/node-cron/.swcrc b/packages/node-cron/.swcrc
index eba97079c..8f099dc7a 100644
--- a/packages/node-cron/.swcrc
+++ b/packages/node-cron/.swcrc
@@ -1,5 +1,6 @@
 {
   "$schema": "https://swc.rs/schema.json",
+  "exclude": ["\\.test\\.tsx?$"],
   "minify": true,
   "jsc": {
     "baseUrl": "./",
diff --git a/packages/node-cron/package.json b/packages/node-cron/package.json
index 973a400cb..625bf1f0b 100644
--- a/packages/node-cron/package.json
+++ b/packages/node-cron/package.json
@@ -25,8 +25,8 @@
     }
   },
   "scripts": {
-    "build:plugins": "tsc && swc src -d dist --config-file .swcrc && tsc-alias -p tsconfig.json",
-    "dev:plugins": "concurrently \"tsc -w --preserveWatchOutput\" \"swc src -d dist --config-file .swcrc -w\" \"tsc-alias -w\"",
+    "build:plugins": "tsc -p tsconfig.build.json && swc src -d dist --config-file .swcrc && tsc-alias -p tsconfig.build.json",
+    "dev:plugins": "concurrently \"tsc -w -p tsconfig.build.json --preserveWatchOutput\" \"swc src -d dist --config-file .swcrc -w\" \"tsc-alias -w -p tsconfig.build.json\"",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"
   },
diff --git a/packages/node-cron/tsconfig.build.json b/packages/node-cron/tsconfig.build.json
new file mode 100644
index 000000000..997f1529d
--- /dev/null
+++ b/packages/node-cron/tsconfig.build.json
@@ -0,0 +1,5 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx"]
+}
diff --git a/packages/nodemailer/.swcrc b/packages/nodemailer/.swcrc
index eba97079c..8f099dc7a 100644
--- a/packages/nodemailer/.swcrc
+++ b/packages/nodemailer/.swcrc
@@ -1,5 +1,6 @@
 {
   "$schema": "https://swc.rs/schema.json",
+  "exclude": ["\\.test\\.tsx?$"],
   "minify": true,
   "jsc": {
     "baseUrl": "./",
diff --git a/packages/nodemailer/package.json b/packages/nodemailer/package.json
index 485b77ab5..99a0ec7b3 100644
--- a/packages/nodemailer/package.json
+++ b/packages/nodemailer/package.json
@@ -24,8 +24,8 @@
     }
   },
   "scripts": {
-    "build:plugins": "tsc && swc src -d dist --config-file .swcrc && tsc-alias -p tsconfig.json",
-    "dev:plugins": "concurrently \"tsc -w --preserveWatchOutput\" \"swc src -d dist --config-file .swcrc -w\" \"tsc-alias -w\"",
+    "build:plugins": "tsc -p tsconfig.build.json && swc src -d dist --config-file .swcrc && tsc-alias -p tsconfig.build.json",
+    "dev:plugins": "concurrently \"tsc -w -p tsconfig.build.json --preserveWatchOutput\" \"swc src -d dist --config-file .swcrc -w\" \"tsc-alias -w -p tsconfig.build.json\"",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"
   },
diff --git a/packages/nodemailer/tsconfig.build.json b/packages/nodemailer/tsconfig.build.json
new file mode 100644
index 000000000..997f1529d
--- /dev/null
+++ b/packages/nodemailer/tsconfig.build.json
@@ -0,0 +1,5 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx"]
+}
diff --git a/packages/resend/.swcrc b/packages/resend/.swcrc
index eba97079c..8f099dc7a 100644
--- a/packages/resend/.swcrc
+++ b/packages/resend/.swcrc
@@ -1,5 +1,6 @@
 {
   "$schema": "https://swc.rs/schema.json",
+  "exclude": ["\\.test\\.tsx?$"],
   "minify": true,
   "jsc": {
     "baseUrl": "./",
diff --git a/packages/resend/package.json b/packages/resend/package.json
index 751f6cb2a..9f58e9061 100644
--- a/packages/resend/package.json
+++ b/packages/resend/package.json
@@ -23,8 +23,8 @@
     }
   },
   "scripts": {
-    "build:plugins": "tsc && swc src -d dist --config-file .swcrc && tsc-alias -p tsconfig.json",
-    "dev:plugins": "concurrently \"tsc -w --preserveWatchOutput\" \"swc src -d dist --config-file .swcrc -w\" \"tsc-alias -w\"",
+    "build:plugins": "tsc -p tsconfig.build.json && swc src -d dist --config-file .swcrc && tsc-alias -p tsconfig.build.json",
+    "dev:plugins": "concurrently \"tsc -w -p tsconfig.build.json --preserveWatchOutput\" \"swc src -d dist --config-file .swcrc -w\" \"tsc-alias -w -p tsconfig.build.json\"",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"
   },
diff --git a/packages/resend/tsconfig.build.json b/packages/resend/tsconfig.build.json
new file mode 100644
index 000000000..997f1529d
--- /dev/null
+++ b/packages/resend/tsconfig.build.json
@@ -0,0 +1,5 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx"]
+}
diff --git a/packages/s3/.swcrc b/packages/s3/.swcrc
index eba97079c..8f099dc7a 100644
--- a/packages/s3/.swcrc
+++ b/packages/s3/.swcrc
@@ -1,5 +1,6 @@
 {
   "$schema": "https://swc.rs/schema.json",
+  "exclude": ["\\.test\\.tsx?$"],
   "minify": true,
   "jsc": {
     "baseUrl": "./",
diff --git a/packages/s3/package.json b/packages/s3/package.json
index 547d26574..19db36a0f 100644
--- a/packages/s3/package.json
+++ b/packages/s3/package.json
@@ -25,8 +25,8 @@
     }
   },
   "scripts": {
-    "build:plugins": "tsc && swc src -d dist --config-file .swcrc && tsc-alias -p tsconfig.json",
-    "dev:plugins": "concurrently \"tsc -w --preserveWatchOutput\" \"swc src -d dist --config-file .swcrc -w\" \"tsc-alias -w\"",
+    "build:plugins": "tsc -p tsconfig.build.json && swc src -d dist --config-file .swcrc && tsc-alias -p tsconfig.build.json",
+    "dev:plugins": "concurrently \"tsc -w -p tsconfig.build.json --preserveWatchOutput\" \"swc src -d dist --config-file .swcrc -w\" \"tsc-alias -w -p tsconfig.build.json\"",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"
   },
diff --git a/packages/s3/tsconfig.build.json b/packages/s3/tsconfig.build.json
new file mode 100644
index 000000000..997f1529d
--- /dev/null
+++ b/packages/s3/tsconfig.build.json
@@ -0,0 +1,5 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx"]
+}
diff --git a/packages/supabase-storage/.swcrc b/packages/supabase-storage/.swcrc
index eba97079c..8f099dc7a 100644
--- a/packages/supabase-storage/.swcrc
+++ b/packages/supabase-storage/.swcrc
@@ -1,5 +1,6 @@
 {
   "$schema": "https://swc.rs/schema.json",
+  "exclude": ["\\.test\\.tsx?$"],
   "minify": true,
   "jsc": {
     "baseUrl": "./",
diff --git a/packages/supabase-storage/package.json b/packages/supabase-storage/package.json
index 520ab2b59..0cb93a69c 100644
--- a/packages/supabase-storage/package.json
+++ b/packages/supabase-storage/package.json
@@ -24,8 +24,8 @@
     }
   },
   "scripts": {
-    "build:plugins": "tsc && swc src -d dist --config-file .swcrc && tsc-alias -p tsconfig.json",
-    "dev:plugins": "concurrently \"tsc -w --preserveWatchOutput\" \"swc src -d dist --config-file .swcrc -w\" \"tsc-alias -w\"",
+    "build:plugins": "tsc -p tsconfig.build.json && swc src -d dist --config-file .swcrc && tsc-alias -p tsconfig.build.json",
+    "dev:plugins": "concurrently \"tsc -w -p tsconfig.build.json --preserveWatchOutput\" \"swc src -d dist --config-file .swcrc -w\" \"tsc-alias -w -p tsconfig.build.json\"",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"
   },
diff --git a/packages/supabase-storage/tsconfig.build.json b/packages/supabase-storage/tsconfig.build.json
new file mode 100644
index 000000000..997f1529d
--- /dev/null
+++ b/packages/supabase-storage/tsconfig.build.json
@@ -0,0 +1,5 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx"]
+}
diff --git a/packages/vitnode/.swcrc b/packages/vitnode/.swcrc
index eba97079c..8f099dc7a 100644
--- a/packages/vitnode/.swcrc
+++ b/packages/vitnode/.swcrc
@@ -1,5 +1,6 @@
 {
   "$schema": "https://swc.rs/schema.json",
+  "exclude": ["\\.test\\.tsx?$"],
   "minify": true,
   "jsc": {
     "baseUrl": "./",
diff --git a/packages/vitnode/package.json b/packages/vitnode/package.json
index 0c09772fb..95dcddb18 100644
--- a/packages/vitnode/package.json
+++ b/packages/vitnode/package.json
@@ -98,8 +98,8 @@
   "scripts": {
     "build:scripts": "tsup",
     "start:scripts": "node dist/scripts/scripts.js init",
-    "build:plugins": "tsc && swc src -d dist --config-file .swcrc && tsc-alias -p tsconfig.json",
-    "dev": "concurrently \"tsc -w --preserveWatchOutput\" \"swc src -d dist --config-file .swcrc -w\" \"tsc-alias -w\" \"node dist/scripts/scripts.js plugin --w\"",
+    "build:plugins": "tsc -p tsconfig.build.json && swc src -d dist --config-file .swcrc && tsc-alias -p tsconfig.build.json",
+    "dev": "concurrently \"tsc -w -p tsconfig.build.json --preserveWatchOutput\" \"swc src -d dist --config-file .swcrc -w\" \"tsc-alias -w -p tsconfig.build.json\" \"node dist/scripts/scripts.js plugin --w\"",
     "dev:email": "email dev --dir src/emails",
     "test": "vitest run",
     "test:watch": "vitest",
diff --git a/packages/vitnode/tsconfig.build.json b/packages/vitnode/tsconfig.build.json
new file mode 100644
index 000000000..997f1529d
--- /dev/null
+++ b/packages/vitnode/tsconfig.build.json
@@ -0,0 +1,5 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx"]
+}
diff --git a/plugins/blog/.swcrc b/plugins/blog/.swcrc
index eba97079c..8f099dc7a 100644
--- a/plugins/blog/.swcrc
+++ b/plugins/blog/.swcrc
@@ -1,5 +1,6 @@
 {
   "$schema": "https://swc.rs/schema.json",
+  "exclude": ["\\.test\\.tsx?$"],
   "minify": true,
   "jsc": {
     "baseUrl": "./",
diff --git a/plugins/blog/package.json b/plugins/blog/package.json
index c32a38f84..bffe3de1c 100644
--- a/plugins/blog/package.json
+++ b/plugins/blog/package.json
@@ -27,8 +27,8 @@
     }
   },
   "scripts": {
-    "build:plugins": "tsc && swc src -d dist --config-file .swcrc && tsc-alias -p tsconfig.json",
-    "dev": "concurrently \"tsc -w --preserveWatchOutput\" \"swc src -d dist --config-file .swcrc -w\" \"tsc-alias -w\" \"vitnode plugin --w\"",
+    "build:plugins": "tsc -p tsconfig.build.json && swc src -d dist --config-file .swcrc && tsc-alias -p tsconfig.build.json",
+    "dev": "concurrently \"tsc -w -p tsconfig.build.json --preserveWatchOutput\" \"swc src -d dist --config-file .swcrc -w\" \"tsc-alias -w -p tsconfig.build.json\" \"vitnode plugin --w\"",
     "dev:email": "email dev --dir src/emails",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"
diff --git a/plugins/blog/tsconfig.build.json b/plugins/blog/tsconfig.build.json
new file mode 100644
index 000000000..997f1529d
--- /dev/null
+++ b/plugins/blog/tsconfig.build.json
@@ -0,0 +1,5 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx"]
+}