[#3444] Add keyboard shortcut update functionality

client/modules/IDE/components/Editor/contexts.jsx

@@ -0,0 +1,45 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { createContext, useState } from 'react';
+import { metaKey } from '../../../../utils/metaKey';
+
+export const EditorKeyMapsContext = createContext();
+
+export function EditorKeyMapProvider({ children }) {
+  const [keyMaps, setKeyMaps] = useState({
+    tidy: `Shift-${metaKey}-F`,
+    findPersistent: `${metaKey}-F`,
+    findPersistentNext: `${metaKey}-G`,
+    findPersistentPrev: `Shift-${metaKey}-G`,
+    colorPicker: `${metaKey}-K`
+  });
+
+  const updateKeyMap = (key, value) => {
+    if (key in keyMaps) {
+      setKeyMaps((prevKeyMaps) => ({
+        ...prevKeyMaps,
+        [key]: value
+      }));
+    }
+  };
+
+  return (
+    <EditorKeyMapsContext.Provider value={{ keyMaps, updateKeyMap }}>
+      {children}
+    </EditorKeyMapsContext.Provider>
+  );
+}
+
+EditorKeyMapProvider.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+export const useEditorKeyMap = () => {
+  const context = useContext(EditorKeyMapsContext);
+  if (!context) {
+    throw new Error(
+      'useEditorKeyMap must be used within a EditorKeyMapProvider'
+    );
+  }
+  return context;
+};

client/modules/IDE/components/Editor/index.jsx

@@ -72,6 +72,7 @@ import UnsavedChangesIndicator from '../UnsavedChangesIndicator';
 import { EditorContainer, EditorHolder } from './MobileEditor';
 import { FolderIcon } from '../../../../common/icons';
 import IconButton from '../../../../common/IconButton';
+import { EditorKeyMapsContext } from './contexts';
 
 emmet(CodeMirror);
 
@@ -104,6 +105,7 @@ class Editor extends React.Component {
     this.showFind = this.showFind.bind(this);
     this.showReplace = this.showReplace.bind(this);
     this.getContent = this.getContent.bind(this);
+    this.updateKeyMaps = this.updateKeyMaps.bind(this);
   }
 
   componentDidMount() {
@@ -153,36 +155,9 @@ class Editor extends React.Component {
 
     delete this._cm.options.lint.options.errors;
 
-    const replaceCommand =
-      metaKey === 'Ctrl' ? `${metaKey}-H` : `${metaKey}-Option-F`;
-    this._cm.setOption('extraKeys', {
-      Tab: (cm) => {
-        if (!cm.execCommand('emmetExpandAbbreviation')) return;
-        // might need to specify and indent more?
-        const selection = cm.doc.getSelection();
-        if (selection.length > 0) {
-          cm.execCommand('indentMore');
-        } else {
-          cm.replaceSelection(' '.repeat(INDENTATION_AMOUNT));
-        }
-      },
-      Enter: 'emmetInsertLineBreak',
-      Esc: 'emmetResetAbbreviation',
-      [`Shift-Tab`]: false,
-      [`${metaKey}-Enter`]: () => null,
-      [`Shift-${metaKey}-Enter`]: () => null,
-      [`${metaKey}-F`]: 'findPersistent',
-      [`Shift-${metaKey}-F`]: this.tidyCode,
-      [`${metaKey}-G`]: 'findPersistentNext',
-      [`Shift-${metaKey}-G`]: 'findPersistentPrev',
-      [replaceCommand]: 'replace',
-      // Cassie Tarakajian: If you don't set a default color, then when you
-      // choose a color, it deletes characters inline. This is a
-      // hack to prevent that.
-      [`${metaKey}-K`]: (cm, event) =>
-        cm.state.colorpicker.popup_color_picker({ length: 0 }),
-      [`${metaKey}-.`]: 'toggleComment' // Note: most adblockers use the shortcut ctrl+.
-    });
+    const { keyMaps } = this.context;
+
+    this.updateKeyMaps(keyMaps);
 
     this.initializeDocuments(this.props.files);
     this._cm.swapDoc(this._docs[this.props.file.id]);
@@ -236,6 +211,16 @@ class Editor extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
+    const currentKeyMaps = this.context?.keyMaps;
+    const prevKeyMaps = this.prevKeyMapsRef?.current;
+
+    if (
+      prevKeyMaps &&
+      JSON.stringify(currentKeyMaps) !== JSON.stringify(prevKeyMaps)
+    ) {
+      this.updateKeyMaps(currentKeyMaps);
+    }
+    this.prevKeyMapsRef = { current: currentKeyMaps };
     if (this.props.file.id !== prevProps.file.id) {
       const fileMode = this.getFileMode(this.props.file.name);
       if (fileMode === 'javascript') {
@@ -515,6 +500,42 @@ class Editor extends React.Component {
     });
   }
 
+  updateKeyMaps(keyMaps) {
+    const replaceCommand =
+      metaKey === 'Ctrl' ? `${metaKey}-H` : `${metaKey}-Option-F`;
+
+    this._cm.setOption('extraKeys', {
+      Tab: (cm) => {
+        if (!cm.execCommand('emmetExpandAbbreviation')) return;
+        // might need to specify and indent more?
+        const selection = cm.doc.getSelection();
+        if (selection.length > 0) {
+          cm.execCommand('indentMore');
+        } else {
+          cm.replaceSelection(' '.repeat(INDENTATION_AMOUNT));
+        }
+      },
+      Enter: 'emmetInsertLineBreak',
+      Esc: 'emmetResetAbbreviation',
+      [`Shift-Tab`]: false,
+      [`${metaKey}-Enter`]: () => null,
+      [`Shift-${metaKey}-Enter`]: () => null,
+      [`${keyMaps.findPersistent}`]: 'findPersistent',
+      [`${keyMaps.tidy}`]: this.tidyCode,
+      [`${keyMaps.findPersistentNext}`]: 'findPersistentNext',
+      [`${keyMaps.findPersistentPrev}`]: 'findPersistentPrev',
+      [replaceCommand]: 'replace',
+      // Cassie Tarakajian: If you don't set a default color, then when you
+      // choose a color, it deletes characters inline. This is a
+      // hack to prevent that.
+      [`${keyMaps.colorPicker}`]: (cm, event) =>
+        cm.state.colorpicker.popup_color_picker({ length: 0 }),
+      [`${metaKey}-.`]: 'toggleComment' // Note: most adblockers use the shortcut ctrl+.
+    });
+  }
+
+  static contextType = EditorKeyMapsContext;
+
   render() {
     const editorSectionClass = classNames({
       editor: true,

client/modules/IDE/components/KeyboardShortcutItem.jsx

@@ -0,0 +1,138 @@
+import React, { useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useEditorKeyMap } from './Editor/contexts';
+
+function KeyboardShortcutItem({ desc, keyName }) {
+  const [edit, setEdit] = useState(false);
+  const pressedKeyCombination = useRef({});
+  const inputRef = useRef(null);
+  const { updateKeyMap, keyMaps } = useEditorKeyMap();
+
+  if (!Object.keys(keyMaps).includes(keyName)) {
+    return null;
+  }
+
+  const cancelEdit = () => {
+    setEdit(false);
+    pressedKeyCombination.current = {};
+    inputRef.current.innerText = keyMaps[keyName];
+  };
+
+  const handleEdit = (state, key) => {
+    setEdit(state);
+    if (!state) {
+      updateKeyMap(key, inputRef.current.innerText);
+      cancelEdit();
+    }
+  };
+
+  const handleKeyDown = (event) => {
+    if (!edit) return;
+    event.preventDefault();
+    event.stopPropagation();
+    let { key } = event;
+    if (key === 'Control') {
+      key = 'Ctrl';
+    }
+    if (key === ' ') {
+      key = 'Space';
+    }
+    if (key.length === 1 && key.match(/[a-z]/i)) {
+      key = key.toUpperCase();
+    }
+
+    pressedKeyCombination.current[key] = true;
+
+    const allKeys = Object.keys(pressedKeyCombination.current).filter(
+      (k) => !['Shift', 'Ctrl', 'Alt'].includes(k)
+    );
+
+    if (event.altKey) {
+      allKeys.unshift('Alt');
+    }
+    if (event.ctrlKey) {
+      allKeys.unshift('Ctrl');
+    }
+    if (event.shiftKey) {
+      allKeys.unshift('Shift');
+    }
+
+    event.currentTarget.innerText = allKeys.join('-');
+  };
+
+  const handleKeyUp = (event) => {
+    if (!edit) return;
+    event.preventDefault();
+    event.stopPropagation();
+    let { key } = event;
+    if (key === 'Control') {
+      key = 'Ctrl';
+    }
+    if (key === ' ') {
+      key = 'Space';
+    }
+    if (key.length === 1 && key.match(/[a-z]/i)) {
+      key = key.toUpperCase();
+    }
+
+    delete pressedKeyCombination.current[key];
+  };
+
+  return (
+    <li className="keyboard-shortcut-item">
+      <button
+        type="button"
+        title="edit shortcut"
+        className="keyboard-shortcut__edit"
+        style={{
+          display: edit ? 'none' : 'block'
+        }}
+        onClick={() => handleEdit(true, keyName)}
+      >
+        &#x270E;
+      </button>
+      <button
+        type="button"
+        title="cancel shortcut edit"
+        className="keyboard-shortcut__edit"
+        style={{
+          display: !edit ? 'none' : 'block'
+        }}
+        onClick={cancelEdit}
+      >
+        &#10799;
+      </button>
+      <button
+        type="button"
+        title="save shortcut"
+        className="keyboard-shortcut__edit"
+        style={{
+          display: !edit ? 'none' : 'block'
+        }}
+        onClick={() => handleEdit(false, keyName)}
+      >
+        &#10003;
+      </button>
+      <span
+        className="keyboard-shortcut__command"
+        role="textbox"
+        ref={inputRef}
+        tabIndex={0}
+        contentEditable={edit}
+        suppressContentEditableWarning
+        onKeyDown={handleKeyDown}
+        onKeyUp={handleKeyUp}
+      >
+        {keyMaps[keyName]}
+      </span>
+      <span>{desc}</span>
+    </li>
+  );
+}
+
+KeyboardShortcutItem.propTypes = {
+  desc: PropTypes.string.isRequired,
+  keyName: PropTypes.string.isRequired
+};
+
+export default KeyboardShortcutItem;

client/modules/IDE/components/KeyboardShortcutModal.jsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { metaKeyName, metaKey } from '../../../utils/metaKey';
+import KeyboardShortcutItem from './KeyboardShortcutItem';
 
 function KeyboardShortcutModal() {
   const { t } = useTranslation();
+
   const replaceCommand =
     metaKey === 'Ctrl' ? `${metaKeyName} + H` : `${metaKeyName} + ⌥ + F`;
   const newFileCommand =
@@ -25,28 +27,22 @@ function KeyboardShortcutModal() {
         .
       </p>
       <ul className="keyboard-shortcuts__list">
-        <li className="keyboard-shortcut-item">
-          <span className="keyboard-shortcut__command">
-            {metaKeyName} + Shift + F
-          </span>
-          <span>{t('KeyboardShortcuts.CodeEditing.Tidy')}</span>
-        </li>
-        <li className="keyboard-shortcut-item">
-          <span className="keyboard-shortcut__command">{metaKeyName} + F</span>
-          <span>{t('KeyboardShortcuts.CodeEditing.FindText')}</span>
-        </li>
-        <li className="keyboard-shortcut-item">
-          <span className="keyboard-shortcut__command">{metaKeyName} + G</span>
-          <span>{t('KeyboardShortcuts.CodeEditing.FindNextTextMatch')}</span>
-        </li>
-        <li className="keyboard-shortcut-item">
-          <span className="keyboard-shortcut__command">
-            {metaKeyName} + Shift + G
-          </span>
-          <span>
-            {t('KeyboardShortcuts.CodeEditing.FindPreviousTextMatch')}
-          </span>
-        </li>
+        <KeyboardShortcutItem
+          desc={t('KeyboardShortcuts.CodeEditing.Tidy')}
+          keyName="tidy"
+        />
+        <KeyboardShortcutItem
+          desc={t('KeyboardShortcuts.CodeEditing.FindText')}
+          keyName="findPersistent"
+        />
+        <KeyboardShortcutItem
+          desc={t('KeyboardShortcuts.CodeEditing.FindNextTextMatch')}
+          keyName="findPersistentNext"
+        />
+        <KeyboardShortcutItem
+          desc={t('KeyboardShortcuts.CodeEditing.FindPreviousTextMatch')}
+          keyName="findPersistentPrev"
+        />
         <li className="keyboard-shortcut-item">
           <span className="keyboard-shortcut__command">{replaceCommand}</span>
           <span>{t('KeyboardShortcuts.CodeEditing.ReplaceTextMatch')}</span>
@@ -67,10 +63,10 @@ function KeyboardShortcutModal() {
           <span className="keyboard-shortcut__command">{metaKeyName} + .</span>
           <span>{t('KeyboardShortcuts.CodeEditing.CommentLine')}</span>
         </li>
-        <li className="keyboard-shortcut-item">
-          <span className="keyboard-shortcut__command">{metaKeyName} + K</span>
-          <span>{t('KeyboardShortcuts.CodeEditing.ColorPicker')}</span>
-        </li>
+        <KeyboardShortcutItem
+          desc={t('KeyboardShortcuts.CodeEditing.ColorPicker')}
+          keyName="colorPicker"
+        />
         <li className="keyboard-shortcut-item">
           <span className="keyboard-shortcut__command">{newFileCommand}</span>
           <span>{t('KeyboardShortcuts.CodeEditing.CreateNewFile')}</span>

client/modules/IDE/pages/IDEView.jsx

@@ -27,6 +27,7 @@ import {
 } from '../components/Editor/MobileEditor';
 import IDEOverlays from '../components/IDEOverlays';
 import useIsMobile from '../hooks/useIsMobile';
+import { EditorKeyMapProvider } from '../components/Editor/contexts';
 
 function getTitle(project) {
   const { id } = project;
@@ -167,121 +168,123 @@ const IDEView = () => {
 
   return (
     <RootPage>
-      <Helmet>
-        <title>{getTitle(project)}</title>
-      </Helmet>
-      <IDEKeyHandlers getContent={() => cmRef.current?.getContent()} />
-      <WarnIfUnsavedChanges />
-      <Toast />
-      <CmControllerContext.Provider value={cmRef}>
-        <Header syncFileContent={syncFileContent} />
-      </CmControllerContext.Provider>
-      {isMobile ? (
-        <>
-          <FloatingActionButton
-            syncFileContent={syncFileContent}
-            offsetBottom={ide.isPlaying ? currentConsoleSize : 0}
-          />
-          <PreviewWrapper show={ide.isPlaying}>
-            <SplitPane
-              style={{ position: 'static' }}
-              split="horizontal"
-              primary="second"
-              size={currentConsoleSize}
-              minSize={consoleCollapsedSize}
-              onChange={(size) => {
-                setConsoleSize(size);
-                setIsOverlayVisible(true);
-              }}
-              onDragFinished={() => {
-                setIsOverlayVisible(false);
-              }}
-              allowResize={ide.consoleIsExpanded}
-              className="editor-preview-subpanel"
-            >
-              <PreviewFrame
-                fullView
-                hide={!ide.isPlaying}
-                cmController={cmRef.current}
-                isOverlayVisible={isOverlayVisible}
-              />
-              <Console />
-            </SplitPane>
-          </PreviewWrapper>
-          <EditorSidebarWrapper show={!ide.isPlaying}>
-            <Sidebar />
-            <Editor
-              provideController={(ctl) => {
-                cmRef.current = ctl;
-              }}
+      <EditorKeyMapProvider>
+        <Helmet>
+          <title>{getTitle(project)}</title>
+        </Helmet>
+        <IDEKeyHandlers getContent={() => cmRef.current?.getContent()} />
+        <WarnIfUnsavedChanges />
+        <Toast />
+        <CmControllerContext.Provider value={cmRef}>
+          <Header syncFileContent={syncFileContent} />
+        </CmControllerContext.Provider>
+        {isMobile ? (
+          <>
+            <FloatingActionButton
+              syncFileContent={syncFileContent}
+              offsetBottom={ide.isPlaying ? currentConsoleSize : 0}
             />
-          </EditorSidebarWrapper>
-        </>
-      ) : (
-        <main className="editor-preview-container">
-          <SplitPane
-            split="vertical"
-            size={ide.sidebarIsExpanded ? sidebarSize : 20}
-            onChange={(size) => {
-              setSidebarSize(size);
-            }}
-            allowResize={ide.sidebarIsExpanded}
-            minSize={150}
-          >
-            <Sidebar />
-            <SplitPane
-              split="vertical"
-              maxSize={MaxSize * 0.965}
-              defaultSize="50%"
-              onChange={() => {
-                setIsOverlayVisible(true);
-              }}
-              onDragFinished={() => {
-                setIsOverlayVisible(false);
-              }}
-              resizerStyle={{
-                borderLeftWidth: '2px',
-                borderRightWidth: '2px',
-                width: '2px',
-                margin: '0px 0px'
-              }}
-            >
+            <PreviewWrapper show={ide.isPlaying}>
               <SplitPane
+                style={{ position: 'static' }}
                 split="horizontal"
                 primary="second"
                 size={currentConsoleSize}
                 minSize={consoleCollapsedSize}
                 onChange={(size) => {
                   setConsoleSize(size);
+                  setIsOverlayVisible(true);
+                }}
+                onDragFinished={() => {
+                  setIsOverlayVisible(false);
                 }}
                 allowResize={ide.consoleIsExpanded}
                 className="editor-preview-subpanel"
               >
-                <Editor
-                  provideController={(ctl) => {
-                    cmRef.current = ctl;
-                  }}
+                <PreviewFrame
+                  fullView
+                  hide={!ide.isPlaying}
+                  cmController={cmRef.current}
+                  isOverlayVisible={isOverlayVisible}
                 />
                 <Console />
               </SplitPane>
-              <section className="preview-frame-holder">
-                <header className="preview-frame__header">
-                  <h2 className="preview-frame__title">
-                    {t('Toolbar.Preview')}
-                  </h2>
-                </header>
-                <div className="preview-frame__content">
-                  <PreviewFrame
-                    cmController={cmRef.current}
-                    isOverlayVisible={isOverlayVisible}
+            </PreviewWrapper>
+            <EditorSidebarWrapper show={!ide.isPlaying}>
+              <Sidebar />
+              <Editor
+                provideController={(ctl) => {
+                  cmRef.current = ctl;
+                }}
+              />
+            </EditorSidebarWrapper>
+          </>
+        ) : (
+          <main className="editor-preview-container">
+            <SplitPane
+              split="vertical"
+              size={ide.sidebarIsExpanded ? sidebarSize : 20}
+              onChange={(size) => {
+                setSidebarSize(size);
+              }}
+              allowResize={ide.sidebarIsExpanded}
+              minSize={150}
+            >
+              <Sidebar />
+              <SplitPane
+                split="vertical"
+                maxSize={MaxSize * 0.965}
+                defaultSize="50%"
+                onChange={() => {
+                  setIsOverlayVisible(true);
+                }}
+                onDragFinished={() => {
+                  setIsOverlayVisible(false);
+                }}
+                resizerStyle={{
+                  borderLeftWidth: '2px',
+                  borderRightWidth: '2px',
+                  width: '2px',
+                  margin: '0px 0px'
+                }}
+              >
+                <SplitPane
+                  split="horizontal"
+                  primary="second"
+                  size={currentConsoleSize}
+                  minSize={consoleCollapsedSize}
+                  onChange={(size) => {
+                    setConsoleSize(size);
+                  }}
+                  allowResize={ide.consoleIsExpanded}
+                  className="editor-preview-subpanel"
+                >
+                  <Editor
+                    provideController={(ctl) => {
+                      cmRef.current = ctl;
+                    }}
                   />
-                </div>
-              </section>
+                  <Console />
+                </SplitPane>
+                <section className="preview-frame-holder">
+                  <header className="preview-frame__header">
+                    <h2 className="preview-frame__title">
+                      {t('Toolbar.Preview')}
+                    </h2>
+                  </header>
+                  <div className="preview-frame__content">
+                    <PreviewFrame
+                      cmController={cmRef.current}
+                      isOverlayVisible={isOverlayVisible}
+                    />
+                  </div>
+                </section>
+              </SplitPane>
             </SplitPane>
-          </SplitPane>
-        </main>
-      )}
-      <IDEOverlays />
+          </main>
+        )}
+        <IDEOverlays />
+      </EditorKeyMapProvider>
     </RootPage>
   );
 };

client/styles/components/_keyboard-shortcuts.scss

@@ -21,6 +21,10 @@
   align-items: baseline;
 }
 
+.keyboard-shortcut__edit {
+  margin-right: 2px;
+}
+
 .keyboard-shortcut__command {
   font-weight: bold;
   text-align: right;