@manuscripts/body-editor 3.13.15 → 3.13.16

package/dist/cjs/lib/drag-drop-manager.js

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DragDropManager = void 0;
+const doc_1 = require("./doc");
+const prosemirror_state_1 = require("prosemirror-state");
+class DragDropManager {
+    constructor() {
+        this.handleDragStart = () => {
+            DragDropManager.currentNodeId = this.getContext().node.attrs.id;
+            this.element.classList.add('dragging');
+        };
+        this.handleDragEnd = () => {
+            DragDropManager.currentNodeId = null;
+            this.element.classList.remove('dragging');
+            this.clearDropClasses();
+        };
+        this.handleDragOver = (e) => {
+            const draggedId = DragDropManager.currentNodeId;
+            const nodeId = this.getContext().node.attrs.id;
+            if (DragDropManager.currentNodeId === null ||
+                draggedId === null ||
+                draggedId === nodeId) {
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            const movePosition = this.getMovePosition(e);
+            if (movePosition) {
+                const { noActualMove, side, fromPos, targetPos } = movePosition;
+                if (!noActualMove && this.canMoveOutsideParent(fromPos, targetPos)) {
+                    this.element.classList.add(side === 'before' ? 'drop-target-above' : 'drop-target-below');
+                }
+            }
+        };
+        this.handleDragLeave = (e) => {
+            if (!this.element.contains(e.relatedTarget)) {
+                this.clearDropClasses();
+            }
+        };
+        this.handleDrop = (e) => {
+            if (DragDropManager.currentNodeId === null) {
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            const movePosition = this.getMovePosition(e);
+            if (movePosition) {
+                const { noActualMove, fromPos, targetPos, fromNode } = movePosition;
+                if (!noActualMove && this.canMoveOutsideParent(fromPos, targetPos)) {
+                    this.moveNode(fromNode, fromPos, targetPos);
+                }
+            }
+            this.clearDropClasses();
+        };
+    }
+    setup(config) {
+        const { element, restrictToParent = true, getContext, disabled } = config;
+        if (disabled) {
+            return;
+        }
+        this.element = element;
+        this.element.draggable = true;
+        this.restrictToParent = restrictToParent;
+        this.getContext = getContext;
+        const abortController = new AbortController();
+        const signal = abortController.signal;
+        element.addEventListener('dragstart', this.handleDragStart, { signal });
+        element.addEventListener('dragend', this.handleDragEnd, { signal });
+        element.addEventListener('dragover', this.handleDragOver, { signal });
+        element.addEventListener('dragleave', this.handleDragLeave, { signal });
+        element.addEventListener('drop', this.handleDrop, { signal });
+        return () => {
+            DragDropManager.currentNodeId = null;
+            this.clearDropClasses();
+            this.element.classList.remove('dragging');
+            abortController.abort();
+        };
+    }
+    clearDropClasses() {
+        this.element.classList.remove('drop-target-above', 'drop-target-below');
+    }
+    getMovePosition(e) {
+        if (!DragDropManager.currentNodeId) {
+            return;
+        }
+        const { view, node, pos: toPos } = this.getContext();
+        const currentView = (0, doc_1.findNodeByID)(view.state.doc, DragDropManager.currentNodeId);
+        if (!currentView) {
+            return;
+        }
+        const side = this.getDropSide(this.element, e.clientY);
+        const targetPos = side === 'before' ? toPos : toPos + node.nodeSize;
+        const { node: fromNode, pos: fromPos } = currentView;
+        return {
+            noActualMove: targetPos === fromPos || targetPos === fromPos + fromNode.nodeSize,
+            side,
+            fromNode,
+            fromPos,
+            targetPos,
+        };
+    }
+    getDropSide(element, clientY) {
+        const { top, bottom } = element.getBoundingClientRect();
+        const middleY = (top + bottom) / 2;
+        return clientY > middleY ? 'after' : 'before';
+    }
+    moveNode(fromNode, fromPos, targetPos) {
+        const view = this.getContext().view;
+        const { state } = view;
+        const { tr } = state;
+        tr.insert(targetPos, fromNode);
+        const mappedFrom = tr.mapping.map(fromPos, -1);
+        tr.delete(mappedFrom, mappedFrom + fromNode.nodeSize);
+        tr.setSelection(prosemirror_state_1.NodeSelection.near(tr.doc.resolve(tr.mapping.map(targetPos, -1))));
+        view.dispatch(tr);
+    }
+    canMoveOutsideParent(from, to) {
+        if (!this.restrictToParent) {
+            return true;
+        }
+        const { view } = this.getContext();
+        const $fromPos = view.state.doc.resolve(from);
+        const $toPos = view.state.doc.resolve(to);
+        return $fromPos.sameParent($toPos);
+    }
+}
+exports.DragDropManager = DragDropManager;
+DragDropManager.currentNodeId = null;

package/dist/cjs/versions.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MATHJAX_VERSION = exports.VERSION = void 0;
-exports.VERSION = '3.13.15';
+exports.VERSION = '3.13.16';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/cjs/views/headshot_element.js

@@ -21,10 +21,12 @@ const icons_1 = require("../icons");
 const navigation_utils_1 = require("../lib/navigation-utils");
 const base_node_view_1 = require("./base_node_view");
 const creators_1 = require("./creators");
+const drag_drop_manager_1 = require("../lib/drag-drop-manager");
 class HeadshotElement extends base_node_view_1.BaseNodeView {
     constructor() {
         super(...arguments);
         this.elementType = 'div';
+        this.ignoreMutation = () => true;
         this.createElement = () => {
             this.dom = document.createElement('div');
             this.dom.classList.add('headshot-element');
@@ -46,6 +48,12 @@ class HeadshotElement extends base_node_view_1.BaseNodeView {
                 this.deleteHeadshotButton.addEventListener('click', this.handleDeleteHeadshot);
                 this.deleteHeadshotButton.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)(this.handleDeleteHeadshot));
                 this.container.appendChild(this.deleteHeadshotButton);
+                const dragIcon = document.createElement('div');
+                dragIcon.className = 'headshot-drag-icon';
+                dragIcon.contentEditable = 'false';
+                dragIcon.innerHTML = icons_1.draggableIcon;
+                dragIcon.draggable = false;
+                this.container.appendChild(dragIcon);
             }
         };
         this.handleDeleteHeadshot = () => {
@@ -64,9 +72,23 @@ class HeadshotElement extends base_node_view_1.BaseNodeView {
     initialise() {
         this.createElement();
         this.updateContents();
+        this.setupDragAndDrop();
+    }
+    setupDragAndDrop() {
+        const can = this.props.getCapabilities();
+        this.cleanupDragDrop = new drag_drop_manager_1.DragDropManager().setup({
+            element: this.dom,
+            getContext: () => ({
+                view: this.view,
+                node: this.node,
+                pos: this.getPos(),
+            }),
+            disabled: !can.editArticle,
+        });
     }
     destroy() {
         this.deleteHeadshotButton?.removeEventListener('click', this.handleDeleteHeadshot);
+        this.cleanupDragDrop?.();
         super.destroy();
     }
 }

package/dist/cjs/views/headshot_grid.js

@@ -29,6 +29,7 @@ class HeadshotGridView extends block_view_1.default {
     constructor() {
         super(...arguments);
         this.elementType = 'div';
+        this.ignoreMutation = () => true;
         this.createElement = () => {
             this.container = document.createElement('div');
             this.container.classList.add('block', 'headshot-grid-container');

package/dist/es/lib/drag-drop-manager.js

@@ -0,0 +1,124 @@
+import { findNodeByID } from './doc';
+import { NodeSelection } from 'prosemirror-state';
+export class DragDropManager {
+    constructor() {
+        this.handleDragStart = () => {
+            DragDropManager.currentNodeId = this.getContext().node.attrs.id;
+            this.element.classList.add('dragging');
+        };
+        this.handleDragEnd = () => {
+            DragDropManager.currentNodeId = null;
+            this.element.classList.remove('dragging');
+            this.clearDropClasses();
+        };
+        this.handleDragOver = (e) => {
+            const draggedId = DragDropManager.currentNodeId;
+            const nodeId = this.getContext().node.attrs.id;
+            if (DragDropManager.currentNodeId === null ||
+                draggedId === null ||
+                draggedId === nodeId) {
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            const movePosition = this.getMovePosition(e);
+            if (movePosition) {
+                const { noActualMove, side, fromPos, targetPos } = movePosition;
+                if (!noActualMove && this.canMoveOutsideParent(fromPos, targetPos)) {
+                    this.element.classList.add(side === 'before' ? 'drop-target-above' : 'drop-target-below');
+                }
+            }
+        };
+        this.handleDragLeave = (e) => {
+            if (!this.element.contains(e.relatedTarget)) {
+                this.clearDropClasses();
+            }
+        };
+        this.handleDrop = (e) => {
+            if (DragDropManager.currentNodeId === null) {
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            const movePosition = this.getMovePosition(e);
+            if (movePosition) {
+                const { noActualMove, fromPos, targetPos, fromNode } = movePosition;
+                if (!noActualMove && this.canMoveOutsideParent(fromPos, targetPos)) {
+                    this.moveNode(fromNode, fromPos, targetPos);
+                }
+            }
+            this.clearDropClasses();
+        };
+    }
+    setup(config) {
+        const { element, restrictToParent = true, getContext, disabled } = config;
+        if (disabled) {
+            return;
+        }
+        this.element = element;
+        this.element.draggable = true;
+        this.restrictToParent = restrictToParent;
+        this.getContext = getContext;
+        const abortController = new AbortController();
+        const signal = abortController.signal;
+        element.addEventListener('dragstart', this.handleDragStart, { signal });
+        element.addEventListener('dragend', this.handleDragEnd, { signal });
+        element.addEventListener('dragover', this.handleDragOver, { signal });
+        element.addEventListener('dragleave', this.handleDragLeave, { signal });
+        element.addEventListener('drop', this.handleDrop, { signal });
+        return () => {
+            DragDropManager.currentNodeId = null;
+            this.clearDropClasses();
+            this.element.classList.remove('dragging');
+            abortController.abort();
+        };
+    }
+    clearDropClasses() {
+        this.element.classList.remove('drop-target-above', 'drop-target-below');
+    }
+    getMovePosition(e) {
+        if (!DragDropManager.currentNodeId) {
+            return;
+        }
+        const { view, node, pos: toPos } = this.getContext();
+        const currentView = findNodeByID(view.state.doc, DragDropManager.currentNodeId);
+        if (!currentView) {
+            return;
+        }
+        const side = this.getDropSide(this.element, e.clientY);
+        const targetPos = side === 'before' ? toPos : toPos + node.nodeSize;
+        const { node: fromNode, pos: fromPos } = currentView;
+        return {
+            noActualMove: targetPos === fromPos || targetPos === fromPos + fromNode.nodeSize,
+            side,
+            fromNode,
+            fromPos,
+            targetPos,
+        };
+    }
+    getDropSide(element, clientY) {
+        const { top, bottom } = element.getBoundingClientRect();
+        const middleY = (top + bottom) / 2;
+        return clientY > middleY ? 'after' : 'before';
+    }
+    moveNode(fromNode, fromPos, targetPos) {
+        const view = this.getContext().view;
+        const { state } = view;
+        const { tr } = state;
+        tr.insert(targetPos, fromNode);
+        const mappedFrom = tr.mapping.map(fromPos, -1);
+        tr.delete(mappedFrom, mappedFrom + fromNode.nodeSize);
+        tr.setSelection(NodeSelection.near(tr.doc.resolve(tr.mapping.map(targetPos, -1))));
+        view.dispatch(tr);
+    }
+    canMoveOutsideParent(from, to) {
+        if (!this.restrictToParent) {
+            return true;
+        }
+        const { view } = this.getContext();
+        const $fromPos = view.state.doc.resolve(from);
+        const $toPos = view.state.doc.resolve(to);
+        return $fromPos.sameParent($toPos);
+    }
+}
+DragDropManager.currentNodeId = null;

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.13.15';
+export const VERSION = '3.13.16';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/headshot_element.js

@@ -14,14 +14,16 @@
  * limitations under the License.
  */
 import { TextSelection } from 'prosemirror-state';
-import { plusIcon } from '../icons';
+import { draggableIcon, plusIcon } from '../icons';
 import { handleEnterKey } from '../lib/navigation-utils';
 import { BaseNodeView } from './base_node_view';
 import { createNodeView } from './creators';
+import { DragDropManager } from '../lib/drag-drop-manager';
 export class HeadshotElement extends BaseNodeView {
     constructor() {
         super(...arguments);
         this.elementType = 'div';
+        this.ignoreMutation = () => true;
         this.createElement = () => {
             this.dom = document.createElement('div');
             this.dom.classList.add('headshot-element');
@@ -43,6 +45,12 @@ export class HeadshotElement extends BaseNodeView {
                 this.deleteHeadshotButton.addEventListener('click', this.handleDeleteHeadshot);
                 this.deleteHeadshotButton.addEventListener('keydown', handleEnterKey(this.handleDeleteHeadshot));
                 this.container.appendChild(this.deleteHeadshotButton);
+                const dragIcon = document.createElement('div');
+                dragIcon.className = 'headshot-drag-icon';
+                dragIcon.contentEditable = 'false';
+                dragIcon.innerHTML = draggableIcon;
+                dragIcon.draggable = false;
+                this.container.appendChild(dragIcon);
             }
         };
         this.handleDeleteHeadshot = () => {
@@ -61,9 +69,23 @@ export class HeadshotElement extends BaseNodeView {
     initialise() {
         this.createElement();
         this.updateContents();
+        this.setupDragAndDrop();
+    }
+    setupDragAndDrop() {
+        const can = this.props.getCapabilities();
+        this.cleanupDragDrop = new DragDropManager().setup({
+            element: this.dom,
+            getContext: () => ({
+                view: this.view,
+                node: this.node,
+                pos: this.getPos(),
+            }),
+            disabled: !can.editArticle,
+        });
     }
     destroy() {
         this.deleteHeadshotButton?.removeEventListener('click', this.handleDeleteHeadshot);
+        this.cleanupDragDrop?.();
         super.destroy();
     }
 }

package/dist/es/views/headshot_grid.js

@@ -23,6 +23,7 @@ export class HeadshotGridView extends BlockView {
     constructor() {
         super(...arguments);
         this.elementType = 'div';
+        this.ignoreMutation = () => true;
         this.createElement = () => {
             this.container = document.createElement('div');
             this.container.classList.add('block', 'headshot-grid-container');

package/dist/types/lib/drag-drop-manager.d.ts

@@ -0,0 +1,31 @@
+import { ManuscriptNode } from '@manuscripts/transform';
+import { EditorView } from 'prosemirror-view';
+interface DragDropContext {
+    view: EditorView;
+    node: ManuscriptNode;
+    pos: number;
+}
+interface DragDropConfig {
+    element: HTMLElement;
+    getContext: () => DragDropContext;
+    restrictToParent?: boolean;
+    disabled?: boolean;
+}
+export declare class DragDropManager {
+    private static currentNodeId;
+    private element;
+    private restrictToParent;
+    private getContext;
+    setup(config: DragDropConfig): (() => void) | undefined;
+    private handleDragStart;
+    private handleDragEnd;
+    private handleDragOver;
+    private handleDragLeave;
+    private handleDrop;
+    private clearDropClasses;
+    private getMovePosition;
+    private getDropSide;
+    private moveNode;
+    private canMoveOutsideParent;
+}
+export {};

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.13.15";
+export declare const VERSION = "3.13.16";
 export declare const MATHJAX_VERSION = "3.2.2";

package/dist/types/views/headshot_element.d.ts

@@ -20,9 +20,12 @@ export declare class HeadshotElement extends BaseNodeView<Trackable<HeadshotElem
     elementType: string;
     private container;
     private deleteHeadshotButton;
+    private cleanupDragDrop;
+    ignoreMutation: () => boolean;
     initialise(): void;
     createElement: () => void;
     private handleDeleteHeadshot;
+    private setupDragAndDrop;
     destroy(): void;
 }
 declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch) => import("../types").NodeViewCreator<HeadshotElement>;

package/dist/types/views/headshot_grid.d.ts

@@ -20,6 +20,7 @@ export declare class HeadshotGridView extends BlockView<HeadshotGridNode> {
     private container;
     private addHeadshotButton;
     private removeKeydownListener?;
+    ignoreMutation: () => boolean;
     createElement: () => void;
     private handleAddHeadshot;
     destroy(): void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "3.13.15",
+  "version": "3.13.16",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",

package/src/lib/drag-drop-manager.ts

@@ -0,0 +1,198 @@
+/*!
+ * © 2026 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { ManuscriptNode } from '@manuscripts/transform'
+import { EditorView } from 'prosemirror-view'
+
+import { findNodeByID } from './doc'
+import { NodeSelection } from 'prosemirror-state'
+
+interface DragDropContext {
+  view: EditorView
+  node: ManuscriptNode
+  pos: number
+}
+
+interface DragDropConfig {
+  element: HTMLElement
+  getContext: () => DragDropContext
+  restrictToParent?: boolean
+  disabled?: boolean
+}
+
+export class DragDropManager {
+  private static currentNodeId: string | null = null
+
+  private element: HTMLElement
+  private restrictToParent: boolean
+  private getContext: () => DragDropContext
+
+  setup(config: DragDropConfig) {
+    const { element, restrictToParent = true, getContext, disabled } = config
+    if (disabled) {
+      return
+    }
+
+    this.element = element
+    this.element.draggable = true
+    this.restrictToParent = restrictToParent
+    this.getContext = getContext
+
+    const abortController = new AbortController()
+    const signal = abortController.signal
+
+    element.addEventListener('dragstart', this.handleDragStart, { signal })
+    element.addEventListener('dragend', this.handleDragEnd, { signal })
+    element.addEventListener('dragover', this.handleDragOver, { signal })
+    element.addEventListener('dragleave', this.handleDragLeave, { signal })
+    element.addEventListener('drop', this.handleDrop, { signal })
+
+    return () => {
+      DragDropManager.currentNodeId = null
+      this.clearDropClasses()
+      this.element.classList.remove('dragging')
+      abortController.abort()
+    }
+  }
+
+  private handleDragStart = () => {
+    DragDropManager.currentNodeId = this.getContext().node.attrs.id
+    this.element.classList.add('dragging')
+  }
+
+  private handleDragEnd = () => {
+    DragDropManager.currentNodeId = null
+    this.element.classList.remove('dragging')
+    this.clearDropClasses()
+  }
+
+  private handleDragOver = (e: DragEvent) => {
+    const draggedId = DragDropManager.currentNodeId
+    const nodeId = this.getContext().node.attrs.id
+    if (
+      DragDropManager.currentNodeId === null ||
+      draggedId === null ||
+      draggedId === nodeId
+    ) {
+      return
+    }
+
+    e.preventDefault()
+    e.stopPropagation()
+
+    const movePosition = this.getMovePosition(e)
+    if (movePosition) {
+      const { noActualMove, side, fromPos, targetPos } = movePosition
+      if (!noActualMove && this.canMoveOutsideParent(fromPos, targetPos)) {
+        this.element.classList.add(
+          side === 'before' ? 'drop-target-above' : 'drop-target-below'
+        )
+      }
+    }
+  }
+
+  private handleDragLeave = (e: DragEvent) => {
+    if (!this.element.contains(e.relatedTarget as Node)) {
+      this.clearDropClasses()
+    }
+  }
+
+  private handleDrop = (e: DragEvent) => {
+    if (DragDropManager.currentNodeId === null) {
+      return
+    }
+
+    e.preventDefault()
+    e.stopPropagation()
+
+    const movePosition = this.getMovePosition(e)
+    if (movePosition) {
+      const { noActualMove, fromPos, targetPos, fromNode } = movePosition
+      if (!noActualMove && this.canMoveOutsideParent(fromPos, targetPos)) {
+        this.moveNode(fromNode, fromPos, targetPos)
+      }
+    }
+    this.clearDropClasses()
+  }
+
+  private clearDropClasses() {
+    this.element.classList.remove('drop-target-above', 'drop-target-below')
+  }
+
+  private getMovePosition(e: DragEvent) {
+    if (!DragDropManager.currentNodeId) {
+      return
+    }
+
+    const { view, node, pos: toPos } = this.getContext()
+    const currentView = findNodeByID(
+      view.state.doc,
+      DragDropManager.currentNodeId
+    )
+    if (!currentView) {
+      return
+    }
+
+    const side = this.getDropSide(this.element, e.clientY)
+    const targetPos = side === 'before' ? toPos : toPos + node.nodeSize
+
+    const { node: fromNode, pos: fromPos } = currentView
+    return {
+      // No-move if dropping at the node’s start or end position
+      noActualMove:
+        targetPos === fromPos || targetPos === fromPos + fromNode.nodeSize,
+      side,
+      fromNode,
+      fromPos,
+      targetPos,
+    }
+  }
+
+  private getDropSide(
+    element: HTMLElement,
+    clientY: number
+  ): 'before' | 'after' {
+    const { top, bottom } = element.getBoundingClientRect()
+    const middleY = (top + bottom) / 2
+    return clientY > middleY ? 'after' : 'before'
+  }
+
+  private moveNode(
+    fromNode: ManuscriptNode,
+    fromPos: number,
+    targetPos: number
+  ) {
+    const view = this.getContext().view
+    const { state } = view
+    const { tr } = state
+    tr.insert(targetPos, fromNode)
+    const mappedFrom = tr.mapping.map(fromPos, -1)
+    tr.delete(mappedFrom, mappedFrom + fromNode.nodeSize)
+    tr.setSelection(
+      NodeSelection.near(tr.doc.resolve(tr.mapping.map(targetPos, -1)))
+    )
+    view.dispatch(tr)
+  }
+
+  private canMoveOutsideParent(from: number, to: number) {
+    if (!this.restrictToParent) {
+      return true
+    }
+    const { view } = this.getContext()
+    const $fromPos = view.state.doc.resolve(from)
+    const $toPos = view.state.doc.resolve(to)
+    return $fromPos.sameParent($toPos)
+  }
+}

package/src/versions.ts

@@ -1,3 +1,3 @@
 //THIS FILE WAS GENERATED BY versions.mjs
-export const VERSION = '3.13.15';
+export const VERSION = '3.13.16';
 export const MATHJAX_VERSION = '3.2.2';

package/src/views/headshot_element.ts

@@ -17,11 +17,12 @@
 import { HeadshotElementNode } from '@manuscripts/transform'
 import { TextSelection } from 'prosemirror-state'
 
-import { plusIcon } from '../icons'
+import { draggableIcon, plusIcon } from '../icons'
 import { handleEnterKey } from '../lib/navigation-utils'
 import { Trackable } from '../types'
 import { BaseNodeView } from './base_node_view'
 import { createNodeView } from './creators'
+import { DragDropManager } from '../lib/drag-drop-manager'
 
 export class HeadshotElement extends BaseNodeView<
   Trackable<HeadshotElementNode>
@@ -29,10 +30,14 @@ export class HeadshotElement extends BaseNodeView<
   public elementType = 'div'
   private container: HTMLElement
   private deleteHeadshotButton: HTMLElement
+  private cleanupDragDrop: (() => void) | undefined
+
+  public ignoreMutation = () => true
 
   public initialise() {
     this.createElement()
     this.updateContents()
+    this.setupDragAndDrop()
   }
 
   public createElement = () => {
@@ -66,6 +71,13 @@ export class HeadshotElement extends BaseNodeView<
         handleEnterKey(this.handleDeleteHeadshot)
       )
       this.container.appendChild(this.deleteHeadshotButton)
+
+      const dragIcon = document.createElement('div')
+      dragIcon.className = 'headshot-drag-icon'
+      dragIcon.contentEditable = 'false'
+      dragIcon.innerHTML = draggableIcon
+      dragIcon.draggable = false
+      this.container.appendChild(dragIcon)
     }
   }
 
@@ -86,11 +98,25 @@ export class HeadshotElement extends BaseNodeView<
     dispatch(tr)
   }
 
+  private setupDragAndDrop() {
+    const can = this.props.getCapabilities()
+    this.cleanupDragDrop = new DragDropManager().setup({
+      element: this.dom,
+      getContext: () => ({
+        view: this.view,
+        node: this.node,
+        pos: this.getPos(),
+      }),
+      disabled: !can.editArticle,
+    })
+  }
+
   public destroy() {
     this.deleteHeadshotButton?.removeEventListener(
       'click',
       this.handleDeleteHeadshot
     )
+    this.cleanupDragDrop?.()
     super.destroy()
   }
 }

package/src/views/headshot_grid.ts

@@ -35,6 +35,8 @@ export class HeadshotGridView extends BlockView<HeadshotGridNode> {
   private addHeadshotButton: HTMLElement
   private removeKeydownListener?: () => void
 
+  public ignoreMutation = () => true
+
   public createElement = () => {
     this.container = document.createElement('div')
     this.container.classList.add('block', 'headshot-grid-container')

package/styles/AdvancedEditor.css

@@ -824,7 +824,7 @@ span.comment-marker {
 .selected-suggestion:not(.block-container):not(.graphical-abstract):not(
     .keywords
   ):not(figure):not(figure .equation):not(.inconsistency-highlight):not(
-    .supplement-item:is([data-track-op='move'])
+    .supplement-item:is([data-track-op='move']), .headshot-element:is([data-track-op='move'])
   ),
 .footnote-marker-selected {
   border-width: 2px 0 2px 0 !important;
@@ -1780,7 +1780,7 @@ th:hover > .table-context-menu-button,
 
 .ProseMirror .headshot-grid-container .headshot-grid-block .headshot-element {
   border-radius: 4px;
-  border: 1px solid #E2E2E2 !important;
+  border: 1px solid #E2E2E2;
   background: #FFF;
   position: relative;
 }
@@ -1900,6 +1900,24 @@ th:hover > .table-context-menu-button,
   z-index: 10;
 }
 
+.ProseMirror .headshot-drag-icon {
+  position: absolute;
+  top: 41%;
+  left: -6px;
+  border-radius: 8px;
+  border: 1px solid #E2E2E2;
+  background: #FFF;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 10px;
+  height: 22px;
+  padding: 3px 0;
+  cursor: grab;
+  visibility: hidden;
+}
+
 .ProseMirror .headshot-figure .headshot-remove-button {
   margin: 0;
   top: -6%;
@@ -1917,6 +1935,7 @@ th:hover > .table-context-menu-button,
   height: 8px;
 }
 
+.ProseMirror .headshot-grid-block .headshot-element:not(:only-child):hover .headshot-drag-icon,
 .ProseMirror .headshot-element:hover .block > .headshot-remove-button,
 .ProseMirror .headshot-figure:hover .headshot-remove-button,
 .ProseMirror .headshot-element:focus-within .headshot-remove-button {
@@ -2044,8 +2063,8 @@ th:hover > .table-context-menu-button,
   position: relative;
 }
 
-/* Right padding so abstract titles do not run under translation widgets. 
- * If we later block editing these titles, this padding can go away. 
+/* Right padding so abstract titles do not run under translation widgets.
+ * If we later block editing these titles, this padding can go away.
  */
 .ProseMirror .abstracts .block-section .block-section_title h1,
 .ProseMirror .abstracts .block-trans_abstract .block-section_title h1{

package/styles/Editor.css

@@ -1309,11 +1309,24 @@
   font-style: normal;
 }
 
+.ProseMirror .headshot-element.drop-target-above {
+  border-top: 3px solid  #20aedf !important;
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+}
+
+.ProseMirror .headshot-element.drop-target-below {
+  border-bottom: 3px solid #20aedf !important;
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
 .ProseMirror .supplement-item.drop-target-above,
 .ProseMirror .supplement-item.drop-target-below {
   border: 2px dotted #20aedf !important;
 }
 
+.ProseMirror .headshot-element.dragging,
 .ProseMirror .supplement-item.dragging {
   background-color: #f2f2f2 !important;
   opacity: 0.3;