proje-react-panel 1.8.0 → 1.9.0

package/how_to.md

@@ -12,7 +12,7 @@ For deep walkthroughs see [`guides/IMPLEMENTATION_GUIDE.md`](./guides/IMPLEMENTA
 - `<Panel>`, `<Layout>`, `<Login>` — app shell, sidebar, and login page.
 - `<Dashboard>`, `<DashboardGrid>`, `<DashboardItem>`, `<Counter>` — dashboard widgets.
 - `initApi`, `setAuthToken`, `getAll`, `getOne`, `create`, `update`, `remove`, `createFormData`, `updateFormData` — backend wiring helpers.
-- Decorators: `@List`, `@Form`, `@Details`, `@Cell`, `@LinkCell`, `@ImageCell`, `@DownloadCell`, `@Input`, `@SelectInput`, `@DetailsItem`.
+- Decorators: `@List`, `@Form`, `@Details`, `@Cell`, `@LinkCell`, `@ImageCell`, `@DownloadCell`, `@Input`, `@SelectInput`, `@RichTextInput`, `@CustomInput`, `@DetailsItem`.
 
 See the full export surface in [`src/index.ts`](./src/index.ts).
 
@@ -22,16 +22,16 @@ See the full export surface in [`src/index.ts`](./src/index.ts).
 
 The library is built against a plain REST backend with these conventions. Any backend that respects them will work — a compatible NestJS reference implementation is available as a sibling project; use it as a starting point if you don't have a backend yet.
 
-| Concern | Shape |
-| --- | --- |
-| Auth header | `Authorization: Bearer <jwt>` on every protected request |
-| Login | `POST /auth/login` → `{ access_token, admin: { id, email } }` |
-| List | `GET /:resource?page=<n>&limit=<n>` → `{ total: number, data: T[] }` |
-| Item | `GET /:resource/:id` → entity JSON (no envelope) |
-| Mutations | `POST /:resource`, `PUT /:resource/:id`, `DELETE /:resource/:id` |
-| File upload | `multipart/form-data`, field name `file` |
-| Errors | `{ statusCode, message, error }` (NestJS default works out of the box) |
-| 401 | The library auto-clears the token and redirects to `/login` |
+| Concern     | Shape                                                                  |
+| ----------- | ---------------------------------------------------------------------- |
+| Auth header | `Authorization: Bearer <jwt>` on every protected request               |
+| Login       | `POST /auth/login` → `{ access_token, admin: { id, email } }`          |
+| List        | `GET /:resource?page=<n>&limit=<n>` → `{ total: number, data: T[] }`   |
+| Item        | `GET /:resource/:id` → entity JSON (no envelope)                       |
+| Mutations   | `POST /:resource`, `PUT /:resource/:id`, `DELETE /:resource/:id`       |
+| File upload | `multipart/form-data`, field name `file`                               |
+| Errors      | `{ statusCode, message, error }` (NestJS default works out of the box) |
+| 401         | The library auto-clears the token and redirects to `/login`            |
 
 ---
 
@@ -65,6 +65,12 @@ npm install proje-react-panel \
 
 Peer-dep versions: `react >= 19`, `react-router 7.3.0`, `react-hook-form >= 7.54.2`, `zustand >= 5.0.3`, `axios >= 1.0.0`, `react-select ^5.10.1`, `use-sync-external-store >= 1.4.0` (see [`package.json`](./package.json)).
 
+Rich text (`@RichTextInput`) needs two more packages, and only if you use it — they are declared **optional** peer dependencies, so npm/yarn will not pull them into panels that have no richtext field:
+
+```bash
+npm install @tiptap/react @tiptap/starter-kit
+```
+
 ### 4.2 Initialize at app root
 
 ```ts
@@ -92,11 +98,11 @@ import { ProductList, CreateProductForm, EditProductForm, ProductDetails } from
 
 export const dataFetchers = Object.freeze({
   products: {
-    getAll:  getAll<ProductList>('products'),
+    getAll: getAll<ProductList>('products'),
     details: getOne<ProductDetails>('products'),
-    create:  create<CreateProductForm>('products'),
-    update:  update<EditProductForm>('products'),
-    remove:  remove('products', 'id'),
+    create: create<CreateProductForm>('products'),
+    update: update<EditProductForm>('products'),
+    remove: remove('products', 'id'),
   },
 });
 ```
@@ -138,10 +144,10 @@ import { ListPage, FormPage, DetailsPage } from 'proje-react-panel';
 import { ProductList, CreateProductForm, ProductDetails } from './models/Product';
 
 <Route path="products">
-  <Route path=""        element={<ListPage    model={ProductList} />} />
-  <Route path="create"  element={<FormPage    model={CreateProductForm} />} />
-  <Route path=":id"     element={<DetailsPage model={ProductDetails} />} />
-</Route>
+  <Route path="" element={<ListPage model={ProductList} />} />
+  <Route path="create" element={<FormPage model={CreateProductForm} />} />
+  <Route path=":id" element={<DetailsPage model={ProductDetails} />} />
+</Route>;
 ```
 
 That's it — you have a fully functional list / create / detail flow against `GET|POST|GET /products`.
@@ -156,7 +162,119 @@ A complete worked example lives in [`examples/src/models/Asset.ts`](./examples/s
 
 ---
 
-## 6. Login & 401
+## 6. Form field types
+
+Beyond `@Input`, a field can opt into a richer control. Each decorator is a drop-in replacement for `@Input` on the property.
+
+### 6.1 `@SelectInput` — dropdown
+
+```ts
+@Form({ onSubmit: dataFetchers.products.create })
+export class CreateProductForm {
+  @SelectInput({ label: 'Category', defaultOptions: [{ label: 'Books', value: 'books' }] })
+  category!: string;
+
+  @SelectInput({
+    label: 'Owner',
+    onSelectPreloader: async () => (await listUsers()).map(u => ({ label: u.email, value: u.id })),
+  })
+  ownerId!: string;
+}
+```
+
+| Option              | Meaning                                                                 |
+| ------------------- | ----------------------------------------------------------------------- |
+| `defaultOptions`    | Options known up front                                                  |
+| `onSelectPreloader` | `async () => { label, value }[]`, fetched once and cached across fields |
+
+### 6.2 `@RichTextInput` — rich text
+
+Renders a TipTap editor and stores **HTML** in the field. Requires the optional peers from §4.1; without them the field renders an "install these packages" notice and the rest of the panel keeps working.
+
+```ts
+import { Form, Input, RichTextInput } from 'proje-react-panel';
+
+@Form({ onSubmit: dataFetchers.articles.create })
+export class CreateArticleForm {
+  @Input({ label: 'Title' })
+  title!: string;
+
+  @RichTextInput({
+    label: 'Body',
+    placeholder: 'Write the article…',
+    toolbar: ['bold', 'italic', 'heading', 'bulletList', 'orderedList', 'link'],
+    minHeight: 240,
+  })
+  body!: string;
+}
+```
+
+| Option        | Meaning                                                                                                                  |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| `toolbar`     | Buttons to show, in order — any of `bold`, `italic`, `heading`, `bulletList`, `orderedList`, `link`. Defaults to all six |
+| `minHeight`   | Editor height in px (default `160`)                                                                                      |
+| `placeholder` | Shown while the document is empty                                                                                        |
+
+Notes:
+
+- The value is an HTML string (`<p>…</p>`); an empty editor reports `''`, so `@IsNotEmpty()` behaves as expected.
+- Values loaded through `@Form({ getDetailsData })` arrive after the form mounts; the editor picks them up without disturbing a caret that is already in the text.
+
+### 6.3 `@CustomInput` — anything else
+
+```ts
+@CustomInput({ label: 'Color', render: ({ value, onChange }) => <ColorPicker value={value} onChange={onChange} /> })
+color!: string;
+```
+
+---
+
+## 7. Grouping form fields
+
+Long forms can be split into sections. Fields opt in with `group`, and `@Form({ groups })` decides the headings and their order:
+
+```ts
+@Form({
+  onSubmit: dataFetchers.articles.create,
+  groups: [
+    { key: 'content', label: 'Content' },
+    { key: 'seo', label: 'SEO', collapsible: true },
+    { key: 'advanced', label: 'Advanced', collapsible: true, defaultCollapsed: true },
+  ],
+})
+export class CreateArticleForm {
+  @Input({ label: 'Title', group: 'content' })
+  title!: string;
+
+  @RichTextInput({ label: 'Body', group: 'content' })
+  body!: string;
+
+  @Input({ label: 'Meta description', type: 'textarea', rows: 4, group: 'seo' })
+  metaDescription!: string;
+
+  @Input({ label: 'Cache key', group: 'advanced' })
+  cacheKey!: string;
+}
+```
+
+| Group option       | Meaning                                                          |
+| ------------------ | ---------------------------------------------------------------- |
+| `key`              | Matched against `@Input({ group })`                              |
+| `label`            | Section heading                                                  |
+| `collapsible`      | Renders as `<details>/<summary>` instead of `<fieldset><legend>` |
+| `defaultCollapsed` | Starts closed (collapsible groups only)                          |
+
+Rules worth knowing:
+
+- **A form where no field sets `group` renders exactly as before** — no extra wrapper element, so existing panel CSS is untouched.
+- Fields without a `group` render first, above the sections, in declaration order.
+- A `group` value missing from `@Form({ groups })` still renders: it is appended after the declared sections and labelled with its own key.
+- `hidden` fields never go into a section.
+- `rows` works on any `type: 'textarea'` field, grouped or not.
+
+---
+
+## 8. Login & 401
 
 - `initAuthToken()` reads `localStorage["token"]` on boot and applies it to axios.
 - `setAuthToken(token)` writes the token to `localStorage` and axios defaults — call it from your login form's success handler (or use the built-in `<Login model={DefaultLoginForm} />`).
@@ -164,21 +282,21 @@ A complete worked example lives in [`examples/src/models/Asset.ts`](./examples/s
 
 ---
 
-## 7. Where to next
+## 9. Where to next
 
-| Topic | File |
-| --- | --- |
+| Topic                                      | File                                                                 |
+| ------------------------------------------ | -------------------------------------------------------------------- |
 | Step-by-step walkthrough (the deepest doc) | [`guides/IMPLEMENTATION_GUIDE.md`](./guides/IMPLEMENTATION_GUIDE.md) |
-| Sidebar + authenticated layout | [`guides/AUTH_LAYOUT_GUIDE.md`](./guides/AUTH_LAYOUT_GUIDE.md) |
-| Layout example code | [`guides/AUTH_LAYOUT_EXAMPLE.md`](./guides/AUTH_LAYOUT_EXAMPLE.md) |
-| Dashboard widgets | [`guides/DASHBOARD_GUIDE.md`](./guides/DASHBOARD_GUIDE.md) |
-| Colors / theme tokens | [`guides/COLOR_SYSTEM_GUIDE.md`](./guides/COLOR_SYSTEM_GUIDE.md) |
-| Feature overview | [`guides/USAGE.md`](./guides/USAGE.md) |
-| Live runnable example | [`examples/`](./examples) |
-| Product/tech doc | [`PTD.md`](./PTD.md) |
+| Sidebar + authenticated layout             | [`guides/AUTH_LAYOUT_GUIDE.md`](./guides/AUTH_LAYOUT_GUIDE.md)       |
+| Layout example code                        | [`guides/AUTH_LAYOUT_EXAMPLE.md`](./guides/AUTH_LAYOUT_EXAMPLE.md)   |
+| Dashboard widgets                          | [`guides/DASHBOARD_GUIDE.md`](./guides/DASHBOARD_GUIDE.md)           |
+| Colors / theme tokens                      | [`guides/COLOR_SYSTEM_GUIDE.md`](./guides/COLOR_SYSTEM_GUIDE.md)     |
+| Feature overview                           | [`guides/USAGE.md`](./guides/USAGE.md)                               |
+| Live runnable example                      | [`examples/`](./examples)                                            |
+| Product/tech doc                           | [`PTD.md`](./PTD.md)                                                 |
 
 ---
 
-## 8. Version & license
+## 10. Version & license
 
-`proje-react-panel` v1.7.0 — ISC license. See [`package.json`](./package.json).
+`proje-react-panel` v1.9.0 — ISC license. See [`package.json`](./package.json).

package/jest.config.js

@@ -10,6 +10,7 @@ export default {
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1',
+    '\\.svg$': '<rootDir>/jest/svgStub.js',
   },
   collectCoverage: true,
   coverageDirectory: 'coverage',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "proje-react-panel",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "type": "module",
   "description": "",
   "author": "SEFA DEMİR",
@@ -32,6 +32,8 @@
     "@svgr/rollup": "^8.1.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
+    "@tiptap/react": "^3.29.2",
+    "@tiptap/starter-kit": "^3.29.2",
     "@types/react": "^19.0.10",
     "@typescript-eslint/eslint-plugin": "^8.26.1",
     "@typescript-eslint/parser": "^8.29.1",
@@ -66,6 +68,8 @@
     "zustand": "^5.0.3"
   },
   "peerDependencies": {
+    "@tiptap/react": "^3.0.0",
+    "@tiptap/starter-kit": "^3.0.0",
     "axios": ">=1.0.0",
     "react": ">=19.0.0",
     "react-hook-form": ">=7.54.2",
@@ -73,5 +77,13 @@
     "react-select": "^5.10.1",
     "use-sync-external-store": ">=1.4.0",
     "zustand": ">=5.0.3"
+  },
+  "peerDependenciesMeta": {
+    "@tiptap/react": {
+      "optional": true
+    },
+    "@tiptap/starter-kit": {
+      "optional": true
+    }
   }
 }

package/src/__tests__/components/form/FormGroups.test.tsx

@@ -0,0 +1,194 @@
+/**
+ * @jest-environment jsdom
+ */
+import { TextDecoder, TextEncoder } from 'util';
+// react-router reads TextEncoder at import time and jsdom has none — set it up before the
+// imports below pull the router in.
+Object.assign(globalThis, { TextEncoder, TextDecoder });
+
+import 'reflect-metadata';
+import React from 'react';
+import { describe, expect, it } from '@jest/globals';
+import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router';
+import { FormProvider, useForm } from 'react-hook-form';
+import { Input, getInputFields } from '../../../decorators/form/Input';
+import { Form, getFormConfiguration } from '../../../decorators/form/Form';
+import { InnerForm } from '../../../components/form/InnerForm';
+import { AnyClass } from '../../../types/AnyClass';
+
+const onSubmit = async () => ({});
+
+@Form({ onSubmit })
+class UngroupedForm {
+  @Input({ label: 'Name' })
+  name: string;
+
+  @Input({ label: 'Slug' })
+  slug: string;
+
+  @Input({ type: 'textarea', label: 'Summary', rows: 6 })
+  summary: string;
+
+  @Input({ type: 'hidden' })
+  id: string;
+}
+
+@Form({
+  onSubmit,
+  groups: [
+    { key: 'content', label: 'Content' },
+    { key: 'seo', label: 'SEO', collapsible: true },
+    { key: 'advanced', label: 'Advanced', collapsible: true, defaultCollapsed: true },
+    // Declared but never used by a field — it must not produce an empty fieldset.
+    { key: 'unused', label: 'Unused' },
+  ],
+})
+class GroupedForm {
+  @Input({ label: 'Title', group: 'content' })
+  title: string;
+
+  @Input({ label: 'Meta title', group: 'seo' })
+  metaTitle: string;
+
+  @Input({ label: 'Body', group: 'content' })
+  body: string;
+
+  @Input({ label: 'Cache key', group: 'advanced' })
+  cacheKey: string;
+
+  // No group at all: stays outside every fieldset.
+  @Input({ label: 'Name' })
+  name: string;
+
+  // Hidden fields never belong to a section, even when they ask for one.
+  @Input({ type: 'hidden', group: 'content' })
+  id: string;
+}
+
+@Form({
+  onSubmit,
+  groups: [{ key: 'content', label: 'Content' }],
+})
+class UndeclaredGroupForm {
+  @Input({ label: 'Notes', group: 'internal' })
+  notes: string;
+
+  @Input({ label: 'Title', group: 'content' })
+  title: string;
+}
+
+function renderForm<T extends AnyClass>(model: new () => T) {
+  const inputs = getInputFields(model as never);
+  const formClass = getFormConfiguration(model as never);
+
+  function Harness() {
+    const form = useForm();
+    return (
+      <MemoryRouter>
+        <FormProvider {...form}>
+          <InnerForm inputs={inputs} formClass={formClass} />
+        </FormProvider>
+      </MemoryRouter>
+    );
+  }
+
+  return render(<Harness />);
+}
+
+const labelsOf = (root: ParentNode) =>
+  Array.from(root.querySelectorAll('.form-field .label span')).map(node => node.textContent);
+
+describe('form field groups', () => {
+  it('leaves a form without groups exactly as it was', () => {
+    const { container } = renderForm(UngroupedForm);
+
+    expect(container.querySelectorAll('fieldset').length).toBe(0);
+    expect(container.querySelectorAll('details').length).toBe(0);
+    expect(labelsOf(container)).toEqual(['Name:', 'Slug:', 'Summary:']);
+
+    // Every field is still a direct child of the form's single wrapper div, in source order.
+    const fields = Array.from(container.querySelectorAll('.form-field'));
+    const wrapper = container.querySelector('form > div');
+    expect(fields.length).toBe(4);
+    fields.forEach(field => expect(field.parentElement).toBe(wrapper));
+    expect(fields[3].querySelector('input')?.getAttribute('type')).toBe('hidden');
+  });
+
+  it('honours rows on a textarea', () => {
+    const { container } = renderForm(UngroupedForm);
+
+    expect(container.querySelector('textarea')?.getAttribute('rows')).toBe('6');
+  });
+
+  it('puts each field in the fieldset its group names', () => {
+    const { container } = renderForm(GroupedForm);
+
+    expect(labelsOf(container.querySelector('fieldset[data-group="content"]')!)).toEqual([
+      'Title:',
+      'Body:',
+    ]);
+    expect(labelsOf(container.querySelector('fieldset[data-group="seo"]')!)).toEqual([
+      'Meta title:',
+    ]);
+    expect(labelsOf(container.querySelector('fieldset[data-group="advanced"]')!)).toEqual([
+      'Cache key:',
+    ]);
+  });
+
+  it('orders the fieldsets like @Form({ groups }) does and skips the empty ones', () => {
+    const { container } = renderForm(GroupedForm);
+
+    const groups = Array.from(container.querySelectorAll('fieldset')).map(fieldset =>
+      fieldset.getAttribute('data-group')
+    );
+    expect(groups).toEqual(['content', 'seo', 'advanced']);
+  });
+
+  it('labels a non-collapsible group with a legend', () => {
+    const { container } = renderForm(GroupedForm);
+
+    const content = container.querySelector('fieldset[data-group="content"]')!;
+    expect(content.querySelector('legend')?.textContent).toBe('Content');
+    expect(content.querySelector('details')).toBeNull();
+  });
+
+  it('renders collapsible groups as details/summary and honours defaultCollapsed', () => {
+    const { container } = renderForm(GroupedForm);
+
+    const seo = container.querySelector('fieldset[data-group="seo"] details') as HTMLDetailsElement;
+    const advanced = container.querySelector(
+      'fieldset[data-group="advanced"] details'
+    ) as HTMLDetailsElement;
+
+    expect(seo.querySelector('summary')?.textContent).toBe('SEO');
+    expect(seo.open).toBe(true);
+    expect(advanced.open).toBe(false);
+  });
+
+  it('keeps ungrouped and hidden fields outside every fieldset', () => {
+    const { container } = renderForm(GroupedForm);
+
+    const wrapper = container.querySelector('form > div')!;
+    const directFields = Array.from(wrapper.children).filter(child =>
+      child.classList.contains('form-field')
+    );
+
+    expect(directFields.length).toBe(2);
+    expect(directFields[0].querySelector('.label span')?.textContent).toBe('Name:');
+    expect(directFields[1].querySelector('input')?.getAttribute('type')).toBe('hidden');
+    expect(container.querySelector('fieldset input[type="hidden"]')).toBeNull();
+  });
+
+  it('appends a group nobody declared at the end, labelled with its key', () => {
+    const { container } = renderForm(UndeclaredGroupForm);
+
+    const groups = Array.from(container.querySelectorAll('fieldset')).map(fieldset =>
+      fieldset.getAttribute('data-group')
+    );
+    expect(groups).toEqual(['content', 'internal']);
+    expect(container.querySelector('fieldset[data-group="internal"] legend')?.textContent).toBe(
+      'internal'
+    );
+  });
+});

package/src/__tests__/components/form/RichTextField.test.tsx

@@ -0,0 +1,181 @@
+/**
+ * @jest-environment jsdom
+ */
+import 'reflect-metadata';
+import React from 'react';
+import { describe, expect, it, beforeEach, jest } from '@jest/globals';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import { FormProvider, useForm, UseFormReturn } from 'react-hook-form';
+import { getInputFields } from '../../../decorators/form/Input';
+import { RichTextInput } from '../../../decorators/form/inputs/RichTextInput';
+import { FormField } from '../../../components/form/FormField';
+
+// The real editor is kept — only its instance is captured, so the assertions below run against
+// actual ProseMirror state (document, selection) instead of a stand-in.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let capturedEditor: any = null;
+
+jest.mock('@tiptap/react', () => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const actual = jest.requireActual('@tiptap/react') as any;
+  return {
+    ...actual,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    useEditor: (...args: any[]) => {
+      const editor = actual.useEditor(...args);
+      capturedEditor = editor;
+      return editor;
+    },
+  };
+});
+
+class ArticleForm {
+  @RichTextInput({ label: 'Body', placeholder: 'Write something…' })
+  body: string;
+}
+
+class ToolbarForm {
+  @RichTextInput({ label: 'Body', toolbar: ['bold', 'italic'] })
+  body: string;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let form: UseFormReturn<any>;
+
+function Harness({
+  model = ArticleForm,
+  defaultValue = '',
+}: {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  model?: any;
+  defaultValue?: string;
+}) {
+  form = useForm({ defaultValues: { body: defaultValue } });
+  const inputs = getInputFields(model);
+  return (
+    <FormProvider {...form}>
+      {inputs.map(input => (
+        <FormField key={input.name} input={input} register={form.register} />
+      ))}
+    </FormProvider>
+  );
+}
+
+async function renderEditor(props: Parameters<typeof Harness>[0] = {}) {
+  const utils = render(<Harness {...props} />);
+  // The editor is behind a lazy import (optional peer dependency), so it lands a tick later.
+  await screen.findByTestId('rich-text-body');
+  await waitFor(() => expect(capturedEditor).not.toBeNull());
+  return utils;
+}
+
+function typeIntoEditor(text: string) {
+  act(() => {
+    capturedEditor.commands.insertContent(text);
+  });
+}
+
+describe('RichTextInput', () => {
+  beforeEach(() => {
+    capturedEditor = null;
+  });
+
+  it('marks the field as richtext in the metadata', () => {
+    const body = getInputFields(ArticleForm).find(input => input.name === 'body');
+
+    expect(body?.type).toBe('richtext');
+  });
+
+  it('mounts with the HTML it is given as a value', async () => {
+    await renderEditor({ defaultValue: '<p>kayıtlı içerik</p>' });
+
+    expect(capturedEditor.getHTML()).toBe('<p>kayıtlı içerik</p>');
+    expect(screen.getByTestId('rich-text-body').textContent).toContain('kayıtlı içerik');
+  });
+
+  it('shows the placeholder while the document is empty', async () => {
+    await renderEditor();
+
+    const content = screen.getByTestId('rich-text-body');
+    expect(content.className).toContain('is-empty');
+    expect(content.getAttribute('data-placeholder')).toBe('Write something…');
+  });
+
+  it('writes the edited HTML into the form value', async () => {
+    await renderEditor();
+
+    typeIntoEditor('merhaba');
+
+    await waitFor(() => expect(form.getValues('body')).toBe('<p>merhaba</p>'));
+    expect(screen.getByTestId('rich-text-body').className).not.toContain('is-empty');
+  });
+
+  it('reports an emptied editor as an empty value, not as <p></p>', async () => {
+    await renderEditor({ defaultValue: '<p>silinecek</p>' });
+
+    act(() => {
+      capturedEditor.commands.clearContent(true);
+    });
+
+    await waitFor(() => expect(form.getValues('body')).toBe(''));
+  });
+
+  it('syncs content that arrives after mount (getDetailsData)', async () => {
+    await renderEditor();
+
+    act(() => {
+      form.setValue('body', '<p>sunucudan gelen</p>');
+    });
+
+    await waitFor(() => expect(capturedEditor.getHTML()).toBe('<p>sunucudan gelen</p>'));
+    expect(screen.getByTestId('rich-text-body').textContent).toContain('sunucudan gelen');
+  });
+
+  it('leaves the caret alone while typing in the middle of the text', async () => {
+    await renderEditor({ defaultValue: '<p>AB</p>' });
+
+    // Typing at the very end would hide a caret reset, since a reset lands there too.
+    act(() => {
+      capturedEditor.commands.setTextSelection(2);
+    });
+    typeIntoEditor('X');
+    const afterFirstKey = capturedEditor.state.selection.from;
+    typeIntoEditor('Y');
+
+    // Re-feeding the value into the editor on every keystroke would push the caret to the end
+    // of the document, so the second character would land after the B instead of before it.
+    expect(afterFirstKey).toBe(3);
+    expect(capturedEditor.state.selection.from).toBe(4);
+    expect(capturedEditor.getText()).toBe('AXYB');
+  });
+
+  it('renders only the toolbar buttons the decorator asks for', async () => {
+    await renderEditor({ model: ToolbarForm });
+
+    const buttons = document.querySelectorAll('.rich-text-toolbar-button');
+    expect(Array.from(buttons).map(button => button.getAttribute('title'))).toEqual([
+      'Bold',
+      'Italic',
+    ]);
+  });
+
+  it('defaults to the full toolbar', async () => {
+    await renderEditor();
+
+    expect(document.querySelectorAll('.rich-text-toolbar-button').length).toBe(6);
+  });
+
+  it('applies formatting from the toolbar to the form value', async () => {
+    await renderEditor();
+
+    typeIntoEditor('kalın');
+    act(() => {
+      capturedEditor.commands.selectAll();
+    });
+    act(() => {
+      (screen.getByTitle('Bold') as HTMLButtonElement).click();
+    });
+
+    await waitFor(() => expect(form.getValues('body')).toBe('<p><strong>kalın</strong></p>'));
+  });
+});