feat(build/i18n): support customizing copy code button's tooltip text (…

…#3854)

Co-authored-by: Divyansh Singh <[email protected]>

src/node/markdown/markdown.ts

@@ -111,6 +111,11 @@ export interface MarkdownOptions extends Options {
  * Setup Shiki instance
  */
  shikiSetup?: (shiki: Highlighter) => void | Promise<void>
+ /**
+ * The tooltip text for the copy button in code blocks
+ * @default 'Copy Code'
+ */
+ codeCopyButtonTitle?: string
 
  /* ==================== Markdown It Plugins ==================== */
 
@@ -195,6 +200,7 @@ export const createMarkdownRenderer = async (
  logger: Pick<Logger, 'warn'> = console
 ): Promise<MarkdownRenderer> => {
  const theme = options.theme ?? { light: 'github-light', dark: 'github-dark' }
+ const codeCopyButtonTitle = options.codeCopyButtonTitle || 'Copy Code'
  const hasSingleTheme = typeof theme === 'string' || 'name' in theme
 
  const md = MarkdownIt({
@@ -214,7 +220,7 @@ export const createMarkdownRenderer = async (
  // custom plugins
  md.use(componentPlugin, { ...options.component })
  .use(highlightLinePlugin)
- .use(preWrapperPlugin, { hasSingleTheme })
+ .use(preWrapperPlugin, { codeCopyButtonTitle, hasSingleTheme })
  .use(snippetPlugin, srcDir)
  .use(containerPlugin, { hasSingleTheme }, options.container)
  .use(imagePlugin, options.image)
@@ -229,7 +235,7 @@ export const createMarkdownRenderer = async (
  md.use(gitHubAlertsPlugin)
  }
 
- // 3rd party plugins
+ // third party plugins
  if (!options.attrs?.disable) {
  md.use(attrsPlugin, options.attrs)
  }

src/node/markdown/plugins/preWrapper.ts

@@ -1,6 +1,7 @@
 import type MarkdownIt from 'markdown-it'
 
 export interface Options {
+ codeCopyButtonTitle: string
  hasSingleTheme: boolean
 }
 
@@ -17,10 +18,14 @@ export function preWrapperPlugin(md: MarkdownIt, options: Options) {
  token.info = token.info.replace(/ active$/, '').replace(/ active /, ' ')
 
  const lang = extractLang(token.info)
- const rawCode = fence(...args)
- return `<div class="language-${lang}${getAdaptiveThemeMarker(
- options
- )}${active}"><button title="Copy Code" class="copy"></button><span class="lang">${lang}</span>${rawCode}</div>`
+
+ return (
+ `<div class="language-${lang}${getAdaptiveThemeMarker(options)}${active}">` +
+ `<button title="${options.codeCopyButtonTitle}" class="copy"></button>` +
+ `<span class="lang">${lang}</span>` +
+ fence(...args) +
+ '</div>'
+ )
  }
 }