60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
import { createReactBlockSpec } from "@blocknote/react";
|
|
import { RiFileTextFill } from "react-icons/ri";
|
|
import { useRouter } from "next/navigation";
|
|
import type { PropSchema } from "@blocknote/core";
|
|
|
|
type PageReferenceProps = PropSchema & {
|
|
pageId: { default: string };
|
|
title: { default: string };
|
|
};
|
|
|
|
const pageReferenceConfig = {
|
|
type: "pageReference" as const,
|
|
propSchema: {
|
|
pageId: { default: "" },
|
|
title: { default: "未命名页面" },
|
|
},
|
|
content: "none" as const,
|
|
};
|
|
|
|
export const pageReferenceBlock = createReactBlockSpec(
|
|
pageReferenceConfig,
|
|
() => ({
|
|
render: ({ block }) => {
|
|
const router = useRouter();
|
|
const { pageId, title } = block.props;
|
|
|
|
return (
|
|
<div
|
|
role="button"
|
|
tabIndex={0}
|
|
onClick={() => {
|
|
if (pageId) {
|
|
router.push(`/documents/${pageId}`);
|
|
}
|
|
}}
|
|
onKeyDown={(event) => {
|
|
if ((event.key === "Enter" || event.key === " ") && pageId) {
|
|
event.preventDefault();
|
|
router.push(`/documents/${pageId}`);
|
|
}
|
|
}}
|
|
className="group mt-2 flex items-center gap-3 rounded-[4px] px-4 py-3 text-[#2563eb] hover:bg-[#f5f5f5]"
|
|
style={{ fontFamily: "Inter, system-ui, sans-serif" }}
|
|
>
|
|
<RiFileTextFill className="text-xl" aria-hidden />
|
|
<span className="text-base font-medium leading-none">
|
|
{title || "未命名页面"}
|
|
</span>
|
|
<span className="ml-auto text-sm opacity-0 transition-opacity duration-150 group-hover:opacity-100">
|
|
点击进入 →
|
|
</span>
|
|
</div>
|
|
);
|
|
},
|
|
}),
|
|
);
|
|
|
|
export const pageReferencePropSchema = pageReferenceConfig.propSchema;
|
|
|