fix(theme-classic): inconsistent code block wrapping

packages/docusaurus-theme-common/src/hooks/useCodeWordWrap.ts

@@ -4,9 +4,35 @@
  * 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';
+import {useDynamicCallback} from '../utils/reactUtils';
+import {useMutationObserver} from './useMutationObserver';
+
+function useHiddenAttributeMutationObserver(
+  target: Element | undefined | null,
+  callback: () => void,
+) {
+  const hiddenAttributeCallback = useDynamicCallback(
+    (mutations: MutationRecord[]) => {
+      mutations.forEach((mutation) => {
+        if (
+          mutation.type === 'attributes' &&
+          mutation.attributeName === 'hidden'
+        ) {
+          callback();
+        }
+      });
+    },
+  );
+
+  useMutationObserver(target, hiddenAttributeCallback, {
+    attributes: true,
+    characterData: false,
+    childList: false,
+    subtree: false,
+  });
+}
 
 export function useCodeWordWrap(): {
   readonly codeBlockRef: RefObject<HTMLPreElement>;
@@ -16,6 +42,7 @@ export function useCodeWordWrap(): {
 } {
   const [isEnabled, setIsEnabled] = useState(false);
   const [isCodeScrollable, setIsCodeScrollable] = useState<boolean>(false);
+  const [ancestor, setAncestor] = useState<Element | null | undefined>();
   const codeBlockRef = useRef<HTMLPreElement>(null);
 
   const toggle = useCallback(() => {
@@ -25,19 +52,25 @@ export function useCodeWordWrap(): {
       codeElement.removeAttribute('style');
     } else {
       codeElement.style.whiteSpace = 'pre-wrap';
+      codeElement.style.overflowWrap = 'anywhere';
     }
 
     setIsEnabled((value) => !value);
   }, [codeBlockRef, isEnabled]);
 
   const updateCodeIsScrollable = useCallback(() => {
     const {scrollWidth, clientWidth} = codeBlockRef.current!;
+    // Allows code block to update scrollWidth and clientWidth after "hidden"
+    // attribute is removed
+    setAncestor(codeBlockRef.current?.closest('[hidden]'));
     const isScrollable =
       scrollWidth > clientWidth ||
       codeBlockRef.current!.querySelector('code')!.hasAttribute('style');
     setIsCodeScrollable(isScrollable);
   }, [codeBlockRef]);
 
+  useHiddenAttributeMutationObserver(ancestor, updateCodeIsScrollable);
+
   useEffect(() => {
     updateCodeIsScrollable();
   }, [isEnabled, updateCodeIsScrollable]);

packages/docusaurus-theme-common/src/hooks/useMutationObserver.ts

@@ -0,0 +1,38 @@
+/**
+ * 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 {useRef, useMemo, useEffect} from 'react';
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+
+export function useMutationObserver(
+  target: Element | undefined | null,
+  callback: (mutations: MutationRecord[]) => void,
+  options = {
+    attributes: true,
+    characterData: true,
+    childList: true,
+    subtree: true,
+  },
+): void {
+  const mutationObserver = useRef<MutationObserver | undefined>(
+    ExecutionEnvironment.canUseDOM ? new MutationObserver(callback) : undefined,
+  );
+  const memoOptions = useMemo(() => options, [options]);
+
+  useEffect(() => {
+    const observer = mutationObserver.current;
+
+    if (target && observer) {
+      observer.observe(target, memoOptions);
+    }
+
+    return () => {
+      if (observer) {
+        observer.disconnect();
+      }
+    };
+  }, [target, memoOptions]);
+}

website/_dogfooding/_pages tests/code-block-tests.mdx

@@ -1,5 +1,7 @@
 import CodeBlock from '@theme/CodeBlock';
 import BrowserWindow from '@site/src/components/BrowserWindow';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
 
 # Code block tests
 
@@ -190,3 +192,60 @@ function PageLayout(props) {
   );
 }
 ```
+
+## Code block wrapping tests
+
+[// spell-checker:disable]: #
+
+```bash
+mkdir this_is_a_loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong_string_to_test_code_block_wrapping
+echo "this is a long string made up of many separate words that should be broken between words when possible"
+curl https://docusaurus.io/tests/pages/code-block-tests
+```
+
+<Tabs>
+
+<TabItem value="short-tab-1" label="Short tab">
+
+```bash
+echo "hi"
+```
+
+</TabItem>
+<TabItem value="long-tab" label="Long tab">
+
+```bash
+mkdir this_will_test_whether_a_long_string_that_is_initially_hidden_will_have_the_option_to_wrap_when_made_visible
+```
+
+</TabItem>
+
+<TabItem value="short-tab-2" label="Short tab">
+
+```bash
+rm short_initially_hidden_string
+```
+
+</TabItem>
+</Tabs>
+
+<Tabs>
+
+<TabItem value="long-tab" label="Long tab">
+
+```bash
+echo medium_length_string_will_have_the_option_to_wrap_after_window_resized_while_it_is_hidden
+```
+
+</TabItem>
+
+<TabItem value="short-tab" label="Short tab">
+
+```bash
+echo "short_initially_hidden_string"
+```
+
+</TabItem>
+</Tabs>
+
+[// spell-checker:enable]: #