I’m running a React Vite project with a Lexical editor. I’m trying to extend the list node, to make it styleable (square, circle, roman numerals, etc.). Here is my extended node file:
import { ElementNode, createCommand } from 'lexical';
import { ListNode } from '@lexical/list';
export const INSERT_UNORDERED_CUSTOM_LIST_COMMAND = createCommand('INSERT_UNORDERED_CUSTOM_LIST_COMMAND');
export class ExtendedListNode extends ListNode {
__listStyleType;
__key;
static getType() {
return 'custom-list'
}
static clone(node) {
console.log("ExtendedListNode: clone(): node", node);
return new ExtendedListNode(node.__listStyleType, node.__key);
}
consructor(listStyleType, key) {
console.log("ExtendedListNode: constructor(): listStyleType", listStyleType);
console.log("ExtendedListNode: constructor(): key", key);
super('bullet', 1, key)
this.__listStyleType = listStyleType || 'circle';
this.__key = key;
}
createDOM(config) {
const dom = document.createElement(this.getTag());
dom.style.listStyleType = this.__listStyleType;
return dom;
}
updateDOM(prevNode, dom, config) {
if (prevNode.__listStyleType !== this.__listStyleType) {
dom.style.listStyleType = this.__listStyleType;
}
return false;
}
static importJSON(serializeNode) {
return {
...super.importJSON(serializedNode),
listStyleType: serializedNode.listStyleType
};
}
exportJSON() {
return {
...super.exportJSON(),
listStyleType: this.__listStyleType
};
}
getTag() {
return 'ul';
}
getListStyleType(listStyleType) {
return this.__listStyleType;
}
setListStyleType(listStyleType) {
this.__listStyleType = listStyleType;
}
export function $createExtendedListNode(listStyleType, key) {
console.log(`$createExtendedListNode('${listStyleType}')`);
return new ExtendedListNode(listStyleType, key);
}
export function $isExtendedListNode(node) {
return node instanceof ExtendedListNode;
}
}
Here is my config that replaces the ListNode with the ExtendedListNode:
import { ListItemNode, ListNode } from '@lexical/list';
import { ExtendedListNode } from '/src/components/lexical/ExtendedListNode';
const editorConfig = {
namespace: 'MyApp',
nodes: [
ListItemNode, //other nodes left out of this snippet to keep it simple
{
replace: ListNode, with: (listNode) => {
console.log("this listNode node", listNode);
const newNode = new ExtendedListNode('square'); //, listNode.__key , listNode.getKey()
console.log("this newNode node", newNode);
return newNode;
},
withKlass: ExtendedListNode,
},
],
onError(error) {
throw error;
},
theme: LexicalTheme,
}
The error message I’m getting (line numbers may be off, as I can’t post all the code):
Text of error message (line numbers may be off, as I can’t post all the code):
Uncaught Error: Lexical node does not edist in active editor stage. Avoid using the same node references between nested closures from editorState.read/editor.update.
at editor.update.discrete (lexicalUtil.js:42:29)
Uncaught Error: Lexical node does not edist in active editor stage. Avoid using the same node references between nested closures from editorState.read/editor.update.
at ExtndedListNode.getLatest
at ExtndedListNode.getWritable
at ExtndedListNode.markDirty
at editor._pendingEditorState.tag
at $beginUpdate
at updateEditor
at markAllNodesAsDirty
at LexicalEditor.registerNodeTransform
at @lexical_react_Lexic...js
at commitHookEfectListMount
I can see my editor flash on the screen or a split second, but then the page goes blank white. If I comment out the extended list node replace in the editorConfig, the page and editor render fine, so I’m guessing I’ve got something coded wrong in that, or in the extended node file. Any ideas? Thanks!
