feat: Make toolbar sticky

Author: fsbraun

private/css/cms.toolbar.css

@@ -1,3 +1,8 @@
+/* Position sticky toolbar below the django CMS toolbar when it's visible */
+html.cms-toolbar-expanded {
+    --cms-toolbar-height: 46px;
+}
+
 .cms-editor-inline-wrapper {
     --tiptap-ease: 100ms;
     .ProseMirror-focused [role="menubar"] {
@@ -22,18 +27,17 @@
 
     [role="menubar"] {
         font-family: var(--font-family-primary, Helvetica, Arial, sans-serif);
-        bottom: calc(100% - 1px);
         min-width: 375px;
-        z-index: 1;
+        z-index: 88889; /* Above #cms-top (z-index: 88888) */
         padding: 2px 0.4rem;
-        /* border-radius: 3px; */
         margin: 0 !important;
         font-size: 1rem;
         font-weight: normal;
         visibility: hidden;
         opacity: 0;
         transition: opacity var(--tiptap-ease, 100ms) ease-out, visibility 0s linear var(--tiptap-ease, 100ms);
-        position: absolute;
+        position: sticky;
+        top: var(--cms-toolbar-height, 0px);
         pointer-events: all;
         display: flex;
         flex-flow: row wrap;

private/js/tiptap_plugins/cms.toolbar.js

@@ -46,15 +46,6 @@ let _node_icons = null;
  *
  * @param {Object} editor - The editor instance.
  * @returns {Plugin} - A ProseMirror Plugin instance.
- *
- * @property {Object} props - Plugin properties.
- * @property {Function} props.decorations - Function to get the current state of decorations.
- * @property {Object} props.handleDOMEvents - Object containing DOM event handlers.
- * @property {Function} props.handleDOMEvents.click - Click event handler for the block toolbar.
- *
- * @property {Object} state - Plugin state.
- * @property {Function} state.init - Initializes the plugin state with decorations.
- * @property {Function} state.apply - Applies state changes and updates the block toolbar.
  */
 function _createBlockToolbarPlugin(editor) {
     'use strict';