add PlaygroundController

packages/editor/src/components/playground/Playground.tsx

@@ -3,6 +3,8 @@ import { useEffect, useRef } from 'react';
 import { CodeMirrorEditorContainer } from '..';
 import { useCodeMirrorEditor } from '../../services';
 
+import { PlaygroundController } from './PlaygroundController';
+
 export const Playground = (): JSX.Element => {
 
   const containerRef = useRef(null);
@@ -27,7 +29,7 @@ export const Playground = (): JSX.Element => {
           <CodeMirrorEditorContainer ref={containerRef} />
         </div>
         <div className="flex-grow-1 d-flex flex-column bg-light border-start border-dark-subtle p-3" style={{ flexBasis: 0 }}>
-          <p>PREVIEW</p>
+          <PlaygroundController />
         </div>
       </div>
       <div className="flex-grow-1 d-flex flex-column justify-content-center align-items-center bg-dark" style={{ minHeight: '50px' }}>

packages/editor/src/components/playground/PlaygroundController.tsx

@@ -0,0 +1,24 @@
+import { useCallback } from 'react';
+
+export const PlaygroundController = (): JSX.Element => {
+
+  const initEditorValue = useCallback(() => {
+
+  }, []);
+
+  return (
+    <>
+      <div className="row">
+        <div className="column">
+          <button
+            type="button"
+            className="btn btn-outline-secondary"
+            onClick={() => initEditorValue()}
+          >
+            Initialize editor value
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};