fix static line numbers

mdxts/src/components/Code.tsx

@@ -33,6 +33,9 @@ export type BaseCodeProps = {
 
   /** Class name to be applied to the code block. */
   className?: string
+
+  /** Whether the code block is nested in an editor. */
+  isNestedInEditor?: boolean
 }
 
 export type CodeProps =
@@ -76,6 +79,7 @@ export async function Code({
   showErrors,
   sourcePath,
   line,
+  isNestedInEditor,
   ...props
 }: CodeProps) {
   let finalValue
@@ -137,6 +141,7 @@ export async function Code({
       language={finalLanguage}
       theme={theme}
       isJsxOnly={isJsxOnly}
+      isNestedInEditor={isNestedInEditor}
       showErrors={showErrors}
       className={className}
       edit={

mdxts/src/components/CodeView.tsx

@@ -47,13 +47,15 @@ export function CodeView({
   showErrors,
   isJsxOnly,
   className,
+  isNestedInEditor,
   edit,
 }: CodeProps & {
   row?: [number, number]
   tokens: any
   sourceFile?: SourceFile
   highlighter: any
   isJsxOnly?: boolean
+  isNestedInEditor?: boolean
   edit?: any
 }) {
   const identifierBounds = sourceFile
@@ -62,8 +64,22 @@ export function CodeView({
   const shouldHighlightLine = calculateLinesToHighlight(highlight)
   const diagnostics = sourceFile?.getPreEmitDiagnostics()
   const isAutoGenerated = filename?.includes('mdxts')
+  const Container = isNestedInEditor
+    ? React.Fragment
+    : (props) => (
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'auto 1fr',
+            padding: '10px 0',
+            overflow: 'auto',
+          }}
+          {...props}
+        />
+      )
+
   return (
-    <>
+    <Container>
       {/* {filename ? isAutoGenerated ? null : <h3>{filename}</h3> : null} */}
       {lineNumbers ? (
         <div
@@ -111,7 +127,7 @@ export function CodeView({
           letterSpacing: '0px',
           tabSize: 4,
           padding: 0,
-          margin: '0 0 1.6rem',
+          margin: 0,
           borderRadius: 4,
           pointerEvents: 'none',
           position: 'relative',
@@ -181,7 +197,7 @@ export function CodeView({
           )
         })}
       </pre>
-    </>
+    </Container>
   )
 }
 

mdxts/src/components/Editor.tsx

@@ -32,6 +32,7 @@ export function Editor({
         lineNumbers={lineNumbers}
         highlight={highlight}
         theme={theme}
+        isNestedInEditor
       />
     </ClientEditor>
   )

mdxts/src/components/client/Editor.tsx

@@ -15,14 +15,8 @@ import { project, languageService } from '../project'
 import { CodeView } from '../CodeView'
 
 const isClient = typeof document !== 'undefined'
-const canvas = isClient ? document.createElement('canvas') : null
-const context = canvas?.getContext('2d')
 let fetchPromise = isClient ? fetch('/_next/static/mdxts/types.json') : null
 
-if (context) {
-  context.font = '14px monospace'
-}
-
 export type EditorProps = {
   /** Default value of the editor. */
   defaultValue?: string
@@ -354,6 +348,7 @@ export function Editor({
               highlight={highlight}
               language={language}
               theme={theme}
+              isNestedInEditor
             />
           )}
         </>

site/docs/01.getting-started.mdx

@@ -1,7 +1,7 @@
 # Getting Started
 
 <Summary>
-  Build interactive, type-safe content, and documentation. MDXTS generates a
+  Build interactive, type-safe content and documentation. MDXTS generates a
   graph of content, source code, and examples that can be rendered through
   components and utilities. Built on [MDX](https://mdxjs.com/),
   [esbuild](https://esbuild.github.io/), and [TS Morph](https://ts-morph.com/).
@@ -63,10 +63,10 @@ const withMdxts = createMdxtsPlugin({
 
 To generate data, you can use the `createData` function exported from the `mdxts` package:
 
-```ts filename="data.ts" showErrors
-import { createSourceFiles } from 'mdxts'
+```ts filename="data.ts"
+import { getData } from 'mdxts'
 
-export const allDocs = createSourceFiles({
+export const allDocs = getData({
   pattern: '**/*.mdx',
   baseDirectory: 'docs',
 })

site/docs/06.code.mdx

@@ -1,5 +1,3 @@
-import Counter from './counter/Counter.tsx'
-
 # Code
 
 ## Code Blocks
@@ -17,7 +15,7 @@ export function useCounter(initialValue: number = 0) {
 }
 ```
 
-```tsx filename="Counter.tsx" editable lineNumbers
+```tsx filename="Counter.tsx" lineNumbers
 'use client'
 import { useCounter } from './useCounter'
 
@@ -36,13 +34,3 @@ export default function Counter({ initialCount }: { initialCount: number }) {
 ```tsx
 <Counter initialCount={2} />
 ```
-
-## Components
-
-<Code source="./counter/Counter.tsx" />
-
-<Code source="./counter/useCounter.ts" />
-
-<Playground>
-  <Counter initialCount={3} />
-</Playground>

site/mdx-components.tsx

@@ -24,7 +24,6 @@ export function useMDXComponents() {
       )
     },
     Editor: (props) => <div {...props} />,
-    Preview: (props) => <div {...props} />,
     Error: (props) => <div {...props} />,
     Outline: (props) => <div {...props} />,
     References: (props) => <div {...props} />,