website: components: add multilinecodeblock component (#13179)
* wip * wip * wip Signed-off-by: Dominic R <dominic@sdko.org> wip Signed-off-by: Dominic R <dominic@sdko.org> wip * wip * wip * move css to same folder Signed-off-by: Jens Langhammer <jens@goauthentik.io> --------- Signed-off-by: Jens Langhammer <jens@goauthentik.io> Co-authored-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Dominic R
188
website/src/components/MultilineCodeblock/index.tsx
Normal file
188
website/src/components/MultilineCodeblock/index.tsx
Normal file
@ -0,0 +1,188 @@
|
|||||||
|
import React, {
|
||||||
|
ReactNode,
|
||||||
|
useState,
|
||||||
|
isValidElement,
|
||||||
|
useCallback,
|
||||||
|
useEffect,
|
||||||
|
useRef,
|
||||||
|
} from "react";
|
||||||
|
import createDOMPurify from "dompurify";
|
||||||
|
import "./styles.css";
|
||||||
|
|
||||||
|
type IntegrationsMultilineCodeblockProps = {
|
||||||
|
children: ReactNode;
|
||||||
|
className?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type CopyButtonState = {
|
||||||
|
isCopied: boolean;
|
||||||
|
className: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Configuration for allowed HTML tags in the sanitized output
|
||||||
|
const allowedTags = ["em", "code", "pre"];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initializes DOMPurify safely for both browser and server environments
|
||||||
|
* @returns DOMPurify instance or null
|
||||||
|
*/
|
||||||
|
const getDOMPurify = () => {
|
||||||
|
if (typeof window !== "undefined") {
|
||||||
|
return createDOMPurify(window);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
const domPurifyInstance = getDOMPurify();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Component for rendering secure code blocks with copy functionality
|
||||||
|
* - Safely sanitizes HTML content
|
||||||
|
* - Handles both string and JSX content
|
||||||
|
* - Provides copy-to-clipboard functionality
|
||||||
|
*/
|
||||||
|
const IntegrationsMultilineCodeblock: React.FC<
|
||||||
|
IntegrationsMultilineCodeblockProps
|
||||||
|
> = ({ children, className = "" }) => {
|
||||||
|
// State for managing copy button appearance and behavior
|
||||||
|
const [copyState, setCopyState] = useState<CopyButtonState>({
|
||||||
|
isCopied: false,
|
||||||
|
className: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
// State for storing sanitized content after processing
|
||||||
|
const [sanitizedContent, setSanitizedContent] = useState<string | null>(
|
||||||
|
null,
|
||||||
|
);
|
||||||
|
|
||||||
|
// Ref to access the actual DOM element for text extraction
|
||||||
|
const codeRef = useRef<HTMLElement>(null);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Recursively converts React children to plain text string
|
||||||
|
* @param nodes - React children nodes to process
|
||||||
|
* @returns Flattened string representation
|
||||||
|
*/
|
||||||
|
const childrenAsString = useCallback((nodes: ReactNode): string => {
|
||||||
|
return React.Children.toArray(nodes).reduce<string>((acc, node) => {
|
||||||
|
if (typeof node === "string") {
|
||||||
|
return acc + node;
|
||||||
|
} else if (isValidElement(node)) {
|
||||||
|
return acc + childrenAsString(node.props.children);
|
||||||
|
} else if (typeof node === "number") {
|
||||||
|
return acc + String(node);
|
||||||
|
}
|
||||||
|
return acc;
|
||||||
|
}, "");
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sanitizes content while preserving allowed HTML tags
|
||||||
|
* @param children - React children to process
|
||||||
|
* @returns Sanitized HTML string
|
||||||
|
*/
|
||||||
|
const processContent = useCallback(
|
||||||
|
(children: ReactNode): string => {
|
||||||
|
const rawText = childrenAsString(children);
|
||||||
|
|
||||||
|
// Client-side sanitization with DOMPurify
|
||||||
|
if (domPurifyInstance) {
|
||||||
|
return domPurifyInstance
|
||||||
|
.sanitize(rawText, {
|
||||||
|
ALLOWED_TAGS: allowedTags,
|
||||||
|
KEEP_CONTENT: true,
|
||||||
|
RETURN_TRUSTED_TYPE: false,
|
||||||
|
})
|
||||||
|
.trim();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Server-side fallback (no sanitization, will be re-processed client-side)
|
||||||
|
return rawText.trim();
|
||||||
|
},
|
||||||
|
[childrenAsString],
|
||||||
|
);
|
||||||
|
|
||||||
|
// Process content after component mounts to ensure browser environment
|
||||||
|
useEffect(() => {
|
||||||
|
setSanitizedContent(processContent(children));
|
||||||
|
}, [children, processContent]);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handles copy-to-clipboard functionality
|
||||||
|
*/
|
||||||
|
const handleCopy = async (): Promise<void> => {
|
||||||
|
// Get raw text content from DOM element, stripping all HTML tags
|
||||||
|
const textToCopy = codeRef.current?.textContent || "";
|
||||||
|
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(textToCopy);
|
||||||
|
setCopyState({
|
||||||
|
isCopied: true,
|
||||||
|
className: "integration-codeblock__copy-btn--copied",
|
||||||
|
});
|
||||||
|
setTimeout(() => {
|
||||||
|
setCopyState((prev) =>
|
||||||
|
prev.isCopied ? { isCopied: false, className: "" } : prev,
|
||||||
|
);
|
||||||
|
}, 2000);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Failed to copy content:", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// SVG icon component for copy buttons
|
||||||
|
const Icon: React.FC<{ className: string; path: string }> = React.memo(
|
||||||
|
({ className, path }) => (
|
||||||
|
<svg viewBox="0 0 24 24" className={className}>
|
||||||
|
<path fill="currentColor" d={path} />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<pre className={`integration-codeblock ${className}`.trim()}>
|
||||||
|
{/* Attach ref to access rendered text content */}
|
||||||
|
<code className="integration-codeblock__content" ref={codeRef}>
|
||||||
|
{typeof children === "string" ? (
|
||||||
|
// Render sanitized HTML for string content
|
||||||
|
<span
|
||||||
|
dangerouslySetInnerHTML={{
|
||||||
|
__html: sanitizedContent || children,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
// Directly render JSX children (already safe)
|
||||||
|
children
|
||||||
|
)}
|
||||||
|
</code>
|
||||||
|
|
||||||
|
{/* Copy button with state-dependent styling */}
|
||||||
|
<button
|
||||||
|
onClick={handleCopy}
|
||||||
|
className={`integration-codeblock__copy-btn ${copyState.className}`.trim()}
|
||||||
|
aria-label="Copy code to clipboard"
|
||||||
|
title="Copy"
|
||||||
|
type="button"
|
||||||
|
disabled={copyState.isCopied}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="integration-codeblock__copy-icons"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
{/* Copy icon */}
|
||||||
|
<Icon
|
||||||
|
className="integration-codeblock__copy-icon"
|
||||||
|
path="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
|
||||||
|
/>
|
||||||
|
{/* Success checkmark */}
|
||||||
|
<Icon
|
||||||
|
className="integration-codeblock__copy-success-icon"
|
||||||
|
path="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</pre>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default IntegrationsMultilineCodeblock;
|
||||||
112
website/src/components/MultilineCodeblock/styles.css
Normal file
112
website/src/components/MultilineCodeblock/styles.css
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
/* Base styles */
|
||||||
|
.integration-codeblock {
|
||||||
|
position: relative;
|
||||||
|
background: #f8f8f8;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-family: "Menlo", "Consolas", monospace;
|
||||||
|
margin: 1.5rem 0;
|
||||||
|
padding: 1rem 2rem 1.5rem 1.5rem;
|
||||||
|
display: block;
|
||||||
|
overflow-x: auto;
|
||||||
|
font-size: 0.9em;
|
||||||
|
line-height: 1.5;
|
||||||
|
transition: box-shadow 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.integration-codeblock:hover {
|
||||||
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.integration-codeblock code {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: block;
|
||||||
|
background: transparent !important;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Copy button */
|
||||||
|
.integration-codeblock__copy-btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 0.75rem;
|
||||||
|
right: 0.75rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #666;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.integration-codeblock__copy-btn:hover {
|
||||||
|
background: rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.integration-codeblock__copy-btn:focus-visible {
|
||||||
|
outline: 2px solid #3b82f6;
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.integration-codeblock__copy-btn[disabled] {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.integration-codeblock__copy-icons {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.integration-codeblock__copy-icon,
|
||||||
|
.integration-codeblock__copy-success-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
transition:
|
||||||
|
opacity 0.2s ease,
|
||||||
|
transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.integration-codeblock__copy-success-icon {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.integration-codeblock__copy-btn--copied .integration-codeblock__copy-icon {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.integration-codeblock__copy-btn--copied
|
||||||
|
.integration-codeblock__copy-success-icon {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
color: #10b981;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark mode */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.integration-codeblock {
|
||||||
|
background: #1e1e1e;
|
||||||
|
color: #f8f8f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.integration-codeblock:hover {
|
||||||
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.integration-codeblock__copy-btn {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.integration-codeblock__copy-btn:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.integration-codeblock__copy-success-icon {
|
||||||
|
color: #10b981;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user