Allow for larger indentation in the CodePane (#908)

FormidableLabs · May 29, 2020 · 930d8d3 · 930d8d3
1 parent e36c9ff
commit 930d8d3
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## Unreleased
+
+- Allow for user-supplied indentation size in the CodePane.
+  [#908](https://github.com/FormidableLabs/spectacle/pull/908)
+
 ## 6.1.0 (05-28-2020)
 
 - Remove references to PropTypes from type definitions.

diff --git a/docs/content/api-reference.md b/docs/content/api-reference.md
@@ -101,6 +101,7 @@ Additionally, `highlightStart` and `highlightEnd` props can be used to highlight
 | `fontSize`       | PropTypes.number                                                                             | `16`                  |
 | `highlightEnd`   | PropTypes.number                                                                             | `2`                   |
 | `highlightStart` | PropTypes.number                                                                             | `1`                   |
+| `indentSize`     | PropTypes.number                                                                             | `2`                   |
 | `language`       | PropTypes.string                                                                             | `javascript`          |
 | `theme`          | [Prism Theme](https://github.com/FormidableLabs/prism-react-renderer/tree/master/src/themes) | —                     |
 

diff --git a/index.d.ts b/index.d.ts
@@ -68,6 +68,7 @@ declare module 'spectacle' {
     };
     highlightStart?: number;
     highlightEnd?: number;
+    indentSize?: number;
   }>;
 
   export const Stepper: React.FC<{

diff --git a/src/components/code-pane.js b/src/components/code-pane.js
@@ -78,7 +78,8 @@ export default function CodePane(props) {
       if (indentation === 0) {
         return 0;
       }
-      const string = ' '.repeat(indentation);
+      const indentString = ' '.repeat(props.indentSize) || ' ';
+      const string = indentString.repeat(indentation);
       context.current.font = `${props.fontSize}px ${font}`;
       const measurement = context.current.measureText(string);
       return measurement.width;
@@ -156,9 +157,10 @@ CodePane.propTypes = {
   autoFillHeight: propTypes.bool,
   children: propTypes.string.isRequired,
   fontSize: propTypes.number,
-  language: propTypes.string.isRequired,
   highlightEnd: propTypes.number,
   highlightStart: propTypes.number,
+  indentSize: propTypes.number,
+  language: propTypes.string.isRequired,
   theme: propTypes.object
 };