From 83d5b5c1a455a701daddd6a1d49a3e73c02b30bc Mon Sep 17 00:00:00 2001
From: Marek Mihok <marek.mihok@h2o.ai>
Date: Tue, 5 Sep 2023 09:48:42 +0200
Subject: [PATCH] chore: use appendChild instead of insertAdjacentElement,
 refactor #2025

---
 ui/src/copyable_text.tsx | 20 +++++++++++++-------
 ui/src/markdown.tsx      |  8 ++++++--
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/ui/src/copyable_text.tsx b/ui/src/copyable_text.tsx
index 9f948b0692..e50b41fdd2 100644
--- a/ui/src/copyable_text.tsx
+++ b/ui/src/copyable_text.tsx
@@ -7,10 +7,6 @@ import { clas, cssVar, pc } from './theme'
 
 const
   css = stylesheet({
-    animate: {
-      opacity: 0,
-      transition: 'opacity .5s'
-    },
     btn: {
       position: 'absolute',
       minWidth: 'initial',
@@ -31,6 +27,14 @@ const
         }
       }
     },
+    animate: {
+      $nest: {
+        'button': {
+          opacity: 0,
+          transition: 'opacity .5s',
+        }
+      }
+    },
     labelContainer: {
       position: 'relative'
     }
@@ -58,7 +62,7 @@ export interface CopyableText {
   height?: S
 }
 
-export const ClipboardCopyButton = ({ value, defaultVisible = true }: { value: S, defaultVisible?: B }) => {
+export const ClipboardCopyButton = ({ value }: { value: S }) => {
   const
     timeoutRef = React.useRef<U>(),
     [copied, setCopied] = React.useState(false),
@@ -86,7 +90,7 @@ export const ClipboardCopyButton = ({ value, defaultVisible = true }: { value: S
     title='Copy to clipboard'
     onClick={onClick}
     iconProps={{ iconName: copied ? 'CheckMark' : 'Copy' }}
-    className={clas(css.btn, copied ? css.copiedBtn : '', defaultVisible ? '' : css.animate)}
+    className={clas(css.btn, copied ? css.copiedBtn : '')}
   />
 }
 
@@ -103,7 +107,9 @@ export const XCopyableText = ({ model }: { model: CopyableText }) => {
       onRenderLabel={() =>
         <div className={css.labelContainer}>
           <Fluent.Label>{label}</Fluent.Label>
-          <ClipboardCopyButton value={value} defaultVisible={!multiline} />
+          <span className={multiline ? clas(css.animate) : ''}>
+            <ClipboardCopyButton value={value} />
+          </span>
         </div>
       }
       styles={{
diff --git a/ui/src/markdown.tsx b/ui/src/markdown.tsx
index 9dac854479..304edf3873 100644
--- a/ui/src/markdown.tsx
+++ b/ui/src/markdown.tsx
@@ -72,6 +72,10 @@ const
     copyButton: {
       position: 'relative',
       $nest: {
+        'button': {
+          opacity: 0,
+          top: 0
+        },
         '&:hover button': {
           opacity: 1
         }
@@ -106,9 +110,9 @@ const highlightSyntax = async (str: S, language: S, codeBlockId: S) => {
   const codeBlockContainer = codeBlock.parentElement
   if (codeBlockContainer) {
     const buttonContainer = document.createElement('span')
-    ReactDOM.render(<ClipboardCopyButton value={str} defaultVisible={false} />, buttonContainer)
+    ReactDOM.render(<ClipboardCopyButton value={str} />, buttonContainer)
     codeBlockContainer.classList.add(css.copyButton)
-    codeBlockContainer.insertAdjacentElement('afterbegin', buttonContainer)
+    codeBlockContainer.appendChild(buttonContainer)
   }
 
   return highlightedCode