webiny-admin-lexical-catalog

$npx mdskill add webiny/webiny-js/webiny-admin-lexical-catalog

Build custom Lexical editor UI components and hooks.

  • Developers create rich text interfaces for content management.
  • The skill integrates with the Lexical editor framework.
  • Agents import specific abstractions like Divider or getNodeFromSelection.
  • Results appear as functional React components ready for use.
SKILL.md
.github/skills/webiny-admin-lexical-catalogView on GitHub ↗
---
name: webiny-admin-lexical-catalog
context: webiny-api
description: >
  admin/lexical — 17 abstractions.
---

# admin/lexical

## How to Use

1. Find the abstraction you need below
2. Read the source file to get the exact interface and types
3. Import: `import { Name } from "<importPath>";`

## Abstractions

---

**Name:** `Divider`
**Import:** `import { Divider } from "webiny/admin/lexical"`
**Source:** `@webiny/lexical-editor/ui/Divider.tsx`

---

**Name:** `DropDown`
**Import:** `import { DropDown } from "webiny/admin/lexical"`
**Source:** `@webiny/lexical-editor/ui/DropDown.tsx`

---

**Name:** `DropDownItem`
**Import:** `import { DropDownItem } from "webiny/admin/lexical"`
**Source:** `@webiny/lexical-editor/ui/DropDown.tsx`

---

**Name:** `getNodeFromSelection`
**Import:** `import { getNodeFromSelection } from "webiny/admin/lexical"`
**Source:** `@webiny/lexical-editor/hooks/index.ts`

---

**Name:** `Klass`
**Kind:** type
**Import:** `import type { Klass } from "webiny/admin/lexical"`
**Source:** `@webiny/lexical-editor/types.ts`

---

**Name:** `LexicalEditorConfig`
**Import:** `import { LexicalEditorConfig } from "webiny/admin/lexical"`
**Source:** `@webiny/lexical-editor/components/LexicalEditorConfig/LexicalEditorConfig.tsx`

---

**Name:** `LexicalHtmlRenderer`
**Import:** `import { LexicalHtmlRenderer } from "webiny/admin/lexical"`
**Source:** `@webiny/lexical-editor/components/LexicalHtmlRenderer.tsx`

---

**Name:** `LexicalNode`
**Kind:** type
**Import:** `import type { LexicalNode } from "webiny/admin/lexical"`
**Source:** `@webiny/lexical-editor/types.ts`

---

**Name:** `useCurrentElement`
**Import:** `import { useCurrentElement } from "webiny/admin/lexical"`
**Source:** `@webiny/lexical-editor/hooks/index.ts`

---

**Name:** `useCurrentSelection`
**Import:** `import { useCurrentSelection } from "webiny/admin/lexical"`
**Source:** `@webiny/lexical-editor/hooks/index.ts`

---

**Name:** `useDeriveValueFromSelection`
**Import:** `import { useDeriveValueFromSelection } from "webiny/admin/lexical"`
**Source:** `@webiny/lexical-editor/hooks/index.ts`

---

**Name:** `useFontColorPicker`
**Import:** `import { useFontColorPicker } from "webiny/admin/lexical"`
**Source:** `@webiny/lexical-editor/hooks/index.ts`

---

**Name:** `useIsMounted`
**Import:** `import { useIsMounted } from "webiny/admin/lexical"`
**Source:** `@webiny/lexical-editor/hooks/index.ts`

---

**Name:** `useLexicalEditorConfig`
**Import:** `import { useLexicalEditorConfig } from "webiny/admin/lexical"`
**Source:** `@webiny/lexical-editor/components/LexicalEditorConfig/LexicalEditorConfig.tsx`

---

**Name:** `useRichTextEditor`
**Import:** `import { useRichTextEditor } from "webiny/admin/lexical"`
**Source:** `@webiny/lexical-editor/hooks/index.ts`

---

**Name:** `useTextAlignmentAction`
**Import:** `import { useTextAlignmentAction } from "webiny/admin/lexical"`
**Source:** `@webiny/lexical-editor/hooks/index.ts`

---

**Name:** `useTypographyAction`
**Import:** `import { useTypographyAction } from "webiny/admin/lexical"`
**Source:** `@webiny/lexical-editor/hooks/index.ts`

---
More from webiny/webiny-js