@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
Overrides
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
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
Returns
HTMLElement
Overrides
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
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
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
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
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
Returns
boolean
Overrides
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
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
Returns
Overrides
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
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
Overrides
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
Overrides
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
canIndent()
canIndent():
false
Defined in: packages/lexical-code/src/CodeNode.ts:366
Returns
false
Overrides
collapseAtStart()
collapseAtStart():
boolean
Defined in: packages/lexical-code/src/CodeNode.ts:370
Returns
boolean
Overrides
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
Returns
HTMLElement
Overrides
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
Returns
Overrides
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
Overrides
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
restoreSelection
boolean
= true
Returns
null
| TabNode
| ParagraphNode
| CodeHighlightNode
Overrides
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
Returns
boolean
Overrides
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
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
Returns
Overrides
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
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
Returns
Overrides
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
Returns
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
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
$createCodeNode()
$createCodeNode(
language?
,theme?
):CodeNode
Defined in: packages/lexical-code/src/CodeNode.ts:409
Parameters
language?
null
| string
theme?
null
| string
Returns
$getEndOfCodeInLine()
$getEndOfCodeInLine(
anchor
):TabNode
|CodeHighlightNode
Defined in: packages/lexical-code/src/FlatStructureUtils.ts:167
Parameters
anchor
Returns
$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
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
tokenizer?
Tokenizer
Returns
():
void
Returns
void
References
normalizeCodeLanguage
Renames and re-exports normalizeCodeLang