skills.rest
webiny
webinyOFFICIAL
Explore all skills by this author →
Website𝕏@WebinyCMSGitHub

webiny-admin-lexical-catalog

Catalogs 17 Lexical rich-text editor abstractions with import paths and source references.

8.0k|673|Updated Jan 9, 2018
Search Tags:#React hooks#lexical#typeScript#admin UI#webiny#rich-text editor#import catalog
One-click install
npx skills add https://github.com/webiny/webiny-js --skill webiny-admin-lexical-catalog
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webiny-admin-lexical-catalog
Source: https://github.com/webiny/webiny-js/tree/main/skills/user-skills/generated/admin/lexical
Command: npx skills add https://github.com/webiny/webiny-js --skill webiny-admin-lexical-catalog

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers extending the Webiny admin rich-text editor need to know which Lexical components, hooks, and types exist and where to import them from, without manually searching the codebase.

Core Features & Use Cases

  • Abstraction Catalog: Lists 17 abstractions including UI components (Divider, DropDown), hooks (useRichTextEditor, useCurrentSelection), and types (Klass, LexicalNode).
  • Import Paths: Provides exact import statements from the "webiny/admin/lexical" entry point for each abstraction.
  • Source References: Points to the underlying source files in @webiny/lexical-editor so developers can read exact interfaces and types.
  • Use Case: When building a custom Lexical toolbar action, look up useTypographyAction or useTextAlignmentAction, copy the import, then read the referenced hook source for its signature.

Quick Start

Ask the assistant to show the import and source location for a Lexical editor hook such as useRichTextEditor from the Webiny admin lexical catalog.

Frequently Asked Questions about webiny-admin-lexical-catalog

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I import Lexical editor components in Webiny admin?▼

Import components from the "webiny/admin/lexical" entry point, for example: import { DropDown } from "webiny/admin/lexical". The catalog lists each abstraction with its exact import statement and source file.

What hooks are available for the Webiny Lexical rich-text editor?▼

Available hooks include useRichTextEditor, useCurrentSelection, useCurrentElement, useDeriveValueFromSelection, useFontColorPicker, useTextAlignmentAction, useTypographyAction, useIsMounted, and useLexicalEditorConfig.

How do I render Lexical content as HTML in Webiny?▼

Use the LexicalHtmlRenderer component imported from "webiny/admin/lexical". Its source is located at @webiny/lexical-editor/components/LexicalHtmlRenderer.tsx, which you should read for exact props.

Does the Webiny Lexical catalog include TypeScript types?▼

Yes, it includes type-only exports such as Klass and LexicalNode, imported with import type from "webiny/admin/lexical". Their definitions live in @webiny/lexical-editor/types.ts.

Why must I read the source file before using a catalog abstraction?▼

The catalog only provides names, import paths, and source locations, not full signatures. Reading the referenced source file in @webiny/lexical-editor gives you the exact interface, props, and types required for correct usage.

Related Skills

Explore More Software Engineering Skills→
InneiInnei
32

litexml-authoring

Convert LiteXML documents to Lexical editor states and static HTML.

Community
Intermediate
ShopifyShopify
491

shopify-polaris-admin-extensions

Generate Shopify admin extensions with Polaris components and validation scripts.

Official
Intermediate
tiantangcao1980-webtiantangcao1980-web
4

element-plus

Build Vue 3 desktop interfaces with Element Plus components and theming.

Community
Intermediate
umbracoumbraco
26

umbraco-tiptap-extension

Generate custom Tiptap node and mark extensions for Umbraco's rich text editor.

Official
Intermediate