docsifyjs / docsify

🃏 A magical documentation site generator.
https://docsify.js.org
MIT License
27.47k stars 5.67k forks source link

Feat: Allow scrolling via keyboard in code blocks #2264

Closed jhildenbiddle closed 10 months ago

jhildenbiddle commented 11 months ago

Summary

See title and original issue (below).

Related issue, if any:

2224

What kind of change does this PR introduce?

Feature

For any code change:

Note: These changes were tested and verified with the docsify-copy-code plugin.

Does this PR introduce a breaking change?

No

Tested in the following browsers:

vercel[bot] commented 11 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
docsify-preview ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 30, 2023 5:41am
trusktr commented 11 months ago

Can we see before/after videos?

jhildenbiddle commented 11 months ago

Can we see before/after videos?

Even better...

https://docsify-preview-git-2224-scrollable-code-docsifyjs.vercel.app/#/more-pages?id=sidebar

  1. Click the "Sidebar" heading in the content area
  2. Hit TAB three times so the focus is on code block. CleanShot 2023-10-22 at 15 07 23@2x Note: Tab/focus behavior may be determined by your browser setting. For example, here are the settings for Safari 17: CleanShot 2023-10-22 at 15 09 02@2x
  3. Use the arrow keys to scroll right/left.

Now try the same thing on https://docsify.js.org/#/more-pages?id=sidebar:

  1. Click the "Sidebar" heading in the content area
  2. Hit TAB three times. Notice that it is not possible to focus on the code block, making it impossible to scroll the code block using the arrow keys.