feat: Allow commenting in code (#5953)

* Allow commenting in code marks

* Allow commenting in code blocks

* Floating comment toolbar in code block

app/editor/components/FloatingToolbar.tsx

@@ -74,7 +74,7 @@ function usePosition({
   // position at the top right of code blocks
   const codeBlock = findParentNode(isCode)(view.state.selection);
 
-  if (codeBlock) {
+  if (codeBlock && view.state.selection.empty) {
     const element = view.nodeDOM(codeBlock.pos);
     const bounds = (element as HTMLElement).getBoundingClientRect();
     selectionBounds.top = bounds.top;

app/editor/components/SelectionToolbar.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import createAndInsertLink from "@shared/editor/commands/createAndInsertLink";
 import filterExcessSeparators from "@shared/editor/lib/filterExcessSeparators";
 import getMarkRange from "@shared/editor/queries/getMarkRange";
+import isInCode from "@shared/editor/queries/isInCode";
 import isMarkActive from "@shared/editor/queries/isMarkActive";
 import isNodeActive from "@shared/editor/queries/isNodeActive";
 import { getColumnIndex, getRowIndex } from "@shared/editor/queries/table";
@@ -216,13 +217,11 @@ export default function SelectionToolbar(props: Props) {
   const range = getMarkRange(selection.$from, state.schema.marks.link);
   const isImageSelection =
     selection instanceof NodeSelection && selection.node.type.name === "image";
-  const isCodeSelection =
-    isNodeActive(state.schema.nodes.code_block)(state) ||
-    isNodeActive(state.schema.nodes.code_fence)(state);
+  const isCodeSelection = isInCode(state, { onlyBlock: true });
 
   let items: MenuItem[] = [];
 
-  if (isCodeSelection) {
+  if (isCodeSelection && selection.empty) {
     items = getCodeMenuItems(state, readOnly, dictionary);
   } else if (isTableSelection) {
     items = getTableMenuItems(dictionary);

app/editor/components/ToolbarButton.tsx

@@ -23,7 +23,7 @@ export default styled.button.attrs((props) => ({
   background: none;
   transition: opacity 100ms ease-in-out;
   padding: 0;
-  opacity: 0.7;
+  opacity: 0.8;
   outline: none;
   pointer-events: all;
   position: relative;

app/editor/components/ToolbarMenu.tsx

@@ -129,6 +129,7 @@ const Arrow = styled(ExpandedIcon)`
 const Label = styled.span`
   font-size: 15px;
   font-weight: 500;
+  color: ${s("text")};
 `;
 
 export default ToolbarMenu;

app/editor/menus/formatting.tsx

@@ -36,6 +36,7 @@ export default function formattingMenuItems(
   const isTable = isInTable(state);
   const isList = isInList(state);
   const isCode = isInCode(state);
+  const isCodeBlock = isInCode(state, { onlyBlock: true });
   const allowBlocks = !isTable && !isList;
 
   return [
@@ -83,6 +84,7 @@ export default function formattingMenuItems(
       tooltip: dictionary.codeInline,
       icon: <CodeIcon />,
       active: isMarkActive(schema.marks.code_inline),
+      visible: !isCodeBlock,
     },
     {
       name: "separator",
@@ -166,8 +168,8 @@ export default function formattingMenuItems(
       name: "comment",
       tooltip: dictionary.comment,
       icon: <CommentIcon />,
+      label: isCodeBlock ? dictionary.comment : undefined,
       active: isMarkActive(schema.marks.comment),
-      visible: !isCode,
     },
   ];
 }