feat(CodeBlocks): add live code editor support (#791)

issue #777

components/CodeBlocks/BlockCode.tsx

@@ -5,23 +5,23 @@ import styles from './BlockCode.module.css';
 import theme from './monokai';
 
 interface Props {
-  enableLine?: boolean;
-  lines?: Set<number>;
+  enableLine: boolean;
+  lines: Set<number>;
+  language?: string;
   children: string;
-  className?: string;
 }
 
 const BlockCode = ({
-  enableLine = true,
-  lines = new Set(),
+  enableLine,
+  lines,
+  language,
   children,
-  className,
 }: Props): JSX.Element => (
   <Highlight
     {...defaultProps}
-    theme={theme}
     code={children}
-    language={className?.replace('language-', '') as Language}
+    language={language as Language}
+    theme={theme}
   >
     {({ className, style, tokens, getLineProps, getTokenProps }) => (
       <pre className={classNames(className, styles.code)} style={style}>

components/CodeBlocks/LiveCode.module.css

@@ -1,4 +1,15 @@
-.code {
-  @apply relative;
-  @apply m-0 p-5;
+.container {
+  @apply flex flex-wrap flex-col md:flex-row;
+  @apply m-0 p-0;
+}
+
+.editor,
+.preview {
+  @apply flex-auto;
+  @apply w-full md:w-1/2;
+}
+
+.error {
+  @apply w-full;
+  @apply bg-red-100 text-red-700;
 }

components/CodeBlocks/LiveCode.tsx

@@ -1,16 +1,36 @@
-import { classNames } from '@components/utils';
+import type { Language } from 'prism-react-renderer';
+import React from 'react';
+import {
+  LiveEditor,
+  LiveError,
+  LivePreview,
+  LiveProvider,
+} from 'react-live-runner';
 import styles from './LiveCode.module.css';
-import { normalizeCode } from './utils';
+import theme from './monokai';
 
 interface Props {
-  code?: string;
-  className?: string;
+  language?: string;
+  children?: string;
 }
 
-const LiveCode = ({ code, className }: Props): JSX.Element => (
-  <pre className={classNames(className, styles.code)}>
-    {normalizeCode(code)}
-  </pre>
+const scope = {
+  ...React,
+};
+
+const LiveCode = ({ language, children }: Props): JSX.Element => (
+  <div className={styles.container}>
+    <LiveProvider
+      scope={scope}
+      code={children}
+      language={language as Language}
+      theme={theme}
+    >
+      <LiveEditor padding="1.25rem" className={styles.editor} />
+      <LivePreview className={styles.preview} />
+      <LiveError className={styles.error} />
+    </LiveProvider>
+  </div>
 );
 
 export default LiveCode;

components/CodeBlocks/Pre.module.css

@@ -2,7 +2,6 @@
   @apply relative;
   @apply mt-0 mb-9;
   @apply pt-10 pb-0;
-  @apply border border-solid border-dark;
   @apply bg-transparent;
 }
 

components/CodeBlocks/Pre.test.tsx

@@ -36,7 +36,7 @@ describe('Pre', () => {
   test('should render empty className correctly (snapshot)', () => {
     const { container } = render(
       <Pre>
-        <code>Code</code>
+        <code>const foo = bar();</code>
       </Pre>
     );
 
@@ -46,7 +46,7 @@ describe('Pre', () => {
   test('should hidden line number correctly (snapshot)', () => {
     const { container } = render(
       <Pre noline={true}>
-        <code>Code</code>
+        <code>const foo = bar();</code>
       </Pre>
     );
 
@@ -56,27 +56,27 @@ describe('Pre', () => {
   test('should hidden copy button correctly (snapshot)', () => {
     const { container } = render(
       <Pre nocopy={true}>
-        <code>Code</code>
+        <code>const foo = bar();</code>
       </Pre>
     );
 
     expect(container).toMatchSnapshot();
   });
 
-  test('should render code title correctly (snapshot)', () => {
+  test('should render highlight lines correctly (snapshot)', () => {
     const { container } = render(
-      <Pre title="Code Title">
-        <code>Code</code>
+      <Pre lines="1">
+        <code>const foo = bar();</code>
       </Pre>
     );
 
     expect(container).toMatchSnapshot();
   });
 
-  test('should render highlight lines correctly (snapshot)', () => {
+  test('should render code title correctly (snapshot)', () => {
     const { container } = render(
-      <Pre lines="1">
-        <code>Code</code>
+      <Pre title="Code Title">
+        <code>const foo = bar();</code>
       </Pre>
     );
 
@@ -86,7 +86,7 @@ describe('Pre', () => {
   test('should render live code correctly (snapshot)', () => {
     const { container } = render(
       <Pre live={true}>
-        <code>Code</code>
+        <code>const foo = bar();</code>
       </Pre>
     );
 
@@ -98,7 +98,7 @@ describe('Pre', () => {
     language => {
       const { container } = render(
         <Pre>
-          <code className={`language-${language}`}>Code</code>
+          <code className={`language-${language}`}>const foo = bar();</code>
         </Pre>
       );
 

components/CodeBlocks/Pre.tsx

@@ -26,24 +26,23 @@ const Pre = ({
   const codeElement = children as ReactElement;
   const code = normalizeCode(codeElement?.props?.children);
   const languageClass = codeElement?.props?.className as string;
-  const languageName = normalizeLanguage(
-    languageClass?.replace('language-', '')
-  );
+  const language = languageClass?.replace('language-', '');
+  const languageName = normalizeLanguage(language);
   const highlightLines = normalizeLines(lines);
 
   return (
     <pre
       className={classNames(className, languageClass, styles.pre)}
       data-language={title || languageName}
     >
-      {!nocopy ? <CopyButton code={code} /> : null}
+      {!nocopy && !live ? <CopyButton code={code} /> : null}
       {live ? (
-        <LiveCode code={code} className={languageClass} />
+        <LiveCode language={language}>{code}</LiveCode>
       ) : (
         <BlockCode
           enableLine={!noline}
           lines={highlightLines}
-          className={languageClass}
+          language={language}
         >
           {code}
         </BlockCode>