@manuscripts/body-editor 3.6.9 → 3.6.11

package/dist/cjs/commands.js

@@ -297,18 +297,21 @@ const insertTable = (config, state, dispatch) => {
     return true;
 };
 exports.insertTable = insertTable;
-const insertSupplement = (file, state, dispatch) => {
+const insertSupplement = (file, view) => {
     const supplement = transform_1.schema.nodes.supplement.createAndFill({
         id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.supplement),
         href: file.id,
-    });
-    const tr = state.tr;
-    const supplements = (0, doc_1.insertSupplementsNode)(tr);
-    const pos = supplements.pos + supplements.node.nodeSize - 1;
-    tr.insert(pos, supplement);
-    if (dispatch) {
-        dispatch((0, track_changes_plugin_1.skipTracking)(tr));
-    }
+    }, [
+        transform_1.schema.nodes.figcaption.create({}, [
+            transform_1.schema.nodes.caption_title.create(),
+            transform_1.schema.nodes.caption.create(),
+        ]),
+    ]);
+    const tr = view.state.tr;
+    const { pos } = (0, doc_1.upsertSupplementsSection)(tr, supplement);
+    tr.setSelection(prosemirror_state_1.NodeSelection.create(tr.doc, pos));
+    view.focus();
+    view.dispatch(tr.scrollIntoView());
     return true;
 };
 exports.insertSupplement = insertSupplement;

package/dist/cjs/components/outline/DraggableTree.js

@@ -63,6 +63,7 @@ const excludedTypes = [
     transform_1.schema.nodes.trans_abstract,
     transform_1.schema.nodes.subtitles,
     transform_1.schema.nodes.subtitle,
+    transform_1.schema.nodes.supplements,
 ];
 const childrenExcludedTypes = [
     transform_1.schema.nodes.pullquote_element,

package/dist/cjs/configs/editor-views.js

@@ -47,6 +47,8 @@ const section_label_1 = __importDefault(require("../views/section_label"));
 const section_title_editable_1 = __importDefault(require("../views/section_title_editable"));
 const subtitle_editable_1 = __importDefault(require("../views/subtitle_editable"));
 const subtitles_editable_1 = __importDefault(require("../views/subtitles_editable"));
+const supplement_editable_1 = __importDefault(require("../views/supplement_editable"));
+const supplements_editable_1 = __importDefault(require("../views/supplements_editable"));
 const table_cell_1 = __importDefault(require("../views/table_cell"));
 const table_element_editable_1 = __importDefault(require("../views/table_element_editable"));
 const table_element_footer_1 = __importDefault(require("../views/table_element_footer"));
@@ -96,7 +98,8 @@ exports.default = (props, dispatch) => {
         table_header: (0, table_cell_1.default)(props),
         table_element_footer: (0, table_element_footer_1.default)(props),
         comments: (0, empty_1.default)('comments'),
-        supplements: (0, empty_1.default)('supplements'),
+        supplements: (0, supplements_editable_1.default)(props, dispatch),
+        supplement: (0, supplement_editable_1.default)(props, dispatch),
         author_notes: (0, author_notes_1.default)(props, dispatch),
         awards: (0, awards_1.default)(props, dispatch),
         award: (0, award_1.default)(props, dispatch),

package/dist/cjs/lib/doc.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.findNodeByID = exports.findGraphicalAbstractFigureElement = exports.findFootnotesSection = exports.findBibliographySection = exports.findBackmatter = exports.findBody = exports.findAbstractsNode = exports.insertFootnotesSection = exports.insertAttachmentsNode = exports.insertSupplementsNode = exports.insertAwardsNode = void 0;
+exports.findNodeByID = exports.findGraphicalAbstractFigureElement = exports.findFootnotesSection = exports.findBibliographySection = exports.findBackmatter = exports.findBody = exports.findAbstractsNode = exports.insertFootnotesSection = exports.insertAttachmentsNode = exports.upsertSupplementsSection = exports.insertAwardsNode = void 0;
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_utils_1 = require("prosemirror-utils");
 const utils_1 = require("./utils");
@@ -19,21 +19,23 @@ const insertAwardsNode = (tr) => {
     };
 };
 exports.insertAwardsNode = insertAwardsNode;
-const insertSupplementsNode = (tr) => {
+const upsertSupplementsSection = (tr, supplement) => {
     const doc = tr.doc;
     const supplements = (0, prosemirror_utils_1.findChildrenByType)(doc, transform_1.schema.nodes.supplements)[0];
     if (supplements) {
-        return supplements;
+        const pos = supplements.pos + supplements.node.nodeSize - 1;
+        tr.insert(pos, supplement);
+        return { node: supplements.node, pos };
     }
     const pos = (0, utils_1.findInsertionPosition)(transform_1.schema.nodes.supplements, doc);
-    const node = transform_1.schema.nodes.supplements.createAndFill();
+    const node = transform_1.schema.nodes.supplements.createAndFill({ id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.supplements) }, [supplement]);
     tr.insert(pos, node);
     return {
         node,
         pos,
     };
 };
-exports.insertSupplementsNode = insertSupplementsNode;
+exports.upsertSupplementsSection = upsertSupplementsSection;
 const insertAttachmentsNode = (tr) => {
     const attachmentsNodes = (0, prosemirror_utils_1.findChildrenByType)(tr.doc, transform_1.schema.nodes.attachments);
     if (attachmentsNodes.length) {

package/dist/cjs/lib/utils.js

@@ -181,6 +181,10 @@ const findInsertionPosition = (type, doc) => {
             insertPos = offset;
         }
     });
+    if (insertPos === 0 &&
+        doc.canReplaceWith(doc.childCount, doc.childCount, type)) {
+        insertPos = doc.content.size;
+    }
     return insertPos;
 };
 exports.findInsertionPosition = findInsertionPosition;

package/dist/cjs/plugins/placeholder.js

@@ -84,6 +84,9 @@ exports.default = () => new prosemirror_state_1.Plugin({
                         if ((0, prosemirror_utils_1.findParentNodeOfTypeClosestToPos)($pos, transform_1.schema.nodes.box_element)) {
                             placeholderText = 'Optional box title...';
                         }
+                        if ((0, prosemirror_utils_1.findParentNodeOfTypeClosestToPos)($pos, transform_1.schema.nodes.supplements)) {
+                            placeholderText = 'Supplements';
+                        }
                         decorations.push(prosemirror_view_1.Decoration.widget(pos + 1, placeholderWidget(placeholderText)));
                     }
                     else if (node.type === node.type.schema.nodes.trans_abstract) {

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.6.9';
+exports.VERSION = '3.6.11';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/cjs/views/editable_block.js

@@ -42,6 +42,7 @@ const EditableBlock = (Base) => {
             const nodeType = this.node.type;
             if (nodeType === transform_1.schema.nodes.hero_image ||
                 nodeType === transform_1.schema.nodes.subtitles ||
+                nodeType === transform_1.schema.nodes.supplements ||
                 (0, utils_1.hasParent)($pos, [
                     transform_1.schema.nodes.keywords,
                     transform_1.schema.nodes.bibliography_section,

package/dist/cjs/views/section_title.js

@@ -32,6 +32,7 @@ class SectionTitleView extends block_view_1.default {
             transform_1.schema.nodes.bibliography_section,
             transform_1.schema.nodes.footnotes_section,
             transform_1.schema.nodes.graphical_abstract_section,
+            transform_1.schema.nodes.supplements,
         ];
         this.createElement = () => {
             this.contentDOM = document.createElement(this.elementType);

package/dist/cjs/views/supplement.js

@@ -0,0 +1,175 @@
+"use strict";
+/*!
+ * © 2025 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SupplementView = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const server_1 = require("react-dom/server");
+const icons_1 = require("../icons");
+const doc_1 = require("../lib/doc");
+const base_node_view_1 = require("./base_node_view");
+const creators_1 = require("./creators");
+class SupplementView extends base_node_view_1.BaseNodeView {
+    constructor() {
+        super(...arguments);
+        this.ignoreMutation = () => true;
+        this.createElement = () => {
+            this.dom = document.createElement('div');
+            this.dom.classList.add('supplement-item');
+            this.dom.classList.add('block');
+            this.dom.setAttribute('id', this.node.attrs.id);
+            this.dom.setAttribute('href', this.node.attrs.href);
+            this.dom.draggable = true;
+            this.contentDOM = document.createElement('div');
+            this.contentDOM.classList.add('supplement-caption');
+            this.dom.appendChild(this.contentDOM);
+            this.addFileInfo();
+            this.addDragIcon();
+        };
+    }
+    initialise() {
+        this.createElement();
+        this.updateContents();
+        this.setupDragAndDrop();
+    }
+    updateContents() {
+        super.updateContents();
+        this.refreshFileInfo();
+    }
+    getDropSide(element, clientY) {
+        const { top, bottom } = element.getBoundingClientRect();
+        const middleY = (top + bottom) / 2;
+        return clientY > middleY ? 'after' : 'before';
+    }
+    noActualMove(currentPos, nodeSize, targetPos) {
+        return targetPos === currentPos || targetPos === currentPos + nodeSize;
+    }
+    handleDragStart() {
+        const supplementId = this.node.attrs.id;
+        SupplementView.currentDragSupplementId = supplementId;
+        this.dom.classList.add('dragging');
+    }
+    setupDragAndDrop() {
+        const clearDropClasses = () => {
+            this.dom.classList.remove('drop-target-above', 'drop-target-below');
+        };
+        this.dom.addEventListener('dragstart', () => {
+            if (this.node.attrs.id) {
+                this.handleDragStart();
+            }
+        });
+        this.dom.addEventListener('dragend', () => {
+            SupplementView.currentDragSupplementId = null;
+            this.dom.classList.remove('dragging');
+            clearDropClasses();
+        });
+        this.dom.addEventListener('dragover', (e) => {
+            if (SupplementView.currentDragSupplementId) {
+                e.preventDefault();
+                e.stopPropagation();
+                const side = this.getDropSide(this.dom, e.clientY);
+                clearDropClasses();
+                this.dom.classList.add(side === 'before' ? 'drop-target-above' : 'drop-target-below');
+            }
+        });
+        this.dom.addEventListener('dragleave', (e) => {
+            if (!this.dom.contains(e.relatedTarget)) {
+                clearDropClasses();
+            }
+        });
+        this.dom.addEventListener('drop', (e) => {
+            if (!SupplementView.currentDragSupplementId) {
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            const supplementId = SupplementView.currentDragSupplementId;
+            if (!supplementId) {
+                return;
+            }
+            const { state } = this.view;
+            const supplement = (0, doc_1.findNodeByID)(state.doc, supplementId);
+            if (!supplement) {
+                return;
+            }
+            const toPos = this.getPos();
+            const side = this.getDropSide(this.dom, e.clientY);
+            const targetPos = side === 'before' ? toPos : toPos + this.node.nodeSize;
+            if (this.noActualMove(supplement.pos, supplement.node.nodeSize, targetPos)) {
+                clearDropClasses();
+                return;
+            }
+            this.moveSupplement(supplement.pos, supplement.node, targetPos);
+            clearDropClasses();
+        });
+    }
+    moveSupplement(fromPos, fromNode, targetPos) {
+        const { state } = this.view;
+        const { tr } = state;
+        tr.insert(targetPos, fromNode);
+        const mappedFrom = tr.mapping.map(fromPos, -1);
+        tr.delete(mappedFrom, mappedFrom + fromNode.nodeSize);
+        this.view.dispatch(tr);
+    }
+    addFileInfo() {
+        this.supplementInfoEl = document.createElement('div');
+        this.supplementInfoEl.classList.add('supplement-file-info');
+        this.supplementInfoEl.contentEditable = 'false';
+        const files = this.props.getFiles();
+        const file = files.find((f) => f.id === this.node.attrs.href);
+        if (file) {
+            const iconElement = document.createElement('span');
+            iconElement.classList.add('supplement-file-icon');
+            const icon = (0, style_guide_1.getFileIcon)(file.name);
+            if (icon) {
+                iconElement.innerHTML = (0, server_1.renderToStaticMarkup)(icon);
+            }
+            this.supplementInfoEl.appendChild(iconElement);
+            const fileName = document.createElement('span');
+            fileName.classList.add('supplement-file-name');
+            fileName.textContent = file.name;
+            this.supplementInfoEl.appendChild(fileName);
+        }
+        else {
+            const placeholder = document.createElement('span');
+            placeholder.textContent = 'File not found';
+            this.supplementInfoEl.appendChild(placeholder);
+        }
+        this.dom.appendChild(this.supplementInfoEl);
+    }
+    refreshFileInfo() {
+        this.supplementInfoEl.remove();
+        this.addFileInfo();
+    }
+    addDragIcon() {
+        if (this.dragIcon) {
+            this.dragIcon.remove();
+            this.dragIcon = undefined;
+        }
+        const dragIcon = document.createElement('div');
+        dragIcon.className = 'drag-icon';
+        dragIcon.innerHTML = icons_1.draggableIcon;
+        dragIcon.draggable = false;
+        dragIcon.addEventListener('mousedown', (e) => {
+            e.stopPropagation();
+        });
+        this.dragIcon = dragIcon;
+        this.dom.appendChild(dragIcon);
+    }
+}
+exports.SupplementView = SupplementView;
+SupplementView.currentDragSupplementId = null;
+exports.default = (0, creators_1.createNodeView)(SupplementView);

package/dist/cjs/views/supplement_editable.js

@@ -0,0 +1,20 @@
+"use strict";
+/*!
+ * © 2025 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const creators_1 = require("./creators");
+const supplement_1 = require("./supplement");
+exports.default = (0, creators_1.createEditableNodeView)(supplement_1.SupplementView);

package/dist/cjs/views/supplements.js

@@ -0,0 +1,56 @@
+"use strict";
+/*!
+ * © 2025 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.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SupplementsView = void 0;
+const icons_1 = require("../icons");
+const block_view_1 = __importDefault(require("./block_view"));
+const creators_1 = require("./creators");
+class SupplementsView extends block_view_1.default {
+    constructor() {
+        super(...arguments);
+        this.collapsed = false;
+        this.ignoreMutation = () => true;
+        this.createElement = () => {
+            this.toggleButton = document.createElement('button');
+            this.toggleButton.classList.add('supplements-toggle-btn', 'button-reset');
+            this.toggleButton.innerHTML = icons_1.arrowUp;
+            this.toggleButton.onclick = () => {
+                this.collapsed = !this.collapsed;
+                this.toggleContent();
+                this.toggleButton?.classList.toggle('collapsed', this.collapsed);
+            };
+            this.contentDOM = document.createElement('div');
+            this.contentDOM.classList.add('supplements-content');
+            this.contentDOM.classList.add('block');
+            this.dom.appendChild(this.toggleButton);
+            this.dom.setAttribute('id', this.node.attrs.id);
+            this.dom.appendChild(this.contentDOM);
+        };
+    }
+    toggleContent() {
+        const supplementItems = this.contentDOM?.querySelectorAll('.supplement-item');
+        supplementItems?.forEach((item) => {
+            const element = item;
+            element.style.display = this.collapsed ? 'none' : '';
+        });
+    }
+}
+exports.SupplementsView = SupplementsView;
+exports.default = (0, creators_1.createNodeView)(SupplementsView);

package/dist/cjs/views/supplements_editable.js

@@ -0,0 +1,21 @@
+"use strict";
+/*!
+ * © 2025 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const creators_1 = require("./creators");
+const editable_block_1 = require("./editable_block");
+const supplements_1 = require("./supplements");
+exports.default = (0, creators_1.createEditableNodeView)((0, editable_block_1.EditableBlock)(supplements_1.SupplementsView));

package/dist/es/commands.js

@@ -23,7 +23,7 @@ import { addColumnAfter, addColumnBefore, addRow, selectedRect, } from 'prosemir
 import { findWrapping, liftTarget, ReplaceAroundStep, ReplaceStep, } from 'prosemirror-transform';
 import { findChildrenByType, findParentNodeOfType, findParentNodeOfTypeClosestToPos, flatten, hasParentNodeOfType, } from 'prosemirror-utils';
 import { getCommentKey, getCommentRange } from './lib/comments';
-import { findAbstractsNode, findBackmatter, findBibliographySection, findBody, findFootnotesSection, insertAttachmentsNode, insertAwardsNode, insertFootnotesSection, insertSupplementsNode, } from './lib/doc';
+import { findAbstractsNode, findBackmatter, findBibliographySection, findBody, findFootnotesSection, insertAttachmentsNode, insertAwardsNode, insertFootnotesSection, upsertSupplementsSection, } from './lib/doc';
 import { createFootnote, findFootnotesContainerNode, getFootnotesElementState, } from './lib/footnotes';
 import { findWordBoundaries, isNodeOfType, nearestAncestor, } from './lib/helpers';
 import { templateAllows } from './lib/template';
@@ -281,18 +281,21 @@ export const insertTable = (config, state, dispatch) => {
     dispatch && dispatch(tr);
     return true;
 };
-export const insertSupplement = (file, state, dispatch) => {
+export const insertSupplement = (file, view) => {
     const supplement = schema.nodes.supplement.createAndFill({
         id: generateNodeID(schema.nodes.supplement),
         href: file.id,
-    });
-    const tr = state.tr;
-    const supplements = insertSupplementsNode(tr);
-    const pos = supplements.pos + supplements.node.nodeSize - 1;
-    tr.insert(pos, supplement);
-    if (dispatch) {
-        dispatch(skipTracking(tr));
-    }
+    }, [
+        schema.nodes.figcaption.create({}, [
+            schema.nodes.caption_title.create(),
+            schema.nodes.caption.create(),
+        ]),
+    ]);
+    const tr = view.state.tr;
+    const { pos } = upsertSupplementsSection(tr, supplement);
+    tr.setSelection(NodeSelection.create(tr.doc, pos));
+    view.focus();
+    view.dispatch(tr.scrollIntoView());
     return true;
 };
 export const insertAttachment = (file, state, type, dispatch) => {

package/dist/es/components/outline/DraggableTree.js

@@ -27,6 +27,7 @@ const excludedTypes = [
     schema.nodes.trans_abstract,
     schema.nodes.subtitles,
     schema.nodes.subtitle,
+    schema.nodes.supplements,
 ];
 const childrenExcludedTypes = [
     schema.nodes.pullquote_element,

package/dist/es/configs/editor-views.js

@@ -42,6 +42,8 @@ import sectionLabel from '../views/section_label';
 import sectionTitle from '../views/section_title_editable';
 import subtitle from '../views/subtitle_editable';
 import subtitles from '../views/subtitles_editable';
+import supplement from '../views/supplement_editable';
+import supplements from '../views/supplements_editable';
 import tableCell from '../views/table_cell';
 import tableElement from '../views/table_element_editable';
 import tableElementFooter from '../views/table_element_footer';
@@ -91,7 +93,8 @@ export default (props, dispatch) => {
         table_header: tableCell(props),
         table_element_footer: tableElementFooter(props),
         comments: empty('comments'),
-        supplements: empty('supplements'),
+        supplements: supplements(props, dispatch),
+        supplement: supplement(props, dispatch),
         author_notes: authorNotes(props, dispatch),
         awards: awards(props, dispatch),
         award: award(props, dispatch),

package/dist/es/lib/doc.js

@@ -15,14 +15,16 @@ export const insertAwardsNode = (tr) => {
         pos,
     };
 };
-export const insertSupplementsNode = (tr) => {
+export const upsertSupplementsSection = (tr, supplement) => {
     const doc = tr.doc;
     const supplements = findChildrenByType(doc, schema.nodes.supplements)[0];
     if (supplements) {
-        return supplements;
+        const pos = supplements.pos + supplements.node.nodeSize - 1;
+        tr.insert(pos, supplement);
+        return { node: supplements.node, pos };
     }
     const pos = findInsertionPosition(schema.nodes.supplements, doc);
-    const node = schema.nodes.supplements.createAndFill();
+    const node = schema.nodes.supplements.createAndFill({ id: generateNodeID(schema.nodes.supplements) }, [supplement]);
     tr.insert(pos, node);
     return {
         node,

package/dist/es/lib/utils.js

@@ -161,6 +161,10 @@ export const findInsertionPosition = (type, doc) => {
             insertPos = offset;
         }
     });
+    if (insertPos === 0 &&
+        doc.canReplaceWith(doc.childCount, doc.childCount, type)) {
+        insertPos = doc.content.size;
+    }
     return insertPos;
 };
 export const filterBlockNodes = (fragment, predicate) => {

package/dist/es/plugins/placeholder.js

@@ -82,6 +82,9 @@ export default () => new Plugin({
                         if (findParentNodeOfTypeClosestToPos($pos, schema.nodes.box_element)) {
                             placeholderText = 'Optional box title...';
                         }
+                        if (findParentNodeOfTypeClosestToPos($pos, schema.nodes.supplements)) {
+                            placeholderText = 'Supplements';
+                        }
                         decorations.push(Decoration.widget(pos + 1, placeholderWidget(placeholderText)));
                     }
                     else if (node.type === node.type.schema.nodes.trans_abstract) {

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.6.9';
+export const VERSION = '3.6.11';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/editable_block.js

@@ -39,6 +39,7 @@ export const EditableBlock = (Base) => {
             const nodeType = this.node.type;
             if (nodeType === schema.nodes.hero_image ||
                 nodeType === schema.nodes.subtitles ||
+                nodeType === schema.nodes.supplements ||
                 hasParent($pos, [
                     schema.nodes.keywords,
                     schema.nodes.bibliography_section,

package/dist/es/views/section_title.js

@@ -26,6 +26,7 @@ export class SectionTitleView extends BlockView {
             schema.nodes.bibliography_section,
             schema.nodes.footnotes_section,
             schema.nodes.graphical_abstract_section,
+            schema.nodes.supplements,
         ];
         this.createElement = () => {
             this.contentDOM = document.createElement(this.elementType);

package/dist/es/views/supplement.js

@@ -0,0 +1,171 @@
+/*!
+ * © 2025 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 { getFileIcon } from '@manuscripts/style-guide';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { draggableIcon } from '../icons';
+import { findNodeByID } from '../lib/doc';
+import { BaseNodeView } from './base_node_view';
+import { createNodeView } from './creators';
+export class SupplementView extends BaseNodeView {
+    constructor() {
+        super(...arguments);
+        this.ignoreMutation = () => true;
+        this.createElement = () => {
+            this.dom = document.createElement('div');
+            this.dom.classList.add('supplement-item');
+            this.dom.classList.add('block');
+            this.dom.setAttribute('id', this.node.attrs.id);
+            this.dom.setAttribute('href', this.node.attrs.href);
+            this.dom.draggable = true;
+            this.contentDOM = document.createElement('div');
+            this.contentDOM.classList.add('supplement-caption');
+            this.dom.appendChild(this.contentDOM);
+            this.addFileInfo();
+            this.addDragIcon();
+        };
+    }
+    initialise() {
+        this.createElement();
+        this.updateContents();
+        this.setupDragAndDrop();
+    }
+    updateContents() {
+        super.updateContents();
+        this.refreshFileInfo();
+    }
+    getDropSide(element, clientY) {
+        const { top, bottom } = element.getBoundingClientRect();
+        const middleY = (top + bottom) / 2;
+        return clientY > middleY ? 'after' : 'before';
+    }
+    noActualMove(currentPos, nodeSize, targetPos) {
+        return targetPos === currentPos || targetPos === currentPos + nodeSize;
+    }
+    handleDragStart() {
+        const supplementId = this.node.attrs.id;
+        SupplementView.currentDragSupplementId = supplementId;
+        this.dom.classList.add('dragging');
+    }
+    setupDragAndDrop() {
+        const clearDropClasses = () => {
+            this.dom.classList.remove('drop-target-above', 'drop-target-below');
+        };
+        this.dom.addEventListener('dragstart', () => {
+            if (this.node.attrs.id) {
+                this.handleDragStart();
+            }
+        });
+        this.dom.addEventListener('dragend', () => {
+            SupplementView.currentDragSupplementId = null;
+            this.dom.classList.remove('dragging');
+            clearDropClasses();
+        });
+        this.dom.addEventListener('dragover', (e) => {
+            if (SupplementView.currentDragSupplementId) {
+                e.preventDefault();
+                e.stopPropagation();
+                const side = this.getDropSide(this.dom, e.clientY);
+                clearDropClasses();
+                this.dom.classList.add(side === 'before' ? 'drop-target-above' : 'drop-target-below');
+            }
+        });
+        this.dom.addEventListener('dragleave', (e) => {
+            if (!this.dom.contains(e.relatedTarget)) {
+                clearDropClasses();
+            }
+        });
+        this.dom.addEventListener('drop', (e) => {
+            if (!SupplementView.currentDragSupplementId) {
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            const supplementId = SupplementView.currentDragSupplementId;
+            if (!supplementId) {
+                return;
+            }
+            const { state } = this.view;
+            const supplement = findNodeByID(state.doc, supplementId);
+            if (!supplement) {
+                return;
+            }
+            const toPos = this.getPos();
+            const side = this.getDropSide(this.dom, e.clientY);
+            const targetPos = side === 'before' ? toPos : toPos + this.node.nodeSize;
+            if (this.noActualMove(supplement.pos, supplement.node.nodeSize, targetPos)) {
+                clearDropClasses();
+                return;
+            }
+            this.moveSupplement(supplement.pos, supplement.node, targetPos);
+            clearDropClasses();
+        });
+    }
+    moveSupplement(fromPos, fromNode, targetPos) {
+        const { state } = this.view;
+        const { tr } = state;
+        tr.insert(targetPos, fromNode);
+        const mappedFrom = tr.mapping.map(fromPos, -1);
+        tr.delete(mappedFrom, mappedFrom + fromNode.nodeSize);
+        this.view.dispatch(tr);
+    }
+    addFileInfo() {
+        this.supplementInfoEl = document.createElement('div');
+        this.supplementInfoEl.classList.add('supplement-file-info');
+        this.supplementInfoEl.contentEditable = 'false';
+        const files = this.props.getFiles();
+        const file = files.find((f) => f.id === this.node.attrs.href);
+        if (file) {
+            const iconElement = document.createElement('span');
+            iconElement.classList.add('supplement-file-icon');
+            const icon = getFileIcon(file.name);
+            if (icon) {
+                iconElement.innerHTML = renderToStaticMarkup(icon);
+            }
+            this.supplementInfoEl.appendChild(iconElement);
+            const fileName = document.createElement('span');
+            fileName.classList.add('supplement-file-name');
+            fileName.textContent = file.name;
+            this.supplementInfoEl.appendChild(fileName);
+        }
+        else {
+            const placeholder = document.createElement('span');
+            placeholder.textContent = 'File not found';
+            this.supplementInfoEl.appendChild(placeholder);
+        }
+        this.dom.appendChild(this.supplementInfoEl);
+    }
+    refreshFileInfo() {
+        this.supplementInfoEl.remove();
+        this.addFileInfo();
+    }
+    addDragIcon() {
+        if (this.dragIcon) {
+            this.dragIcon.remove();
+            this.dragIcon = undefined;
+        }
+        const dragIcon = document.createElement('div');
+        dragIcon.className = 'drag-icon';
+        dragIcon.innerHTML = draggableIcon;
+        dragIcon.draggable = false;
+        dragIcon.addEventListener('mousedown', (e) => {
+            e.stopPropagation();
+        });
+        this.dragIcon = dragIcon;
+        this.dom.appendChild(dragIcon);
+    }
+}
+SupplementView.currentDragSupplementId = null;
+export default createNodeView(SupplementView);

package/dist/es/views/supplement_editable.js

@@ -0,0 +1,18 @@
+/*!
+ * © 2025 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 { createEditableNodeView } from './creators';
+import { SupplementView } from './supplement';
+export default createEditableNodeView(SupplementView);

package/dist/es/views/supplements.js

@@ -0,0 +1,49 @@
+/*!
+ * © 2025 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 { arrowUp } from '../icons';
+import BlockView from './block_view';
+import { createNodeView } from './creators';
+export class SupplementsView extends BlockView {
+    constructor() {
+        super(...arguments);
+        this.collapsed = false;
+        this.ignoreMutation = () => true;
+        this.createElement = () => {
+            this.toggleButton = document.createElement('button');
+            this.toggleButton.classList.add('supplements-toggle-btn', 'button-reset');
+            this.toggleButton.innerHTML = arrowUp;
+            this.toggleButton.onclick = () => {
+                this.collapsed = !this.collapsed;
+                this.toggleContent();
+                this.toggleButton?.classList.toggle('collapsed', this.collapsed);
+            };
+            this.contentDOM = document.createElement('div');
+            this.contentDOM.classList.add('supplements-content');
+            this.contentDOM.classList.add('block');
+            this.dom.appendChild(this.toggleButton);
+            this.dom.setAttribute('id', this.node.attrs.id);
+            this.dom.appendChild(this.contentDOM);
+        };
+    }
+    toggleContent() {
+        const supplementItems = this.contentDOM?.querySelectorAll('.supplement-item');
+        supplementItems?.forEach((item) => {
+            const element = item;
+            element.style.display = this.collapsed ? 'none' : '';
+        });
+    }
+}
+export default createNodeView(SupplementsView);

package/dist/es/views/supplements_editable.js

@@ -0,0 +1,19 @@
+/*!
+ * © 2025 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 { createEditableNodeView } from './creators';
+import { EditableBlock } from './editable_block';
+import { SupplementsView } from './supplements';
+export default createEditableNodeView(EditableBlock(SupplementsView));

package/dist/types/commands.d.ts

@@ -32,7 +32,7 @@ export declare const insertGeneralTableFootnote: (element: [ManuscriptNode, numb
 export declare const insertFigure: (file: FileAttachment, state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;
 export declare const insertEmbed: (state: ManuscriptEditorState, dispatch?: Dispatch, attrs?: Attrs) => boolean;
 export declare const insertTable: (config: TableConfig, state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;
-export declare const insertSupplement: (file: FileAttachment, state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;
+export declare const insertSupplement: (file: FileAttachment, view: ManuscriptEditorView) => boolean;
 export declare const insertAttachment: (file: FileAttachment, state: ManuscriptEditorState, type: string, dispatch?: Dispatch) => boolean;
 export declare const insertBlock: (nodeType: ManuscriptNodeType) => (state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;
 export declare const deleteBlock: (typeToDelete: string) => (state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;

package/dist/types/lib/doc.d.ts

@@ -1,4 +1,4 @@
-import { AwardsNode, ManuscriptNode, ManuscriptTransaction, SupplementsNode } from '@manuscripts/transform';
+import { AwardsNode, ManuscriptNode, ManuscriptTransaction, SupplementNode, SupplementsNode } from '@manuscripts/transform';
 export declare const insertAwardsNode: (tr: ManuscriptTransaction) => {
     node: import("prosemirror-model").Node;
     pos: number;
@@ -6,7 +6,7 @@ export declare const insertAwardsNode: (tr: ManuscriptTransaction) => {
     node: AwardsNode;
     pos: number;
 };
-export declare const insertSupplementsNode: (tr: ManuscriptTransaction) => {
+export declare const upsertSupplementsSection: (tr: ManuscriptTransaction, supplement: SupplementNode) => {
     node: import("prosemirror-model").Node;
     pos: number;
 } | {

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.6.9";
+export declare const VERSION = "3.6.11";
 export declare const MATHJAX_VERSION = "3.2.2";

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

@@ -0,0 +1,37 @@
+/*!
+ * © 2025 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 { SupplementNode } from '@manuscripts/transform';
+import { Trackable } from '../types';
+import { BaseNodeView } from './base_node_view';
+export declare class SupplementView extends BaseNodeView<Trackable<SupplementNode>> {
+    private supplementInfoEl;
+    private static currentDragSupplementId;
+    private dragIcon;
+    ignoreMutation: () => boolean;
+    initialise(): void;
+    createElement: () => void;
+    updateContents(): void;
+    private getDropSide;
+    private noActualMove;
+    private handleDragStart;
+    private setupDragAndDrop;
+    private moveSupplement;
+    private addFileInfo;
+    private refreshFileInfo;
+    private addDragIcon;
+}
+declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch) => import("../types").NodeViewCreator<SupplementView>;
+export default _default;

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

@@ -0,0 +1,18 @@
+/*!
+ * © 2025 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 { SupplementView } from './supplement';
+declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch) => import("../types").NodeViewCreator<SupplementView>;
+export default _default;

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

@@ -0,0 +1,27 @@
+/*!
+ * © 2025 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 { SupplementsNode } from '@manuscripts/transform';
+import { Trackable } from '../types';
+import BlockView from './block_view';
+export declare class SupplementsView extends BlockView<Trackable<SupplementsNode>> {
+    private collapsed;
+    private toggleButton;
+    ignoreMutation: () => boolean;
+    createElement: () => void;
+    private toggleContent;
+}
+declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch) => import("../types").NodeViewCreator<SupplementsView>;
+export default _default;

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

@@ -0,0 +1,44 @@
+/*!
+ * © 2025 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 { SupplementsView } from './supplements';
+declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch) => import("../types").NodeViewCreator<{
+    gutterButtons(): HTMLElement[];
+    actionGutterButtons(): never[];
+    createAddButton(): HTMLAnchorElement | null;
+    createEditButton(): HTMLElement | null;
+    createMenu: () => import("../lib/context-menu").ContextMenu;
+    initialise(): void;
+    updateContents(): void;
+    handleTrackChanges(): void;
+    updateClasses(): void;
+    updatePlaceholder(): void;
+    createElement(): void;
+    createDOM(): void;
+    gutter: Record<string, HTMLElement>;
+    createGutter(className: string, buttons: HTMLElement[]): void;
+    dom: HTMLElement;
+    contentDOM?: HTMLElement;
+    elementType: string;
+    readonly props: import("../configs/ManuscriptsEditor").EditorProps;
+    node: import("prosemirror-model").Node;
+    readonly view: import("@manuscripts/transform").ManuscriptEditorView;
+    readonly getPos: () => number;
+    update(newNode: import("@manuscripts/transform").ManuscriptNode): boolean;
+    selectNode(): void;
+    deselectNode(): void;
+    destroy(): void;
+} & SupplementsView>;
+export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "3.6.9",
+  "version": "3.6.11",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -41,7 +41,7 @@
     "@manuscripts/json-schema": "2.2.12",
     "@manuscripts/style-guide": "3.3.4",
     "@manuscripts/track-changes-plugin": "2.1.0",
-    "@manuscripts/transform": "4.3.5",
+    "@manuscripts/transform": "4.3.6",
     "@popperjs/core": "2.11.8",
     "citeproc": "2.4.63",
     "codemirror": "5.65.19",

package/styles/AdvancedEditor.css

@@ -840,7 +840,9 @@ span.comment-marker {
 
 .selected-suggestion:not(.block-container):not(.graphical-abstract):not(
     .keywords
-  ):not(figure):not(figure .equation):not(.inconsistency-highlight),
+  ):not(figure):not(figure .equation):not(.inconsistency-highlight):not(
+    .supplement-item:is([data-track-op='move'])
+  ),
 .footnote-marker-selected {
   border-width: 2px 0 2px 0 !important;
   border-style: solid !important;
@@ -1067,13 +1069,19 @@ figure.block:has(.equation.selected-suggestion) {
 .tracking-visible
   .selected-suggestion:is([data-track-op='move'], [data-track-op='structure'])
   .block,
-.block:has(
+.block:not(.supplements-content):has(
     figure.selected-suggestion,
     [data-track-op='move'][data-track-status='pending']
   ) {
   box-shadow: inset 3px 0 0 var(--updated-border-color);
 }
 
+.supplements-content.block:has(
+    [data-track-op='move'][data-track-status='pending']
+  ) {
+  border-left: 3px solid var(--updated-border-color) !important;
+}
+
 .tracking-visible
   .selected-suggestion[data-track-op='set_attrs']
   .block:not(.trans-abstract),
@@ -1693,7 +1701,7 @@ th:hover > .table-context-menu-button,
   left: 93%;
 }
 
-.block-hero_image {
+.block-hero_image, .block-supplements {
   margin-bottom: 30px;
 }
 
@@ -1703,6 +1711,7 @@ th:hover > .table-context-menu-button,
   border-radius: 4px;
   background: #ffffff;
   padding: 0 !important;
+  width: 100%;
 }
 
 .ProseMirror div.backmatter:has(+ .block-container.block-hero_image)::after {
@@ -1744,7 +1753,8 @@ th:hover > .table-context-menu-button,
 
 .ProseMirror .block-image_element .block:focus-visible,
 .ProseMirror .block-figure_element .block:focus-visible,
-.ProseMirror .block-embed .block:focus-visible {
+.ProseMirror .block-embed .block:focus-visible,
+.ProseMirror .supplement-caption:focus-visible {
   outline: none;
 }
 

package/styles/Editor.css

@@ -1134,3 +1134,162 @@
 .highlight {
   background-color: #ffeebf !important;
 }
+
+.ProseMirror .supplement-item {
+  position: relative;
+  padding: 12px 24px;
+  border-bottom: 1px solid #e2e2e2;
+}
+
+.ProseMirror .supplement-item:last-child {
+  border-bottom: none;
+}
+
+.ProseMirror .supplement-item figcaption {
+  text-align: left;
+  margin-top: 0;
+}
+
+.ProseMirror .supplement-item .caption-title.empty-node::before {
+  content: 'Insert caption title...';
+  color: #c9c9c9;
+  font-style: italic;
+}
+
+.ProseMirror .supplement-item .caption-description.empty-node::before {
+  content: 'Insert caption...';
+  color: #c9c9c9;
+  font-style: italic;
+}
+
+.ProseMirror .supplement-file-info {
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+  gap: 4px;
+}
+
+.ProseMirror .supplement-file-icon {
+  display: flex;
+  align-items: center;
+  width: 14px;
+  height: 16px;
+}
+
+.ProseMirror .supplement-file-name {
+  font-size: 14px;
+}
+
+
+.ProseMirror .supplements-toggle-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.2s ease;
+  position: absolute;
+  top: 16px;
+  right: 65px;
+  z-index: 10;
+}
+
+
+.ProseMirror .supplements-toggle-btn svg {
+  width: 16px;
+  height: 9px;
+}
+
+.ProseMirror .supplements-toggle-btn.collapsed svg {
+  transform: rotate(180deg);
+}
+
+
+.ProseMirror .supplements-content {
+  border: 1px solid #c9c9c9;
+  border-radius: 4px;
+  background: white;
+  padding: 0 !important;
+  width: 100%;
+}
+
+/* Make section title look like a horizontal panel header */
+.ProseMirror .supplements-content .block-section_title {
+  border-top: 1px solid #c9c9c9;
+  border-bottom: 1px solid #c9c9c9;
+  display: block !important;
+}
+
+.ProseMirror .supplements-content .block-section_title .block-gutter {
+  display: none;
+}
+
+.ProseMirror .supplements-content .block-section_title .action-gutter {
+  display: none;
+}
+
+.ProseMirror .supplements-content .block-section_title h1 {
+  background-color: #f2f2f2;
+  padding: 8px 12px !important;
+  font-size: 14px;
+  display: flex;
+  margin-top: -1px;
+  color: #6e6e6e !important;
+}
+
+.ProseMirror .supplements-content .block-section_title h1.empty-node span {
+  color: #6e6e6e !important;
+  font-style: normal;
+}
+
+/* Horizontal line before supplements block */
+.ProseMirror div.backmatter:has(+ .block-container.block-supplements)::after {
+  content: '';
+  display: block;
+  border-bottom: 1px solid #e2e2e2;
+  margin: 0 35pt 32px 35pt;
+}
+
+.ProseMirror .supplement-item.drop-target-above,
+.ProseMirror .supplement-item.drop-target-below {
+  border: 2px dotted #20aedf !important;
+}
+
+.ProseMirror .supplement-item.dragging {
+  background-color: #F2F2F2 !important;
+  opacity: 0.3;
+  z-index: 1000;
+}
+
+.ProseMirror .supplement-item:hover {
+  background-color: #F2F2F2 !important;
+  cursor: move;
+}
+
+.ProseMirror .supplement-item:hover figcaption {
+  background-color: #F2F2F2 !important;
+}
+
+.ProseMirror .supplement-item .drag-icon {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  cursor: grab;
+  opacity: 0;
+  transition: opacity 0.2s;
+  z-index: 5;
+  pointer-events: auto;
+}
+
+.ProseMirror .supplement-item:hover .drag-icon {
+  opacity: 1;
+}
+
+.ProseMirror .supplement-item .drag-icon:active {
+  cursor: grabbing;
+}