Editable code blocks

package.json

@@ -41,6 +41,7 @@
     "react-dom": "^18.2.0",
     "react-resizable-panels": "^0.0.51",
     "react-router-dom": "^6.8.1",
+    "react-simple-code-editor": "^0.13.1",
     "unist-util-visit": "^5.0.0",
     "vite": "^4.3.3",
     "vite-plugin-svgr": "^2.4.0",

src/components/InteractiveTutorial/MdxComponents/CodeBlock.jsx

@@ -1,14 +1,26 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Highlight, Prism, themes } from 'prism-react-renderer';
+import Editor from 'react-simple-code-editor';
 import { alpha, Box, Button } from '@mui/material';
 import { requestFromCode } from '../../CodeEditorWindow/config/RequesFromCode';
 import { useTutorial } from '../../../context/tutorial-context';
-import { useTheme } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import { PlayArrowOutlined } from '@mui/icons-material';
 import { CopyButton } from '../../Common/CopyButton';
 import { DARK_BACKGROUND, LIGHT_BACKGROUND } from './MdxComponents';
 
+const StyledEditor = styled((props) => <Editor padding={0} textareaClassName={'code-block-textarea'} {...props} />)({
+  fontFamily: '"Menlo", monospace',
+  fontSize: '16px',
+  lineHeight: '24px',
+  fontWeight: '400',
+  '& .code-block-textarea': {
+    margin: '1rem 0 !important',
+    outline: 'none',
+  },
+});
+
 /**
  * Run button for code block
  * @param {string} code
@@ -18,13 +30,13 @@ import { DARK_BACKGROUND, LIGHT_BACKGROUND } from './MdxComponents';
 export const RunButton = ({ code }) => {
   const { setResult } = useTutorial();
   const handleClick = () => {
-    requestFromCode(code, false).then((res) => {
-      if (res && res.status === 'ok') {
-        setResult(() => JSON.stringify(res));
-      } else {
+    requestFromCode(code, false)
+      .then((res) => {
         setResult(() => JSON.stringify(res));
-      }
-    });
+      })
+      .catch((err) => {
+        setResult(() => JSON.stringify(err));
+      });
   };
   return (
     <Button variant="outlined" endIcon={<PlayArrowOutlined />} onClick={handleClick} data-testid="code-block-run">
@@ -45,7 +57,7 @@ RunButton.propTypes = {
  */
 export const CodeBlock = ({ children }) => {
   const className = children.props.className || '';
-  const code = children.props.children.trim();
+  const [code, setCode] = useState(children.props.children.trim());
   const language = className.replace(/language-/, '');
   const withRunButton = children.props.withRunButton && JSON.parse(children.props.withRunButton);
   const theme = useTheme();
@@ -59,6 +71,36 @@ export const CodeBlock = ({ children }) => {
     (async () => await import('prismjs/components/prism-json'))();
   }, []);
 
+  const handleChange = (code) => {
+    setCode(() => code);
+  };
+
+  const highlight = (code) => (
+    <Highlight code={code} language={language} theme={prismTheme} prism={Prism}>
+      {({ className, style, tokens, getLineProps, getTokenProps }) => {
+        return (
+          <pre
+            className={className}
+            style={{
+              wordBreak: 'keep-all',
+              whiteSpace: 'pre-wrap',
+              ...style,
+            }}
+            data-testid={'code-block-pre'}
+          >
+            {tokens.map((line, i) => (
+              <div key={i} {...getLineProps({ line, key: i })}>
+                {line.map((token, key) => (
+                  <span key={token} {...getTokenProps({ token, key })} />
+                ))}
+              </div>
+            ))}
+          </pre>
+        );
+      }}
+    </Highlight>
+  );
+
   return (
     <Box
       sx={{
@@ -86,28 +128,15 @@ export const CodeBlock = ({ children }) => {
         <CopyButton text={code} />
       </Box>
       <Box sx={{ px: 2, pb: 1 }}>
-        <Highlight code={code} language={language} theme={prismTheme} prism={Prism}>
-          {({ className, style, tokens, getLineProps, getTokenProps }) => {
-            return (
-              <pre
-                className={className}
-                style={{
-                  overflowX: 'auto',
-                  ...style,
-                }}
-                data-testid={'code-block-pre'}
-              >
-                {tokens.map((line, i) => (
-                  <div key={i} {...getLineProps({ line, key: i })}>
-                    {line.map((token, key) => (
-                      <span key={token} {...getTokenProps({ token, key })} />
-                    ))}
-                  </div>
-                ))}
-              </pre>
-            );
-          }}
-        </Highlight>
+        {withRunButton && (
+          <StyledEditor
+            value={code}
+            onValueChange={handleChange}
+            highlight={highlight}
+            data-testid={'code-block-editor'}
+          />
+        )}
+        {!withRunButton && highlight(code)}
       </Box>
     </Box>
   );

src/components/InteractiveTutorial/MdxComponents/CodeBlock.test.jsx

@@ -1,8 +1,9 @@
-import { describe, it, expect, afterEach, vi } from 'vitest';
+import { describe, it, expect, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { CodeBlock, RunButton } from './CodeBlock';
 import * as requestFromCodeMod from '../../CodeEditorWindow/config/RequesFromCode';
+import { TutorialProvider } from '../../../context/tutorial-context';
 
 const props = {
   children: {
@@ -25,37 +26,64 @@ const requestFromCodeSpy = vi.spyOn(requestFromCodeMod, 'requestFromCode').mockI
 
 describe('CodeBlock', () => {
   it('should render RunButton with given code', () => {
-    render(<RunButton code={props.children.props.children} />);
+    render(
+      <TutorialProvider>
+        <RunButton code={props.children.props.children} />
+      </TutorialProvider>
+    );
 
     expect(screen.getByTestId('code-block-run')).toBeInTheDocument();
     expect(screen.getByText(/Run/)).toBeInTheDocument();
   });
 
   it('should call requestFromCode with given code', () => {
-    render(<RunButton code={props.children.props.children} />);
+    render(
+      <TutorialProvider>
+        <RunButton code={props.children.props.children} />
+      </TutorialProvider>
+    );
     screen.getByTestId('code-block-run').click();
 
     expect(requestFromCodeSpy).toHaveBeenCalledWith('{\n  "name": "test"\n}', false);
   });
 
   it('should render CodeBlock with given code', () => {
-    render(<CodeBlock {...props} />);
+    render(
+      <TutorialProvider>
+        <CodeBlock {...props} />
+      </TutorialProvider>
+    );
 
     expect(screen.getByTestId('code-block')).toBeInTheDocument();
     expect(screen.getByTestId('code-block-pre')).toBeInTheDocument();
     expect(screen.getByTestId('code-block-run')).toBeInTheDocument();
-    expect(screen.getByText(/{/)).toBeInTheDocument();
-    expect(screen.getByText(/"name": "test"/)).toBeInTheDocument();
-    expect(screen.getByText(/}/)).toBeInTheDocument();
+    expect(screen.getAllByText(/{/).length).toBe(2);
+    expect(screen.getAllByText(/"name": "test"/).length).toBe(2);
+    expect(screen.getAllByText(/}/).length).toBe(2);
     expect(screen.getByText(/Run/)).toBeInTheDocument();
   });
 
   it('should render CodeBlock without run button', () => {
-    props.children.props.withRunButton = 'false';
-    render(<CodeBlock {...props} />);
+    const propsWithoutButton = structuredClone(props);
+    propsWithoutButton.children.props.withRunButton = 'false';
+
+    render(<CodeBlock {...propsWithoutButton} />);
 
     expect(screen.getByTestId('code-block')).toBeInTheDocument();
     expect(screen.getByTestId('code-block-pre')).toBeInTheDocument();
     expect(screen.queryByTestId('code-block-run')).not.toBeInTheDocument();
   });
+
+  it('should render an editor with given code if RunButton is present', () => {
+    render(
+      <TutorialProvider>
+        <CodeBlock {...props} />
+      </TutorialProvider>
+    );
+
+    expect(screen.queryByTestId('code-block-run')).toBeInTheDocument();
+    expect(screen.queryByTestId('code-block-editor')).toBeInTheDocument();
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+    expect(screen.getByRole('textbox')).toHaveValue('{\n  "name": "test"\n}');
+  });
 });