@manuscripts/body-editor 3.2.29 → 3.2.30

package/dist/cjs/icons.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.fileCorruptedIcon = exports.imageDefaultIcon = exports.imageLeftIcon = exports.imageRightIcon = exports.addFigureBtnIcon = exports.plusIcon = exports.lockIcon = exports.scrollIcon = exports.sectionCategoryIcon = exports.editIcon = exports.deleteIcon = exports.alertIcon = exports.arrowUp = exports.arrowDown = void 0;
+exports.draggableIcon = exports.fileCorruptedIcon = exports.imageDefaultIcon = exports.imageLeftIcon = exports.imageRightIcon = exports.addFigureBtnIcon = exports.plusIcon = exports.lockIcon = exports.scrollIcon = exports.sectionCategoryIcon = exports.editIcon = exports.deleteIcon = exports.alertIcon = exports.arrowUp = exports.arrowDown = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const react_1 = require("react");
 const server_1 = require("react-dom/server");
@@ -19,3 +19,4 @@ exports.imageRightIcon = (0, server_1.renderToStaticMarkup)((0, react_1.createEl
 exports.imageLeftIcon = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(style_guide_1.ImageLeftIcon));
 exports.imageDefaultIcon = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(style_guide_1.ImageDefaultIcon));
 exports.fileCorruptedIcon = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(style_guide_1.FileCorruptedIcon));
+exports.draggableIcon = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(style_guide_1.DraggableIcon));

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

package/dist/cjs/views/figure_editable.js

@@ -32,6 +32,7 @@ const ReactSubView_1 = __importDefault(require("./ReactSubView"));
 class FigureEditableView extends figure_1.FigureView {
     constructor() {
         super(...arguments);
+        this.dragAndDropInitialized = false;
         this.upload = async (file) => {
             const result = await this.props.fileManagement.upload(file);
             this.setSrc(result.id);
@@ -95,8 +96,116 @@ class FigureEditableView extends figure_1.FigureView {
         this.createDOM();
         this.updateContents();
     }
+    clearTargetClass(target, classes = ['drop-target-above', 'drop-target-below']) {
+        target.classList.remove(...classes);
+    }
+    handleDragStart() {
+        const figureId = this.node.attrs.id;
+        FigureEditableView.currentDragFigureId = figureId;
+        this.container.classList.add('dragging');
+        const parent = this.container.parentElement;
+        if (parent) {
+            const siblingFigures = parent.querySelectorAll('.figure');
+            siblingFigures.forEach((el) => {
+                if (el !== this.container) {
+                    el.classList.add('drag-active');
+                }
+            });
+        }
+    }
+    setupDragAndDrop() {
+        this.container.draggable = true;
+        this.container.addEventListener('dragstart', () => {
+            if (this.node.attrs.id && !(0, track_changes_utils_1.isDeleted)(this.node)) {
+                this.handleDragStart();
+            }
+        });
+        if (this.dragHandle) {
+            this.dragHandle.addEventListener('dragstart', () => {
+                this.handleDragStart();
+            });
+        }
+        this.container.addEventListener('dragend', () => {
+            FigureEditableView.currentDragFigureId = null;
+            this.clearTargetClass(this.container, ['dragging']);
+            const parent = this.container.parentElement;
+            if (parent) {
+                const figures = parent.querySelectorAll('.figure');
+                figures.forEach((el) => {
+                    this.clearTargetClass(el, [
+                        'drag-active',
+                        'drop-target-above',
+                        'drop-target-below',
+                    ]);
+                });
+            }
+        });
+        this.container.addEventListener('dragover', (e) => {
+            if (FigureEditableView.currentDragFigureId) {
+                e.preventDefault();
+                e.stopPropagation();
+                const rect = this.container.getBoundingClientRect();
+                const relativeY = e.clientY - rect.top;
+                const isAbove = relativeY < rect.height / 2;
+                this.clearTargetClass(this.container);
+                this.container.classList.add(isAbove ? 'drop-target-above' : 'drop-target-below');
+            }
+        });
+        this.container.addEventListener('dragleave', (e) => {
+            if (!this.container.contains(e.relatedTarget)) {
+                this.clearTargetClass(this.container);
+            }
+        });
+        this.container.addEventListener('drop', (e) => {
+            if (!FigureEditableView.currentDragFigureId) {
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            const figureId = FigureEditableView.currentDragFigureId;
+            if (!figureId) {
+                return;
+            }
+            const figure = this.getFigureById(figureId);
+            if (!figure) {
+                return;
+            }
+            const toPos = this.getPos();
+            if (figure.pos === toPos) {
+                return;
+            }
+            this.moveFigure(figure.pos, figure.node, toPos);
+            this.clearTargetClass(this.container);
+        });
+    }
+    getFigureById(figureId) {
+        let result = null;
+        this.view.state.doc.descendants((node, pos) => {
+            if (node.type === transform_1.schema.nodes.figure && node.attrs.id === figureId) {
+                result = { pos, node };
+                return false;
+            }
+            if (result) {
+                return false;
+            }
+        });
+        return result;
+    }
+    moveFigure(fromPos, fromNode, targetPos) {
+        const { state } = this.view;
+        const { tr } = state;
+        tr.delete(fromPos, fromPos + fromNode.nodeSize);
+        tr.insert(this.view.state.tr.mapping.map(targetPos), fromNode);
+        this.view.dispatch(tr);
+    }
     updateContents() {
         super.updateContents();
+        this.clearTargetClass(this.container, ['dragging']);
+        if (this.props.getCapabilities().editArticle &&
+            !this.dragAndDropInitialized) {
+            this.setupDragAndDrop();
+            this.dragAndDropInitialized = true;
+        }
         const src = this.node.attrs.src;
         const files = this.props.getFiles();
         const file = src && files.filter((f) => f.id === src)[0];
@@ -154,6 +263,20 @@ class FigureEditableView extends figure_1.FigureView {
     }
     addTools() {
         this.manageReactTools();
+        const $pos = this.view.state.doc.resolve(this.getPos());
+        const parent = $pos.parent;
+        if (this.props.getCapabilities()?.editArticle &&
+            parent.type === transform_1.schema.nodes.figure_element &&
+            !(0, track_changes_utils_1.isDeleted)(this.node)) {
+            const dragHandle = document.createElement('div');
+            dragHandle.className = 'drag-handler';
+            dragHandle.innerHTML = icons_1.draggableIcon;
+            dragHandle.draggable = true;
+            dragHandle.addEventListener('mousedown', (e) => {
+                e.stopPropagation();
+            });
+            this.container.appendChild(dragHandle);
+        }
     }
     manageReactTools() {
         let handleDownload;
@@ -243,4 +366,5 @@ class FigureEditableView extends figure_1.FigureView {
     }
 }
 exports.FigureEditableView = FigureEditableView;
+FigureEditableView.currentDragFigureId = null;
 exports.default = (0, creators_1.createEditableNodeView)(FigureEditableView);

package/dist/es/icons.js

@@ -1,4 +1,4 @@
-import { AlertIcon, ArrowDownCircleIcon, ArrowUpIcon, DeleteIcon, EditIcon, FileCorruptedIcon, ImageDefaultIcon, ImageLeftIcon, ImageRightIcon, LockIcon, PlusIcon, ScrollIcon, SectionCategoryIcon, } from '@manuscripts/style-guide';
+import { AlertIcon, ArrowDownCircleIcon, ArrowUpIcon, DeleteIcon, DraggableIcon, EditIcon, FileCorruptedIcon, ImageDefaultIcon, ImageLeftIcon, ImageRightIcon, LockIcon, PlusIcon, ScrollIcon, SectionCategoryIcon, } from '@manuscripts/style-guide';
 import { createElement } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 const renderIcon = (c) => renderToStaticMarkup(createElement(c));
@@ -16,3 +16,4 @@ export const imageRightIcon = renderToStaticMarkup(createElement(ImageRightIcon)
 export const imageLeftIcon = renderToStaticMarkup(createElement(ImageLeftIcon));
 export const imageDefaultIcon = renderToStaticMarkup(createElement(ImageDefaultIcon));
 export const fileCorruptedIcon = renderToStaticMarkup(createElement(FileCorruptedIcon));
+export const draggableIcon = renderToStaticMarkup(createElement(DraggableIcon));

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.2.29';
+export const VERSION = '3.2.30';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/figure_editable.js

@@ -17,7 +17,7 @@ import { schema } from '@manuscripts/transform';
 import { NodeSelection } from 'prosemirror-state';
 import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
 import { FigureOptions, } from '../components/views/FigureDropdown';
-import { fileCorruptedIcon } from '../icons';
+import { draggableIcon, fileCorruptedIcon } from '../icons';
 import { isDeleted } from '../lib/track-changes-utils';
 import { createEditableNodeView } from './creators';
 import { FigureView } from './figure';
@@ -26,6 +26,7 @@ import ReactSubView from './ReactSubView';
 export class FigureEditableView extends FigureView {
     constructor() {
         super(...arguments);
+        this.dragAndDropInitialized = false;
         this.upload = async (file) => {
             const result = await this.props.fileManagement.upload(file);
             this.setSrc(result.id);
@@ -89,8 +90,116 @@ export class FigureEditableView extends FigureView {
         this.createDOM();
         this.updateContents();
     }
+    clearTargetClass(target, classes = ['drop-target-above', 'drop-target-below']) {
+        target.classList.remove(...classes);
+    }
+    handleDragStart() {
+        const figureId = this.node.attrs.id;
+        FigureEditableView.currentDragFigureId = figureId;
+        this.container.classList.add('dragging');
+        const parent = this.container.parentElement;
+        if (parent) {
+            const siblingFigures = parent.querySelectorAll('.figure');
+            siblingFigures.forEach((el) => {
+                if (el !== this.container) {
+                    el.classList.add('drag-active');
+                }
+            });
+        }
+    }
+    setupDragAndDrop() {
+        this.container.draggable = true;
+        this.container.addEventListener('dragstart', () => {
+            if (this.node.attrs.id && !isDeleted(this.node)) {
+                this.handleDragStart();
+            }
+        });
+        if (this.dragHandle) {
+            this.dragHandle.addEventListener('dragstart', () => {
+                this.handleDragStart();
+            });
+        }
+        this.container.addEventListener('dragend', () => {
+            FigureEditableView.currentDragFigureId = null;
+            this.clearTargetClass(this.container, ['dragging']);
+            const parent = this.container.parentElement;
+            if (parent) {
+                const figures = parent.querySelectorAll('.figure');
+                figures.forEach((el) => {
+                    this.clearTargetClass(el, [
+                        'drag-active',
+                        'drop-target-above',
+                        'drop-target-below',
+                    ]);
+                });
+            }
+        });
+        this.container.addEventListener('dragover', (e) => {
+            if (FigureEditableView.currentDragFigureId) {
+                e.preventDefault();
+                e.stopPropagation();
+                const rect = this.container.getBoundingClientRect();
+                const relativeY = e.clientY - rect.top;
+                const isAbove = relativeY < rect.height / 2;
+                this.clearTargetClass(this.container);
+                this.container.classList.add(isAbove ? 'drop-target-above' : 'drop-target-below');
+            }
+        });
+        this.container.addEventListener('dragleave', (e) => {
+            if (!this.container.contains(e.relatedTarget)) {
+                this.clearTargetClass(this.container);
+            }
+        });
+        this.container.addEventListener('drop', (e) => {
+            if (!FigureEditableView.currentDragFigureId) {
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            const figureId = FigureEditableView.currentDragFigureId;
+            if (!figureId) {
+                return;
+            }
+            const figure = this.getFigureById(figureId);
+            if (!figure) {
+                return;
+            }
+            const toPos = this.getPos();
+            if (figure.pos === toPos) {
+                return;
+            }
+            this.moveFigure(figure.pos, figure.node, toPos);
+            this.clearTargetClass(this.container);
+        });
+    }
+    getFigureById(figureId) {
+        let result = null;
+        this.view.state.doc.descendants((node, pos) => {
+            if (node.type === schema.nodes.figure && node.attrs.id === figureId) {
+                result = { pos, node };
+                return false;
+            }
+            if (result) {
+                return false;
+            }
+        });
+        return result;
+    }
+    moveFigure(fromPos, fromNode, targetPos) {
+        const { state } = this.view;
+        const { tr } = state;
+        tr.delete(fromPos, fromPos + fromNode.nodeSize);
+        tr.insert(this.view.state.tr.mapping.map(targetPos), fromNode);
+        this.view.dispatch(tr);
+    }
     updateContents() {
         super.updateContents();
+        this.clearTargetClass(this.container, ['dragging']);
+        if (this.props.getCapabilities().editArticle &&
+            !this.dragAndDropInitialized) {
+            this.setupDragAndDrop();
+            this.dragAndDropInitialized = true;
+        }
         const src = this.node.attrs.src;
         const files = this.props.getFiles();
         const file = src && files.filter((f) => f.id === src)[0];
@@ -148,6 +257,20 @@ export class FigureEditableView extends FigureView {
     }
     addTools() {
         this.manageReactTools();
+        const $pos = this.view.state.doc.resolve(this.getPos());
+        const parent = $pos.parent;
+        if (this.props.getCapabilities()?.editArticle &&
+            parent.type === schema.nodes.figure_element &&
+            !isDeleted(this.node)) {
+            const dragHandle = document.createElement('div');
+            dragHandle.className = 'drag-handler';
+            dragHandle.innerHTML = draggableIcon;
+            dragHandle.draggable = true;
+            dragHandle.addEventListener('mousedown', (e) => {
+                e.stopPropagation();
+            });
+            this.container.appendChild(dragHandle);
+        }
     }
     manageReactTools() {
         let handleDownload;
@@ -236,4 +359,5 @@ export class FigureEditableView extends FigureView {
         }
     }
 }
+FigureEditableView.currentDragFigureId = null;
 export default createEditableNodeView(FigureEditableView);

package/dist/types/icons.d.ts

@@ -12,3 +12,4 @@ export declare const imageRightIcon: string;
 export declare const imageLeftIcon: string;
 export declare const imageDefaultIcon: string;
 export declare const fileCorruptedIcon: string;
+export declare const draggableIcon: string;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.2.29";
+export declare const VERSION = "3.2.30";
 export declare const MATHJAX_VERSION = "3.2.2";

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

@@ -16,7 +16,15 @@
 import { FigureView } from './figure';
 export declare class FigureEditableView extends FigureView {
     reactTools: HTMLDivElement;
+    private dragHandle;
+    private static currentDragFigureId;
+    private dragAndDropInitialized;
     initialise(): void;
+    private clearTargetClass;
+    private handleDragStart;
+    private setupDragAndDrop;
+    private getFigureById;
+    private moveFigure;
     upload: (file: File) => Promise<void>;
     updateContents(): void;
     protected addTools(): void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "3.2.29",
+  "version": "3.2.30",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -39,7 +39,7 @@
     "@citation-js/plugin-ris": "0.7.18",
     "@manuscripts/json-schema": "2.2.12",
     "@manuscripts/style-guide": "3.1.6",
-    "@manuscripts/track-changes-plugin": "2.0.5",
+    "@manuscripts/track-changes-plugin": "2.0.6",
     "@manuscripts/transform": "4.2.9",
     "@popperjs/core": "2.11.8",
     "citeproc": "2.4.63",

package/styles/AdvancedEditor.css

@@ -334,6 +334,45 @@
 .ProseMirror .box-element .figure-block .position-menu {
   left: calc(100% - 82px);
 }
+/* Drag Figure Styles */
+.ProseMirror .figure-block .drag-handler {
+  opacity: 0;
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+  cursor: move;
+  border-radius: 4px;
+  position: absolute;
+  left: 0;
+  bottom: 20px;
+  text-align: center;
+  align-items: center;
+  pointer-events: auto;
+  transition: opacity 0.2s;
+  background-color:  #FAFAFA;
+  border: 1px solid #F2F2F2;
+
+}
+.ProseMirror .figure-block .figure:hover .drag-handler {
+  opacity: 1;
+}
+
+/* Drop area blue dotted outline */
+.ProseMirror .figure-block .figure.drop-target-above,
+.ProseMirror .figure-block .figure.drop-target-below {
+  border: 2px dotted #20AEDF !important;
+  transition: border 0.2s, box-shadow 0.2s;
+  position: relative;
+}
+
+.ProseMirror .figure-block .figure.drop-target-above::before { top: 0; }
+.ProseMirror .figure-block .figure.drop-target-below::after { bottom: 0; }
+
+.ProseMirror .figure.dragging {
+  opacity: 0.6;
+  z-index: 1000;
+  transition: opacity 0.2s;
+}
 
 .ProseMirror .block-container.block-box_element {
   grid-template-columns: auto;
@@ -982,8 +1021,8 @@ figure.block:has(.equation.selected-suggestion) {
   [data-track-op='node_split'][data-track-status='pending']
   .block, .tracking-visible
   .selected-suggestion[data-track-op='move'][data-track-status='pending']
-  .block {
-  box-shadow: inset 3px 0 0 var(--updated-border-color);
+  .block , .block:has(figure.selected-suggestion, [data-track-op='move'][data-track-status='pending']){
+    box-shadow: inset 3px 0 0 var(--updated-border-color) ;
 }
 
 .tracking-visible .selected-suggestion[data-track-op='set_attrs'] .block,