@@ -179,33 +179,35 @@ export function EditorToolbar({ editor, className }: { editor: Editor | null; cl
179179 }
180180 : null ,
181181 } )
182- if ( ! editor || ! state ) return null
182+ if ( ! editor ) return null
183+ // useEditorState only reports after the first transaction of a freshly mounted editor.
184+ const active = state ?? { bold : false , italic : false , underline : false , strike : false , bullet : false , ordered : false , quote : false , code : false }
183185 const chain = ( ) => editor . chain ( ) . focus ( )
184186 return (
185187 < div className = { cn ( "flex flex-wrap items-center gap-0.5" , className ) } role = "toolbar" aria-label = "Formatting" >
186- < ToolbarButton label = "Bold" active = { state . bold } onClick = { ( ) => chain ( ) . toggleBold ( ) . run ( ) } >
188+ < ToolbarButton label = "Bold" active = { active . bold } onClick = { ( ) => chain ( ) . toggleBold ( ) . run ( ) } >
187189 < Bold />
188190 </ ToolbarButton >
189- < ToolbarButton label = "Italic" active = { state . italic } onClick = { ( ) => chain ( ) . toggleItalic ( ) . run ( ) } >
191+ < ToolbarButton label = "Italic" active = { active . italic } onClick = { ( ) => chain ( ) . toggleItalic ( ) . run ( ) } >
190192 < Italic />
191193 </ ToolbarButton >
192- < ToolbarButton label = "Underline" active = { state . underline } onClick = { ( ) => chain ( ) . toggleUnderline ( ) . run ( ) } >
194+ < ToolbarButton label = "Underline" active = { active . underline } onClick = { ( ) => chain ( ) . toggleUnderline ( ) . run ( ) } >
193195 < Underline />
194196 </ ToolbarButton >
195- < ToolbarButton label = "Strikethrough" active = { state . strike } onClick = { ( ) => chain ( ) . toggleStrike ( ) . run ( ) } >
197+ < ToolbarButton label = "Strikethrough" active = { active . strike } onClick = { ( ) => chain ( ) . toggleStrike ( ) . run ( ) } >
196198 < Strikethrough />
197199 </ ToolbarButton >
198200 < span className = "mx-1 h-4 w-px bg-border" aria-hidden />
199- < ToolbarButton label = "Bulleted list" active = { state . bullet } onClick = { ( ) => chain ( ) . toggleBulletList ( ) . run ( ) } >
201+ < ToolbarButton label = "Bulleted list" active = { active . bullet } onClick = { ( ) => chain ( ) . toggleBulletList ( ) . run ( ) } >
200202 < List />
201203 </ ToolbarButton >
202- < ToolbarButton label = "Numbered list" active = { state . ordered } onClick = { ( ) => chain ( ) . toggleOrderedList ( ) . run ( ) } >
204+ < ToolbarButton label = "Numbered list" active = { active . ordered } onClick = { ( ) => chain ( ) . toggleOrderedList ( ) . run ( ) } >
203205 < ListOrdered />
204206 </ ToolbarButton >
205- < ToolbarButton label = "Quote" active = { state . quote } onClick = { ( ) => chain ( ) . toggleBlockquote ( ) . run ( ) } >
207+ < ToolbarButton label = "Quote" active = { active . quote } onClick = { ( ) => chain ( ) . toggleBlockquote ( ) . run ( ) } >
206208 < Quote />
207209 </ ToolbarButton >
208- < ToolbarButton label = "Code" active = { state . code } onClick = { ( ) => chain ( ) . toggleCode ( ) . run ( ) } >
210+ < ToolbarButton label = "Code" active = { active . code } onClick = { ( ) => chain ( ) . toggleCode ( ) . run ( ) } >
209211 < Code />
210212 </ ToolbarButton >
211213 < LinkButton editor = { editor } />
0 commit comments