Allows commenting outside edit mode when seamless editing is disabled. (#5422)

app/editor/components/ToolbarMenu.tsx

@@ -45,8 +45,12 @@ function ToolbarMenu(props: Props) {
         const isActive = item.active ? item.active(state) : false;
 
         return (
-          <Tooltip tooltip={item.tooltip} key={index}>
+          <Tooltip
+            tooltip={item.label === item.tooltip ? undefined : item.tooltip}
+            key={index}
+          >
             <ToolbarButton onClick={handleClick(item)} active={isActive}>
+              {item.label && <Label>{item.label}</Label>}
               {item.icon}
             </ToolbarButton>
           </Tooltip>
@@ -56,4 +60,9 @@ function ToolbarMenu(props: Props) {
   );
 }
 
+const Label = styled.span`
+  font-size: 15px;
+  font-weight: 500;
+`;
+
 export default ToolbarMenu;