@manuscripts/body-editor 2.8.86 → 2.8.87-LEAN-4591.0

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

@@ -7,7 +7,7 @@ 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 FigureOptions = ({ can, files, onDownload, onUpload, onDetach, onReplace, onDelete, figureIndex, }) => {
     const { isOpen, toggleOpen, wrapperRef } = (0, style_guide_1.useDropdown)();
     const supplements = files.supplements
         .map((s) => s.file)
@@ -18,6 +18,7 @@ const FigureOptions = ({ can, files, onDownload, onUpload, onDetach, onReplace,
     const showDetach = onDetach && can.detachFile;
     const showReplace = onReplace && can.replaceFile;
     const replaceBtnText = onDownload ? 'Replace' : 'Choose file';
+    const showDelete = onDelete && can.editArticle && figureIndex !== 0;
     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)),
@@ -33,7 +34,8 @@ const FigureOptions = ({ can, files, onDownload, onUpload, onDetach, onReplace,
                         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/versions.js

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

package/dist/cjs/views/figure_editable.js

@@ -242,6 +242,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];
@@ -264,6 +265,14 @@ class FigureEditableView extends figure_1.FigureView {
         if (can.uploadFile) {
             handleUpload = (0, figure_uploader_1.figureUploader)(this.upload);
         }
+        if (can.editArticle) {
+            handleDelete = () => {
+                const pos = this.getPos();
+                const tr = this.view.state.tr;
+                tr.delete(pos, pos + this.node.nodeSize);
+                this.view.dispatch(tr);
+            };
+        }
         (_a = this.reactTools) === null || _a === void 0 ? void 0 : _a.remove();
         if (this.props.dispatch && this.props.theme) {
             const files = this.props.getFiles();
@@ -275,11 +284,23 @@ class FigureEditableView extends figure_1.FigureView {
                 onUpload: handleUpload,
                 onDetach: handleDetach,
                 onReplace: handleReplace,
+                onDelete: handleDelete,
+                figureIndex: this.getFigureIndex(),
             };
             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);
         }
     }
+    getFigureIndex() {
+        const figures = [];
+        this.view.state.doc.descendants((node, pos) => {
+            if (node.type === transform_1.schema.nodes.figure) {
+                figures.push(pos);
+            }
+        });
+        const currentPos = this.getPos();
+        return figures.indexOf(currentPos);
+    }
 }
 exports.FigureEditableView = FigureEditableView;
 exports.default = (0, creators_1.createEditableNodeView)(FigureEditableView);

package/dist/cjs/views/figure_element.js

@@ -19,6 +19,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FigureElementView = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const transform_1 = require("@manuscripts/transform");
+const react_1 = require("react");
+const server_1 = require("react-dom/server");
 const block_view_1 = __importDefault(require("./block_view"));
 const creators_1 = require("./creators");
 class FigureElementView extends block_view_1.default {
@@ -33,7 +37,40 @@ class FigureElementView extends block_view_1.default {
             this.contentDOM.classList.add('figure-block');
             this.contentDOM.setAttribute('id', this.node.attrs.id);
             this.container.appendChild(this.contentDOM);
+            if (this.node.type === transform_1.schema.nodes.figure_element) {
+                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() {
+        var _a;
+        if ((_a = this.props.getCapabilities()) === null || _a === void 0 ? void 0 : _a.editArticle) {
+            this.addFigureBtn = document.createElement('button');
+            this.addFigureBtn.className = 'add-figure-button';
+            this.addFigureBtn.innerHTML = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(style_guide_1.PlusIcon));
+            this.addFigureBtn.title = 'Add figure';
+            this.addFigureBtn.addEventListener('click', this.addFigure);
+            this.container.prepend(this.addFigureBtn);
+        }
     }
 }
 exports.FigureElementView = FigureElementView;

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

@@ -1,7 +1,7 @@
 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, }) => {
+export const FigureOptions = ({ can, files, onDownload, onUpload, onDetach, onReplace, onDelete, figureIndex, }) => {
     const { isOpen, toggleOpen, wrapperRef } = useDropdown();
     const supplements = files.supplements
         .map((s) => s.file)
@@ -12,6 +12,7 @@ export const FigureOptions = ({ can, files, onDownload, onUpload, onDetach, onRe
     const showDetach = onDetach && can.detachFile;
     const showReplace = onReplace && can.replaceFile;
     const replaceBtnText = onDownload ? 'Replace' : 'Choose file';
+    const showDelete = onDelete && can.editArticle && figureIndex !== 0;
     return (React.createElement(DropdownWrapper, { ref: wrapperRef },
         React.createElement(OptionsButton, { className: 'options-button', onClick: toggleOpen },
             React.createElement(DotsIcon, null)),
@@ -27,7 +28,8 @@ export const FigureOptions = ({ can, files, onDownload, onUpload, onDetach, onRe
                         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/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '2.8.86';
+export const VERSION = '2.8.87-LEAN-4591.0';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/figure_editable.js

@@ -236,6 +236,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];
@@ -258,6 +259,14 @@ export class FigureEditableView extends FigureView {
         if (can.uploadFile) {
             handleUpload = figureUploader(this.upload);
         }
+        if (can.editArticle) {
+            handleDelete = () => {
+                const pos = this.getPos();
+                const tr = this.view.state.tr;
+                tr.delete(pos, pos + this.node.nodeSize);
+                this.view.dispatch(tr);
+            };
+        }
         (_a = this.reactTools) === null || _a === void 0 ? void 0 : _a.remove();
         if (this.props.dispatch && this.props.theme) {
             const files = this.props.getFiles();
@@ -269,10 +278,22 @@ export class FigureEditableView extends FigureView {
                 onUpload: handleUpload,
                 onDetach: handleDetach,
                 onReplace: handleReplace,
+                onDelete: handleDelete,
+                figureIndex: this.getFigureIndex(),
             };
             this.reactTools = ReactSubView(this.props, FigureOptions, componentProps, this.node, this.getPos, this.view);
             this.dom.insertBefore(this.reactTools, this.dom.firstChild);
         }
     }
+    getFigureIndex() {
+        const figures = [];
+        this.view.state.doc.descendants((node, pos) => {
+            if (node.type === schema.nodes.figure) {
+                figures.push(pos);
+            }
+        });
+        const currentPos = this.getPos();
+        return figures.indexOf(currentPos);
+    }
 }
 export default createEditableNodeView(FigureEditableView);

package/dist/es/views/figure_element.js

@@ -13,6 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { PlusIcon } from '@manuscripts/style-guide';
+import { schema } from '@manuscripts/transform';
+import { createElement } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
 import BlockView from './block_view';
 import { createNodeView } from './creators';
 export class FigureElementView extends BlockView {
@@ -27,7 +31,40 @@ export class FigureElementView extends BlockView {
             this.contentDOM.classList.add('figure-block');
             this.contentDOM.setAttribute('id', this.node.attrs.id);
             this.container.appendChild(this.contentDOM);
+            if (this.node.type === schema.nodes.figure_element) {
+                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() {
+        var _a;
+        if ((_a = this.props.getCapabilities()) === null || _a === void 0 ? void 0 : _a.editArticle) {
+            this.addFigureBtn = document.createElement('button');
+            this.addFigureBtn.className = 'add-figure-button';
+            this.addFigureBtn.innerHTML = renderToStaticMarkup(createElement(PlusIcon));
+            this.addFigureBtn.title = 'Add figure';
+            this.addFigureBtn.addEventListener('click', this.addFigure);
+            this.container.prepend(this.addFigureBtn);
+        }
     }
 }
 export default createNodeView(FigureElementView);

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

@@ -10,6 +10,8 @@ export interface FigureOptionsProps extends FigureDropdownProps {
     onUpload?: () => void;
     onDetach?: () => void;
     onReplace?: (file: FileAttachment) => void;
+    onDelete?: () => void;
+    figureIndex?: number;
 }
 export interface FigureElementOptionsProps extends FigureDropdownProps {
     onAdd: (file: FileAttachment) => Promise<void>;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "2.8.86";
+export declare const VERSION = "2.8.87-LEAN-4591.0";
 export declare const MATHJAX_VERSION = "3.2.2";

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

@@ -29,6 +29,7 @@ export declare class FigureEditableView extends FigureView {
     protected addTools(): void;
     private manageReactTools;
     protected setSrc: (src: string) => void;
+    private getFigureIndex;
     private createUnsupportedFormat;
     protected createImg: (src: string) => HTMLImageElement;
     protected createPlaceholder: () => HTMLDivElement;

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

@@ -18,8 +18,11 @@ import { Trackable } from '../types';
 import BlockView from './block_view';
 export declare class FigureElementView extends BlockView<Trackable<FigureElementNode>> {
     private container;
+    private addFigureBtn;
     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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "2.8.86",
+  "version": "2.8.87-LEAN-4591.0",
   "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;
+  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;
 }