Add cmd/ctrl+shift+P keyboard shortcut for toggling views

Author: iansan5653

src/drafts/MarkdownEditor/MarkdownEditor.test.tsx

@@ -231,6 +231,22 @@ describe('MarkdownEditor', () => {
     expect(getInput()).toHaveAttribute('name', 'Name')
   })
 
+  describe('toggles between view modes on ctrl/cmd+shift+P', () => {
+    const shortcut = '{Control>}{Shift>}{P}{/Control}{/Shift}'
+
+    it('enters preview mode when editing', async () => {
+      const {getInput, user} = await render(<UncontrolledEditor />)
+      await user.type(getInput(), shortcut)
+    })
+
+    it('enters edit mode when previewing', async () => {
+      const {getInput, user, getViewSwitch} = await render(<UncontrolledEditor />)
+      await user.click(getViewSwitch())
+      await user.keyboard(shortcut)
+      expect(getInput()).toHaveFocus()
+    })
+  })
+
   describe('action buttons', () => {
     it('renders custom action buttons', async () => {
       const {getActionButton} = await render(

src/drafts/MarkdownEditor/MarkdownEditor.tsx

@@ -1,4 +1,3 @@
-import {isMacOS} from '@primer/behaviors/utils'
 import {useSSRSafeId} from '@react-aria/ssr'
 import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'
 import Box from '../../Box'
@@ -24,6 +23,7 @@ import {SavedRepliesContext, SavedRepliesHandle, SavedReply} from './_SavedRepli
 import {Emoji} from './suggestions/_useEmojiSuggestions'
 import {Mentionable} from './suggestions/_useMentionSuggestions'
 import {Reference} from './suggestions/_useReferenceSuggestions'
+import {isModifierKey} from './utils'
 
 export type MarkdownEditorProps = SxProp & {
   /** Current value of the editor as a multiline markdown string. */
@@ -119,6 +119,15 @@ const CONDENSED_WIDTH_THRESHOLD = 675
 const {Slot, Slots} = createSlots(['Toolbar', 'Actions', 'Label'])
 export const MarkdownEditorSlot = Slot
 
+/**
+ * We want to switch editors from preview mode on cmd/ctrl+shift+P. But in preview mode,
+ * there's no input to focus so we have to bind the event to the document. If there are
+ * multiple editors, we want the most recent one to switch to preview mode to be the one
+ * that we switch back to edit mode, so we maintain a LIFO stack of IDs of editors in
+ * preview mode.
+ */
+let editorsInPreviewMode: string[] = []
+
 /**
  * Markdown textarea with controls & keyboard shortcuts.
  */
@@ -245,7 +254,7 @@ const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorProps>(
           savedRepliesRef.current?.openMenu()
           e.preventDefault()
           e.stopPropagation()
-        } else if (isMacOS() ? e.metaKey : e.ctrlKey) {
+        } else if (isModifierKey(e)) {
           if (e.key === 'Enter') onPrimaryAction?.()
           else if (e.key === 'b') format?.bold()
           else if (e.key === 'i') format?.italic()
@@ -255,6 +264,7 @@ const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorProps>(
           else if (e.key === '8') format?.unorderedList()
           else if (e.shiftKey && e.key === '7') format?.orderedList()
           else if (e.shiftKey && e.key === 'l') format?.taskList()
+          else if (e.shiftKey && e.key === 'p') setView?.('preview')
           else return
 
           e.preventDefault()
@@ -266,6 +276,34 @@ const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorProps>(
       }
     )
 
+    useEffect(() => {
+      if (view === 'preview') {
+        editorsInPreviewMode.push(id)
+
+        const handler = (e: KeyboardEvent) => {
+          if (
+            !e.defaultPrevented &&
+            editorsInPreviewMode.at(-1) === id &&
+            isModifierKey(e) &&
+            e.shiftKey &&
+            e.key === 'p'
+          ) {
+            setView?.('edit')
+            requestAnimationFrame(() => inputRef.current?.focus())
+            e.preventDefault()
+          }
+        }
+        document.addEventListener('keydown', handler)
+
+        return () => {
+          document.removeEventListener('keydown', handler)
+          // Performing the filtering in the cleanup callback allows it to happen also when
+          // the user clicks the toggle button, not just on keyboard shortcut
+          editorsInPreviewMode = editorsInPreviewMode.filter(id_ => id_ !== id)
+        }
+      }
+    }, [view, setView, id])
+
     // If we don't memoize the context object, every child will rerender on every render even if memoized
     const context = useMemo(
       () => ({disabled, formattingToolsRef, condensed, required}),
@@ -366,6 +404,7 @@ const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorProps>(
                       boxSizing: 'border-box'
                     }}
                     aria-live="polite"
+                    tabIndex={-1}
                   >
                     <h2 style={a11yOnlyStyle}>Rendered Markdown Preview</h2>
                     <MarkdownViewer
@@ -392,6 +431,5 @@ const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorProps>(
     )
   }
 )
-MarkdownEditor.displayName = 'MarkdownEditor'
 
 export default MarkdownEditor

src/drafts/MarkdownEditor/utils.ts

@@ -1,3 +1,5 @@
+import {isMacOS} from '@primer/behaviors/utils'
+
 export const getSelectedLineRange = (textarea: HTMLTextAreaElement): [number, number] => {
   // Subtract one from the caret position so the newline found is not the one _at_ the caret position
   // then add one because we don't want to include the found newline. Also changes -1 (not found) result to 0
@@ -16,3 +18,6 @@ export const markdownLink = (text: string, url: string) =>
   `[${text.replaceAll('[', '\\[').replaceAll(']', '\\]')}](${url.replaceAll('(', '\\(').replaceAll(')', '\\)')})`
 
 export const markdownImage = (altText: string, url: string) => `!${markdownLink(altText, url)}`
+
+export const isModifierKey = (event: KeyboardEvent | React.KeyboardEvent<unknown>) =>
+  isMacOS() ? event.metaKey : event.ctrlKey