implement titleBar query support

components/Carbon.js

@@ -201,6 +201,8 @@ class Carbon extends React.PureComponent {
             <div className="container">
               {config.windowControls ? (
                 <WindowControls
+                  titleBar={this.props.titleBar}
+                  onTitleBarChange={this.props.onTitleBarChange}
                   theme={config.windowTheme}
                   code={this.props.children}
                   copyable={this.props.copyable}

components/Editor.js

@@ -42,7 +42,7 @@ const SnippetToolbar = dynamic(() => import('./SnippetToolbar'), {
   loading: () => null,
 })
 
-const getConfig = omit(['code'])
+const getConfig = omit(['code', 'titleBar'])
 const unsplashPhotographerCredit = /\n\n\/\/ Photo by.+?on Unsplash/
 
 class Editor extends React.Component {
@@ -91,6 +91,7 @@ class Editor extends React.Component {
   updateState = updates => this.setState(updates, () => this.onUpdate(this.state))
 
   updateCode = code => this.updateState({ code })
+  updateTitleBar = titleBar => this.updateState({ titleBar })
   updateWidth = width => this.setState({ widthAdjustment: false, width })
 
   getCarbonImage = async (
@@ -322,6 +323,7 @@ class Editor extends React.Component {
       backgroundMode,
       code,
       exportSize,
+      titleBar,
     } = this.state
 
     const config = getConfig(this.state)
@@ -399,6 +401,8 @@ class Editor extends React.Component {
                 updateWidth={this.updateWidth}
                 loading={this.state.loading}
                 theme={theme}
+                titleBar={titleBar}
+                onTitleBarChange={this.updateTitleBar}
               >
                 {code != null ? code : DEFAULT_CODE}
               </Carbon>

components/WindowControls.js

@@ -38,12 +38,25 @@ const CopyButton = React.memo(function CopyButton({ text }) {
 
 const WINDOW_THEMES_MAP = { bw: <ControlsBW />, boxy: <ControlsBoxy /> }
 
-export default function WindowControls({ theme, copyable, code, light }) {
+export default function WindowControls({
+  theme,
+  copyable,
+  code,
+  light,
+  titleBar,
+  onTitleBarChange,
+}) {
   return (
     <div className="window-controls">
       {WINDOW_THEMES_MAP[theme] || <Controls />}
       <div className="window-title-container">
-        <input aria-label="Image Title" type="text" spellCheck="false" />
+        <input
+          aria-label="Image title"
+          type="text"
+          spellCheck="false"
+          value={titleBar || ''}
+          onChange={e => onTitleBarChange(e.target.value)}
+        />
       </div>
       {copyable && (
         <div className="copy-button">

lib/routing.js

@@ -82,6 +82,7 @@ const readMappings = [
   { field: 'id' },
   { field: 'highlights', type: 'parse' },
   { field: 'code', type: 'decode' },
+  { field: 'tb:titleBar', type: 'decode' },
 ]
 
 const writeMappings = [
@@ -106,6 +107,7 @@ const writeMappings = [
   { field: 'exportSize:es' },
   { field: 'watermark:wm', type: 'bool' },
   { field: 'code', type: 'encode' },
+  { field: 'titleBar:tb', type: 'encode' },
 ]
 
 export const serializeState = state => {