From 234fffa4a87106b3cac433c723c5cd432355ce0b Mon Sep 17 00:00:00 2001
From: Ashar Fuadi <fushar@gmail.com>
Date: Sat, 16 Dec 2023 10:22:29 +0700
Subject: [PATCH] feat(client): support source code syntax highlighting in
 statement text

---
 .../LessonStatementCard.jsx                   |  4 +--
 .../ProblemEditorial/ProblemEditorial.jsx     |  4 +--
 .../ProblemEditorialCard.jsx                  |  4 +--
 .../ProblemStatementCard.jsx                  |  4 +--
 .../RichStatementText.jsx}                    | 32 ++++++++++++++++---
 .../RichStatementText.scss}                   |  2 +-
 .../src/components/SourceCode/SourceCode.jsx  |  4 +--
 judgels-client/src/styles/index.scss          |  8 ++++-
 8 files changed, 45 insertions(+), 17 deletions(-)
 rename judgels-client/src/components/{KatexText/KatexText.jsx => RichStatementText/RichStatementText.jsx} (54%)
 rename judgels-client/src/components/{KatexText/KatexText.scss => RichStatementText/RichStatementText.scss} (77%)

diff --git a/judgels-client/src/components/LessonStatementCard/LessonStatementCard.jsx b/judgels-client/src/components/LessonStatementCard/LessonStatementCard.jsx
index bfe820641..eb412c44f 100644
--- a/judgels-client/src/components/LessonStatementCard/LessonStatementCard.jsx
+++ b/judgels-client/src/components/LessonStatementCard/LessonStatementCard.jsx
@@ -1,5 +1,5 @@
 import { ContentCard } from '../ContentCard/ContentCard';
-import { KatexText } from '../KatexText/KatexText';
+import RichStatementText from '../RichStatementText/RichStatementText';
 
 import './LessonStatementCard.scss';
 
@@ -10,7 +10,7 @@ export function LessonStatementCard({ alias, statement }) {
         {alias}. {statement.title}
       </h2>
       <div className="lesson-statement__text">
-        <KatexText key={alias}>{statement.text}</KatexText>
+        <RichStatementText key={alias}>{statement.text}</RichStatementText>
       </div>
     </ContentCard>
   );
diff --git a/judgels-client/src/components/ProblemEditorial/ProblemEditorial.jsx b/judgels-client/src/components/ProblemEditorial/ProblemEditorial.jsx
index 9458ff8ac..45ea10e65 100644
--- a/judgels-client/src/components/ProblemEditorial/ProblemEditorial.jsx
+++ b/judgels-client/src/components/ProblemEditorial/ProblemEditorial.jsx
@@ -1,7 +1,7 @@
 import { Fragment } from 'react';
 
 import { UserRef } from '../UserRef/UserRef';
-import { KatexText } from '../KatexText/KatexText';
+import RichStatementText from '../RichStatementText/RichStatementText';
 
 export function ProblemEditorial({ title, settersMap, profilesMap, children }) {
   const renderWriters = () => {
@@ -70,7 +70,7 @@ export function ProblemEditorial({ title, settersMap, profilesMap, children }) {
         {renderEditorialists()}
       </ul>
       <hr />
-      <KatexText key={title}>{children}</KatexText>
+      <RichStatementText key={title}>{children}</RichStatementText>
     </div>
   );
 }
diff --git a/judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemEditorialCard/ProblemEditorialCard.jsx b/judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemEditorialCard/ProblemEditorialCard.jsx
index fd1a196d8..e2db138bb 100644
--- a/judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemEditorialCard/ProblemEditorialCard.jsx
+++ b/judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemEditorialCard/ProblemEditorialCard.jsx
@@ -1,5 +1,5 @@
 import { ContentCard } from '../../../ContentCard/ContentCard';
-import { KatexText } from '../../../KatexText/KatexText';
+import RichStatementText from '../../../RichStatementText/RichStatementText';
 
 export function ProblemEditorialCard({ alias, statement: { title }, editorial: { text }, titleSuffix }) {
   return (
@@ -10,7 +10,7 @@ export function ProblemEditorialCard({ alias, statement: { title }, editorial: {
         {titleSuffix}
       </h2>
       <div className="programming-problem-statement__text">
-        <KatexText key={alias}>{text}</KatexText>
+        <RichStatementText key={alias}>{text}</RichStatementText>
       </div>
     </ContentCard>
   );
diff --git a/judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemStatementCard/ProblemStatementCard.jsx b/judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemStatementCard/ProblemStatementCard.jsx
index e82693fa1..583f1399f 100644
--- a/judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemStatementCard/ProblemStatementCard.jsx
+++ b/judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemStatementCard/ProblemStatementCard.jsx
@@ -1,7 +1,7 @@
 import { HTMLTable } from '@blueprintjs/core';
 
 import { ContentCard } from '../../../ContentCard/ContentCard';
-import { KatexText } from '../../../KatexText/KatexText';
+import RichStatementText from '../../../RichStatementText/RichStatementText';
 
 import './ProblemStatementCard.scss';
 
@@ -45,7 +45,7 @@ export function ProblemStatementCard({ alias, statement: { title, text }, limits
         </tbody>
       </HTMLTable>
       <div className="programming-problem-statement__text">
-        <KatexText key={alias}>{text}</KatexText>
+        <RichStatementText key={alias}>{text}</RichStatementText>
       </div>
     </ContentCard>
   );
diff --git a/judgels-client/src/components/KatexText/KatexText.jsx b/judgels-client/src/components/RichStatementText/RichStatementText.jsx
similarity index 54%
rename from judgels-client/src/components/KatexText/KatexText.jsx
rename to judgels-client/src/components/RichStatementText/RichStatementText.jsx
index 6d62ef84e..17d054277 100644
--- a/judgels-client/src/components/KatexText/KatexText.jsx
+++ b/judgels-client/src/components/RichStatementText/RichStatementText.jsx
@@ -1,10 +1,15 @@
-import { createRef, PureComponent } from 'react';
+import HTMLReactParser from 'html-react-parser';
+import render from 'preact-render-to-string';
+import { createRef, Component } from 'react';
+import { connect } from 'react-redux';
 
 import { HtmlText } from '../HtmlText/HtmlText';
+import { SourceCode } from '../SourceCode/SourceCode';
+import { selectIsDarkMode } from '../../modules/webPrefs/webPrefsSelectors';
 
-import './KatexText.scss';
+import './RichStatementText.scss';
 
-export class KatexText extends PureComponent {
+export class RichStatementText extends Component {
   ref;
 
   constructor(props) {
@@ -54,10 +59,27 @@ export class KatexText extends PureComponent {
   }
 
   render() {
+    const { isDarkMode, children } = this.props;
+
+    let str = children;
+
+    str = str.replace(/<pre data-lang="(.+?)">(.*?)<\/pre>/gs, (match, lang, code) => {
+      return render(
+        <SourceCode isDarkMode={isDarkMode} language={lang} showLineNumbers={false}>
+          {HTMLReactParser(code.trim())}
+        </SourceCode>
+      );
+    });
+
     return (
-      <div className="katex-wrapper" ref={this.ref}>
-        <HtmlText>{this.props.children}</HtmlText>
+      <div className="rich-statement-text" ref={this.ref}>
+        <HtmlText>{str}</HtmlText>
       </div>
     );
   }
 }
+const mapStateToProps = state => ({
+  isDarkMode: selectIsDarkMode(state),
+});
+
+export default connect(mapStateToProps)(RichStatementText);
diff --git a/judgels-client/src/components/KatexText/KatexText.scss b/judgels-client/src/components/RichStatementText/RichStatementText.scss
similarity index 77%
rename from judgels-client/src/components/KatexText/KatexText.scss
rename to judgels-client/src/components/RichStatementText/RichStatementText.scss
index b652f0521..a04f8f1f3 100644
--- a/judgels-client/src/components/KatexText/KatexText.scss
+++ b/judgels-client/src/components/RichStatementText/RichStatementText.scss
@@ -1,6 +1,6 @@
 @import '../../styles/base';
 
-.katex-wrapper {
+.rich-statement-text {
   .katex {
     font-size: 16px !important;
   }
diff --git a/judgels-client/src/components/SourceCode/SourceCode.jsx b/judgels-client/src/components/SourceCode/SourceCode.jsx
index 607f01f30..2a744bb1b 100644
--- a/judgels-client/src/components/SourceCode/SourceCode.jsx
+++ b/judgels-client/src/components/SourceCode/SourceCode.jsx
@@ -20,14 +20,14 @@ registerLanguage('pascal', pascal);
 registerLanguage('python', python);
 registerLanguage('rust', rust);
 
-function SourceCode({ isDarkMode, language, children }) {
+export function SourceCode({ isDarkMode, language, showLineNumbers = true, children }) {
   return (
     <SyntaxHighlighter
       className="source-code"
       style={isDarkMode ? tomorrow : coy}
       language={language}
       wrapLines={true}
-      showLineNumbers={true}
+      showLineNumbers={showLineNumbers}
       lineNumberContainerStyle={{
         backgroundColor: isDarkMode ? '#394B59' : '#f0f0f0',
         float: 'left',
diff --git a/judgels-client/src/styles/index.scss b/judgels-client/src/styles/index.scss
index ee99aa7fd..6e312228e 100644
--- a/judgels-client/src/styles/index.scss
+++ b/judgels-client/src/styles/index.scss
@@ -165,7 +165,13 @@ pre {
 }
 
 pre.source-code {
-  background-color: inherit !important;
+  border-color: #cccccc;
+  background-color: #f5f5f5 !important;
+}
+
+.bp4-dark pre.source-code {
+  border-color: $dark-gray2;
+  background-color: $dark-gray3 !important;
 }
 
 em {