diff --git a/services/web/app/views/project/editor/left-menu.pug b/services/web/app/views/project/editor/left-menu.pug
index bcb375e6ac..f5d36a459b 100644
--- a/services/web/app/views/project/editor/left-menu.pug
+++ b/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
diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json
index 0f39ad8af0..ed63a27ad7 100644
--- a/services/web/frontend/extracted-translations.json
+++ b/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": "",
diff --git a/services/web/frontend/js/features/editor-left-menu/components/help-show-hotkeys.tsx b/services/web/frontend/js/features/editor-left-menu/components/help-show-hotkeys.tsx
index 959930624c..fd7f7eb90d 100644
--- a/services/web/frontend/js/features/editor-left-menu/components/help-show-hotkeys.tsx
+++ b/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}
/>
>
)
diff --git a/services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal-bottom-text.js b/services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal-bottom-text.js
new file mode 100644
index 0000000000..0111a851f0
--- /dev/null
+++ b/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 (
+
+ ,
+ ]}
+ />
+
+ )
+}
diff --git a/services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal.js b/services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal.js
index e567c5c5fe..53371a53a8 100644
--- a/services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal.js
+++ b/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 (
- {t('hotkeys')}
+ {modalTitle}
-
+
{t('common')}
@@ -70,7 +77,7 @@ export default function HotkeysModal({
@@ -186,6 +193,7 @@ export default function HotkeysModal({
>
)}
+
@@ -201,6 +209,7 @@ HotkeysModal.propTypes = {
show: PropTypes.bool.isRequired,
handleHide: PropTypes.func.isRequired,
trackChangesVisible: PropTypes.bool,
+ newSourceEditor: PropTypes.bool,
}
function Hotkey({ combination, description }) {
diff --git a/services/web/frontend/stylesheets/app/editor/hotkeys.less b/services/web/frontend/stylesheets/app/editor/hotkeys.less
index 8f3f59ec1a..d2e2886678 100644
--- a/services/web/frontend/stylesheets/app/editor/hotkeys.less
+++ b/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;
+ }
}
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index 3876cf0161..a6e8dce817 100644
--- a/services/web/locales/en.json
+++ b/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 template0>"
}
diff --git a/services/web/test/frontend/features/editor-left-menu/components/help-show-hotkeys.test.js b/services/web/test/frontend/features/editor-left-menu/components/help-show-hotkeys.test.js
index 12dd4bcfb7..113e6aab42 100644
--- a/services/web/test/frontend/features/editor-left-menu/components/help-show-hotkeys.test.js
+++ b/services/web/test/frontend/features/editor-left-menu/components/help-show-hotkeys.test.js
@@ -15,7 +15,7 @@ describe('', 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')
})
})
diff --git a/services/web/test/frontend/features/hotkeys-modal/components/hotkeys-modal-bottom-text.test.js b/services/web/test/frontend/features/hotkeys-modal/components/hotkeys-modal-bottom-text.test.js
new file mode 100644
index 0000000000..c3baeefa66
--- /dev/null
+++ b/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('', function () {
+ it('renders the correct text', function () {
+ render()
+
+ 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`
+ )
+ })
+})
diff --git a/services/web/test/frontend/features/hotkeys-modal/components/hotkeys-modal.test.js b/services/web/test/frontend/features/hotkeys-modal/components/hotkeys-modal.test.js
index 1e4053c484..e68e1e03c4 100644
--- a/services/web/test/frontend/features/hotkeys-modal/components/hotkeys-modal.test.js
+++ b/services/web/test/frontend/features/hotkeys-modal/components/hotkeys-modal.test.js
@@ -10,11 +10,23 @@ const modalProps = {
}
describe('', function () {
- it('renders the translated modal title', async function () {
- const { baseElement } = render()
+ it('renders the translated modal title on cm6', async function () {
+ const { baseElement } = render(
+
+ )
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(
+
+ )
+
+ expect(baseElement.querySelector('.modal-title').textContent).to.equal(
+ 'Hotkeys (Legacy source editor)'
)
})