F1 component kit/Forms and editing/Rich-text editorPhone

Rich-text editor

Missing · new20 · rich-text

Tiptap in the kit skin: full toolbar for articles and drip steps, minimal for ticket replies, image upload with progress, the link popover, and a failed upload that keeps the text.

Covers: M16. Exports: RichText.

Whole page:CompactComfortableLaravel · navyDTC · midnight green
AnatomyStatesDensityEN · 中文Edge casesContract

Anatomy

The component as it sits in the product: English, compact, real data shapes.

Lining care after the first dry clean

Steam the lining from the inside at low heat. Never press the bemberg lining directly.

  • Hang on a shaped hanger
  • Brush with the nap
412 wordsDraft autosaved 14:31

States

7 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.

full toolbar

Lining care after the first dry clean

Steam the lining from the inside at low heat. Never press the bemberg lining directly.

  • Hang on a shaped hanger
  • Brush with the nap
412 wordsDraft autosaved 14:31
minimal toolbar

Lining care after the first dry clean

Steam the lining from the inside at low heat. Never press the bemberg lining directly.

  • Hang on a shaped hanger
  • Brush with the nap
412 wordsDraft autosaved 14:31
focus

Lining care after the first dry clean

Steam the lining from the inside at low heat. Never press the bemberg lining directly.

  • Hang on a shaped hanger
  • Brush with the nap
412 wordsDraft autosaved 14:31
link popover

Lining care after the first dry clean

Steam the lining from the inside at low heat. Never press the bemberg lining directly.

  • Hang on a shaped hanger
  • Brush with the nap
https://journal.rjmtm.com/articles/lining-care
412 wordsDraft autosaved 14:31
image uploading

Lining care after the first dry clean

Steam the lining from the inside at low heat. Never press the bemberg lining directly.

  • Hang on a shaped hanger
  • Brush with the nap
412 wordsDraft autosaved 14:31
upload failed

Lining care after the first dry clean

Steam the lining from the inside at low heat. Never press the bemberg lining directly.

  • Hang on a shaped hanger
  • Brush with the nap
Image upload failed (413: over 5 MB). The text is kept.
empty

Write the article…

412 wordsDraft autosaved 14:31

Density

Compact (2b ultra, the default) and comfortable, side by side. Same markup, only the density tokens change.

compact · default · data-density=compact

Lining care after the first dry clean

Steam the lining from the inside at low heat. Never press the bemberg lining directly.

  • Hang on a shaped hanger
  • Brush with the nap
412 wordsDraft autosaved 14:31
comfortable · data-density=comfortable

Lining care after the first dry clean

Steam the lining from the inside at low heat. Never press the bemberg lining directly.

  • Hang on a shaped hanger
  • Brush with the nap
412 wordsDraft autosaved 14:31

English · 中文

Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.

en

Lining care after the first dry clean

Steam the lining from the inside at low heat. Never press the bemberg lining directly.

  • Hang on a shaped hanger
  • Brush with the nap
412 wordsDraft autosaved 14:31
中文 · lang=zh-Hans

首次干洗后的里布保养

低温从内侧蒸烫里布。切勿直接熨烫 铜氨里布 。

  • 使用定型衣架
  • 顺毛刷
412 字草稿已自动保存 14:31

Long string · permission denied

The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).

long string

Lining care after the first dry clean

Steam the lining from the inside at low heat. Never press the bemberg lining directly.

  • Hang on a shaped hanger
  • Brush with the nap

Customer-supplied note copied from WeChat: https://journal.rjmtm.com/articles/lining-care-after-the-first-dry-clean-for-bemberg-cupro-and-viscose-blends-2026-edition

412 wordsDraft autosaved 14:31
permission denied

Lining care after the first dry clean

Steam the lining from the inside at low heat. Never press the bemberg lining directly.

  • Hang on a shaped hanger
  • Brush with the nap
Read only · needs edit articles

Both apps

One @rj/admin-kit component, two themes: the Laravel admin (navy pinned) and the DTC admin (kit v4 Midnight green), by token swap only.

Laravel admin · :root

Lining care after the first dry clean

Steam the lining from the inside at low heat. Never press the bemberg lining directly.

  • Hang on a shaped hanger
  • Brush with the nap
412 wordsDraft autosaved 14:31
DTC admin · data-theme=dtc

Lining care after the first dry clean

Steam the lining from the inside at low heat. Never press the bemberg lining directly.

  • Hang on a shaped hanger
  • Brush with the nap
412 wordsDraft autosaved 14:31

Contract

The @rj/admin-kit API for this family. Mirrored in CONTRACT.md.

Export
RichText · @rj/admin-kit
Props
value (HTML) · toolbar full|minimal · onImageUpload · maxBytes
States
empty · focus · link · uploading · error · read-only
shadcn / Radix
Popover (link) + Toggle (toolbar)
Package underneath
@tiptap/react + starter-kit + extension-link / image / placeholder (MIT only)
Accessibility
toolbar is role=toolbar with arrow-key focus; ⌘B / ⌘I / ⌘K
API operations
admin.articles.store / .update / .upload-image · admin.drip-sequences.steps.store
Phone variant
minimal toolbar