UX improvements in source code views, diffs, and reviews.

ReCodEx · Dec 4, 2022 · 59858dd · 59858dd
1 parent ce8bf1c
commit 59858dd
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/src/components/Solutions/SourceCodeBox/SourceCodeBox.js b/src/components/Solutions/SourceCodeBox/SourceCodeBox.js
@@ -11,7 +11,9 @@ import ResourceRenderer from '../../helpers/ResourceRenderer';
 import Icon, { CodeCompareIcon, DownloadIcon, LoadingIcon, WarningIcon } from '../../icons';
 
 import { getPrismModeFromExtension } from '../../helpers/syntaxHighlighting';
-import { getFileExtensionLC } from '../../../helpers/common';
+import { getFileExtensionLC, simpleScalarMemoize } from '../../../helpers/common';
+
+const normalizeLineEndings = simpleScalarMemoize(content => content.replaceAll('\r', ''));
 
 const diffViewHighlightSyntax = lang => str =>
   str && (
@@ -201,8 +203,8 @@ const SourceCodeBox = ({
           ) : secondContent && !secondContent.malformedCharacters ? (
             <div className="diff-wrapper">
               <ReactDiffViewer
-                oldValue={content.content}
-                newValue={secondContent.content}
+                oldValue={normalizeLineEndings(content.content)}
+                newValue={normalizeLineEndings(secondContent.content)}
                 splitView={true}
                 renderContent={diffViewHighlightSyntax(getPrismModeFromExtension(getFileExtensionLC(name)))}
                 compareMethod={DiffMethod.WORDS_WITH_SPACE}

diff --git a/src/components/forms/ReviewCommentForm/ReviewCommentForm.js b/src/components/forms/ReviewCommentForm/ReviewCommentForm.js
@@ -47,7 +47,24 @@ const ReviewCommentForm = ({
               <FormattedMessage id="app.reviewCommentForm.labelEdit" defaultMessage="Modify existing commment:" />
             )}
           </FormLabel>
-          <Field name="text" component={MarkdownTextAreaField} validate={textValidator} />
+          <Field
+            name="text"
+            component={MarkdownTextAreaField}
+            validate={textValidator}
+            focus
+            commands={[
+              {
+                name: 'save',
+                bindKey: { win: 'Ctrl-enter', mac: 'Cmd-enter' },
+                exec: editor => {
+                  const button = editor.container.closest('.commentForm').querySelector('button[type=submit]');
+                  if (button) {
+                    button.click();
+                  }
+                },
+              },
+            ]}
+          />
           <hr />
         </Col>
       </Row>