fix(live-codeblock): stabilize react-live transformCode callback, fix…

… editor/preview desync (#9631)
facebook · Jan 5, 2024 · 85e32fd · 85e32fd
1 parent 3c051ee
commit 85e32fd
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
@@ -98,6 +98,10 @@ function EditorWithHeader() {
   );
 }
 
+// this should rather be a stable function
+// see https://github.com/facebook/docusaurus/issues/9630#issuecomment-1855682643
+const DEFAULT_TRANSFORM_CODE = (code: string) => `${code};`;
+
 export default function Playground({
   children,
   transformCode,
@@ -118,7 +122,7 @@ export default function Playground({
       <LiveProvider
         code={children.replace(/\n$/, '')}
         noInline={noInline}
-        transformCode={transformCode ?? ((code) => `${code};`)}
+        transformCode={transformCode ?? DEFAULT_TRANSFORM_CODE}
         theme={prismTheme}
         {...props}>
         {playgroundPosition === 'top' ? (