@@ -51,8 +51,14 @@ export function AnnotationEditor(props: AnnotationEditorProps) {
5151 onPointerDown = { ( event ) => {
5252 if ( event . target !== event . currentTarget ) return
5353 const bounds = event . currentTarget . getBoundingClientRect ( )
54- const column = Math . min ( props . cols - 1 , Math . max ( 0 , Math . floor ( ( ( event . clientX - bounds . left ) / bounds . width ) * props . cols ) ) )
55- const row = Math . min ( props . rows - 1 , Math . max ( 0 , Math . floor ( ( ( event . clientY - bounds . top ) / bounds . height ) * props . rows ) ) )
54+ const column = Math . min (
55+ props . cols - 1 ,
56+ Math . max ( 0 , Math . floor ( ( ( event . clientX - bounds . left ) / bounds . width ) * props . cols ) ) ,
57+ )
58+ const row = Math . min (
59+ props . rows - 1 ,
60+ Math . max ( 0 , Math . floor ( ( ( event . clientY - bounds . top ) / bounds . height ) * props . rows ) ) ,
61+ )
5662 setDraft ( { row, column, note : "" } )
5763 } }
5864 >
@@ -83,7 +89,9 @@ export function AnnotationEditor(props: AnnotationEditorProps) {
8389 >
8490 < header >
8591 < span > { draft . id ? "Edit annotation" : "New annotation" } </ span >
86- < small > R{ draft . row + 1 } · C{ draft . column + 1 } </ small >
92+ < small >
93+ R{ draft . row + 1 } · C{ draft . column + 1 }
94+ </ small >
8795 </ header >
8896 < textarea
8997 ref = { textareaRef }
@@ -117,8 +125,12 @@ export function AnnotationEditor(props: AnnotationEditorProps) {
117125 >
118126 Delete
119127 </ button >
120- ) : < span /> }
121- < button type = "button" onClick = { ( ) => setDraft ( undefined ) } > Cancel</ button >
128+ ) : (
129+ < span />
130+ ) }
131+ < button type = "button" onClick = { ( ) => setDraft ( undefined ) } >
132+ Cancel
133+ </ button >
122134 < button type = "button" className = "annotation-composer-save" disabled = { ! draft . note . trim ( ) } onClick = { save } >
123135 { draft . id ? "Save" : "Add" }
124136 </ button >
@@ -130,16 +142,22 @@ export function AnnotationEditor(props: AnnotationEditorProps) {
130142 < header >
131143 < div >
132144 < strong > Annotations</ strong >
133- < span > { props . annotations . length === 0 ? "Click anywhere on the terminal" : `${ props . annotations . length } placed` } </ span >
145+ < span >
146+ { props . annotations . length === 0 ? "Click anywhere on the terminal" : `${ props . annotations . length } placed` }
147+ </ span >
134148 </ div >
135- < button type = "button" onClick = { props . onDone } > Done</ button >
149+ < button type = "button" onClick = { props . onDone } >
150+ Done
151+ </ button >
136152 </ header >
137153 < div className = "annotation-list" >
138154 { props . annotations . map ( ( annotation , index ) => (
139155 < button key = { annotation . id } type = "button" className = "annotation-list-row" onClick = { ( ) => edit ( annotation ) } >
140156 < span className = "annotation-list-pin" > { index + 1 } </ span >
141157 < span >
142- < small > Row { annotation . row + 1 } · Column { annotation . column + 1 } </ small >
158+ < small >
159+ Row { annotation . row + 1 } · Column { annotation . column + 1 }
160+ </ small >
143161 < strong > { annotation . note } </ strong >
144162 </ span >
145163 </ button >
@@ -155,7 +173,11 @@ export function AnnotationEditor(props: AnnotationEditorProps) {
155173 >
156174 Open GitHub issue
157175 </ a >
158- < span > { complete . length === 0 ? "Add a note to continue" : `${ complete . length } note${ complete . length === 1 ? "" : "s" } will be included` } </ span >
176+ < span >
177+ { complete . length === 0
178+ ? "Add a note to continue"
179+ : `${ complete . length } note${ complete . length === 1 ? "" : "s" } will be included` }
180+ </ span >
159181 </ footer >
160182 </ aside >
161183 </ >
0 commit comments