ktl-616 chore: support CodeMirror's scrollbar style param

JetBrains · Jan 11, 2022 · 2c4fbf3 · 2c4fbf3
1 parent c1a1ef1
commit 2c4fbf3
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -233,6 +233,8 @@ Use the following attributes on elements that are converted to editors to adjust
 
 - `data-shorter-height="100"`: show expander if height more than value of attribute
 
+- `data-scrollbar-style`: Chooses a [scrollbar implementation](https://codemirror.net/doc/manual.html#config). Defaults to `overlay`.
+
 ## Supported keyboard shortcuts
 
   - Ctrl+Space		   — code completion

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kotlin-playground",
-  "version": "1.27.0",
+  "version": "1.27.1",
   "description": "Self-contained component to embed in websites for running Kotlin code",
   "keywords": [
     "kotlin",

diff --git a/src/executable-code/executable-fragment.js b/src/executable-code/executable-fragment.js
@@ -475,7 +475,7 @@ export default class ExecutableFragment extends ExecutableCodeTemplate {
       mode: options.mode,
       theme: options.theme,
       matchBrackets: options.matchBrackets,
-      scrollbarStyle: 'overlay',
+      scrollbarStyle: options.scrollbarStyle || 'overlay',
       continueComments: true,
       autoCloseBrackets: true,
       indentUnit: options.indent,

diff --git a/src/executable-code/index.js b/src/executable-code/index.js
@@ -58,7 +58,8 @@ const ATTRIBUTES = {
   LINES: 'lines',
   AUTO_INDENT: 'auto-indent',
   TRACK_RUN_ID: 'data-track-run-id',
-  CROSSLINK: 'data-crosslink'
+  CROSSLINK: 'data-crosslink',
+  SCROLLBAR_STYLE: 'data-scrollbar-style'
 };
 
 const MODES = {
@@ -104,6 +105,7 @@ export default class ExecutableCode {
     const autoIndent = targetNode.getAttribute(ATTRIBUTES.AUTO_INDENT) === "true";
     const dataTrackRunId = targetNode.getAttribute(ATTRIBUTES.TRACK_RUN_ID);
     const dataShorterHeight = targetNode.getAttribute(ATTRIBUTES.SHORTER_HEIGHT);
+    const dataScrollbarStyle = targetNode.getAttribute(ATTRIBUTES.SCROLLBAR_STYLE);
     const mode = this.getMode(targetNode);
     const code = replaceWhiteSpaces(targetNode.textContent);
     const cfg = merge(defaultConfig, config);
@@ -171,7 +173,8 @@ export default class ExecutableCode {
       isFoldedButton: isFoldedButton,
       dataTrackRunId,
       shorterHeight,
-      outputHeight
+      outputHeight,
+      scrollbarStyle: dataScrollbarStyle
     }, eventFunctions));
 
     this.config = cfg;