Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(theme-classic): toggle code wrap button #7036

Merged
merged 13 commits into from
Apr 22, 2022
Merged

feat(theme-classic): toggle code wrap button #7036

Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
f37f1b9
feat(theme-classic): toggle code wrap button
lex111 Mar 28, 2022
7d483b4
Merge branch 'main' of github.com:facebook/docusaurus into lex111/cod…
lex111 Mar 29, 2022
f6bae8b
Add resize listener
lex111 Mar 29, 2022
dab2f96
Add support for i18n
lex111 Mar 29, 2022
6d57368
Merge branch 'main' of github.com:facebook/docusaurus into lex111/cod…
lex111 Apr 15, 2022
97e6922
Fixes
lex111 Apr 16, 2022
82966a2
Update packages/docusaurus-theme-translations/locales/fr/theme-common…
lex111 Apr 16, 2022
4b19c7a
Revert code-block-tests.mdx
lex111 Apr 20, 2022
5a14be5
codeWordWrap toggling can impact scroll => trigger update
slorber Apr 21, 2022
3b43394
Improvements after review
lex111 Apr 22, 2022
579b8aa
Merge branch 'main' of github.com:facebook/docusaurus into lex111/cod…
lex111 Apr 22, 2022
e8d2841
Remove duplicate code
lex111 Apr 22, 2022
0464aa9
return useRef() value directly
slorber Apr 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 9 additions & 12 deletions packages/docusaurus-theme-common/src/hooks/useCodeWordWrap.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,15 @@
* LICENSE file in the root directory of this source tree.
*/

import type {
MutableRefObject} from 'react';
import {
useState,
useCallback,
useEffect,
useRef
} from 'react';

export function useCodeWordWrap() {
import type {MutableRefObject} from 'react';
import {useState, useCallback, useEffect, useRef} from 'react';

export function useCodeWordWrap(): {
readonly codeBlockRef: (node: HTMLPreElement | null) => void;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is not needed to use a function here you can return the React ref and assign it directly (like it was before, but instead it's created in the custom hook instead of the component

readonly isEnabled: boolean;
readonly isCodeScrollable: boolean;
readonly toggle: () => void;
} {
const [isEnabled, setIsEnabled] = useState(false);
const [isCodeScrollable, setIsCodeScrollable] = useState<boolean>(false);
const codeBlock = useRef() as MutableRefObject<HTMLPreElement>;
Expand Down Expand Up @@ -49,8 +48,6 @@ export function useCodeWordWrap() {
}, [isEnabled, updateCodeIsScrollable]);

useEffect(() => {
updateCodeIsScrollable();

window.addEventListener('resize', updateCodeIsScrollable, {
passive: true,
});
Expand Down