Move block types into an element which opens on hover

CHANGELOG.rst

@@ -13,6 +13,7 @@ Next version
 - Dropped the dependency on ``admin/js/jquery.init.js``. We're using our own
   DOM-ready handler and therefore can still access ``django.jQuery`` to hook up
   the inline events handler if running inside the Django admin.
+- Moved the paragraph formats into a popover.
 
 
 0.3 (2024-04-09)

src/editor.css

@@ -27,11 +27,31 @@
   font-size: 14px;
   background: var(--body-bg);
   display: inline-flex;
+  align-items: center;
   gap: 8px;
   flex-wrap: wrap;
   margin-bottom: 2px;
 }
 
+.prose-menubar__dropdown {
+  display: flex;
+
+  > span {
+    border-radius: 4px;
+  }
+
+  > div {
+    display: none;
+    position: absolute;
+    background: var(--body-bg);
+    z-index: 1;
+  }
+
+  &:hover > div {
+    display: flex;
+  }
+}
+
 .prose-menubar__group {
   display: flex;
 }

src/editor.js

@@ -108,8 +108,8 @@ export function createEditor(textarea, config) {
     gapCursor(),
     history(),
     menuPlugin(
+      blockTypeMenuItems(schema),
       [
-        blockTypeMenuItems(schema),
         listMenuItems(schema),
         linkMenuItems(schema),
         markMenuItems(schema),

src/menu.js

@@ -11,10 +11,10 @@ import {
 } from "./commands.js"
 import { crel } from "./utils.js"
 
-export function menuPlugin(items) {
+export function menuPlugin(blockTypeItems, otherItems) {
   return new Plugin({
     view(editorView) {
-      const menuView = new MenuView(items, editorView)
+      const menuView = new MenuView(editorView, blockTypeItems, otherItems)
       editorView.dom.parentNode.insertBefore(menuView.dom, editorView.dom)
 
       return menuView
@@ -68,6 +68,8 @@ export function blockTypeMenuItems(schema) {
     heading(1),
     heading(2),
     heading(3),
+    heading(4),
+    heading(5),
     {
       command: setBlockType(schema.nodes.paragraph),
       dom: materialButton("notes", "paragraph"),
@@ -187,19 +189,29 @@ export function htmlMenuItem() {
 }
 
 class MenuView {
-  constructor(itemGroups, editorView) {
-    this.items = itemGroups.flatMap((group) => group)
+  constructor(editorView, blockTypeItems, otherItemGroups) {
+    this.items = [blockTypeItems, ...otherItemGroups].flatMap((group) => group)
     this.editorView = editorView
 
     this.dom = crel("div", { className: "prose-menubar" })
 
-    itemGroups
+    if (blockTypeItems.length) {
+      const groupDOM = crel("div", { className: "prose-menubar__dropdown" })
+      const dropdownElements = crel("div")
+      this.dom.append(groupDOM)
+      groupDOM.append(materialButton("notes", "paragraph"))
+      groupDOM.append(dropdownElements)
+      blockTypeItems.forEach(({ dom }) => dropdownElements.append(dom))
+    }
+
+    otherItemGroups
       .filter((group) => group.length)
       .forEach((group) => {
         const groupDOM = crel("div", { className: "prose-menubar__group" })
         this.dom.append(groupDOM)
         group.forEach(({ dom }) => groupDOM.append(dom))
       })
+
     this.update()
 
     this.dom.addEventListener("mousedown", (e) => {