From 32f8c1942cdfbc476cc8516568ef3e5d59035836 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Mon, 16 Feb 2026 14:09:58 +0100
Subject: [PATCH] optional title

---
 src/code/code.test.tsx     |  2 +-
 src/code/code.tsx          | 36 ++++++++++++++++++------------------
 src/editor/editor.test.tsx |  2 +-
 src/editor/editor.tsx      |  2 +-
 4 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/code/code.test.tsx b/src/code/code.test.tsx
index 653c54c..e9fd11e 100644
--- a/src/code/code.test.tsx
+++ b/src/code/code.test.tsx
@@ -379,7 +379,7 @@ describe('Code', () => {
         background-color: var(--codice-control-color);
       }
 
-      }</style><div data-codice-controls="true"><span data-codice-control="true"></span><span data-codice-control="true"></span><span data-codice-control="true"></span></div><input data-codice-title="true" readOnly=""/></div><pre data-codice-code-content="true"><code><span class="sh__line" data-codice-code-line="true"><span data-sh-token-type="element" class="sh__token--identifier" style="color:var(--sh-identifier)">test</span></span></code></pre></div>"
+      }</style><div data-codice-controls="true"><span data-codice-control="true"></span><span data-codice-control="true"></span><span data-codice-control="true"></span></div></div><pre data-codice-code-content="true"><code><span class="sh__line" data-codice-code-line="true"><span data-sh-token-type="element" class="sh__token--identifier" style="color:var(--sh-identifier)">test</span></span></code></pre></div>"
     `)
   })
 
diff --git a/src/code/code.tsx b/src/code/code.tsx
index 209dc36..b4f6953 100644
--- a/src/code/code.tsx
+++ b/src/code/code.tsx
@@ -16,7 +16,7 @@ const getPresetByExt = (ext: string) => {
     case 'py':
       return presets.python
     case 'rs':
-      return presets.rust 
+      return presets.rust
     default:
       return undefined
   }
@@ -63,19 +63,19 @@ function generateHighlightedLines(
         .map((child, childIndex) => {
           const { tagName: Token, type, children, properties } = child
           return (
-            <Token 
+            <Token
               data-sh-token-type={type}
-              key={childIndex} 
+              key={childIndex}
               {...properties}
             >
               {(children[0].value)}
             </Token>
           )
         })
-        
+
 
       return (
-        <Line 
+        <Line
           {...lineProperties}
           // Add data-highlight attribute if line is highlighted
           {...(isHighlighted ? {'data-highlight': true} : {})}
@@ -112,18 +112,18 @@ function TitleInput({
   )
 }
 
-export function CodeHeader({ 
-  title, 
+export function CodeHeader({
+  title,
   controls = false,
   onChangeTitle,
 }: {
-  title?: string
+  title?: string | null
   controls: boolean
   onChangeTitle?: (title: string) => void
 }) {
   if (!title && !controls) return null
   return (
-    <div 
+    <div
       data-codice-header
       data-codice-header-controls={controls}
     >
@@ -135,16 +135,16 @@ export function CodeHeader({
           <span data-codice-control />
         </div>
       ) : null}
-      <TitleInput title={title} onChange={onChangeTitle} />
+      {title ? <TitleInput title={title} onChange={onChangeTitle} /> : null}
     </div>
   )
 }
 
-function CodeFrame({ 
-  children, 
+function CodeFrame({
+  children,
   preformatted,
   asMarkup,
-}: { 
+}: {
   children: React.ReactNode
   preformatted: boolean
   asMarkup: boolean
@@ -186,8 +186,8 @@ export function Code({
   asMarkup?: boolean
   extension?: string
 } & React.HTMLAttributes<HTMLDivElement>) {
-  const lineElements = useMemo(() => 
-    asMarkup 
+  const lineElements = useMemo(() =>
+    asMarkup
       ? code
       : generateHighlightedLines(code, highlightLines, lineNumbers, title, extension),
     [code, highlightLines, lineNumbers, title, extension, asMarkup]
@@ -196,9 +196,9 @@ export function Code({
   return (
     // Add both attribute because it's both root component and child component (of editor)
     <div
-      {...props} 
-      data-codice="code" 
-      data-codice-code 
+      {...props}
+      data-codice="code"
+      data-codice-code
       data-codice-line-numbers={lineNumbers}
     >
       <ScopedStyle css={css({ fontSize, lineNumbersWidth, padding })} />
diff --git a/src/editor/editor.test.tsx b/src/editor/editor.test.tsx
index 77a8d61..24c6780 100644
--- a/src/editor/editor.test.tsx
+++ b/src/editor/editor.test.tsx
@@ -121,7 +121,7 @@ describe('Code', () => {
         background-color: var(--codice-control-color);
       }
 
-      }</style><div data-codice-controls="true"><span data-codice-control="true"></span><span data-codice-control="true"></span><span data-codice-control="true"></span></div><input data-codice-title="true"/></div><div data-codice-content="true"><div data-codice="code" data-codice-code="true" data-codice-line-numbers="true"><style data-codice-style="true">@scope {
+      }</style><div data-codice-controls="true"><span data-codice-control="true"></span><span data-codice-control="true"></span><span data-codice-control="true"></span></div></div><div data-codice-content="true"><div data-codice="code" data-codice-code="true" data-codice-line-numbers="true"><style data-codice-style="true">@scope {
       :scope[data-codice-code] {
         padding: calc(var(--codice-code-padding) / 2) 0;
       }
diff --git a/src/editor/editor.tsx b/src/editor/editor.tsx
index 2ce9490..f297418 100644
--- a/src/editor/editor.tsx
+++ b/src/editor/editor.tsx
@@ -21,7 +21,7 @@ export const Editor = forwardRef(function Editor(
     textareaRef,
     ...props
   }: {
-    title?: string
+    title?: string | null
     value?: string
     controls?: boolean
     lineNumbers?: boolean