From f0cb962933d0d8c203d59200d76f98c6b5d0d338 Mon Sep 17 00:00:00 2001
From: Mike Fix <mrfix84@gmail.com>
Date: Sun, 5 Jun 2022 11:54:55 -0700
Subject: [PATCH] implement titleBar query support

---
 components/Carbon.js         |  2 ++
 components/Editor.js         |  6 +++++-
 components/WindowControls.js | 17 +++++++++++++++--
 lib/routing.js               |  2 ++
 4 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/components/Carbon.js b/components/Carbon.js
index dbf1ae9..3266cf5 100644
--- a/components/Carbon.js
+++ b/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}
diff --git a/components/Editor.js b/components/Editor.js
index 7ab5d75..1234ced 100644
--- a/components/Editor.js
+++ b/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>
diff --git a/components/WindowControls.js b/components/WindowControls.js
index 079d992..336d19a 100644
--- a/components/WindowControls.js
+++ b/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">
diff --git a/lib/routing.js b/lib/routing.js
index ab521d1..707e395 100644
--- a/lib/routing.js
+++ b/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 => {