origin/apps/web/src/components/common/container/CollapsibleContent.tsx

30 lines
815 B
TypeScript
Raw Normal View History

2025-02-23 22:51:19 +08:00
import React, { useEffect, useRef, useState } from "react";
import Quill from "quill";
import "quill/dist/quill.snow.css"; // 引入默认样式
2025-02-21 17:32:25 +08:00
interface CollapsibleContentProps {
content: string;
maxHeight?: number;
}
2025-02-26 16:11:08 +08:00
const CollapsibleContent: React.FC<CollapsibleContentProps> = ({ content }) => {
2025-02-23 22:51:19 +08:00
const contentWrapperRef = useRef(null);
2025-02-21 17:32:25 +08:00
return (
2025-02-23 22:51:19 +08:00
<div className=" text-base ">
2025-02-27 21:45:40 +08:00
<div className=" flex flex-col gap-4 transition-all duration-300 ease-in-out rounded-xl p-6 ">
2025-02-23 22:51:19 +08:00
{/* 包装整个内容区域的容器 */}
2025-02-26 16:11:08 +08:00
<div ref={contentWrapperRef}>
2025-02-23 22:51:19 +08:00
{/* 内容区域 */}
<div
className="ql-editor p-0 space-y-1 leading-relaxed"
dangerouslySetInnerHTML={{
__html: content || "",
}}
/>
</div>
2025-02-21 17:32:25 +08:00
</div>
</div>
);
};
export default CollapsibleContent;