From fe85040f9e6673d0a9626751583c23900bf35079 Mon Sep 17 00:00:00 2001
From: Marek Mihok <marek.mihok@h2o.ai>
Date: Thu, 17 Aug 2023 14:42:46 +0200
Subject: [PATCH] chore: fix saving text to clipboard for input, show button in
 markdown codeblocks #2025

---
 ui/src/copyable_text.tsx | 11 ++++++-----
 ui/src/markdown.tsx      | 22 ++++++++--------------
 2 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/ui/src/copyable_text.tsx b/ui/src/copyable_text.tsx
index f5e1917a759..d0154537931 100644
--- a/ui/src/copyable_text.tsx
+++ b/ui/src/copyable_text.tsx
@@ -68,8 +68,8 @@ export const ClipboardCopyButton = ({ value, anchorElement, showOnHoverOnly = fa
     onClick = async () => {
       if (!anchorElement) return
       try {
-        if (document.queryCommandSupported('copy') && anchorElement.tagName === 'input') {
-          (anchorElement as HTMLInputElement).select()
+        if (document.queryCommandSupported('copy')) {
+          anchorElement.select()
           document.execCommand('copy')
           window.getSelection()?.removeAllRanges()
         }
@@ -91,7 +91,7 @@ export const ClipboardCopyButton = ({ value, anchorElement, showOnHoverOnly = fa
         setVisible(false)
       })
     }
-  }, [value, anchorElement])
+  }, [anchorElement])
 
   React.useEffect(() => () => window.clearTimeout(timeoutRef.current), [])
 
@@ -111,7 +111,7 @@ export const XCopyableText = ({ model }: { model: CopyableText }) => {
     heightStyle = multiline && height === '1' ? fullHeightStyle : undefined,
     [inputEl, setInputEl] = React.useState(),
     domRef = React.useCallback(node => {
-      const inputEl = node?.children[0]?.children[1]
+      const inputEl = node?.children[0]?.children[1]?.children[0]
       if (inputEl) setInputEl(inputEl)
     }, [])
 
@@ -137,7 +137,8 @@ export const XCopyableText = ({ model }: { model: CopyableText }) => {
       />
       <ClipboardCopyButton
         anchorElement={inputEl}
-        showOnHoverOnly={!!multiline} value={value}
+        showOnHoverOnly={!!multiline}
+        value={value}
       />
     </>
   )
diff --git a/ui/src/markdown.tsx b/ui/src/markdown.tsx
index d64fbc73fee..0bc31d19fb9 100644
--- a/ui/src/markdown.tsx
+++ b/ui/src/markdown.tsx
@@ -91,16 +91,15 @@ const highlightSyntax = async (str: S, language: S, codeBlockId: S) => {
   const highlightedCode = language
     ? hljs.highlight(str, { language, ignoreIllegals: true }).value
     : hljs.highlightAuto(str).value
-  codeBlock.outerHTML = `<code id="xxxid" class="hljs">${highlightedCode}</code>`
+  codeBlock.outerHTML = `<code id="codeblock" class="hljs">${highlightedCode}</code>`
 
-  // TODO: Use React to render the copy button.
-  const cb = document.getElementById('xxxid')
+  const cb = document.getElementById('codeblock')
+  if (!cb) return
 
-  const copyButton = document.createElement("div")
-  if (copyButton && cb) {
-    ReactDOM.render(<ClipboardCopyButton value={str} anchorElementRef={cb} showOnHover />, copyButton)
-    cb.innerHTML += copyButton.innerHTML
-  }
+  ReactDOM.render(
+    ReactDOM.createPortal(<ClipboardCopyButton value={str} anchorElement={cb} showOnHoverOnly />, cb),
+    document.createElement('div')
+  )
 }
 
 export const
@@ -114,7 +113,6 @@ export const
     }
   }),
   Markdown = ({ source }: { source: S }) => {
-    const componentRef = React.useRef<HTMLDivElement>(null)
     const onClick = (e: React.MouseEvent<HTMLDivElement>) => {
       const hrefAttr = (e.target as HTMLAnchorElement).getAttribute('href')
       if (e.target instanceof HTMLAnchorElement && hrefAttr?.startsWith('?')) {
@@ -126,11 +124,7 @@ export const
         return false
       }
     }
-    return <>
-      <div ref={componentRef} onClick={onClick} className={clas(css.markdown, 'wave-markdown')} dangerouslySetInnerHTML={{ __html: markdown.render(source) }} />
-      {/* TODO: Fix anchoring. */}
-      <ClipboardCopyButton value={'aaa'} anchorElementRef={componentRef} showOnHover />
-    </>
+    return <div onClick={onClick} className={clas(css.markdown, 'wave-markdown')} dangerouslySetInnerHTML={{ __html: markdown.render(source) }} />
   }
 
 /**