taDuc
359 lines
14 KiB
TypeScript
359 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useMemo, useRef, useState } from "react";
|
|
|
|
import type { Entity } from "@/uhm/api/entities";
|
|
import type { Wiki } from "@/uhm/api/wikis";
|
|
|
|
type TocItem = {
|
|
id: string;
|
|
level: number;
|
|
text: string;
|
|
};
|
|
|
|
type Props = {
|
|
entity: Entity | null;
|
|
wiki: Wiki | null;
|
|
isLoading: boolean;
|
|
error?: string | null;
|
|
onClose: () => void;
|
|
onWikiLinkRequest: (request: { slug: string; rect: DOMRect }) => void;
|
|
};
|
|
|
|
function escapeHtml(input: string): string {
|
|
return input
|
|
.replaceAll("&", "&")
|
|
.replaceAll("<", "<")
|
|
.replaceAll(">", ">")
|
|
.replaceAll("\"", """)
|
|
.replaceAll("'", "'");
|
|
}
|
|
|
|
function normalizeWikiContentToHtml(raw: string | null | undefined): string {
|
|
const value = String(raw || "").trim();
|
|
if (!value.length) return "";
|
|
|
|
if (value[0] === "<") return value;
|
|
|
|
return `<p>${escapeHtml(value).replace(/\n/g, "<br/>")}</p>`;
|
|
}
|
|
|
|
function slugifyHeading(raw: string): string {
|
|
const input = String(raw || "").trim();
|
|
if (!input.length) return "";
|
|
return input
|
|
.toLowerCase()
|
|
.normalize("NFKD")
|
|
.replace(/[\u0300-\u036f]/g, "")
|
|
.replace(/[^a-z0-9]+/g, "-")
|
|
.replace(/^-+/, "")
|
|
.replace(/-+$/, "")
|
|
.slice(0, 80);
|
|
}
|
|
|
|
function isExternalHref(href: string): boolean {
|
|
const h = href.trim().toLowerCase();
|
|
return (
|
|
h.startsWith("http://") ||
|
|
h.startsWith("https://") ||
|
|
h.startsWith("mailto:") ||
|
|
h.startsWith("tel:") ||
|
|
h.startsWith("sms:")
|
|
);
|
|
}
|
|
|
|
function prepareWikiHtml(inputHtml: string): { html: string; toc: TocItem[] } {
|
|
const parser = new DOMParser();
|
|
const doc = parser.parseFromString(inputHtml, "text/html");
|
|
|
|
for (const el of Array.from(doc.querySelectorAll("script"))) el.remove();
|
|
|
|
for (const a of Array.from(doc.querySelectorAll("a[href]"))) {
|
|
const href = String(a.getAttribute("href") || "").trim();
|
|
if (!href.length) continue;
|
|
if (href === "__missing__") continue;
|
|
if (href.startsWith("#")) continue;
|
|
if (href.startsWith("/")) continue;
|
|
|
|
if (isExternalHref(href)) {
|
|
a.setAttribute("target", "_blank");
|
|
a.setAttribute("rel", "noopener noreferrer");
|
|
continue;
|
|
}
|
|
|
|
const match = href.match(/^([^?#]+)([?#].*)?$/);
|
|
const slugPart = String(match?.[1] || "").replace(/^\/+/, "").trim();
|
|
if (!slugPart.length) continue;
|
|
a.setAttribute("href", `#wiki:${slugPart}`);
|
|
a.setAttribute("data-wiki-slug", slugPart);
|
|
a.setAttribute("target", "_self");
|
|
}
|
|
|
|
const toc: TocItem[] = [];
|
|
const seen = new Map<string, number>();
|
|
const headings = Array.from(doc.body.querySelectorAll("h1,h2,h3,h4,h5,h6"));
|
|
for (const h of headings) {
|
|
const text = String(h.textContent || "").trim();
|
|
if (!text.length) continue;
|
|
|
|
const level = Number(String(h.tagName || "").replace(/^H/i, "")) || 1;
|
|
const existingId = String(h.getAttribute("id") || "").trim();
|
|
if (existingId) {
|
|
toc.push({ id: existingId, level, text });
|
|
continue;
|
|
}
|
|
|
|
const base = slugifyHeading(text) || "heading";
|
|
const nextCount = (seen.get(base) || 0) + 1;
|
|
seen.set(base, nextCount);
|
|
const id = nextCount === 1 ? base : `${base}-${nextCount}`;
|
|
|
|
h.setAttribute("id", id);
|
|
toc.push({ id, level, text });
|
|
}
|
|
|
|
return { html: doc.body.innerHTML, toc };
|
|
}
|
|
|
|
export default function PublicWikiSidebar({
|
|
entity,
|
|
wiki,
|
|
isLoading,
|
|
error,
|
|
onClose,
|
|
onWikiLinkRequest,
|
|
}: Props) {
|
|
const contentRootRef = useRef<HTMLDivElement | null>(null);
|
|
const [activeHeadingId, setActiveHeadingId] = useState<string | null>(null);
|
|
const processedWiki = useMemo(() => {
|
|
if (!wiki) return { html: "", toc: [] as TocItem[] };
|
|
|
|
const html = normalizeWikiContentToHtml(wiki.content ?? "");
|
|
try {
|
|
return prepareWikiHtml(html);
|
|
} catch (err) {
|
|
console.error("Failed to process sidebar wiki HTML", err);
|
|
return { html, toc: [] as TocItem[] };
|
|
}
|
|
}, [wiki]);
|
|
const renderHtml = processedWiki.html;
|
|
const toc = processedWiki.toc;
|
|
const effectiveActiveHeadingId = toc.some((item) => item.id === activeHeadingId)
|
|
? activeHeadingId
|
|
: (toc[0]?.id ?? null);
|
|
|
|
useEffect(() => {
|
|
if (!toc.length) return;
|
|
const root = contentRootRef.current;
|
|
if (!root) return;
|
|
|
|
const headings = toc
|
|
.map((item) => root.querySelector<HTMLElement>(`#${CSS.escape(item.id)}`))
|
|
.filter((item): item is HTMLElement => Boolean(item));
|
|
if (!headings.length) return;
|
|
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
const visible = entries
|
|
.filter((entry) => entry.isIntersecting)
|
|
.sort((a, b) => (a.boundingClientRect.top ?? 0) - (b.boundingClientRect.top ?? 0));
|
|
const top = visible[0]?.target as HTMLElement | undefined;
|
|
if (top?.id) setActiveHeadingId(top.id);
|
|
},
|
|
{ root: null, rootMargin: "-18% 0px -70% 0px", threshold: [0, 1] }
|
|
);
|
|
|
|
for (const heading of headings) observer.observe(heading);
|
|
return () => observer.disconnect();
|
|
}, [toc]);
|
|
|
|
useEffect(() => {
|
|
const root = contentRootRef.current;
|
|
if (!root) return;
|
|
|
|
const handleClick = (event: MouseEvent) => {
|
|
const target = event.target as HTMLElement | null;
|
|
const link = target?.closest?.("a[data-wiki-slug]") as HTMLAnchorElement | null;
|
|
if (!link) return;
|
|
event.preventDefault();
|
|
|
|
const slug = String(link.getAttribute("data-wiki-slug") || "").trim();
|
|
if (!slug.length) return;
|
|
onWikiLinkRequest({ slug, rect: link.getBoundingClientRect() });
|
|
};
|
|
|
|
root.addEventListener("click", handleClick);
|
|
return () => root.removeEventListener("click", handleClick);
|
|
}, [onWikiLinkRequest, renderHtml]);
|
|
|
|
return (
|
|
<div className="flex h-full min-h-0 flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl dark:border-gray-800 dark:bg-gray-950">
|
|
<div className="border-b border-gray-200 px-4 py-4 dark:border-gray-800">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<div className="text-[11px] uppercase tracking-[0.08em] text-gray-500 dark:text-gray-400">
|
|
Wiki
|
|
</div>
|
|
<div className="mt-1 text-lg font-semibold leading-tight text-gray-900 dark:text-gray-100">
|
|
{entity?.name?.trim() || wiki?.title?.trim() || "Wiki"}
|
|
</div>
|
|
{entity?.description?.trim() ? (
|
|
<div className="mt-2 text-sm leading-6 text-gray-600 dark:text-gray-300">
|
|
{entity.description.trim()}
|
|
</div>
|
|
) : null}
|
|
{wiki?.title?.trim() && wiki.title.trim() !== entity?.name?.trim() ? (
|
|
<div className="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
|
{wiki.title.trim()}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-gray-200 text-sm text-gray-500 transition hover:bg-gray-50 hover:text-gray-800 dark:border-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.04] dark:hover:text-gray-100"
|
|
aria-label="Close wiki sidebar"
|
|
>
|
|
x
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{toc.length ? (
|
|
<div className="border-b border-gray-200 px-3 py-2 dark:border-gray-800">
|
|
<div className="flex gap-2 overflow-x-auto pb-1">
|
|
{toc.slice(0, 8).map((item) => {
|
|
const isActive = effectiveActiveHeadingId === item.id;
|
|
return (
|
|
<a
|
|
key={item.id}
|
|
href={`#${item.id}`}
|
|
className={`shrink-0 rounded-full px-3 py-1 text-xs transition ${isActive
|
|
? "bg-brand-50 text-brand-700 dark:bg-brand-500/10 dark:text-brand-300"
|
|
: "bg-gray-50 text-gray-600 hover:bg-gray-100 dark:bg-white/[0.03] dark:text-gray-300 dark:hover:bg-white/[0.06]"
|
|
}`}
|
|
>
|
|
{item.text}
|
|
</a>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="min-h-0 flex-1 overflow-y-auto">
|
|
{isLoading ? (
|
|
<div className="space-y-3 px-4 py-4">
|
|
<div className="h-4 w-28 animate-pulse rounded bg-gray-100 dark:bg-white/[0.06]" />
|
|
<div className="h-4 w-full animate-pulse rounded bg-gray-100 dark:bg-white/[0.06]" />
|
|
<div className="h-4 w-4/5 animate-pulse rounded bg-gray-100 dark:bg-white/[0.06]" />
|
|
</div>
|
|
) : error ? (
|
|
<div className="px-4 py-4 text-sm text-red-600 dark:text-red-300">
|
|
{error}
|
|
</div>
|
|
) : wiki ? (
|
|
<div
|
|
ref={contentRootRef}
|
|
className="uhm-wiki-sidebar-view ql-editor text-sm text-gray-900 dark:text-gray-100"
|
|
dangerouslySetInnerHTML={{ __html: renderHtml }}
|
|
/>
|
|
) : (
|
|
<div className="px-4 py-4 text-sm text-gray-600 dark:text-gray-300">
|
|
Entity này chưa có wiki liên kết.
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<style jsx global>{`
|
|
.uhm-wiki-sidebar-view.ql-editor {
|
|
height: auto;
|
|
overflow-y: visible;
|
|
padding: 18px 18px 22px;
|
|
}
|
|
.uhm-wiki-sidebar-view.ql-editor p {
|
|
margin: 0 0 0.75em;
|
|
}
|
|
.uhm-wiki-sidebar-view.ql-editor h1 {
|
|
margin: 1.15em 0 0.6em;
|
|
font-size: 1.6em;
|
|
font-weight: 800;
|
|
line-height: 1.2;
|
|
}
|
|
.uhm-wiki-sidebar-view.ql-editor h2 {
|
|
margin: 1.05em 0 0.55em;
|
|
font-size: 1.3em;
|
|
font-weight: 800;
|
|
line-height: 1.25;
|
|
}
|
|
.uhm-wiki-sidebar-view.ql-editor h3,
|
|
.uhm-wiki-sidebar-view.ql-editor h4,
|
|
.uhm-wiki-sidebar-view.ql-editor h5,
|
|
.uhm-wiki-sidebar-view.ql-editor h6 {
|
|
margin: 0.95em 0 0.45em;
|
|
font-size: 1.05em;
|
|
font-weight: 700;
|
|
line-height: 1.3;
|
|
}
|
|
.uhm-wiki-sidebar-view.ql-editor ul,
|
|
.uhm-wiki-sidebar-view.ql-editor ol {
|
|
margin: 0 0 0.75em;
|
|
padding-left: 1.5em;
|
|
}
|
|
.uhm-wiki-sidebar-view.ql-editor blockquote {
|
|
margin: 0 0 0.75em;
|
|
padding-left: 12px;
|
|
border-left: 3px solid rgba(148, 163, 184, 0.6);
|
|
color: rgba(71, 85, 105, 1);
|
|
}
|
|
:is(.dark *) .uhm-wiki-sidebar-view.ql-editor blockquote {
|
|
border-left-color: rgba(100, 116, 139, 0.6);
|
|
color: rgba(203, 213, 225, 0.95);
|
|
}
|
|
.uhm-wiki-sidebar-view.ql-editor pre {
|
|
margin: 0 0 0.75em;
|
|
padding: 12px 14px;
|
|
border: 1px solid rgba(226, 232, 240, 1);
|
|
border-radius: 10px;
|
|
background: rgba(248, 250, 252, 1);
|
|
overflow: auto;
|
|
}
|
|
:is(.dark *) .uhm-wiki-sidebar-view.ql-editor pre {
|
|
border-color: rgba(51, 65, 85, 1);
|
|
background: rgba(2, 6, 23, 0.4);
|
|
}
|
|
.uhm-wiki-sidebar-view.ql-editor img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 8px;
|
|
}
|
|
.uhm-wiki-sidebar-view.ql-editor a {
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
.uhm-wiki-sidebar-view.ql-editor a[href]:not([href=""]):not([href="__missing__"]) {
|
|
color: #2563eb;
|
|
}
|
|
:is(.dark *) .uhm-wiki-sidebar-view.ql-editor a[href]:not([href=""]):not([href="__missing__"]) {
|
|
color: #60a5fa;
|
|
}
|
|
.uhm-wiki-sidebar-view.ql-editor a[href="__missing__"] {
|
|
cursor: default;
|
|
pointer-events: none;
|
|
}
|
|
.uhm-wiki-sidebar-view.ql-editor a:not([href]),
|
|
.uhm-wiki-sidebar-view.ql-editor a[href=""],
|
|
.uhm-wiki-sidebar-view.ql-editor a[href="__missing__"] {
|
|
color: #dc2626;
|
|
}
|
|
:is(.dark *) .uhm-wiki-sidebar-view.ql-editor a:not([href]),
|
|
:is(.dark *) .uhm-wiki-sidebar-view.ql-editor a[href=""],
|
|
:is(.dark *) .uhm-wiki-sidebar-view.ql-editor a[href="__missing__"] {
|
|
color: #f87171;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
}
|