# eglador-ui-react-rich-text
[](https://www.npmjs.com/package/eglador-ui-react-rich-text)
[](https://www.npmjs.com/package/eglador-ui-react-rich-text)
[](https://github.com/eglador/eglador-ui-react-rich-text/blob/main/LICENSE)
A modern, compound-component rich text editor for React — built on top of [Lexical](https://lexical.dev) and styled with **Tailwind CSS v4**.
## Features
- **Compound API** — `RichTextEditor`, `RichTextToolbar`, `RichTextContent`, `RichTextPageSize` (composition over configuration, shadcn/ui style)
- **20+ toolbar features** — undo/redo, headings (h1–h6), bold/italic/underline/strikethrough/code, text transform (case + sub/super/highlight), text & background color, lists, alignment (LTR/RTL + indent/outdent), quote, link, insert (HR/page break/table)
- **Notion-style drag handle** — block reorder + (+) insert menu (``)
- **Floating selection toolbar** — Medium/Notion pattern (``)
- **Auto-opening link editor** — cursor enters link → form appears anchored to the link with `url` / `target` / `rel`
- **Table support** — grid picker insert + cell-anchored action menu (insert/delete row/col, merge, unmerge, delete table)
- **Page size simulator** — DevTools-style bottom bar (Full / Desktop 1280 / Tablet 768 / Mobile 375 + custom)
- **Custom nodes** — official `HorizontalRuleNode` + custom `PageBreakNode` decorator (`break-after: page` for print/PDF)
- **HTML / JSON / Markdown** — round-trip serialization on `onChange` and via `initial*` props
- **Imperative API** — `useRichTextEditor()` hook + `editorRef` prop
- **TypeScript-first** — full type safety, exported feature unions
- **Viewport-aware popovers** — auto-flip / auto-shift, never clipped by ancestor `overflow: hidden`
- **Turkish spell checking** — Hunspell + Turkish rules in a Web Worker, with a pass/fail result for publish gates and error screens (``)
- **Clean paste** — text from Word / Google Docs / the web arrives without the blank spacer paragraphs
## Installation
```bash
npm install eglador-ui-react-rich-text
```
**Peer dependencies:** `react ^19` · `react-dom ^19` · `tailwindcss ^4`
All Lexical packages ship as direct dependencies — no separate install needed.
## Setup
Add the following to your global stylesheet so Tailwind picks up the component classes:
```css
@import "tailwindcss";
@source "../node_modules/eglador-ui-react-rich-text";
```
The `@source` path is relative to the CSS file location:
| Framework | CSS file location | Path |
|---|---|---|
| Next.js (App Router) | `app/globals.css` | `../node_modules/eglador-ui-react-rich-text` |
| Next.js (`src/`) | `src/app/globals.css` | `../../node_modules/eglador-ui-react-rich-text` |
| Vite | `src/index.css` | `../node_modules/eglador-ui-react-rich-text` |
## Quick Start
```tsx
"use client";
import {
RichTextEditor,
RichTextToolbar,
RichTextContent,
RichTextPageSize,
} from "eglador-ui-react-rich-text";
export function MyEditor() {
return (
console.log(value.html)}
>
);
}
```
## API
### Components
| Component | Purpose |
|---|---|
| `RichTextEditor` | Root provider. Lexical composer + theme + nodes + plugins. |
| `RichTextToolbar` | Top formatting bar. Customize via `features`, `headingItems`, `insertBlocks`. |
| `RichTextContent` | Editable content area. Opt-ins: `draggable`, `floatingToolbar`. |
| `RichTextPageSize` | Bottom DevTools-style device toolbar (presets + custom px). |
| `RichTextDraggableBlock` | Drag handle plugin (auto-rendered when `draggable` is on). |
| `RichTextFloatingToolbar` | Selection-anchored mini formatting bar. |
| `RichTextLinkEditor` | Auto-opening link edit form when cursor enters a link. |
| `RichTextTableActions` | Cell-anchored chevron with insert/delete/merge/unmerge actions. |
| `RichTextSpellCheck` | Turkish spell checking: underlines, suggestions, status bar, pass/fail output. |
| `RichTextBlockEdges` | Keeps a paragraph next to edge blocks so the caret can reach above/below (auto-mounted). |
| `RichTextPasteCleanup` | Strips the blank spacer blocks out of pasted content (auto-mounted). |
| `RichTextHeadingLimit` | Advisory character counter on headings, editor-only (auto-mounted). |
| `TextCaseMenu` | `Aa` dropdown that re-cases the selection, with Turkish-correct `i`/`İ`. |
### Hooks
| Export | Returns |
|---|---|
| `useRichTextEditor()` | `{ editor, getJson, setJson, getHtml, setHtml, getMarkdown, setMarkdown, getText, getCursorOffset, setCursorOffset, getLegacyShortcodes, importLegacyComponents, insertAllComponents, clear, focus }` — **must be called inside ``** |
| `usePageSize()` | `{ size, setSize }` — read/write the active page-size from the context |
| `useRichTextSpellCheck()` | `{ result, api }` — the surrounding editor's spell-check state; `api` is `null` until `` mounts |
| `useResolvedSrc(id)` | `{ src, status }` — turn a media ID into a URL via `resolveImageSrc` (`status`: `idle` \| `loading` \| `resolved` \| `missing`) |
### `RichTextEditor` props
| Prop | Type | Description |
|---|---|---|
| `initialJson` | `string` | Initial state from a JSON-serialized Lexical editor state |
| `initialHtml` | `string` | Initial state from HTML (parsed via `$generateNodesFromDOM`) |
| `initialMarkdown` | `string` | Initial state from Markdown (via `TRANSFORMERS`). Priority: markdown > html > json |
| `onChange` | `(value: RichTextValue) => void` | Fires on every editor update with `{ json, html, text, markdown }` |
| `editable` | `boolean` | Default `true`. Reactive — toggles read-only mode imperatively |
| `autoFocus` | `boolean` | Focus on mount |
| `namespace` | `string` | Lexical namespace (default `"eglador-rich-text"`) |
| `maxLength` | `number` | Character limit. Overflow is wrapped in an `OverflowNode` and a counter is shown |
| `charset` | `"UTF-8" \| "UTF-16"` | Counting mode for `maxLength` (default `"UTF-16"` = `String.length`) |
| `resolveImageSrc` | `(id: string) => string \| null \| Promise` | Resolves CMS media IDs to URLs — see [Media by ID](#media-by-id-resolveimagesrc) |
| `editorRef` | `Ref` | Raw Lexical instance (**not** the `useRichTextEditor()` API object) |
### `RichTextToolbar` props
| Prop | Type | Description |
|---|---|---|
| `features` | `RichTextToolbarFeature[]` | Buttons to show. Default = all 20+ features |
| `headingItems` | `HeadingMenuItem[]` | Items inside the heading dropdown (default: paragraph + h1–h6) |
| `insertBlocks` | `BlockSpec[]` | Blocks in the Insert dropdown. Defaults to `defaultBlocks` filtered to the `insert` surface |
### `RichTextContent` props
| Prop | Type | Description |
|---|---|---|
| `placeholder` | `ReactNode` | Empty-state placeholder (default `"Start writing..."`) |
| `minHeight` | `string` | Tailwind min-height class (default `"min-h-32"`) |
| `draggable` | `boolean` | Enable Notion-style drag handle + (+) insert menu |
| `draggableBlocks` | `BlockSpec[]` | Blocks in the drag-handle (+) menu |
| `floatingToolbar` | `boolean` | Enable selection-anchored mini formatting toolbar |
| `mode` | `"rich" \| "plain"` | `"plain"` swaps in `PlainTextPlugin` — text only, no formatting commands |
### Optional slots
Drop any of these inside ``; each subscribes on its own.
| Component | Purpose |
|---|---|
| `RichTextSlashCommands` | `/` typeahead block menu. Takes the same `blocks` array as the toolbar |
| `RichTextAutoEmbed` | Offers to embed a recognized pasted URL (YouTube, .mp3, .mp4, images) |
| `RichTextStats` | Live word / character count, optional reading time |
| `RichTextFindReplace` | Find & replace panel (Cmd/Ctrl+F) |
| `RichTextOutput` | Tabbed HTML / Markdown / JSON / Text panel with copy + download |
| `RichTextDevGlobals` | Registers the `lexicalComponentAllSet()` console helper |
## Toolbar Features
```ts
type RichTextToolbarFeature =
| "undo" | "redo"
| "heading" | "paragraph"
| "heading1" | "heading2" | "heading3"
| "heading4" | "heading5" | "heading6"
| "bold" | "italic" | "underline" | "strikethrough" | "code"
| "textTransform"
| "textColor" | "backgroundColor"
| "bulletList" | "orderedList"
| "alignment"
| "quote" | "link"
| "insert"
| "separator";
```
The `heading` and `insert` features render dropdowns. The heading dropdown takes a list of block types; the insert dropdown takes `BlockSpec[]` from the shared registry:
```ts
type HeadingMenuItem = "paragraph" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
// Insert dropdown — filter/extend the registry, don't pass string keys
import { defaultBlocks } from "eglador-ui-react-rich-text";
b.key !== "table")} />
```
## Custom Nodes
For custom Lexical configurations, the package exports node + plugin primitives:
```tsx
import {
PageBreakNode,
PageBreakPlugin,
INSERT_PAGE_BREAK_COMMAND,
$createPageBreakNode,
$isPageBreakNode,
} from "eglador-ui-react-rich-text";
```
## Eglador CMS Blocks
The package ships one **real Lexical node per CMS component type**. They preview live in the editor (hover → gear to edit, drag handle to reorder) and serialize to ordinary Lexical JSON under their own `type` — *not* to a `#type#field#value#` text run:
```json
{ "type": "galeri", "version": 1, "format": "", "id": "345456" }
```
They are already in `defaultNodes` and `defaultBlocks`, so a plain `` has them. Nothing to register.
### Types
`360resim` · `canliyayin` · `countdown` · `depomkacadolar` · `depremler` · `dikeyciftli` · `dikeylink` · `flourish` · `galeri` · `habericionecikanlar` · `habericireklam` · `havadurumu` · `kredihesaplama` · `kurcevirici` · `linkEmbed` · `mansethaberresim` · `ozelharf` · `piyasa` · `quato1` · `resimliquato` · `sabitlink` · `yatayciftli` · `yataytekli`
Social / media embeds, each its own type: `twitter` · `instagram` · `soundcloud` · `googlemap` — all `url` + optional `position`. These were previously one `linkEmbed` block with an `embed` select; that select is gone and `linkEmbed` is now the plain-link case (`url` + `position`). **YouTube and audio are not among them** — the built-in `youtube` and `audio` blocks already cover those, with real players in the editor.
…plus `newsMoment`, which is a different shape — see [News moment](#news-moment).
Read the authoritative field list at runtime instead of hardcoding it:
```ts
import { CMS_BLOCK_SCHEMA } from "eglador-ui-react-rich-text";
CMS_BLOCK_SCHEMA.map((s) => ({ type: s.type, fields: s.fields.map((f) => f.name) }));
```
Several types carry a fixed option list whose **values are the CMS IDs** that reach the JSON:
| Type | Field | Values |
|---|---|---|
| `canliyayin` | `channel` | `300` BHT TV · `100` HT TV · `10` SHOWTV |
| `piyasa` | `usd_eur` | `88` Dolar · `89` Euro · `1` BIST 100 |
| `havadurumu` | `widget` | `100` |
| `depomkacadolar`, `kredihesaplama` | `widget` | `hesaplayici` |
| `kurcevirici` | `widget` | `cevirici` |
| `depremler` | `view` | `harita` · `liste` |
| `sabitlink` | `color` | `kirmizi` · `mavi` · `yesil` |
**Two naming caveats when mapping back to legacy shortcodes:**
| Legacy | In this package | Why |
|---|---|---|
| `#link#...#` | type `linkEmbed` | `@lexical/link`'s `LinkNode` already owns the `link` node type; a second one would silently replace it and break every hyperlink |
| `type1` / `id1` / `type2` / `id2` | `firstContentType` / `firstContentId` / `secondContentType` / `secondContentId` | the originals don't say *what* type or *what* id |
Three legacy types map onto built-in blocks rather than getting their own: `resim` → the `image` block (ID mode), `video` → the `video` block (ID mode), `imagecompare` → the `image-comparison` block.
### Media by ID (`resolveImageSrc`)
Blocks that address media by ID never store the URL — the document holds the ID, and the page resolves it for preview. Wire the callback once on the root:
```tsx
{
const res = await fetch(`/api/media/${id}`);
return res.ok ? (await res.json()).url : null; // null → "not found" placeholder
}}
>
```
Sync resolvers (an in-memory map) work too. This callback drives the `image` / `video` blocks in ID mode **and** every `image-ids` field (e.g. `newsMoment.images`, previewed as thumbnails).
With `options.imageId` set, `exportJSON()` omits `src` entirely:
```json
{ "type": "image", "version": 1, "format": "",
"options": { "alt": "", "caption": "", "maxWidth": 0, "imageId": "345456" } }
```
Leave the ID blank and paste a URL to get the original URL behaviour back (`src` is serialized as before).
### News moment
`newsMoment` is the one CMS type that is **not** a decorator. It's an `ElementNode`, so its body is edited inline like any other text: typing, inline formatting, lists, links, undo/redo and selection all behave natively, and the body serializes as an ordinary Lexical `children` array rather than an opaque string.
```json
{
"type": "newsMoment", "version": 1,
"date": "2026-08-06", "time": "18:00",
"title": "Canlı gelişme", "images": "345456, 345457",
"children": [
{ "type": "paragraph", "children": [{ "type": "text", "text": "Gövde metni" }] }
]
}
```
The metadata (date / time / title / image IDs) is edited from the gear in the block's own header, which is rendered by `RichTextNewsMomentChrome` — mounted automatically by `RichTextContent`, so there is nothing to wire up.
Programmatically:
```tsx
import { $createNewsMomentNode, $createEmptyNewsMomentNode } from "eglador-ui-react-rich-text";
// with a starter paragraph (what the Insert menu uses)
$createNewsMomentNode({ date: "2026-08-06", time: "18:00", title: "…", images: "345456" });
// no children — when you supply the body yourself
const node = $createEmptyNewsMomentNode({ title: "…" });
node.append(myParagraph);
```
When mapping to the legacy shortcode, read the body from the node's children (`node.getTextContent()`, or serialize them to HTML) rather than from a `content` field — that field no longer exists.
### Creating blocks programmatically
```tsx
import { $createCmsNode } from "eglador-ui-react-rich-text";
import { $getRoot } from "lexical";
editor.update(() => {
const node = $createCmsNode("galeri", { id: "345456" }); // null for unknown types
if (node) $getRoot().append(node);
});
```
### Matching the Insert and slash menus
Both surfaces read the same registry, so pass one array to all of them and they cannot drift apart:
```tsx
const HIDDEN = ["check-list", "horizontal-rule", "page-break", "date-time", "code-block"];
const blocks = defaultBlocks.filter((b) => !HIDDEN.includes(b.key));
```
`getBlocksForSurface("insert", blocks)` and `getBlocksForSurface("slash", blocks)` return identical lists in identical order, and a block with a `renderForm` opens that form on either surface.
### Adding a new CMS type
One entry in [`src/components/rich-text/cms/cms-schema.tsx`](src/components/rich-text/cms/cms-schema.tsx) — the node class, the Insert/slash menu entries and the form are all generated from it:
```ts
{
type: "myblock", // must be unique across ALL Lexical node types
title: "Benim Bloğum",
icon: ,
fields: [
{ name: "id", label: "ID", inputType: "text" },
{ name: "position", label: "Hizalama", inputType: "select", options: POSITION_LEFT_RIGHT },
],
renderPreview: (fields) =>
…
, // optional; omit for the generic card
}
```
`inputType`: `text` · `url` · `number` · `select` · `textarea` · `date` · `time` · `image-ids`.
A duplicate `type` throws at import time (guard in [`nodes.ts`](src/components/rich-text/nodes.ts)) rather than silently shadowing another node.
### Inserting every component at once
For eyeballing an integration — no UI required.
```tsx
import { useRichTextEditor, RichTextDevGlobals } from "eglador-ui-react-rich-text";
function FillButton() {
const { insertAllComponents } = useRichTextEditor(); // call inside
return (
<>
);
}
```
Or from outside the tree: `insertAllComponents(editor, options)` — returns the number of blocks inserted.
Drop `` inside `` to get a console escape hatch:
```js
lexicalComponentAllSet() // clear, then insert all
lexicalComponentAllSet("append") // keep content, add at end
lexicalComponentAllSet({ mode: "append", cmsTypes: ["galeri", "newsMoment"] })
```
| Option | Default | Meaning |
|---|---|---|
| `mode` | `"replace"` | `"replace"` clears the document first; `"append"` adds at the end |
| `includeHeadings` | `true` | section headings + explanatory paragraphs |
| `includeBuiltIns` | `true` | text blocks, table, columns, media embeds |
| `cmsTypes` | all | restrict the CMS section; `[]` skips it |
| `sample` | public samples | placeholder media — see `ALL_COMPONENTS_DEFAULT_SAMPLE` |
Point it at your own media so previews actually resolve:
```tsx
insertAllComponents({ sample: { imageId: "345456", videoId: "913597", mediaIds: ["1", "2"] } });
```
The global is registered on mount and removed on unmount; pass `name` if several editors share a page. Gate it in production if you'd rather not ship it: `{process.env.NODE_ENV !== "production" && }`.
## Legacy Components
Embeds a legacy CMS shortcode — a generic `#type#field#value#field#value#` block — without the library having any built-in notion of what a "video" or "image" component is. The available types and their form fields are entirely defined by your own `LegacyComponentSpec[]` schema, passed at the call site.
```tsx
import {
RichTextEditor,
RichTextToolbar,
RichTextContent,
RichTextSlashCommands,
defaultBlocks,
createLegacyComponentBlocks,
type LegacyComponentSpec,
} from "eglador-ui-react-rich-text";
const legacySchema: LegacyComponentSpec[] = [
{
type: "resim",
title: "Image (legacy)",
fields: [
{ name: "src", label: "URL", inputType: "url" },
{ name: "alt", label: "Alt text", inputType: "text", optional: true },
],
},
];
const blocks = [...defaultBlocks, ...createLegacyComponentBlocks(legacySchema)];
export function MyEditor() {
return (
);
}
```
- `createLegacyComponentBlocks(schema)` turns each `LegacyComponentSpec` into a `BlockSpec` that opens a form (built from `spec.fields`) on the `"insert"` / `"slash"` surfaces — merge the result into `defaultBlocks` and pass it to `RichTextToolbar`, `RichTextSlashCommands`, and `RichTextDraggableBlock` via the `blocks` prop.
- Submitting the form inserts the shortcode string as plain, ordinary editable text — not a locked decorator — so the user can revise it by hand afterwards (fix a typo, tweak a value) like any other text in the document.
- By default a type renders as `#type#field#value#field#value#...#` (e.g. `#resim#src#https://...#alt#Cover#`). Give a `LegacyComponentSpec` its own `template` to control the exact output instead — `{type}` and `{fieldName}` placeholders are substituted with the submitted values, and any field not referenced is simply omitted:
```ts
{
type: "resim",
title: "Image (legacy)",
template: "#{type}#{src}#", // → "#resim#https://...#" (alt text dropped)
fields: [
{ name: "src", label: "URL", inputType: "url" },
{ name: "alt", label: "Alt text", inputType: "text", optional: true },
],
}
```
- `getHtml()` / `getMarkdown()` / `getText()` (from `useRichTextEditor()`) all preserve the shortcode string exactly as inserted, template or not.
- `editorRef.current?.getLegacyShortcodes()` returns every legacy shortcode line currently in the document as an array of strings, in document order — works regardless of which types use a custom `template`.
- `editorRef.current?.importLegacyComponents(items, schema)` appends typed `LegacyComponentInput` objects (`{ type, fields }`) programmatically — pass the same `schema` you gave `createLegacyComponentBlocks()` so each item's `template` (if any) is honored; omit it to always use the default layout.
## Language
The editor chrome is **Turkish by default**. Switch it, or override individual strings, on the root:
```tsx
{/* English */}
{/* per-string */}
```
`RichTextMessages` covers every string the chrome renders — form buttons, field labels, the block-picker search box, image-by-ID hints. Labels that come from a schema (`CmsBlockSpec.fields`) travel with the schema instead. Exported for reuse: `trMessages`, `enMessages`, `useMessages()`.
## Picking images from the page
Give the editor a library and the image block turns into a picker: the ID and URL fields become read-only readouts and the author selects a tile instead of typing.
```tsx
fetchUrl(id)}
imageLibrary={[{ id: "345456" }, { id: "345457", title: "Kapak" }]}
>
```
Only `id` is required — a missing `url` is resolved through `resolveImageSrc`, so a bare list of IDs renders thumbnails fine. Pass a function (sync or async) instead of an array to load lazily:
```tsx
imageLibrary={async () => (await fetch("/api/medya")).json()}
```
Omit the prop entirely and the form keeps its current behaviour: ID and URL stay editable.
## Pasting from Word, Google Docs and the web (`pasteCleanup`)
Word writes `
` between paragraphs, Google Docs puts a bare ` ` between them, and plain text carries blank lines. Each one imports as an empty paragraph, so pasted text used to arrive double-spaced. Those blank spacer blocks are now dropped — paragraph spacing is the stylesheet's job.
What is kept: a ` ` inside a paragraph, an empty table cell, a block holding only an image, and all formatting, headings and lists. Code blocks are left alone entirely, because blank lines are content there.
```tsx
{/* paste verbatim instead */}
```
`cleanPastedHtml(html)` and `collapsePastedText(text)` are exported if you want to run the same tidy-up elsewhere.
## Heading length counter (`headingLimit`)
Headings show a `62/70` counter while they are being edited, turning red once they are over. It is **advisory** — nothing is blocked or truncated, and the author can keep typing.
```tsx
{/* all levels */}
{/* per level */}
{/* show on every heading */}
{/* off */}
```
- Default: 70 characters for every heading level. With an object, a level left out is not counted at all.
- The counter appears on the heading the caret is in, and stays visible on any heading that is over — so a too-long heading further up the article keeps warning you. `always: true` shows it on all of them.
- **It never reaches the document.** The counter is drawn in CSS from a `data-` attribute on the heading element, so `onChange`, `getJson()`, `getHtml()`, `getText()` and the output panel are all untouched, and the author cannot select, copy or delete it.
`registerHeadingLimit(editor, options)` is exported for use outside React.
## Alt text under the image
The image block shows its alt text under the image, tagged `ALT`, below the caption. It is an authoring aid only: `decorate()` draws the in-editor view, so the alt text stays out of the JSON's shape and out of the exported HTML — there it remains where it belongs, in the `` attribute. Nothing is shown when the field is empty.
## Letter case from the selection toolbar
Select some text and the formatting bar's **Aa** button re-cases it: UPPERCASE, lowercase, or Capitalize Each Word. Only the selection changes, and each run keeps its own formatting — bold stays bold.
Casing follows the editor's `locale`, which matters in Turkish:
| | `locale="tr"` (default) | plain `toUpperCase()` |
|---|---|---|
| `ilgi` → upper | `İLGİ` | `ILGI` ✗ |
| `IRMAK` → lower | `ırmak` | `irmak` ✗ |
| `çocuk şarkısı` → title | `Çocuk Şarkısı` | `çocuk şarkısı` ✗ |
Capitalize keeps apostrophe suffixes down (`istanbul'da` → `İstanbul'da`, `2024'te` → `2024'te`) and does not break a word that formatting split in two.
The same three entries sit in the toolbar's own `Aa` menu. `transformSelectionCase(editor, mode, locale)` and the pure helpers `toUpperCaseText` / `toLowerCaseText` / `toTitleCaseText` are exported.
## Headings from the selection toolbar
Selecting text pops up the formatting bar; alongside bold/italic it has **H2** and **H3** buttons that turn the selected block into that heading. Pressing the same one again turns it back into a paragraph, and the button shows as pressed while the caret is inside a heading of that level.
```tsx
{/* H2 + H3 (default) */}
{/* none */}
```
## Typing above and below edge blocks (`blockEdges`)
An image, a CMS block, a table or a columns row at the very start or end of the document leaves the caret nowhere to go: clicking above the first block just lands in the text below it, and the only way past the last one is the "+" menu. The editor keeps an empty paragraph at those ends so both are reachable.
```
[galeri] → [paragraph] ← click here and type
[paragraph] "metin" [galeri]
[canliyayin] [paragraph] "metin"
[canliyayin]
[paragraph] ← and here
```
- Only blocks the caret can't be typed around count: block decorators (media, CMS blocks, page break, horizontal rule) and containers whose text sits in nested shadow roots (tables, columns, note bodies). A document that begins and ends with a paragraph, heading, quote or list is **left exactly as it is**.
- The paragraph is added in the same update as the insertion, so one Ctrl+Z undoes both.
- It becomes part of the document, so it shows up in `onChange` / `getJson()` output as an empty paragraph.
Turn it off if you would rather keep documents untouched, or control each end:
```tsx
{/* never modify the document */}
{/* only guarantee the bottom one */}
```
`registerBlockEdges(editor, options)` is exported for use outside React.
## Dropdown choices from your own CMS (`cmsFieldOptions`)
The CMS blocks ship with built-in lists — live-stream channels, market widgets, link colours, alignment. Replace any of them per project, keyed by block type and then field name:
```tsx
(await fetch("/api/piyasa")).json() },
"*": { position: [{ value: "left", label: "Sola yaslı" }] },
}}
>
```
- A value is either a list or a function (sync or async) returning one, so channels can come straight from your API.
- `"*"` applies to every block — handy for `position`, which many blocks share. A block-specific entry wins over `"*"`.
- Each loader runs **once per editor** and the result is cached, so reopening a form doesn't refetch. While a loader runs the select is disabled and shows a loading label; if it rejects, the built-in list comes back so the form stays usable (the error is logged).
- The `value` of each option is exactly what lands in the JSON — these are your CMS IDs, not display text.
- **A stored value missing from the new list is kept**, shown as its own `123 — listede yok` entry. Editing and saving an old block never silently switches it to another channel.
Both the insert form ("+" / "/" menus) and the block's own gear-icon edit form read the same lists.
## Pasted embed codes
Share dialogs hand out a whole `
→ https://www.google.com/maps/embed?pb=!1m18…
```
This applies to the CMS blocks' URL fields (Google Maps, SoundCloud, X, Instagram, …) and to the built-in YouTube and iframe blocks. The helper is exported as `extractEmbedSrc(text)` if you need it elsewhere.
The YouTube field goes one step further: a pasted `watch?v=`, `youtu.be` or `/shorts/` link becomes its embeddable form, because YouTube refuses to be framed from a watch URL.
| Pasted | Stored |
|---|---|
| `https://www.youtube.com/watch?v=DCCN_T_VigY` | `https://www.youtube-nocookie.com/embed/DCCN_T_VigY` |
| `
# eglador-ui-react-rich-text
[](https://www.npmjs.com/package/eglador-ui-react-rich-text)
[](https://www.npmjs.com/package/eglador-ui-react-rich-text)
[](https://github.com/eglador/eglador-ui-react-rich-text/blob/main/LICENSE)
A modern, compound-component rich text editor for React — built on top of [Lexical](https://lexical.dev) and styled with **Tailwind CSS v4**.
## Features
- **Compound API** — `RichTextEditor`, `RichTextToolbar`, `RichTextContent`, `RichTextPageSize` (composition over configuration, shadcn/ui style)
- **20+ toolbar features** — undo/redo, headings (h1–h6), bold/italic/underline/strikethrough/code, text transform (case + sub/super/highlight), text & background color, lists, alignment (LTR/RTL + indent/outdent), quote, link, insert (HR/page break/table)
- **Notion-style drag handle** — block reorder + (+) insert menu (`