feat: improve copy button functionality and styling (#57)

- Refactor copy button class names for better CSS targeting
- Add proper TypeScript interfaces and documentation
- Improve copy button creation and positioning
- Add support for custom copy button props
- Update CSS selectors to match new data attributes
- Fix workflow configuration

Author: simonguo

.github/workflows/gh-pages.yml

@@ -10,16 +10,16 @@ on:
 
 jobs:
   deploy:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     permissions:
       contents: write
     concurrency:
       group: ${{ github.workflow }}-${{ github.ref }}
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Setup node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: 'lts/*'
 

__tests__/MarkdownRenderer-test.js

@@ -60,7 +60,7 @@ describe('MarkdownRenderer', () => {
     // Check if copy button is rendered with the correct class
     const copyButton = container.querySelector('button[title="Copy code"]');
     expect(copyButton).toBeInTheDocument();
-    expect(copyButton).toHaveClass('btn-copy-code');
+    expect(copyButton).toHaveAttribute('data-type', 'copy');
   });
 
   it('applies custom copy button props', () => {

docs/index.tsx

@@ -30,6 +30,9 @@ const App = () => {
         renderExtraFooter={() => {
           return <div>Footer</div>;
         }}
+        copyButtonProps={{
+          className: 'rs-btn-icon rs-btn-icon-circle rs-btn rs-btn-subtle rs-btn-xs'
+        }}
       >
         {example}
       </CodeView>

src/CopyCodeButton.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import copy from 'copy-to-clipboard';
-import classNames from 'classnames';
 import CopyIcon from './icons/Copy';
 import CheckIcon from './icons/Check';
 
@@ -10,7 +9,7 @@ interface CopyCodeButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEleme
 }
 
 function CopyCodeButton(props: CopyCodeButtonProps) {
-  const { as: Component = 'button', code, className, ...rest } = props;
+  const { as: Component = 'button', code, ...rest } = props;
   const [copied, setCopied] = useState(false);
 
   if (!code) {
@@ -27,11 +26,7 @@ function CopyCodeButton(props: CopyCodeButtonProps) {
   };
 
   return (
-    <Component
-      {...rest}
-      className={classNames('copy-code-button', className)}
-      onClick={handleClick}
-    >
+    <Component data-type="copy" onClick={handleClick} {...rest}>
       {copied ? <CheckIcon /> : <CopyIcon />}
     </Component>
   );

src/MarkdownRenderer.tsx

@@ -1,61 +1,91 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef, forwardRef } from 'react';
 import classNames from 'classnames';
 import copy from 'copy-to-clipboard';
 import mergeRefs from './utils/mergeRefs';
-import { iconPath as copyPath, svgTpl } from './icons/Copy';
-import { iconPath as checkPath } from './icons/Check';
+import { iconPath as copyIconPath, svgTpl } from './icons/Copy';
+import { iconPath as checkIconPath } from './icons/Check';
 
 interface MarkdownRendererProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Markdown content as HTML string
+   */
   children?: string | null;
+  /**
+   * Props to be passed to the copy button
+   */
   copyButtonProps?: React.HTMLAttributes<HTMLButtonElement>;
 }
 
-function appendCopyButton(
+/**
+ * Creates and appends a copy button to a code container
+ * @param container - The container element to append the copy button to
+ * @param buttonProps - Additional props to apply to the copy button
+ */
+function createCopyButton(
   container?: HTMLDivElement | null,
   buttonProps?: React.HTMLAttributes<HTMLButtonElement>
-) {
-  if (!container) {
+): void {
+  // If the container is null or the container already has a copy button, return
+  if (!container || container.querySelector('button[data-type="copy"]')) {
     return;
   }
 
+  const { className, ...rest } = buttonProps || {};
   const button = document.createElement('button');
-  button.className = 'btn-copy-code';
+  button.dataset['type'] = 'copy';
   button.title = 'Copy code';
-  button.innerHTML = svgTpl(copyPath);
+  button.setAttribute('aria-label', 'Copy code');
+  button.innerHTML = svgTpl(copyIconPath);
 
-  button.onclick = e => {
+  if (className) {
+    button.className = className;
+  }
+
+  button.onclick = (e: MouseEvent) => {
     e.preventDefault();
-    const code = container?.querySelector('code')?.textContent;
+    const code = container.querySelector('code')?.textContent;
     const icon = button.querySelector('.copy-icon-path');
 
-    icon?.setAttribute('d', checkPath);
+    // Show check icon to indicate successful copy
+    icon?.setAttribute('d', checkIconPath);
+
     if (code) {
       copy(code);
     }
 
+    // Reset to copy icon after 2 seconds
     setTimeout(() => {
-      icon?.setAttribute('d', copyPath);
+      icon?.setAttribute('d', copyIconPath);
     }, 2000);
   };
 
-  if (buttonProps) {
-    Object.entries(buttonProps || {}).forEach(([key, value]) => {
-      button.setAttribute(key, value);
+  // Apply additional button properties
+  if (rest) {
+    Object.entries(rest).forEach(([key, value]) => {
+      if (value !== undefined) {
+        button.setAttribute(key, String(value));
+      }
     });
   }
 
-  container?.appendChild(button);
+  container.appendChild(button);
 }
 
-const MarkdownRenderer = React.forwardRef(
+/**
+ * Renders markdown content with code blocks that have copy buttons
+ */
+const MarkdownRenderer = forwardRef<HTMLDivElement, MarkdownRendererProps>(
   (props: MarkdownRendererProps, ref: React.Ref<HTMLDivElement>) => {
     const { children, className, copyButtonProps, ...rest } = props;
-    const mdRef = React.useRef<HTMLDivElement>(null);
+    const mdRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
-      mdRef.current?.querySelectorAll('.rcv-code-renderer').forEach((el: any) => {
-        appendCopyButton(el, copyButtonProps);
+      // Add copy buttons to all code blocks
+      const codeBlocks = mdRef.current?.querySelectorAll('.rcv-code-renderer');
+      codeBlocks?.forEach(codeBlock => {
+        createCopyButton(codeBlock as HTMLDivElement, copyButtonProps);
       });
+      // We only want to run this once when the component mounts
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 

src/Renderer.tsx

@@ -11,6 +11,23 @@ import { transform as transformCode, Options } from 'sucrase';
 const React = require('react');
 const ReactDOM = require('react-dom');
 
+interface EditorProps {
+  /** The className of the editor */
+  className?: string;
+
+  /** Add a prefix to the className of the buttons on the toolbar */
+  classPrefix?: string;
+
+  /** The className of the code button displayed on the toolbar */
+  buttonClassName?: string;
+
+  /** Customize the code icon on the toolbar */
+  icon?: React.ReactNode;
+
+  /** The properties of the show code button */
+  showCodeButtonProps?: React.HTMLAttributes<HTMLButtonElement>;
+}
+
 export interface RendererProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
   /** Code editor theme, applied to CodeMirror */
   theme?: 'light' | 'dark';
@@ -28,18 +45,7 @@ export interface RendererProps extends Omit<React.HTMLAttributes<HTMLElement>, '
   editable?: boolean;
 
   /** Editor properties */
-  editor?: {
-    className?: string;
-
-    /** Add a prefix to the className of the buttons on the toolbar */
-    classPrefix?: string;
-
-    /** The className of the code button displayed on the toolbar */
-    buttonClassName?: string;
-
-    /** Customize the code icon on the toolbar */
-    icon?: React.ReactNode;
-  };
+  editor?: EditorProps;
 
   /**
    * https://github.com/alangpierce/sucrase#transforms
@@ -97,6 +103,7 @@ const Renderer = React.forwardRef((props: RendererProps, ref: React.Ref<HTMLDivE
     icon: codeIcon,
     className: editorClassName,
     buttonClassName,
+    showCodeButtonProps,
     ...editorProps
   } = editor;
 
@@ -168,16 +175,17 @@ const Renderer = React.forwardRef((props: RendererProps, ref: React.Ref<HTMLDivE
     [executeCode, onChange]
   );
 
-  const showCodeButtonProps = {
+  const toggleButtonProps = {
     role: 'switch',
     'aria-checked': editable,
     'aria-label': 'Show the full source',
     className: buttonClassName,
-    onClick: handleExpandEditor
+    onClick: handleExpandEditor,
+    ...showCodeButtonProps
   };
 
   const showCodeButton = (
-    <button {...showCodeButtonProps}>
+    <button {...toggleButtonProps}>
       {typeof codeIcon !== 'undefined' ? (
         codeIcon
       ) : (
@@ -195,7 +203,7 @@ const Renderer = React.forwardRef((props: RendererProps, ref: React.Ref<HTMLDivE
         {compiledReactNode}
       </Preview>
       <div className="rcv-toolbar">
-        {renderToolbar ? renderToolbar(showCodeButton, showCodeButtonProps) : showCodeButton}
+        {renderToolbar ? renderToolbar(showCodeButton, toggleButtonProps) : showCodeButton}
       </div>
       {showCodeEditor && (
         <CodeEditor

src/less/styles.less

@@ -68,18 +68,18 @@
   }
 }
 
-.copy-code-button {
+button[data-type="copy"] {
   position: absolute;
   color: #858b94;
 }
 
-.rcv-editor .copy-code-button {
+.rcv-editor button[data-type="copy"] {
   right: 8px;
   top: 16px;
   z-index: 1;
 }
 
-.rcv-highlight .copy-code-button {
+.rcv-highlight button[data-type="copy"] {
   right: 8px;
   top: 8px;
 }