Skip to main content

@lexical/code

Classes

CodeHighlightNode

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

Extends

Constructors

Constructor

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

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

Parameters
text

string = ''

highlightType?

null | string

key?

string

Returns

CodeHighlightNode

Overrides

TextNode.constructor

Methods

canHaveFormat()

canHaveFormat(): boolean

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

Returns

boolean

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

Overrides

TextNode.canHaveFormat

createDOM()

createDOM(config): HTMLElement

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

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/src/CodeHighlightNode.ts:136

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/src/CodeHighlightNode.ts:120

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(): undefined | null | string

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

Returns

undefined | null | string

isParentRequired()

isParentRequired(): true

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

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/src/CodeHighlightNode.ts:128

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/src/CodeHighlightNode.ts:65

Parameters
highlightType?

null | string

Returns

this

updateDOM()

updateDOM(prevNode, dom, config): boolean

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

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/src/CodeHighlightNode.ts:112

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

clone()

static clone(node): CodeHighlightNode

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

Clones this node, creating a new node with a different key and adding it to the EditorState (but not attaching it anywhere!). All nodes must implement this method.

Parameters
node

CodeHighlightNode

Returns

CodeHighlightNode

Overrides

TextNode.clone

getType()

static getType(): string

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

Returns the string type of this node. Every node must implement this and it MUST BE UNIQUE amongst nodes registered on the editor.

Returns

string

Overrides

TextNode.getType

importJSON()

static importJSON(serializedNode): CodeHighlightNode

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

Controls how the this node is deserialized from JSON. This is usually boilerplate, but provides an abstraction between the node implementation and serialized interface that can be important if you ever make breaking changes to a node schema (by adding or removing properties). See Serialization & Deserialization.

Parameters
serializedNode

SerializedCodeHighlightNode

Returns

CodeHighlightNode

Overrides

TextNode.importJSON


CodeNode

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

Extends

Constructors

Constructor

new CodeNode(language?, key?): CodeNode

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

Parameters
language?

null | string

key?

string

Returns

CodeNode

Overrides

ElementNode.constructor

Methods

afterCloneFrom()

afterCloneFrom(prevNode): void

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

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/src/CodeNode.ts:366

Returns

false

Overrides

ElementNode.canIndent

collapseAtStart()

collapseAtStart(): boolean

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

Returns

boolean

Overrides

ElementNode.collapseAtStart

createDOM()

createDOM(config): HTMLElement

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

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/src/CodeNode.ts:175

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/src/CodeNode.ts:278

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/src/CodeNode.ts:394

Returns

boolean

getLanguage()

getLanguage(): undefined | null | string

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

Returns

undefined | null | string

getTheme()

getTheme(): undefined | string

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

Returns

undefined | string

insertNewAfter()

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

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

Parameters
selection

RangeSelection

restoreSelection

boolean = true

Returns

null | TabNode | ParagraphNode | CodeHighlightNode

Overrides

ElementNode.insertNewAfter

setIsSyntaxHighlightSupported()

setIsSyntaxHighlightSupported(isSupported): this

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

Parameters
isSupported

boolean

Returns

this

setLanguage()

setLanguage(language): this

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

Parameters
language

undefined | null | string

Returns

this

setTheme()

setTheme(theme): this

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

Parameters
theme

undefined | null | string

Returns

this

updateDOM()

updateDOM(prevNode, dom, config): boolean

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

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/src/CodeNode.ts:271

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

clone()

static clone(node): CodeNode

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

Clones this node, creating a new node with a different key and adding it to the EditorState (but not attaching it anywhere!). All nodes must implement this method.

Parameters
node

CodeNode

Returns

CodeNode

Overrides

ElementNode.clone

getType()

static getType(): string

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

Returns the string type of this node. Every node must implement this and it MUST BE UNIQUE amongst nodes registered on the editor.

Returns

string

Overrides

ElementNode.getType

importDOM()

static importDOM(): null | DOMConversionMap

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

Returns

null | DOMConversionMap

Overrides

ElementNode.importDOM

importJSON()

static importJSON(serializedNode): CodeNode

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

Controls how the this node is deserialized from JSON. This is usually boilerplate, but provides an abstraction between the node implementation and serialized interface that can be important if you ever make breaking changes to a node schema (by adding or removing properties). See Serialization & Deserialization.

Parameters
serializedNode

SerializedCodeNode

Returns

CodeNode

Overrides

ElementNode.importJSON

Type Aliases

SerializedCodeNode

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

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

Variables

CODE_LANGUAGE_FRIENDLY_NAME_MAP

const CODE_LANGUAGE_FRIENDLY_NAME_MAP: Record<string, string>

Defined in: packages/lexical-code/src/FacadePrism.ts:45


CODE_LANGUAGE_MAP

const CODE_LANGUAGE_MAP: Record<string, string>

Defined in: packages/lexical-code/src/FacadePrism.ts:65


DEFAULT_CODE_LANGUAGE

const DEFAULT_CODE_LANGUAGE: "javascript" = 'javascript'

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


getEndOfCodeInLine()

const getEndOfCodeInLine: (anchor) => TabNode | CodeHighlightNode = $getEndOfCodeInLine

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

Parameters

anchor

TabNode | CodeHighlightNode

Returns

TabNode | CodeHighlightNode

Deprecated

renamed to $getEndOfCodeInLine by @lexical/eslint-plugin rules-of-lexical


getFirstCodeNodeOfLine()

const getFirstCodeNodeOfLine: (anchor) => LineBreakNode | TabNode | CodeHighlightNode = $getFirstCodeNodeOfLine

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

Parameters

anchor

LineBreakNode | TabNode | CodeHighlightNode

Returns

LineBreakNode | TabNode | CodeHighlightNode

Deprecated

renamed to $getFirstCodeNodeOfLine by @lexical/eslint-plugin rules-of-lexical


getLastCodeNodeOfLine()

const getLastCodeNodeOfLine: (anchor) => LineBreakNode | TabNode | CodeHighlightNode = $getLastCodeNodeOfLine

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

Parameters

anchor

LineBreakNode | TabNode | CodeHighlightNode

Returns

LineBreakNode | TabNode | CodeHighlightNode

Deprecated

renamed to $getLastCodeNodeOfLine by @lexical/eslint-plugin rules-of-lexical


getStartOfCodeInLine()

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

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

Parameters

anchor

TabNode | CodeHighlightNode

offset

number

Returns

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

Deprecated

renamed to $getStartOfCodeInLine by @lexical/eslint-plugin rules-of-lexical


PrismTokenizer

const PrismTokenizer: Tokenizer

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

Functions

$createCodeHighlightNode()

$createCodeHighlightNode(text, highlightType?): CodeHighlightNode

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

Parameters

text

string = ''

highlightType?

null | string

Returns

CodeHighlightNode


$createCodeNode()

$createCodeNode(language?, theme?): CodeNode

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

Parameters

language?

null | string

theme?

null | string

Returns

CodeNode


$getEndOfCodeInLine()

$getEndOfCodeInLine(anchor): TabNode | CodeHighlightNode

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

Parameters

anchor

TabNode | CodeHighlightNode

Returns

TabNode | CodeHighlightNode


$getFirstCodeNodeOfLine()

$getFirstCodeNodeOfLine(anchor): LineBreakNode | TabNode | CodeHighlightNode

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

Parameters

anchor

LineBreakNode | TabNode | CodeHighlightNode

Returns

LineBreakNode | TabNode | CodeHighlightNode


$getLastCodeNodeOfLine()

$getLastCodeNodeOfLine(anchor): LineBreakNode | TabNode | CodeHighlightNode

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

Parameters

anchor

LineBreakNode | TabNode | CodeHighlightNode

Returns

LineBreakNode | TabNode | CodeHighlightNode


$getStartOfCodeInLine()

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

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

Parameters

anchor

TabNode | CodeHighlightNode

offset

number

Returns

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


$isCodeHighlightNode()

$isCodeHighlightNode(node): node is CodeHighlightNode

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

Parameters

node

undefined | null | LexicalNode | CodeHighlightNode

Returns

node is CodeHighlightNode


$isCodeNode()

$isCodeNode(node): node is CodeNode

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

Parameters

node

undefined | null | LexicalNode

Returns

node is CodeNode


getCodeLanguageOptions()

getCodeLanguageOptions(): [string, string][]

Defined in: packages/lexical-code/src/FacadePrism.ts:94

Returns

[string, string][]


getCodeLanguages()

getCodeLanguages(): string[]

Defined in: packages/lexical-code/src/FacadePrism.ts:85

Returns

string[]


getCodeThemeOptions()

getCodeThemeOptions(): [string, string][]

Defined in: packages/lexical-code/src/FacadePrism.ts:107

Returns

[string, string][]


getDefaultCodeLanguage()

getDefaultCodeLanguage(): string

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

Returns

string


getLanguageFriendlyName()

getLanguageFriendlyName(lang): string

Defined in: packages/lexical-code/src/FacadePrism.ts:80

Parameters

lang

string

Returns

string


normalizeCodeLang()

normalizeCodeLang(lang): string

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

Parameters

lang

string

Returns

string


registerCodeHighlighting()

registerCodeHighlighting(editor, tokenizer?): () => void

Defined in: packages/lexical-code/src/CodeHighlighterPrism.ts:752

Parameters

editor

LexicalEditor

tokenizer?

Tokenizer

Returns

(): void

Returns

void

References

normalizeCodeLanguage

Renames and re-exports normalizeCodeLang