Fix converter cuneiform (#486)

* * Wrapped css into class

* fixed upper case

* * Added button for copy text

* copies converted text to clipboard - Test

src/chronology/ui/CuneiformConverter/CuneiformConverterForm.test.tsx

@@ -54,4 +54,27 @@ describe('CuneiformConverterForm', () => {
       expect(screen.getByLabelText('Converted Text')).toHaveValue('𒃻')
     })
   })
+
+  it('copies converted text to clipboard', async () => {
+    signServiceMock.getUnicodeFromAtf.mockResolvedValueOnce([
+      { unicode: [73979] },
+    ])
+
+    const inputTextArea = screen.getByLabelText('input-atf')
+    fireEvent.change(inputTextArea, { target: { value: 'test text' } })
+
+    const convertButton = screen.getByText('Convert')
+    fireEvent.click(convertButton)
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Converted Text')).toHaveValue('𒃻')
+    })
+
+    const copyButton = screen.getByText('Copy')
+    fireEvent.click(copyButton)
+
+    await waitFor(() => {
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith('𒃻')
+    })
+  })
 })

src/chronology/ui/CuneiformConverter/CuneiformConverterForm.tsx

@@ -58,6 +58,13 @@ function CuneiformConverterForm({
       handleConvert()
     }
   }
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(convertedContent)
+    } catch (err) {
+      console.error('Failed to copy text: ', err)
+    }
+  }
 
   const handleFontChange = (event) => {
     setSelectedFont(event.target.value)
@@ -110,9 +117,9 @@ function CuneiformConverterForm({
         value={convertedContent}
         readOnly
       />
-      <Form.Text id="outputHelpBlock" muted>
-        This is the converted Unicode text.
-      </Form.Text>
+      <Button onClick={copyToClipboard} variant="primary" className="mt-2">
+        Copy
+      </Button>
     </div>
   )
 }

src/chronology/ui/CuneiformConverter/__snapshots__/CuneiformConverterForm.test.tsx.snap

@@ -80,12 +80,12 @@ exports[`CuneiformConverterForm renders form, options, and scenario panel correc
       id="outputText"
       readonly=""
     />
-    <small
-      class="form-text text-muted"
-      id="outputHelpBlock"
+    <button
+      class="mt-2 btn btn-primary"
+      type="button"
     >
-      This is the converted Unicode text.
-    </small>
+      Copy
+    </button>
   </div>
 </div>
 `;