From 81c5ff01bbbaf7433802a1fc4ff157e1c58aaa84 Mon Sep 17 00:00:00 2001
From: umaranis <mail@umaranis.com>
Date: Mon, 27 May 2024 18:42:30 +1000
Subject: [PATCH] bug: prettier v3 async not working with synchronous lexical
 update calls; also required estree plugin

---
 .../components/PrettierButton.svelte          | 36 +++++++++----------
 .../components/PrettierLangOptions.ts         | 13 ++++---
 2 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/packages/svelte-lexical/src/lib/core/plugins/CodeBlock/CodeActionMenuPlugin/components/PrettierButton.svelte b/packages/svelte-lexical/src/lib/core/plugins/CodeBlock/CodeActionMenuPlugin/components/PrettierButton.svelte
index 30d74eaf..8235ae17 100644
--- a/packages/svelte-lexical/src/lib/core/plugins/CodeBlock/CodeActionMenuPlugin/components/PrettierButton.svelte
+++ b/packages/svelte-lexical/src/lib/core/plugins/CodeBlock/CodeActionMenuPlugin/components/PrettierButton.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import {getEditor} from '../../../../composerContext.js';
 
-  import {$isCodeNode as isCodeNode} from '@lexical/code';
+  import {CodeNode, $isCodeNode as isCodeNode} from '@lexical/code';
   import {$getNearestNodeFromDOMNode as getNearestNodeFromDOMNode} from 'lexical';
   import type {Options} from 'prettier';
   import {
@@ -30,37 +30,37 @@
 
   async function handleClick(): Promise<void> {
     const codeDOMNode = getCodeDOMNode();
+    if (!codeDOMNode) {
+      return;
+    }
 
     try {
       const format = await loadPrettierFormat();
       const options = getPrettierOptions(lang);
-      options.plugins = [await loadPrettierParserByLang(lang)];
-
-      if (!codeDOMNode) {
-        return;
-      }
-
-      editor.update(async () => {
-        const codeNode = getNearestNodeFromDOMNode(codeDOMNode);
+      options.plugins = await loadPrettierParserByLang(lang);
 
+      let codeNode: CodeNode;
+      let content = '';
+      editor.update(() => {
+        codeNode = getNearestNodeFromDOMNode(codeDOMNode) as CodeNode;
         if (isCodeNode(codeNode)) {
-          const content = codeNode.getTextContent();
+          content = codeNode.getTextContent();
+        }
+      });
 
-          let parsed = '';
-          try {
-            parsed = await format(content, options);
-          } catch (error: unknown) {
-            setError(error);
-          }
+      if (content) {
+        let parsed = '';
+        parsed = await format(content, options);
 
+        editor.update(() => {
           if (parsed !== '') {
             const selection = codeNode.select(0);
             selection.insertText(parsed);
             syntaxError = '';
             tipsVisible = false;
           }
-        }
-      });
+        });
+      }
     } catch (error: unknown) {
       setError(error);
     }
diff --git a/packages/svelte-lexical/src/lib/core/plugins/CodeBlock/CodeActionMenuPlugin/components/PrettierLangOptions.ts b/packages/svelte-lexical/src/lib/core/plugins/CodeBlock/CodeActionMenuPlugin/components/PrettierLangOptions.ts
index 021c3deb..493a03c1 100644
--- a/packages/svelte-lexical/src/lib/core/plugins/CodeBlock/CodeActionMenuPlugin/components/PrettierLangOptions.ts
+++ b/packages/svelte-lexical/src/lib/core/plugins/CodeBlock/CodeActionMenuPlugin/components/PrettierLangOptions.ts
@@ -1,10 +1,13 @@
-import type {Options} from 'prettier';
+import type {Options, Plugin} from 'prettier';
 
 const PRETTIER_PARSER_MODULES = {
-  css: () => import('prettier/parser-postcss'),
-  html: () => import('prettier/parser-html'),
-  js: () => import('prettier/parser-babel'),
-  markdown: () => import('prettier/parser-markdown'),
+  css: async () => [await import('prettier/parser-postcss')],
+  html: async () => [await import('prettier/parser-html')],
+  js: async () => [
+    await import('prettier/parser-babel'),
+    (await import('prettier/plugins/estree')) as Plugin,
+  ],
+  markdown: async () => [await import('prettier/parser-markdown')],
 } as const;
 
 type LanguagesType = keyof typeof PRETTIER_PARSER_MODULES;