docs: 文档里的 playground 改成左右布局，减少高度占用，更方便修改配置 (#2928)

docs/zh-CN/components/form/editor.md

@@ -103,6 +103,27 @@ order: 19
 }
 ```
 
+## 编辑器展现控制
+
+通过 `options` 来控制编辑器展现，比如下面的配置可以关闭行号
+
+```schema: scope="body"
+{
+    "type": "form",
+    "api": "/api/mock2/form/saveForm",
+    "body": [
+        {
+            "type": "editor",
+            "name": "editor",
+            "label": "编辑器",
+            "options": {
+                "lineNumbers": "off"
+            }
+        }
+    ]
+}
+```
+
 ## 属性表
 
 除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
@@ -112,4 +133,4 @@ order: 19
 | language        | `string`  | `javascript` | 编辑器高亮的语言，支持通过 `${xxx}` 变量获取                                                                                                                                                             |
 | size            | `string`  | `md`         | 编辑器高度，取值可以是 `md`、`lg`、`xl`、`xxl`                                                                                                                                                           |
 | allowFullscreen | `boolean` | `false`      | 是否显示全屏模式开关                                                                                                                                                                                     |
-| options         | `object`  |              | monaco 编辑器的其它配置，比如是否显示行号等，请参考[这里](https://microsoft.github.io/monaco-editor/api/enums/monaco.editor.editoroption.html)，不过无法设置 readOnly，只读模式需要使用 `disabled: true` |
+| options         | `object`  |              | monaco 编辑器的其它配置，比如是否显示行号等，请参考[这里](https://microsoft.github.io/monaco-editor/api/enums/monaco.editor.EditorOption.html)，不过无法设置 readOnly，只读模式需要使用 `disabled: true` |

examples/components/Play.jsx

@@ -441,6 +441,9 @@ export default class PlayGround extends React.Component {
       <CodeEditor
         value={this.state.schemaCode}
         onChange={this.handleChange}
+        options={{
+          lineNumbers: 'off'
+        }}
         // editorFactory={this.editorFactory}
         editorDidMount={this.editorDidMount}
         language="json"

examples/style.scss

@@ -1028,6 +1028,7 @@ body.dark {
 .Playgroud {
   border: 1px solid #ddd;
   background: var(--body-bg);
+  display: flex;
 
   body.dark & {
     background: #191c22;
@@ -1035,11 +1036,11 @@ body.dark {
   }
 
   &-preview {
-    border-bottom: 1px solid #ddd;
     position: relative;
     display: flex;
     align-items: stretch;
     flex-direction: column;
+    flex-grow: 1;
 
     > div {
       flex: 1;
@@ -1047,7 +1048,7 @@ body.dark {
   }
 
   &-code {
-    flex-shrink: 0;
+    border-left: 1px solid #ddd;
-    height: 200px;
+    width: 350px;
   }
 }