-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathDocRenderer.tsx
More file actions
90 lines (76 loc) · 3.31 KB
/
Copy pathDocRenderer.tsx
File metadata and controls
90 lines (76 loc) · 3.31 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
"use client";
import { useEffect, useRef } from "react";
export function DocRenderer({ content }: { content: string }) {
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const container = containerRef.current;
if (!container) return;
// Initialize tabs
const tabContainers = container.querySelectorAll(".tabs-container");
tabContainers.forEach((tc) => {
// Prevent double-init (React strict mode runs effects twice)
if (tc.querySelector(".tabs-nav")) return;
const panels = tc.querySelectorAll<HTMLElement>(".tab-panel");
if (panels.length === 0) return;
const nav = document.createElement("div");
nav.className = "tabs-nav";
panels.forEach((panel, i) => {
const title = panel.dataset.tabTitle || `Tab ${i + 1}`;
const btn = document.createElement("button");
btn.textContent = title;
btn.type = "button";
if (i === 0) {
btn.classList.add("active");
panel.classList.add("active");
}
btn.addEventListener("click", () => {
nav
.querySelectorAll("button")
.forEach((b) => b.classList.remove("active"));
panels.forEach((p) => p.classList.remove("active"));
btn.classList.add("active");
panel.classList.add("active");
});
nav.appendChild(btn);
});
tc.insertBefore(nav, tc.firstChild);
});
// Add copy buttons to code blocks
const codeBlocks = container.querySelectorAll("pre");
codeBlocks.forEach((pre) => {
if (pre.querySelector(".copy-btn")) return;
const wrapper = document.createElement("div");
wrapper.className = "code-block-wrapper";
pre.parentNode?.insertBefore(wrapper, pre);
wrapper.appendChild(pre);
const btn = document.createElement("button");
btn.className = "copy-btn";
btn.type = "button";
btn.setAttribute("aria-label", "Copy code");
btn.innerHTML =
'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
btn.addEventListener("click", () => {
const code = pre.querySelector("code");
const text = code?.textContent || pre.textContent || "";
navigator.clipboard.writeText(text).then(() => {
btn.innerHTML =
'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
btn.classList.add("copied");
setTimeout(() => {
btn.innerHTML =
'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
btn.classList.remove("copied");
}, 2000);
});
});
wrapper.appendChild(btn);
});
}, [content]);
return (
<div
ref={containerRef}
className="doc-content"
dangerouslySetInnerHTML={{ __html: content }}
/>
);
}