Show expand button

Author: pomber

packages/mdx/src/mdx-client/code.tsx

@@ -29,6 +29,7 @@ export function InnerCode({
   const {
     lineNumbers,
     showCopyButton,
+    showExpandButton,
     className,
     style,
     ...editorProps
@@ -44,6 +45,10 @@ export function InnerCode({
       showCopyButton == null
         ? props.codeConfig?.showCopyButton
         : showCopyButton,
+    showExpandButton:
+      showExpandButton == null
+        ? props.codeConfig?.showExpandButton
+        : showExpandButton,
   }
 
   if (

packages/mdx/src/mdx-client/scrollycoding.tsx

@@ -91,6 +91,7 @@ export function Scrollycoding({
           {...(tab as any)}
           codeConfig={codeConfig}
           onTabClick={onTabClick}
+          showExpandButton={true}
         />
         {presetConfig && (
           <Preview

packages/mdx/src/mini-editor/editor-tween.tsx

@@ -8,7 +8,7 @@ import { useTransition, EditorStep } from "./editor-shift"
 import { CodeConfig } from "../smooth-code"
 import { useLayoutEffect } from "../utils"
 import { CopyButton } from "smooth-code/copy-button"
-import { ExpandButton } from "smooth-code/expand-button"
+import { ExpandButton } from "mini-editor/expand-button"
 
 export { EditorTransition, EditorTween }
 export type { EditorTransitionProps, EditorTweenProps }
@@ -56,7 +56,8 @@ function EditorTween({
 }: EditorTweenProps) {
   const ref = React.createRef<HTMLDivElement>()
 
-  const { showCopyButton, ...config } = codeConfig
+  const { showCopyButton, showExpandButton, ...config } =
+    codeConfig
   const {
     northPanel,
     southPanel,
@@ -95,6 +96,31 @@ function EditorTween({
     framePropsWithHeight.style.maxHeight = frozenHeight
   }
 
+  const northButtons = (
+    <>
+      {showCopyButton ? (
+        <CopyButton
+          content={northContent}
+          style={{ marginRight: "0.8em" }}
+        />
+      ) : undefined}
+      {showExpandButton ? (
+        <ExpandButton
+          style={{ marginRight: "0.8em" }}
+          step={next || prev}
+          theme={codeConfig.theme}
+        />
+      ) : undefined}
+    </>
+  )
+
+  const southCopyButton = showCopyButton ? (
+    <CopyButton
+      content={southContent}
+      style={{ marginRight: "0.8em" }}
+    />
+  ) : undefined
+
   const terminalPanel = (
     <TerminalPanel
       prev={prev.terminal}
@@ -111,17 +137,8 @@ function EditorTween({
       southPanel={southPanel}
       terminalPanel={terminalPanel}
       theme={codeConfig.theme}
-      northButton={
-        <ExpandButton style={{ margin: "0 0.8em" }} />
-      }
-      southButton={
-        showCopyButton ? (
-          <CopyButton
-            content={southContent}
-            style={{ margin: "0 0.8em" }}
-          />
-        ) : undefined
-      }
+      northButton={northButtons}
+      southButton={southCopyButton}
     />
   )
 }

packages/mdx/src/remark/config.ts

@@ -2,6 +2,7 @@ export type CodeHikeConfig = {
   theme: any
   lineNumbers?: boolean
   autoImport?: boolean
+  showExpandButton?: boolean
   showCopyButton?: boolean
 }
 

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

@@ -45,6 +45,7 @@ export type CodeConfig = {
   theme: IRawTheme
   lineNumbers?: boolean
   showCopyButton?: boolean
+  showExpandButton?: boolean
 }
 
 function useCodeShift({