Skip to main content

@lexical/code

Classes​

CodeHighlightNode​

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

Extends​

Constructors​

Constructor​

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

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

Parameters​
text​

string = ''

highlightType?​

null | string

key?​

string

Returns​

CodeHighlightNode

Overrides​

TextNode.constructor

Methods​

canHaveFormat()​

canHaveFormat(): boolean

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

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

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

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

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

Returns​

undefined | null | string

isParentRequired()​

isParentRequired(): true

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

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

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

Parameters​
highlightType?​

null | string

Returns​

this

updateDOM()​

updateDOM(prevNode, dom, config): boolean

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

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

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

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

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

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

Extends​

Constructors​

Constructor​

new CodeNode(language?, key?): CodeNode

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

Parameters​
language?​

null | string

key?​

string

Returns​

CodeNode

Overrides​

ElementNode.constructor

Methods​

afterCloneFrom()​

afterCloneFrom(prevNode): void

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

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

Returns​

false

Overrides​

ElementNode.canIndent

collapseAtStart()​

collapseAtStart(): boolean

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

Returns​

boolean

Overrides​

ElementNode.collapseAtStart

createDOM()​

createDOM(config): HTMLElement

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

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

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

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

Returns​

boolean

getLanguage()​

getLanguage(): undefined | null | string

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

Returns​

undefined | null | string

getTheme()​

getTheme(): undefined | string

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

Returns​

undefined | string

insertNewAfter()​

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

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

Parameters​
selection​

RangeSelection

restoreSelection​

boolean = true

Returns​

null | TabNode | ParagraphNode | CodeHighlightNode

Overrides​

ElementNode.insertNewAfter

setIsSyntaxHighlightSupported()​

setIsSyntaxHighlightSupported(isSupported): this

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

Parameters​
isSupported​

boolean

Returns​

this

setLanguage()​

setLanguage(language): this

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

Parameters​
language​

undefined | null | string

Returns​

this

setTheme()​

setTheme(theme): this

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

Parameters​
theme​

undefined | null | string

Returns​

this

updateDOM()​

updateDOM(prevNode, dom, config): boolean

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

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

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

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

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

Returns​

null | DOMConversionMap

Overrides​

ElementNode.importDOM

importJSON()​

static importJSON(serializedNode): CodeNode

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

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

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

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

Deprecated​

moved to @lexical/code-prism

CodeExtension​

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

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

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

DEFAULT_CODE_LANGUAGE​

const DEFAULT_CODE_LANGUAGE: "javascript" = 'javascript'

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

getCodeLanguageOptions()​

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

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

Returns​

[string, string][]

Deprecated​

moved to @lexical/code-prism

getCodeLanguages()​

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

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

Returns​

string[]

Deprecated​

moved to @lexical/code-prism

getCodeThemeOptions()​

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

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

Returns​

[string, string][]

Deprecated​

moved to @lexical/code-prism

getLanguageFriendlyName()​

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

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

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

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

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

Deprecated​

moved to @lexical/code-prism

registerCodeHighlighting()​

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

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

Parameters​

editor​

LexicalEditor

tokenizer?​

Tokenizer

Returns​

(): void

Returns​

void

Deprecated​

moved to @lexical/code-prism

Functions​

$createCodeHighlightNode()​

$createCodeHighlightNode(text, highlightType?): CodeHighlightNode

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

Parameters​

text​

string = ''

highlightType?​

null | string

Returns​

CodeHighlightNode

$createCodeNode()​

$createCodeNode(language?, theme?): CodeNode

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

Parameters​

language?​

null | string

theme?​

null | string

Returns​

CodeNode

$getCodeLineDirection()​

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

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

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​

null | "ltr" | "rtl"

$getEndOfCodeInLine()​

$getEndOfCodeInLine(anchor): TabNode | CodeHighlightNode

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

Parameters​

anchor​

TabNode | CodeHighlightNode

Returns​

TabNode | CodeHighlightNode

$getFirstCodeNodeOfLine()​

$getFirstCodeNodeOfLine(anchor): LineBreakNode | TabNode | CodeHighlightNode

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

Parameters​

anchor​

LineBreakNode | TabNode | CodeHighlightNode

Returns​

LineBreakNode | TabNode | CodeHighlightNode

$getLastCodeNodeOfLine()​

$getLastCodeNodeOfLine(anchor): LineBreakNode | TabNode | CodeHighlightNode

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

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-core/src/FlatStructureUtils.ts:100

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

Parameters​

node​

undefined | null | LexicalNode | CodeHighlightNode

Returns​

node is CodeHighlightNode

$isCodeNode()​

$isCodeNode(node): node is CodeNode

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

Parameters​

node​

undefined | null | LexicalNode

Returns​

node is CodeNode

getDefaultCodeLanguage()​

getDefaultCodeLanguage(): string

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

Returns​

string