fix: Fix multi-line indentation (#33)

seek-oss · Dec 4, 2018 · 766c15e · 766c15e
1 parent 2bd2721
commit 766c15e
Showing 1 changed file with 34 additions and 52 deletions.
diff --git a/src/Playroom/Playroom.js b/src/Playroom/Playroom.js
@@ -217,6 +217,38 @@ export default class Playroom extends Component {
       })
     );
 
+    const codeMirrorEl = (
+      <ReactCodeMirror
+        codeMirrorInstance={codeMirror}
+        ref={this.storeCodeMirrorRef}
+        value={code}
+        onChange={this.handleChange}
+        options={{
+          mode: 'jsx',
+          autoCloseTags: true,
+          autoCloseBrackets: true,
+          theme: 'neo',
+          gutters: [styles.gutter],
+          hintOptions: { schemaInfo: tags },
+          extraKeys: {
+            Tab: cm => {
+              if (cm.somethingSelected()) {
+                cm.indentSelection('add');
+              } else {
+                const indent = cm.getOption('indentUnit');
+                const spaces = Array(indent + 1).join(' ');
+                cm.replaceSelection(spaces);
+              }
+            },
+            "'<'": completeAfter,
+            "'/'": completeIfAfterLt,
+            "' '": completeIfInTag,
+            "'='": completeIfInTag
+          }
+        }}
+      />
+    );
+
     if (editorUndocked && codeReady) {
       return (
         <div>
@@ -234,33 +266,7 @@ export default class Playroom extends Component {
             width={window.outerWidth}
             onClose={this.handleRedockEditor}
           >
-            <div className={styles.undockedEditorContainer}>
-              <ReactCodeMirror
-                codeMirrorInstance={codeMirror}
-                ref={this.storeCodeMirrorRef}
-                value={code}
-                onChange={this.handleChange}
-                options={{
-                  mode: 'jsx',
-                  autoCloseTags: true,
-                  autoCloseBrackets: true,
-                  theme: 'neo',
-                  gutters: [styles.gutter],
-                  hintOptions: { schemaInfo: tags },
-                  extraKeys: {
-                    Tab: cm => {
-                      const indent = cm.getOption('indentUnit');
-                      const spaces = Array(indent + 1).join(' ');
-                      cm.replaceSelection(spaces);
-                    },
-                    "'<'": completeAfter,
-                    "'/'": completeIfAfterLt,
-                    "' '": completeIfInTag,
-                    "'='": completeIfInTag
-                  }
-                }}
-              />
-            </div>
+            <div className={styles.undockedEditorContainer}>{codeMirrorEl}</div>
           </WindowPortal>
         </div>
       );
@@ -299,31 +305,7 @@ export default class Playroom extends Component {
               onClick={this.handleUndockEditor}
             />
           </div>
-          <ReactCodeMirror
-            codeMirrorInstance={codeMirror}
-            ref={this.storeCodeMirrorRef}
-            value={code}
-            onChange={this.handleChange}
-            options={{
-              mode: 'jsx',
-              autoCloseTags: true,
-              autoCloseBrackets: true,
-              theme: 'neo',
-              gutters: [styles.gutter],
-              hintOptions: { schemaInfo: tags },
-              extraKeys: {
-                Tab: cm => {
-                  const indent = cm.getOption('indentUnit');
-                  const spaces = Array(indent + 1).join(' ');
-                  cm.replaceSelection(spaces);
-                },
-                "'<'": completeAfter,
-                "'/'": completeIfAfterLt,
-                "' '": completeIfInTag,
-                "'='": completeIfInTag
-              }
-            }}
-          />
+          {codeMirrorEl}
         </Resizable>
       </div>
     );