fix: Comment action not visible on mobile formatting toolbar

app/editor/components/FloatingToolbar.tsx

@@ -223,6 +223,7 @@ const FloatingToolbar = React.forwardRef(function FloatingToolbar_(
       return (
         <ReactPortal>
           <MobileWrapper
+            ref={menuRef}
             style={{
               bottom: `calc(100% - ${height - rect.y}px)`,
             }}

app/editor/components/SelectionToolbar.tsx

@@ -100,10 +100,10 @@ export default function SelectionToolbar(props: Props) {
   const { view, commands } = useEditor();
   const dictionary = useDictionary();
   const menuRef = React.useRef<HTMLDivElement | null>(null);
-  const isActive = useIsActive(view.state);
+  const isMobile = useMobile();
+  const isActive = useIsActive(view.state) || isMobile;
   const isDragging = useIsDragging();
   const previousIsActive = usePrevious(isActive);
-  const isMobile = useMobile();
 
   React.useEffect(() => {
     // Trigger callbacks when the toolbar is opened or closed

app/editor/components/ToolbarMenu.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { useMenuState } from "reakit";
 import { MenuButton } from "reakit/Menu";
 import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
 import { MenuItem } from "@shared/editor/types";
 import { s } from "@shared/styles";
 import ContextMenu from "~/components/ContextMenu";
@@ -123,6 +124,11 @@ const FlexibleWrapper = styled.div`
   overflow: hidden;
   display: flex;
   gap: 6px;
+
+  ${breakpoint("mobile", "tablet")`
+    justify-content: space-evenly;
+    align-items: baseline;
+  `}
 `;
 
 const Label = styled.span`

app/editor/menus/formatting.tsx

@@ -37,6 +37,7 @@ export default function formattingMenuItems(
   const isList = isInList(state);
   const isCode = isInCode(state);
   const isCodeBlock = isInCode(state, { onlyBlock: true });
+  const isEmpty = state.selection.empty;
 
   return [
     {
@@ -44,50 +45,50 @@ export default function formattingMenuItems(
       tooltip: dictionary.placeholder,
       icon: <InputIcon />,
       active: isMarkActive(schema.marks.placeholder),
-      visible: isTemplate,
+      visible: isTemplate && (!isMobile || !isEmpty),
     },
     {
       name: "separator",
-      visible: isTemplate,
+      visible: isTemplate && (!isMobile || !isEmpty),
     },
     {
       name: "strong",
       tooltip: dictionary.strong,
       icon: <BoldIcon />,
       active: isMarkActive(schema.marks.strong),
-      visible: !isCode,
+      visible: !isCode && (!isMobile || !isEmpty),
     },
     {
       name: "em",
       tooltip: dictionary.em,
       icon: <ItalicIcon />,
       active: isMarkActive(schema.marks.em),
-      visible: !isCode,
+      visible: !isCode && (!isMobile || !isEmpty),
     },
     {
       name: "strikethrough",
       tooltip: dictionary.strikethrough,
       icon: <StrikethroughIcon />,
       active: isMarkActive(schema.marks.strikethrough),
-      visible: !isCode,
+      visible: !isCode && (!isMobile || !isEmpty),
     },
     {
       name: "highlight",
       tooltip: dictionary.mark,
       icon: <HighlightIcon />,
       active: isMarkActive(schema.marks.highlight),
-      visible: !isTemplate && !isCode,
+      visible: !isCode && (!isMobile || !isEmpty),
     },
     {
       name: "code_inline",
       tooltip: dictionary.codeInline,
       icon: <CodeIcon />,
       active: isMarkActive(schema.marks.code_inline),
-      visible: !isCodeBlock,
+      visible: !isCodeBlock && (!isMobile || !isEmpty),
     },
     {
       name: "separator",
-      visible: !isCode,
+      visible: !isCodeBlock,
     },
     {
       name: "heading",
@@ -95,7 +96,7 @@ export default function formattingMenuItems(
       icon: <Heading1Icon />,
       active: isNodeActive(schema.nodes.heading, { level: 1 }),
       attrs: { level: 1 },
-      visible: !isCode,
+      visible: !isCodeBlock && (!isMobile || isEmpty),
     },
     {
       name: "heading",
@@ -103,7 +104,7 @@ export default function formattingMenuItems(
       icon: <Heading2Icon />,
       active: isNodeActive(schema.nodes.heading, { level: 2 }),
       attrs: { level: 2 },
-      visible: !isCode,
+      visible: !isCodeBlock && (!isMobile || isEmpty),
     },
     {
       name: "heading",
@@ -111,7 +112,7 @@ export default function formattingMenuItems(
       icon: <Heading3Icon />,
       active: isNodeActive(schema.nodes.heading, { level: 3 }),
       attrs: { level: 3 },
-      visible: !isCode,
+      visible: !isCodeBlock && (!isMobile || isEmpty),
     },
     {
       name: "blockquote",
@@ -119,11 +120,11 @@ export default function formattingMenuItems(
       icon: <BlockQuoteIcon />,
       active: isNodeActive(schema.nodes.blockquote),
       attrs: { level: 2 },
-      visible: !isCode,
+      visible: !isCodeBlock && (!isMobile || isEmpty),
     },
     {
       name: "separator",
-      visible: !isCode,
+      visible: !isCodeBlock,
     },
     {
       name: "checkbox_list",
@@ -131,21 +132,21 @@ export default function formattingMenuItems(
       icon: <TodoListIcon />,
       keywords: "checklist checkbox task",
       active: isNodeActive(schema.nodes.checkbox_list),
-      visible: !isCode,
+      visible: !isCodeBlock && (!isMobile || isEmpty),
     },
     {
       name: "bullet_list",
       tooltip: dictionary.bulletList,
       icon: <BulletedListIcon />,
       active: isNodeActive(schema.nodes.bullet_list),
-      visible: !isCode,
+      visible: !isCodeBlock && (!isMobile || isEmpty),
     },
     {
       name: "ordered_list",
       tooltip: dictionary.orderedList,
       icon: <OrderedListIcon />,
       active: isNodeActive(schema.nodes.ordered_list),
-      visible: !isCode,
+      visible: !isCodeBlock && (!isMobile || isEmpty),
     },
     {
       name: "outdentList",
@@ -161,7 +162,7 @@ export default function formattingMenuItems(
     },
     {
       name: "separator",
-      visible: !isCode,
+      visible: !isCodeBlock,
     },
     {
       name: "link",
@@ -169,7 +170,7 @@ export default function formattingMenuItems(
       icon: <LinkIcon />,
       active: isMarkActive(schema.marks.link),
       attrs: { href: "" },
-      visible: !isCode,
+      visible: !isCodeBlock && (!isMobile || !isEmpty),
     },
     {
       name: "comment",
@@ -177,16 +178,17 @@ export default function formattingMenuItems(
       icon: <CommentIcon />,
       label: isCodeBlock ? dictionary.comment : undefined,
       active: isMarkActive(schema.marks.comment),
+      visible: !isMobile || !isEmpty,
     },
     {
       name: "separator",
-      visible: isCode && !isCodeBlock,
+      visible: isCode && !isCodeBlock && (!isMobile || !isEmpty),
     },
     {
       name: "copyToClipboard",
       icon: <CopyIcon />,
       tooltip: dictionary.copy,
-      visible: isCode && !isCodeBlock,
+      visible: isCode && !isCodeBlock && (!isMobile || !isEmpty),
     },
   ];
 }