Executing an async function in editor.update

[Ekeu]

Hello

Been learning and working with lexical for the past couple of months. And recently I've been building a Text editor. I decided to reproduce the same prettier functionality that's on the playground to format; code and I came across the below portion of code in handleClick function in the source code

editor.update(() => {
const codeNode = $getNearestNodeFromDOMNode(codeDOMNode);

if ($isCodeNode(codeNode)) {
  const content = codeNode.getTextContent();

  let parsed = '';

  try {
    parsed = format(content, options);
  } catch (error: unknown) {
    setError(error);
  }

  if (parsed !== '') {
    const selection = codeNode.select(0);
    selection.insertText(parsed);
    setSyntaxError('');
    setTipsVisible(false);
  }
}
});

This function wasn't working. And after careful inspection, I noticed that the format function wasn't having an await. Whereas, the prettier format function returns a Promise. So I was wondering how could this work? So knowing that lexical's update nor read method doesn't accepts an async method, I tried this and it worked.

editor.update(() => {
const codeNode = $getNearestNodeFromDOMNode(codeDOMNode);

if ($isCodeNode(codeNode)) {
  const content = codeNode.getTextContent();

  formatter(content, options)
    .then((formattedCode) => {
      editor.update(() => {
        if (formattedCode) {
          const selection = codeNode.select(0);
          selection.insertText(formattedCode);
          setSyntaxError("");
          setShowTips(false);
        }
      });
    })
    .catch((error) => {
      if (error instanceof Error) {
        setSyntaxError(error.message);
        setShowTips(true);
      } else {
        console.error(error);
      }
    });
}
});

First I thought it made more sense reading then updating but it didn't work

editor.getEditorState().read(() => {
const codeNode = $getNearestNodeFromDOMNode(codeDOMNode);

if ($isCodeNode(codeNode)) {
  const content = codeNode.getTextContent();

  formatter(content, options)
    .then((formattedCode) => {
      editor.update(() => {
       //...
      });
    })
    .catch((error) => {
      //...
    });
}
});

So without much experience and knowledge on Lexical, I just wanted to know if this is even lexically clean and acceptable 😄 ?

Thanks

[chladog]

I had the same problem while using new prettier together with the playground prettier demo. Since the format is async fn I had to refactor the code this way.
Both getting the node and getting its text is needed to be called inside the editorState.read fn and it requires to pass editor reference in second parameter object.

editor.getEditorState().read(
  () => {
    const codeNode = $getNearestNodeFromDOMNode(codeDOMNode);
    if ($isCodeNode(codeNode)) {
      return {
        codeNode,
        content: codeNode.getTextContent(),
      };
    }
  },
  {
    editor,
  },
);

Just in case anyone is looking for the whole updated prettier handleClick fn based on the one from playground:

async function handleClick(): Promise<void> {
  const codeDOMNode = getCodeDOMNode();

  try {
    const format = await loadPrettierFormat();
    const options = getPrettierOptions(lang);
    options.plugins = [
      await loadPrettierParserByLang(lang),
      await loadPrettierGenericPlugins(),
    ];

    if (!codeDOMNode) {
      return;
    }

    const nodeAndContent = editor.getEditorState().read(
      () => {
        const codeNode = $getNearestNodeFromDOMNode(codeDOMNode);
        if ($isCodeNode(codeNode)) {
          return {
            codeNode,
            content: codeNode.getTextContent(),
          };
        }
      },
      {
        editor,
      },
    );

    if (nodeAndContent) {
      const { content, codeNode } = nodeAndContent;
      let parsed = '';

      try {
        parsed = await format(content, options);
      } catch (error: unknown) {
        setError(error);
      }

      if (parsed !== '') {
        editor.update(() => {
          const selection = codeNode.select(0);
          selection.insertText(parsed);
          setSyntaxError('');
          setTipsVisible(false);
        });
      }
    }
  } catch (error: unknown) {
    setError(error);
  }
}