Indentation lines (scalacenter#1002)

client/src/main/scala/com.olegych.scastie.client/ScastieState.scala

@@ -50,7 +50,7 @@ object ScastieState {
       modalState =
         if (isEmbedded) ModalState.allClosed
         else ModalState.default,
-      isDarkTheme = false,
+      isDarkTheme = org.scalajs.dom.window.matchMedia("(prefers-color-scheme: dark)").matches,
       isDesktopForced = false,
       isPresentationMode = false,
       showLineNumbers = true,

client/src/main/scala/com.olegych.scastie.client/components/editor/CodeEditor.scala

@@ -57,6 +57,7 @@ object CodeEditor {
 
       val syntaxHighlighting = new SyntaxHighlightingPlugin(editorView)
       val extensions = js.Array[Any](
+        Editor.editorTheme.of(props.codemirrorTheme),
         lineNumbers(),
         highlightSpecialChars(),
         history(),
@@ -69,6 +70,7 @@ object CodeEditor {
         rectangularSelection(),
         crosshairCursor(),
         highlightSelectionMatches(),
+        Editor.indentationMarkersExtension,
         keymap.of(closeBracketsKeymap ++ defaultKeymap ++ historyKeymap ++ foldKeymap ++ completionKeymap ++ lintKeymap ++ searchKeymap),
         StateField
           .define(StateFieldSpec[Set[api.Instrumentation]](_ => props.instrumentations, (value, _) => value))
@@ -140,7 +142,7 @@ object CodeEditor {
       editorView: UseStateF[CallbackTo, EditorView]
   ): Callback = {
     Editor.updateCode(editorView, props) >>
-      Editor.updateTheme(ref, prevProps, props) >>
+      Editor.updateTheme(ref, prevProps, props, editorView) >>
       updateDiagnostics(editorView, prevProps, props) >>
       DecorationProvider.updateDecorations(editorView, prevProps, props) >>
       InteractiveProvider.reloadMetalsConfiguration(editorView, prevProps, props)

client/src/main/scala/com.olegych.scastie.client/components/editor/Editor.scala

@@ -1,27 +1,46 @@
 package com.olegych.scastie.client.components.editor
 
 import japgolly.scalajs.react._
+import org.scalablytyped.runtime.StringDictionary
 import org.scalajs.dom.Element
 import typings.codemirrorState.mod._
+import typings.codemirrorView.anon
 import typings.codemirrorView.mod._
+import typings.replitCodemirrorIndentationMarkers.anon.ActiveDark
+import typings.replitCodemirrorIndentationMarkers.mod._
 
 import scalajs.js
 import vdom.all._
 
 trait Editor {
   val isDarkTheme: Boolean
   val value: String
+
+  lazy val codemirrorTheme = EditorView.theme(StringDictionary(), anon.Dark().setDark(isDarkTheme))
 }
 
 object Editor {
+  val editorTheme = new Compartment()
+
+  private val indentationMarkersColors = ActiveDark()
+    .setDark("#2a4c55")
+    .setActiveDark("#3f5e66")
+
+  val indentationMarkersExtension = indentationMarkers(
+    IndentationMarkerConfiguration()
+      .setColors(indentationMarkersColors)
+      .setThickness(2.0)
+  )
+
   def render(ref: Ref.Simple[Element]): VdomElement =
     div(cls := "editor-wrapper cm-s-solarized cm-s-light").withRef(ref)
 
-  def updateTheme(ref: Ref.Simple[Element], prevProps: Option[Editor], props: Editor): Callback =
+  def updateTheme(ref: Ref.Simple[Element], prevProps: Option[Editor], props: Editor, editorView: hooks.Hooks.UseStateF[CallbackTo, EditorView]): Callback =
     ref
       .foreach(ref => {
-        val theme = if (props.isDarkTheme) "dark" else "light"
-        ref.setAttribute("class", s"editor-wrapper cm-s-solarized cm-s-$theme")
+        val cssTheme = if (props.isDarkTheme) "dark" else "light"
+        editorView.value.dispatch(TransactionSpec().setEffects(editorTheme.reconfigure(props.codemirrorTheme)))
+        ref.setAttribute("class", s"editor-wrapper cm-s-solarized cm-s-$cssTheme")
       })
       .when_(prevProps.map(_.isDarkTheme != props.isDarkTheme).getOrElse(true))
 

client/src/main/scala/com.olegych.scastie.client/components/editor/SimpleEditor.scala

@@ -25,6 +25,8 @@ object SimpleEditor {
   private def init(props: SimpleEditor, ref: Ref.Simple[Element], editorView: UseStateF[CallbackTo, EditorView]): Callback =
     ref.foreachCB(divRef => {
       val basicExtensions = js.Array[Any](
+        Editor.editorTheme.of(props.codemirrorTheme),
+        Editor.indentationMarkersExtension,
         typings.codemirror.mod.minimalSetup,
         mod.StreamLanguage.define(typings.codemirrorLegacyModes.modeClikeMod.scala_),
         SyntaxHighlightingTheme.highlightingTheme,
@@ -57,7 +59,7 @@ object SimpleEditor {
       editorView: UseStateF[CallbackTo, EditorView]
   ): Callback = {
     Editor.updateCode(editorView, props) >>
-      Editor.updateTheme(ref, prevProps, props)
+      Editor.updateTheme(ref, prevProps, props, editorView)
   }
 
   val hooksComponent =

package.json

@@ -22,6 +22,7 @@
     "@codemirror/view": "^6.22.3",
     "@lezer/common": "^1.0.3",
     "@lezer/highlight": "^1.1.6",
+    "@replit/codemirror-indentation-markers": "^6.5.0",
     "@scala-js/vite-plugin-scalajs": "^1.0.0",
     "@sentry/browser": "^7.84.0",
     "@sentry/tracing": "^7.60.1",

yarn.lock

@@ -317,6 +317,11 @@
   dependencies:
     "@lezer/common" "^1.0.0"
 
+"@replit/codemirror-indentation-markers@^6.5.0":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@replit/codemirror-indentation-markers/-/codemirror-indentation-markers-6.5.0.tgz#e853e406cf05fea13449578c6c9c1383c6feb219"
+  integrity sha512-5RgeuQ6erfROi1EVI2X7G4UR+KByjb07jhYMynvpvlrV22JlnARifmKMGEUKy0pKcxBNfwbFqoUlTYHPgyZNlg==
+
 "@rollup/[email protected]":
   version "4.9.1"
   resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.1.tgz#beaf518ee45a196448e294ad3f823d2d4576cf35"