feat: improve $removeClassesFromNodesOfType

ui/src/lib/utils/editor/nodes-of-type.ts

@@ -0,0 +1,28 @@
+import type { EditorState, Klass, LexicalEditor, LexicalNode } from 'lexical';
+
+// based on the implementation of $nodesOfType from '@lexical/utils'
+function $forEachNodesOfType<T extends LexicalNode>(
+  editorState: EditorState,
+  klass: Klass<T>,
+  callback: (node: T) => void
+) {
+  const readOnly = editorState._readOnly;
+  const klassType = klass.getType();
+  const nodes = editorState._nodeMap;
+  for (const node of nodes.values()) {
+    if (node instanceof klass && node.__type === klassType && (readOnly || node.isAttached())) {
+      callback(node as T);
+    }
+  }
+}
+
+export function $removeClassesFromNodesOfType<T extends LexicalNode>(
+  editor: LexicalEditor,
+  klass: Klass<T>,
+  ...classNames: string[]
+) {
+  $forEachNodesOfType(editor.getEditorState(), klass, (node) => {
+    const element = editor.getElementByKey(node.getKey());
+    element?.classList.remove(...classNames);
+  });
+}

ui/src/lib/utils/editor/placeholder.ts

@@ -14,10 +14,10 @@ import {
   PARAGRAPH_PLACEHOLDER,
   PLACEHOLDER_CLASS_NAME,
 } from '@/lib/constants/editor';
-import { $removeClassFromNodesOfType } from '@/lib/utils/editor/$remove-class-from-nodes-of-type';
+import { $removeClassesFromNodesOfType } from '@/lib/utils/editor/nodes-of-type';
 
 export function $removePlaceholderFromParagraphNodes(editor: LexicalEditor) {
-  return $removeClassFromNodesOfType(ParagraphNode, PLACEHOLDER_CLASS_NAME, editor);
+  return $removeClassesFromNodesOfType(editor, ParagraphNode, PLACEHOLDER_CLASS_NAME);
 }
 
 function $getPlaceholderText(node: LexicalNode) {