UX: rich editor [details] caret hover and padding (#33057)

Improves the styles for the [details] caret pseudo-element on the rich
editor.

Additionally, having `summary` have no `pointer-events` is important so
Firefox doesn't mess with our caret positioning when clicking it.

plugins/discourse-details/assets/javascripts/lib/rich-editor-extension.js

@@ -6,7 +6,6 @@ const extension = {
       attrs: { open: { default: true } },
       content: "summary block+",
       group: "block",
-      draggable: true,
       selectable: true,
       defining: true,
       isolating: true,

plugins/discourse-details/assets/stylesheets/details.scss

@@ -119,3 +119,34 @@ summary::-webkit-details-marker {
     }
   }
 }
+
+.ProseMirror {
+  // No hover effect when editing - the hover is only on the caret
+  details {
+    &:not([open]) {
+      &:hover,
+      &:focus,
+      &:focus-within {
+        background-color: var(--primary-very-low);
+      }
+    }
+  }
+
+  summary {
+    // Important for Firefox so clicking on summary allows proper caret positioning
+    pointer-events: none;
+
+    &:hover {
+      &::before {
+        background: var(--primary-low);
+      }
+    }
+
+    &::before {
+      pointer-events: auto;
+      padding: var(--space-1) var(--space-2);
+      margin-left: calc(-1 * var(--space-2));
+      border-radius: var(--d-border-radius);
+    }
+  }
+}