diff --git a/.changeset/five-keys-cheer.md b/.changeset/five-keys-cheer.md new file mode 100644 index 0000000..de5c0b7 --- /dev/null +++ b/.changeset/five-keys-cheer.md @@ -0,0 +1,5 @@ +--- +"expressive-code-twoslash": patch +--- + +Ensure Twoslash popup documentation uses the configured code font-family for inline code diff --git a/packages/twoslash/package.json b/packages/twoslash/package.json index 3d9f5b4..43389b1 100644 --- a/packages/twoslash/package.json +++ b/packages/twoslash/package.json @@ -31,9 +31,7 @@ "default": "./dist/index.js" }, "types": "./dist/index.d.ts", - "files": [ - "dist" - ], + "files": ["dist"], "scripts": { "build-js-module": "tsm --require=../../scripts/filter-warnings.cjs ./scripts/minify.ts", "compile": "tsup ./src/index.ts --format esm --dts --sourcemap --clean", diff --git a/packages/twoslash/src/annotations/completion.ts b/packages/twoslash/src/annotations/completion.ts index d8fd1dd..4314d77 100644 --- a/packages/twoslash/src/annotations/completion.ts +++ b/packages/twoslash/src/annotations/completion.ts @@ -1,7 +1,7 @@ import { + type AnnotationRenderOptions, ExpressiveCodeAnnotation, type ExpressiveCodeLine, - type AnnotationRenderOptions, } from "@expressive-code/core"; import { h } from "@expressive-code/core/hast"; import type { NodeCompletion } from "twoslash"; diff --git a/packages/twoslash/src/annotations/customTags.ts b/packages/twoslash/src/annotations/customTags.ts index 71d0025..0421e8e 100644 --- a/packages/twoslash/src/annotations/customTags.ts +++ b/packages/twoslash/src/annotations/customTags.ts @@ -1,13 +1,13 @@ import { + type AnnotationRenderOptions, ExpressiveCodeAnnotation, type ExpressiveCodeLine, - type AnnotationRenderOptions, } from "@expressive-code/core"; -import { h, type Element } from "@expressive-code/core/hast"; +import { type Element, h } from "@expressive-code/core/hast"; import type { NodeTag } from "twoslash"; -import { customTagsIcons } from "../icons/customTagsIcons"; import { getCustomTagClass, getCustomTagString } from "../helpers"; -import type { TwoslashTag, CustomTagsIcon } from "../types"; +import { customTagsIcons } from "../icons/customTagsIcons"; +import type { CustomTagsIcon, TwoslashTag } from "../types"; /** * Represents a custom annotation for Twoslash tags. diff --git a/packages/twoslash/src/annotations/highlight.ts b/packages/twoslash/src/annotations/highlight.ts index f44c573..0324729 100644 --- a/packages/twoslash/src/annotations/highlight.ts +++ b/packages/twoslash/src/annotations/highlight.ts @@ -2,7 +2,7 @@ import { type AnnotationRenderOptions, ExpressiveCodeAnnotation, } from "@expressive-code/core"; -import { type Root, type Element, h } from "@expressive-code/core/hast"; +import { type Element, type Root, h } from "@expressive-code/core/hast"; import type { NodeHighlight } from "twoslash"; /** diff --git a/packages/twoslash/src/annotations/hover.ts b/packages/twoslash/src/annotations/hover.ts index 31f149b..9e36caf 100644 --- a/packages/twoslash/src/annotations/hover.ts +++ b/packages/twoslash/src/annotations/hover.ts @@ -1,8 +1,8 @@ import { - ExpressiveCodeAnnotation, type AnnotationRenderOptions, + ExpressiveCodeAnnotation, } from "@expressive-code/core"; -import { h, type Root, type Element } from "@expressive-code/core/hast"; +import { type Element, type Root, h } from "@expressive-code/core/hast"; import type { NodeHover } from "twoslash"; import type { RenderJSDocs } from "../types"; diff --git a/packages/twoslash/src/helpers/processors.ts b/packages/twoslash/src/helpers/processors.ts index f2a78f9..bd7ccc5 100644 --- a/packages/twoslash/src/helpers/processors.ts +++ b/packages/twoslash/src/helpers/processors.ts @@ -1,7 +1,7 @@ import type { ExpressiveCodeBlock } from "expressive-code"; import type { NodeCompletion, TwoslashReturn } from "twoslash"; -import type { CompletionIcon, CompletionItem } from "../types"; import { completionIcons } from "../icons/completionIcons"; +import type { CompletionIcon, CompletionItem } from "../types"; /** * Splits the given code string into an array of objects, each containing the line index and the line content. diff --git a/packages/twoslash/src/helpers/rendering.ts b/packages/twoslash/src/helpers/rendering.ts index c2e298c..e373efd 100644 --- a/packages/twoslash/src/helpers/rendering.ts +++ b/packages/twoslash/src/helpers/rendering.ts @@ -1,5 +1,10 @@ +import { type Element, h } from "@expressive-code/core/hast"; import type { ExpressiveCode } from "expressive-code"; import { fromMarkdown } from "mdast-util-from-markdown"; +import { gfmFromMarkdown } from "mdast-util-gfm"; +import { toHast } from "mdast-util-to-hast"; +import type { NodeHover, NodeQuery } from "twoslash"; +import type { RenderJSDocs } from "../types"; import { jsdocTags, reFunctionCleanup, @@ -10,11 +15,6 @@ import { reLeadingPropertyMethod, reTypeCleanup, } from "./regex"; -import { gfmFromMarkdown } from "mdast-util-gfm"; -import { toHast } from "mdast-util-to-hast"; -import { h, type Element } from "@expressive-code/core/hast"; -import type { NodeHover, NodeQuery } from "twoslash"; -import type { RenderJSDocs } from "../types"; /** * Renders markdown content with code blocks using ExpressiveCode. diff --git a/packages/twoslash/src/helpers/utils.ts b/packages/twoslash/src/helpers/utils.ts index c3c7477..7ff0666 100644 --- a/packages/twoslash/src/helpers/utils.ts +++ b/packages/twoslash/src/helpers/utils.ts @@ -1,6 +1,6 @@ import type { ExpressiveCodeBlock } from "@expressive-code/core"; -import { reTrigger, twoslashDefaultTags } from "./regex"; import type { TwoslashOptions } from "twoslash"; +import { reTrigger, twoslashDefaultTags } from "./regex"; /** * Calculates the width of a given text in pixels based on the character location, font size, and character width. diff --git a/packages/twoslash/src/index.ts b/packages/twoslash/src/index.ts index c4d6284..8b3e3b6 100644 --- a/packages/twoslash/src/index.ts +++ b/packages/twoslash/src/index.ts @@ -1,33 +1,33 @@ import { type ExpressiveCodePlugin, definePlugin } from "@expressive-code/core"; +import { ExpressiveCode } from "expressive-code"; import { createTwoslasher } from "twoslash"; +import ts, { type CompilerOptions } from "typescript"; +import { + TwoslashCompletionAnnotation, + TwoslashCustomTagsAnnotation, + TwoslashErrorBoxAnnotation, + TwoslashErrorUnderlineAnnotation, + TwoslashHighlightAnnotation, + TwoslashHoverAnnotation, + TwoslashStaticAnnotation, +} from "./annotations"; import { + TwoslashIncludesManager, buildMetaChecker, checkForCustomTagsAndMerge, - processCompletion, compareNodes, ecConfig, - renderType, - renderJSDocs, - processTwoslashCodeBlock, parseIncludeMeta, - TwoslashIncludesManager, + processCompletion, + processTwoslashCodeBlock, + renderJSDocs, + renderType, } from "./helpers"; import floatingUiCore from "./module-code/floating-ui-core.min"; import floatingUiDom from "./module-code/floating-ui-dom.min"; import hoverDocsManager from "./module-code/popup.min"; import { getTwoSlashBaseStyles, twoSlashStyleSettings } from "./styles"; import type { PluginTwoslashOptions, TwoSlashStyleSettings } from "./types"; -import ts, { type CompilerOptions } from "typescript"; -import { - TwoslashCompletionAnnotation, - TwoslashCustomTagsAnnotation, - TwoslashErrorBoxAnnotation, - TwoslashErrorUnderlineAnnotation, - TwoslashHighlightAnnotation, - TwoslashHoverAnnotation, - TwoslashStaticAnnotation, -} from "./annotations"; -import { ExpressiveCode } from "expressive-code"; export type { PluginTwoslashOptions, TwoSlashStyleSettings }; diff --git a/packages/twoslash/src/module-code/popup.min.js b/packages/twoslash/src/module-code/popup.min.js index 4674514..fe14867 100644 --- a/packages/twoslash/src/module-code/popup.min.js +++ b/packages/twoslash/src/module-code/popup.min.js @@ -5,4 +5,4 @@ To change it, modify the source file and then re-run the build script. */ -export default 'function setupTooltip(e,o){let s=e.querySelector(".twoslash-popup-container"),t=s.closest(".expressive-code"),i="twoslash_popup_"+[Math.random(),Date.now()].map(e=>e.toString(36).substring(2,10)).join("_");s.setAttribute("role","tooltip"),s.setAttribute("tabindex","-1"),s?.parentNode&&s.parentNode.removeChild(s);let a=!1,r;function n(){clearTimeout(r),t.appendChild(s),new Promise(e=>requestAnimationFrame(()=>{requestAnimationFrame(e)})).then(()=>FloatingUIDOM.computePosition(e,s,{placement:o?"bottom":"bottom-start",middleware:[FloatingUIDOM.size({apply({availableWidth:e}){Object.assign(s.style,{maxWidth:Math.max(300,e)+"px",maxHeight:"100%"})}})]})).then(({x:e,y:t})=>{Object.assign(s.style,{display:"block",left:`${o?20:e}px`,top:t+"px"})}),s.setAttribute("aria-hidden","false"),e.querySelector(".twoslash-hover span")?.setAttribute("aria-describedby",i),s.setAttribute("id",i)}function d(){s.setAttribute("aria-hidden","true"),e.querySelector(".twoslash-hover span")?.removeAttribute("aria-describedby"),s.removeAttribute("id"),s.style.display="none"}e.addEventListener("mouseenter",n),e.addEventListener("mouseleave",()=>{r=setTimeout(()=>{a||d()},100)}),s.addEventListener("mouseenter",()=>{clearTimeout(r),a=!0}),s.addEventListener("mouseleave",()=>{a=!1,r=setTimeout(()=>{e.matches(":hover")||d()},100)}),e.addEventListener("focus",n),e.addEventListener("blur",d),d()}let isMobileScreen=window.matchMedia("(max-width: 500px)").matches;function initTwoslashPopups(e){e.querySelectorAll?.(".twoslash-hover").forEach(e=>{setupTooltip(e,isMobileScreen)})}initTwoslashPopups(document);let newTwoslashPopupObserver=new MutationObserver(e=>e.forEach(e=>e.addedNodes.forEach(e=>{initTwoslashPopups(e)})));newTwoslashPopupObserver.observe(document.body,{childList:!0,subtree:!0}),document.addEventListener("astro:page-load",()=>{initTwoslashPopups(document.body)});'; \ No newline at end of file +export default 'function setupTooltip(e,o){let s=e.querySelector(".twoslash-popup-container"),t=s.closest(".expressive-code"),i="twoslash_popup_"+[Math.random(),Date.now()].map(e=>e.toString(36).substring(2,10)).join("_");s.setAttribute("role","tooltip"),s.setAttribute("tabindex","-1"),s?.parentNode&&s.parentNode.removeChild(s);let a=!1,r;function n(){clearTimeout(r),t.appendChild(s),new Promise(e=>requestAnimationFrame(()=>{requestAnimationFrame(e)})).then(()=>FloatingUIDOM.computePosition(e,s,{placement:o?"bottom":"bottom-start",middleware:[FloatingUIDOM.size({apply({availableWidth:e}){Object.assign(s.style,{maxWidth:Math.max(300,e)+"px",maxHeight:"100%"})}})]})).then(({x:e,y:t})=>{Object.assign(s.style,{display:"block",left:`${o?20:e}px`,top:t+"px"})}),s.setAttribute("aria-hidden","false"),e.querySelector(".twoslash-hover span")?.setAttribute("aria-describedby",i),s.setAttribute("id",i)}function d(){s.setAttribute("aria-hidden","true"),e.querySelector(".twoslash-hover span")?.removeAttribute("aria-describedby"),s.removeAttribute("id"),s.style.display="none"}e.addEventListener("mouseenter",n),e.addEventListener("mouseleave",()=>{r=setTimeout(()=>{a||d()},100)}),s.addEventListener("mouseenter",()=>{clearTimeout(r),a=!0}),s.addEventListener("mouseleave",()=>{a=!1,r=setTimeout(()=>{e.matches(":hover")||d()},100)}),e.addEventListener("focus",n),e.addEventListener("blur",d),d()}let isMobileScreen=window.matchMedia("(max-width: 500px)").matches;function initTwoslashPopups(e){e.querySelectorAll?.(".twoslash-hover").forEach(e=>{setupTooltip(e,isMobileScreen)})}initTwoslashPopups(document);let newTwoslashPopupObserver=new MutationObserver(e=>e.forEach(e=>e.addedNodes.forEach(e=>{initTwoslashPopups(e)})));newTwoslashPopupObserver.observe(document.body,{childList:!0,subtree:!0}),document.addEventListener("astro:page-load",()=>{initTwoslashPopups(document.body)});'; diff --git a/packages/twoslash/src/styles.ts b/packages/twoslash/src/styles.ts index 8ee757c..bc63af4 100644 --- a/packages/twoslash/src/styles.ts +++ b/packages/twoslash/src/styles.ts @@ -1,8 +1,8 @@ import { - lighten, PluginStyleSettings, type ResolverContext, type StyleResolverFn, + lighten, toHexColor, } from "@expressive-code/core"; import type { TwoSlashStyleSettings } from "./types"; @@ -348,6 +348,11 @@ export function getTwoSlashBaseStyles({ cssVar }: ResolverContext): string { text-wrap: balance; } + .twoslash-popup-docs code { + font-family: ${cssVar("codeFontFamily")}; + font-weight: ${cssVar("codeFontWeight")}; + } + .twoslash-popup-docs-tagline { display: flex; text-wrap-style: stable;