optional title

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>"
     `)
   })
 

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 })} />

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;
       }

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