feat: Enable block insertion in table cells from formatting menu

fix: Remove gutter controls from headers not at root

app/editor/menus/formatting.tsx

@@ -19,7 +19,6 @@ import {
   Heading3Icon,
 } from "outline-icons";
 import { EditorState } from "prosemirror-state";
-import { isInTable } from "prosemirror-tables";
 import * as React from "react";
 import isInCode from "@shared/editor/queries/isInCode";
 import isInList from "@shared/editor/queries/isInList";
@@ -35,11 +34,9 @@ export default function formattingMenuItems(
   dictionary: Dictionary
 ): MenuItem[] {
   const { schema } = state;
-  const isTable = isInTable(state);
   const isList = isInList(state);
   const isCode = isInCode(state);
   const isCodeBlock = isInCode(state, { onlyBlock: true });
-  const allowBlocks = !isTable && !isList;
 
   return [
     {
@@ -90,7 +87,7 @@ export default function formattingMenuItems(
     },
     {
       name: "separator",
-      visible: allowBlocks && !isCode,
+      visible: !isCode,
     },
     {
       name: "heading",
@@ -98,7 +95,7 @@ export default function formattingMenuItems(
       icon: <Heading1Icon />,
       active: isNodeActive(schema.nodes.heading, { level: 1 }),
       attrs: { level: 1 },
-      visible: allowBlocks && !isCode,
+      visible: !isCode,
     },
     {
       name: "heading",
@@ -106,7 +103,7 @@ export default function formattingMenuItems(
       icon: <Heading2Icon />,
       active: isNodeActive(schema.nodes.heading, { level: 2 }),
       attrs: { level: 2 },
-      visible: allowBlocks && !isCode,
+      visible: !isCode,
     },
     {
       name: "heading",
@@ -114,7 +111,7 @@ export default function formattingMenuItems(
       icon: <Heading3Icon />,
       active: isNodeActive(schema.nodes.heading, { level: 3 }),
       attrs: { level: 3 },
-      visible: allowBlocks && !isCode,
+      visible: !isCode,
     },
     {
       name: "blockquote",
@@ -122,11 +119,11 @@ export default function formattingMenuItems(
       icon: <BlockQuoteIcon />,
       active: isNodeActive(schema.nodes.blockquote),
       attrs: { level: 2 },
-      visible: allowBlocks && !isCode,
+      visible: !isCode,
     },
     {
       name: "separator",
-      visible: (allowBlocks || isList) && !isCode,
+      visible: !isCode,
     },
     {
       name: "checkbox_list",
@@ -134,21 +131,21 @@ export default function formattingMenuItems(
       icon: <TodoListIcon />,
       keywords: "checklist checkbox task",
       active: isNodeActive(schema.nodes.checkbox_list),
-      visible: (allowBlocks || isList) && !isCode,
+      visible: !isCode,
     },
     {
       name: "bullet_list",
       tooltip: dictionary.bulletList,
       icon: <BulletedListIcon />,
       active: isNodeActive(schema.nodes.bullet_list),
-      visible: (allowBlocks || isList) && !isCode,
+      visible: !isCode,
     },
     {
       name: "ordered_list",
       tooltip: dictionary.orderedList,
       icon: <OrderedListIcon />,
       active: isNodeActive(schema.nodes.ordered_list),
-      visible: (allowBlocks || isList) && !isCode,
+      visible: !isCode,
     },
     {
       name: "outdentList",

shared/editor/components/Styles.ts

@@ -357,7 +357,7 @@ width: 100%;
     }
 
     &:not(.placeholder):before {
-      display: ${props.readOnly ? "none" : "inline-block"};
+      display: none;
       font-family: ${props.theme.fontFamilyMono};
       color: ${props.theme.textSecondary};
       font-size: 13px;
@@ -774,7 +774,7 @@ h6:not(.placeholder):before {
   background: ${props.theme.background};
   margin-${props.rtl ? "right" : "left"}: -26px;
   flex-direction: ${props.rtl ? "row-reverse" : "row"};
-  display: inline-flex;
+  display: none;
   position: relative;
   top: -2px;
   width: 26px;
@@ -809,6 +809,22 @@ h6 {
   }
 }
 
+.ProseMirror > {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    .heading-actions {
+      display: inline-flex;
+    }
+    &:not(.placeholder):before {
+      display: ${props.readOnly ? "none" : "inline-block"};
+    }
+  }
+}
+
 .heading-fold {
   display: inline-block;
   transform-origin: center;
@@ -864,9 +880,6 @@ h6 {
 
   a {
     color: ${props.theme.noticeInfoText};
-  }
-
-  a:not(.heading-name) {
     text-decoration: underline;
   }