Merge pull request #309 from selbekk/make-indentation-a-prop

Add tabMode prop

Author: scottianstewart

README.md

@@ -20,26 +20,20 @@
 
 The library is structured modularly and lets you style and compose its components freely.
 
-
 <p align="center"><img src="https://user-images.githubusercontent.com/17658189/63181897-1d67d380-c049-11e9-9dd2-7da2a3a57f05.gif" width=500></p>
 
 ## Usage
 
 Install it with `npm install react-live` or `yarn add react-live` and try out this piece of JSX:
 
 ```js
-import {
-  LiveProvider,
-  LiveEditor,
-  LiveError,
-  LivePreview
-} from 'react-live'
+import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live";
 
 <LiveProvider code="<strong>Hello World!</strong>">
   <LiveEditor />
   <LiveError />
   <LivePreview />
-</LiveProvider>
+</LiveProvider>;
 ```
 
 ## Demo
@@ -57,10 +51,10 @@ is a React component.
 
 Prior to `v3.0.0`, earlier versions of the library used different internals. We recommend using the latest version you can.
 
-|Version|Supported React version|Editor                    |Transpiler
-|-------|-----------------------|--------------------------|----------
-|v3.x.x |v17.x.x                |`use-editable`            |`Sucrase`
-|v2.x.x |v16.x.x                |`react-simple-code-editor`|`Bublé`
+| Version | Supported React version | Editor                     | Transpiler |
+| ------- | ----------------------- | -------------------------- | ---------- |
+| v3.x.x  | v17.x.x                 | `use-editable`             | `Sucrase`  |
+| v2.x.x  | v16.x.x                 | `react-simple-code-editor` | `Bublé`    |
 
 Please see also the related Formidable libraries:-
 
@@ -88,7 +82,7 @@ means that the user can use it in their code like this:
 //                    ↓↓↓↓↓
 class Example extends React.Component {
   render() {
-    return <strong>Hello World!</strong>
+    return <strong>Hello World!</strong>;
   }
 }
 ```
@@ -149,16 +143,13 @@ This means that while you may be used to destructuring `useState` when importing
 
   return (
     <>
-      <p>
-        {`${likes} likes`}
-      </p>
+      <p>{`${likes} likes`}</p>
       <button onClick={() => increaseLikes(likes + 1)}>Like</button>
     </>
   );
-}
+};
 ```
 
-
 ### What bundle size can I expect?
 
 Our reported bundle size badges don't give you the full picture of
@@ -178,16 +169,15 @@ Sucrase for transpilation.
 This component provides the `context` for all the other ones. It also transpiles the user’s code!
 It supports these props, while passing any others through to the `children`:
 
-|Name|PropType|Description|
-|---|---|---|
-|code|PropTypes.string|The code that should be rendered, apart from the user’s edits
-|scope|PropTypes.object|Accepts custom globals that the `code` can use
-|noInline|PropTypes.bool|Doesn’t evaluate and mount the inline code (Default: `false`). Note: when using `noInline` whatever code you write must be a single expression (function, class component or some `jsx`) that can be returned immediately. If you'd like to render multiple components, use `noInline={true}`
-|transformCode|PropTypes.func|Accepts and returns the code to be transpiled, affording an opportunity to first transform it
-|language|PropTypes.string|What language you're writing for correct syntax highlighting. (Default: `jsx`)
-|disabled|PropTypes.bool|Disable editing on the `<LiveEditor />` (Default: `false`)
-|theme|PropTypes.object|A `prism-react-renderer` theme object. See more [here](https://github.com/FormidableLabs/prism-react-renderer#theming)
-
+| Name          | PropType         | Description                                                                                                                                                                                                                                                                                   |
+| ------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| code          | PropTypes.string | The code that should be rendered, apart from the user’s edits                                                                                                                                                                                                                                 |
+| scope         | PropTypes.object | Accepts custom globals that the `code` can use                                                                                                                                                                                                                                                |
+| noInline      | PropTypes.bool   | Doesn’t evaluate and mount the inline code (Default: `false`). Note: when using `noInline` whatever code you write must be a single expression (function, class component or some `jsx`) that can be returned immediately. If you'd like to render multiple components, use `noInline={true}` |
+| transformCode | PropTypes.func   | Accepts and returns the code to be transpiled, affording an opportunity to first transform it                                                                                                                                                                                                 |
+| language      | PropTypes.string | What language you're writing for correct syntax highlighting. (Default: `jsx`)                                                                                                                                                                                                                |
+| disabled      | PropTypes.bool   | Disable editing on the `<LiveEditor />` (Default: `false`)                                                                                                                                                                                                                                    |
+| theme         | PropTypes.object | A `prism-react-renderer` theme object. See more [here](https://github.com/FormidableLabs/prism-react-renderer#theming)                                                                                                                                                                        |
 
 All subsequent components must be rendered inside a provider, since they communicate
 using one.
@@ -200,10 +190,10 @@ with valid JSX elements.
 
 This component renders the editor that displays the code. It is a wrapper around [`react-simple-code-editor`](https://github.com/satya164/react-simple-code-editor) and the code highlighted using [`prism-react-renderer`](https://github.com/FormidableLabs/prism-react-renderer).
 
-|Name|PropType|Description|
-|---|---|---|
-|style|PropTypes.object|Allows overriding default styles on the `LiveEditor` component.
-
+| Name    | PropType                                  | Description                                                       |
+| ------- | ----------------------------------------- | ----------------------------------------------------------------- |
+| style   | PropTypes.object                          | Allows overriding default styles on the `LiveEditor` component.   |
+| tabMode | PropTypes.oneOf(["indentation", "focus"]) | Sets how you want the tab key to work. (Default: `"indentation"`) |
 
 ### &lt;LiveError /&gt;
 
@@ -216,10 +206,9 @@ It passes through any props to a `pre`.
 
 This component renders the actual component that the code generates inside an error boundary.
 
-|Name|PropType|Description|
-|---|---|---|
-|Component|PropTypes.node|Element that wraps the generated code. (Default: `div`)
-
+| Name      | PropType       | Description                                             |
+| --------- | -------------- | ------------------------------------------------------- |
+| Component | PropTypes.node | Element that wraps the generated code. (Default: `div`) |
 
 ### withLive
 
@@ -229,26 +218,23 @@ by `LiveProvider` into a component.
 Using this HOC allows you to add new components to react-live, or replace the default ones, with a new
 desired behavior.
 
-The component wrapped with `withLive`  gets injected the following props:
-
-|Name|PropType|Description|
-|---|---|---|
-|code|PropTypes.string|Reflects the code that is passed in as the `code` prop
-|error|PropTypes.string|An error that the code has thrown when it was previewed
-|onError|PropTypes.func|A callback that, when called, changes the error to what's passed as the first argument
-|onChange|PropTypes.func|A callback that accepts new code and transpiles it
-|element|React.Element|The result of the transpiled code that is previewed
+The component wrapped with `withLive` gets injected the following props:
 
+| Name     | PropType         | Description                                                                            |
+| -------- | ---------------- | -------------------------------------------------------------------------------------- |
+| code     | PropTypes.string | Reflects the code that is passed in as the `code` prop                                 |
+| error    | PropTypes.string | An error that the code has thrown when it was previewed                                |
+| onError  | PropTypes.func   | A callback that, when called, changes the error to what's passed as the first argument |
+| onChange | PropTypes.func   | A callback that accepts new code and transpiles it                                     |
+| element  | React.Element    | The result of the transpiled code that is previewed                                    |
 
 > Note: The code prop doesn't reflect the up-to-date code, but the `code` prop, that is passed to the `LiveProvider`.
 
-
 ## FAQ
-> **I want to use experimental feature x but Sucrase doesn't support it! Can I use babel instead?**
-
-`react-live` doesn't currently support configuring the transpiler and it ships with Sucrase.  The current workaround for using some experimental features `Sucrase` doesn't support  would be to use the `transformCode` prop on `LiveProvider` to transform your code with `babel` alongside `Sucrase`.
 
+> **I want to use experimental feature x but Sucrase doesn't support it! Can I use babel instead?**
 
+`react-live` doesn't currently support configuring the transpiler and it ships with Sucrase. The current workaround for using some experimental features `Sucrase` doesn't support would be to use the `transformCode` prop on `LiveProvider` to transform your code with `babel` alongside `Sucrase`.
 
 ## Comparison to [component-playground](https://github.com/FormidableLabs/component-playground)
 
@@ -269,5 +255,4 @@ Here are the various factors at play:
 
 ## Maintenance Status
 
-**Active:** Formidable is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome. 
-
+**Active:** Formidable is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome.

src/components/Editor/index.js

@@ -1,7 +1,7 @@
-import React, { useEffect, useState, useRef, useCallback } from "react";
+import Highlight, { Prism } from "prism-react-renderer";
 import PropTypes from "prop-types";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { useEditable } from "use-editable";
-import Highlight, { Prism } from "prism-react-renderer";
 import { theme as liveTheme } from "../../constants/theme";
 
 const CodeEditor = (props) => {
@@ -18,7 +18,7 @@ const CodeEditor = (props) => {
 
   useEditable(editorRef, onEditableChange, {
     disabled: props.disabled,
-    indentation: 2,
+    indentation: props.tabMode === "indentation" ? 2 : undefined,
   });
 
   useEffect(() => {
@@ -83,7 +83,12 @@ CodeEditor.propTypes = {
   onChange: PropTypes.func,
   prism: PropTypes.object,
   style: PropTypes.object,
+  tabMode: PropTypes.oneOf(["focus", "indentation"]),
   theme: PropTypes.object,
 };
 
+CodeEditor.defaultProps = {
+  tabMode: "indentation",
+};
+
 export default CodeEditor;

typings/react-live.d.ts

@@ -28,7 +28,8 @@ export type EditorProps = Omit<PreProps, 'onChange'> & {
   language?: Language;
   onChange?: (code: string) => void;
   theme?: PrismTheme;
-  prism?: unknown
+  prism?: unknown;
+  tabMode?: "indentation" | "focus"
 }
 
 export const Editor: ComponentClass<EditorProps>