Skip to main content

@lexical/react/LexicalAutoEmbedPlugin

Classes​

AutoEmbedOption​

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

Extends​

Constructors​

Constructor​

new AutoEmbedOption(title, options): AutoEmbedOption

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

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:55

Inherited from​

MenuOption.icon

key​

key: string

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

Inherited from​

MenuOption.key

onSelect​

onSelect: (targetNode) => void

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

Parameters​
targetNode​

LexicalNode | null

Returns​

void

ref?​

optional ref?: RefObject<HTMLElement | null>

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

Inherited from​

MenuOption.ref

title​

title: string

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

Overrides​

MenuOption.title

Methods​

setRefElement()​

setRefElement(element): void

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

Parameters​
element​

HTMLElement | null

Returns​

void

Inherited from​

MenuOption.setRefElement

Interfaces​

EmbedConfig​

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

Type Parameters​

TEmbedMatchResultData​

TEmbedMatchResultData = unknown

TEmbedMatchResult​

TEmbedMatchResult = EmbedMatchResult<TEmbedMatchResultData>

Properties​

insertNode​

insertNode: (editor, result) => void

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

Parameters​
editor​

LexicalEditor

result​

TEmbedMatchResult

Returns​

void

parseUrl​

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

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

Parameters​
text​

string

Returns​

TEmbedMatchResult | Promise<TEmbedMatchResult | null> | null

type​

type: string

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

Type Aliases​

EmbedMatchResult​

EmbedMatchResult<TEmbedMatchResult> = object

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

Type Parameters​

TEmbedMatchResult​

TEmbedMatchResult = unknown

Properties​

data?​

optional data?: TEmbedMatchResult

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

id​

id: string

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

url​

url: string

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

Variables​

INSERT_EMBED_COMMAND​

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

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

URL_MATCHER​

const URL_MATCHER: RegExp

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

Functions​

LexicalAutoEmbedPlugin()​

LexicalAutoEmbedPlugin<TEmbedConfig>(__namedParameters): Element | null

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

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}
 />
);