Skip to main content

@lexical/code

Classes​

CodeHighlightNode​

Defined in: packages/lexical-code-core/src/CodeHighlightNode.ts:34

Extends​

Constructors​

Constructor​

new CodeHighlightNode(text?, highlightType?, key?): CodeHighlightNode

Defined in: packages/lexical-code-core/src/CodeHighlightNode.ts:38

Parameters​
text?​

string = ''

highlightType?​

string | null

key?​

string

Returns​

CodeHighlightNode

Overrides​

TextNode.constructor

Methods​

$config()​

$config(): BaseStaticNodeConfig & object & object & StaticNodeTypeAccessor<"code-highlight"> & StaticNodeConfigAccessor<{ extends: typeof TextNode; }>

Defined in: packages/lexical-code-core/src/CodeHighlightNode.ts:47

Override this to implement the new static node configuration protocol, this method is called directly on the prototype and must not depend on anything initialized in the constructor. Generally it should be a trivial implementation.

Returns​

BaseStaticNodeConfig & object & object & StaticNodeTypeAccessor<"code-highlight"> & StaticNodeConfigAccessor<{ extends: typeof TextNode; }>

Example​
class MyNode extends TextNode {
$config() {
return this.config('my-node', {extends: TextNode});
}
}
Overrides​

TextNode.$config

afterCloneFrom()​

afterCloneFrom(prevNode): void

Defined in: packages/lexical-code-core/src/CodeHighlightNode.ts:51

Perform any state updates on the clone of prevNode that are not already handled by the constructor call in the static clone method. If you have state to update in your clone that is not handled directly by the constructor, it is advisable to override this method but it is required to include a call to super.afterCloneFrom(prevNode) in your implementation. This is only intended to be called by $cloneWithProperties function or via a super call.

Parameters​
prevNode​

this

Returns​

void

Example​
class ClassesTextNode extends TextNode {
// Not shown: static getType, static importJSON, exportJSON, createDOM, updateDOM
__classes = new Set<string>();
static clone(node: ClassesTextNode): ClassesTextNode {
// The inherited TextNode constructor is used here, so
// classes is not set by this method.
return new ClassesTextNode(node.__text, node.__key);
}
afterCloneFrom(node: this): void {
// This calls TextNode.afterCloneFrom and LexicalNode.afterCloneFrom
// for necessary state updates
super.afterCloneFrom(node);
this.__addClasses(node.__classes);
}
// This method is a private implementation detail, it is not
// suitable for the public API because it does not call getWritable
__addClasses(classNames: Iterable<string>): this {
for (const className of classNames) {
this.__classes.add(className);
}
return this;
}
addClass(...classNames: string[]): this {
return this.getWritable().__addClasses(classNames);
}
removeClass(...classNames: string[]): this {
const node = this.getWritable();
for (const className of classNames) {
this.__classes.delete(className);
}
return this;
}
getClasses(): Set<string> {
return this.getLatest().__classes;
}
}
Overrides​

TextNode.afterCloneFrom

canHaveFormat()​

canHaveFormat(): boolean

Defined in: packages/lexical-code-core/src/CodeHighlightNode.ts:67

Returns​

boolean

true if the text node supports font styling, false otherwise.

Overrides​

TextNode.canHaveFormat

createDOM()​

createDOM(config): HTMLElement

Defined in: packages/lexical-code-core/src/CodeHighlightNode.ts:71

Called during the reconciliation process to determine which nodes to insert into the DOM for this Lexical Node.

This method must return exactly one HTMLElement. Nested elements are not supported.

Do not attempt to update the Lexical EditorState during this phase of the update lifecycle.

Parameters​
config​

EditorConfig

Returns​

HTMLElement

Overrides​

TextNode.createDOM

createParentElementNode()​

createParentElementNode(): ElementNode

Defined in: packages/lexical-code-core/src/CodeHighlightNode.ts:126

The creation logic for any required parent. Should be implemented if isParentRequired returns true.

Returns​

ElementNode

Overrides​

TextNode.createParentElementNode

exportJSON()​

exportJSON(): SerializedCodeHighlightNode

Defined in: packages/lexical-code-core/src/CodeHighlightNode.ts:110

Controls how the this node is serialized to JSON. This is important for copy and paste between Lexical editors sharing the same namespace. It's also important if you're serializing to JSON for persistent storage somewhere. See Serialization & Deserialization.

Returns​

SerializedCodeHighlightNode

Overrides​

TextNode.exportJSON

getHighlightType()​

getHighlightType(): string | null | undefined

Defined in: packages/lexical-code-core/src/CodeHighlightNode.ts:56

Returns​

string | null | undefined

isParentRequired()​

isParentRequired(): true

Defined in: packages/lexical-code-core/src/CodeHighlightNode.ts:122

Whether or not this node has a required parent. Used during copy + paste operations to normalize nodes that would otherwise be orphaned. For example, ListItemNodes without a ListNode parent or TextNodes with a ParagraphNode parent.

Returns​

true

Overrides​

TextNode.isParentRequired

setFormat()​

setFormat(format): this

Defined in: packages/lexical-code-core/src/CodeHighlightNode.ts:118

Sets the node format to the provided TextFormatType or 32-bit integer. Note that the TextFormatType version of the argument can only specify one format and doing so will remove all other formats that may be applied to the node. For toggling behavior, consider using TextNode.toggleFormat

Parameters​
format​

number

TextFormatType or 32-bit integer representing the node format.

Returns​

this

this TextNode. // TODO 0.12 This should just be a string.

Overrides​

TextNode.setFormat

setHighlightType()​

setHighlightType(highlightType?): this

Defined in: packages/lexical-code-core/src/CodeHighlightNode.ts:61

Parameters​
highlightType?​

string | null

Returns​

this

updateDOM()​

updateDOM(prevNode, dom, config): boolean

Defined in: packages/lexical-code-core/src/CodeHighlightNode.ts:81

Called when a node changes and should update the DOM in whatever way is necessary to make it align with any changes that might have happened during the update.

Returning "true" here will cause lexical to unmount and recreate the DOM node (by calling createDOM). You would need to do this if the element tag changes, for instance.

Parameters​
prevNode​

this

dom​

HTMLElement

config​

EditorConfig

Returns​

boolean

Overrides​

TextNode.updateDOM

updateFromJSON()​

updateFromJSON(serializedNode): this

Defined in: packages/lexical-code-core/src/CodeHighlightNode.ts:102

Update this LexicalNode instance from serialized JSON. It's recommended to implement as much logic as possible in this method instead of the static importJSON method, so that the functionality can be inherited in subclasses.

The LexicalUpdateJSON utility type should be used to ignore any type, version, or children properties in the JSON so that the extended JSON from subclasses are acceptable parameters for the super call.

If overridden, this method must call super.

Parameters​
serializedNode​

LexicalUpdateJSON<SerializedCodeHighlightNode>

Returns​

this

Example​
class MyTextNode extends TextNode {
// ...
static importJSON(serializedNode: SerializedMyTextNode): MyTextNode {
return $createMyTextNode()
.updateFromJSON(serializedNode);
}
updateFromJSON(
serializedNode: LexicalUpdateJSON<SerializedMyTextNode>,
): this {
return super.updateFromJSON(serializedNode)
.setMyProperty(serializedNode.myProperty);
}
}
Overrides​

TextNode.updateFromJSON


CodeNode​

Defined in: packages/lexical-code-core/src/CodeNode.ts:81

Extends​

Constructors​

Constructor​

new CodeNode(language?, key?): CodeNode

Defined in: packages/lexical-code-core/src/CodeNode.ts:162

Parameters​
language?​

string | null | undefined

key?​

string

Returns​

CodeNode

Overrides​

ElementNode.constructor

Methods​

$config()​

$config(): BaseStaticNodeConfig & object & StaticNodeTypeAccessor<"code"> & StaticNodeConfigAccessor<{ extends: typeof ElementNode; importDOM: { code: (node) => { conversion: (domNode) => DOMConversionOutput; priority: 1; } | null; div: () => object; pre: () => object; table: (node) => { conversion: () => DOMConversionOutput; priority: 3; } | null; td: (node) => { conversion: () => DOMConversionOutput; priority: 3; } | null; tr: (node) => { conversion: () => DOMConversionOutput; priority: 3; } | null; }; }>

Defined in: packages/lexical-code-core/src/CodeNode.ts:89

Override this to implement the new static node configuration protocol, this method is called directly on the prototype and must not depend on anything initialized in the constructor. Generally it should be a trivial implementation.

Returns​

BaseStaticNodeConfig & object & StaticNodeTypeAccessor<"code"> & StaticNodeConfigAccessor<{ extends: typeof ElementNode; importDOM: { code: (node) => { conversion: (domNode) => DOMConversionOutput; priority: 1; } | null; div: () => object; pre: () => object; table: (node) => { conversion: () => DOMConversionOutput; priority: 3; } | null; td: (node) => { conversion: () => DOMConversionOutput; priority: 3; } | null; tr: (node) => { conversion: () => DOMConversionOutput; priority: 3; } | null; }; }>

Example​
class MyNode extends TextNode {
$config() {
return this.config('my-node', {extends: TextNode});
}
}
Overrides​

ElementNode.$config

afterCloneFrom()​

afterCloneFrom(prevNode): void

Defined in: packages/lexical-code-core/src/CodeNode.ts:169

Perform any state updates on the clone of prevNode that are not already handled by the constructor call in the static clone method. If you have state to update in your clone that is not handled directly by the constructor, it is advisable to override this method but it is required to include a call to super.afterCloneFrom(prevNode) in your implementation. This is only intended to be called by $cloneWithProperties function or via a super call.

Parameters​
prevNode​

this

Returns​

void

Example​
class ClassesTextNode extends TextNode {
// Not shown: static getType, static importJSON, exportJSON, createDOM, updateDOM
__classes = new Set<string>();
static clone(node: ClassesTextNode): ClassesTextNode {
// The inherited TextNode constructor is used here, so
// classes is not set by this method.
return new ClassesTextNode(node.__text, node.__key);
}
afterCloneFrom(node: this): void {
// This calls TextNode.afterCloneFrom and LexicalNode.afterCloneFrom
// for necessary state updates
super.afterCloneFrom(node);
this.__addClasses(node.__classes);
}
// This method is a private implementation detail, it is not
// suitable for the public API because it does not call getWritable
__addClasses(classNames: Iterable<string>): this {
for (const className of classNames) {
this.__classes.add(className);
}
return this;
}
addClass(...classNames: string[]): this {
return this.getWritable().__addClasses(classNames);
}
removeClass(...classNames: string[]): this {
const node = this.getWritable();
for (const className of classNames) {
this.__classes.delete(className);
}
return this;
}
getClasses(): Set<string> {
return this.getLatest().__classes;
}
}
Overrides​

ElementNode.afterCloneFrom

canIndent()​

canIndent(): false

Defined in: packages/lexical-code-core/src/CodeNode.ts:362

Returns​

false

Overrides​

ElementNode.canIndent

collapseAtStart()​

collapseAtStart(): boolean

Defined in: packages/lexical-code-core/src/CodeNode.ts:366

Returns​

boolean

Overrides​

ElementNode.collapseAtStart

createDOM()​

createDOM(config): HTMLElement

Defined in: packages/lexical-code-core/src/CodeNode.ts:177

Called during the reconciliation process to determine which nodes to insert into the DOM for this Lexical Node.

This method must return exactly one HTMLElement. Nested elements are not supported.

Do not attempt to update the Lexical EditorState during this phase of the update lifecycle.

Parameters​
config​

EditorConfig

Returns​

HTMLElement

Overrides​

ElementNode.createDOM

exportDOM()​

exportDOM(editor): DOMExportOutput

Defined in: packages/lexical-code-core/src/CodeNode.ts:248

Controls how the this node is serialized to HTML. This is important for copy and paste between Lexical and non-Lexical editors, or Lexical editors with different namespaces, in which case the primary transfer format is HTML. It's also important if you're serializing to HTML for any other reason via $generateHtmlFromNodes. You could also use this method to build your own HTML renderer.

Parameters​
editor​

LexicalEditor

Returns​

DOMExportOutput

Overrides​

ElementNode.exportDOM

exportJSON()​

exportJSON(): SerializedCodeNode

Defined in: packages/lexical-code-core/src/CodeNode.ts:280

Controls how the this node is serialized to JSON. This is important for copy and paste between Lexical editors sharing the same namespace. It's also important if you're serializing to JSON for persistent storage somewhere. See Serialization & Deserialization.

Returns​

SerializedCodeNode

Overrides​

ElementNode.exportJSON

getIsSyntaxHighlightSupported()​

getIsSyntaxHighlightSupported(): boolean

Defined in: packages/lexical-code-core/src/CodeNode.ts:390

Returns​

boolean

getLanguage()​

getLanguage(): string | null | undefined

Defined in: packages/lexical-code-core/src/CodeNode.ts:380

Returns​

string | null | undefined

getTheme()​

getTheme(): string | undefined

Defined in: packages/lexical-code-core/src/CodeNode.ts:400

Returns​

string | undefined

insertNewAfter()​

insertNewAfter(selection, restoreSelection?): ParagraphNode | TabNode | CodeHighlightNode | null

Defined in: packages/lexical-code-core/src/CodeNode.ts:289

Parameters​
selection​

RangeSelection

restoreSelection?​

boolean = true

Returns​

ParagraphNode | TabNode | CodeHighlightNode | null

Overrides​

ElementNode.insertNewAfter

setIsSyntaxHighlightSupported()​

setIsSyntaxHighlightSupported(isSupported): this

Defined in: packages/lexical-code-core/src/CodeNode.ts:384

Parameters​
isSupported​

boolean

Returns​

this

setLanguage()​

setLanguage(language): this

Defined in: packages/lexical-code-core/src/CodeNode.ts:374

Parameters​
language​

string | null | undefined

Returns​

this

setTheme()​

setTheme(theme): this

Defined in: packages/lexical-code-core/src/CodeNode.ts:394

Parameters​
theme​

string | null | undefined

Returns​

this

updateDOM()​

updateDOM(prevNode, dom, config): boolean

Defined in: packages/lexical-code-core/src/CodeNode.ts:200

Called when a node changes and should update the DOM in whatever way is necessary to make it align with any changes that might have happened during the update.

Returning "true" here will cause lexical to unmount and recreate the DOM node (by calling createDOM). You would need to do this if the element tag changes, for instance.

Parameters​
prevNode​

this

dom​

HTMLElement

config​

EditorConfig

Returns​

boolean

Overrides​

ElementNode.updateDOM

updateFromJSON()​

updateFromJSON(serializedNode): this

Defined in: packages/lexical-code-core/src/CodeNode.ts:273

Update this LexicalNode instance from serialized JSON. It's recommended to implement as much logic as possible in this method instead of the static importJSON method, so that the functionality can be inherited in subclasses.

The LexicalUpdateJSON utility type should be used to ignore any type, version, or children properties in the JSON so that the extended JSON from subclasses are acceptable parameters for the super call.

If overridden, this method must call super.

Parameters​
serializedNode​

LexicalUpdateJSON<SerializedCodeNode>

Returns​

this

Example​
class MyTextNode extends TextNode {
// ...
static importJSON(serializedNode: SerializedMyTextNode): MyTextNode {
return $createMyTextNode()
.updateFromJSON(serializedNode);
}
updateFromJSON(
serializedNode: LexicalUpdateJSON<SerializedMyTextNode>,
): this {
return super.updateFromJSON(serializedNode)
.setMyProperty(serializedNode.myProperty);
}
}
Overrides​

ElementNode.updateFromJSON

Interfaces​

CodeIndentConfig​

Defined in: packages/lexical-code-core/src/CodeIndentation.ts:681

Properties​

disabled​

disabled: boolean

Defined in: packages/lexical-code-core/src/CodeIndentation.ts:687

When true, the indent commands are not registered on the editor. This signal can be flipped at runtime to enable or disable indent handling without rebuilding the editor.

escapeWithArrows​

escapeWithArrows: boolean

Defined in: packages/lexical-code-core/src/CodeIndentation.ts:706

When true, this enables the ability to exit a code block that has no adjacent elements using the ArrowLeft/ArrowUp keys if the cursor is at the beginning, or the ArrowRight/ArrowDown keys if the cursor is at the end. When false (default), pressing the arrow keys will not move the cursor if there are no adjacent elements around the code block

tabSize​

tabSize: number | undefined

Defined in: packages/lexical-code-core/src/CodeIndentation.ts:697

When set, treats that many leading spaces on a code line as one indent level for the OUTDENT_CONTENT_COMMAND (Shift+Tab). See registerCodeIndentation. When undefined (the default), only TabNode removal is supported on outdent.

Tab and INSERT_TAB_COMMAND continue to insert a TabNode regardless of this option.

Type Aliases​

SerializedCodeNode​

SerializedCodeNode = Spread<{ language: string | null | undefined; theme?: string; }, SerializedElementNode>

Defined in: packages/lexical-code-core/src/CodeNode.ts:48

Variables​

CODE_LANGUAGE_FRIENDLY_NAME_MAP​

const CODE_LANGUAGE_FRIENDLY_NAME_MAP: Record<string, string> = LexicalCodePrism.CODE_LANGUAGE_FRIENDLY_NAME_MAP

Defined in: packages/lexical-code/src/index.ts:33

Deprecated​

moved to @lexical/code-prism


CODE_LANGUAGE_MAP​

const CODE_LANGUAGE_MAP: Record<string, string> = LexicalCodePrism.CODE_LANGUAGE_MAP

Defined in: packages/lexical-code/src/index.ts:36

Deprecated​

moved to @lexical/code-prism


CodeExtension​

const CodeExtension: LexicalExtension<ExtensionConfigBase, "@lexical/code", unknown, unknown>

Defined in: packages/lexical-code-core/src/CodeExtension.ts:31

Add code blocks to the editor (syntax highlighting provided separately)


CodeIndentExtension​

const CodeIndentExtension: LexicalExtension<CodeIndentConfig, "@lexical/code-indent", NamedSignalsOutput<CodeIndentConfig>, unknown>

Defined in: packages/lexical-code-core/src/CodeIndentation.ts:720

Adds keyboard-driven indentation to code blocks (Tab / Shift+Tab, alt+arrow line shifts, Home/End within a line). Both "@lexical/code-shiki".CodeShikiExtension and "@lexical/code-prism".CodePrismExtension declare this as a dependency, so it is activated automatically alongside either highlighter.

Code blocks without syntax highlighting can use this extension on its own.


DEFAULT_CODE_LANGUAGE​

const DEFAULT_CODE_LANGUAGE: "javascript" = 'javascript'

Defined in: packages/lexical-code-core/src/CodeNode.ts:56


getCodeLanguageOptions​

const getCodeLanguageOptions: () => [string, string][] = LexicalCodePrism.getCodeLanguageOptions

Defined in: packages/lexical-code/src/index.ts:38

Returns​

[string, string][]

Deprecated​

moved to @lexical/code-prism


getCodeLanguages​

const getCodeLanguages: () => string[] = LexicalCodePrism.getCodeLanguages

Defined in: packages/lexical-code/src/index.ts:40

Returns​

string[]

Deprecated​

moved to @lexical/code-prism


getCodeThemeOptions​

const getCodeThemeOptions: () => [string, string][] = LexicalCodePrism.getCodeThemeOptions

Defined in: packages/lexical-code/src/index.ts:42

Returns​

[string, string][]

Deprecated​

moved to @lexical/code-prism


getLanguageFriendlyName​

const getLanguageFriendlyName: (lang) => string = LexicalCodePrism.getLanguageFriendlyName

Defined in: packages/lexical-code/src/index.ts:44

Parameters​

lang​

string

Returns​

string

Deprecated​

moved to @lexical/code-prism


normalizeCodeLang​

const normalizeCodeLang: (lang) => string = LexicalCodePrism.normalizeCodeLanguage

Defined in: packages/lexical-code/src/index.ts:46

Parameters​

lang​

string

Returns​

string

Deprecated​

renamed to normalizeCodeLanguage and moved to @lexical/code-prism


normalizeCodeLanguage​

const normalizeCodeLanguage: (lang) => string = LexicalCodePrism.normalizeCodeLanguage

Defined in: packages/lexical-code/src/index.ts:48

Parameters​

lang​

string

Returns​

string

Deprecated​

moved to @lexical/code-prism


PrismTokenizer​

const PrismTokenizer: Tokenizer = LexicalCodePrism.PrismTokenizer

Defined in: packages/lexical-code/src/index.ts:50

Deprecated​

moved to @lexical/code-prism


registerCodeHighlighting​

const registerCodeHighlighting: (editor, tokenizer) => () => void = LexicalCodePrism.registerCodeHighlighting

Defined in: packages/lexical-code/src/index.ts:52

Register the Prism tokenizer-driven highlighting on the editor along with the indent / Tab / arrow-key keyboard handlers. This function is provided for legacy code that has not upgraded to using CodePrismExtension.

Parameters​

editor​

LexicalEditor

tokenizer?​

Tokenizer = PrismTokenizer

Returns​

() => void

Deprecated​

moved to @lexical/code-prism

Functions​

$createCodeHighlightNode()​

$createCodeHighlightNode(text?, highlightType?): CodeHighlightNode

Defined in: packages/lexical-code-core/src/CodeHighlightNode.ts:143

Parameters​

text?​

string = ''

highlightType?​

string | null

Returns​

CodeHighlightNode


$createCodeNode()​

$createCodeNode(language?, theme?): CodeNode

Defined in: packages/lexical-code-core/src/CodeNode.ts:405

Parameters​

language?​

string | null

theme?​

string | null

Returns​

CodeNode


$getCodeLineDirection()​

$getCodeLineDirection(anchor): "ltr" | "rtl" | null

Defined in: packages/lexical-code-core/src/FlatStructureUtils.ts:76

Determines the visual writing direction of a code line.

Scans the line segments (CodeHighlightNode/TabNode) from start to end and returns the first strong direction found ("ltr" or "rtl"). If no strong character is found, falls back to the parent element's direction. Returns null if indeterminate.

Parameters​

anchor​

LineBreakNode | TabNode | CodeHighlightNode

Returns​

"ltr" | "rtl" | null


$getEndOfCodeInLine()​

$getEndOfCodeInLine(anchor): TabNode | CodeHighlightNode

Defined in: packages/lexical-code-core/src/FlatStructureUtils.ts:226

Parameters​

anchor​

TabNode | CodeHighlightNode

Returns​

TabNode | CodeHighlightNode


$getFirstCodeNodeOfLine()​

$getFirstCodeNodeOfLine<T>(anchor): TabNode | CodeHighlightNode | T

Defined in: packages/lexical-code-core/src/FlatStructureUtils.ts:56

Type Parameters​

T​

T extends TextNode | LineBreakNode

Parameters​

anchor​

T

Returns​

TabNode | CodeHighlightNode | T


$getLastCodeNodeOfLine()​

$getLastCodeNodeOfLine<T>(anchor): TabNode | CodeHighlightNode | T

Defined in: packages/lexical-code-core/src/FlatStructureUtils.ts:62

Type Parameters​

T​

T extends TextNode | LineBreakNode

Parameters​

anchor​

T

Returns​

TabNode | CodeHighlightNode | T


$getStartOfCodeInLine()​

$getStartOfCodeInLine(anchor, offset): { node: LineBreakNode | TabNode | CodeHighlightNode; offset: number; } | null

Defined in: packages/lexical-code-core/src/FlatStructureUtils.ts:109

Parameters​

anchor​

TabNode | CodeHighlightNode

offset​

number

Returns​

{ node: LineBreakNode | TabNode | CodeHighlightNode; offset: number; } | null


$isCodeHighlightNode()​

$isCodeHighlightNode(node): node is CodeHighlightNode

Defined in: packages/lexical-code-core/src/CodeHighlightNode.ts:150

Parameters​

node​

LexicalNode | CodeHighlightNode | null | undefined

Returns​

node is CodeHighlightNode


$isCodeNode()​

$isCodeNode(node): node is CodeNode

Defined in: packages/lexical-code-core/src/CodeNode.ts:412

Parameters​

node​

LexicalNode | null | undefined

Returns​

node is CodeNode


$outdentLeadingSpaces()​

$outdentLeadingSpaces(node, tabSize, selection): boolean

Defined in: packages/lexical-code-core/src/FlatStructureUtils.ts:269

Strip up to tabSize leading spaces from a CodeHighlightNode that starts a code line, to support outdenting space-indented code lines (e.g. code formatted with prettier). Returns true if any spaces were stripped.

Best-effort: a line with fewer than tabSize leading spaces has all of them stripped, matching VS Code / IntelliJ behavior.

Selection is preserved relative to line content. Anchor/focus offsets pointing into node shift left by the number of stripped characters (clamped to 0). The underlying TextNode mutation does not adjust selection offsets that already point into the old text, so we patch them up explicitly.

Parameters​

node​

CodeHighlightNode

tabSize​

number

selection​

RangeSelection

Returns​

boolean