feat: enable copy button, etc. buttons for CodeEditor in react ui

Signed-off-by: Nick Mitchell <[email protected]>
IBM · Jan 22, 2025 · 163f8e8 · 163f8e8
1 parent eb1018f
commit 163f8e8
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/pdl-live-react/src/view/Preview.css b/pdl-live-react/src/view/Preview.css
@@ -4,9 +4,21 @@
       max-height: 350px;
     }
   }
-  pre {
-    margin: 0 !important;
-    font-size: 1em !important;
-    font-family: "Red Hat Mono" !important;
+
+  .pf-v6-c-code-editor__tab {
+    /* Bug in patternfly? the language element shows up with 1rem font-size */
+    font-size: 0.875em;
+  }
+}
+
+/**
+ * This adds some space above the code editor component. Necessary
+   when using any of the <CodeEditor/> options that pull in the editor
+   toolbar, e.g. isCopyEnabled.
+ */
+.pf-v6-c-page__main-body,
+section {
+  & > .pdl-preview {
+    margin-top: 1em;
   }
 }
diff --git a/pdl-live-react/src/view/Preview.tsx b/pdl-live-react/src/view/Preview.tsx
@@ -21,7 +21,6 @@ type Props = {
 }
 
 const options: Required<CodeEditorProps>["options"] = {
-  automaticLayout: true,
   scrollBeyondLastLine: false,
   scrollbar: { alwaysConsumeMouseWheel: false },
 }
@@ -38,12 +37,14 @@ export default function Preview({
     setTimeout(() => editor.layout())
   }, [])
 
-  // other options we could enable: isCopyEnabled isDownloadEnabled isLanguageLabelVisible
   return (
     <div className="pdl-preview" data-limit-height={limitHeight}>
       <CodeEditor
         code={value}
         isDarkTheme
+        isCopyEnabled
+        isDownloadEnabled
+        isLanguageLabelVisible
         height="sizeToFit"
         options={options}
         onEditorDidMount={onEditorDidMount}