@primer/doctocat-nextjs 0.5.4-rc.3b1107b → 0.5.4-rc.bcfc99f

package/CHANGELOG.md

@@ -4,6 +4,14 @@
 
 ### Patch Changes
 
+- [#51](https://github.com/primer/doctocat-nextjs/pull/51) [`4c76c4f`](https://github.com/primer/doctocat-nextjs/commit/4c76c4f5ccd248ec7d1f448c054808287a3ff51d) Thanks [@rezrah](https://github.com/rezrah)! - Add auto-collapsed React code blocks for large code snippets. This feature only applies to code fences with the `jsx live` language identifiers.
+
+  E.g.
+
+  ```jsx live
+  <>Your code</>
+  ```
+
 - [#48](https://github.com/primer/doctocat-nextjs/pull/48) [`ce73c24`](https://github.com/primer/doctocat-nextjs/commit/ce73c24b2e4e924667bf7446a504bd88d8f2ccf0) Thanks [@rezrah](https://github.com/rezrah)! - - Fix inline code font-size in markdown headings. Now inherits size used in the heading.
 
   - Increased spacing below React code blocks, which was previously too small.

package/components/layout/code-block/ReactCodeBlock.module.css

@@ -28,6 +28,11 @@
   font-family: var(--brand-fontStack-monospace);
   background-color: var(--brand-color-canvas-subtle);
   overflow: auto;
+  position: relative;
+}
+
+.EditorWrapper {
+  position: relative;
 }
 
 .Editor pre {
@@ -37,6 +42,11 @@
   background-color: var(--brand-color-canvas-subtle) !important;
 }
 
+.Editor--is-collapsed {
+  max-height: 400px;
+  overflow: hidden;
+}
+
 .Toolbar {
   display: flex;
   gap: var(--base-size-8);
@@ -67,3 +77,44 @@
 .colorModeButtonActive {
   background-color: var(--brand-color-canvas-subtle);
 }
+
+.collapseButton {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  background-color: var(--brand-color-canvas-subtle);
+  border: none;
+  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
+  border-bottom-left-radius: var(--brand-borderRadius-medium);
+  border-bottom-right-radius: var(--brand-borderRadius-medium);
+  padding: var(--base-size-8) var(--base-size-12);
+  font-size: var(--brand-text-size-100);
+  font-family: var(--brand-fontStack-system);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--base-size-4);
+  z-index: 10;
+  transition: background-color var(--brand-animation-duration-default) var(--brand-animation-easing-glide);
+}
+
+.collapseButton--collapsed::before {
+  content: '';
+  position: absolute;
+  top: -41px;
+  left: 0;
+  width: 100%;
+  height: 40px;
+  background: linear-gradient(to bottom, transparent, var(--brand-color-canvas-subtle));
+  z-index: -1;
+}
+
+.collapseButton:hover,
+.collapseButton:focus {
+  background-color: var(--brand-color-canvas-default);
+}
+
+.collapseLabel {
+  font-size: var(--brand-text-size-100) !important;
+}

package/components/layout/code-block/ReactCodeBlock.tsx

@@ -1,17 +1,20 @@
 'use client'
-import React, {type PropsWithChildren, useCallback, useState, useRef, useEffect} from 'react'
+import React, {type PropsWithChildren, useCallback, useState, useRef, useEffect, useId} from 'react'
 import clsx from 'clsx'
 import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live'
 import {useColorMode} from '../../context/color-modes/useColorMode'
 import {useConfig} from '../../context/useConfig'
 import styles from './ReactCodeBlock.module.css'
 import {ActionBar, Button, ThemeProvider} from '@primer/react'
-import {CopyIcon, MoonIcon, SunIcon, UndoIcon} from '@primer/octicons-react'
+import {Text} from '@primer/react-brand'
+import {CopyIcon, MoonIcon, SunIcon, UndoIcon, UnfoldIcon, FoldIcon} from '@primer/octicons-react'
 import {colorModes} from '../../context/color-modes/context'
 
 import {lightTheme, darkTheme} from './syntax-highlighting-themes'
 import {codeTransformer} from './code-transformer'
 
+const COLLAPSE_HEIGHT = 400 // TODO: Hoist this to config to make user customizable eventually
+
 type ReactCodeBlockProps = {
   'data-language': string
   'data-filename'?: string
@@ -28,13 +31,35 @@ const getFocusableElements = () => {
 }
 
 export function ReactCodeBlock(props: ReactCodeBlockProps) {
+  const uniqueId = useId()
   const {colorMode, setColorMode} = useColorMode()
   const {basePath} = useConfig()
   const initialCode = getCodeFromChildren(props.children)
   const [code, setCode] = useState(initialCode)
-  const shouldShowPreview = ['tsx', 'jsx'].includes(props['data-language'])
+  const rootRef = useRef<HTMLDivElement>(null)
+  const [isCodePaneCollapsed, setIsCodePaneCollapsed] = useState<boolean | null>(null)
+  const [initialPosition, setInitialPosition] = useState<number | null>(null)
   const editorRef = useRef<HTMLDivElement>(null)
   const resetButtonRef = useRef<HTMLButtonElement>(null)
+  const shouldShowPreview = ['tsx', 'jsx'].includes(props['data-language'])
+
+  // scroll back to the initial y pos on collapse state change
+  useEffect(() => {
+    if (rootRef.current && initialPosition === null) {
+      const rect = rootRef.current.getBoundingClientRect()
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop
+      setInitialPosition(rect.top + scrollTop)
+    }
+  }, [initialPosition])
+
+  useEffect(() => {
+    if (editorRef.current && isCodePaneCollapsed === null) {
+      const editorHeight = editorRef.current.scrollHeight
+      setIsCodePaneCollapsed(editorHeight > COLLAPSE_HEIGHT)
+    }
+  }, [code, isCodePaneCollapsed])
+
+  const shouldShowCollapse = isCodePaneCollapsed !== null && (editorRef.current?.scrollHeight || 0) > COLLAPSE_HEIGHT
 
   /**
    * Transforms code to prepend basePath to img src attributes
@@ -52,6 +77,21 @@ export function ReactCodeBlock(props: ReactCodeBlockProps) {
     navigator.clipboard.writeText(code)
   }, [code])
 
+  const handleCollapsibleCodePane = useCallback(() => {
+    const newCollapsedState = !isCodePaneCollapsed
+
+    if (!isCodePaneCollapsed && newCollapsedState && initialPosition !== null) {
+      requestAnimationFrame(() => {
+        window.scrollTo({
+          top: initialPosition,
+          behavior: 'smooth',
+        })
+      })
+    }
+
+    setIsCodePaneCollapsed(newCollapsedState)
+  }, [isCodePaneCollapsed, initialPosition])
+
   const noInline = props['data-filename'] === 'noinline' || false
 
   useEffect(() => {
@@ -92,7 +132,7 @@ export function ReactCodeBlock(props: ReactCodeBlockProps) {
   return (
     <>
       <LiveProvider transformCode={transformCodeWithBasePath} code={code} scope={props.jsxScope} noInline={noInline}>
-        <div className={clsx(styles.CodeBlock, 'custom-component')}>
+        <div ref={rootRef} className={clsx(styles.CodeBlock, 'custom-component')}>
           {shouldShowPreview && (
             <div>
               <div className={styles.colorModeMenu}>
@@ -126,8 +166,28 @@ export function ReactCodeBlock(props: ReactCodeBlockProps) {
               Reset
             </Button>
           </div>
-          <div className={styles.Editor} ref={editorRef}>
-            <LiveEditor theme={colorMode === 'light' ? lightTheme : darkTheme} onChange={setCode} />
+          <div className={styles.EditorWrapper}>
+            <div
+              className={clsx(styles.Editor, isCodePaneCollapsed && styles['Editor--is-collapsed'])}
+              ref={editorRef}
+              id={`${uniqueId}-code-editor-content`}
+            >
+              <LiveEditor theme={colorMode === 'light' ? lightTheme : darkTheme} onChange={setCode} />
+            </div>
+            {shouldShowCollapse && (
+              <button
+                className={clsx(styles.collapseButton, isCodePaneCollapsed && styles['collapseButton--collapsed'])}
+                onClick={handleCollapsibleCodePane}
+                aria-expanded={!isCodePaneCollapsed}
+                aria-controls={`${uniqueId}-code-editor-content`}
+                aria-label={isCodePaneCollapsed ? 'Show full code block' : 'Collapse code block'}
+              >
+                <Text size="100" className={styles.collapseLabel}>
+                  {isCodePaneCollapsed ? 'Show full code' : 'Collapse code'}
+                </Text>
+                <Text variant="muted">{isCodePaneCollapsed ? <UnfoldIcon /> : <FoldIcon />}</Text>
+              </button>
+            )}
           </div>
           {shouldShowPreview && (
             <div className={styles.Error}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/doctocat-nextjs",
-  "version": "0.5.4-rc.3b1107b",
+  "version": "0.5.4-rc.bcfc99f",
   "description": "A Next.js theme for building Primer documentation sites",
   "main": "index.js",
   "type": "module",