feat: rename getProp and updateProps in lexical components

Author: shijistar

CHANGELOG.md

@@ -8,6 +8,17 @@
 
 ### Features
 
+#### Lexical components
+
+- ✨ rename `getPropValue` to `getProp`
+- ✨ rename `setProps` to `updateProps`
+
+## 1.4.2
+
+2025-8-10
+
+### Features
+
 - ✨ `SelectNode` component now supports `onXXX` event props like `onClick`, `onMouseEnter`, etc.
 
 ## 1.4.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tiny-codes/react-easy",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "Simplify React and AntDesign development with practical components and hooks",
   "keywords": [
     "react",

src/components/Lexical/helpers/index.ts

@@ -278,3 +278,26 @@ export function getDomAttributes(dom: HTMLElement | undefined): HtmlHTMLAttribut
 
   return attributes;
 }
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function shallowEqual(obj1: any, obj2: any): boolean {
+  if (obj1 === obj2) return true;
+  if (!obj1 || !obj2) return false;
+
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+
+  if (keys1.length !== keys2.length) return false;
+
+  for (const key of keys1) {
+    if (key === 'style') {
+      // - EN: Special handling for style objects.
+      // - CN: 特殊处理 style 对象。
+      if (!shallowEqual(obj1[key], obj2[key])) return false;
+    } else if (obj1[key] !== obj2[key]) {
+      return false;
+    }
+  }
+
+  return true;
+}

src/components/Lexical/nodes/CloseIcon.tsx

@@ -128,18 +128,6 @@ export class CloseIconNode extends BaseDecoratorNode<ReactNode, CloseIconNodePro
     return false;
   }
 
-  getPropValue(propName: keyof CloseIconNodeProps): CloseIconNodeProps[typeof propName] {
-    return this.__props?.[propName];
-  }
-
-  setProps(props: Partial<CloseIconNodeProps>): void {
-    const writable = this.getWritable();
-    writable.__props = {
-      ...writable.__props!,
-      ...props,
-    };
-  }
-
   getUnderlyingProps(props: CloseIconNodeProps | undefined): Omit<CloseIconNodeProps, keyof BaseNodeProps> {
     const excludeProps = super.getUnderlyingProps(props);
     /* eslint-disable @typescript-eslint/no-unused-vars */

src/components/Lexical/nodes/DivNode.tsx

@@ -7,7 +7,7 @@ import type {
   SerializedElementNode,
   Spread,
 } from 'lexical';
-import { updateDomProps } from '../helpers';
+import { shallowEqual, updateDomProps } from '../helpers';
 import { BaseElementNode, type BaseElementProps } from './base';
 
 /**
@@ -52,7 +52,7 @@ export class DivNode extends BaseElementNode<DivNodeProps> {
   updateDOM(prevNode: DivNode, dom: HTMLElement): boolean {
     const prevProps = prevNode.__props;
     const currentProps = this.__props;
-    const propsChanged = !this.shallowEqual(prevProps, currentProps);
+    const propsChanged = !shallowEqual(prevProps, currentProps);
     if (propsChanged) {
       updateDomProps(dom, this.getUnderlyingProps(currentProps));
     }
@@ -97,10 +97,7 @@ export class DivNode extends BaseElementNode<DivNodeProps> {
     );
   }
 
-  getPropValue<K extends keyof DivNodeProps>(key: K): DivNodeProps[K] | undefined {
-    return this.__props?.[key];
-  }
-  setProps(props: DivNodeProps): void {
+  updateProps(props: DivNodeProps): void {
     const writable = this.getWritable();
     writable.__props = {
       ...writable.__props,
@@ -111,29 +108,6 @@ export class DivNode extends BaseElementNode<DivNodeProps> {
       },
     };
   }
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private shallowEqual(obj1: any, obj2: any): boolean {
-    if (obj1 === obj2) return true;
-    if (!obj1 || !obj2) return false;
-
-    const keys1 = Object.keys(obj1);
-    const keys2 = Object.keys(obj2);
-
-    if (keys1.length !== keys2.length) return false;
-
-    for (const key of keys1) {
-      if (key === 'style') {
-        // - EN: Special handling for style objects.
-        // - CN: 特殊处理 style 对象。
-        if (!this.shallowEqual(obj1[key], obj2[key])) return false;
-      } else if (obj1[key] !== obj2[key]) {
-        return false;
-      }
-    }
-
-    return true;
-  }
 }
 /**
  * - EN: Convert a DOM node to a DivNode during import.

src/components/Lexical/nodes/SelectNode.tsx

@@ -4,7 +4,7 @@ import { Select } from 'antd';
 import type { SelectProps } from 'antd';
 import type { BaseOptionType, DefaultOptionType } from 'antd/es/select';
 import type { LexicalEditor, LexicalNode, SerializedLexicalNode, Spread } from 'lexical';
-import { insertNodeAtCursor, updateDomStyle } from '../helpers';
+import { insertNodeAtCursor, shallowEqual, updateDomStyle } from '../helpers';
 import type { BaseDecoratorNodeProps } from './base';
 import { BaseDecoratorNode } from './base';
 
@@ -81,8 +81,9 @@ export class SelectNode<
     return span;
   }
 
-  updateDOM(): false {
-    return false;
+  updateDOM(prevNode: this, dom: HTMLElement): boolean {
+    const propsChanged = !shallowEqual(prevNode.__props, this.__props);
+    return propsChanged;
   }
 
   decorate(): ReactNode {
@@ -117,13 +118,13 @@ export class SelectNode<
     writable.__value = value;
   }
 
-  getPropValue(
+  getProp(
     propName: keyof SelectNodeProps<ValueType, OptionType>
   ): SelectNodeProps<ValueType, OptionType>[typeof propName] {
     return this.__props?.[propName];
   }
 
-  setProps(props: Partial<SelectNodeProps<ValueType, OptionType>>): void {
+  updateProps(props: Partial<SelectNodeProps<ValueType, OptionType>>): void {
     const writable = this.getWritable();
     writable.__props = {
       ...writable.__props,

src/components/Lexical/nodes/base.ts

@@ -123,6 +123,18 @@ export class BaseElementNode<P extends BaseElementProps> extends ElementNode {
     return this.__props?.canInsertTextAfter ?? true;
   }
 
+  getProp(propName: keyof P): P[typeof propName] {
+    return this.__props?.[propName] as P[typeof propName];
+  }
+
+  updateProps(props: Partial<P>): void {
+    const writable = this.getWritable();
+    writable.__props = {
+      ...writable.__props!,
+      ...props,
+    };
+  }
+
   /**
    * - EN: Strip element-specific flags and return DOM props.
    * - CN: 去除元素特有的标记并返回 DOM 属性。
@@ -163,6 +175,17 @@ export class BaseDecoratorNode<T, P extends BaseDecoratorNodeProps> extends Deco
       }
     });
   }
+  getProp(propName: keyof P): P[typeof propName] {
+    return this.__props?.[propName] as P[typeof propName];
+  }
+
+  updateProps(props: Partial<P>): void {
+    const writable = this.getWritable();
+    writable.__props = {
+      ...writable.__props!,
+      ...props,
+    };
+  }
 
   /**
    * - EN: Strip decorator-specific flags and return DOM props.