From 32f0a31b1187e572c03eefd7bcea404790fabd79 Mon Sep 17 00:00:00 2001
From: sebastien <lorber.sebastien@gmail.com>
Date: Thu, 10 Apr 2025 13:49:55 +0200
Subject: [PATCH] fix header

---
 .../src/theme/Playground/Editor/index.tsx     | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Editor/index.tsx b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Editor/index.tsx
index 3ba90571cb..e807f85706 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Editor/index.tsx
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/Editor/index.tsx
@@ -8,16 +8,28 @@
 import React, {type ReactNode} from 'react';
 import {LiveEditor} from 'react-live';
 import useIsBrowser from '@docusaurus/useIsBrowser';
+import Translate from '@docusaurus/Translate';
+import PlaygroundHeader from '@theme/Playground/Header';
+
 import styles from './styles.module.css';
 
 export default function PlaygroundEditor(): ReactNode {
   const isBrowser = useIsBrowser();
   return (
-    <LiveEditor
-      // We force remount the editor on hydration,
-      // otherwise dark prism theme is not applied
-      key={String(isBrowser)}
-      className={styles.playgroundEditor}
-    />
+    <>
+      <PlaygroundHeader>
+        <Translate
+          id="theme.Playground.liveEditor"
+          description="The live editor label of the live codeblocks">
+          Live Editor
+        </Translate>
+      </PlaygroundHeader>
+      <LiveEditor
+        // We force remount the editor on hydration,
+        // otherwise dark prism theme is not applied
+        key={String(isBrowser)}
+        className={styles.playgroundEditor}
+      />
+    </>
   );
 }