@readme/syntax-highlighter 12.0.2 → 12.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@readme/syntax-highlighter",
   "description": "ReadMe's React-based syntax highlighter",
-  "version": "12.0.2",
+  "version": "12.1.0",
   "main": "dist/index.node.js",
   "browser": "dist/index.js",
   "license": "ISC",
@@ -37,35 +37,35 @@
     "react-dom": "16.x || 17.x"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.18.9",
+    "@babel/preset-env": "^7.21.4",
     "@babel/preset-react": "^7.14.5",
-    "@commitlint/cli": "^17.0.2",
-    "@commitlint/config-conventional": "^17.0.2",
-    "@readme/eslint-config": "^10.1.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
-    "babel-jest": "^29.0.1",
+    "@commitlint/cli": "^17.6.1",
+    "@commitlint/config-conventional": "^17.6.1",
+    "@readme/eslint-config": "^10.5.2",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
+    "babel-jest": "^29.5.0",
     "babel-loader": "^8.2.4",
-    "core-js": "^3.23.5",
-    "css-loader": "^6.7.1",
+    "core-js": "^3.30.1",
+    "css-loader": "^6.7.3",
     "enzyme": "^3.11.0",
-    "eslint": "^8.20.0",
-    "glob": "^8.0.1",
-    "html-webpack-plugin": "^5.3.2",
-    "husky": "^8.0.1",
+    "eslint": "^8.38.0",
+    "glob": "^9.3.4",
+    "html-webpack-plugin": "^5.5.1",
+    "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.0.1",
-    "jest-environment-jsdom": "^29.0.1",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
     "node-sass": "^7.0.3",
-    "prettier": "^2.6.1",
+    "prettier": "^2.8.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "regenerator-runtime": "^0.13.9",
-    "sass-loader": "^13.0.0",
-    "style-loader": "^3.2.1",
-    "terser-webpack-plugin": "^5.2.4",
-    "webpack": "^5.70.0",
-    "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "^4.2.1"
+    "sass-loader": "^13.2.2",
+    "style-loader": "^3.3.2",
+    "terser-webpack-plugin": "^5.3.7",
+    "webpack": "^5.80.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.13.3"
   },
   "prettier": "@readme/eslint-config/prettier",
   "commitlint": {

package/public/index.js

@@ -34,6 +34,46 @@ const exampleJson = `{
   }
   `;
 
+const exampleMarkdown = `# Custom Scrollbars
+
+This is a piece of text that creates scrollbars
+
+Lorem ipsum dolor sit amet, turpis nec facilisis neque vestibulum adipiscing, magna nunc est luctus orci a,
+aliquam duis ad volutpat nostra. Vestibulum ultricies suspendisse commodo volutpat pede sed. Bibendum odio
+dignissim, ad vitae mollis ac sed nibh quis, suspendisse diam, risus quas blandit phasellus luctus nec,
+integer nunc vitae posuere scelerisque. Lobortis quam porta conubia nulla. Et nisl ac, imperdiet vitae ac.
+Parturient sit. Et vestibulum euismod, rutrum nunc libero mauris purus convallis. Cum id adipiscing et eget
+pretium rutrum, ultrices sapien magnis fringilla sit lorem, eu vitae scelerisque ipsum aliquet, magna sed
+fusce vel.
+
+Lectus ultricies libero dolor convallis, sed etiam vel hendrerit egestas viverra, at urna mauris, eget
+vulputate dolor voluptatem, nulla eget sollicitudin. Sed tincidunt, elit sociis. Mattis mi tortor dui id
+sodales mi, maecenas nam fringilla risus turpis mauris praesent, imperdiet maecenas ultrices nonummy tellus
+quis est. Scelerisque nec pharetra quis varius fringilla. Varius vestibulum non dictum pharetra, tincidunt in
+vestibulum iaculis molestie, id condimentum blandit elit urna magna pulvinar, quam suspendisse pellentesque
+donec. Vel amet ad ac. Nec aut viverra, morbi mi neque massa, turpis enim proin. Tellus eu, fermentum velit
+est convallis aliquam velit, rutrum in diam lacus, praesent tempor pellentesque dictum semper augue. Felis
+explicabo massa amet lectus phasellus dolor. Ut lorem quis arcu neque felis ultricies, senectus vitae
+curabitur sed pellentesque et, id sed risus in sed ac accumsan, blandit arcu quam duis nunc.
+
+Sed leo sollicitudin odio vitae, purus sit egestas, justo eros inceptos auctor fermentum lectus. Ligula luctus
+turpis, quod massa vitae elementum orci, nullam fringilla elit tortor. Justo ante tempor amet quam posuere
+volutpat. Facilisis pede erat ut hac ultrices ipsum, wisi duis sit metus. Dolor vitae est sed sed vitae. Sed
+eu ligula, morbi vestibulum nunc nibh velit ut taciti, ligula elit semper sagittis in, auctor arcu vel eget.
+Mauris at vitae nec suspendisse et, aenean proin blandit suscipit. Morbi quam, dolor ultricies. Viverra
+tempus. Suspendisse sit dapibus, ac fuga aenean, magna nisl nonummy augue posuere, dictum ut fuga velit
+parturient augue interdum, mattis sit tellus.
+
+Vehicula commodo tempus curabitur eros, lacinia erat vulputate lorem vel fermentum donec, lectus sed conubia
+id pellentesque. Vel senectus donec pede aliquet dolor sit, nec vivamus justo placerat interdum maecenas,
+sodales euismod. Quis netus sapien amet, vestibulum quam nec amet lacinia, quis aliquet, tempor vivamus tellus
+enim, suscipit quis eleifend. Amet class phasellus orci pretium, risus in nulla. Neque sit ullamcorper,
+ultricies platea id nec suspendisse ac. Et elementum. Dictum nam, ut dui fermentum egestas facilisis elit
+augue, adipiscing donec ipsum erat nam pellentesque convallis, vestibulum vestibulum risus id nulla ut mauris,
+curabitur aute aptent. Ultrices orci wisi dui ipsum praesent, pharetra felis eu quis. Est fringilla etiam,
+maxime sem dapibus et eget, mi enim dignissim nec pretium, augue vehicula, volutpat proin. Et occaecati
+lobortis viverra, cum in sed, vivamus tellus. Libero at malesuada est vivamus leo tortor.`;
+
 ReactDOM.render(
   <div style={{ margin: '20px' }}>
     <h1>Core Syntax Highlighter</h1>
@@ -103,10 +143,14 @@ ReactDOM.render(
     <hr />
     <h1>Code Editor</h1>
     <h2>Dark Theme</h2>
-    <pre id="hub-reference">{syntaxHighlighter(exampleCode, 'curl', { editable: true, dark: true })}</pre>
+    <pre id="hub-reference">
+      {syntaxHighlighter(exampleMarkdown, 'md', { scrollbarStyle: 'overlay', editable: true, dark: true })}
+    </pre>
 
     <h2>Light Theme</h2>
-    <pre id="hub-reference">{syntaxHighlighter(exampleCode, 'curl', { editable: true, dark: false })}</pre>
+    <pre id="hub-reference">
+      {syntaxHighlighter(exampleMarkdown, 'md', { scrollbarStyle: 'overlay', editable: true, dark: false })}
+    </pre>
 
     <hr />
     <h1>Code Folding</h1>

package/src/codeMirror/index.jsx

@@ -3,6 +3,8 @@ import CodeMirror from 'codemirror';
 import 'codemirror/addon/fold/brace-fold';
 import 'codemirror/addon/fold/foldgutter';
 import 'codemirror/addon/runmode/runmode';
+import 'codemirror/addon/scroll/simplescrollbars';
+import 'codemirror/addon/scroll/simplescrollbars.css';
 import 'codemirror/mode/meta';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -195,7 +197,7 @@ const ReadmeCodeMirror = (code, lang, opts = { tokenizeVariables: false, highlig
   const mode = getMode(lang);
   const output = [];
 
-  const [codeWithoutVars, reinsertVariables] = extractVariables(code, opts);
+  const [codeWithoutVars, reinsertVariables] = extractVariables(code, { scrollbarStyle: 'overlay', ...opts });
 
   let curStyle = null;
   let accum = '';

package/src/codeMirror/style.scss

@@ -58,6 +58,20 @@ $lightHighlight: rgba($lightColor, 0.1);
   }
 }
 
+// Custom scrollbar styles
+// see: https://codemirror.net/5/demo/simplescrollbars.html
+.CodeMirror {
+  &-scrollbar-filler {
+    display: none !important;
+  }
+  &-overlayscroll {
+    &-horizontal div,
+    &-vertical div {
+      background: rgba(#cacaca, 0.5) !important;
+    }
+  }
+}
+
 .cm-linerow {
   position: relative;
   text-indent: $gutterWidth + 4px;