Replace the generic drag handle with plugin icons

CHANGELOG.rst

@@ -12,6 +12,7 @@ Next version
 - Completely revamped the plugin buttons control. It now doesn't take up any
   place on the side anymore but instead appears when clicking the insertion
   target.
+- Added plugin icons to inlines instead of the generic drag handle.
 
 
 6.5 (2024-05-16)

content_editor/static/content_editor/content_editor.css

@@ -107,12 +107,9 @@ h3[draggable] {
   cursor: move;
 }
 
-.order-machine .inline-related > h3[draggable]::before {
-  content: "drag_indicator";
-  font-family: "Material Icons";
-  font-size: 24px;
+.order-machine h3 .material-icons {
   position: relative;
-  top: -6px;
+  top: -4px;
   left: -2px;
 }
 

content_editor/static/content_editor/content_editor.js

@@ -117,6 +117,19 @@ django.jQuery(($) => {
     `,
   )
 
+  const addPluginIconsToInlines = () => {
+    for (const plugin of ContentEditor.plugins) {
+      const fragment = document.createElement("template")
+      fragment.innerHTML =
+        plugin.button || '<span class="material-icons">extension</span>'
+      const button = fragment.content.firstElementChild
+      for (const title of qsa(`.dynamic-${plugin.prefix} > h3`)) {
+        title.insertAdjacentElement("afterbegin", button.cloneNode(true))
+      }
+    }
+  }
+  addPluginIconsToInlines()
+
   const orderMachineWrapper = $(".order-machine-wrapper")
   const orderMachine = $(".order-machine")
   const machineEmptyMessage = $('<p class="hidden machine-message"/>')