Merge pull request #140 from JetBrains/ktl-616-scrollbar-options

ktl-616 Support CodeMirror's Scrollbar Style param
JetBrains · Jan 12, 2022 · 3be3c20 · 3be3c20
2 parents f45153c + 2c4fbf3
commit 3be3c20
Show file tree

Hide file tree

Showing 5 changed files with 597 additions and 337 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",
@@ -42,10 +42,10 @@
     "monkberry-directives": "4.0.8",
     "monkberry-events": "4.0.8",
     "monkberry-loader": "4.0.9",
-    "node-sass": "^4.12.0",
+    "node-sass": "6.0.1",
     "postcss-loader": "3.0.0",
     "query-string": "^6.5.0",
-    "sass-loader": "7.1.0",
+    "sass-loader": "10.2.0",
     "shelljs": "^0.8.3",
     "style-loader": "^0.23.1",
     "svg-fill-loader": "0.0.8",

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;