Wrap codeblocks and codegroups

Author: pomber

packages/mdx/src/client/code.tsx

@@ -29,19 +29,23 @@ export function InnerCode({
     !props.files[0].name
   ) {
     return (
-      <CodeSpring
-        className="ch-code"
-        config={props.codeConfig}
-        step={props.files[0]}
-      />
+      <div className="ch-codeblock no-prose">
+        <CodeSpring
+          className="ch-code"
+          config={props.codeConfig}
+          step={props.files[0]}
+        />
+      </div>
     )
   } else {
     const frameProps = {
       ...props?.frameProps,
       onTabClick,
     }
     return (
-      <EditorSpring {...props} frameProps={frameProps} />
+      <div className="ch-codegroup no-prose">
+        <EditorSpring {...props} frameProps={frameProps} />
+      </div>
     )
   }
 }

packages/mdx/src/client/slideshow.scss

@@ -10,8 +10,8 @@
   aspect-ratio: 16 / 9;
 }
 
-.ch-slideshow-slide .ch-editor-frame,
-.ch-slideshow-slide .ch-code {
+.ch-slideshow-slide .ch-codegroup,
+.ch-slideshow-slide .ch-codeblock {
   flex: 2;
 }
 

packages/mdx/src/client/spotlight.scss

@@ -41,8 +41,8 @@
   max-height: 80vh;
 }
 
-.ch-spotlight-sticker .ch-editor-frame,
-.ch-spotlight-sticker .ch-code {
+.ch-spotlight-sticker .ch-codegroup,
+.ch-spotlight-sticker .ch-codeblock {
   width: 100%;
   min-width: 100%;
   min-height: Min(100%, 80vh);
@@ -56,8 +56,8 @@
     gap: 0.5rem;
   }
 
-  .ch-spotlight-sticker .ch-editor-frame,
-  .ch-spotlight-sticker .ch-code {
+  .ch-spotlight-sticker .ch-codegroup,
+  .ch-spotlight-sticker .ch-codeblock {
     min-height: 0;
     flex: 1;
   }

packages/mdx/src/index.scss

@@ -4,6 +4,16 @@
 @import "./client/scrollycoding.scss";
 @import "./client/slideshow.scss";
 
-.ch-code {
+.ch-codeblock,
+.ch-codegroup {
   border-radius: 6px;
+  overflow: hidden;
+  box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),
+    0 8px 16px -8px rgba(0, 0, 0, 0.3),
+    0 -6px 16px -6px rgba(0, 0, 0, 0.025);
+}
+
+.ch-codeblock > *,
+.ch-codegroup > * {
+  height: 100%;
 }

packages/mini-editor/src/editor-frame.tsx

@@ -63,7 +63,7 @@ export const EditorFrame = React.forwardRef<
     <div
       ref={ref}
       {...rest}
-      className="ch-frame ch-editor-frame"
+      className="ch-editor-frame"
       style={{
         background: getColor(
           theme,

packages/mini-editor/src/index.scss

@@ -45,6 +45,11 @@
   flex-direction: column;
   position: relative;
   overflow: hidden;
+  font-family: Ubuntu, Droid Sans, -apple-system,
+    BlinkMacSystemFont, Segoe WPC, Segoe UI, sans-serif;
+  break-inside: avoid;
+  --ch-title-bar-height: 30px;
+  height: 100%;
 }
 
 .ch-editor-frame .ch-frame-title-bar {

packages/smooth-code/src/code-tween.tsx

@@ -168,7 +168,12 @@ function Wrapper({
   return (
     <pre
       {...htmlProps}
-      style={{ margin: 0, padding: 0, ...style, ...htmlProps?.style }}
+      style={{
+        margin: 0,
+        padding: 0,
+        ...style,
+        ...htmlProps?.style,
+      }}
       children={children}
     />
   )