Update "go to line" hotkey for cm6 and add new info text in hotkeys modal

* Update "go to line" hotkey for cm6 and add new info text in hotkeys modal

* Differentiate modal title between cm6 and ace hotkeys

* Update test to reflect change in hotkeys modal title

* Add test for hotkeys modal bottom text

* Update test on editor left menu hotkeys button to reflect change in hotkeys modal title

GitOrigin-RevId: 61bae16313ea7a37fa3b9441dbe5a93ab7823d01

services/web/app/views/project/editor/left-menu.pug

@@ -235,6 +235,7 @@ aside#left-menu.full-size(
 				show="show"
 				track-changes-visible="trackChangesVisible"
 				is-mac="isMac"
+				new-source-editor="editor.newSourceEditor"
 			)
 		if showSupport
 			li

services/web/frontend/extracted-translations.json

@@ -1,4 +1,5 @@
 {
+  "a_more_comprehensive_list_of_keyboard_shortcuts": "",
   "about_to_archive_projects": "",
   "about_to_delete_folder": "",
   "about_to_delete_projects": "",

services/web/frontend/js/features/editor-left-menu/components/help-show-hotkeys.tsx

@@ -2,10 +2,12 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useProjectContext } from '../../../shared/context/project-context'
 import HotkeysModal from '../../hotkeys-modal/components/hotkeys-modal'
+import useScopeValue from '../../../shared/hooks/use-scope-value'
 import LeftMenuButton from './left-menu-button'
 
 export default function HelpShowHotkeys() {
   const [showModal, setShowModal] = useState(false)
+  const [newSourceEditor] = useScopeValue('editor.newSourceEditor')
   const { t } = useTranslation()
   const { features } = useProjectContext()
   const isMac = /Mac/.test(window.navigator?.platform)
@@ -26,6 +28,7 @@ export default function HelpShowHotkeys() {
         handleHide={() => setShowModal(false)}
         isMac={isMac}
         trackChangesVisible={features?.trackChangesVisible}
+        newSourceEditor={newSourceEditor}
       />
     </>
   )

services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal-bottom-text.js

@@ -0,0 +1,18 @@
+import { Trans } from 'react-i18next'
+
+export default function HotkeysModalBottomText() {
+  return (
+    <div className="hotkeys-modal-bottom-text">
+      <Trans
+        i18nKey="a_more_comprehensive_list_of_keyboard_shortcuts"
+        components={[
+          // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
+          <a
+            href="/articles/overleaf-keyboard-shortcuts/qykqfvmxdnjf"
+            target="_blank"
+          />,
+        ]}
+      />
+    </div>
+  )
+}

services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal.js

@@ -2,6 +2,7 @@ import { Button, Modal, Row, Col } from 'react-bootstrap'
 import PropTypes from 'prop-types'
 import { Trans, useTranslation } from 'react-i18next'
 import AccessibleModal from '../../../shared/components/accessible-modal'
+import HotkeysModalBottomText from './hotkeys-modal-bottom-text'
 
 export default function HotkeysModal({
   animation = true,
@@ -9,11 +10,17 @@ export default function HotkeysModal({
   show,
   isMac = false,
   trackChangesVisible = false,
+  newSourceEditor = false,
 }) {
   const { t } = useTranslation()
 
+  const goToLineSuffix = newSourceEditor ? 'Shift + L' : 'L'
   const ctrl = isMac ? 'Cmd' : 'Ctrl'
 
+  const modalTitle = newSourceEditor
+    ? `${t('hotkeys')} (Source editor)`
+    : `${t('hotkeys')} (Legacy source editor)`
+
   return (
     <AccessibleModal
       bsSize="large"
@@ -22,10 +29,10 @@ export default function HotkeysModal({
       animation={animation}
     >
       <Modal.Header closeButton>
-        <Modal.Title>{t('hotkeys')}</Modal.Title>
+        <Modal.Title>{modalTitle}</Modal.Title>
       </Modal.Header>
 
-      <Modal.Body className="modal-hotkeys">
+      <Modal.Body className="hotkeys-modal">
         <h3>{t('common')}</h3>
 
         <Row>
@@ -70,7 +77,7 @@ export default function HotkeysModal({
           </Col>
           <Col xs={4}>
             <Hotkey
-              combination={`${ctrl} + L`}
+              combination={`${ctrl} + ${goToLineSuffix}`}
               description={t('hotkey_go_to_line')}
             />
           </Col>
@@ -186,6 +193,7 @@ export default function HotkeysModal({
             </Row>
           </>
         )}
+        <HotkeysModalBottomText />
       </Modal.Body>
 
       <Modal.Footer>
@@ -201,6 +209,7 @@ HotkeysModal.propTypes = {
   show: PropTypes.bool.isRequired,
   handleHide: PropTypes.func.isRequired,
   trackChangesVisible: PropTypes.bool,
+  newSourceEditor: PropTypes.bool,
 }
 
 function Hotkey({ combination, description }) {

services/web/frontend/stylesheets/app/editor/hotkeys.less

@@ -1,4 +1,4 @@
-.modal-hotkeys {
+.hotkeys-modal {
   font-size: 14px;
 
   h3:first-child {
@@ -22,4 +22,10 @@
     font-weight: 600;
     margin-right: @line-height-computed / 4;
   }
+
+  .hotkeys-modal-bottom-text {
+    background-color: @ol-blue-gray-0;
+    padding: @padding-sm;
+    border-radius: 5px;
+  }
 }

services/web/locales/en.json

@@ -1921,5 +1921,6 @@
   "not_a_student_question": "Not a student?",
   "try_out_one_of_our_plans_instead": "Try out one of our plans instead",
   "browse_plans": "Browse plans",
-  "i_confirm_that_i_am_a_student": "I confirm that I am a student"
+  "i_confirm_that_i_am_a_student": "I confirm that I am a student",
+  "a_more_comprehensive_list_of_keyboard_shortcuts": "A more comprehensive list of keyboard shortcuts can be found in <0>this __appName__ project template</0>"
 }

services/web/test/frontend/features/editor-left-menu/components/help-show-hotkeys.test.js

@@ -15,7 +15,7 @@ describe('<HelpShowHotkeys />', function () {
     expect(screen.queryByRole('dialog')).to.equal(null)
     fireEvent.click(screen.getByRole('button', { name: 'Show Hotkeys' }))
     const modal = screen.getAllByRole('dialog')[0]
-    within(modal).getByText('Hotkeys')
+    within(modal).getByText('Hotkeys (Legacy source editor)')
     within(modal).getByText('Common')
   })
 })

services/web/test/frontend/features/hotkeys-modal/components/hotkeys-modal-bottom-text.test.js

@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react'
+import { expect } from 'chai'
+import HotkeysModalBottomText from '../../../../../frontend/js/features/hotkeys-modal/components/hotkeys-modal-bottom-text'
+
+describe('<HotkeysModalBottomText />', function () {
+  it('renders the correct text', function () {
+    render(<HotkeysModalBottomText />)
+
+    screen.getByText(
+      /A more comprehensive list of keyboard shortcuts can be found in/
+    )
+
+    const link = screen.getByRole('link', {
+      name: /this Overleaf project template/,
+    })
+
+    expect(link.getAttribute('href')).to.equal(
+      `/articles/overleaf-keyboard-shortcuts/qykqfvmxdnjf`
+    )
+  })
+})

services/web/test/frontend/features/hotkeys-modal/components/hotkeys-modal.test.js

@@ -10,11 +10,23 @@ const modalProps = {
 }
 
 describe('<HotkeysModal />', function () {
-  it('renders the translated modal title', async function () {
-    const { baseElement } = render(<HotkeysModal {...modalProps} />)
+  it('renders the translated modal title on cm6', async function () {
+    const { baseElement } = render(
+      <HotkeysModal {...modalProps} newSourceEditor />
+    )
 
     expect(baseElement.querySelector('.modal-title').textContent).to.equal(
-      'Hotkeys'
+      'Hotkeys (Source editor)'
+    )
+  })
+
+  it('renders the translated modal title on ace', async function () {
+    const { baseElement } = render(
+      <HotkeysModal {...modalProps} newSourceEditor={false} />
+    )
+
+    expect(baseElement.querySelector('.modal-title').textContent).to.equal(
+      'Hotkeys (Legacy source editor)'
     )
   })