@manuscripts/body-editor 3.2.3 → 3.2.5

package/dist/cjs/components/references/ReferenceForm/ReferenceForm.js

@@ -64,8 +64,15 @@ const ReferenceForm = ({ values, showDelete, onChange, onDelete, onCancel, onSav
     const [showDeleteDialog, setShowDeleteDialog] = (0, react_1.useState)(false);
     const validateReference = (values) => {
         const errors = {};
-        if (!values.title?.trim()) {
-            errors.title = 'Title is required';
+        if (values.type === 'literal') {
+            if (!values.literal?.trim()) {
+                errors.literal = 'Literal is required for unstructured references';
+            }
+        }
+        else {
+            if (!values.title?.trim()) {
+                errors.title = 'Title is required';
+            }
         }
         return errors;
     };
@@ -110,6 +117,10 @@ const ReferenceForm = ({ values, showDelete, onChange, onDelete, onCancel, onSav
                     react_1.default.createElement(styled_components_1.LabelContainer, null,
                         react_1.default.createElement(styled_components_1.Label, null, "Title")),
                     react_1.default.createElement(formik_1.Field, { name: 'title' }, (props) => (react_1.default.createElement(styled_components_1.ReferenceTextArea, { id: 'title', ...props.field }))))),
+                (0, utils_1.shouldRenderField)('literal', formik.values.type) && (react_1.default.createElement(styled_components_1.FormField, null,
+                    react_1.default.createElement(styled_components_1.LabelContainer, null,
+                        react_1.default.createElement(styled_components_1.Label, null, "Text")),
+                    react_1.default.createElement(formik_1.Field, { name: 'literal' }, (props) => (react_1.default.createElement(styled_components_1.ReferenceTextArea, { id: 'literal', ...props.field }))))),
                 (0, utils_1.shouldRenderField)('std', formik.values.type) && (react_1.default.createElement(styled_components_1.FormField, null,
                     react_1.default.createElement(styled_components_1.LabelContainer, null,
                         react_1.default.createElement(styled_components_1.Label, { htmlFor: 'std' }, "Standard")),

package/dist/cjs/components/references/ReferenceLine.js

@@ -32,6 +32,6 @@ exports.MetadataContainer = styled_components_1.default.div `
   flex: 1;
 `;
 const ReferenceLine = ({ item }) => (react_1.default.createElement(exports.MetadataContainer, null,
-    react_1.default.createElement("div", { "data-cy": 'reference-title' }, item.title || 'Untitled'),
+    react_1.default.createElement("div", { "data-cy": 'reference-title' }, item.title || item.literal || 'Untitled'),
     react_1.default.createElement(exports.Metadata, null, (0, references_1.metadata)(item))));
 exports.ReferenceLine = ReferenceLine;

package/dist/cjs/components/views/FigureDropdown.js

@@ -7,33 +7,41 @@ exports.FigureOptions = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const FigureOptions = ({ can, files, onDownload, onUpload, onDetach, onReplace, }) => {
-    const { isOpen, toggleOpen, wrapperRef } = (0, style_guide_1.useDropdown)();
-    const supplements = files.supplements
-        .map((s) => s.file)
+const files_1 = require("../../lib/files");
+function getSupplements(getFiles, getDoc, groupFiles) {
+    return groupFiles(getDoc(), getFiles())
+        .supplements.map((s) => s.file)
         .filter((f) => (0, style_guide_1.isImageFile)(f.name));
-    const otherFiles = files.others.filter((f) => (0, style_guide_1.isImageFile)(f.name));
+}
+function getOtherFiles(getFiles, getDoc, groupFiles) {
+    return groupFiles(getDoc(), getFiles()).others.filter((f) => (0, style_guide_1.isImageFile)(f.name));
+}
+const FigureOptions = ({ can, getDoc, getFiles, onDownload, onUpload, onDetach, onReplace, onDelete, }) => {
+    const { isOpen, toggleOpen, wrapperRef } = (0, style_guide_1.useDropdown)();
     const showDownload = onDownload && can.downloadFiles;
     const showUpload = onUpload && can.uploadFile;
     const showDetach = onDetach && can.detachFile;
     const showReplace = onReplace && can.replaceFile;
     const replaceBtnText = onDownload ? 'Replace' : 'Choose file';
+    const showDelete = onDelete && can.detachFile;
+    const groupFiles = (0, files_1.memoGroupFiles)();
     return (react_1.default.createElement(DropdownWrapper, { ref: wrapperRef },
         react_1.default.createElement(OptionsButton, { className: 'options-button', onClick: toggleOpen },
             react_1.default.createElement(style_guide_1.DotsIcon, null)),
         isOpen && (react_1.default.createElement(OptionsDropdownList, { direction: 'right', width: 128, top: 5 },
             react_1.default.createElement(NestedDropdown, { disabled: !showReplace, parentToggleOpen: toggleOpen, buttonText: replaceBtnText, moveLeft: true, list: react_1.default.createElement(react_1.default.Fragment, null,
-                    supplements.map((file, index) => (react_1.default.createElement(ListItemButton, { key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file) },
+                    getSupplements(getFiles, getDoc, groupFiles).map((file, index) => (react_1.default.createElement(ListItemButton, { key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file) },
                         (0, style_guide_1.getFileIcon)(file.name),
                         react_1.default.createElement(ListItemText, null, file.name)))),
-                    otherFiles.map((file, index) => (react_1.default.createElement(ListItemButton, { key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file) },
+                    getOtherFiles(getFiles, getDoc, groupFiles).map((file, index) => (react_1.default.createElement(ListItemButton, { key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file) },
                         (0, style_guide_1.getFileIcon)(file.name),
                         react_1.default.createElement(ListItemText, null, file.name)))),
                     react_1.default.createElement(UploadButton, { onClick: onUpload, disabled: !showUpload },
                         react_1.default.createElement(style_guide_1.UploadIcon, null),
                         " Upload new...")) }),
             react_1.default.createElement(ListItemButton, { onClick: onDownload, disabled: !showDownload }, "Download"),
-            react_1.default.createElement(ListItemButton, { onClick: onDetach, disabled: !showDetach }, "Detach")))));
+            react_1.default.createElement(ListItemButton, { onClick: onDetach, disabled: !showDetach }, "Detach"),
+            showDelete && (react_1.default.createElement(ListItemButton, { onClick: onDelete }, "Delete"))))));
 };
 exports.FigureOptions = FigureOptions;
 const NestedDropdown = ({ parentToggleOpen, buttonText, disabled, list, moveLeft }) => {

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

@@ -26,6 +26,7 @@ const footnote_1 = __importDefault(require("../views/footnote"));
 const footnotes_element_1 = __importDefault(require("../views/footnotes_element"));
 const general_table_footnote_1 = __importDefault(require("../views/general_table_footnote"));
 const hero_image_editable_1 = __importDefault(require("../views/hero_image_editable"));
+const image_element_editable_1 = __importDefault(require("../views/image_element_editable"));
 const inline_equation_editable_1 = __importDefault(require("../views/inline_equation_editable"));
 const inline_footnote_editable_1 = __importDefault(require("../views/inline_footnote_editable"));
 const keyword_1 = __importDefault(require("../views/keyword"));
@@ -65,7 +66,7 @@ exports.default = (props, dispatch) => {
         equation_element: (0, equation_element_editable_1.default)(props),
         figure: (0, figure_editable_1.default)(props, dispatch),
         figure_element: (0, figure_element_editable_1.default)(props, dispatch),
-        image_element: (0, figure_element_editable_1.default)(props, dispatch),
+        image_element: (0, image_element_editable_1.default)(props, dispatch),
         footnote: (0, footnote_1.default)(props),
         footnotes_element: (0, footnotes_element_1.default)(props),
         general_table_footnote: (0, general_table_footnote_1.default)(props, dispatch),

package/dist/cjs/icons.js

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

package/dist/cjs/lib/files.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.groupFiles = void 0;
+exports.groupFiles = exports.memoGroupFiles = void 0;
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_utils_1 = require("prosemirror-utils");
 const track_changes_utils_1 = require("./track-changes-utils");
@@ -13,6 +13,20 @@ const figureTypes = [
     transform_1.schema.nodes.image_element,
     transform_1.schema.nodes.hero_image,
 ];
+function memoGroupFiles() {
+    let prevFiles = [];
+    let prevDoc = undefined;
+    let result;
+    return function (doc, files) {
+        if (result && prevDoc === doc && prevFiles === files) {
+            return result;
+        }
+        prevDoc = doc;
+        prevFiles = files;
+        return (0, exports.groupFiles)(doc, files);
+    };
+}
+exports.memoGroupFiles = memoGroupFiles;
 const groupFiles = (doc, files) => {
     const fileMap = new Map(files.map((f) => [f.id, f]));
     const figures = [];

package/dist/cjs/lib/references.js

@@ -88,5 +88,5 @@ exports.bibliographyItemTypes = [
     ['standard', 'Standard'],
     ['dataset', 'Dataset'],
     ['preprint', 'Preprint'],
-    ['literal', 'Literal'],
+    ['literal', 'Unstructured'],
 ];

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

package/dist/cjs/views/bibliography_element.js

@@ -174,8 +174,28 @@ class BibliographyElementBlockView extends block_view_1.default {
         for (let i = 0; i < bibliography.length; i++) {
             const id = meta.entry_ids[i][0];
             const fragment = bibliography[i];
-            const element = (0, dompurify_1.sanitize)(`<div id="${id}" class="bib-item"><div class="csl-bib-body">${fragment}</div></div>`).firstElementChild;
             const node = nodes.get(id);
+            const isUnstructured = node.attrs.type === 'literal';
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = fragment;
+            if (isUnstructured) {
+                const cslLeftMarginDiv = tempDiv.querySelector('.csl-left-margin');
+                let cslRightInlineDiv = tempDiv.querySelector('.csl-right-inline');
+                const cslEntry = tempDiv.querySelector('.csl-entry');
+                if (cslRightInlineDiv) {
+                    cslRightInlineDiv.textContent = node.attrs.literal ?? '';
+                }
+                else if (cslLeftMarginDiv) {
+                    cslRightInlineDiv = document.createElement('div');
+                    cslRightInlineDiv.classList.add('csl-right-inline');
+                    cslRightInlineDiv.textContent = node.attrs.literal ?? '';
+                    cslLeftMarginDiv.after(cslRightInlineDiv);
+                }
+                else if (cslEntry) {
+                    cslEntry.textContent = node.attrs.literal ?? '';
+                }
+            }
+            const element = (0, dompurify_1.sanitize)(`<div id="${id}" class="bib-item"><div class="csl-bib-body">${tempDiv.innerHTML}</div></div>`).firstElementChild;
             const comment = (0, comments_1.createCommentMarker)('div', id);
             element.prepend(comment);
             (0, track_changes_utils_1.addTrackChangesAttributes)(node.attrs, element);

package/dist/cjs/views/citation.js

@@ -41,7 +41,11 @@ class CitationView extends base_node_view_1.BaseNodeView {
         }
         const id = this.node.attrs.id;
         const text = bib.renderedCitations.get(id);
-        const fragment = (0, dompurify_1.sanitize)(text && text !== '[NO_PRINTED_FORM]' ? text : ' ', {
+        const fragment = (0, dompurify_1.sanitize)(text === '(n.d.)'
+            ? 'Missing citation data'
+            : text && text !== '[NO_PRINTED_FORM]'
+                ? text
+                : ' ', {
             ALLOWED_TAGS: ['i', 'b', 'span', 'sup', 'sub', '#text'],
         });
         this.dom.innerHTML = '';

package/dist/cjs/views/figure_editable.js

@@ -22,10 +22,10 @@ exports.FigureEditableView = exports.figurePositions = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 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 files_1 = require("../lib/files");
 const track_changes_utils_1 = require("../lib/track-changes-utils");
 const view_1 = require("../lib/view");
 const creators_1 = require("./creators");
@@ -243,6 +243,7 @@ class FigureEditableView extends figure_1.FigureView {
         let handleUpload;
         let handleReplace;
         let handleDetach;
+        let handleDelete;
         const src = this.node.attrs.src;
         const files = this.props.getFiles();
         const file = src && files.filter((f) => f.id === src)[0];
@@ -265,17 +266,43 @@ class FigureEditableView extends figure_1.FigureView {
         if (can.uploadFile) {
             handleUpload = (0, figure_uploader_1.figureUploader)(this.upload);
         }
+        if (can.detachFile) {
+            const countFigures = () => {
+                const element = (0, prosemirror_utils_1.findParentNodeOfTypeClosestToPos)(this.view.state.doc.resolve(this.getPos()), transform_1.schema.nodes.figure_element);
+                let count = 0;
+                element?.node.descendants((node) => {
+                    if (node.type === transform_1.schema.nodes.figure && !(0, track_changes_utils_1.isDeleted)(node)) {
+                        count++;
+                    }
+                });
+                return count;
+            };
+            const figureCount = countFigures();
+            handleDelete =
+                figureCount > 1
+                    ? () => {
+                        const currentCount = countFigures();
+                        const pos = this.getPos();
+                        if (currentCount <= 1) {
+                            return;
+                        }
+                        const tr = this.view.state.tr;
+                        tr.delete(pos, pos + this.node.nodeSize);
+                        this.view.dispatch(tr);
+                    }
+                    : undefined;
+        }
         this.reactTools?.remove();
         if (this.props.dispatch && this.props.theme) {
-            const files = this.props.getFiles();
-            const doc = this.view.state.doc;
             const componentProps = {
                 can,
-                files: (0, files_1.groupFiles)(doc, files),
+                getDoc: () => this.view.state.doc,
+                getFiles: this.props.getFiles,
                 onDownload: handleDownload,
                 onUpload: handleUpload,
                 onDetach: handleDetach,
                 onReplace: handleReplace,
+                onDelete: handleDelete,
             };
             this.reactTools = (0, ReactSubView_1.default)(this.props, FigureDropdown_1.FigureOptions, componentProps, this.node, this.getPos, this.view);
             this.dom.insertBefore(this.reactTools, this.dom.firstChild);

package/dist/cjs/views/figure_element.js

@@ -14,26 +14,50 @@
  * 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.FigureElementView = void 0;
-const block_view_1 = __importDefault(require("./block_view"));
+const transform_1 = require("@manuscripts/transform");
+const icons_1 = require("../icons");
 const creators_1 = require("./creators");
-class FigureElementView extends block_view_1.default {
+const image_element_1 = require("./image_element");
+class FigureElementView extends image_element_1.ImageElementView {
     constructor() {
         super(...arguments);
         this.ignoreMutation = () => true;
         this.createElement = () => {
-            this.container = document.createElement('div');
-            this.container.classList.add('block');
-            this.dom.appendChild(this.container);
-            this.contentDOM = document.createElement('figure');
-            this.contentDOM.classList.add('figure-block');
-            this.contentDOM.setAttribute('id', this.node.attrs.id);
-            this.container.appendChild(this.contentDOM);
+            super.createElement();
+            this.addFigureElementButtons();
         };
+        this.addFigure = () => {
+            const { state } = this.view;
+            const { tr } = state;
+            const figureElementPos = this.getPos();
+            let insertPos = figureElementPos + 1;
+            let lastFigureEndPos = insertPos;
+            let hasFigures = false;
+            this.node.forEach((node) => {
+                if (node.type === transform_1.schema.nodes.figure) {
+                    lastFigureEndPos = insertPos + node.nodeSize;
+                    hasFigures = true;
+                }
+                insertPos += node.nodeSize;
+            });
+            const finalInsertPos = hasFigures ? lastFigureEndPos : figureElementPos + 1;
+            const figureNode = state.schema.nodes.figure.create();
+            tr.insert(finalInsertPos, figureNode);
+            this.view.dispatch(tr);
+        };
+    }
+    addFigureElementButtons() {
+        if (this.props.getCapabilities()?.editArticle) {
+            const 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);
+        }
     }
 }
 exports.FigureElementView = FigureElementView;

package/dist/cjs/views/image_element.js

@@ -0,0 +1,40 @@
+"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.ImageElementView = void 0;
+const block_view_1 = __importDefault(require("./block_view"));
+const creators_1 = require("./creators");
+class ImageElementView extends block_view_1.default {
+    constructor() {
+        super(...arguments);
+        this.ignoreMutation = () => true;
+    }
+    createElement() {
+        this.container = document.createElement('div');
+        this.container.classList.add('block');
+        this.dom.appendChild(this.container);
+        this.contentDOM = document.createElement('figure');
+        this.contentDOM.classList.add('figure-block');
+        this.contentDOM.setAttribute('id', this.node.attrs.id);
+        this.container.appendChild(this.contentDOM);
+    }
+}
+exports.ImageElementView = ImageElementView;
+exports.default = (0, creators_1.createNodeView)(ImageElementView);

package/dist/cjs/views/image_element_editable.js

@@ -0,0 +1,21 @@
+"use strict";
+/*!
+ * © 2019 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 image_element_1 = require("./image_element");
+exports.default = (0, creators_1.createEditableNodeView)((0, editable_block_1.EditableBlock)(image_element_1.ImageElementView));

package/dist/es/components/references/ReferenceForm/ReferenceForm.js

@@ -38,8 +38,15 @@ export const ReferenceForm = ({ values, showDelete, onChange, onDelete, onCancel
     const [showDeleteDialog, setShowDeleteDialog] = useState(false);
     const validateReference = (values) => {
         const errors = {};
-        if (!values.title?.trim()) {
-            errors.title = 'Title is required';
+        if (values.type === 'literal') {
+            if (!values.literal?.trim()) {
+                errors.literal = 'Literal is required for unstructured references';
+            }
+        }
+        else {
+            if (!values.title?.trim()) {
+                errors.title = 'Title is required';
+            }
         }
         return errors;
     };
@@ -84,6 +91,10 @@ export const ReferenceForm = ({ values, showDelete, onChange, onDelete, onCancel
                     React.createElement(LabelContainer, null,
                         React.createElement(Label, null, "Title")),
                     React.createElement(Field, { name: 'title' }, (props) => (React.createElement(ReferenceTextArea, { id: 'title', ...props.field }))))),
+                shouldRenderField('literal', formik.values.type) && (React.createElement(FormField, null,
+                    React.createElement(LabelContainer, null,
+                        React.createElement(Label, null, "Text")),
+                    React.createElement(Field, { name: 'literal' }, (props) => (React.createElement(ReferenceTextArea, { id: 'literal', ...props.field }))))),
                 shouldRenderField('std', formik.values.type) && (React.createElement(FormField, null,
                     React.createElement(LabelContainer, null,
                         React.createElement(Label, { htmlFor: 'std' }, "Standard")),

package/dist/es/components/references/ReferenceLine.js

@@ -26,5 +26,5 @@ export const MetadataContainer = styled.div `
   flex: 1;
 `;
 export const ReferenceLine = ({ item }) => (React.createElement(MetadataContainer, null,
-    React.createElement("div", { "data-cy": 'reference-title' }, item.title || 'Untitled'),
+    React.createElement("div", { "data-cy": 'reference-title' }, item.title || item.literal || 'Untitled'),
     React.createElement(Metadata, null, metadata(item))));

package/dist/es/components/views/FigureDropdown.js

@@ -1,33 +1,41 @@
 import { DotsIcon, DropdownList, getFileIcon, IconButton, IconTextButton, isImageFile, TriangleCollapsedIcon, UploadIcon, useDropdown, } from '@manuscripts/style-guide';
 import React from 'react';
 import styled from 'styled-components';
-export const FigureOptions = ({ can, files, onDownload, onUpload, onDetach, onReplace, }) => {
-    const { isOpen, toggleOpen, wrapperRef } = useDropdown();
-    const supplements = files.supplements
-        .map((s) => s.file)
+import { memoGroupFiles, } from '../../lib/files';
+function getSupplements(getFiles, getDoc, groupFiles) {
+    return groupFiles(getDoc(), getFiles())
+        .supplements.map((s) => s.file)
         .filter((f) => isImageFile(f.name));
-    const otherFiles = files.others.filter((f) => isImageFile(f.name));
+}
+function getOtherFiles(getFiles, getDoc, groupFiles) {
+    return groupFiles(getDoc(), getFiles()).others.filter((f) => isImageFile(f.name));
+}
+export const FigureOptions = ({ can, getDoc, getFiles, onDownload, onUpload, onDetach, onReplace, onDelete, }) => {
+    const { isOpen, toggleOpen, wrapperRef } = useDropdown();
     const showDownload = onDownload && can.downloadFiles;
     const showUpload = onUpload && can.uploadFile;
     const showDetach = onDetach && can.detachFile;
     const showReplace = onReplace && can.replaceFile;
     const replaceBtnText = onDownload ? 'Replace' : 'Choose file';
+    const showDelete = onDelete && can.detachFile;
+    const groupFiles = memoGroupFiles();
     return (React.createElement(DropdownWrapper, { ref: wrapperRef },
         React.createElement(OptionsButton, { className: 'options-button', onClick: toggleOpen },
             React.createElement(DotsIcon, null)),
         isOpen && (React.createElement(OptionsDropdownList, { direction: 'right', width: 128, top: 5 },
             React.createElement(NestedDropdown, { disabled: !showReplace, parentToggleOpen: toggleOpen, buttonText: replaceBtnText, moveLeft: true, list: React.createElement(React.Fragment, null,
-                    supplements.map((file, index) => (React.createElement(ListItemButton, { key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file) },
+                    getSupplements(getFiles, getDoc, groupFiles).map((file, index) => (React.createElement(ListItemButton, { key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file) },
                         getFileIcon(file.name),
                         React.createElement(ListItemText, null, file.name)))),
-                    otherFiles.map((file, index) => (React.createElement(ListItemButton, { key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file) },
+                    getOtherFiles(getFiles, getDoc, groupFiles).map((file, index) => (React.createElement(ListItemButton, { key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file) },
                         getFileIcon(file.name),
                         React.createElement(ListItemText, null, file.name)))),
                     React.createElement(UploadButton, { onClick: onUpload, disabled: !showUpload },
                         React.createElement(UploadIcon, null),
                         " Upload new...")) }),
             React.createElement(ListItemButton, { onClick: onDownload, disabled: !showDownload }, "Download"),
-            React.createElement(ListItemButton, { onClick: onDetach, disabled: !showDetach }, "Detach")))));
+            React.createElement(ListItemButton, { onClick: onDetach, disabled: !showDetach }, "Detach"),
+            showDelete && (React.createElement(ListItemButton, { onClick: onDelete }, "Delete"))))));
 };
 const NestedDropdown = ({ parentToggleOpen, buttonText, disabled, list, moveLeft }) => {
     const { isOpen, toggleOpen, wrapperRef } = useDropdown();

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

@@ -21,6 +21,7 @@ import footnote from '../views/footnote';
 import footnotesElement from '../views/footnotes_element';
 import generalTableFootnote from '../views/general_table_footnote';
 import heroImage from '../views/hero_image_editable';
+import imageElement from '../views/image_element_editable';
 import inlineEquation from '../views/inline_equation_editable';
 import inlineFootnote from '../views/inline_footnote_editable';
 import keyword from '../views/keyword';
@@ -60,7 +61,7 @@ export default (props, dispatch) => {
         equation_element: equationElement(props),
         figure: figure(props, dispatch),
         figure_element: figureElement(props, dispatch),
-        image_element: figureElement(props, dispatch),
+        image_element: imageElement(props, dispatch),
         footnote: footnote(props),
         footnotes_element: footnotesElement(props),
         general_table_footnote: generalTableFootnote(props, dispatch),

package/dist/es/icons.js

@@ -11,3 +11,4 @@ export const sectionCategoryIcon = renderIcon(SectionCategoryIcon);
 export const scrollIcon = renderToStaticMarkup(createElement(ScrollIcon));
 export const lockIcon = renderToStaticMarkup(createElement(LockIcon));
 export const plusIcon = renderIcon(PlusIcon);
+export const addFigureBtnIcon = renderToStaticMarkup(createElement(PlusIcon));

package/dist/es/lib/files.js

@@ -10,6 +10,19 @@ const figureTypes = [
     schema.nodes.image_element,
     schema.nodes.hero_image,
 ];
+export function memoGroupFiles() {
+    let prevFiles = [];
+    let prevDoc = undefined;
+    let result;
+    return function (doc, files) {
+        if (result && prevDoc === doc && prevFiles === files) {
+            return result;
+        }
+        prevDoc = doc;
+        prevFiles = files;
+        return groupFiles(doc, files);
+    };
+}
 export const groupFiles = (doc, files) => {
     const fileMap = new Map(files.map((f) => [f.id, f]));
     const figures = [];

package/dist/es/lib/references.js

@@ -58,5 +58,5 @@ export const bibliographyItemTypes = [
     ['standard', 'Standard'],
     ['dataset', 'Dataset'],
     ['preprint', 'Preprint'],
-    ['literal', 'Literal'],
+    ['literal', 'Unstructured'],
 ];

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.2.3';
+export const VERSION = '3.2.5';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/bibliography_element.js

@@ -168,8 +168,28 @@ export class BibliographyElementBlockView extends BlockView {
         for (let i = 0; i < bibliography.length; i++) {
             const id = meta.entry_ids[i][0];
             const fragment = bibliography[i];
-            const element = sanitize(`<div id="${id}" class="bib-item"><div class="csl-bib-body">${fragment}</div></div>`).firstElementChild;
             const node = nodes.get(id);
+            const isUnstructured = node.attrs.type === 'literal';
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = fragment;
+            if (isUnstructured) {
+                const cslLeftMarginDiv = tempDiv.querySelector('.csl-left-margin');
+                let cslRightInlineDiv = tempDiv.querySelector('.csl-right-inline');
+                const cslEntry = tempDiv.querySelector('.csl-entry');
+                if (cslRightInlineDiv) {
+                    cslRightInlineDiv.textContent = node.attrs.literal ?? '';
+                }
+                else if (cslLeftMarginDiv) {
+                    cslRightInlineDiv = document.createElement('div');
+                    cslRightInlineDiv.classList.add('csl-right-inline');
+                    cslRightInlineDiv.textContent = node.attrs.literal ?? '';
+                    cslLeftMarginDiv.after(cslRightInlineDiv);
+                }
+                else if (cslEntry) {
+                    cslEntry.textContent = node.attrs.literal ?? '';
+                }
+            }
+            const element = sanitize(`<div id="${id}" class="bib-item"><div class="csl-bib-body">${tempDiv.innerHTML}</div></div>`).firstElementChild;
             const comment = createCommentMarker('div', id);
             element.prepend(comment);
             addTrackChangesAttributes(node.attrs, element);

package/dist/es/views/citation.js

@@ -38,7 +38,11 @@ export class CitationView extends BaseNodeView {
         }
         const id = this.node.attrs.id;
         const text = bib.renderedCitations.get(id);
-        const fragment = sanitize(text && text !== '[NO_PRINTED_FORM]' ? text : ' ', {
+        const fragment = sanitize(text === '(n.d.)'
+            ? 'Missing citation data'
+            : text && text !== '[NO_PRINTED_FORM]'
+                ? text
+                : ' ', {
             ALLOWED_TAGS: ['i', 'b', 'span', 'sup', 'sub', '#text'],
         });
         this.dom.innerHTML = '';

package/dist/es/views/figure_editable.js

@@ -16,10 +16,10 @@
 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 { groupFiles } from '../lib/files';
 import { isDeleted } from '../lib/track-changes-utils';
 import { updateNodeAttrs } from '../lib/view';
 import { createEditableNodeView } from './creators';
@@ -237,6 +237,7 @@ export class FigureEditableView extends FigureView {
         let handleUpload;
         let handleReplace;
         let handleDetach;
+        let handleDelete;
         const src = this.node.attrs.src;
         const files = this.props.getFiles();
         const file = src && files.filter((f) => f.id === src)[0];
@@ -259,17 +260,43 @@ export class FigureEditableView extends FigureView {
         if (can.uploadFile) {
             handleUpload = figureUploader(this.upload);
         }
+        if (can.detachFile) {
+            const countFigures = () => {
+                const element = findParentNodeOfTypeClosestToPos(this.view.state.doc.resolve(this.getPos()), schema.nodes.figure_element);
+                let count = 0;
+                element?.node.descendants((node) => {
+                    if (node.type === schema.nodes.figure && !isDeleted(node)) {
+                        count++;
+                    }
+                });
+                return count;
+            };
+            const figureCount = countFigures();
+            handleDelete =
+                figureCount > 1
+                    ? () => {
+                        const currentCount = countFigures();
+                        const pos = this.getPos();
+                        if (currentCount <= 1) {
+                            return;
+                        }
+                        const tr = this.view.state.tr;
+                        tr.delete(pos, pos + this.node.nodeSize);
+                        this.view.dispatch(tr);
+                    }
+                    : undefined;
+        }
         this.reactTools?.remove();
         if (this.props.dispatch && this.props.theme) {
-            const files = this.props.getFiles();
-            const doc = this.view.state.doc;
             const componentProps = {
                 can,
-                files: groupFiles(doc, files),
+                getDoc: () => this.view.state.doc,
+                getFiles: this.props.getFiles,
                 onDownload: handleDownload,
                 onUpload: handleUpload,
                 onDetach: handleDetach,
                 onReplace: handleReplace,
+                onDelete: handleDelete,
             };
             this.reactTools = ReactSubView(this.props, FigureOptions, componentProps, this.node, this.getPos, this.view);
             this.dom.insertBefore(this.reactTools, this.dom.firstChild);

package/dist/es/views/figure_element.js

@@ -13,21 +13,48 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import BlockView from './block_view';
+import { schema } from '@manuscripts/transform';
+import { addFigureBtnIcon } from '../icons';
 import { createNodeView } from './creators';
-export class FigureElementView extends BlockView {
+import { ImageElementView } from './image_element';
+export class FigureElementView extends ImageElementView {
     constructor() {
         super(...arguments);
         this.ignoreMutation = () => true;
         this.createElement = () => {
-            this.container = document.createElement('div');
-            this.container.classList.add('block');
-            this.dom.appendChild(this.container);
-            this.contentDOM = document.createElement('figure');
-            this.contentDOM.classList.add('figure-block');
-            this.contentDOM.setAttribute('id', this.node.attrs.id);
-            this.container.appendChild(this.contentDOM);
+            super.createElement();
+            this.addFigureElementButtons();
         };
+        this.addFigure = () => {
+            const { state } = this.view;
+            const { tr } = state;
+            const figureElementPos = this.getPos();
+            let insertPos = figureElementPos + 1;
+            let lastFigureEndPos = insertPos;
+            let hasFigures = false;
+            this.node.forEach((node) => {
+                if (node.type === schema.nodes.figure) {
+                    lastFigureEndPos = insertPos + node.nodeSize;
+                    hasFigures = true;
+                }
+                insertPos += node.nodeSize;
+            });
+            const finalInsertPos = hasFigures ? lastFigureEndPos : figureElementPos + 1;
+            const figureNode = state.schema.nodes.figure.create();
+            tr.insert(finalInsertPos, figureNode);
+            this.view.dispatch(tr);
+        };
+    }
+    addFigureElementButtons() {
+        if (this.props.getCapabilities()?.editArticle) {
+            const addFigureBtn = Object.assign(document.createElement('button'), {
+                className: 'add-figure-button',
+                innerHTML: addFigureBtnIcon,
+                title: 'Add figure',
+            });
+            addFigureBtn.addEventListener('click', () => this.addFigure());
+            this.container.prepend(addFigureBtn);
+        }
     }
 }
 export default createNodeView(FigureElementView);

package/dist/es/views/image_element.js

@@ -0,0 +1,33 @@
+/*!
+ * © 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 BlockView from './block_view';
+import { createNodeView } from './creators';
+export class ImageElementView extends BlockView {
+    constructor() {
+        super(...arguments);
+        this.ignoreMutation = () => true;
+    }
+    createElement() {
+        this.container = document.createElement('div');
+        this.container.classList.add('block');
+        this.dom.appendChild(this.container);
+        this.contentDOM = document.createElement('figure');
+        this.contentDOM.classList.add('figure-block');
+        this.contentDOM.setAttribute('id', this.node.attrs.id);
+        this.container.appendChild(this.contentDOM);
+    }
+}
+export default createNodeView(ImageElementView);

package/dist/es/views/image_element_editable.js

@@ -0,0 +1,19 @@
+/*!
+ * © 2019 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 { ImageElementView } from './image_element';
+export default createEditableNodeView(EditableBlock(ImageElementView));

package/dist/types/components/views/FigureDropdown.d.ts

@@ -1,15 +1,18 @@
 import { Capabilities } from '@manuscripts/style-guide';
+import { Node as ManuscriptNode } from 'prosemirror-model';
 import React from 'react';
-import { FileAttachment, ManuscriptFiles } from '../../lib/files';
+import { FileAttachment } from '../../lib/files';
 export interface FigureDropdownProps {
     can: Capabilities;
-    files: ManuscriptFiles;
+    getFiles: () => FileAttachment[];
 }
 export interface FigureOptionsProps extends FigureDropdownProps {
     onDownload?: () => void;
     onUpload?: () => void;
     onDetach?: () => void;
     onReplace?: (file: FileAttachment) => void;
+    getDoc: () => ManuscriptNode;
+    onDelete?: () => void;
 }
 export interface FigureElementOptionsProps extends FigureDropdownProps {
     onAdd: (file: FileAttachment) => Promise<void>;

package/dist/types/icons.d.ts

@@ -7,3 +7,4 @@ export declare const sectionCategoryIcon: string;
 export declare const scrollIcon: string;
 export declare const lockIcon: string;
 export declare const plusIcon: string;
+export declare const addFigureBtnIcon: string;

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

@@ -28,4 +28,5 @@ export type FileManagement = {
     download: Download;
     previewLink: PreviewLink;
 };
+export declare function memoGroupFiles(): (doc: ManuscriptNode, files: FileAttachment[]) => ManuscriptFiles;
 export declare const groupFiles: (doc: ManuscriptNode, files: FileAttachment[]) => ManuscriptFiles;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.2.3";
+export declare const VERSION = "3.2.5";
 export declare const MATHJAX_VERSION = "3.2.2";

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

@@ -13,13 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { FigureElementNode } from '@manuscripts/transform';
-import { Trackable } from '../types';
-import BlockView from './block_view';
-export declare class FigureElementView extends BlockView<Trackable<FigureElementNode>> {
-    private container;
+import { ImageElementView } from './image_element';
+export declare class FigureElementView extends ImageElementView {
     ignoreMutation: () => boolean;
     createElement: () => void;
+    private addFigureElementButtons;
+    private addFigure;
 }
 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

@@ -0,0 +1,25 @@
+/*!
+ * © 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 { FigureElementNode } from '@manuscripts/transform';
+import { Trackable } from '../types';
+import BlockView from './block_view';
+export declare class ImageElementView extends BlockView<Trackable<FigureElementNode>> {
+    container: HTMLElement;
+    ignoreMutation: () => boolean;
+    createElement(): void;
+}
+declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<ImageElementView>;
+export default _default;

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

@@ -0,0 +1,44 @@
+/*!
+ * © 2019 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 { ImageElementView } from './image_element';
+declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch | undefined) => 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 | undefined;
+    elementType: string;
+    readonly props: import("../configs/ManuscriptsEditor").EditorProps;
+    node: import("prosemirror-model").Node;
+    readonly view: import("prosemirror-view").EditorView;
+    readonly getPos: () => number;
+    update(newNode: import("prosemirror-model").Node): boolean;
+    selectNode(): void;
+    deselectNode(): void;
+    destroy(): void;
+} & 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.3",
+  "version": "3.2.5",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",

package/styles/AdvancedEditor.css

@@ -122,6 +122,8 @@
   text-indent: 0pt;
 }
 
+/* Figures */
+
 .ProseMirror .figure-block {
   width: 100%;
   border: 1px solid #f2f2f2;
@@ -132,6 +134,11 @@
 
   grid-template-columns: repeat(3, auto) !important;
   grid-template-rows: repeat(1, minmax(min-content, max-content)) [caption listing] auto !important;
+
+  margin: 16px 0 0 !important;
+  box-sizing: border-box;
+  justify-self: center;
+  position: relative;
 }
 
 .ProseMirror .figure-group {
@@ -144,8 +151,140 @@
   width: 100%;
   position: relative;
   grid-column: 1/-1;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.ProseMirror  .figure-images-container  .figure-image-container {
+  position: relative;
+  margin-bottom: 30px;
+}
+
+.ProseMirror .block-figure_element .add-figure-button {
+  border: 0px;
+  left: 53px;
+  width: 25px;
+  z-index: 1;
+  height: 25px;
+  bottom: 220px;
+  cursor: pointer;
+  position: absolute;
+  border-radius: 50%;
+  background-color: #6E6E6E;
+}
+
+.ProseMirror .block-figure_element .add-figure-button.disabled {
+  background-color: #E2E2E2 !important;
+}
+
+.ProseMirror .block-figure_element .add-figure-button svg path {
+  fill: #FFFFFF !important;
+}
+
+
+.ProseMirror .figure-block:hover .options-button {
+  visibility: visible;
+}
+
+.ProseMirror .block:focus-within .figure-block,
+.ProseMirror .block:hover .figure-block {
+  border-color: #e2e2e2;
+}
+
+.ProseMirror .figure-block[data-alignment='left'] {
+  justify-self: flex-start;
+}
+
+.ProseMirror .figure-block[data-alignment='right'] {
+  justify-self: flex-end;
+}
+
+.ProseMirror .figure-block .expanded-listing .executable-attachments {
+  display: block;
+}
+
+.ProseMirror .figure-block > .listing {
+  grid-column-start: 1;
+  grid-column-end: -1;
+  padding: 0;
+  min-height: 0;
+  overflow: visible;
+  width: 100%;
+}
+
+.ProseMirror .figure-block figure {
+  padding-bottom: 20px;
+}
+
+.ProseMirror .figure-block > figcaption {
+  grid-column-start: 1;
+  grid-column-end: -1;
+  margin-top: 30px;
+}
+
+.ProseMirror .figure-caption {
+  display: none;
+}
+
+.ProseMirror .figure.placeholder {
+  align-items: center;
+  border-radius: 16px;
+  border: 1px dashed #e2e2e2;
+  background-color: #fafafa;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  padding: 64px 32px;
+  max-width: 210px;
+  min-height: 100px;
+  white-space: normal;
+  font-size: 14px;
 }
 
+.ProseMirror .figure.placeholder a {
+  text-decoration: underline;
+}
+
+.ProseMirror .figure.placeholder.over {
+  border-color: #bce7f6;
+}
+
+.ProseMirror .figure-image {
+  max-width: 100%;
+  object-fit: contain;
+}
+
+.ProseMirror .figure-embed {
+  width: 640px;
+  max-width: 90%;
+  position: relative;
+  padding-top: 56.25%; /* Player ratio: 100 / (1280 / 720) */
+}
+
+.ProseMirror .figure-embed .figure-embed-object {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: none;
+}
+
+.ProseMirror figcaption {
+  background: white;
+  font-size: 14px;
+  margin-top: 1em;
+  text-align: center;
+  word-wrap: break-word;
+}
+
+.ProseMirror .block-table_element figcaption {
+  text-align: left;
+}
+
+
 .ProseMirror .figure-block > figcaption .figure-label {
   display: initial !important;
 }
@@ -683,6 +822,10 @@ span.comment-marker {
   text-decoration: line-through;
 }
 
+.tracking-visible .ProseMirror figure.deleted {
+  display: flex;
+}
+
 .tracking-visible .ProseMirror .block.deleted {
   display: block;
 }
@@ -794,10 +937,18 @@ figure.block:has(.equation.selected-suggestion) {
 .tracking-visible
   .ProseMirror
   [data-track-status='pending'][data-track-op='delete']
-  .block {
+  .block,  .tracking-visible
+  .ProseMirror .figure-block
+   figure[data-track-status='pending'].deleted img {
   box-shadow: inset 3px 0 0 var(--deleted-color);
 }
 
+.tracking-visible
+.ProseMirror .figure-block
+ figure[data-track-status='pending'].deleted img {
+  padding-left: 3px;
+ }
+
 .selected-suggestion[data-track-status='pending'][data-track-op='delete']
   .block,
 .selected-suggestion[data-track-status='pending'][data-track-op='delete']

package/styles/Editor.css

@@ -277,120 +277,6 @@
   background-color: #bce7f6;
 }
 
-.ProseMirror .figure-block {
-  border: 1px solid transparent;
-  border-radius: 4px;
-  display: grid;
-  gap: 20px 40px;
-  margin: 16px 0 0;
-  box-sizing: border-box;
-  justify-self: center;
-  position: relative;
-}
-
-.ProseMirror .figure-block:hover .options-button {
-  visibility: visible;
-}
-
-.ProseMirror .block:focus-within .figure-block,
-.ProseMirror .block:hover .figure-block {
-  border-color: #e2e2e2;
-}
-
-.ProseMirror .figure-block[data-alignment='left'] {
-  justify-self: flex-start;
-}
-
-.ProseMirror .figure-block[data-alignment='right'] {
-  justify-self: flex-end;
-}
-
-.ProseMirror .figure-block .expanded-listing .executable-attachments {
-  display: block;
-}
-
-.ProseMirror .figure-block figure {
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-.ProseMirror .figure-block > .listing {
-  grid-column-start: 1;
-  grid-column-end: -1;
-  padding: 0;
-  min-height: 0;
-  overflow: visible;
-  width: 100%;
-}
-
-.ProseMirror .figure-block > figcaption {
-  grid-column-start: 1;
-  grid-column-end: -1;
-  margin-top: 0;
-}
-
-.ProseMirror .figure-caption {
-  display: none;
-}
-
-.ProseMirror .figure.placeholder {
-  align-items: center;
-  border-radius: 16px;
-  border: 1px dashed #e2e2e2;
-  background-color: #fafafa;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  text-align: center;
-  padding: 64px 32px;
-  max-width: 210px;
-  min-height: 100px;
-  white-space: normal;
-  font-size: 14px;
-}
-
-.ProseMirror .figure.placeholder a {
-  text-decoration: underline;
-}
-
-.ProseMirror .figure.placeholder.over {
-  border-color: #bce7f6;
-}
-
-.ProseMirror .figure-image {
-  max-width: 100%;
-  object-fit: contain;
-}
-
-.ProseMirror .figure-embed {
-  width: 640px;
-  max-width: 90%;
-  position: relative;
-  padding-top: 56.25%; /* Player ratio: 100 / (1280 / 720) */
-}
-
-.ProseMirror .figure-embed .figure-embed-object {
-  position: absolute;
-  top: 0;
-  left: 0;
-  border: none;
-}
-
-.ProseMirror figcaption {
-  background: white;
-  font-size: 14px;
-  margin-top: 1em;
-  text-align: center;
-  word-wrap: break-word;
-}
-
-.ProseMirror .block-table_element figcaption {
-  text-align: left;
-}
-
 .ProseMirror .block-table_element .block-gutter {
   padding-top: 1em;
 }