diff --git a/packages/lexical/src/LexicalReconciler.ts b/packages/lexical/src/LexicalReconciler.ts index 855fd44c373..216db70ea48 100644 --- a/packages/lexical/src/LexicalReconciler.ts +++ b/packages/lexical/src/LexicalReconciler.ts @@ -641,8 +641,16 @@ function $reconcileNode( ); } + const nextClasses = nextNode.__classes || {}; + const prevClasses = prevNode.__classes || {}; + const classesChanged = !( + Object.keys(nextClasses).length === Object.keys(prevClasses).length && + Object.keys(nextClasses).every( + (_key) => nextClasses[_key] === prevClasses[_key], + ) + ); // Update node. If it returns true, we need to unmount and re-create the node - if (nextNode.updateDOM(prevNode, dom, activeEditorConfig)) { + if (nextNode.updateDOM(prevNode, dom, activeEditorConfig) || classesChanged) { const replacementDOM = $createNode(key, null); if (parentDOM === null) { diff --git a/packages/lexical/src/LexicalUtils.ts b/packages/lexical/src/LexicalUtils.ts index 67a8d13d24b..eb0a5011b6d 100644 --- a/packages/lexical/src/LexicalUtils.ts +++ b/packages/lexical/src/LexicalUtils.ts @@ -1436,7 +1436,9 @@ export function $isRootOrShadowRoot( */ export function $copyNode(node: T): T { const copy = node.constructor.clone(node) as T; - copy.__classes = {...node.__classes}; + if (node.__classes) { + copy.__classes = {...node.__classes}; + } $setNodeKey(copy, null); return copy; } @@ -1842,7 +1844,9 @@ export function getCachedTypeToNodeMap( export function $cloneWithProperties(latestNode: T): T { const constructor = latestNode.constructor; const mutableNode = constructor.clone(latestNode) as T; - mutableNode.__classes = {...latestNode.__classes}; + if (latestNode.__classes) { + mutableNode.__classes = {...latestNode.__classes}; + } mutableNode.afterCloneFrom(latestNode); if (__DEV__) { invariant(