@readme/syntax-highlighter 13.0.0 → 13.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@readme/syntax-highlighter",
   "description": "ReadMe's React-based syntax highlighter",
-  "version": "13.0.0",
+  "version": "13.1.0",
   "main": "dist/index.node.js",
   "browser": "dist/index.js",
   "license": "ISC",
@@ -27,10 +27,10 @@
     "codemirror": "^5.54.0",
     "codemirror-graphql": "1.0.2",
     "prop-types": "^15.7.2",
-    "react-codemirror2": "^7.2.1"
+    "react-codemirror2": "^8.0.0"
   },
   "peerDependencies": {
-    "@readme/variable": "15.x || 16.x",
+    "@readme/variable": "^16.2.0",
     "react": "16.x || 17.x || 18.x",
     "react-dom": "16.x || 17.x || 18.x"
   },
@@ -39,11 +39,11 @@
     "@babel/preset-react": "^7.24.1",
     "@readme/eslint-config": "^14.0.0",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.2",
+    "@testing-library/react": "^15.0.5",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
     "core-js": "^3.36.1",
-    "css-loader": "^6.7.3",
+    "css-loader": "^7.1.1",
     "eslint": "^8.57.0",
     "glob": "^10.3.12",
     "html-webpack-plugin": "^5.6.0",
@@ -52,9 +52,10 @@
     "jest-environment-jsdom": "^29.7.0",
     "node-sass": "^9.0.0",
     "prettier": "^3.2.5",
+    "prettier-2": "npm:prettier@^2.8.8",
     "regenerator-runtime": "^0.14.1",
     "sass-loader": "^13.3.2",
-    "style-loader": "^3.3.4",
+    "style-loader": "^4.0.0",
     "terser-webpack-plugin": "^5.3.10",
     "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4",

package/src/codeMirror/index.jsx

@@ -1,4 +1,4 @@
-import Variable, { VARIABLE_REGEXP, VariablesContext } from '@readme/variable';
+import Variable, { MDX_VARIABLE_REGEXP, VARIABLE_REGEXP, VariablesContext } from '@readme/variable';
 import CodeMirror from 'codemirror';
 import 'codemirror/addon/fold/brace-fold';
 import 'codemirror/addon/fold/foldgutter';
@@ -170,19 +170,26 @@ const extractVariables = (code, opts) => {
   let offsetDelta = 0;
   const variables = [];
 
-  const extracter = (match, capture, offset) => {
-    const unescaped = match.replace(/^\\<</, '<<').replace(/\\>>$/, '>>');
+  const extracter = (match, ...rest) => {
+    const unescaped = opts.mdx
+      ? match.replace(/^\\{/, '{').replace(/\\}$/, '}')
+      : match.replace(/^\\<</, '<<').replace(/\\>>$/, '>>');
+
     if (unescaped !== match) {
       return unescaped;
     }
 
+    const capture = rest[opts.mdx ? 1 : 0];
+    const offset = rest[opts.mdx ? 3 : 1];
+
     variables.push({ text: capture, offset: offset - offsetDelta });
     offsetDelta += match.length;
 
     return '';
   };
 
-  const codeWithoutVars = code.replace(new RegExp(VARIABLE_REGEXP, 'g'), extracter);
+  const regexp = opts.mdx ? MDX_VARIABLE_REGEXP : VARIABLE_REGEXP;
+  const codeWithoutVars = code.replace(new RegExp(regexp, 'g'), extracter);
 
   return [codeWithoutVars, makeReinserter(variables)];
 };
@@ -199,11 +206,16 @@ StyledSyntaxHighlighter.propTypes = {
  * @arg {{}} opts
  * @return {[Element]} Array of DOM Elements
  */
-const ReadmeCodeMirror = (code, lang, opts = { tokenizeVariables: false, highlightMode: false, ranges: [] }) => {
+const ReadmeCodeMirror = (
+  code,
+  lang,
+  opts = { tokenizeVariables: false, highlightMode: false, ranges: [] },
+  { mdx = false } = {},
+) => {
   const mode = getMode(lang);
   const output = [];
 
-  const [codeWithoutVars, reinsertVariables] = extractVariables(code, { scrollbarStyle: 'overlay', ...opts });
+  const [codeWithoutVars, reinsertVariables] = extractVariables(code, { scrollbarStyle: 'overlay', mdx, ...opts });
 
   let curStyle = null;
   let accum = '';

package/src/index.js

@@ -18,8 +18,10 @@ const SyntaxHighlighter = (
     inline: false,
     tokenizeVariables: false,
   },
-  editorProps = {},
+  props = {},
 ) => {
+  // eslint-disable-next-line react/prop-types
+  const { mdx, ...editorProps } = props;
   let theme = opts.dark ? 'material-palenight' : 'neo';
   if (opts.customTheme) {
     theme = opts.customTheme;
@@ -57,7 +59,7 @@ const SyntaxHighlighter = (
   return React.createElement(
     wrapper,
     { className: classes.join(' '), 'data-testid': 'SyntaxHighlighter' },
-    codemirror(typeof code === 'string' ? code : '', lang, opts),
+    codemirror(typeof code === 'string' ? code : '', lang, opts, { mdx }),
   );
 };