How to update current node properties?

[viiiprock]

Hello,
I'm current trying to implement add image with upload to server, for initial load I added local image with loading indicator,
then after uploaded, I want to update node properties, how can I do this? for example

  editor.registerCommand(
    UPDATE_IMAGE_COMMAND,
    (payload: UploadPayload) => {
      const selection = $getSelection()

      const node = selection?.getNodes()[0]
      if (node && $isImageNode(node)) {

        // Can we have something to update node properties like this?
        node.setProperties({
          src: payload.src,
          isLoading: false,
          // add new properties
          srcSet: [...payload.srcSet]
        })
      }

      return true
    },
    COMMAND_PRIORITY_EDITOR,
  ),

[viiiprock]

Okay, I got it works, just update directly to the ImageNode object.

  if (node && $isImageNode(node)) {
        const imageNode = node as ImageNode
        imageNode.setSrc(payload.src)
  }

[iampava]

This seems to be working if the node you want to change is part of the selection:

const selection = $getSelection();
const node = selection?.getNodes()[0];

Wondering if there's a way to do it without the selection...

[iampava]

Managed to get it working by looking at the code behind https://playground.lexical.dev/.

My usecase is that I'm rendering a Custom Node (which is a React Component) that includes a <button>. I want to update the node when I click on that <button>.

export type SerializedUserNode = Spread<
  {
    name: string;
    description: string;
    type: 'user';
    version: 1;
  },
  SerializedDecoratorBlockNode
>;

export class UserNode extends DecoratorBlockNode {
  __name: string;
  __description: string;

  static getType(): string {
    return 'user';
  }

  static clone(node: UserNode): UserNode {
    return new UserNode(node.__name, node.__description, node.__format, node.__key);
  }

  constructor(name: string, description: string, format?: ElementFormatType, key?: NodeKey) {
    super(format, key);
    this.__name = name;
    this.__description = description;
  }

  createDOM(): HTMLElement {
    return document.createElement('div');
  }

  updateDOM(): false {
    return false;
  }


  setName(name: string): void {
    const writable = this.getWritable();
    writable.__name = name;
  }

  onNameChange = (newName: string, editor: LexicalEditor) => {
    editor.update(() => {
      const node = $getNodeByKey(this.getKey()) as UserNode;
      if (node !== null && $isUserNode(node)) {
        node.setName(newName);
      }
    });
  }

  decorate(_editor: LexicalEditor): JSX.Element {
    return (
      <UserComponent
        name={this.__name}
        description={this.__description}
        onChange={(name: string) => this.onNameChange(name, _editor)} />
    )
  }

  static importJSON(serializedNode: SerializedUserNode): UserNode {
    const node = $createUserNode(serializedNode.name, serializedNode.description);
    node.setFormat(serializedNode.format);
    return node;
  }

  exportJSON(): SerializedUserNode {
    return {
      ...super.exportJSON(),
      type: 'user',
      version: 1,
      name: this.__name,
      description: this.__description,
    };
  }
}

export function $createUserNode(name: string, description: string): UserNode {
  return new UserNode(name, description);
}

export function $isUserNode(node?: LexicalNode): boolean {
  return node instanceof UserNode;
}

[slyguy5646]

In my case using this, the node constructor is called everytime the property is changed via the onChange method format. Is this intentional?

[CanRau]

still trying to wrap my around around some concepts, why do you need to call editor.update within onNameChange can't you just call this.setName directly?

[abstractalgo]

Just to summarize, this is what it took to make a React component update the node's state:

decorate(editor: LexicalEditor, config: EditorConfig): JSX.Element | null {
  return (
    <MyReactComponent
      value={this.value}
      onChange={(newValue) => {
        editor.update(() => {
          const writable = this.getWritable();
          writable.value = newValue;
        });
      }}
    />
  );
}