From 66e442fb774f1f32dfd6d0d043f610b5ed588fab Mon Sep 17 00:00:00 2001
From: jorg-vr <jorg.vr@live.be>
Date: Wed, 6 Dec 2023 13:50:41 +0100
Subject: [PATCH] Apply dodona theme to papyros

---
 app/assets/javascripts/coding_scratchpad.ts   | 11 ++++---
 app/assets/javascripts/editor.ts              |  2 +-
 .../components/scratchpad.css.scss            | 30 ++++++++++++++++++
 .../stylesheets/theme/codemirror.css.scss     | 31 +++++++++++++++++--
 .../activities/_coding_scratchpad.html.erb    |  2 +-
 5 files changed, 68 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/coding_scratchpad.ts b/app/assets/javascripts/coding_scratchpad.ts
index 3745d28d84..11d0bf7a12 100644
--- a/app/assets/javascripts/coding_scratchpad.ts
+++ b/app/assets/javascripts/coding_scratchpad.ts
@@ -1,9 +1,8 @@
-import { Papyros } from "@dodona/papyros";
-import { InputMode } from "@dodona/papyros";
-import { ProgrammingLanguage } from "@dodona/papyros";
+import { CodeEditor, InputMode, Papyros, ProgrammingLanguage } from "@dodona/papyros";
 import { themeState } from "state/Theme";
 import { EditorView } from "@codemirror/view";
-import { setCode } from "editor";
+import { rougeStyle, setCode } from "editor";
+import { syntaxHighlighting } from "@codemirror/language";
 
 /** Identifiers used in HTML for relevant elements */
 const CODE_EDITOR_PARENT_ID = "scratchpad-editor-wrapper";
@@ -76,6 +75,10 @@ function initCodingScratchpad(programmingLanguage: ProgrammingLanguage): void {
                     darkMode: themeState.theme === "dark"
                 });
                 await papyros.launch();
+
+                papyros.codeRunner.editor.reconfigure([CodeEditor.STYLE, syntaxHighlighting(rougeStyle, {
+                    fallback: true
+                })]);
             }
         });
         // Ask user to choose after offcanvas is shown
diff --git a/app/assets/javascripts/editor.ts b/app/assets/javascripts/editor.ts
index f416a59454..ab5ed15bcb 100644
--- a/app/assets/javascripts/editor.ts
+++ b/app/assets/javascripts/editor.ts
@@ -29,7 +29,7 @@ declare type EditorEventHandler = (event: FocusEvent, view: EditorView) => boole
 
 // A custom theme for CodeMirror that applies the same CSS as Rouge does,
 // meaning we can use our existing themes.
-const rougeStyle = HighlightStyle.define([
+export const rougeStyle = HighlightStyle.define([
     { tag: tags.comment, class: "c" },
     { tag: tags.lineComment, class: "c" },
     { tag: tags.blockComment, class: "cm" },
diff --git a/app/assets/stylesheets/components/scratchpad.css.scss b/app/assets/stylesheets/components/scratchpad.css.scss
index 7c35ed0647..8a0aa34cd4 100644
--- a/app/assets/stylesheets/components/scratchpad.css.scss
+++ b/app/assets/stylesheets/components/scratchpad.css.scss
@@ -57,6 +57,10 @@
 // Wrapper around editor provides margin
 #scratchpad-editor-wrapper {
   margin-bottom: 20px;
+
+  :focus-visible {
+    outline: none;
+  }
 }
 
 // Wrapper and its child should take up as much space as possible
@@ -86,3 +90,29 @@
 #scratchpad-offcanvas.show {
   @include shadow-z3;
 }
+
+/* stylelint-disable selector-class-pattern */
+.tailwind ._tw-border-gray-200 {
+  border-color: var(--d-divider) !important;
+}
+
+.tailwind :is(._tw-dark .dark\:_tw-border-dark-mode-content) {
+  border-color: var(--d-divider) !important;
+}
+
+.tailwind * {
+  border-color: var(--d-divider) !important;
+}
+/* stylelint-enable selector-class-pattern */
+
+/* stylelint-disable selector-id-pattern */
+#__papyros-code-input-area {
+  background-color: var(--d-code-bg) !important;
+  color: var(--d-on-background);
+  caret-color: var(--d-secondary);
+}
+/* stylelint-enable selector-id-pattern */
+
+#scratchpad-panel-wrapper {
+  border-bottom: 0 !important;
+}
diff --git a/app/assets/stylesheets/theme/codemirror.css.scss b/app/assets/stylesheets/theme/codemirror.css.scss
index c5a12b9276..e089b3e848 100644
--- a/app/assets/stylesheets/theme/codemirror.css.scss
+++ b/app/assets/stylesheets/theme/codemirror.css.scss
@@ -25,9 +25,9 @@
     background: var(--d-surface-variant) !important;
   }
 
-  .cm-cursor {
+  .cm-cursor, .cm-dropCursor {
     // Sets the color of the cursor.
-    border-left: 1.2px solid var(--d-secondary);
+    border-left: 1.2px solid var(--d-secondary) !important;
   }
 
   .cm-tooltip {
@@ -41,5 +41,32 @@
       color: var(--d-on-secondary) !important;
     }
   }
+
+  .cm-panels {
+    background-color: var(--d-background);
+    color: var(--d-on-background);
+
+    &.cm-panels-top {
+      border-bottom: 2px solid var(--d-divider);
+    }
+
+    &.cm-panels-bottom {
+      border-top: 2px solid var(--d-divider);
+    }
+  }
+
+  .cm-searchMatch {
+    background-color: rgba(var(--d-secondary-rgb), 0.3);
+  }
+
+  .cm-searchMatch.cm-searchMatch-selected {
+    background-color: rgba(var(--d-surface-variant-rgb), 0.3);
+    outline: 1px solid var(--d-outline);
+  }
+
+  .cm-selectionMatch {
+    background-color: rgba(var(--d-secondary-rgb), 0.3);
+  }
+
   /* stylelint-enable selector-class-pattern */
 }
diff --git a/app/views/activities/_coding_scratchpad.html.erb b/app/views/activities/_coding_scratchpad.html.erb
index 40004030fc..aa7e4a3095 100644
--- a/app/views/activities/_coding_scratchpad.html.erb
+++ b/app/views/activities/_coding_scratchpad.html.erb
@@ -22,7 +22,7 @@ data-bs-target="#scratchpad-offcanvas" aria-controls="scratchpad-offcanvas" id="
         <%= t ".experimental_feature_html", :url => contact_path %>
     </div>
     <div class="offcanvas-body scratchpad-content">
-        <div id="scratchpad-editor-wrapper"></div>
+        <div id="scratchpad-editor-wrapper" class="highlighter-rouge"></div>
         <div id="scratchpad-panel-wrapper"></div>
         <div id="scratchpad-output-wrapper"></div>
         <div id="scratchpad-input-wrapper"></div>