fix 'run me ' button click callback (#169)

Author: aswind7

src/components/CodeEditor/index.jsx

@@ -18,14 +18,16 @@ export const CodeEditor = ({ code: codeProp, children, canvasId, autoRun = true,
   const [code, setCode] = useState('');
 
   const runCallback = useCallback(
-    debounce((newcode = [codeProp]) => {
+    debounce((newcode = [codeProp], isClickByRunMeButton = false) => {
       if (window.canvasesId[canvasId]) {
         window.canvasesId[canvasId].dispose();
       }
       const preamble = [
         `const fabric = window.fabric;`,
         `const canvasEl = document.getElementById('${canvasId}');`,
       ];
+      // when click 'run me' button, makes code string change to trigger 'setCode' function.
+      if (isClickByRunMeButton) preamble.push(`const randomValue = ${Math.random()};`);
       const exec = `try {
           ${newcode.join('\n')}
           window.canvasesId['${canvasId}'] = canvas;
@@ -90,7 +92,7 @@ export const CodeEditor = ({ code: codeProp, children, canvasId, autoRun = true,
       </Helmet>
       {canvasDown || children}
       <div ref={divRef} style={{ marginTop: '1rem' }} />
-      <button onClick={() => runCallback([editorRef.current.state.doc.toString()])}>runMe</button>
+      <button onClick={() => runCallback([editorRef.current.state.doc.toString()], true)}>Run me</button>
       {canvasDown && children}
     </div>
   );

src/content/docs/docs/configuring-controls.mdx

@@ -164,7 +164,7 @@ If you prefer to have shared controls among instances, you have to act on the de
 This will let you configure the controls once for all class types, and let you add controls globally at runtime.
 
 Each setup comes with pros and cons that depends on your personal preference and project's functionalities.
-For this snippet you have to press the runMe button. Once you run it, the above snippets are affected too.
+For this snippet you have to press the Run me button. Once you run it, the above snippets are affected too.
 
 <CodeEditor code={code5} canvasId="g" client:idle autoRun={false} canvasDown >
   <canvas  width="400" height="200" id="g"></canvas>