From 4e4aa6add74f91d111d825ce213696368dabeae3 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Fri, 22 Apr 2022 15:50:27 +0300 Subject: [PATCH] feat(theme-classic): toggle code wrap button (#7036) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Sébastien Lorber Co-authored-by: sebastienlorber --- .../src/theme-classic.d.ts | 11 ++++ .../src/theme/CodeBlock/Content/String.tsx | 15 ++++- .../theme/CodeBlock/Content/styles.module.css | 30 ++++++++++ .../src/theme/CodeBlock/CopyButton/index.tsx | 5 +- .../CodeBlock/CopyButton/styles.module.css | 21 ------- .../theme/CodeBlock/WordWrapButton/index.tsx | 49 ++++++++++++++++ .../WordWrapButton/styles.module.css | 15 +++++ .../src/hooks/useCodeWordWrap.ts | 56 +++++++++++++++++++ packages/docusaurus-theme-common/src/index.ts | 1 + .../locales/ar/theme-common.json | 1 + .../locales/base/theme-common.json | 2 + .../locales/bn/theme-common.json | 1 + .../locales/cs/theme-common.json | 1 + .../locales/da/theme-common.json | 1 + .../locales/de/theme-common.json | 1 + .../locales/es/theme-common.json | 1 + .../locales/fa/theme-common.json | 1 + .../locales/fil/theme-common.json | 1 + .../locales/fr/theme-common.json | 1 + .../locales/he/theme-common.json | 1 + .../locales/hi/theme-common.json | 1 + .../locales/it/theme-common.json | 1 + .../locales/ja/theme-common.json | 1 + .../locales/ko/theme-common.json | 1 + .../locales/pl/theme-common.json | 1 + .../locales/pt-BR/theme-common.json | 1 + .../locales/pt-PT/theme-common.json | 1 + .../locales/ru/theme-common.json | 1 + .../locales/sr/theme-common.json | 1 + .../locales/tr/theme-common.json | 1 + .../locales/vi/theme-common.json | 1 + .../locales/zh-Hans/theme-common.json | 1 + .../locales/zh-Hant/theme-common.json | 1 + 33 files changed, 204 insertions(+), 24 deletions(-) create mode 100644 packages/docusaurus-theme-classic/src/theme/CodeBlock/WordWrapButton/index.tsx create mode 100644 packages/docusaurus-theme-classic/src/theme/CodeBlock/WordWrapButton/styles.module.css create mode 100644 packages/docusaurus-theme-common/src/hooks/useCodeWordWrap.ts diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts index a3388507acc3..eec106ba5e1b 100644 --- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts +++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts @@ -165,6 +165,7 @@ declare module '@theme/CodeBlock' { declare module '@theme/CodeBlock/CopyButton' { export interface Props { readonly code: string; + readonly className?: string; } export default function CopyButton(props: Props): JSX.Element; @@ -220,6 +221,16 @@ declare module '@theme/CodeBlock/Line' { export default function CodeBlockLine(props: Props): JSX.Element; } +declare module '@theme/CodeBlock/WordWrapButton' { + export interface Props { + readonly className?: string; + readonly onClick: React.MouseEventHandler; + readonly isEnabled: boolean; + } + + export default function WordWrapButton(props: Props): JSX.Element; +} + declare module '@theme/DocCard' { import type {PropSidebarItem} from '@docusaurus/plugin-content-docs'; diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/String.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/String.tsx index d4e59b1718c5..495b9cbbaa7d 100644 --- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/String.tsx +++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/String.tsx @@ -13,11 +13,13 @@ import { parseLines, containsLineNumbers, usePrismTheme, + useCodeWordWrap, } from '@docusaurus/theme-common'; import clsx from 'clsx'; import Highlight, {defaultProps, type Language} from 'prism-react-renderer'; import Line from '@theme/CodeBlock/Line'; import CopyButton from '@theme/CodeBlock/CopyButton'; +import WordWrapButton from '@theme/CodeBlock/WordWrapButton'; import Container from '@theme/CodeBlock/Container'; import type {Props} from '@theme/CodeBlock/Content/String'; @@ -37,6 +39,7 @@ export default function CodeBlockString({ const language = languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage; const prismTheme = usePrismTheme(); + const wordWrap = useCodeWordWrap(); // We still parse the metastring in case we want to support more syntax in the // future. Note that MDX doesn't strip quotes when parsing metastring: @@ -67,6 +70,7 @@ export default function CodeBlockString({ 
               
           )}
         
-        
+        

+          {(wordWrap.isEnabled || wordWrap.isCodeScrollable) && (
+             wordWrap.toggle()}
+              isEnabled={wordWrap.isEnabled}
+            />
+          )}
+          
+        

       
     
   );
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/styles.module.css b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/styles.module.css
index 6f043e05c4da..88ba4a7f9a59 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/styles.module.css
@@ -54,3 +54,33 @@
     white-space: pre-wrap;
   }
 }
+
+.buttonGroup {
+  display: flex;
+  column-gap: 0.2rem;
+  position: absolute;
+  right: calc(var(--ifm-pre-padding) / 2);
+  top: calc(var(--ifm-pre-padding) / 2);
+}
+
+.buttonGroup button {
+  display: flex;
+  align-items: center;
+  background: var(--prism-background-color);
+  color: var(--prism-color);
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: var(--ifm-global-radius);
+  padding: 0.4rem;
+  line-height: 0;
+  transition: opacity 200ms ease-in-out;
+  opacity: 0;
+}
+
+.buttonGroup button:focus-visible,
+.buttonGroup button:hover {
+  opacity: 1 !important;
+}
+
+:global(.theme-code-block:hover) .buttonGroup button {
+  opacity: 0.4;
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/CopyButton/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/CopyButton/index.tsx
index cedc4834d14a..fb070a58e1ae 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/CopyButton/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/CopyButton/index.tsx
@@ -13,7 +13,7 @@ import type {Props} from '@theme/CodeBlock/CopyButton';
 
 import styles from './styles.module.css';
 
-export default function CopyButton({code}: Props): JSX.Element {
+export default function CopyButton({code, className}: Props): JSX.Element {
   const [isCopied, setIsCopied] = useState(false);
   const copyTimeout = useRef(undefined);
   const handleCopyCode = useCallback(() => {
@@ -48,8 +48,9 @@ export default function CopyButton({code}: Props): JSX.Element {
         description: 'The copy button label on code blocks',
       })}
       className={clsx(
-        styles.copyButton,
         'clean-btn',
+        className,
+        styles.copyButton,
         isCopied && styles.copyButtonCopied,
       )}
       onClick={handleCopyCode}>
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/CopyButton/styles.module.css b/packages/docusaurus-theme-classic/src/theme/CodeBlock/CopyButton/styles.module.css
index 8333e37d1661..776c1960b58f 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/CopyButton/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/CopyButton/styles.module.css
@@ -5,31 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.copyButton {
-  display: flex;
-  /* TODO: move to base button styling */
-  background: var(--prism-background-color);
-  color: var(--prism-color);
-  border: 1px solid var(--ifm-color-emphasis-300);
-  border-radius: var(--ifm-global-radius);
-  padding: 0.4rem;
-  position: absolute;
-  right: calc(var(--ifm-pre-padding) / 2);
-  top: calc(var(--ifm-pre-padding) / 2);
-  transition: opacity 200ms ease-in-out;
-  opacity: 0;
-}
-
-.copyButton:focus-visible,
-.copyButton:hover,
 :global(.theme-code-block:hover) .copyButtonCopied {
   opacity: 1 !important;
 }
 
-:global(.theme-code-block:hover) .copyButton:not(.copyButtonCopied) {
-  opacity: 0.4;
-}
-
 .copyButtonIcons {
   position: relative;
   width: 1.125rem;
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/WordWrapButton/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/WordWrapButton/index.tsx
new file mode 100644
index 000000000000..9b08e4432538
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/WordWrapButton/index.tsx
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import clsx from 'clsx';
+import {translate} from '@docusaurus/Translate';
+import type {Props} from '@theme/CodeBlock/WordWrapButton';
+
+import styles from './styles.module.css';
+
+export default function WordWrapButton({
+  className,
+  onClick,
+  isEnabled,
+}: Props): JSX.Element | null {
+  const title = translate({
+    id: 'theme.CodeBlock.wordWrapToggle',
+    message: 'Toggle word wrap',
+    description:
+      'The title attribute for toggle word wrapping button of code block lines',
+  });
+
+  return (
+    
+  );
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/WordWrapButton/styles.module.css b/packages/docusaurus-theme-classic/src/theme/CodeBlock/WordWrapButton/styles.module.css
new file mode 100644
index 000000000000..c11670c39be9
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/WordWrapButton/styles.module.css
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.wordWrapButtonIcon {
+  width: 1.2rem;
+  height: 1.2rem;
+}
+
+.wordWrapButtonEnabled .wordWrapButtonIcon {
+  color: var(--ifm-color-primary);
+}
diff --git a/packages/docusaurus-theme-common/src/hooks/useCodeWordWrap.ts b/packages/docusaurus-theme-common/src/hooks/useCodeWordWrap.ts
new file mode 100644
index 000000000000..2bffde55c4cf
--- /dev/null
+++ b/packages/docusaurus-theme-common/src/hooks/useCodeWordWrap.ts
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type {RefObject} from 'react';
+import {useState, useCallback, useEffect, useRef} from 'react';
+
+export function useCodeWordWrap(): {
+  readonly codeBlockRef: RefObject;
+  readonly isEnabled: boolean;
+  readonly isCodeScrollable: boolean;
+  readonly toggle: () => void;
+} {
+  const [isEnabled, setIsEnabled] = useState(false);
+  const [isCodeScrollable, setIsCodeScrollable] = useState(false);
+  const codeBlockRef = useRef(null);
+
+  const toggle = useCallback(() => {
+    const codeElement = codeBlockRef.current!.querySelector('code')!;
+
+    if (isEnabled) {
+      codeElement.removeAttribute('style');
+    } else {
+      codeElement.style.whiteSpace = 'pre-wrap';
+    }
+
+    setIsEnabled((value) => !value);
+  }, [codeBlockRef, isEnabled]);
+
+  const updateCodeIsScrollable = useCallback(() => {
+    const {scrollWidth, clientWidth} = codeBlockRef.current!;
+    const isScrollable =
+      scrollWidth > clientWidth ||
+      codeBlockRef.current!.querySelector('code')!.hasAttribute('style');
+    setIsCodeScrollable(isScrollable);
+  }, [codeBlockRef]);
+
+  useEffect(() => {
+    updateCodeIsScrollable();
+  }, [isEnabled, updateCodeIsScrollable]);
+
+  useEffect(() => {
+    window.addEventListener('resize', updateCodeIsScrollable, {
+      passive: true,
+    });
+
+    return () => {
+      window.removeEventListener('resize', updateCodeIsScrollable);
+    };
+  }, [updateCodeIsScrollable]);
+
+  return {codeBlockRef, isEnabled, isCodeScrollable, toggle};
+}
diff --git a/packages/docusaurus-theme-common/src/index.ts b/packages/docusaurus-theme-common/src/index.ts
index 9e330a768320..4ee294d41cac 100644
--- a/packages/docusaurus-theme-common/src/index.ts
+++ b/packages/docusaurus-theme-common/src/index.ts
@@ -158,3 +158,4 @@ export {usePrismTheme} from './hooks/usePrismTheme';
 export {useLockBodyScroll} from './hooks/useLockBodyScroll';
 export {useWindowSize} from './hooks/useWindowSize';
 export {useSearchPage} from './hooks/useSearchPage';
+export {useCodeWordWrap} from './hooks/useCodeWordWrap';
diff --git a/packages/docusaurus-theme-translations/locales/ar/theme-common.json b/packages/docusaurus-theme-translations/locales/ar/theme-common.json
index 24e99fddfe40..733339b593f7 100644
--- a/packages/docusaurus-theme-translations/locales/ar/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/ar/theme-common.json
@@ -4,6 +4,7 @@
   "theme.CodeBlock.copied": "تم النسخ",
   "theme.CodeBlock.copy": "نسخ",
   "theme.CodeBlock.copyButtonAriaLabel": "نسخ الرمز إلى الحافظة",
+  "theme.CodeBlock.wordWrapToggle": "Toggle word wrap",
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": "Toggle the collapsible sidebar category '{label}'",
   "theme.ErrorPageContent.title": "This page crashed.",
   "theme.ErrorPageContent.tryAgain": "Try again",
diff --git a/packages/docusaurus-theme-translations/locales/base/theme-common.json b/packages/docusaurus-theme-translations/locales/base/theme-common.json
index fb5f46320e19..c0add97b3d82 100644
--- a/packages/docusaurus-theme-translations/locales/base/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/base/theme-common.json
@@ -9,6 +9,8 @@
   "theme.CodeBlock.copy___DESCRIPTION": "The copy button label on code blocks",
   "theme.CodeBlock.copyButtonAriaLabel": "Copy code to clipboard",
   "theme.CodeBlock.copyButtonAriaLabel___DESCRIPTION": "The ARIA label for copy code blocks button",
+  "theme.CodeBlock.wordWrapToggle": "Toggle word wrap",
+  "theme.CodeBlock.wordWrapToggle___DESCRIPTION": "The title attribute for toggle word wrapping button of code block lines",
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": "Toggle the collapsible sidebar category '{label}'",
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel___DESCRIPTION": "The ARIA label to toggle the collapsible sidebar category",
   "theme.ErrorPageContent.title": "This page crashed.",
diff --git a/packages/docusaurus-theme-translations/locales/bn/theme-common.json b/packages/docusaurus-theme-translations/locales/bn/theme-common.json
index a05c817a21c4..ab6622015aea 100644
--- a/packages/docusaurus-theme-translations/locales/bn/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/bn/theme-common.json
@@ -4,6 +4,7 @@
   "theme.CodeBlock.copied": "কপিড",
   "theme.CodeBlock.copy": "কপি",
   "theme.CodeBlock.copyButtonAriaLabel": "ক্লিপবোর্ডে কোড কপি করুন",
+  "theme.CodeBlock.wordWrapToggle": "Toggle word wrap",
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": "Toggle the collapsible sidebar category '{label}'",
   "theme.ErrorPageContent.title": "This page crashed.",
   "theme.ErrorPageContent.tryAgain": "Try again",
diff --git a/packages/docusaurus-theme-translations/locales/cs/theme-common.json b/packages/docusaurus-theme-translations/locales/cs/theme-common.json
index e0245b23ad23..c96d713105b7 100644
--- a/packages/docusaurus-theme-translations/locales/cs/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/cs/theme-common.json
@@ -4,6 +4,7 @@
   "theme.CodeBlock.copied": "Zkopírováno",
   "theme.CodeBlock.copy": "Zkopírovat",
   "theme.CodeBlock.copyButtonAriaLabel": "Zkopírovat kód do schránky",
+  "theme.CodeBlock.wordWrapToggle": "Toggle word wrap",
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": "Toggle the collapsible sidebar category '{label}'",
   "theme.ErrorPageContent.title": "This page crashed.",
   "theme.ErrorPageContent.tryAgain": "Try again",
diff --git a/packages/docusaurus-theme-translations/locales/da/theme-common.json b/packages/docusaurus-theme-translations/locales/da/theme-common.json
index 0591720ce6c9..68883d12e37a 100644
--- a/packages/docusaurus-theme-translations/locales/da/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/da/theme-common.json
@@ -4,6 +4,7 @@
   "theme.CodeBlock.copied": "Kopieret",
   "theme.CodeBlock.copy": "Kopier",
   "theme.CodeBlock.copyButtonAriaLabel": "Kopier kode til udklipsholder",
+  "theme.CodeBlock.wordWrapToggle": "Toggle word wrap",
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": "Toggle the collapsible sidebar category '{label}'",
   "theme.ErrorPageContent.title": "This page crashed.",
   "theme.ErrorPageContent.tryAgain": "Try again",
diff --git a/packages/docusaurus-theme-translations/locales/de/theme-common.json b/packages/docusaurus-theme-translations/locales/de/theme-common.json
index 54c567dedeec..a9d9dedff0f4 100644
--- a/packages/docusaurus-theme-translations/locales/de/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/de/theme-common.json
@@ -4,6 +4,7 @@
   "theme.CodeBlock.copied": "Kopiert",
   "theme.CodeBlock.copy": "Kopieren",
   "theme.CodeBlock.copyButtonAriaLabel": "In die Zwischenablage kopieren",
+  "theme.CodeBlock.wordWrapToggle": "Toggle word wrap",
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": "Umschalten der Seitenleiste mit einklappbarer Kategorie '{label}'",
   "theme.ErrorPageContent.title": "Die Seite ist abgestürzt.",
   "theme.ErrorPageContent.tryAgain": "Nochmal versuchen",
diff --git a/packages/docusaurus-theme-translations/locales/es/theme-common.json b/packages/docusaurus-theme-translations/locales/es/theme-common.json
index fbf476146716..84f444862ac9 100644
--- a/packages/docusaurus-theme-translations/locales/es/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/es/theme-common.json
@@ -4,6 +4,7 @@
   "theme.CodeBlock.copied": "Copiado",
   "theme.CodeBlock.copy": "Copiar",
   "theme.CodeBlock.copyButtonAriaLabel": "Copiar código al portapapeles",
+  "theme.CodeBlock.wordWrapToggle": "Toggle word wrap",
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": "Toggle the collapsible sidebar category '{label}'",
   "theme.ErrorPageContent.title": "This page crashed.",
   "theme.ErrorPageContent.tryAgain": "Try again",
diff --git a/packages/docusaurus-theme-translations/locales/fa/theme-common.json b/packages/docusaurus-theme-translations/locales/fa/theme-common.json
index 1ba33a3417ca..3a0824e8edad 100644
--- a/packages/docusaurus-theme-translations/locales/fa/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/fa/theme-common.json
@@ -4,6 +4,7 @@
   "theme.CodeBlock.copied": "کپی شد",
   "theme.CodeBlock.copy": "کپی",
   "theme.CodeBlock.copyButtonAriaLabel": "کپی به کلیپ بورد",
+  "theme.CodeBlock.wordWrapToggle": "Toggle word wrap",
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": "Toggle the collapsible sidebar category '{label}'",
   "theme.ErrorPageContent.title": "This page crashed.",
   "theme.ErrorPageContent.tryAgain": "Try again",
diff --git a/packages/docusaurus-theme-translations/locales/fil/theme-common.json b/packages/docusaurus-theme-translations/locales/fil/theme-common.json
index af8d60182d8b..96f6d54218e8 100644
--- a/packages/docusaurus-theme-translations/locales/fil/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/fil/theme-common.json
@@ -4,6 +4,7 @@
   "theme.CodeBlock.copied": "Kinopya",
   "theme.CodeBlock.copy": "Kopyahin",
   "theme.CodeBlock.copyButtonAriaLabel": "Kopyahin ang code sa clipboard",
+  "theme.CodeBlock.wordWrapToggle": "Toggle word wrap",
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": "Toggle the collapsible sidebar category '{label}'",
   "theme.ErrorPageContent.title": "This page crashed.",
   "theme.ErrorPageContent.tryAgain": "Try again",
diff --git a/packages/docusaurus-theme-translations/locales/fr/theme-common.json b/packages/docusaurus-theme-translations/locales/fr/theme-common.json
index efaa07c61103..6e710a2f0263 100644
--- a/packages/docusaurus-theme-translations/locales/fr/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/fr/theme-common.json
@@ -4,6 +4,7 @@
   "theme.CodeBlock.copied": "Copié",
   "theme.CodeBlock.copy": "Copier",
   "theme.CodeBlock.copyButtonAriaLabel": "Copier le code",
+  "theme.CodeBlock.wordWrapToggle": "Basculer le retour à la ligne",
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": "Toggle the collapsible sidebar category '{label}'",
   "theme.ErrorPageContent.title": "Cette page a planté.",
   "theme.ErrorPageContent.tryAgain": "Réessayer",
diff --git a/packages/docusaurus-theme-translations/locales/he/theme-common.json b/packages/docusaurus-theme-translations/locales/he/theme-common.json
index fab29a6c24bf..31583e4b6be6 100644
--- a/packages/docusaurus-theme-translations/locales/he/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/he/theme-common.json
@@ -4,6 +4,7 @@
   "theme.CodeBlock.copied": "הועתק",
   "theme.CodeBlock.copy": "העתק",
   "theme.CodeBlock.copyButtonAriaLabel": "העתק קוד ללוח העריכה",
+  "theme.CodeBlock.wordWrapToggle": "Toggle word wrap",
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": "Toggle the collapsible sidebar category '{label}'",
   "theme.ErrorPageContent.title": "This page crashed.",
   "theme.ErrorPageContent.tryAgain": "Try again",
diff --git a/packages/docusaurus-theme-translations/locales/hi/theme-common.json b/packages/docusaurus-theme-translations/locales/hi/theme-common.json
index 1850be82282f..e7414351fffe 100644
--- a/packages/docusaurus-theme-translations/locales/hi/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/hi/theme-common.json
@@ -4,6 +4,7 @@
   "theme.CodeBlock.copied": "कॉपीड",
   "theme.CodeBlock.copy": "कॉपी",
   "theme.CodeBlock.copyButtonAriaLabel": "क्लिपबोर्ड पर कोड कॉपी करें",
+  "theme.CodeBlock.wordWrapToggle": "Toggle word wrap",
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": "Toggle the collapsible sidebar category '{label}'",
   "theme.ErrorPageContent.title": "This page crashed.",
   "theme.ErrorPageContent.tryAgain": "Try again",
diff --git a/packages/docusaurus-theme-translations/locales/it/theme-common.json b/packages/docusaurus-theme-translations/locales/it/theme-common.json
index feed8869eb80..c64d605af488 100644
--- a/packages/docusaurus-theme-translations/locales/it/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/it/theme-common.json
@@ -4,6 +4,7 @@
   "theme.CodeBlock.copied": "Copiato",
   "theme.CodeBlock.copy": "Copia",
   "theme.CodeBlock.copyButtonAriaLabel": "Copia il codice negli appunti",
+  "theme.CodeBlock.wordWrapToggle": "Toggle word wrap",
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": "Attiva/disattiva la categoria '{label}' della barra laterale collassabile",
   "theme.ErrorPageContent.title": "Questa pagina è andata in crash.",
   "theme.ErrorPageContent.tryAgain": "Prova di nuovo",
diff --git a/packages/docusaurus-theme-translations/locales/ja/theme-common.json b/packages/docusaurus-theme-translations/locales/ja/theme-common.json
index 926428492064..1df195ae8098 100644
--- a/packages/docusaurus-theme-translations/locales/ja/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/ja/theme-common.json
@@ -4,6 +4,7 @@
   "theme.CodeBlock.copied": "コピーしました",
   "theme.CodeBlock.copy": "コピー",
   "theme.CodeBlock.copyButtonAriaLabel": "クリップボードにコードをコピー",
+  "theme.CodeBlock.wordWrapToggle": "Toggle word wrap",
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": "Toggle the collapsible sidebar category '{label}'",
   "theme.ErrorPageContent.title": "This page crashed.",
   "theme.ErrorPageContent.tryAgain": "Try again",
diff --git a/packages/docusaurus-theme-translations/locales/ko/theme-common.json b/packages/docusaurus-theme-translations/locales/ko/theme-common.json
index 688c695499d3..d9f88a2c67f8 100644
--- a/packages/docusaurus-theme-translations/locales/ko/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/ko/theme-common.json
@@ -4,6 +4,7 @@
   "theme.CodeBlock.copied": "복사했습니다",
   "theme.CodeBlock.copy": "복사",
   "theme.CodeBlock.copyButtonAriaLabel": "클립보드에 코드 복사",
+  "theme.CodeBlock.wordWrapToggle": "Toggle word wrap",
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": "접을 수 있는 사이드바 분류 '{label}' 접기(펼치기)",
   "theme.ErrorPageContent.title": "페이지에 오류가 발생하였습니다.",
   "theme.ErrorPageContent.tryAgain": "다시 시도해 보세요",
diff --git a/packages/docusaurus-theme-translations/locales/pl/theme-common.json b/packages/docusaurus-theme-translations/locales/pl/theme-common.json
index c161cad04343..2614e49d1e5e 100644
--- a/packages/docusaurus-theme-translations/locales/pl/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/pl/theme-common.json
@@ -4,6 +4,7 @@
   "theme.CodeBlock.copied": "Skopiowano!",
   "theme.CodeBlock.copy": "Kopiuj",
   "theme.CodeBlock.copyButtonAriaLabel": "Kopiuj do schowka",
+  "theme.CodeBlock.wordWrapToggle": "Toggle word wrap",
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": "Przełącz zwijalną kategorię panelu bocznego '{label}'",
   "theme.ErrorPageContent.title": "Ta strona uległa awarii.",
   "theme.ErrorPageContent.tryAgain": "Spróbuj ponownie",
diff --git a/packages/docusaurus-theme-translations/locales/pt-BR/theme-common.json b/packages/docusaurus-theme-translations/locales/pt-BR/theme-common.json
index 31a708844d37..2eb57260924b 100644
--- a/packages/docusaurus-theme-translations/locales/pt-BR/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/pt-BR/theme-common.json
@@ -4,6 +4,7 @@
   "theme.CodeBlock.copied": "Copiado",
   "theme.CodeBlock.copy": "Copiar",
   "theme.CodeBlock.copyButtonAriaLabel": "Copiar código para a área de transferência",
+  "theme.CodeBlock.wordWrapToggle": "Toggle word wrap",
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": "Toggle the collapsible sidebar category '{label}'",
   "theme.ErrorPageContent.title": "This page crashed.",
   "theme.ErrorPageContent.tryAgain": "Try again",
diff --git a/packages/docusaurus-theme-translations/locales/pt-PT/theme-common.json b/packages/docusaurus-theme-translations/locales/pt-PT/theme-common.json
index 349ce35e090b..efebca3723cf 100644
--- a/packages/docusaurus-theme-translations/locales/pt-PT/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/pt-PT/theme-common.json
@@ -4,6 +4,7 @@
   "theme.CodeBlock.copied": "Copiado",
   "theme.CodeBlock.copy": "Copiar",
   "theme.CodeBlock.copyButtonAriaLabel": "Copiar código para a área de transferência",
+  "theme.CodeBlock.wordWrapToggle": "Toggle word wrap",
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": "Toggle the collapsible sidebar category '{label}'",
   "theme.ErrorPageContent.title": "This page crashed.",
   "theme.ErrorPageContent.tryAgain": "Try again",
diff --git a/packages/docusaurus-theme-translations/locales/ru/theme-common.json b/packages/docusaurus-theme-translations/locales/ru/theme-common.json
index 36cc2692ebe4..b711c9a1c6ab 100644
--- a/packages/docusaurus-theme-translations/locales/ru/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/ru/theme-common.json
@@ -4,6 +4,7 @@
   "theme.CodeBlock.copied": "Скопировано",
   "theme.CodeBlock.copy": "Скопировать",
   "theme.CodeBlock.copyButtonAriaLabel": "Скопировать в буфер обмена",
+  "theme.CodeBlock.wordWrapToggle": "Toggle word wrap",
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": "Свернуть/развернуть категорию '{label}'",
   "theme.ErrorPageContent.title": "На странице произошёл сбой.",
   "theme.ErrorPageContent.tryAgain": "Попробуйте ещё раз",
diff --git a/packages/docusaurus-theme-translations/locales/sr/theme-common.json b/packages/docusaurus-theme-translations/locales/sr/theme-common.json
index 294ab67609a2..ee9180d2e7f8 100644
--- a/packages/docusaurus-theme-translations/locales/sr/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/sr/theme-common.json
@@ -4,6 +4,7 @@
   "theme.CodeBlock.copied": "Копирано",
   "theme.CodeBlock.copy": "Копирај",
   "theme.CodeBlock.copyButtonAriaLabel": "Копирај код у меморију",
+  "theme.CodeBlock.wordWrapToggle": "Toggle word wrap",
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": "Toggle the collapsible sidebar category '{label}'",
   "theme.ErrorPageContent.title": "This page crashed.",
   "theme.ErrorPageContent.tryAgain": "Try again",
diff --git a/packages/docusaurus-theme-translations/locales/tr/theme-common.json b/packages/docusaurus-theme-translations/locales/tr/theme-common.json
index b27a78a202af..635c5251f0d4 100644
--- a/packages/docusaurus-theme-translations/locales/tr/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/tr/theme-common.json
@@ -4,6 +4,7 @@
   "theme.CodeBlock.copied": "Kopyalandı",
   "theme.CodeBlock.copy": "Kopyala",
   "theme.CodeBlock.copyButtonAriaLabel": "Kodu panoya kopyala",
+  "theme.CodeBlock.wordWrapToggle": "Toggle word wrap",
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": "Toggle the collapsible sidebar category '{label}'",
   "theme.ErrorPageContent.title": "This page crashed.",
   "theme.ErrorPageContent.tryAgain": "Try again",
diff --git a/packages/docusaurus-theme-translations/locales/vi/theme-common.json b/packages/docusaurus-theme-translations/locales/vi/theme-common.json
index f56dc9927cd4..173b6f8b715e 100644
--- a/packages/docusaurus-theme-translations/locales/vi/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/vi/theme-common.json
@@ -4,6 +4,7 @@
   "theme.CodeBlock.copied": "Đã sao chép",
   "theme.CodeBlock.copy": "Sao chép",
   "theme.CodeBlock.copyButtonAriaLabel": "Sao chép code vào bộ nhớ tạm",
+  "theme.CodeBlock.wordWrapToggle": "Toggle word wrap",
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": "Chuyển đổi danh mục thanh bên có thể thu gọn '{label}'",
   "theme.ErrorPageContent.title": "Trang này đã bị lỗi.",
   "theme.ErrorPageContent.tryAgain": "Thử lại",
diff --git a/packages/docusaurus-theme-translations/locales/zh-Hans/theme-common.json b/packages/docusaurus-theme-translations/locales/zh-Hans/theme-common.json
index d2579b9efeaa..5a297e3046de 100644
--- a/packages/docusaurus-theme-translations/locales/zh-Hans/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/zh-Hans/theme-common.json
@@ -4,6 +4,7 @@
   "theme.CodeBlock.copied": "复制成功",
   "theme.CodeBlock.copy": "复制",
   "theme.CodeBlock.copyButtonAriaLabel": "复制代码到剪贴板",
+  "theme.CodeBlock.wordWrapToggle": "Toggle word wrap",
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": "打开/收起侧边栏菜单「{label}」",
   "theme.ErrorPageContent.title": "页面已崩溃。",
   "theme.ErrorPageContent.tryAgain": "重试",
diff --git a/packages/docusaurus-theme-translations/locales/zh-Hant/theme-common.json b/packages/docusaurus-theme-translations/locales/zh-Hant/theme-common.json
index 81a5a7d36971..7e5b6e321923 100644
--- a/packages/docusaurus-theme-translations/locales/zh-Hant/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/zh-Hant/theme-common.json
@@ -4,6 +4,7 @@
   "theme.CodeBlock.copied": "複製成功",
   "theme.CodeBlock.copy": "複製",
   "theme.CodeBlock.copyButtonAriaLabel": "複製代碼至剪貼簿",
+  "theme.CodeBlock.wordWrapToggle": "Toggle word wrap",
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": "打開/收起側邊欄選單「{label}」",
   "theme.ErrorPageContent.title": "此頁已當機。",
   "theme.ErrorPageContent.tryAgain": "重試",