open-index/open-npm huggingface dataset:
npm package: @hakifi/v3-sdk
Description: ⚒️ An SDK for building applications on top of Hakifi V3
Latest version: 0.0.4

# Alpha software

The latest version of the SDK is used in production in the Uniswap Interface,
but it is considered Alpha software and may contain bugs or change significantly between patch versions.
If you have questions about how to use the SDK, please reach out in the `#dev-chat` channel of the Discord.
Pull requests welcome!

# Uniswap V3 SDK

[![npm version](https://img.shields.io/npm/v/@uniswap/v3-sdk/latest.svg)](https://www.npmjs.com/package/@uniswap/v3-sdk/v/latest)
[![npm bundle size (scoped version)](https://img.shields.io/bundlephobia/minzip/@uniswap/v3-sdk/latest.svg)](https://bundlephobia.com/result?p=@uniswap/v3-sdk@latest)

In-depth documentation on this SDK is available at [uniswap.org](https://docs.uniswap.org/).
npm package: @hakiiver2/primevue
Description: [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![npm version](https://badge.fury.io/js/primevue.svg)](https://badge.fury.io/js/primevue) [![Discord Chat](https://img.shields.io/discord/55794023
Latest version: 0.0.0


[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![npm version](https://badge.fury.io/js/primevue.svg)](https://badge.fury.io/js/primevue)
[![Discord Chat](https://img.shields.io/discord/557940238991753223.svg?color=7289da&label=chat&logo=discord)](https://discord.gg/gzKFYnpmCY)

[![PrimeVue Hero](https://www.primefaces.org/wp-content/uploads/2020/08/primevue-promo.jpg)](https://www.primefaces.org/primevue)

### Website

Visit the [PrimeVue Website](https://www.primefaces.org/primevue/) for general information, demos and documentation.
npm package: @haking/xmas
Description: A beautiful Christmas tree in your terminal
Author: Hector
Latest version: 1.0.3

# Terminal Christmas Tree

在你的终端里展示一棵漂亮的圣诞树！🎄

## 安装

```bash
npm install -g @haking/xmas
```

## 使用

直接在终端中运行：

```bash
xmas
```

## 许可证

MIT
npm package: @haklex/rich-diff
Description: Rich diff editor
Latest version: 0.0.104

# @haklex/rich-diff

Diff viewer for comparing two Lexical editor states side-by-side.

## Installation

```bash
pnpm add @haklex/rich-diff
```

## Peer Dependencies

| Package | Version |
| --- | --- |
| `react` | `>=19` |
| `react-dom` | `>=19` |

## Usage

```tsx
import { RichDiff } from '@haklex/rich-diff'
import '@haklex/rich-diff/style.css'

<RichDiff before={previousEditorState} after={currentEditorState} />
```

### Programmatic Diff

```ts
import { computeDiff } from '@haklex/rich-diff'

const hunks = computeDiff(beforeState, afterState)
// hunks: DiffHunk[] with op type (add, remove, equal) and content
```

## Exports

### Components

| Export | Description |
| --- | --- |
| `RichDiff` | Side-by-side diff viewer component |

### Functions

| Export | Description |
| --- | --- |
| `computeDiff(before, after)` | Compute diff hunks between two editor states |

### Types

| Export | Description |
| --- | --- |
| `RichDiffProps` | Props for `RichDiff` |
| `DiffHunk` | A single diff hunk with operation type and content |
| `DiffOpType` | Diff operation type (`'add'` / `'remove'` / `'equal'`) |

### Sub-path Exports

| Import Path | Description |
| --- | --- |
| `@haklex/rich-diff` | All components, functions, and types |
| `@haklex/rich-diff/style.css` | Compiled diff viewer stylesheet |

## Part of Haklex

This package is part of the [Haklex](../../README.md) rich editor ecosystem.

## License

MIT
npm package: @haklex/rich-editor-shiro
Description: Production bundle for Shiroi blog
Latest version: 0.0.2

# @haklex/rich-editor-shiro

生产就绪的编辑器包，包含所有渲染器、插件和扩展。

## 安装

```bash
pnpm add @haklex/rich-editor-shiro lexical @lexical/react
```

## 使用

### 编辑器

```tsx
import { ShiroEditor } from '@haklex/rich-editor-shiro/editor'
import '@haklex/rich-editor-shiro/style.css'

function Editor() {
  const [state, setState] = useState()

  return (
    <ShiroEditor
      initialValue={state}
      onChange={setState}
      variant="article"
    />
  )
}
```

### 渲染器

```tsx
import { ShiroRenderer } from '@haklex/rich-editor-shiro/renderer'
import '@haklex/rich-editor-shiro/style.css'

function Article({ content }) {
  return <ShiroRenderer value={content} variant="article" />
}
```

## 内置功能

ShiroEditor 自动包含：

- 所有编辑渲染器
- SlashMenuPlugin
- FloatingToolbarPlugin
- FloatingLinkEditorPlugin
- TldrawPlugin
- EmbedPlugin
- 表格单元格调整

## API

### ShiroEditorProps

继承 `RichEditorProps`，但省略 `rendererConfig`、`extraNodes`：

```ts
interface ShiroEditorProps extends Omit<RichEditorProps, 'rendererConfig' | 'extraNodes' | 'actions'> {
  extraNodes?: Array<Klass<LexicalNode>>
  actions?: ReactNode
  selfHostnames?: string[]  // EmbedPlugin 用
}
```

### ShiroRendererProps

继承 `RichRendererProps`，但省略 `rendererConfig`、`extraNodes`：

```ts
interface ShiroRendererProps extends Omit<RichRendererProps, 'rendererConfig' | 'extraNodes'> {
  extraNodes?: Array<Klass<LexicalNode>>
}
```

## 导出

```ts
// 组件
export { ShiroEditor } from './ShiroEditor'
export { ShiroRenderer } from './ShiroRenderer'

// 类型
export type { ShiroEditorProps } from './ShiroEditor'
export type { ShiroRendererProps } from './ShiroRenderer'

// 重新导出常用类型
export type { ColorScheme, RendererConfig, RichEditorVariant } from '@haklex/rich-editor'

// 重新导出配置（高级用法）
export { enhancedRendererConfig } from '@haklex/rich-renderers'
export { enhancedEditRendererConfig } from '@haklex/rich-renderers-edit'
```

## 依赖

```json
{
  "lexical": "^0.39.0",
  "@lexical/react": "^0.39.0",
  "react": ">=19",
  "react-dom": ">=19"
}
```

## License

MIT
npm package: @haklex/rich-editor-ui
Description: UI components for haklex rich editor
Latest version: 0.0.104

# @haklex/rich-editor-ui

Headless UI primitives for the Haklex rich editor, built on Base UI (`@base-ui/react`).

## Installation

```bash
pnpm add @haklex/rich-editor-ui
```

## Peer Dependencies

| Package | Version |
| --- | --- |
| `react` | `>=19` |
| `react-dom` | `>=19` |

## Usage

```tsx
import { Dialog, DialogTrigger, DialogPopup, presentDialog } from '@haklex/rich-editor-ui'
import '@haklex/rich-editor-ui/style.css'

// Declarative usage
<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogPopup>Dialog content here</DialogPopup>
</Dialog>

// Imperative usage
presentDialog({
  title: 'Confirm',
  content: ({ dismiss }) => <p>Are you sure? <button onClick={dismiss}>Close</button></p>,
})
```

## Exports

### Dialog

`Dialog`, `DialogTrigger`, `DialogPopup`, `DialogBackdrop`, `DialogPortal`, `DialogHeader`, `DialogTitle`, `DialogDescription`, `DialogFooter`, `DialogClose`, `DialogStackProvider`

Imperative API: `presentDialog`, `dismissDialog`, `dismissTopDialog`, `dismissAllDialogs`

### DropdownMenu

`DropdownMenu`, `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuItem`, `DropdownMenuCheckboxItem`, `DropdownMenuRadioItem`, `DropdownMenuGroup`, `DropdownMenuLabel`, `DropdownMenuSeparator`, `DropdownMenuRadioGroup`

### Popover

`Popover`, `PopoverTrigger`, `PopoverPopup`, `PopoverPortal`, `PopoverPositioner`, `PopoverPanel`, `PopoverArrow`, `PopoverTitle`, `PopoverDescription`, `PopoverClose`, `usePopover`

### Combobox

`Combobox`, `ComboboxInput`, `ComboboxContent`, `ComboboxList`, `ComboboxItem`, `ComboboxItemIndicator`, `ComboboxGroup`, `ComboboxGroupLabel`, `ComboboxEmpty`

### Other Components

| Export | Description |
| --- | --- |
| `AnimatedTabs` | Tab bar with animated active indicator |
| `AnimatedCheckbox` | Checkbox with animation |
| `ColorPicker` | Color picker input |
| `SegmentedControl` | Segmented control / toggle group |
| `TooltipRoot`, `TooltipTrigger`, `TooltipContent`, `TooltipPopup`, `TooltipPortal`, `TooltipPositioner`, `TooltipProvider` | Tooltip components |
| `createTooltipHandle` | Imperative tooltip control |
| `ViewportGate` | Render children only when visible in viewport |

### Theme Utilities

`PortalThemeProvider`, `PortalThemeWrapper`, `usePortalTheme` (re-exported from `@haklex/rich-style-token`)

### Sub-path Exports

| Import Path | Description |
| --- | --- |
| `@haklex/rich-editor-ui` | All components and utilities |
| `@haklex/rich-editor-ui/style.css` | Compiled stylesheet |

## Part of Haklex

This package is part of the [Haklex](../../README.md) rich editor ecosystem.

## License

MIT
npm package: @haklex/rich-ext-code-snippet
Description: Multi-file code snippet extension
Latest version: 0.0.104

# @haklex/rich-ext-code-snippet

Multi-file tabbed code snippet extension with drag-and-drop reordering.

## Installation

```bash
pnpm add @haklex/rich-ext-code-snippet
```

## Peer Dependencies

| Package | Version |
| --- | --- |
| `lexical` | `^0.41.0` |
| `react` | `>= 19` |

Key runtime dependencies include `@codemirror/*` (editor engine), `@dnd-kit/*` (drag-and-drop), and `shiki` (syntax highlighting).

## Usage

### Register nodes in your editor config

```ts
import { codeSnippetEditNodes } from '@haklex/rich-ext-code-snippet'

// Add to your Lexical editor node list
const editorConfig = {
  nodes: [...codeSnippetEditNodes],
}
```

For static/read-only rendering:

```ts
import { codeSnippetNodes } from '@haklex/rich-ext-code-snippet/static'

const staticConfig = {
  nodes: [...codeSnippetNodes],
}
```

### Use renderers

```tsx
import { CodeSnippetEditRenderer } from '@haklex/rich-ext-code-snippet'
import { CodeSnippetRenderer } from '@haklex/rich-ext-code-snippet/static'
```

### Markdown transformer

```ts
import { CODE_SNIPPET_BLOCK_TRANSFORMER } from '@haklex/rich-ext-code-snippet'

// Add to your Lexical markdown transformers array
const transformers = [CODE_SNIPPET_BLOCK_TRANSFORMER]
```

### Import styles

```ts
import '@haklex/rich-ext-code-snippet/style.css'
```

## Exports

### Nodes

- `CodeSnippetNode` -- static (read-only) node
- `CodeSnippetEditNode` -- edit node with interactive UI
- `$createCodeSnippetNode()` / `$isCodeSnippetNode()` -- Lexical helpers
- `codeSnippetNodes` -- array of static nodes for config registration
- `codeSnippetEditNodes` -- array of edit nodes for config registration

### Renderers

- `CodeSnippetRenderer` -- static renderer (no heavy UI deps)
- `CodeSnippetEditRenderer` -- edit renderer with CodeMirror, drag-and-drop tabs

### Transformers

- `CODE_SNIPPET_BLOCK_TRANSFORMER` -- Markdown block transformer

### Sub-path Exports

| Path | Description |
| --- | --- |
| `@haklex/rich-ext-code-snippet` | Full exports (edit + static) |
| `@haklex/rich-ext-code-snippet/static` | Static-only (no CodeMirror/dnd-kit deps) |
| `@haklex/rich-ext-code-snippet/style.css` | Stylesheet |

## Part of Haklex

This package is part of the [Haklex](../../README.md) rich editor ecosystem.

## License

MIT
npm package: @haklex/rich-ext-gallery
Description: Image gallery extension with drag-and-drop
Latest version: 0.0.104

# @haklex/rich-ext-gallery

Image gallery extension with grid and carousel layouts, drag-and-drop reordering.

## Installation

```bash
pnpm add @haklex/rich-ext-gallery
```

## Peer Dependencies

| Package | Version |
| --- | --- |
| `lexical` | `^0.41.0` |
| `lucide-react` | `^0.574.0` |
| `react` | `>= 19` |
| `react-dom` | `>= 19` |

## Usage

### Register nodes in your editor config

```ts
import { galleryEditNodes } from '@haklex/rich-ext-gallery'

const editorConfig = {
  nodes: [...galleryEditNodes],
}
```

For static/read-only rendering:

```ts
import { galleryNodes } from '@haklex/rich-ext-gallery/static'

const staticConfig = {
  nodes: [...galleryNodes],
}
```

### Use renderers

```tsx
import { GalleryEditRenderer } from '@haklex/rich-ext-gallery'
import { GalleryRenderer } from '@haklex/rich-ext-gallery/static'
```

### Import styles

```ts
import '@haklex/rich-ext-gallery/style.css'
```

## Exports

### Nodes

- `GalleryNode` -- static (read-only) node
- `GalleryEditNode` -- edit node with drag-and-drop image reordering
- `$createGalleryNode()` / `$isGalleryNode()` -- Lexical helpers
- `galleryNodes` -- array of static nodes for config registration
- `galleryEditNodes` -- array of edit nodes for config registration

### Renderers

- `GalleryRenderer` -- static renderer (grid/carousel display)
- `GalleryEditRenderer` -- edit renderer with drag-and-drop support

### Types

- `GalleryNodePayload` -- payload type for creating gallery nodes
- `SerializedGalleryNode` -- serialized gallery node type

### Sub-path Exports

| Path | Description |
| --- | --- |
| `@haklex/rich-ext-gallery` | Full exports (edit + static) |
| `@haklex/rich-ext-gallery/static` | Static-only (no drag-and-drop deps) |
| `@haklex/rich-ext-gallery/style.css` | Stylesheet |

## Part of Haklex

This package is part of the [Haklex](../../README.md) rich editor ecosystem.

## License

MIT
npm package: @haklex/rich-ext-tldraw
Description: Tldraw whiteboard extension
Latest version: 0.0.50

# @haklex/rich-ext-tldraw

Tldraw 白板扩展。

## 安装

```bash
pnpm add @haklex/rich-ext-tldraw @haklex/rich-editor tldraw
```

## 导出

```ts
// 节点
export { TldrawNode } from './TldrawNode'
export { $createTldrawNode, $isTldrawNode } from './TldrawNode'
export type { SerializedTldrawNode } from './TldrawNode'

// 插件
export { TldrawPlugin, INSERT_TLDRAW_COMMAND } from './TldrawPlugin'

// 渲染器
export { TldrawStaticRenderer } from './TldrawStaticRenderer'
export type { TldrawStaticRendererProps } from './TldrawStaticRenderer'
export { TldrawEditRenderer } from './TldrawEditRenderer'
export type { TldrawEditRendererProps } from './TldrawEditRenderer'

// 上下文
export { TldrawConfigProvider, useTldrawConfig } from './TldrawConfigContext'
export type { TldrawConfig } from './TldrawConfigContext'

// 向后兼容
export { TldrawStaticRenderer as TldrawRenderer } from './TldrawStaticRenderer'
export type { TldrawStaticRendererProps as TldrawRendererProps } from './TldrawStaticRenderer'
```

## 使用

```tsx
import { TldrawPlugin, TldrawNode } from '@haklex/rich-ext-tldraw'
import { RichEditor } from '@haklex/rich-editor'

<RichEditor extraNodes={[TldrawNode]}>
  <TldrawPlugin />
</RichEditor>
```

## 依赖

```json
{
  "@haklex/rich-editor": "workspace:*",
  "tldraw": "^3.0.0"
}
```

## License

MIT
npm package: @haklex/rich-headless
Description: Headless Lexical node registry for server-side parsing (no React)
Latest version: 0.0.104

# @haklex/rich-headless

Zero-React headless Lexical node registry for server-side parsing. Convert Lexical editor state JSON to Markdown without any browser or React dependency.

## Installation

```bash
pnpm add @haklex/rich-headless lexical
```

## Peer Dependencies

| Package | Version |
| --- | --- |
| `lexical` | `^0.41.0` |

## Usage

```ts
import { createHeadlessEditor } from '@lexical/headless'
import { allHeadlessNodes, $toMarkdown } from '@haklex/rich-headless'

const editor = createHeadlessEditor({ nodes: allHeadlessNodes })
editor.setEditorState(editor.parseEditorState(jsonString))
editor.read(() => {
  const markdown = $toMarkdown()
})
```

## Exports

### Node Registries

| Export | Description |
| --- | --- |
| `allHeadlessNodes` | All headless nodes (builtin + custom) |
| `builtinNodes` | Lexical builtin nodes (Heading, Quote, List, Link, Table, Code, HorizontalRule) |
| `customHeadlessNodes` | Custom headless nodes only |

### Node Classes

| Export | Description |
| --- | --- |
| `SpoilerNode` | Spoiler/hidden text (inline) |
| `RubyNode` | Ruby annotation (inline) |
| `DetailsNode` | Collapsible details block |
| `ImageNode` | Image |
| `VideoNode` | Video |
| `LinkCardNode` | Rich link card |
| `KaTeXInlineNode` | Inline KaTeX equation |
| `KaTeXBlockNode` | Block KaTeX equation |
| `MermaidNode` | Mermaid diagram |
| `MentionNode` | User mention (inline) |
| `CodeBlockNode` | Code block with language |
| `FootnoteNode` | Footnote reference (inline) |
| `FootnoteSectionNode` | Footnote definitions section |
| `EmbedNode` | Embedded content (iframe) |
| `CodeSnippetNode` | Multi-file code snippet |
| `GalleryNode` | Image gallery |
| `ExcalidrawNode` | Excalidraw drawing |
| `BannerNode` | Banner/callout with nested content |
| `AlertQuoteNode` | GitHub-style alert quote with nested content |
| `NestedDocNode` | Nested document with nested content |
| `GridContainerNode` | Grid layout container with cells |

### Markdown Conversion

| Export | Description |
| --- | --- |
| `$toMarkdown()` | Convert the current editor state to Markdown (call inside `editor.read()`) |
| `allHeadlessTransformers` | All Lexical-to-Markdown transformers |

### Sub-path Exports

| Import Path | Description |
| --- | --- |
| `@haklex/rich-headless` | All nodes, registries, and `$toMarkdown` |
| `@haklex/rich-headless/transformers` | Transformers only |

## Part of Haklex

This package is part of the [Haklex](../../README.md) rich editor ecosystem.

## License

MIT
npm package: @haklex/rich-plugin-block-handle
Description: Block handle plugin with add button and context menu
Latest version: 0.0.104

# @haklex/rich-plugin-block-handle

Block handle plugin with drag handle, add button, and context menu for the Haklex rich editor.

## Installation

```bash
pnpm add @haklex/rich-plugin-block-handle
```

## Peer Dependencies

This plugin depends on `@lexical/code-core` (Lexical 0.42+). Add `@lexical/code-core` yourself only if your app imports it directly.

| Package              | Version    |
| -------------------- | ---------- |
| `@lexical/list`      | `^0.42.0`  |
| `@lexical/react`     | `^0.42.0`  |
| `@lexical/rich-text` | `^0.42.0`  |
| `@lexical/selection` | `^0.42.0`  |
| `lexical`            | `^0.42.0`  |
| `lucide-react`       | `^0.574.0` |
| `react`              | `>= 19`    |
| `react-dom`          | `>= 19`    |

## Usage

```tsx
import { BlockHandlePlugin } from '@haklex/rich-plugin-block-handle';
import '@haklex/rich-plugin-block-handle/style.css';

function Editor() {
  return (
    <RichEditor>
      <BlockHandlePlugin />
    </RichEditor>
  );
}
```

The plugin renders a drag handle and an add button on the left side of each block. Hovering over a block reveals the handle, which supports:

- **Drag and drop** to reorder blocks
- **Add button** to insert a new block above or below
- **Context menu** with block-level actions (duplicate, delete, change type, etc.)

## Exports

| Export              | Type      | Description                                         |
| ------------------- | --------- | --------------------------------------------------- |
| `BlockHandlePlugin` | Component | Main plugin component to render inside `RichEditor` |

## Sub-path Exports

| Path                                         | Description      |
| -------------------------------------------- | ---------------- |
| `@haklex/rich-plugin-block-handle`           | Plugin component |
| `@haklex/rich-plugin-block-handle/style.css` | Stylesheet       |

## Part of Haklex

This package is part of the [Haklex](../../README.md) rich editor ecosystem.

## License

MIT
npm package: @haklex/rich-plugin-floating-toolbar
Description: Floating toolbar plugin
Latest version: 0.0.104

# @haklex/rich-plugin-floating-toolbar

Floating toolbar plugin that appears on text selection for inline formatting.

## Installation

```bash
pnpm add @haklex/rich-plugin-floating-toolbar
```

## Peer Dependencies

| Package | Version |
| --- | --- |
| `@lexical/link` | `^0.41.0` |
| `@lexical/react` | `^0.41.0` |
| `@lexical/selection` | `^0.41.0` |
| `lexical` | `^0.41.0` |
| `lucide-react` | `^0.574.0` |
| `react` | `>= 19` |
| `react-dom` | `>= 19` |

## Usage

```tsx
import { FloatingToolbarPlugin } from '@haklex/rich-plugin-floating-toolbar'
import '@haklex/rich-plugin-floating-toolbar/style.css'

function Editor() {
  return (
    <RichEditor>
      <FloatingToolbarPlugin />
    </RichEditor>
  )
}
```

When the user selects text, a floating toolbar appears near the selection with inline formatting controls such as bold, italic, underline, strikethrough, code, and link insertion.

## Exports

| Export | Type | Description |
| --- | --- | --- |
| `FloatingToolbarPlugin` | Component | Main plugin component to render inside `RichEditor` |

## Sub-path Exports

| Path | Description |
| --- | --- |
| `@haklex/rich-plugin-floating-toolbar` | Plugin component |
| `@haklex/rich-plugin-floating-toolbar/style.css` | Stylesheet |

## Part of Haklex

This package is part of the [Haklex](../../README.md) rich editor ecosystem.

## License

MIT
npm package: @haklex/rich-plugin-link-edit
Description: Link editing plugin
Latest version: 0.0.104

# @haklex/rich-plugin-link-edit

Link editing plugin with floating popover for creating and editing links.

## Installation

```bash
pnpm add @haklex/rich-plugin-link-edit
```

## Peer Dependencies

| Package | Version |
| --- | --- |
| `@lexical/link` | `^0.41.0` |
| `@lexical/react` | `^0.41.0` |
| `lexical` | `^0.41.0` |
| `lucide-react` | `^0.574.0` |
| `react` | `>= 19` |
| `react-dom` | `>= 19` |

## Usage

```tsx
import { FloatingLinkEditorPlugin } from '@haklex/rich-plugin-link-edit'
import '@haklex/rich-plugin-link-edit/style.css'

function Editor() {
  return (
    <RichEditor>
      <FloatingLinkEditorPlugin />
    </RichEditor>
  )
}
```

When the cursor is placed on a link node, a floating popover appears allowing the user to view, edit, or remove the link URL. The popover also supports creating new links from selected text.

```tsx
import type { FloatingLinkEditorPluginProps } from '@haklex/rich-plugin-link-edit'

// Props can be used to type custom wrappers
const props: FloatingLinkEditorPluginProps = {
  // ...
}
```

## Exports

| Export | Type | Description |
| --- | --- | --- |
| `FloatingLinkEditorPlugin` | Component | Main plugin component to render inside `RichEditor` |
| `FloatingLinkEditorPluginProps` | TypeScript type | Props type for `FloatingLinkEditorPlugin` |

## Sub-path Exports

| Path | Description |
| --- | --- |
| `@haklex/rich-plugin-link-edit` | Plugin component and types |
| `@haklex/rich-plugin-link-edit/style.css` | Stylesheet |

## Part of Haklex

This package is part of the [Haklex](../../README.md) rich editor ecosystem.

## License

MIT
npm package: @haklex/rich-plugin-mention
Description: Mention typeahead plugin with platform selection
Latest version: 0.0.104

# @haklex/rich-plugin-mention

Mention typeahead plugin with platform selection for @-mentioning users across platforms (GitHub, Twitter, etc.).

## Installation

```bash
pnpm add @haklex/rich-plugin-mention
```

## Peer Dependencies

| Package | Version |
| --- | --- |
| `@lexical/react` | `^0.41.0` |
| `lexical` | `^0.41.0` |
| `react` | `>= 19` |
| `react-dom` | `>= 19` |

## Usage

```tsx
import { MentionMenuPlugin } from '@haklex/rich-plugin-mention'
import '@haklex/rich-plugin-mention/style.css'

function Editor() {
  return (
    <RichEditor>
      <MentionMenuPlugin />
    </RichEditor>
  )
}
```

Typing `@` triggers a typeahead menu where users can select a platform and enter a username. The plugin ships with builtin platform definitions for common services.

```tsx
import {
  builtinPlatforms,
  getAllPlatforms,
  MentionMenuItem,
} from '@haklex/rich-plugin-mention'
import type {
  MentionPlatformDef,
  MentionMenuPluginProps,
} from '@haklex/rich-plugin-mention'

// Access builtin platforms
const platforms = builtinPlatforms
const allPlatforms = getAllPlatforms()

// Define a custom platform
const customPlatform: MentionPlatformDef = {
  // ...
}
```

## Exports

| Export | Type | Description |
| --- | --- | --- |
| `MentionMenuPlugin` | Component | Main plugin component to render inside `RichEditor` |
| `MentionMenuItem` | Component | Individual menu item component |
| `builtinPlatforms` | Constant | Array of builtin platform definitions |
| `getAllPlatforms` | Function | Returns all registered platforms |
| `MentionPlatformDef` | TypeScript type | Platform definition interface |
| `MentionMenuPluginProps` | TypeScript type | Props type for `MentionMenuPlugin` |

## Sub-path Exports

| Path | Description |
| --- | --- |
| `@haklex/rich-plugin-mention` | Plugin component, menu items, platform utilities, and types |
| `@haklex/rich-plugin-mention/style.css` | Stylesheet |

## Part of Haklex

This package is part of the [Haklex](../../README.md) rich editor ecosystem.

## License

MIT
npm package: @haklex/rich-plugin-slash-menu
Description: Slash command menu plugin
Latest version: 0.0.104

# @haklex/rich-plugin-slash-menu

Slash command menu plugin for inserting blocks via `/` trigger.

## Installation

```bash
pnpm add @haklex/rich-plugin-slash-menu
```

## Peer Dependencies

| Package | Version |
| --- | --- |
| `@lexical/list` | `^0.41.0` |
| `@lexical/react` | `^0.41.0` |
| `@lexical/rich-text` | `^0.41.0` |
| `@lexical/selection` | `^0.41.0` |
| `@lexical/table` | `^0.41.0` |
| `lexical` | `^0.41.0` |
| `lucide-react` | `^0.574.0` |
| `react` | `>= 19` |
| `react-dom` | `>= 19` |

## Usage

```tsx
import { SlashMenuPlugin } from '@haklex/rich-plugin-slash-menu'
import '@haklex/rich-plugin-slash-menu/style.css'

function Editor() {
  return (
    <RichEditor>
      <SlashMenuPlugin />
    </RichEditor>
  )
}
```

Typing `/` at the start of a block opens a command menu with filterable block insertion options (headings, lists, code blocks, tables, etc.). The menu supports keyboard navigation and fuzzy matching.

```tsx
import {
  SlashMenuPlugin,
  SlashMenuItem,
  SlashMenuList,
  getBuiltinItems,
  collectNodeSlashItems,
} from '@haklex/rich-plugin-slash-menu'
import type { SlashMenuPluginProps } from '@haklex/rich-plugin-slash-menu'

// Get builtin slash menu items
const items = getBuiltinItems()

// Collect slash items registered by nodes
const nodeItems = collectNodeSlashItems()
```

## Exports

| Export | Type | Description |
| --- | --- | --- |
| `SlashMenuPlugin` | Component | Main plugin component to render inside `RichEditor` |
| `SlashMenuItem` | Component | Individual menu item component |
| `SlashMenuList` | Component | Menu list container component |
| `getBuiltinItems` | Function | Returns the default set of slash menu items |
| `collectNodeSlashItems` | Function | Collects slash menu items registered by editor nodes |
| `SlashMenuPluginProps` | TypeScript type | Props type for `SlashMenuPlugin` |

## Sub-path Exports

| Path | Description |
| --- | --- |
| `@haklex/rich-plugin-slash-menu` | Plugin component, menu items, utilities, and types |
| `@haklex/rich-plugin-slash-menu/style.css` | Stylesheet |

## Part of Haklex

This package is part of the [Haklex](../../README.md) rich editor ecosystem.

## License

MIT
npm package: @haklex/rich-plugin-table
Description: Table editing plugin
Latest version: 0.0.104

# @haklex/rich-plugin-table

Table editing plugin with cell resizing and row/column manipulation.

## Installation

```bash
pnpm add @haklex/rich-plugin-table
```

## Peer Dependencies

| Package | Version |
| --- | --- |
| `@lexical/react` | `^0.41.0` |
| `@lexical/table` | `^0.41.0` |
| `lexical` | `^0.41.0` |
| `lucide-react` | `^0.574.0` |
| `react` | `>= 19` |
| `react-dom` | `>= 19` |

## Usage

```tsx
import {
  TableCellResizerPlugin,
  TableRowColumnHandlesPlugin,
} from '@haklex/rich-plugin-table'
import '@haklex/rich-plugin-table/style.css'

function Editor() {
  return (
    <RichEditor>
      <TableCellResizerPlugin />
      <TableRowColumnHandlesPlugin />
    </RichEditor>
  )
}
```

This plugin provides two complementary components:

- **TableCellResizerPlugin** -- Allows users to resize table columns by dragging cell borders.
- **TableRowColumnHandlesPlugin** -- Renders handles for inserting, deleting, and reordering rows and columns.

## Exports

| Export | Type | Description |
| --- | --- | --- |
| `TableCellResizerPlugin` | Component | Cell border drag-to-resize plugin |
| `TableRowColumnHandlesPlugin` | Component | Row/column insert, delete, and reorder handles |

## Sub-path Exports

| Path | Description |
| --- | --- |
| `@haklex/rich-plugin-table` | Plugin components |
| `@haklex/rich-plugin-table/style.css` | Stylesheet |

## Part of Haklex

This package is part of the [Haklex](../../README.md) rich editor ecosystem.

## License

MIT
npm package: @haklex/rich-plugin-toolbar
Description: Top toolbar plugin for rich editor
Latest version: 0.0.104

# @haklex/rich-plugin-toolbar

Top toolbar plugin with formatting controls for the Haklex rich editor.

## Installation

```bash
pnpm add @haklex/rich-plugin-toolbar
```

## Peer Dependencies

| Package | Version |
| --- | --- |
| `@lexical/list` | `^0.41.0` |
| `@lexical/react` | `^0.41.0` |
| `@lexical/rich-text` | `^0.41.0` |
| `@lexical/selection` | `^0.41.0` |
| `@lexical/utils` | `^0.41.0` |
| `lexical` | `^0.41.0` |
| `lucide-react` | `^0.574.0` |
| `react` | `>= 19` |
| `react-dom` | `>= 19` |

## Usage

```tsx
import { ToolbarPlugin } from '@haklex/rich-plugin-toolbar'
import '@haklex/rich-plugin-toolbar/style.css'

function Editor() {
  return (
    <RichEditor>
      <ToolbarPlugin />
    </RichEditor>
  )
}
```

The toolbar renders at the top of the editor with controls for text formatting (bold, italic, underline, strikethrough, code), block type selection (paragraph, headings, quote, lists), text alignment, and undo/redo.

```tsx
import type { ToolbarPluginProps } from '@haklex/rich-plugin-toolbar'

const props: ToolbarPluginProps = {
  // ...
}
```

## Exports

| Export | Type | Description |
| --- | --- | --- |
| `ToolbarPlugin` | Component | Main toolbar component to render inside `RichEditor` |
| `ToolbarPluginProps` | TypeScript type | Props type for `ToolbarPlugin` |

## Sub-path Exports

| Path | Description |
| --- | --- |
| `@haklex/rich-plugin-toolbar` | Plugin component and types |
| `@haklex/rich-plugin-toolbar/style.css` | Stylesheet |

## Part of Haklex

This package is part of the [Haklex](../../README.md) rich editor ecosystem.

## License

MIT
npm package: @haklex/rich-renderer
Description: Headless SSR engine for Lexical rich content
Latest version: 0.0.37

# @haklex/rich-renderer

Lexical 富文本的只读渲染引擎（Headless + React 输出）。  
用于把 `SerializedEditorState` 渲染成可展示的 React 内容。

## 包定位

- 不提供编辑能力
- 适合文章详情页、评论展示、SSR 输出
- 默认支持 `@haklex/rich-editor` 内置节点（`allNodes`）

## 安装

```bash
pnpm add @haklex/rich-renderer @haklex/rich-editor lexical react react-dom
```

## 快速开始

```tsx
import { RichRenderer } from '@haklex/rich-renderer'
import type { SerializedEditorState } from 'lexical'
import '@haklex/rich-editor/style.css'

export function Article({
  value,
}: {
  value: SerializedEditorState
}) {
  return <RichRenderer value={value} variant="article" theme="light" />
}
```

## API

```ts
interface RichRendererProps {
  value: SerializedEditorState
  variant?: 'article' | 'comment' | 'note'
  theme?: 'light' | 'dark'
  className?: string
  style?: CSSProperties
  as?: keyof React.JSX.IntrinsicElements
  rendererConfig?: RendererConfig
  extraNodes?: Array<Klass<LexicalNode>>
}
```

字段说明：

- `value`：Lexical JSON（必填）
- `as`：渲染容器标签，默认 `div`
- `rendererConfig`：覆写某些节点的渲染组件（Image/CodeBlock/...）
- `extraNodes`：注册扩展节点（如 Tldraw、Embed、Gallery、CodeSnippet）

## 与增强渲染器一起用

```tsx
import { RichRenderer } from '@haklex/rich-renderer'
import {
  codeSnippetNodes,
  embedNodes,
  enhancedRendererConfig,
  galleryNodes,
  TldrawNode,
} from '@haklex/rich-renderers'

import '@haklex/rich-editor/style.css'
import '@haklex/rich-renderers/style.css'
import '@haklex/rich-ext-code-snippet/style.css'
import '@haklex/rich-ext-embed/style.css'
import 'katex/dist/katex.min.css'
import 'tldraw/tldraw.css'

const extraNodes = [
  TldrawNode,
  ...embedNodes,
  ...galleryNodes,
  ...codeSnippetNodes,
]

<RichRenderer
  value={value}
  rendererConfig={enhancedRendererConfig}
  extraNodes={extraNodes}
/>
```

## 渲染行为说明

- 内部使用 `@lexical/headless` 构建只读 editor，再将节点树转为 React
- 标题会自动生成 slug 与锚点（重复标题自动去重）
- 脚注会先预处理编号，再统一渲染引用与定义
- `Alert/Banner/Grid` 等嵌套内容通过 `NestedContentRendererProvider` 递归渲染

## 设计模式

### 1) 节点注册与渲染器覆写解耦

- 节点协议（JSON 结构）由 Node class 决定
- 显示层由 `rendererConfig` 决定
- 扩展节点只需通过 `extraNodes` 注册，不要求侵入核心渲染器

### 2) Static / Edit 拆分协作

`@haklex/rich-renderer` 只消费静态节点。  
编辑态重依赖（Popover、Dialog 等）应该放在 edit 节点/编辑包里，不进入只读包。

## 常见问题

### Q1: 为什么有些节点不显示？

通常是忘了注册扩展节点（`extraNodes`），例如 `embed`、`tldraw`、`gallery`、`code-snippet`。

### Q2: 为什么公式样式不对？

需要手动引入：

```ts
import 'katex/dist/katex.min.css'
```

### Q3: 为什么 tldraw 画布样式错乱？

需要手动引入：

```ts
import 'tldraw/tldraw.css'
```

## License

MIT
npm package: @haklex/rich-renderer-alert
Description: Alert renderer for haklex rich editor
Latest version: 0.0.104

# @haklex/rich-renderer-alert

Alert/callout block renderer supporting five severity levels: note, tip, important, warning, and caution.

## Installation

```bash
pnpm add @haklex/rich-renderer-alert
```

## Peer Dependencies

| Package | Version |
| --- | --- |
| `react` | `>=19` |
| `react-dom` | `>=19` |

## Usage

```tsx
import { AlertRenderer } from '@haklex/rich-renderer-alert/static'

// Register in a static RendererConfig
const rendererConfig = {
  // ...other renderers
  Alert: AlertRenderer,
}
```

For edit mode:

```tsx
import { AlertEditRenderer } from '@haklex/rich-renderer-alert'

const editRendererConfig = {
  // ...other renderers
  Alert: AlertEditRenderer,
}
```

## Exports

### Components

- `AlertRenderer` — Static (read-only) renderer for alert/callout blocks
- `AlertEditRenderer` — Edit (interactive) renderer with severity selection

### Sub-path Exports

| Path | Description |
| --- | --- |
| `@haklex/rich-renderer-alert` | Full exports (edit + static) |
| `@haklex/rich-renderer-alert/static` | Static-only renderer |
| `@haklex/rich-renderer-alert/style.css` | Stylesheet |

## Part of Haklex

This package is part of the [Haklex](../../README.md) rich editor ecosystem.

## License

MIT
npm package: @haklex/rich-renderer-banner
Description: Banner renderer for haklex rich editor
Latest version: 0.0.104

# @haklex/rich-renderer-banner

Banner block renderer supporting info, success, warning, and error variants.

## Installation

```bash
pnpm add @haklex/rich-renderer-banner
```

## Peer Dependencies

| Package | Version |
| --- | --- |
| `react` | `>=19` |
| `react-dom` | `>=19` |

## Usage

```tsx
import { BannerRenderer } from '@haklex/rich-renderer-banner/static'

// Register in a static RendererConfig
const rendererConfig = {
  // ...other renderers
  Banner: BannerRenderer,
}
```

For edit mode:

```tsx
import { BannerEditRenderer } from '@haklex/rich-renderer-banner'

const editRendererConfig = {
  // ...other renderers
  Banner: BannerEditRenderer,
}
```

## Exports

### Components

- `BannerRenderer` — Static (read-only) renderer for banner blocks
- `BannerEditRenderer` — Edit (interactive) renderer with variant selection

### Sub-path Exports

| Path | Description |
| --- | --- |
| `@haklex/rich-renderer-banner` | Full exports (edit + static) |
| `@haklex/rich-renderer-banner/static` | Static-only renderer |
| `@haklex/rich-renderer-banner/style.css` | Stylesheet |

## Part of Haklex

This package is part of the [Haklex](../../README.md) rich editor ecosystem.

## License

MIT
npm package: @haklex/rich-renderer-codeblock
Description: Code block renderer with Shiki syntax highlighting
Latest version: 0.0.104

# @haklex/rich-renderer-codeblock

Code block renderer with Shiki syntax highlighting for static display and CodeMirror for interactive editing.

## Installation

```bash
pnpm add @haklex/rich-renderer-codeblock
```

## Peer Dependencies

| Package | Version |
| --- | --- |
| `react` | `>=19` |
| `react-dom` | `>=19` |

## Usage

```tsx
import { CodeBlockRenderer } from '@haklex/rich-renderer-codeblock/static'

// Register in a static RendererConfig
const rendererConfig = {
  // ...other renderers
  CodeBlock: CodeBlockRenderer,
}
```

For edit mode:

```tsx
import { CodeBlockEditRenderer } from '@haklex/rich-renderer-codeblock'

const editRendererConfig = {
  // ...other renderers
  CodeBlock: CodeBlockEditRenderer,
}
```

## Exports

### Components

- `CodeBlockRenderer` — Static (read-only) renderer with Shiki syntax highlighting
- `CodeBlockEditRenderer` — Edit (interactive) renderer with CodeMirror editor

### Sub-path Exports

| Path | Description |
| --- | --- |
| `@haklex/rich-renderer-codeblock` | Full exports (edit + static) |
| `@haklex/rich-renderer-codeblock/static` | Static-only renderer |
| `@haklex/rich-renderer-codeblock/shiki` | Shiki highlighting utilities |
| `@haklex/rich-renderer-codeblock/constants` | Language and theme constants |
| `@haklex/rich-renderer-codeblock/icons` | Language icons |
| `@haklex/rich-renderer-codeblock/style.css` | Stylesheet |

## Part of Haklex

This package is part of the [Haklex](../../README.md) rich editor ecosystem.

## License

MIT
npm package: @haklex/rich-renderer-image
Description: Image renderer with blurhash and lightbox
Latest version: 0.0.104

# @haklex/rich-renderer-image

Image renderer with blurhash placeholder support and lightbox zoom for full-size viewing.

## Installation

```bash
pnpm add @haklex/rich-renderer-image
```

## Peer Dependencies

| Package | Version |
| --- | --- |
| `lexical` | `^0.41.0` |
| `@lexical/react` | `^0.41.0` |
| `react` | `>=19` |
| `react-dom` | `>=19` |

## Usage

```tsx
import { ImageRenderer } from '@haklex/rich-renderer-image/static'

// Register in a static RendererConfig
const rendererConfig = {
  // ...other renderers
  Image: ImageRenderer,
}
```

For edit mode:

```tsx
import { ImageEditRenderer } from '@haklex/rich-renderer-image'

const editRendererConfig = {
  // ...other renderers
  Image: ImageEditRenderer,
}
```

## Exports

### Components

- `ImageRenderer` — Static (read-only) renderer with blurhash placeholder and lightbox zoom
- `ImageEditRenderer` — Edit (interactive) renderer with image controls

### Sub-path Exports

| Path | Description |
| --- | --- |
| `@haklex/rich-renderer-image` | Full exports (edit + static) |
| `@haklex/rich-renderer-image/static` | Static-only renderer |
| `@haklex/rich-renderer-image/style.css` | Stylesheet |

## Part of Haklex

This package is part of the [Haklex](../../README.md) rich editor ecosystem.

## License

MIT
npm package: @haklex/rich-renderer-katex
Description: KaTeX math renderer for haklex rich editor
Latest version: 0.0.104

# @haklex/rich-renderer-katex

KaTeX math expression edit nodes for inline and block-level mathematical typesetting.

> **Note:** This package only provides edit nodes. Static rendering of KaTeX expressions is built into `@haklex/rich-editor` directly.

## Installation

```bash
pnpm add @haklex/rich-renderer-katex
```

## Peer Dependencies

| Package | Version |
| --- | --- |
| `lexical` | `^0.41.0` |
| `@lexical/react` | `^0.41.0` |
| `react` | `>=19` |
| `react-dom` | `>=19` |
| `katex` | `>=0.16.0` (optional) |

## Usage

```tsx
import { katexEditNodes } from '@haklex/rich-renderer-katex'

// Register edit nodes in your editor config
const editorConfig = {
  nodes: [
    ...katexEditNodes,
    // ...other nodes
  ],
}
```

## Exports

### Nodes and Decorators

- `KaTeXBlockEditNode` — Edit node for block-level math expressions
- `KaTeXInlineEditNode` — Edit node for inline math expressions
- `KaTeXEditDecorator` — Shared edit decorator for KaTeX rendering
- `katexEditNodes` — Array of all KaTeX edit nodes for convenient registration

### Sub-path Exports

| Path | Description |
| --- | --- |
| `@haklex/rich-renderer-katex` | Full exports |
| `@haklex/rich-renderer-katex/style.css` | Stylesheet |

## Part of Haklex

This package is part of the [Haklex](../../README.md) rich editor ecosystem.

## License

MIT
npm package: @haklex/rich-renderer-linkcard
Description: Rich link preview card renderer with extensible URL plugins
Latest version: 0.0.104

# @haklex/rich-renderer-linkcard

Rich link preview card renderer with metadata display and an extensible plugin system for URL-specific cards.

Includes pre-built plugins for GitHub repos/PRs/issues, ArXiv papers, Bangumi entries, LeetCode problems, TMDB media, NetEase Music, and QQ Music.

## Installation

```bash
pnpm add @haklex/rich-renderer-linkcard
```

## Peer Dependencies

| Package | Version |
| --- | --- |
| `lexical` | `^0.41.0` |
| `@lexical/react` | `^0.41.0` |
| `@lexical/link` | `^0.41.0` |
| `react` | `>=19` |
| `react-dom` | `>=19` |

## Usage

```tsx
import { LinkCardRenderer } from '@haklex/rich-renderer-linkcard/static'

// Register in a static RendererConfig
const rendererConfig = {
  // ...other renderers
  LinkCard: LinkCardRenderer,
}
```

For edit mode with link card conversion and paste support:

```tsx
import {
  LinkCardEditNode,
  linkCardEditNodes,
  ConvertToLinkCardAction,
  PasteLinkCardPlugin,
  LinkCardFetchProvider,
} from '@haklex/rich-renderer-linkcard'

// Wrap editor with fetch provider for metadata resolution
<LinkCardFetchProvider>
  <Editor
    nodes={linkCardEditNodes}
    plugins={[
      <PasteLinkCardPlugin />,
    ]}
  />
</LinkCardFetchProvider>
```

### Using URL-specific plugins

```tsx
import { githubRepoPlugin, githubPrPlugin } from '@haklex/rich-renderer-linkcard'

// Plugins are auto-registered; use matchUrl to detect supported URLs
import { matchUrl } from '@haklex/rich-renderer-linkcard'
const matched = matchUrl('https://github.com/user/repo')
```

## Exports

### Components

- `LinkCardRenderer` — Static (read-only) renderer for link preview cards
- `LinkCardSkeleton` — Loading skeleton placeholder

### Nodes and Plugins

- `LinkCardEditNode` — Edit node for link cards
- `linkCardEditNodes` — Array of link card edit nodes for registration
- `ConvertToLinkCardAction` — Action to convert a link to a link card
- `PasteLinkCardPlugin` — Editor plugin for paste-to-card conversion

### Context

- `LinkCardFetchProvider` — Provider for link metadata fetching
- `useLinkCardFetchContext` — Hook to access fetch context

### Plugin Registry

- `getPluginByName` — Retrieve a plugin by name
- `pluginMap` — Map of all registered plugins
- `plugins` — Array of all registered plugins

### Pre-built Plugins

- `githubRepoPlugin` — GitHub repository cards
- `githubPrPlugin` — GitHub PR/issue cards
- ArXiv, Bangumi, LeetCode, TMDB, NetEase Music, QQ Music plugins

### URL Matching

- `useUrlMatcher` — Hook for matching URLs to plugins
- `matchUrl` — Utility to match a URL against registered plugins

### Sub-path Exports

| Path | Description |
| --- | --- |
| `@haklex/rich-renderer-linkcard` | Full exports (edit + static + plugins) |
| `@haklex/rich-renderer-linkcard/static` | Static-only renderer |
| `@haklex/rich-renderer-linkcard/style.css` | Stylesheet |

## Part of Haklex

This package is part of the [Haklex](../../README.md) rich editor ecosystem.

## License

MIT
npm package: @haklex/rich-renderer-video
Description: Video player renderer
Latest version: 0.0.104

# @haklex/rich-renderer-video

Video player renderer for embedded video content.

## Installation

```bash
pnpm add @haklex/rich-renderer-video
```

## Peer Dependencies

| Package | Version |
| --- | --- |
| `lexical` | `^0.41.0` |
| `@lexical/react` | `^0.41.0` |
| `react` | `>=19` |
| `react-dom` | `>=19` |

## Usage

```tsx
import { VideoRenderer } from '@haklex/rich-renderer-video/static'

// Register in a static RendererConfig
const rendererConfig = {
  // ...other renderers
  Video: VideoRenderer,
}
```

For edit mode:

```tsx
import { VideoEditRenderer } from '@haklex/rich-renderer-video'

const editRendererConfig = {
  // ...other renderers
  Video: VideoEditRenderer,
}
```

## Exports

### Components

- `VideoRenderer` — Static (read-only) video player renderer
- `VideoEditRenderer` — Edit (interactive) renderer with video controls

### Sub-path Exports

| Path | Description |
| --- | --- |
| `@haklex/rich-renderer-video` | Full exports (edit + static) |
| `@haklex/rich-renderer-video/static` | Static-only renderer |
| `@haklex/rich-renderer-video/style.css` | Stylesheet |

## Part of Haklex

This package is part of the [Haklex](../../README.md) rich editor ecosystem.

## License

MIT
npm package: @haklex/rich-renderers
Description: Static renderers aggregator for haklex rich editor
Latest version: 0.0.104

# @haklex/rich-renderers

Static renderer aggregator that bundles all static (read-only) renderers and extension renderers into a single configuration.

## Installation

```bash
pnpm add @haklex/rich-renderers
```

## Peer Dependencies

| Package | Version |
| --- | --- |
| `lexical` | `^0.41.0` |
| `@lexical/react` | `^0.41.0` |
| `react` | `>=19` |
| `react-dom` | `>=19` |

## Usage

```tsx
import { enhancedRendererConfig } from '@haklex/rich-renderers'
import { RichRenderer } from '@haklex/rich-static-renderer'

import '@haklex/rich-editor/style.css'
import '@haklex/rich-renderers/style.css'

<RichRenderer
  value={value}
  rendererConfig={enhancedRendererConfig}
  variant="article"
/>
```

This aggregator re-exports all static renderers from individual renderer packages as well as extension static renderers, so you do not need to install or configure them individually.

The config can be extended or overridden:

```tsx
const rendererConfig = {
  ...enhancedRendererConfig,
  CodeBlock: MyCustomCodeBlockRenderer,
}
```

## Exports

### Configuration

- `enhancedRendererConfig` — Pre-configured renderer config with all static renderers registered

### Re-exports

All static renderers from individual packages, extension static renderers, and LinkCard plugins are re-exported for convenience.

### Sub-path Exports

| Path | Description |
| --- | --- |
| `@haklex/rich-renderers` | Full exports with `enhancedRendererConfig` |
| `@haklex/rich-renderers/alert` | Alert static renderer |
| `@haklex/rich-renderers/banner` | Banner static renderer |
| `@haklex/rich-renderers/codeblock` | CodeBlock static renderer |
| `@haklex/rich-renderers/image` | Image static renderer |
| `@haklex/rich-renderers/linkcard` | LinkCard static renderer + plugins |
| `@haklex/rich-renderers/mention` | Mention static renderer |
| `@haklex/rich-renderers/mermaid` | Mermaid static renderer |
| `@haklex/rich-renderers/ruby` | Ruby static renderer |
| `@haklex/rich-renderers/video` | Video static renderer |
| `@haklex/rich-renderers/code-snippet` | Code snippet extension renderer |
| `@haklex/rich-renderers/gallery` | Gallery extension renderer |
| `@haklex/rich-renderers/excalidraw` | Excalidraw extension renderer |
| `@haklex/rich-renderers/embed` | Embed extension renderer |
| `@haklex/rich-renderers/style.css` | Combined stylesheet |

## Part of Haklex

This package is part of the [Haklex](../../README.md) rich editor ecosystem.

## License

MIT
npm package: @haklex/rich-renderers-edit
Description: Edit renderers aggregator for haklex rich editor
Latest version: 0.0.104

# @haklex/rich-renderers-edit

Edit renderer aggregator that extends the static aggregator (`@haklex/rich-renderers`) with edit renderers and editor plugins.

## Installation

```bash
pnpm add @haklex/rich-renderers-edit
```

## Peer Dependencies

| Package | Version |
| --- | --- |
| `lexical` | `^0.41.0` |
| `@lexical/react` | `^0.41.0` |
| `react` | `>=19` |
| `react-dom` | `>=19` |

## Usage

```tsx
import { enhancedEditRendererConfig } from '@haklex/rich-renderers-edit'
import { RichEditor } from '@haklex/rich-editor'

import '@haklex/rich-editor/style.css'
import '@haklex/rich-renderers/style.css'

<RichEditor
  rendererConfig={enhancedEditRendererConfig}
  variant="article"
/>
```

This aggregator builds on `@haklex/rich-renderers` by replacing static renderers with their edit counterparts and adding editor-specific plugins (slash menu actions, toolbar integrations, etc.).

## Exports

### Configuration

- `enhancedEditRendererConfig` — Pre-configured renderer config with all edit renderers and editor plugins registered

### Sub-path Exports

| Path | Description |
| --- | --- |
| `@haklex/rich-renderers-edit` | Full exports with `enhancedEditRendererConfig` |
| `@haklex/rich-renderers-edit/alert` | Alert edit renderer |
| `@haklex/rich-renderers-edit/banner` | Banner edit renderer |
| `@haklex/rich-renderers-edit/codeblock` | CodeBlock edit renderer |
| `@haklex/rich-renderers-edit/config` | Base config utilities |
| `@haklex/rich-renderers-edit/mention` | Mention edit renderer |
| `@haklex/rich-renderers-edit/mermaid` | Mermaid edit renderer |
| `@haklex/rich-renderers-edit/ruby` | Ruby edit renderer |
| `@haklex/rich-renderers-edit/slash-menu` | Slash menu integration |
| `@haklex/rich-renderers-edit/code-snippet` | Code snippet edit renderer |
| `@haklex/rich-renderers-edit/embed` | Embed edit renderer |
| `@haklex/rich-renderers-edit/excalidraw` | Excalidraw edit renderer |

## Part of Haklex

This package is part of the [Haklex](../../README.md) rich editor ecosystem.

## License

MIT