Skip to main content

@lexical/react/LexicalAutoEmbedPlugin

Classes​

AutoEmbedOption​

Defined in: packages/lexical-react/src/LexicalAutoEmbedPlugin.tsx:88

A MenuOption for the auto-embed menu, pairing a display title with an onSelect callback invoked when the user chooses to embed the detected URL.

Extends​

Constructors​

Constructor​

new AutoEmbedOption(title, options): AutoEmbedOption

Defined in: packages/lexical-react/src/LexicalAutoEmbedPlugin.tsx:91

Parameters​
title​

string

options​
onSelect​

(targetNode) => void

Returns​

AutoEmbedOption

Overrides​

MenuOption.constructor

Properties​

icon?​

optional icon?: Element

Defined in: packages/lexical-react/src/shared/LexicalMenu.tsx:73

Inherited from​

MenuOption.icon

key​

key: string

Defined in: packages/lexical-react/src/shared/LexicalMenu.tsx:71

Inherited from​

MenuOption.key

onSelect​

onSelect: (targetNode) => void

Defined in: packages/lexical-react/src/LexicalAutoEmbedPlugin.tsx:90

Parameters​
targetNode​

LexicalNode | null

Returns​

void

ref?​

optional ref?: RefObject<HTMLElement | null>

Defined in: packages/lexical-react/src/shared/LexicalMenu.tsx:72

Inherited from​

MenuOption.ref

title​

title: string

Defined in: packages/lexical-react/src/LexicalAutoEmbedPlugin.tsx:89

Overrides​

MenuOption.title

Methods​

setRefElement()​

setRefElement(element): void

Defined in: packages/lexical-react/src/shared/LexicalMenu.tsx:82

Parameters​
element​

HTMLElement | null

Returns​

void

Inherited from​

MenuOption.setRefElement

Interfaces​

EmbedConfig​

Defined in: packages/lexical-react/src/LexicalAutoEmbedPlugin.tsx:54

Describes a kind of embed (for example YouTube, a tweet, or Google Maps) that LexicalAutoEmbedPlugin can detect and insert. Each config has a type identifier, a parseUrl function that decides whether a URL matches and extracts its data, and an insertNode function that inserts the corresponding Lexical node.

Type Parameters​

TEmbedMatchResultData​

TEmbedMatchResultData = unknown

TEmbedMatchResult​

TEmbedMatchResult = EmbedMatchResult<TEmbedMatchResultData>

Properties​

insertNode​

insertNode: (editor, result) => void

Defined in: packages/lexical-react/src/LexicalAutoEmbedPlugin.tsx:65

Parameters​
editor​

LexicalEditor

result​

TEmbedMatchResult

Returns​

void

parseUrl​

parseUrl: (text) => TEmbedMatchResult | Promise<TEmbedMatchResult | null> | null

Defined in: packages/lexical-react/src/LexicalAutoEmbedPlugin.tsx:61

Parameters​
text​

string

Returns​

TEmbedMatchResult | Promise<TEmbedMatchResult | null> | null

type​

type: string

Defined in: packages/lexical-react/src/LexicalAutoEmbedPlugin.tsx:59

Type Aliases​

EmbedMatchResult​

EmbedMatchResult<TEmbedMatchResult> = object

Defined in: packages/lexical-react/src/LexicalAutoEmbedPlugin.tsx:41

The result of matching a URL for an embed: the matched url, an id identifying the embedded resource, and optional provider-specific data.

Type Parameters​

TEmbedMatchResult​

TEmbedMatchResult = unknown

Properties​

data?​

optional data?: TEmbedMatchResult

Defined in: packages/lexical-react/src/LexicalAutoEmbedPlugin.tsx:44

id​

id: string

Defined in: packages/lexical-react/src/LexicalAutoEmbedPlugin.tsx:43

url​

url: string

Defined in: packages/lexical-react/src/LexicalAutoEmbedPlugin.tsx:42

Variables​

INSERT_EMBED_COMMAND​

const INSERT_EMBED_COMMAND: LexicalCommand<EmbedConfig["type"]>

Defined in: packages/lexical-react/src/LexicalAutoEmbedPlugin.tsx:80

Command dispatched to start inserting an embed. Its payload is the type of the EmbedConfig to use; LexicalAutoEmbedPlugin listens for it and runs that config's URL detection flow.

URL_MATCHER​

const URL_MATCHER: RegExp

Defined in: packages/lexical-react/src/LexicalAutoEmbedPlugin.tsx:72

A general-purpose regular expression for detecting URLs, provided as a convenience for implementing an EmbedConfig's parseUrl.

Functions​

LexicalAutoEmbedPlugin()​

LexicalAutoEmbedPlugin<TEmbedConfig>(__namedParameters): Element | null

Defined in: packages/lexical-react/src/LexicalAutoEmbedPlugin.tsx:172

Watches for pasted AutoLink nodes that match any of the provided embed configurations (e.g., YouTube, Twitter URLs). When a match is found, it shows a menu offering to replace the link with an embedded node.

You can pass a generic type to the plugin to extend EmbedConfig with additional data in EmbedMatchResult that will be passed to the callbacks

Type Parameters​

TEmbedConfig​

TEmbedConfig extends EmbedConfig<unknown, EmbedMatchResult<unknown>>

Parameters​

__namedParameters​

LexicalAutoEmbedPluginProps<TEmbedConfig>

Returns​

Element | null

Example​

Usage

interface CustomEmbedConfig extends EmbedConfig<{
  domain: string;
  oid?: string;
}> {
  // Icon for display.
  icon?: JSX.Element;
  // Embed a Figma Project.
  description?: string;
};

return (
 <LexicalAutoEmbedPlugin<CustomEmbedConfig>
   embedConfigs={EmbedConfigs}
   getMenuOptions={getMenuOptions}
 />
);