impl Playground

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

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from 'react';
+
+import { CodeMirrorEditorContainer } from '..';
+import { useCodeMirrorEditor } from '../../services';
+
+export const Playground = (): JSX.Element => {
+
+  const containerRef = useRef(null);
+
+  const { setContainer } = useCodeMirrorEditor({
+    container: containerRef.current,
+  });
+
+  useEffect(() => {
+    if (containerRef.current != null) {
+      setContainer(containerRef.current);
+    }
+  }, [setContainer]);
+
+  return (
+    <CodeMirrorEditorContainer ref={containerRef} />
+  );
+};

packages/editor/src/components/playground/index.ts

@@ -0,0 +1 @@
+export * from './Playground';

packages/editor/src/main.tsx

@@ -2,15 +2,16 @@ import React from 'react';
 
 import ReactDOM from 'react-dom/client';
 
-import { CodeMirrorEditor } from './components';
+import { Playground } from './components/playground';
 
 import './main.scss';
 
+
 const rootElem = document.getElementById('root');
 
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 ReactDOM.createRoot(rootElem!).render(
   <React.StrictMode>
-    <CodeMirrorEditor />
+    <Playground />
   </React.StrictMode>,
 );