TableOfContentsコンポーネントのヘッディングラベルの切り詰め条件を変更し、カスタムスタイルを追加しました。また、EditHe…

…aderコンポーネントのInfoIconのスタイルを調整しました。 (#636)
ttizze · Feb 27, 2025 · 95f2633 · 95f2633
2 parents 65375ff + c23b561
commit 95f2633
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/next/src/app/[locale]/(common-layout)/user/[handle]/page/[slug]/components/toc.test.tsx b/next/src/app/[locale]/(common-layout)/user/[handle]/page/[slug]/components/toc.test.tsx
@@ -93,7 +93,9 @@ describe("TableOfContents", () => {
 			// 長いテキストは切り詰められる
 			const longText =
 				"This is a very long heading text that should be truncated";
-			expect(headingLabelCallback(longText)).toBe("This is a very long ...");
+			expect(headingLabelCallback(longText)).toBe(
+				"This is a very long heading text that sh...",
+			);
 		} else {
 			throw new Error("headingLabelCallback is undefined");
 		}

diff --git a/next/src/app/[locale]/(common-layout)/user/[handle]/page/[slug]/components/toc.tsx b/next/src/app/[locale]/(common-layout)/user/[handle]/page/[slug]/components/toc.tsx
@@ -19,7 +19,7 @@ export default function TableOfContents({
 			orderedList: false,
 			hasInnerContainers: true,
 			headingLabelCallback: (text) => {
-				return text.length > 20 ? `${text.substring(0, 20)}...` : text;
+				return text.length > 40 ? `${text.substring(0, 40)}...` : text;
 			},
 			onClick: (e) => {
 				if (onItemClick) {
@@ -29,6 +29,16 @@ export default function TableOfContents({
 			scrollSmoothOffset: -70,
 		});
 
+		// Add custom styling for the TOC with a unique ID
+		const style = document.createElement("style");
+		style.id = "toc-custom-style";
+		style.innerHTML = `
+			.toc-link {
+				white-space: pre-wrap;
+			}
+		`;
+		document.head.appendChild(style);
+
 		// Clean up on unmount
 		return () => {
 			tocbot.destroy();
@@ -37,6 +47,7 @@ export default function TableOfContents({
 
 	return <nav className="js-toc" />;
 }
+
 export function useHasTableOfContents(): boolean {
 	const [hasHeadings, setHasHeadings] = useState(false);
 

diff --git a/...src/app/[locale]/(edit-layout)/user/[handle]/page/[slug]/edit/components/header/index.tsx b/...src/app/[locale]/(edit-layout)/user/[handle]/page/[slug]/edit/components/header/index.tsx
@@ -138,7 +138,7 @@ export function EditHeader({
 										type="button"
 										className="text-xs text-muted-foreground hover:text-foreground flex items-center"
 									>
-										<InfoIcon className="h-3.5 w-3.5 text-blue-400 hover:text-blue-600" />
+										<InfoIcon className="h-3.5 w-3.5" />
 									</button>
 								</PopoverTrigger>
 								<PopoverContent