fix(types): add support for data-* attributes in button props (#58)

simonguo · web-flow · commit 92bb75c2797b · 2025-07-04T11:32:11.000+08:00
- Extend ButtonHTMLAttributes to support custom data-* attributes
- Update type definitions in CodeEditor and Renderer components
- Ensure type safety while allowing flexible data attributes
diff --git a/docs/index.tsx b/docs/index.tsx
@@ -31,6 +31,7 @@ const App = () => {
           return <div>Footer</div>;
         }}
         copyButtonProps={{
+          'data-appearence': 'subtle',
           className: 'rs-btn-icon rs-btn-icon-circle rs-btn rs-btn-subtle rs-btn-xs'
         }}
       >
diff --git a/src/CodeEditor.tsx b/src/CodeEditor.tsx
@@ -4,7 +4,10 @@ import CopyCodeButton from './CopyCodeButton';
 export interface CodeEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
   code?: string;
   editorConfig?: EditorConfiguration;
-  copyCodeButtonAs?: React.ElementType;
+  copyButtonAs?: React.ElementType;
+  copyButtonProps?: React.HTMLAttributes<HTMLButtonElement> & {
+    [key: `data-${string}`]: string;
+  };
   onChange?: (code?: string) => void;
   onInitialized?: (editor: EditorFromTextArea) => void;
 }
@@ -30,7 +33,8 @@ async function importCodeMirror() {
 }
 
 const CodeEditor = React.forwardRef((props: CodeEditorProps, ref: React.Ref<HTMLDivElement>) => {
-  const { code, editorConfig, copyCodeButtonAs, onChange, onInitialized, ...rest } = props;
+  const { code, editorConfig, copyButtonAs, copyButtonProps, onChange, onInitialized, ...rest } =
+    props;
 
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const editor = useRef<EditorFromTextArea | null>(null);
@@ -68,11 +72,7 @@ const CodeEditor = React.forwardRef((props: CodeEditorProps, ref: React.Ref<HTML
 
   return (
     <div ref={ref} {...rest}>
-      <CopyCodeButton
-        as={copyCodeButtonAs}
-        className="rs-btn-icon rs-btn-icon-circle rs-btn rs-btn-subtle rs-btn-xs"
-        code={code?.trim()}
-      />
+      <CopyCodeButton as={copyButtonAs} code={code?.trim()} {...copyButtonProps} />
       {!initialized && <div className="rcv-editor-loader">Editor initializing ...</div>}
       <textarea ref={textareaRef} defaultValue={code?.trim()} />
     </div>
diff --git a/src/CodeView.tsx b/src/CodeView.tsx
@@ -11,7 +11,9 @@ export interface CodeViewProps extends RendererProps {
   sourceCode?: string;
 
   /** The properties of the copy button */
-  copyButtonProps?: React.HTMLAttributes<HTMLButtonElement>;
+  copyButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    [key: `data-${string}`]: string;
+  };
 }
 
 const CodeView = React.forwardRef((props: CodeViewProps, ref: React.Ref<HTMLDivElement>) => {
@@ -23,6 +25,7 @@ const CodeView = React.forwardRef((props: CodeViewProps, ref: React.Ref<HTMLDivE
     theme = 'light',
     editable,
     transformOptions,
+    copyButtonAs,
     copyButtonProps,
     renderToolbar,
     onChange,
@@ -57,6 +60,8 @@ const CodeView = React.forwardRef((props: CodeViewProps, ref: React.Ref<HTMLDivE
               onCloseEditor={onCloseEditor}
               beforeCompile={beforeCompile}
               renderExtraFooter={renderExtraFooter}
+              copyButtonProps={copyButtonProps}
+              copyButtonAs={copyButtonAs}
             />
           );
         } else if (fragment.type === 'html') {
diff --git a/src/CopyCodeButton.tsx b/src/CopyCodeButton.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import copy from 'copy-to-clipboard';
 import CopyIcon from './icons/Copy';
 import CheckIcon from './icons/Check';
@@ -12,18 +12,19 @@ function CopyCodeButton(props: CopyCodeButtonProps) {
   const { as: Component = 'button', code, ...rest } = props;
   const [copied, setCopied] = useState(false);
 
-  if (!code) {
-    return null;
-  }
-
-  const handleClick = () => {
+  const handleClick = useCallback(() => {
+    if (!code) {
+      return;
+    }
     setCopied(true);
     copy(code);
 
-    setTimeout(() => {
-      setCopied(false);
-    }, 2000);
-  };
+    setTimeout(() => setCopied(false), 2000);
+  }, [code]);
+
+  if (!code) {
+    return null;
+  }
 
   return (
     <Component data-type="copy" onClick={handleClick} {...rest}>
diff --git a/src/MarkdownRenderer.tsx b/src/MarkdownRenderer.tsx
@@ -10,6 +10,7 @@ interface MarkdownRendererProps extends React.HTMLAttributes<HTMLDivElement> {
    * Markdown content as HTML string
    */
   children?: string | null;
+
   /**
    * Props to be passed to the copy button
    */
diff --git a/src/Renderer.tsx b/src/Renderer.tsx
@@ -36,7 +36,12 @@ export interface RendererProps extends Omit<React.HTMLAttributes<HTMLElement>, '
   code?: string;
 
   /** The component used to render the copy button */
-  copyCodeButtonAs?: React.ElementType;
+  copyButtonAs?: React.ElementType;
+
+  /** The properties of the copy button */
+  copyButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    [key: `data-${string}`]: string;
+  };
 
   /** Dependent objects required by the executed code */
   dependencies?: Record<string, unknown>;
@@ -87,7 +92,8 @@ const Renderer = React.forwardRef((props: RendererProps, ref: React.Ref<HTMLDivE
     editable: isEditable = false,
     transformOptions = defaultTransformOptions,
     code,
-    copyCodeButtonAs,
+    copyButtonAs,
+    copyButtonProps,
     renderToolbar,
     renderExtraFooter,
     onOpenEditor,
@@ -209,7 +215,8 @@ const Renderer = React.forwardRef((props: RendererProps, ref: React.Ref<HTMLDivE
         <CodeEditor
           {...editorProps}
           key="jsx"
-          copyCodeButtonAs={copyCodeButtonAs}
+          copyButtonAs={copyButtonAs}
+          copyButtonProps={copyButtonProps}
           onChange={handleCodeChange}
           className={classNames(editorClassName, 'rcv-editor')}
           editorConfig={{ lineNumbers: true, theme: `base16-${theme}` }}

Original file line number	Diff line number	Diff line change
`@@ -31,6 +31,7 @@ const App = () => {`
`31`	`31`	`return <div>Footer</div>;`
`32`	`32`	`}}`
`33`	`33`	`copyButtonProps={{`
	`34`	`+ 'data-appearence': 'subtle',`
`34`	`35`	`className: 'rs-btn-icon rs-btn-icon-circle rs-btn rs-btn-subtle rs-btn-xs'`
`35`	`36`	`}}`
`36`	`37`	`>`