Remove unneccessarily heading-actions wrapper (#12772)

package.json

@@ -11,7 +11,7 @@
     "build": "yarn clean && yarn vite:build && yarn build:i18n && yarn build:server",
     "start": "node ./build/server/index.js",
     "dev": "NODE_ENV=development yarn concurrently -n api,collaboration  -c \"blue,magenta\" \"node --inspect=0.0.0.0 build/server/index.js --services=cron,collaboration,websockets,admin,web,worker\"",
-    "dev:backend": "NODE_ENV=development nodemon --quiet --exec \"yarn build:server && yarn dev\" -e js,ts,tsx --watch server --watch shared --watch plugins --watch .env --watch .env.local --watch .env.development --ignore \"shared/components/**/*.tsx?\" --ignore \"plugins/client/**/*.tsx?\" --ignore \"**/*.test.ts\" --ignore data/ --ignore build/ --ignore app/ --ignore shared/editor --ignore server/migrations",
+    "dev:backend": "NODE_ENV=development nodemon --quiet --exec \"yarn build:server && yarn dev\" -e js,ts,tsx --watch server --watch shared --watch plugins --watch .env --watch .env.local --watch .env.development --ignore \"shared/components/**/*.tsx?\" --ignore \"plugins/client/**/*.tsx?\" --ignore \"**/*.test.ts\" --ignore data/ --ignore build/ --ignore app/ --ignore \"shared/editor/**\" --ignore server/migrations",
     "dev:watch": "NODE_ENV=development yarn concurrently -n backend,frontend \"yarn dev:backend\" \"yarn vite:dev\"",
     "lint": "oxlint --type-aware app server shared plugins",
     "lint:changed": "git diff --name-only --diff-filter=ACMRTUXB | grep -E '\\.(js|jsx|ts|tsx)$' | xargs -r oxlint",

shared/editor/components/Styles.ts

@@ -648,7 +648,6 @@ width: 100%;
         font-weight: 500;
         line-height: 0;
         margin-left: -24px;
-        transition: opacity 150ms ease-in-out;
         opacity: 0;
         width: 24px;
       }
@@ -659,10 +658,13 @@ width: 100%;
       }
     }
 
-    &:hover,
-    &:focus-within {
-      .heading-actions {
-        opacity: 1;
+    &:hover {
+      .heading-anchor {
+        opacity: 0.75;
+
+        &:hover {
+          opacity: 1;
+        }
       }
     }
   }
@@ -1057,6 +1059,9 @@ h6:not(.placeholder)::before {
     &:not(.placeholder)::before {
       opacity: 1;
     }
+    &:hover:not(.placeholder)::before {
+      opacity: 0;
+    }
   }
 }
 
@@ -1108,42 +1113,32 @@ h6:not(.placeholder)::before {
 }
 
 .heading-anchor {
-  display: inline-block;
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  margin-left: -26px;
+  width: 26px;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  user-select: none;
   color: ${props.theme.text};
-  opacity: .75;
   cursor: var(--pointer);
   background: none;
   outline: none;
   border: 0;
-  margin: 0;
   padding: 0;
-  text-align: start;
   font-weight: 500;
   font-family: ${props.theme.fontFamilyMono};
-  font-size: 14px;
-  line-height: 0;
-  width: 12px;
-  height: 24px;
+  font-size: 16px;
+  line-height: 1;
   box-sizing: border-box;
 
-  &:focus,
   &:hover {
     opacity: 1;
   }
-}
-
-.heading-actions {
-  opacity: 0;
-  user-select: none;
-  background: ${props.theme.background};
-  margin-left: -26px;
-  flex-direction: row;
-  display: none;
-  position: absolute;
-  left: 0;
-  top: calc(.5em - 6px);
-  width: 26px;
-  height: 24px;
 
   &:dir(rtl) {
     margin-left: 0;
@@ -1151,22 +1146,6 @@ h6:not(.placeholder)::before {
   }
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  &:hover {
-    .heading-anchor {
-      opacity: 0.75 !important;
-    }
-    .heading-anchor:hover {
-      opacity: 1 !important;
-    }
-  }
-}
-
 .ProseMirror > {
   h1,
   h2,
@@ -1174,7 +1153,7 @@ h6 {
   h4,
   h5,
   h6 {
-    .heading-actions {
+    .heading-anchor {
       display: inline-flex;
     }
     &:not(.placeholder)::before {
@@ -2594,7 +2573,7 @@ del {
 @media print {
   .placeholder::before,
   .block-menu-trigger,
-  .heading-actions,
+  .heading-anchor,
   button.show-source-button,
   h1:not(.placeholder)::before,
   h2:not(.placeholder)::before,

shared/editor/nodes/Heading.ts

@@ -136,16 +136,10 @@ export default class Heading extends Node<HeadingOptions> {
 
   keys({ type, schema }: { type: NodeType; schema: Schema }) {
     const options = this.options.levels.reduce(
-      (items: Record<string, Command>, level: number) => ({
-        ...items,
-        ...{
-          [`Shift-Ctrl-${level}`]: toggleBlockType(
-            type,
-            schema.nodes.paragraph,
-            { level }
-          ),
-        },
-      }),
+      (items: Record<string, Command>, level: number) => (({
+	...items,
+	[`Shift-Ctrl-${level}`]: toggleBlockType(type, schema.nodes.paragraph, { level })
+})),
       {}
     );
 
@@ -176,7 +170,7 @@ export default class Heading extends Node<HeadingOptions> {
         }
         return true;
       }) as Command,
-      // Cmd+Left in Firefox lands the DOM caret inside the heading-actions
+      // Cmd+Left in Firefox lands the DOM caret inside the heading-anchor
       // widget (contentEditable=false, ignoreSelection: true), so Prosemirror
       // does not update its model. Subsequent commands like Enter then operate
       // on the stale position. Move the model selection explicitly to keep it
@@ -208,29 +202,23 @@ export default class Heading extends Node<HeadingOptions> {
 
       doc.descendants((node, pos) => {
         if (node.type.name === "heading") {
-          // Create anchor button
+          // Create anchor button to copy a link to the heading
           const anchor = document.createElement("button");
           anchor.innerText = "#";
           anchor.type = "button";
+          anchor.contentEditable = "false";
           anchor.className = "heading-anchor";
           anchor.setAttribute("aria-label", "Copy link to heading");
           anchor.addEventListener("mousedown", (event) =>
             this.handleCopyLink(event)
           );
 
-          // Create container span
-          const container = document.createElement("span");
-          container.contentEditable = "false";
-          container.className = "heading-actions";
-          container.appendChild(anchor);
-
           decorations.push(
-            // Contains the heading actions
             Decoration.widget(
               // Safari requires the widget to be placed at the end of the node rather than the beginning
               // or caret selection is not correct, browser quirk – see issue #1234
               isSafari ? pos + node.nodeSize - 1 : pos + 1,
-              container,
+              anchor,
               {
                 // Safari keeps this widget at the end; positive side preserves IME
                 // insertion order, while relaxed side preserves caret navigation.