From c34bf694e10db58f804cee308048903bdb6d84ed Mon Sep 17 00:00:00 2001
From: Jonathan Haas <haasjona@gmail.com>
Date: Sun, 6 Apr 2025 14:47:22 +0000
Subject: [PATCH] [react] fix: pattern export issues (#218)

Fix the export functionality in the pattern editor:

* Fix the export button in the header bar
* Fix the copy to clipboard buttons displaying no text and having a weird styling.

Before:
![before](/attachments/b2c542a8-06ee-46fa-9058-36b738e285cc)
After:
![after](/attachments/754993a9-04ee-44e9-ae78-7529a1298a54)

Fixes #215

Reviewed-on: https://codeberg.org/freesewing/freesewing/pulls/218
Reviewed-by: Joost De Cock <joostdecock@noreply.codeberg.org>
Co-authored-by: Jonathan Haas <haasjona@gmail.com>
Co-committed-by: Jonathan Haas <haasjona@gmail.com>
---
 packages/react/components/CopyToClipboardButton/index.mjs | 8 +++-----
 .../react/components/Editor/components/HeaderMenu.mjs     | 2 +-
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/react/components/CopyToClipboardButton/index.mjs b/packages/react/components/CopyToClipboardButton/index.mjs
index 84d5a916ffa..fa308742eda 100644
--- a/packages/react/components/CopyToClipboardButton/index.mjs
+++ b/packages/react/components/CopyToClipboardButton/index.mjs
@@ -21,18 +21,15 @@ const handleCopied = (content, setCopied, setLoadingStatus, label) => {
   setTimeout(() => setCopied(false), 1000)
 }
 
-export const CopyToClipboardButton = ({ content, label = false, sup = false }) => {
+export const CopyToClipboardButton = ({ children, content, label = false, sup = false }) => {
   const [copied, setCopied] = useState(false)
   const { setLoadingStatus } = useContext(LoadingStatusContext)
 
-  const text =
-    typeof content === 'string' ? content : strip(ReactDOMServer.renderToStaticMarkup(content))
-
   const style = sup ? 'tw-w-4 tw-h-4 tw--mt-4' : 'tw-w-5 tw-h-5'
 
   return (
     <button
-      className={copied ? 'tw-text-success' : ''}
+      className={(copied ? 'tw-text-success ' : '') + 'tw-daisy-btn tw-w-full lg:tw-w-auto'}
       onClick={() => handleCopied(content, setCopied, setLoadingStatus, label)}
     >
       {copied ? (
@@ -43,6 +40,7 @@ export const CopyToClipboardButton = ({ content, label = false, sup = false }) =
       ) : (
         <CopyIcon className={`${style} tw-text-inherit`} />
       )}
+      {children}
     </button>
   )
 }
diff --git a/packages/react/components/Editor/components/HeaderMenu.mjs b/packages/react/components/Editor/components/HeaderMenu.mjs
index 8f0a866d8ee..ae410fe6f7e 100644
--- a/packages/react/components/Editor/components/HeaderMenu.mjs
+++ b/packages/react/components/Editor/components/HeaderMenu.mjs
@@ -480,7 +480,7 @@ export const HeaderMenuSaveIcons = (props) => {
       <Button updateHandler={() => update.view('save')} tooltip="Save pattern as...">
         <SaveAsIcon className={`${size} tw-text-secondary`} />
       </Button>
-      <Button updateHandler={update.clearPattern} tooltip="Export pattern">
+      <Button updateHandler={() => update.view('export')} tooltip="Export pattern">
         <ExportIcon className={`${size} tw-text-secondary`} />
       </Button>
     </div>