feat(pintora-demo): ConfigEditor in live-editor

demo/src/live-editor/App.tsx

@@ -1,9 +1,10 @@
-import React, { useEffect } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { Provider } from 'react-redux'
 import pintora from '@pintora/standalone'
 import { EXAMPLES } from '@pintora/test-shared'
 import Header from './components/Header'
-import Editor from './components/Editor'
+import Editor from './containers/Editor'
+import ConfigEditor from './containers/ConfigEditor'
 import Preview from './containers/Preview'
 import Panel from './components/Panel'
 import Examples from './containers/Examples'
@@ -45,14 +46,19 @@ function App() {
     }
   }, [])
 
+  const onEditorTabChange = useCallback((tab: string) => {
+    store.dispatch(actions.setCurrentEditor({ editor: tab }))
+  }, [])
+
   return (
     <Provider store={store}>
       <div className="App min-h-screen min-w-screen flex flex-col" data-theme="bumblebee">
         <Header></Header>
         <div className="App__content flex">
           <div className="App__left">
-            <Panel title="Editor">
+            <Panel title="Editor" tabs={EDITOR_TABS} onCurrentTabChange={onEditorTabChange}>
               <Editor />
+              <ConfigEditor />
             </Panel>
             <Panel title="Examples">
               <Examples />

demo/src/live-editor/components/MonacoEditor.tsx

@@ -11,10 +11,11 @@ import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
 interface Props {
   code: string
   onCodeChange(code: string): void
+  editorOptions: Partial<monaco.editor.IStandaloneEditorConstructionOptions>
 }
 
 const MonacoEditor = (props: Props) => {
-  const { code, onCodeChange, } = props
+  const { code, onCodeChange, editorOptions, } = props
   const wrapperRef = useRef<HTMLDivElement>()
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>()
 
@@ -26,12 +27,13 @@ const MonacoEditor = (props: Props) => {
 
     editor = monaco.editor.create(wrapperRef.current, {
       value: code,
-      language: 'pintora',
       minimap: { enabled: false },
       lineDecorationsWidth: 0,
       automaticLayout: true,
       fontSize: 15,
       theme: 'vs-dark',
+      tabSize: 2,
+      ...editorOptions,
     })
     const editorModel = editor.getModel()
     if (editorModel) {

demo/src/live-editor/containers/ConfigEditor/index.tsx

@@ -0,0 +1,37 @@
+import React, { useCallback } from 'react'
+import MonacoEditor from 'src/live-editor/components/MonacoEditor'
+import { useDispatch, connect } from 'react-redux'
+import { State, actions } from 'src/live-editor/redux/slice'
+// import './Editor.less'
+
+interface Props {
+  editorCode: string
+  show: boolean
+}
+
+const CONFIG_EDITOR_OPTIONS = {
+  language: 'json',
+}
+
+function ConfigEditor(props: Props) {
+  const { editorCode, show } = props
+  const dispatch = useDispatch()
+
+  const onCodeChange = useCallback((code) => {
+    dispatch(actions.updateConfigCode({ code }))
+  }, [])
+
+  const style = {
+    display: show ? 'flex': 'none',
+  }
+  return <div className="ConfigEditor Editor" style={style}>
+    <MonacoEditor code={editorCode} onCodeChange={onCodeChange} editorOptions={CONFIG_EDITOR_OPTIONS}></MonacoEditor>
+  </div>
+}
+
+export default connect((state: State) => {
+  return {
+    editorCode: state.configEditor.code,
+    show: state.currentEditor === 'config',
+  } as Props
+})(ConfigEditor)

demo/src/live-editor/components/Editor.tsx → demo/src/live-editor/containers/Editor/index.tsx

@@ -1,28 +1,38 @@
 import React, { useCallback } from 'react'
-import MonacoEditor from './MonacoEditor'
+import MonacoEditor from 'src/live-editor/components/MonacoEditor'
 import { useDispatch, connect } from 'react-redux'
 import { State, actions } from 'src/live-editor/redux/slice'
 import './Editor.less'
+import classNames from 'classnames'
 
 interface Props {
   editorCode: string
+  show: boolean
+}
+
+const CODE_EDITOR_OPTIONS = {
+  language: 'pintora',
 }
 
 function Editor(props: Props) {
-  const { editorCode } = props
+  const { editorCode, show } = props
   const dispatch = useDispatch()
 
   const onCodeChange = useCallback((code) => {
     dispatch(actions.updateEditorCode({ code, syncToPreview: true }))
   }, [])
 
-  return <div className="Editor">
-    <MonacoEditor code={editorCode} onCodeChange={onCodeChange}></MonacoEditor>
+  const style = {
+    display: show ? 'flex': 'none',
+  }
+  return <div className="Editor" style={style}>
+    <MonacoEditor code={editorCode} onCodeChange={onCodeChange} editorOptions={CODE_EDITOR_OPTIONS}></MonacoEditor>
   </div>
 }
 
 export default connect((state: State) => {
   return {
     editorCode: state.editor.code,
+    show: state.currentEditor === 'code',
   } as Props
 })(Editor)

demo/src/live-editor/redux/slice.ts

@@ -1,10 +1,15 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { createSlice, DeepPartial, PayloadAction } from '@reduxjs/toolkit'
 import { EXAMPLES } from '@pintora/test-shared'
+import { DiagramsConf } from '@pintora/standalone'
 
 export type State = {
+  currentEditor: 'code' | 'config'
   editor: {
     code: string
   }
+  configEditor: {
+    code: string
+  }
   preview: {
     code: string
     config: {
@@ -13,10 +18,20 @@ export type State = {
   }
 }
 
+const DEFAULT_CONFIG: DeepPartial<DiagramsConf> = {
+  core: {
+    theme: 'default',
+  },
+}
+
 const initialState: State = {
+  currentEditor: 'code',
   editor: {
     code: EXAMPLES.sequence.code,
   },
+  configEditor: {
+    code: JSON.stringify(DEFAULT_CONFIG, null, 2),
+  },
   preview: {
     code: EXAMPLES.sequence.code,
     config: {
@@ -36,6 +51,14 @@ const appSlice = createSlice({
         state.preview.code = code
       }
     },
+    updateConfigCode(state, action: PayloadAction<{ code: string }>) {
+      const { code } = action.payload
+      state.configEditor.code = code
+    },
+    setCurrentEditor(state, action: PayloadAction<{ editor: string }>) {
+      const { editor } = action.payload
+      state.currentEditor = editor as any
+    },
     updatePreviewConfig(state, action: PayloadAction<Partial<State['preview']['config']>>) {
       Object.assign(state.preview.config, action.payload)
     },

packages/pintora-standalone/src/index.ts

@@ -76,7 +76,7 @@ const pintoraStandalone = {
   },
 }
 
-export { BaseRenderer, rendererRegistry }
+export { BaseRenderer, rendererRegistry, DiagramsConf }
 
 export { pintoraStandalone }