@manuscripts/body-editor 3.2.20 → 3.2.23

package/dist/cjs/icons.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addFigureBtnIcon = exports.plusIcon = exports.lockIcon = exports.scrollIcon = exports.sectionCategoryIcon = exports.editIcon = exports.deleteIcon = exports.alertIcon = exports.arrowUp = exports.arrowDown = void 0;
+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");
@@ -15,3 +15,7 @@ exports.scrollIcon = (0, server_1.renderToStaticMarkup)((0, react_1.createElemen
 exports.lockIcon = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(style_guide_1.LockIcon));
 exports.plusIcon = renderIcon(style_guide_1.PlusIcon);
 exports.addFigureBtnIcon = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(style_guide_1.PlusIcon));
+exports.imageRightIcon = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(style_guide_1.ImageRightIcon));
+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));

package/dist/cjs/lib/context-menu.js

@@ -22,7 +22,7 @@ const prosemirror_utils_1 = require("prosemirror-utils");
 const react_1 = require("react");
 const server_1 = require("react-dom/server");
 const commands_1 = require("../commands");
-const figure_editable_1 = require("../views/figure_editable");
+const image_element_1 = require("../views/image_element");
 const popper_1 = require("./popper");
 const utils_1 = require("./utils");
 const view_1 = require("./view");
@@ -164,16 +164,16 @@ class ContextMenu {
                             title: 'Left',
                             action: () => (0, view_1.updateNodeAttrs)(this.view, transform_1.schema.nodes.figure, {
                                 ...figure.attrs,
-                                type: figure_editable_1.figurePositions.left,
+                                type: image_element_1.figurePositions.left,
                             }),
                             Icon: style_guide_1.ImageLeftIcon,
-                            selected: attrType === figure_editable_1.figurePositions.left,
+                            selected: attrType === image_element_1.figurePositions.left,
                         },
                         {
                             title: 'Default',
                             action: () => (0, view_1.updateNodeAttrs)(this.view, transform_1.schema.nodes.figure, {
                                 ...figure.attrs,
-                                type: figure_editable_1.figurePositions.default,
+                                type: image_element_1.figurePositions.default,
                             }),
                             Icon: style_guide_1.ImageDefaultIcon,
                             selected: !attrType,
@@ -182,10 +182,10 @@ class ContextMenu {
                             title: 'Right',
                             action: () => (0, view_1.updateNodeAttrs)(this.view, transform_1.schema.nodes.figure, {
                                 ...figure.attrs,
-                                type: figure_editable_1.figurePositions.right,
+                                type: image_element_1.figurePositions.right,
                             }),
                             Icon: style_guide_1.ImageRightIcon,
-                            selected: attrType === figure_editable_1.figurePositions.right,
+                            selected: attrType === image_element_1.figurePositions.right,
                         },
                     ];
                     const submenuLabel = 'Position';

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

package/dist/cjs/views/figure_editable.js

@@ -18,26 +18,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FigureEditableView = exports.figurePositions = void 0;
-const style_guide_1 = require("@manuscripts/style-guide");
+exports.FigureEditableView = void 0;
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_state_1 = require("prosemirror-state");
 const prosemirror_utils_1 = require("prosemirror-utils");
-const react_1 = require("react");
-const server_1 = require("react-dom/server");
 const FigureDropdown_1 = require("../components/views/FigureDropdown");
+const icons_1 = require("../icons");
 const track_changes_utils_1 = require("../lib/track-changes-utils");
-const view_1 = require("../lib/view");
 const creators_1 = require("./creators");
 const figure_1 = require("./figure");
 const figure_uploader_1 = require("./figure_uploader");
 const ReactSubView_1 = __importDefault(require("./ReactSubView"));
-var figurePositions;
-(function (figurePositions) {
-    figurePositions["left"] = "half-left";
-    figurePositions["right"] = "half-right";
-    figurePositions["default"] = "";
-})(figurePositions = exports.figurePositions || (exports.figurePositions = {}));
 class FigureEditableView extends figure_1.FigureView {
     constructor() {
         super(...arguments);
@@ -60,7 +51,7 @@ class FigureEditableView extends figure_1.FigureView {
             element.classList.add('figure', 'placeholder');
             const instructions = document.createElement('div');
             instructions.classList.add('instructions');
-            const iconHtml = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(style_guide_1.FileCorruptedIcon, { className: 'icon' }));
+            const iconHtml = icons_1.fileCorruptedIcon;
             instructions.innerHTML = `
     <div>
       <div class="unsupported-icon-wrapper">${iconHtml}</div>
@@ -98,78 +89,6 @@ class FigureEditableView extends figure_1.FigureView {
             element.appendChild(instructions);
             return element;
         };
-        this.createPositionMenuWrapper = () => {
-            const can = this.props.getCapabilities();
-            this.positionMenuWrapper = document.createElement('div');
-            this.positionMenuWrapper.classList.add('position-menu');
-            const positionMenuButton = document.createElement('div');
-            positionMenuButton.classList.add('position-menu-button');
-            let icon;
-            switch (this.figurePosition) {
-                case figurePositions.left:
-                    icon = style_guide_1.ImageLeftIcon;
-                    break;
-                case figurePositions.right:
-                    icon = style_guide_1.ImageRightIcon;
-                    break;
-                default:
-                    icon = style_guide_1.ImageDefaultIcon;
-                    break;
-            }
-            if (icon) {
-                positionMenuButton.innerHTML = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(icon));
-            }
-            if (can.editArticle) {
-                positionMenuButton.addEventListener('click', this.showPositionMenu);
-            }
-            this.positionMenuWrapper.appendChild(positionMenuButton);
-            return this.positionMenuWrapper;
-        };
-        this.showPositionMenu = () => {
-            this.props.popper.destroy();
-            const figure = this.node;
-            const componentProps = {
-                actions: [
-                    {
-                        label: 'Left',
-                        action: () => {
-                            this.props.popper.destroy();
-                            (0, view_1.updateNodeAttrs)(this.view, transform_1.schema.nodes.figure, {
-                                ...figure.attrs,
-                                type: figurePositions.left,
-                            });
-                        },
-                        icon: 'ImageLeft',
-                        selected: this.figurePosition === figurePositions.left,
-                    },
-                    {
-                        label: 'Default',
-                        action: () => {
-                            this.props.popper.destroy();
-                            (0, view_1.updateNodeAttrs)(this.view, transform_1.schema.nodes.figure, {
-                                ...figure.attrs,
-                                type: figurePositions.default,
-                            });
-                        },
-                        icon: 'ImageDefault',
-                        selected: !this.figurePosition,
-                    },
-                    {
-                        label: 'Right',
-                        action: () => {
-                            this.props.popper.destroy();
-                            (0, view_1.updateNodeAttrs)(this.view, transform_1.schema.nodes.figure, {
-                                ...figure.attrs,
-                                type: figurePositions.right,
-                            });
-                        },
-                        icon: 'ImageRight',
-                        selected: this.figurePosition === figurePositions.right,
-                    },
-                ],
-            };
-            this.props.popper.show(this.positionMenuWrapper, (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu', 'position-menu']), 'left', false);
-        };
     }
     initialise() {
         this.upload = this.upload.bind(this);
@@ -181,7 +100,6 @@ class FigureEditableView extends figure_1.FigureView {
         const src = this.node.attrs.src;
         const files = this.props.getFiles();
         const file = src && files.filter((f) => f.id === src)[0];
-        this.figurePosition = this.node.attrs.type;
         this.container.innerHTML = '';
         const can = this.props.getCapabilities();
         const link = file && this.props.fileManagement.previewLink(file);
@@ -236,7 +154,6 @@ class FigureEditableView extends figure_1.FigureView {
     }
     addTools() {
         this.manageReactTools();
-        this.container.appendChild(this.createPositionMenuWrapper());
     }
     manageReactTools() {
         let handleDownload;

package/dist/cjs/views/figure_element.js

@@ -24,6 +24,7 @@ class FigureElementView extends image_element_1.ImageElementView {
     constructor() {
         super(...arguments);
         this.ignoreMutation = () => true;
+        this.resizeObserver = null;
         this.createElement = () => {
             super.createElement();
             this.addFigureElementButtons();
@@ -48,16 +49,65 @@ class FigureElementView extends image_element_1.ImageElementView {
             this.view.dispatch(tr);
         };
     }
+    initialise() {
+        super.initialise();
+        requestAnimationFrame(() => this.updateButtonPosition());
+        this.setupResizeObserver();
+    }
+    setupResizeObserver() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+        this.resizeObserver = new ResizeObserver(() => {
+            requestAnimationFrame(() => this.updateButtonPosition());
+        });
+        this.container.querySelectorAll('figure').forEach((figure) => {
+            this.resizeObserver?.observe(figure);
+        });
+    }
     addFigureElementButtons() {
         if (this.props.getCapabilities()?.editArticle) {
-            const addFigureBtn = Object.assign(document.createElement('button'), {
+            this.addFigureBtn = Object.assign(document.createElement('button'), {
                 className: 'add-figure-button',
                 innerHTML: icons_1.addFigureBtnIcon,
                 title: 'Add figure',
             });
-            addFigureBtn.addEventListener('click', () => this.addFigure());
-            this.container.prepend(addFigureBtn);
+            this.addFigureBtn.addEventListener('click', () => this.addFigure());
+            this.container.prepend(this.addFigureBtn);
+        }
+    }
+    updateButtonPosition() {
+        if (!this.addFigureBtn) {
+            return;
+        }
+        const figures = this.container.querySelectorAll('figure');
+        const lastFigure = figures[figures.length - 1];
+        if (!lastFigure) {
+            return;
+        }
+        const lastFigureRect = lastFigure.getBoundingClientRect();
+        const containerRect = this.container.getBoundingClientRect();
+        const relativeTop = lastFigureRect.bottom - containerRect.top + 20;
+        this.addFigureBtn.style.top = `${relativeTop}px`;
+    }
+    update(node) {
+        const handledBySuper = super.update(node);
+        if (handledBySuper) {
+            this.setupResizeObserver();
+            requestAnimationFrame(() => this.updateButtonPosition());
+        }
+        return handledBySuper;
+    }
+    updateContents() {
+        super.updateContents();
+        requestAnimationFrame(() => this.updateButtonPosition());
+    }
+    destroy() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
         }
+        super.destroy();
     }
 }
 exports.FigureElementView = FigureElementView;

package/dist/cjs/views/image_element.js

@@ -18,13 +18,87 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ImageElementView = void 0;
+exports.ImageElementView = exports.figurePositions = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const transform_1 = require("@manuscripts/transform");
+const icons_1 = require("../icons");
 const block_view_1 = __importDefault(require("./block_view"));
 const creators_1 = require("./creators");
+const ReactSubView_1 = __importDefault(require("./ReactSubView"));
+var figurePositions;
+(function (figurePositions) {
+    figurePositions["left"] = "half-left";
+    figurePositions["right"] = "half-right";
+    figurePositions["default"] = "";
+})(figurePositions = exports.figurePositions || (exports.figurePositions = {}));
 class ImageElementView extends block_view_1.default {
     constructor() {
         super(...arguments);
         this.ignoreMutation = () => true;
+        this.createPositionMenuWrapper = () => {
+            const can = this.props.getCapabilities();
+            this.positionMenuWrapper = document.createElement('div');
+            this.positionMenuWrapper.classList.add('position-menu');
+            const positionMenuButton = document.createElement('div');
+            positionMenuButton.classList.add('position-menu-button');
+            const firstFigure = this.getFirstFigure();
+            this.figurePosition = firstFigure?.attrs.type || figurePositions.default;
+            let icon;
+            switch (this.figurePosition) {
+                case figurePositions.left:
+                    icon = icons_1.imageLeftIcon;
+                    break;
+                case figurePositions.right:
+                    icon = icons_1.imageRightIcon;
+                    break;
+                default:
+                    icon = icons_1.imageDefaultIcon;
+                    break;
+            }
+            if (icon) {
+                positionMenuButton.innerHTML = icon;
+            }
+            if (can.editArticle) {
+                positionMenuButton.addEventListener('click', this.showPositionMenu);
+            }
+            this.positionMenuWrapper.appendChild(positionMenuButton);
+            return this.positionMenuWrapper;
+        };
+        this.showPositionMenu = () => {
+            this.props.popper.destroy();
+            const componentProps = {
+                actions: [
+                    {
+                        label: 'Left',
+                        action: () => {
+                            this.props.popper.destroy();
+                            this.updateAllFiguresPosition(figurePositions.left);
+                        },
+                        icon: 'ImageLeft',
+                        selected: this.figurePosition === figurePositions.left,
+                    },
+                    {
+                        label: 'Default',
+                        action: () => {
+                            this.props.popper.destroy();
+                            this.updateAllFiguresPosition(figurePositions.default);
+                        },
+                        icon: 'ImageDefault',
+                        selected: !this.figurePosition,
+                    },
+                    {
+                        label: 'Right',
+                        action: () => {
+                            this.props.popper.destroy();
+                            this.updateAllFiguresPosition(figurePositions.right);
+                        },
+                        icon: 'ImageRight',
+                        selected: this.figurePosition === figurePositions.right,
+                    },
+                ],
+            };
+            this.props.popper.show(this.positionMenuWrapper, (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu', 'position-menu']), 'left', false);
+        };
     }
     createDOM() {
         super.createDOM();
@@ -39,6 +113,72 @@ class ImageElementView extends block_view_1.default {
         this.contentDOM.classList.add('figure-block');
         this.contentDOM.setAttribute('id', this.node.attrs.id);
         this.container.appendChild(this.contentDOM);
+        this.addTools();
+    }
+    updateContents() {
+        super.updateContents();
+        this.addTools();
+    }
+    addTools() {
+        this.addPositionMenu();
+    }
+    addPositionMenu() {
+        if (this.props.getCapabilities()?.editArticle) {
+            const existingMenu = this.container.querySelector('.position-menu');
+            if (existingMenu) {
+                existingMenu.remove();
+            }
+            this.container.prepend(this.createPositionMenuWrapper());
+        }
+    }
+    getFirstFigure() {
+        if (this.node.type === transform_1.schema.nodes.image_element) {
+            const figureNode = this.node.firstChild;
+            if (figureNode && figureNode.type === transform_1.schema.nodes.figure) {
+                return figureNode;
+            }
+            return null;
+        }
+        else {
+            let firstFigure = null;
+            this.node.forEach((node) => {
+                if (node.type === transform_1.schema.nodes.figure && !firstFigure) {
+                    firstFigure = node;
+                }
+            });
+            return firstFigure;
+        }
+    }
+    getAllFigures() {
+        const figures = [];
+        let pos = this.getPos() + 1;
+        if (this.node.type === transform_1.schema.nodes.image_element) {
+            const figureNode = this.node.firstChild;
+            if (figureNode && figureNode.type === transform_1.schema.nodes.figure) {
+                figures.push({ node: figureNode, pos });
+            }
+        }
+        else {
+            this.node.forEach((node) => {
+                if (node.type === transform_1.schema.nodes.figure) {
+                    figures.push({ node: node, pos });
+                }
+                pos += node.nodeSize;
+            });
+        }
+        return figures;
+    }
+    updateAllFiguresPosition(position) {
+        const figures = this.getAllFigures();
+        const { tr } = this.view.state;
+        figures.forEach(({ node, pos }) => {
+            tr.setNodeMarkup(pos, undefined, {
+                ...node.attrs,
+                type: position,
+            });
+        });
+        this.view.dispatch(tr);
+        this.figurePosition = position;
     }
 }
 exports.ImageElementView = ImageElementView;

package/dist/es/icons.js

@@ -1,4 +1,4 @@
-import { AlertIcon, ArrowDownCircleIcon, ArrowUpIcon, DeleteIcon, EditIcon, LockIcon, PlusIcon, ScrollIcon, SectionCategoryIcon, } from '@manuscripts/style-guide';
+import { AlertIcon, ArrowDownCircleIcon, ArrowUpIcon, DeleteIcon, 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));
@@ -12,3 +12,7 @@ export const scrollIcon = renderToStaticMarkup(createElement(ScrollIcon));
 export const lockIcon = renderToStaticMarkup(createElement(LockIcon));
 export const plusIcon = renderIcon(PlusIcon);
 export const addFigureBtnIcon = renderToStaticMarkup(createElement(PlusIcon));
+export const imageRightIcon = renderToStaticMarkup(createElement(ImageRightIcon));
+export const imageLeftIcon = renderToStaticMarkup(createElement(ImageLeftIcon));
+export const imageDefaultIcon = renderToStaticMarkup(createElement(ImageDefaultIcon));
+export const fileCorruptedIcon = renderToStaticMarkup(createElement(FileCorruptedIcon));

package/dist/es/lib/context-menu.js

@@ -19,7 +19,7 @@ import { findChildrenByType } from 'prosemirror-utils';
 import { createElement } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { addNodeComment, createBlock, findPosBeforeFirstSubsection, insertGeneralTableFootnote, insertInlineTableFootnote, isCommentingAllowed, } from '../commands';
-import { figurePositions } from '../views/figure_editable';
+import { figurePositions } from '../views/image_element';
 import { PopperManager } from './popper';
 import { getMatchingChild, isChildOfNodeTypes, isSelectionInNode, } from './utils';
 import { updateNodeAttrs } from './view';

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.2.20';
+export const VERSION = '3.2.23';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/figure_editable.js

@@ -13,25 +13,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ContextMenu, FileCorruptedIcon, ImageDefaultIcon, ImageLeftIcon, ImageRightIcon, } from '@manuscripts/style-guide';
 import { schema } from '@manuscripts/transform';
 import { NodeSelection } from 'prosemirror-state';
 import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
-import { createElement } from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
 import { FigureOptions, } from '../components/views/FigureDropdown';
+import { fileCorruptedIcon } from '../icons';
 import { isDeleted } from '../lib/track-changes-utils';
-import { updateNodeAttrs } from '../lib/view';
 import { createEditableNodeView } from './creators';
 import { FigureView } from './figure';
 import { figureUploader } from './figure_uploader';
 import ReactSubView from './ReactSubView';
-export var figurePositions;
-(function (figurePositions) {
-    figurePositions["left"] = "half-left";
-    figurePositions["right"] = "half-right";
-    figurePositions["default"] = "";
-})(figurePositions || (figurePositions = {}));
 export class FigureEditableView extends FigureView {
     constructor() {
         super(...arguments);
@@ -54,7 +45,7 @@ export class FigureEditableView extends FigureView {
             element.classList.add('figure', 'placeholder');
             const instructions = document.createElement('div');
             instructions.classList.add('instructions');
-            const iconHtml = renderToStaticMarkup(createElement(FileCorruptedIcon, { className: 'icon' }));
+            const iconHtml = fileCorruptedIcon;
             instructions.innerHTML = `
     <div>
       <div class="unsupported-icon-wrapper">${iconHtml}</div>
@@ -92,78 +83,6 @@ export class FigureEditableView extends FigureView {
             element.appendChild(instructions);
             return element;
         };
-        this.createPositionMenuWrapper = () => {
-            const can = this.props.getCapabilities();
-            this.positionMenuWrapper = document.createElement('div');
-            this.positionMenuWrapper.classList.add('position-menu');
-            const positionMenuButton = document.createElement('div');
-            positionMenuButton.classList.add('position-menu-button');
-            let icon;
-            switch (this.figurePosition) {
-                case figurePositions.left:
-                    icon = ImageLeftIcon;
-                    break;
-                case figurePositions.right:
-                    icon = ImageRightIcon;
-                    break;
-                default:
-                    icon = ImageDefaultIcon;
-                    break;
-            }
-            if (icon) {
-                positionMenuButton.innerHTML = renderToStaticMarkup(createElement(icon));
-            }
-            if (can.editArticle) {
-                positionMenuButton.addEventListener('click', this.showPositionMenu);
-            }
-            this.positionMenuWrapper.appendChild(positionMenuButton);
-            return this.positionMenuWrapper;
-        };
-        this.showPositionMenu = () => {
-            this.props.popper.destroy();
-            const figure = this.node;
-            const componentProps = {
-                actions: [
-                    {
-                        label: 'Left',
-                        action: () => {
-                            this.props.popper.destroy();
-                            updateNodeAttrs(this.view, schema.nodes.figure, {
-                                ...figure.attrs,
-                                type: figurePositions.left,
-                            });
-                        },
-                        icon: 'ImageLeft',
-                        selected: this.figurePosition === figurePositions.left,
-                    },
-                    {
-                        label: 'Default',
-                        action: () => {
-                            this.props.popper.destroy();
-                            updateNodeAttrs(this.view, schema.nodes.figure, {
-                                ...figure.attrs,
-                                type: figurePositions.default,
-                            });
-                        },
-                        icon: 'ImageDefault',
-                        selected: !this.figurePosition,
-                    },
-                    {
-                        label: 'Right',
-                        action: () => {
-                            this.props.popper.destroy();
-                            updateNodeAttrs(this.view, schema.nodes.figure, {
-                                ...figure.attrs,
-                                type: figurePositions.right,
-                            });
-                        },
-                        icon: 'ImageRight',
-                        selected: this.figurePosition === figurePositions.right,
-                    },
-                ],
-            };
-            this.props.popper.show(this.positionMenuWrapper, ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu', 'position-menu']), 'left', false);
-        };
     }
     initialise() {
         this.upload = this.upload.bind(this);
@@ -175,7 +94,6 @@ export class FigureEditableView extends FigureView {
         const src = this.node.attrs.src;
         const files = this.props.getFiles();
         const file = src && files.filter((f) => f.id === src)[0];
-        this.figurePosition = this.node.attrs.type;
         this.container.innerHTML = '';
         const can = this.props.getCapabilities();
         const link = file && this.props.fileManagement.previewLink(file);
@@ -230,7 +148,6 @@ export class FigureEditableView extends FigureView {
     }
     addTools() {
         this.manageReactTools();
-        this.container.appendChild(this.createPositionMenuWrapper());
     }
     manageReactTools() {
         let handleDownload;

package/dist/es/views/figure_element.js

@@ -21,6 +21,7 @@ export class FigureElementView extends ImageElementView {
     constructor() {
         super(...arguments);
         this.ignoreMutation = () => true;
+        this.resizeObserver = null;
         this.createElement = () => {
             super.createElement();
             this.addFigureElementButtons();
@@ -45,16 +46,65 @@ export class FigureElementView extends ImageElementView {
             this.view.dispatch(tr);
         };
     }
+    initialise() {
+        super.initialise();
+        requestAnimationFrame(() => this.updateButtonPosition());
+        this.setupResizeObserver();
+    }
+    setupResizeObserver() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+        this.resizeObserver = new ResizeObserver(() => {
+            requestAnimationFrame(() => this.updateButtonPosition());
+        });
+        this.container.querySelectorAll('figure').forEach((figure) => {
+            this.resizeObserver?.observe(figure);
+        });
+    }
     addFigureElementButtons() {
         if (this.props.getCapabilities()?.editArticle) {
-            const addFigureBtn = Object.assign(document.createElement('button'), {
+            this.addFigureBtn = Object.assign(document.createElement('button'), {
                 className: 'add-figure-button',
                 innerHTML: addFigureBtnIcon,
                 title: 'Add figure',
             });
-            addFigureBtn.addEventListener('click', () => this.addFigure());
-            this.container.prepend(addFigureBtn);
+            this.addFigureBtn.addEventListener('click', () => this.addFigure());
+            this.container.prepend(this.addFigureBtn);
+        }
+    }
+    updateButtonPosition() {
+        if (!this.addFigureBtn) {
+            return;
+        }
+        const figures = this.container.querySelectorAll('figure');
+        const lastFigure = figures[figures.length - 1];
+        if (!lastFigure) {
+            return;
+        }
+        const lastFigureRect = lastFigure.getBoundingClientRect();
+        const containerRect = this.container.getBoundingClientRect();
+        const relativeTop = lastFigureRect.bottom - containerRect.top + 20;
+        this.addFigureBtn.style.top = `${relativeTop}px`;
+    }
+    update(node) {
+        const handledBySuper = super.update(node);
+        if (handledBySuper) {
+            this.setupResizeObserver();
+            requestAnimationFrame(() => this.updateButtonPosition());
+        }
+        return handledBySuper;
+    }
+    updateContents() {
+        super.updateContents();
+        requestAnimationFrame(() => this.updateButtonPosition());
+    }
+    destroy() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
         }
+        super.destroy();
     }
 }
 export default createNodeView(FigureElementView);

package/dist/es/views/image_element.js

@@ -13,12 +13,86 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { ContextMenu } from '@manuscripts/style-guide';
+import { schema } from '@manuscripts/transform';
+import { imageDefaultIcon, imageLeftIcon, imageRightIcon } from '../icons';
 import BlockView from './block_view';
 import { createNodeView } from './creators';
+import ReactSubView from './ReactSubView';
+export var figurePositions;
+(function (figurePositions) {
+    figurePositions["left"] = "half-left";
+    figurePositions["right"] = "half-right";
+    figurePositions["default"] = "";
+})(figurePositions || (figurePositions = {}));
 export class ImageElementView extends BlockView {
     constructor() {
         super(...arguments);
         this.ignoreMutation = () => true;
+        this.createPositionMenuWrapper = () => {
+            const can = this.props.getCapabilities();
+            this.positionMenuWrapper = document.createElement('div');
+            this.positionMenuWrapper.classList.add('position-menu');
+            const positionMenuButton = document.createElement('div');
+            positionMenuButton.classList.add('position-menu-button');
+            const firstFigure = this.getFirstFigure();
+            this.figurePosition = firstFigure?.attrs.type || figurePositions.default;
+            let icon;
+            switch (this.figurePosition) {
+                case figurePositions.left:
+                    icon = imageLeftIcon;
+                    break;
+                case figurePositions.right:
+                    icon = imageRightIcon;
+                    break;
+                default:
+                    icon = imageDefaultIcon;
+                    break;
+            }
+            if (icon) {
+                positionMenuButton.innerHTML = icon;
+            }
+            if (can.editArticle) {
+                positionMenuButton.addEventListener('click', this.showPositionMenu);
+            }
+            this.positionMenuWrapper.appendChild(positionMenuButton);
+            return this.positionMenuWrapper;
+        };
+        this.showPositionMenu = () => {
+            this.props.popper.destroy();
+            const componentProps = {
+                actions: [
+                    {
+                        label: 'Left',
+                        action: () => {
+                            this.props.popper.destroy();
+                            this.updateAllFiguresPosition(figurePositions.left);
+                        },
+                        icon: 'ImageLeft',
+                        selected: this.figurePosition === figurePositions.left,
+                    },
+                    {
+                        label: 'Default',
+                        action: () => {
+                            this.props.popper.destroy();
+                            this.updateAllFiguresPosition(figurePositions.default);
+                        },
+                        icon: 'ImageDefault',
+                        selected: !this.figurePosition,
+                    },
+                    {
+                        label: 'Right',
+                        action: () => {
+                            this.props.popper.destroy();
+                            this.updateAllFiguresPosition(figurePositions.right);
+                        },
+                        icon: 'ImageRight',
+                        selected: this.figurePosition === figurePositions.right,
+                    },
+                ],
+            };
+            this.props.popper.show(this.positionMenuWrapper, ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu', 'position-menu']), 'left', false);
+        };
     }
     createDOM() {
         super.createDOM();
@@ -33,6 +107,72 @@ export class ImageElementView extends BlockView {
         this.contentDOM.classList.add('figure-block');
         this.contentDOM.setAttribute('id', this.node.attrs.id);
         this.container.appendChild(this.contentDOM);
+        this.addTools();
+    }
+    updateContents() {
+        super.updateContents();
+        this.addTools();
+    }
+    addTools() {
+        this.addPositionMenu();
+    }
+    addPositionMenu() {
+        if (this.props.getCapabilities()?.editArticle) {
+            const existingMenu = this.container.querySelector('.position-menu');
+            if (existingMenu) {
+                existingMenu.remove();
+            }
+            this.container.prepend(this.createPositionMenuWrapper());
+        }
+    }
+    getFirstFigure() {
+        if (this.node.type === schema.nodes.image_element) {
+            const figureNode = this.node.firstChild;
+            if (figureNode && figureNode.type === schema.nodes.figure) {
+                return figureNode;
+            }
+            return null;
+        }
+        else {
+            let firstFigure = null;
+            this.node.forEach((node) => {
+                if (node.type === schema.nodes.figure && !firstFigure) {
+                    firstFigure = node;
+                }
+            });
+            return firstFigure;
+        }
+    }
+    getAllFigures() {
+        const figures = [];
+        let pos = this.getPos() + 1;
+        if (this.node.type === schema.nodes.image_element) {
+            const figureNode = this.node.firstChild;
+            if (figureNode && figureNode.type === schema.nodes.figure) {
+                figures.push({ node: figureNode, pos });
+            }
+        }
+        else {
+            this.node.forEach((node) => {
+                if (node.type === schema.nodes.figure) {
+                    figures.push({ node: node, pos });
+                }
+                pos += node.nodeSize;
+            });
+        }
+        return figures;
+    }
+    updateAllFiguresPosition(position) {
+        const figures = this.getAllFigures();
+        const { tr } = this.view.state;
+        figures.forEach(({ node, pos }) => {
+            tr.setNodeMarkup(pos, undefined, {
+                ...node.attrs,
+                type: position,
+            });
+        });
+        this.view.dispatch(tr);
+        this.figurePosition = position;
     }
 }
 export default createNodeView(ImageElementView);

package/dist/types/icons.d.ts

@@ -8,3 +8,7 @@ export declare const scrollIcon: string;
 export declare const lockIcon: string;
 export declare const plusIcon: string;
 export declare const addFigureBtnIcon: string;
+export declare const imageRightIcon: string;
+export declare const imageLeftIcon: string;
+export declare const imageDefaultIcon: string;
+export declare const fileCorruptedIcon: string;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.2.20";
+export declare const VERSION = "3.2.23";
 export declare const MATHJAX_VERSION = "3.2.2";

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

@@ -14,15 +14,8 @@
  * limitations under the License.
  */
 import { FigureView } from './figure';
-export declare enum figurePositions {
-    left = "half-left",
-    right = "half-right",
-    default = ""
-}
 export declare class FigureEditableView extends FigureView {
     reactTools: HTMLDivElement;
-    positionMenuWrapper: HTMLDivElement;
-    figurePosition: string;
     initialise(): void;
     upload: (file: File) => Promise<void>;
     updateContents(): void;
@@ -32,8 +25,6 @@ export declare class FigureEditableView extends FigureView {
     private createUnsupportedFormat;
     protected createImg: (src: string) => HTMLImageElement;
     protected createPlaceholder: () => HTMLDivElement;
-    createPositionMenuWrapper: () => HTMLDivElement;
-    showPositionMenu: () => void;
 }
 declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<FigureEditableView>;
 export default _default;

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

@@ -13,12 +13,21 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { Node } from 'prosemirror-model';
 import { ImageElementView } from './image_element';
 export declare class FigureElementView extends ImageElementView {
     ignoreMutation: () => boolean;
+    private addFigureBtn;
+    private resizeObserver;
     createElement: () => void;
+    initialise(): void;
+    private setupResizeObserver;
     private addFigureElementButtons;
+    private updateButtonPosition;
+    update(node: Node): boolean;
+    updateContents(): void;
     private addFigure;
+    destroy(): void;
 }
 declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<FigureElementView>;
 export default _default;

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

@@ -16,11 +16,26 @@
 import { FigureElementNode } from '@manuscripts/transform';
 import { Trackable } from '../types';
 import BlockView from './block_view';
+export declare enum figurePositions {
+    left = "half-left",
+    right = "half-right",
+    default = ""
+}
 export declare class ImageElementView extends BlockView<Trackable<FigureElementNode>> {
     container: HTMLElement;
+    private positionMenuWrapper;
+    private figurePosition;
     ignoreMutation: () => boolean;
     createDOM(): void;
     createElement(): void;
+    updateContents(): void;
+    protected addTools(): void;
+    protected addPositionMenu(): void;
+    private createPositionMenuWrapper;
+    private getFirstFigure;
+    private getAllFigures;
+    private showPositionMenu;
+    private updateAllFiguresPosition;
 }
 declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<ImageElementView>;
 export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "3.2.20",
+  "version": "3.2.23",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -40,7 +40,7 @@
     "@manuscripts/json-schema": "2.2.12",
     "@manuscripts/style-guide": "3.1.5",
     "@manuscripts/track-changes-plugin": "2.0.3",
-    "@manuscripts/transform": "4.2.4",
+    "@manuscripts/transform": "4.2.6",
     "@popperjs/core": "2.11.8",
     "citeproc": "2.4.63",
     "codemirror": "5.65.19",

package/styles/AdvancedEditor.css

@@ -169,7 +169,6 @@
   width: 25px;
   z-index: 1;
   height: 25px;
-  bottom: 220px;
   cursor: pointer;
   position: absolute;
   border-radius: 50%;
@@ -324,10 +323,10 @@
   text-align: center !important;
 }
 
-.ProseMirror .figure-block .position-menu {
+.ProseMirror .block-figure_element .position-menu, .ProseMirror .block-image_element .position-menu {
   position: absolute;
-  top: 4px;
-  left: calc(100% - 96px);
+  top: 15px;
+  right: 35px;
   z-index: 2;
   cursor: pointer;
   padding-left: 100px;