@docusaurus/theme-classic 0.0.0-4900 → 0.0.0-4901

package/lib/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';
 

package/lib-next/theme/CodeBlock/Content/String.js

@@ -12,11 +12,13 @@ import {
   parseLines,
   containsLineNumbers,
   usePrismTheme,
+  useCodeWordWrap,
 } from '@docusaurus/theme-common';
 import clsx from 'clsx';
 import Highlight, {defaultProps} 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 styles from './styles.module.css';
 export default function CodeBlockString({
@@ -32,7 +34,8 @@ export default function CodeBlockString({
   } = useThemeConfig();
   const language =
     languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage;
-  const prismTheme = usePrismTheme(); // We still parse the metastring in case we want to support more syntax in the
+  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:
   // "title=\"xyz\"" => title: "\"xyz\""
 
@@ -60,6 +63,7 @@ export default function CodeBlockString({
             <pre
               /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
               tabIndex={0}
+              ref={wordWrap.codeBlockRef}
               className={clsx(className, styles.codeBlock, 'thin-scrollbar')}>
               <code
                 className={clsx(
@@ -80,7 +84,16 @@ export default function CodeBlockString({
             </pre>
           )}
         </Highlight>
-        <CopyButton code={code} />
+        <div className={styles.buttonGroup}>
+          {(wordWrap.isEnabled || wordWrap.isCodeScrollable) && (
+            <WordWrapButton
+              className={styles.codeButton}
+              onClick={() => wordWrap.toggle()}
+              isEnabled={wordWrap.isEnabled}
+            />
+          )}
+          <CopyButton className={styles.codeButton} code={code} />
+        </div>
       </div>
     </Container>
   );

package/lib-next/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;
+}

package/lib-next/theme/CodeBlock/CopyButton/index.js

@@ -9,7 +9,7 @@ import clsx from 'clsx';
 import copy from 'copy-text-to-clipboard';
 import {translate} from '@docusaurus/Translate';
 import styles from './styles.module.css';
-export default function CopyButton({code}) {
+export default function CopyButton({code, className}) {
   const [isCopied, setIsCopied] = useState(false);
   const copyTimeout = useRef(undefined);
   const handleCopyCode = useCallback(() => {
@@ -42,8 +42,9 @@ export default function CopyButton({code}) {
         description: 'The copy button label on code blocks',
       })}
       className={clsx(
-        styles.copyButton,
         'clean-btn',
+        className,
+        styles.copyButton,
         isCopied && styles.copyButtonCopied,
       )}
       onClick={handleCopyCode}>

package/lib-next/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;

package/lib-next/theme/CodeBlock/WordWrapButton/index.js

@@ -0,0 +1,40 @@
+/**
+ * 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 styles from './styles.module.css';
+export default function WordWrapButton({className, onClick, isEnabled}) {
+  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 (
+    <button
+      type="button"
+      onClick={onClick}
+      className={clsx(
+        'clean-btn',
+        className,
+        isEnabled && styles.wordWrapButtonEnabled,
+      )}
+      aria-label={title}
+      title={title}>
+      <svg
+        className={styles.wordWrapButtonIcon}
+        viewBox="0 0 24 24"
+        aria-hidden="true">
+        <path
+          fill="currentColor"
+          d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"
+        />
+      </svg>
+    </button>
+  );
+}

package/lib-next/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);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-4900",
+  "version": "0.0.0-4901",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -21,15 +21,15 @@
     "format:lib-next": "prettier --config ../../.prettierrc --write \"lib-next/**/*.{js,ts,jsx,tsc}\""
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-4900",
-    "@docusaurus/plugin-content-blog": "0.0.0-4900",
-    "@docusaurus/plugin-content-docs": "0.0.0-4900",
-    "@docusaurus/plugin-content-pages": "0.0.0-4900",
-    "@docusaurus/theme-common": "0.0.0-4900",
-    "@docusaurus/theme-translations": "0.0.0-4900",
-    "@docusaurus/utils": "0.0.0-4900",
-    "@docusaurus/utils-common": "0.0.0-4900",
-    "@docusaurus/utils-validation": "0.0.0-4900",
+    "@docusaurus/core": "0.0.0-4901",
+    "@docusaurus/plugin-content-blog": "0.0.0-4901",
+    "@docusaurus/plugin-content-docs": "0.0.0-4901",
+    "@docusaurus/plugin-content-pages": "0.0.0-4901",
+    "@docusaurus/theme-common": "0.0.0-4901",
+    "@docusaurus/theme-translations": "0.0.0-4901",
+    "@docusaurus/utils": "0.0.0-4901",
+    "@docusaurus/utils-common": "0.0.0-4901",
+    "@docusaurus/utils-validation": "0.0.0-4901",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.0.1",
@@ -45,8 +45,8 @@
     "@babel/cli": "^7.17.6",
     "@babel/core": "^7.17.9",
     "@babel/preset-typescript": "^7.16.7",
-    "@docusaurus/module-type-aliases": "0.0.0-4900",
-    "@docusaurus/types": "0.0.0-4900",
+    "@docusaurus/module-type-aliases": "0.0.0-4901",
+    "@docusaurus/types": "0.0.0-4901",
     "@types/mdx-js__react": "^1.5.5",
     "@types/prismjs": "^1.26.0",
     "@types/rtlcss": "^3.1.4",
@@ -62,5 +62,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "2b685fb483506ef5f6eb97d4a48b8524e3ce3ce9"
+  "gitHead": "6dd77ca6acf315addc7252112093a4ac4ebfe7f7"
 }

package/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({
             <pre
               /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
               tabIndex={0}
+              ref={wordWrap.codeBlockRef}
               className={clsx(className, styles.codeBlock, 'thin-scrollbar')}>
               <code
                 className={clsx(
@@ -87,7 +91,16 @@ export default function CodeBlockString({
             </pre>
           )}
         </Highlight>
-        <CopyButton code={code} />
+        <div className={styles.buttonGroup}>
+          {(wordWrap.isEnabled || wordWrap.isCodeScrollable) && (
+            <WordWrapButton
+              className={styles.codeButton}
+              onClick={() => wordWrap.toggle()}
+              isEnabled={wordWrap.isEnabled}
+            />
+          )}
+          <CopyButton className={styles.codeButton} code={code} />
+        </div>
       </div>
     </Container>
   );

package/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;
+}

package/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<number | undefined>(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}>

package/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;

package/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 (
+    <button
+      type="button"
+      onClick={onClick}
+      className={clsx(
+        'clean-btn',
+        className,
+        isEnabled && styles.wordWrapButtonEnabled,
+      )}
+      aria-label={title}
+      title={title}>
+      <svg
+        className={styles.wordWrapButtonIcon}
+        viewBox="0 0 24 24"
+        aria-hidden="true">
+        <path
+          fill="currentColor"
+          d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"
+        />
+      </svg>
+    </button>
+  );
+}

package/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);
+}

package/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';