Merge branch 'main' into fix/list-indention-format-loss

facebook · Dec 9, 2024 · 7674db6 · 7674db6
2 parents 905ccbb + 05fa244
commit 7674db6
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 57 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/lexical-playground/__tests__/utils/index.mjs b/packages/lexical-playground/__tests__/utils/index.mjs
@@ -225,7 +225,7 @@ async function assertHTMLOnPageOrFrame(
   frameName,
   actualHtmlModificationsCallback = (actualHtml) => actualHtml,
 ) {
-  const expected = prettifyHTML(expectedHtml.replace(/\n/gm, ''), {
+  const expected = await prettifyHTML(expectedHtml.replace(/\n/gm, ''), {
     ignoreClasses,
     ignoreInlineStyles,
   });
@@ -236,7 +236,7 @@ async function assertHTMLOnPageOrFrame(
         .first()
         .innerHTML(),
     );
-    let actual = prettifyHTML(actualHtml.replace(/\n/gm, ''), {
+    let actual = await prettifyHTML(actualHtml.replace(/\n/gm, ''), {
       ignoreClasses,
       ignoreInlineStyles,
     });
@@ -780,7 +780,10 @@ export async function dragImage(
   );
 }
 
-export function prettifyHTML(string, {ignoreClasses, ignoreInlineStyles} = {}) {
+export async function prettifyHTML(
+  string,
+  {ignoreClasses, ignoreInlineStyles} = {},
+) {
   let output = string;
 
   if (ignoreClasses) {
@@ -793,15 +796,14 @@ export function prettifyHTML(string, {ignoreClasses, ignoreInlineStyles} = {}) {
 
   output = output.replace(/\s__playwright_target__="[^"]+"/, '');
 
-  return prettier
-    .format(output, {
-      attributeGroups: ['$DEFAULT', '^data-'],
-      attributeSort: 'ASC',
-      bracketSameLine: true,
-      htmlWhitespaceSensitivity: 'ignore',
-      parser: 'html',
-    })
-    .trim();
+  return await prettier.format(output, {
+    attributeGroups: ['$DEFAULT', '^data-'],
+    attributeSort: 'asc',
+    bracketSameLine: true,
+    htmlWhitespaceSensitivity: 'ignore',
+    parser: 'html',
+    plugins: ['prettier-plugin-organize-attributes'],
+  });
 }
 
 // This function does not suppose to do anything, it's only used as a trigger

diff --git a/packages/lexical-playground/package.json b/packages/lexical-playground/package.json
@@ -29,7 +29,7 @@
     "katex": "^0.16.10",
     "lexical": "0.21.0",
     "lodash-es": "^4.17.21",
-    "prettier": "^2.3.2",
+    "prettier": "^3.4.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",

diff --git a/...s/lexical-playground/src/plugins/CodeActionMenuPlugin/components/PrettierButton/index.tsx b/...s/lexical-playground/src/plugins/CodeActionMenuPlugin/components/PrettierButton/index.tsx
@@ -10,7 +10,6 @@ import './index.css';
 import {$isCodeNode} from '@lexical/code';
 import {$getNearestNodeFromDOMNode, LexicalEditor} from 'lexical';
 import {Options} from 'prettier';
-import * as React from 'react';
 import {useState} from 'react';
 
 interface Props {
@@ -20,17 +19,27 @@ interface Props {
 }
 
 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: [() => import('prettier/parser-postcss')],
+  html: [() => import('prettier/parser-html')],
+  js: [
+    () => import('prettier/parser-babel'),
+    () => import('prettier/plugins/estree'),
+  ],
+  markdown: [() => import('prettier/parser-markdown')],
+  typescript: [
+    () => import('prettier/parser-typescript'),
+    () => import('prettier/plugins/estree'),
+  ],
 } as const;
 
 type LanguagesType = keyof typeof PRETTIER_PARSER_MODULES;
 
 async function loadPrettierParserByLang(lang: string) {
-  const dynamicImport = PRETTIER_PARSER_MODULES[lang as LanguagesType];
-  return await dynamicImport();
+  const dynamicImports = PRETTIER_PARSER_MODULES[lang as LanguagesType];
+  const modules = await Promise.all(
+    dynamicImports.map((dynamicImport) => dynamicImport()),
+  );
+  return modules;
 }
 
 async function loadPrettierFormat() {
@@ -39,18 +48,11 @@ async function loadPrettierFormat() {
 }
 
 const PRETTIER_OPTIONS_BY_LANG: Record<string, Options> = {
-  css: {
-    parser: 'css',
-  },
-  html: {
-    parser: 'html',
-  },
-  js: {
-    parser: 'babel',
-  },
-  markdown: {
-    parser: 'markdown',
-  },
+  css: {parser: 'css'},
+  html: {parser: 'html'},
+  js: {parser: 'babel'},
+  markdown: {parser: 'markdown'},
+  typescript: {parser: 'typescript'},
 };
 
 const LANG_CAN_BE_PRETTIER = Object.keys(PRETTIER_OPTIONS_BY_LANG);
@@ -76,36 +78,37 @@ export function PrettierButton({lang, editor, getCodeDOMNode}: Props) {
 
   async function handleClick(): Promise<void> {
     const codeDOMNode = getCodeDOMNode();
+    if (!codeDOMNode) {
+      return;
+    }
+
+    let content = '';
+    editor.update(() => {
+      const codeNode = $getNearestNodeFromDOMNode(codeDOMNode);
+      if ($isCodeNode(codeNode)) {
+        content = codeNode.getTextContent();
+      }
+    });
+    if (content === '') {
+      return;
+    }
 
     try {
       const format = await loadPrettierFormat();
       const options = getPrettierOptions(lang);
-      options.plugins = [await loadPrettierParserByLang(lang)];
-
-      if (!codeDOMNode) {
-        return;
-      }
+      const prettierParsers = await loadPrettierParserByLang(lang);
+      options.plugins = prettierParsers.map(
+        (parser) => parser.default || parser,
+      );
+      const formattedCode = await format(content, options);
 
       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);
-          }
+          const selection = codeNode.select(0);
+          selection.insertText(formattedCode);
+          setSyntaxError('');
+          setTipsVisible(false);
         }
       });
     } catch (error: unknown) {