vitepress-twoslash on Firefox causes selecting and copying codeblocks to mangle text

[aragia]

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Describe the bug

Sorry, bit new here, so I have to do a lot of conjecture from what I'm seeing, I initially filed this under posva/pinia-colada#198 but got moved upstream, I think #822 is probably a similar issue (some bad handling of hover elements) so I'm piggybacking off that.

Copying the codeblock from https://stackblitz.com/edit/vite-vabfyv?file=package.json&terminal=docs:dev in Firefox 135 causes the text to be mangled like this:

import { defineConfig
, loadEnv
 } from 'vite'

export default defineConfig
(({ command
, mode
 }) => {
  // Load env file based on `mode` in the current working directory.
  // Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
  const env
 = loadEnv
(mode
, process
.cwd
(), '')
  return {
    // vite config
    define
: {
      __APP_ENV__
: JSON
.stringify
(env
.APP_ENV
),
    },
  }
})

However when copying from a codeblock without items to hover over like https://shiki.style/guide/shorthands#create-shorthands-with-fine-grained-bundles, the copied text is functional:

import { createdBundledHighlighter, createSingletonShorthands } from 'shiki/core'
import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'

const BundledLanguage = {
  typescript: () => import('@shikijs/langs/typescript'),
  javascript: () => import('@shikijs/langs/javascript'),
  vue: () => import('@shikijs/langs/vue'),
}

const BundledTheme = {
  'light-plus': () => import('@shikijs/themes/light-plus'),
  'dark-plus': () => import('@shikijs/themes/dark-plus'),
}

// This creates your custom 'createHighlighter' function with fine-grained bundles
export const createHighlighter = /* @__PURE__ */ createdBundledHighlighter<
  BundledLanguage,
  BundledTheme
>({
  langs: bundledLanguages,
  themes: bundledThemes,
  engine: () => createJavaScriptRegexEngine(),
})

// This creates the shorthands for you
export const {
  codeToHtml,
  codeToHast,
  codeToTokensBase,
  codeToTokens,
  codeToTokensWithThemes,
  getSingletonHighlighter,
  getLastGrammarState,
} = /* @__PURE__ */ createSingletonShorthands(
  createHighlighter,
)

I think there is some weirdness on how the hover elements are handled on Firefox compared to Chrome, because the copying is functional when using Chromium 133 :/

Reproduction

https://stackblitz.com/edit/vite-vabfyv?file=package.json&terminal=docs:dev

Contributes

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests

[hhk-png]

Firefox seems to add a line break to div by default when copying text, regardless of the div's CSS properties.

The solution to this problem is to convert the div to span, which can be done by using regular expression replacement after getting the results of shiki, or by replacing the div with span when organizing the output inside shiki.