server componentから使えるようラップ

Author: na-trium-144

app/markdown/markdown.tsx

@@ -17,7 +17,7 @@ import {
   DaisyWarningIcon,
 } from "@/daisyAlertIcon";
 import { CSSProperties } from "react";
-import { updateTooltipPosition } from "./tooltipPosition";
+import { WithAutoTooltipPosition } from "./tooltipPosition";
 import Link from "next/link";
 
 export function StyledMarkdown(props: {
@@ -61,8 +61,8 @@ const baseComponents: Components = {
   li: ({ node, ...props }) => <li className="my-1" {...props} />,
   a: ({ node, href, ...props }) =>
     href?.startsWith("http") ? (
-      <a
-        ref={(node) => updateTooltipPosition(node)}
+      <WithAutoTooltipPosition
+        as="a"
         className="link link-info tooltip tooltip-info before:whitespace-pre"
         href={href}
         data-tip={`外部リンク\n${href}`}

app/markdown/term.tsx

@@ -21,7 +21,7 @@ import {
 } from "@floating-ui/react";
 import clsx from "clsx";
 import { usePagesListForLang } from "@/pagesListContext";
-import { updateTooltipPosition } from "./tooltipPosition";
+import { WithAutoTooltipPosition } from "./tooltipPosition";
 
 const TermDefinitionContext = createContext<{
   lang: LangId;
@@ -97,14 +97,14 @@ export default function Term(props: JSX.IntrinsicElements["q"] & ExtraProps) {
   const term = termDefinitions.find((t) => t.alias.includes(termText));
   if (!term) {
     const internalLink = (pageEntry: PageEntry) => (
-      <Link
-        ref={(node) => updateTooltipPosition(node)}
+      <WithAutoTooltipPosition
+        as={Link}
         className="link link-info decoration-dotted tooltip tooltip-info"
         data-tip={`${pageEntry.index}. ${pageEntry.name}`}
         href={`/${lang}/${pageEntry.slug}`}
       >
         第{pageEntry.index}章
-      </Link>
+      </WithAutoTooltipPosition>
     );
 
     // ./1, ./1-foo, ./next, ./prev →同じ言語のドキュメントへのリンクで、「第n章」
@@ -147,13 +147,13 @@ export default function Term(props: JSX.IntrinsicElements["q"] & ExtraProps) {
 
     console.error(`'${termText}' という用語は定義されていません`);
     return (
-      <span
-        ref={(node) => updateTooltipPosition(node)}
+      <WithAutoTooltipPosition
+        as="span"
         className="link link-error decoration-dotted tooltip tooltip-error"
         data-tip={`'${termText}' という用語は定義されていません`}
       >
         {props.children}
-      </span>
+      </WithAutoTooltipPosition>
     );
   }
 

app/markdown/tooltipPosition.ts

@@ -0,0 +1,34 @@
+"use client";
+
+import { ComponentPropsWithoutRef, ElementType } from "react";
+
+/**
+ * レンダリングのたびに、この要素の左端と右端のスペースを計算し、画面内に収まるようtooltipを水平に平行移動する。
+ */
+function updateTooltipPosition(node: HTMLElement | null) {
+  if (node) {
+    const rect = node.getBoundingClientRect();
+    node.style.setProperty(
+      "--tt-trans",
+      `clamp(${-(rect.left + rect.width / 2)}px, -50%, calc(${document.body.clientWidth - rect.right + rect.width / 2}px - 100%))`
+    );
+  }
+}
+
+type Props<T extends ElementType> = { as: T } & Omit<
+  ComponentPropsWithoutRef<T>,
+  "as"
+>;
+export function WithAutoTooltipPosition<T extends ElementType = "div">({
+  as,
+  ...props
+}: Props<T>) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const Component = as as React.ElementType<any>;
+  return (
+    <Component
+      ref={(node: HTMLElement | null) => updateTooltipPosition(node)}
+      {...props}
+    />
+  );
+}

app/markdown/tooltipPosition.tsx

@@ -15,7 +15,7 @@ import { LangConstants } from "@my-code/runtime/languages";
 import { useRuntime } from "@my-code/runtime/context";
 import { captureException } from "@sentry/nextjs";
 import { MinMaxButton, Modal } from "./modal";
-import { updateTooltipPosition } from "@/markdown/tooltipPosition";
+import { WithAutoTooltipPosition } from "@/markdown/tooltipPosition";
 
 function handleRuntimeError(error: unknown) {
   captureException(error);
@@ -194,8 +194,8 @@ export function ExecFile(props: ExecProps) {
         <code className="text-left break-all text-sm my-1 ml-4">
           {getCommandlineStr?.(props.filenames)}
         </code>
-        <div
-          ref={(node) => updateTooltipPosition(node)}
+        <WithAutoTooltipPosition
+          as="div"
           className="ml-1 mr-1 tooltip tooltip-secondary tooltip-bottom z-1"
         >
           <div className="tooltip-content bg-secondary/60 backdrop-blur-xs">
@@ -226,7 +226,7 @@ export function ExecFile(props: ExecProps) {
         </div>
         <div className="flex-1" />
         <MinMaxButton open={isModal} id={`exec-${props.filenames.join("-")}`} />
-      </div>
+      </WithAutoTooltipPosition>
       <div className="flex-1 w-full overflow-hidden bg-base-300 p-4 pr-1 pt-2 relative rounded-b-box">
         {/*
       ターミナル表示の初期化が完了するまでの間、ターミナルは隠し、内容をそのまま表示する。

app/terminal/exec.tsx

@@ -26,7 +26,7 @@ import {
 import { useRuntime } from "@my-code/runtime/context";
 import { MinMaxButton, Modal } from "./modal";
 import { StopButtonContent } from "./exec";
-import { updateTooltipPosition } from "@/markdown/tooltipPosition";
+import { WithAutoTooltipPosition } from "@/markdown/tooltipPosition";
 
 function handleRuntimeError(error: unknown) {
   captureException(error);
@@ -499,8 +499,8 @@ export function ReplTerminal({
         <span className="text-sm my-1 ml-3 text-left">
           {runtimeInfo?.prettyLangName || language.runtime} 実行環境
         </span>
-        <div
-          ref={(node) => updateTooltipPosition(node)}
+        <WithAutoTooltipPosition
+          as="div"
           className="ml-1 tooltip tooltip-secondary tooltip-bottom z-1"
         >
           <div className="tooltip-content bg-secondary/60 backdrop-blur-xs">
@@ -532,7 +532,7 @@ export function ReplTerminal({
         </div>
         <div className="flex-1" />
         <MinMaxButton open={isModal} id={`repl-${terminalId}`} />
-      </div>
+      </WithAutoTooltipPosition>
       {/*
       ターミナル表示の初期化が完了するまでの間、ターミナルは隠し、内容をそのまま表示する。
       可能な限りレイアウトが崩れないようにするため & SSRでも内容が読めるように(SEO?)という意味もある