fix: Comment action not visible on mobile formatting toolbar

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),
     },
   ];
 }