diff --git a/docs/index.tsx b/docs/index.tsx
index 5e09579..6072ef9 100644
--- a/docs/index.tsx
+++ b/docs/index.tsx
@@ -31,6 +31,7 @@ const App = () => {
return Footer
;
}}
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
index f3f7712..8f761f0 100644
--- a/src/CodeEditor.tsx
+++ b/src/CodeEditor.tsx
@@ -4,7 +4,10 @@ import CopyCodeButton from './CopyCodeButton';
export interface CodeEditorProps extends Omit, 'onChange'> {
code?: string;
editorConfig?: EditorConfiguration;
- copyCodeButtonAs?: React.ElementType;
+ copyButtonAs?: React.ElementType;
+ copyButtonProps?: React.HTMLAttributes & {
+ [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) => {
- const { code, editorConfig, copyCodeButtonAs, onChange, onInitialized, ...rest } = props;
+ const { code, editorConfig, copyButtonAs, copyButtonProps, onChange, onInitialized, ...rest } =
+ props;
const textareaRef = useRef(null);
const editor = useRef(null);
@@ -68,11 +72,7 @@ const CodeEditor = React.forwardRef((props: CodeEditorProps, ref: React.Ref
-
+
{!initialized && Editor initializing ...
}
diff --git a/src/CodeView.tsx b/src/CodeView.tsx
index 588fec3..393bc6a 100644
--- 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;
+ copyButtonProps?: React.ButtonHTMLAttributes & {
+ [key: `data-${string}`]: string;
+ };
}
const CodeView = React.forwardRef((props: CodeViewProps, ref: React.Ref) => {
@@ -23,6 +25,7 @@ const CodeView = React.forwardRef((props: CodeViewProps, ref: React.Ref
);
} else if (fragment.type === 'html') {
diff --git a/src/CopyCodeButton.tsx b/src/CopyCodeButton.tsx
index 6786ba6..1039360 100644
--- 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 (
diff --git a/src/MarkdownRenderer.tsx b/src/MarkdownRenderer.tsx
index b8b1206..45175de 100644
--- a/src/MarkdownRenderer.tsx
+++ b/src/MarkdownRenderer.tsx
@@ -10,6 +10,7 @@ interface MarkdownRendererProps extends React.HTMLAttributes {
* 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
index 3e88ad0..458ea98 100644
--- a/src/Renderer.tsx
+++ b/src/Renderer.tsx
@@ -36,7 +36,12 @@ export interface RendererProps extends Omit, '
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 & {
+ [key: `data-${string}`]: string;
+ };
/** Dependent objects required by the executed code */
dependencies?: Record;
@@ -87,7 +92,8 @@ const Renderer = React.forwardRef((props: RendererProps, ref: React.Ref