add Preview to Playground

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

@@ -1,15 +1,34 @@
-import { useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
+
+import { EditorView } from '@codemirror/view';
 
 import { CodeMirrorEditorContainer } from '..';
 import { useCodeMirrorEditorMain } from '../../stores';
 
 import { PlaygroundController } from './PlaygroundController';
+import { Preview } from './Preview';
 
 export const Playground = (): JSX.Element => {
 
+  const [markdownToPreview, setMarkdownToPreview] = useState('');
+
   const containerRef = useRef(null);
 
-  useCodeMirrorEditorMain(containerRef.current);
+  const { data: codeMirrorEditor } = useCodeMirrorEditorMain(containerRef.current);
+
+  // set handler to save with shortcut key
+  useEffect(() => {
+    const extension = EditorView.updateListener.of((update) => {
+      if (update.docChanged) {
+        const doc = update.view.state.doc.toString();
+        setMarkdownToPreview(doc);
+      }
+    });
+
+    const cleanupFunction = codeMirrorEditor?.appendExtension?.(extension);
+
+    return cleanupFunction;
+  }, [codeMirrorEditor]);
 
   return (
     <>
@@ -21,6 +40,7 @@ export const Playground = (): JSX.Element => {
           <CodeMirrorEditorContainer ref={containerRef} />
         </div>
         <div className="flex-expand-vert d-none d-lg-flex bg-light text-dark border-start border-dark-subtle p-3">
+          <Preview markdown={markdownToPreview} />
           <PlaygroundController />
         </div>
       </div>

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

@@ -69,7 +69,7 @@ export const SetCaretLineRow = (): JSX.Element => {
 
 export const PlaygroundController = (): JSX.Element => {
   return (
-    <div className="container">
+    <div className="container mt-5">
       <InitEditorValueRow />
       <SetCaretLineRow />
     </div>

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

@@ -0,0 +1,14 @@
+type Props = {
+  markdown?: string,
+}
+
+export const Preview = (props: Props): JSX.Element => {
+  return (
+    <div className="container">
+      <h3>Preview</h3>
+      <div className="card" style={{ minHeight: '200px' }}>
+        {props.markdown ?? ''}
+      </div>
+    </div>
+  );
+};