@crystallize/design-system 1.24.43 → 1.24.44

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @crystallize/design-system
 
+## 1.24.44
+
+### Patch Changes
+
+- 5dce464: Fix format with prettier in the richtext editor
+
 ## 1.24.43
 
 ### Patch Changes

package/dist/index.js

@@ -38418,11 +38418,12 @@ ${n}`;
 // src/rich-text-editor/plugins/CodeActionMenuPlugin/components/PrettierButton/index.tsx
 async function loadPrettierParserByLang(lang) {
   const dynamicImport = PRETTIER_PARSER_MODULES[lang];
-  return await dynamicImport();
+  const parser = await dynamicImport();
+  return parser?.default || parser;
 }
 async function loadPrettierFormat() {
-  const { format } = await Promise.resolve().then(() => __toESM(require_standalone()));
-  return format;
+  const prettier = await Promise.resolve().then(() => __toESM(require_standalone()));
+  return prettier?.default?.format || prettier?.format;
 }
 function canBePrettier(lang) {
   return LANG_CAN_BE_PRETTIER.includes(lang);
@@ -38440,6 +38441,19 @@ function PrettierButton({ lang, editor, getCodeDOMNode }) {
   const tr = useTr();
   async function handleClick() {
     const codeDOMNode = getCodeDOMNode();
+    if (!codeDOMNode) {
+      return;
+    }
+    let content = "";
+    editor.update(() => {
+      const codeNode = (0, import_lexical5.$getNearestNodeFromDOMNode)(codeDOMNode);
+      if ((0, import_code5.$isCodeNode)(codeNode)) {
+        content = codeNode.getTextContent();
+      }
+    });
+    if (content === "") {
+      return;
+    }
     try {
       const format = await loadPrettierFormat();
       const options = getPrettierOptions(lang);
@@ -38447,16 +38461,14 @@ function PrettierButton({ lang, editor, getCodeDOMNode }) {
       if (!codeDOMNode) {
         return;
       }
+      const parsed = await format(content, options);
+      const formattedCode = parsed.replace(/[\r\n]+$/, "");
       editor.update(() => {
         const codeNode = (0, import_lexical5.$getNearestNodeFromDOMNode)(codeDOMNode);
         if ((0, import_code5.$isCodeNode)(codeNode)) {
-          const content = codeNode.getTextContent();
-          let parsed = "";
-          parsed = format(content, options);
-          parsed = parsed.replace(/[\r\n]+$/, "");
-          if (parsed !== "") {
+          if (formattedCode !== "") {
             const selection = codeNode.select(0);
-            selection.insertText(parsed);
+            selection.insertText(formattedCode);
             setSyntaxError("");
             setTipsVisible(false);
           }

package/dist/index.mjs

@@ -488,7 +488,7 @@ function Tag({
 // src/rich-text-editor/index.tsx
 import { lazy, Suspense } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
-var LazyRichTextEditor = lazy(() => import("./rich-text-editor-FTDWUJL3.mjs"));
+var LazyRichTextEditor = lazy(() => import("./rich-text-editor-NIDZLNDY.mjs"));
 var RichTextEditor = (props) => {
   return /* @__PURE__ */ jsx15(Suspense, {
     fallback: null,

package/dist/{rich-text-editor-FTDWUJL3.mjs → rich-text-editor-NIDZLNDY.mjs}

@@ -675,11 +675,12 @@ var PRETTIER_PARSER_MODULES = {
 };
 async function loadPrettierParserByLang(lang) {
   const dynamicImport = PRETTIER_PARSER_MODULES[lang];
-  return await dynamicImport();
+  const parser = await dynamicImport();
+  return parser?.default || parser;
 }
 async function loadPrettierFormat() {
-  const { format } = await import("./standalone-AR2ENVE7.mjs");
-  return format;
+  const prettier = await import("./standalone-AR2ENVE7.mjs");
+  return prettier?.default?.format || prettier?.format;
 }
 var PRETTIER_OPTIONS_BY_LANG = {
   css: {
@@ -712,6 +713,19 @@ function PrettierButton({ lang, editor, getCodeDOMNode }) {
   const tr = useTr();
   async function handleClick() {
     const codeDOMNode = getCodeDOMNode();
+    if (!codeDOMNode) {
+      return;
+    }
+    let content = "";
+    editor.update(() => {
+      const codeNode = $getNearestNodeFromDOMNode2(codeDOMNode);
+      if ($isCodeNode3(codeNode)) {
+        content = codeNode.getTextContent();
+      }
+    });
+    if (content === "") {
+      return;
+    }
     try {
       const format = await loadPrettierFormat();
       const options = getPrettierOptions(lang);
@@ -719,16 +733,14 @@ function PrettierButton({ lang, editor, getCodeDOMNode }) {
       if (!codeDOMNode) {
         return;
       }
+      const parsed = await format(content, options);
+      const formattedCode = parsed.replace(/[\r\n]+$/, "");
       editor.update(() => {
         const codeNode = $getNearestNodeFromDOMNode2(codeDOMNode);
         if ($isCodeNode3(codeNode)) {
-          const content = codeNode.getTextContent();
-          let parsed = "";
-          parsed = format(content, options);
-          parsed = parsed.replace(/[\r\n]+$/, "");
-          if (parsed !== "") {
+          if (formattedCode !== "") {
             const selection = codeNode.select(0);
-            selection.insertText(parsed);
+            selection.insertText(formattedCode);
             setSyntaxError("");
             setTipsVisible(false);
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.24.43",
+  "version": "1.24.44",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/rich-text-editor/plugins/CodeActionMenuPlugin/components/PrettierButton/index.tsx

@@ -30,12 +30,13 @@ type LanguagesType = keyof typeof PRETTIER_PARSER_MODULES;
 
 async function loadPrettierParserByLang(lang: string) {
   const dynamicImport = PRETTIER_PARSER_MODULES[lang as LanguagesType];
-  return await dynamicImport();
+  const parser = await dynamicImport();
+  return parser?.default || parser;
 }
 
 async function loadPrettierFormat() {
-  const { format } = await import('prettier/standalone');
-  return format;
+  const prettier = await import('prettier/standalone');
+  return prettier?.default?.format || prettier?.format;
 }
 
 const PRETTIER_OPTIONS_BY_LANG: Record<string, Options> = {
@@ -75,6 +76,20 @@ 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();
@@ -85,26 +100,21 @@ export function PrettierButton({ lang, editor, getCodeDOMNode }: Props) {
         return;
       }
 
+      const parsed = await format(content, options);
+      /**
+       * Remove EOF from prettier output. This is useful when
+       * using prettier on files, but becomes weird when the code
+       * is embedded within a larger portion of text (like we do)
+       */
+      const formattedCode = parsed.replace(/[\r\n]+$/, '');
+
       editor.update(() => {
         const codeNode = $getNearestNodeFromDOMNode(codeDOMNode);
 
         if ($isCodeNode(codeNode)) {
-          const content = codeNode.getTextContent();
-
-          let parsed = '';
-
-          parsed = format(content, options);
-
-          /**
-           * Remove EOF from prettier output. This is useful when
-           * using prettier on files, but becomes weird when the code
-           * is embedded within a larger portion of text (like we do)
-           */
-          parsed = parsed.replace(/[\r\n]+$/, '');
-
-          if (parsed !== '') {
+          if (formattedCode !== '') {
             const selection = codeNode.select(0);
-            selection.insertText(parsed);
+            selection.insertText(formattedCode);
             setSyntaxError('');
             setTipsVisible(false);
           }