Adding syntax highlighting selection to source code dialogs.

Author: krulis-martin

src/components/helpers/SourceCodeViewer/SourceCodeHighlightingSelector.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { Overlay, Popover, FormSelect, ButtonGroup } from 'react-bootstrap';
@@ -8,6 +8,8 @@ import Icon, { CloseIcon, RefreshIcon, SaveIcon } from '../../icons';
 
 import { getPrismModeFromExtension, PRISM_SUPPORTED_LANGUAGES } from '../../helpers/syntaxHighlighting.js';
 
+export const localStorageHighlightOverridesKey = 'SourceCodeViewer.highlightOverrides';
+
 const SourceCodeHighlightingSelector = ({
   id,
   fullButton = false,
@@ -21,15 +23,23 @@ const SourceCodeHighlightingSelector = ({
   const [visible, setVisible] = useState(false);
   const [selectedMode, setSelectedMode] = useState(initialMode !== null ? initialMode : defaultMode);
 
+  useEffect(() => {
+    setSelectedMode(initialMode !== null ? initialMode : defaultMode);
+  }, [initialMode, extension]);
+
   const clickHandler = ev => {
     ev.stopPropagation();
     setVisible(!visible);
   };
 
+  const changeHandler = ev => {
+    setSelectedMode(ev.target.value);
+  };
+
   return (
     <>
       {fullButton ? (
-        <Button variant="secondary" size="xs" {...props} onClick={clickHandler} ref={target}>
+        <Button {...props} onClick={clickHandler} ref={target}>
           <Icon icon="highlighter" gapRight={2} />
           {(initialMode !== null ? initialMode : defaultMode) || (
             <FormattedMessage id="app.solutionSourceCodes.noHighlighting" defaultMessage="no highlighting" />
@@ -41,7 +51,7 @@ const SourceCodeHighlightingSelector = ({
 
       <Overlay target={target.current} show={visible} placement="bottom">
         {props => (
-          <Popover id={id} onClick={e => e.stopPropagation()} className="highlighting-selector" {...props}>
+          <Popover id={id} onClick={ev => ev.stopPropagation()} className="highlighting-selector" {...props}>
             <Popover.Header>
               {extension ? (
                 <>
@@ -59,7 +69,7 @@ const SourceCodeHighlightingSelector = ({
               )}
             </Popover.Header>
             <Popover.Body className="text-center">
-              <FormSelect onChange={e => setSelectedMode(e.target.value)} value={selectedMode}>
+              <FormSelect onChange={changeHandler} value={selectedMode}>
                 <option value="" className={selectedMode === '' ? 'fw-bold text-primary' : 'fw-italic text-muted'}>
                   [<FormattedMessage id="app.solutionSourceCodes.noHighlighting" defaultMessage="no highlighting" />]
                   {defaultMode === '' && (

src/components/helpers/SourceCodeViewer/index.js

@@ -1,3 +1,6 @@
 export { default } from './SourceCodeViewer.js';
 export { default as SourceCodeComment } from './SourceCodeComment.js';
-export { default as SourceCodeHighlightingSelector } from './SourceCodeHighlightingSelector.js';
+export {
+  default as SourceCodeHighlightingSelector,
+  localStorageHighlightOverridesKey,
+} from './SourceCodeHighlightingSelector.js';

src/containers/SourceCodeViewerContainer/SourceCodeViewerContainer.js

@@ -14,9 +14,15 @@ import { download } from '../../redux/modules/files.js';
 import { fetchContentIfNeeded } from '../../redux/modules/filesContent.js';
 import { getFilesContent } from '../../redux/selectors/files.js';
 import ResourceRenderer from '../../components/helpers/ResourceRenderer';
-import SourceCodeViewer from '../../components/helpers/SourceCodeViewer';
+import SourceCodeViewer, {
+  SourceCodeHighlightingSelector,
+  localStorageHighlightOverridesKey,
+} from '../../components/helpers/SourceCodeViewer';
+
 import DownloadSolutionArchiveContainer from '../DownloadSolutionArchiveContainer';
 import UsersNameContainer from '../UsersNameContainer';
+import { getFileExtensionLC } from '../../helpers/common.js';
+import { storageGetItem, storageSetItem } from '../../helpers/localStorage.js';
 
 import * as styles from './sourceCode.less';
 
@@ -41,12 +47,15 @@ const preprocessFiles = lruMemoize(files =>
 );
 
 class SourceCodeViewerContainer extends Component {
-  state = { clipboardCopied: false };
+  state = { clipboardCopied: false, highlightOverrides: {} };
 
   componentDidMount() {
     const { fileId, loadAsync } = this.props;
     if (fileId !== null) {
       loadAsync();
+      this.setState({
+        highlightOverrides: storageGetItem(localStorageHighlightOverridesKey, {}),
+      });
     }
   }
 
@@ -56,9 +65,21 @@ class SourceCodeViewerContainer extends Component {
       (this.props.fileId !== prevProps.fileId || this.props.zipEntry !== prevProps.zipEntry)
     ) {
       this.props.loadAsync();
+      this.setState({
+        highlightOverrides: storageGetItem(localStorageHighlightOverridesKey, {}),
+      });
     }
   }
 
+  setHighlightOverride = (extension, mode) => {
+    const { [extension]: _, ...newOverrides } = this.state.highlightOverrides;
+    if (mode || mode === '') {
+      newOverrides[extension] = mode;
+    }
+    this.setState({ highlightOverrides: newOverrides });
+    storageSetItem(localStorageHighlightOverridesKey, newOverrides);
+  };
+
   render() {
     const {
       show,
@@ -75,6 +96,8 @@ class SourceCodeViewerContainer extends Component {
       submittedBy = null,
     } = this.props;
 
+    const fileExtension = getFileExtensionLC(fileName);
+
     return (
       <ResourceRenderer
         loading={
@@ -95,7 +118,13 @@ class SourceCodeViewerContainer extends Component {
         }
         resource={content}>
         {content => (
-          <Modal show={show} onHide={onHide} onEscapeKeyDown={onHide} dialogClassName={styles.modal} size="xl">
+          <Modal
+            show={show}
+            onHide={onHide}
+            onEscapeKeyDown={onHide}
+            dialogClassName={styles.modal}
+            size="xl"
+            enforceFocus={false}>
             <Modal.Header closeButton>
               <ResourceRenderer resource={files}>
                 {files => (
@@ -116,6 +145,17 @@ class SourceCodeViewerContainer extends Component {
                       ))}
                     </DropdownButton>
 
+                    <SourceCodeHighlightingSelector
+                      id="highlighting"
+                      fullButton
+                      size="sm"
+                      className="me-2"
+                      variant="outline-secondary"
+                      extension={fileExtension}
+                      initialMode={this.state.highlightOverrides[fileExtension]}
+                      onChange={this.setHighlightOverride}
+                    />
+
                     <Button size="sm" className="me-2" onClick={() => download(fileId, zipEntry)}>
                       <DownloadIcon gapRight={2} />
                       <FormattedMessage id="app.sourceCodeViewer.downloadButton" defaultMessage="Download file" />
@@ -180,7 +220,13 @@ class SourceCodeViewerContainer extends Component {
               {content.malformedCharacters ? (
                 <pre className="border-top">{content.content}</pre>
               ) : (
-                <SourceCodeViewer id={fileId} content={content.content} name={fileName} solutionId={solutionId} />
+                <SourceCodeViewer
+                  id={fileId}
+                  content={content.content}
+                  name={fileName}
+                  solutionId={solutionId}
+                  highlightOverrides={this.state.highlightOverrides}
+                />
               )}
               <div className="border-top pt-1 bg-light rounded-bottom"></div>
             </Modal.Body>

src/pages/SolutionSourceCodes/SolutionSourceCodes.js

@@ -27,6 +27,7 @@ import ReviewSummary from '../../components/Solutions/ReviewSummary';
 import RecentlyVisited from '../../components/Solutions/RecentlyVisited';
 import { registerSolutionVisit } from '../../components/Solutions/RecentlyVisited/functions.js';
 import Callout from '../../components/widgets/Callout';
+import { localStorageHighlightOverridesKey } from '../../components/helpers/SourceCodeViewer';
 import SolutionActionsContainer from '../../containers/SolutionActionsContainer';
 import SolutionReviewRequestButtonContainer from '../../containers/SolutionReviewRequestButtonContainer';
 import CommentThreadContainer from '../../containers/CommentThreadContainer';
@@ -69,7 +70,6 @@ const fileNameAndEntry = file => [file.parentId || file.id, file.entryName || nu
 const wrapInArray = lruMemoize(entry => [entry]);
 
 const localStorageDiffMappingsKey = 'SolutionSourceCodes.diffMappings.';
-const localStorageHighlightOverridesKey = 'SolutionSourceCodes.highlightOverrides';
 
 class SolutionSourceCodes extends Component {
   state = {