@manuscripts/body-editor 3.2.32 → 3.2.33

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

@@ -1,11 +1,34 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FigureOptions = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const files_1 = require("../../lib/files");
 function getSupplements(getFiles, getDoc, groupFiles) {
@@ -16,14 +39,31 @@ function getSupplements(getFiles, getDoc, groupFiles) {
 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 FigureOptions = ({ can, getDoc, getFiles, onDownload, onUpload, onDetach, onReplace, onDelete, hasSiblings, container, }) => {
     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 showDelete = () => {
+        if (!hasSiblings()) {
+            return false;
+        }
+        if (onDelete && can.detachFile) {
+            return true;
+        }
+        return false;
+    };
+    (0, react_1.useEffect)(() => {
+        const activeClass = 'figure-dropdown-active';
+        if (isOpen) {
+            container.classList.add(activeClass);
+        }
+        else {
+            container.classList.remove(activeClass);
+        }
+    }, [isOpen, container.classList]);
     const groupFiles = (0, files_1.memoGroupFiles)();
     return (react_1.default.createElement(DropdownWrapper, { ref: wrapperRef },
         react_1.default.createElement(OptionsButton, { className: 'options-button', onClick: toggleOpen },
@@ -41,7 +81,7 @@ const FigureOptions = ({ can, getDoc, getFiles, onDownload, onUpload, onDetach,
                         " Upload new...")) }),
             react_1.default.createElement(ListItemButton, { onClick: onDownload, disabled: !showDownload }, "Download"),
             react_1.default.createElement(ListItemButton, { onClick: onDetach, disabled: !showDetach }, "Detach"),
-            showDelete && (react_1.default.createElement(ListItemButton, { onClick: onDelete }, "Delete"))))));
+            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 = '3.2.32';
+exports.VERSION = '3.2.33';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/cjs/views/ReactSubView.js

@@ -39,7 +39,7 @@ function createSubView(props, Component, componentProps, node, getPos, view, cla
             view.dispatch(tr);
         };
         return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: props.theme },
-            react_1.default.createElement(Component, { nodeAttrs: node.attrs, setNodeAttrs: setNodeAttrs, viewProps: { node, view, getPos }, ...props, ...componentProps })));
+            react_1.default.createElement(Component, { nodeAttrs: node.attrs, setNodeAttrs: setNodeAttrs, viewProps: { node, view, getPos }, container: container, ...props, ...componentProps })));
     };
     const root = (0, client_1.createRoot)(container);
     root.render(react_1.default.createElement(Wrapped, null));

package/dist/cjs/views/figure_editable.js

@@ -278,6 +278,16 @@ class FigureEditableView extends figure_1.FigureView {
             this.container.appendChild(dragHandle);
         }
     }
+    countFigures() {
+        const parent = (0, prosemirror_utils_1.findParentNodeOfTypeClosestToPos)(this.view.state.doc.resolve(this.getPos()), transform_1.schema.nodes.figure_element);
+        let count = 0;
+        parent?.node.descendants((node) => {
+            if (node.type === transform_1.schema.nodes.figure && !(0, track_changes_utils_1.isDeleted)(node)) {
+                count++;
+            }
+        });
+        return count;
+    }
     manageReactTools() {
         let handleDownload;
         let handleUpload;
@@ -323,30 +333,12 @@ class FigureEditableView extends figure_1.FigureView {
             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;
+            handleDelete = () => {
+                const pos = this.getPos();
+                const tr = this.view.state.tr;
+                tr.delete(pos, pos + this.node.nodeSize);
+                this.view.dispatch(tr);
             };
-            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) {
@@ -359,6 +351,9 @@ class FigureEditableView extends figure_1.FigureView {
                 onDetach: handleDetach,
                 onReplace: handleReplace,
                 onDelete: handleDelete,
+                hasSiblings: () => {
+                    return this.countFigures() > 1;
+                },
             };
             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/es/components/views/FigureDropdown.js

@@ -1,5 +1,5 @@
 import { DotsIcon, DropdownList, getFileIcon, IconButton, IconTextButton, isImageFile, TriangleCollapsedIcon, UploadIcon, useDropdown, } from '@manuscripts/style-guide';
-import React from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import { memoGroupFiles, } from '../../lib/files';
 function getSupplements(getFiles, getDoc, groupFiles) {
@@ -10,14 +10,31 @@ function getSupplements(getFiles, getDoc, groupFiles) {
 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, }) => {
+export const FigureOptions = ({ can, getDoc, getFiles, onDownload, onUpload, onDetach, onReplace, onDelete, hasSiblings, container, }) => {
     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 showDelete = () => {
+        if (!hasSiblings()) {
+            return false;
+        }
+        if (onDelete && can.detachFile) {
+            return true;
+        }
+        return false;
+    };
+    useEffect(() => {
+        const activeClass = 'figure-dropdown-active';
+        if (isOpen) {
+            container.classList.add(activeClass);
+        }
+        else {
+            container.classList.remove(activeClass);
+        }
+    }, [isOpen, container.classList]);
     const groupFiles = memoGroupFiles();
     return (React.createElement(DropdownWrapper, { ref: wrapperRef },
         React.createElement(OptionsButton, { className: 'options-button', onClick: toggleOpen },
@@ -35,7 +52,7 @@ export const FigureOptions = ({ can, getDoc, getFiles, onDownload, onUpload, onD
                         " Upload new...")) }),
             React.createElement(ListItemButton, { onClick: onDownload, disabled: !showDownload }, "Download"),
             React.createElement(ListItemButton, { onClick: onDetach, disabled: !showDetach }, "Detach"),
-            showDelete && (React.createElement(ListItemButton, { onClick: onDelete }, "Delete"))))));
+            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 = '3.2.32';
+export const VERSION = '3.2.33';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/ReactSubView.js

@@ -34,7 +34,7 @@ function createSubView(props, Component, componentProps, node, getPos, view, cla
             view.dispatch(tr);
         };
         return (React.createElement(ThemeProvider, { theme: props.theme },
-            React.createElement(Component, { nodeAttrs: node.attrs, setNodeAttrs: setNodeAttrs, viewProps: { node, view, getPos }, ...props, ...componentProps })));
+            React.createElement(Component, { nodeAttrs: node.attrs, setNodeAttrs: setNodeAttrs, viewProps: { node, view, getPos }, container: container, ...props, ...componentProps })));
     };
     const root = createRoot(container);
     root.render(React.createElement(Wrapped, null));

package/dist/es/views/figure_editable.js

@@ -272,6 +272,16 @@ export class FigureEditableView extends FigureView {
             this.container.appendChild(dragHandle);
         }
     }
+    countFigures() {
+        const parent = findParentNodeOfTypeClosestToPos(this.view.state.doc.resolve(this.getPos()), schema.nodes.figure_element);
+        let count = 0;
+        parent?.node.descendants((node) => {
+            if (node.type === schema.nodes.figure && !isDeleted(node)) {
+                count++;
+            }
+        });
+        return count;
+    }
     manageReactTools() {
         let handleDownload;
         let handleUpload;
@@ -317,30 +327,12 @@ export class FigureEditableView extends FigureView {
             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;
+            handleDelete = () => {
+                const pos = this.getPos();
+                const tr = this.view.state.tr;
+                tr.delete(pos, pos + this.node.nodeSize);
+                this.view.dispatch(tr);
             };
-            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) {
@@ -353,6 +345,9 @@ export class FigureEditableView extends FigureView {
                 onDetach: handleDetach,
                 onReplace: handleReplace,
                 onDelete: handleDelete,
+                hasSiblings: () => {
+                    return this.countFigures() > 1;
+                },
             };
             this.reactTools = ReactSubView(this.props, FigureOptions, componentProps, this.node, this.getPos, this.view);
             this.dom.insertBefore(this.reactTools, this.dom.firstChild);

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

@@ -1,7 +1,9 @@
 import { Capabilities } from '@manuscripts/style-guide';
+import { FigureNode } from '@manuscripts/transform';
 import { Node as ManuscriptNode } from 'prosemirror-model';
 import React from 'react';
 import { FileAttachment } from '../../lib/files';
+import { ReactViewComponentProps } from '../../views/ReactSubView';
 export interface FigureDropdownProps {
     can: Capabilities;
     getFiles: () => FileAttachment[];
@@ -13,10 +15,13 @@ export interface FigureOptionsProps extends FigureDropdownProps {
     onReplace?: (file: FileAttachment, isSupplement?: boolean) => void;
     getDoc: () => ManuscriptNode;
     onDelete?: () => void;
+    hasSiblings: () => boolean;
 }
 export interface FigureElementOptionsProps extends FigureDropdownProps {
     onAdd: (file: FileAttachment) => Promise<void>;
     onUpload: () => void;
     hasUploadedImage: boolean;
 }
-export declare const FigureOptions: React.FC<FigureOptionsProps>;
+type WrappedProps = FigureOptionsProps & ReactViewComponentProps<FigureNode>;
+export declare const FigureOptions: React.FC<WrappedProps>;
+export {};

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.2.32";
+export declare const VERSION = "3.2.33";
 export declare const MATHJAX_VERSION = "3.2.2";

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

@@ -15,19 +15,17 @@
  */
 import { ManuscriptEditorView, ManuscriptNode } from '@manuscripts/transform';
 import React from 'react';
-import { Dispatch } from '../commands';
 import { EditorProps } from '../configs/ManuscriptsEditor';
 import { Trackable } from '../types';
 export interface ReactViewComponentProps<NodeT extends ManuscriptNode> {
     nodeAttrs: NodeT['attrs'];
     setNodeAttrs: (nextAttrs: Partial<NodeT['attrs']>) => void;
-    contentDOM?: HTMLElement | null;
     viewProps: {
         view: ManuscriptEditorView;
         getPos: () => number;
         node: ManuscriptNode | Trackable<ManuscriptNode>;
     };
-    dispatch: Dispatch;
+    container: HTMLDivElement;
 }
 declare function createSubView<T extends Trackable<ManuscriptNode>>(props: EditorProps, Component: React.FC<any>, componentProps: object, node: T, getPos: () => number, view: ManuscriptEditorView, classNames?: string[]): HTMLDivElement;
 export default createSubView;

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

@@ -28,6 +28,7 @@ export declare class FigureEditableView extends FigureView {
     upload: (file: File) => Promise<void>;
     updateContents(): void;
     protected addTools(): void;
+    countFigures(): number;
     private manageReactTools;
     protected setSrc: (src: string) => void;
     private createUnsupportedFormat;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "3.2.32",
+  "version": "3.2.33",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",

package/styles/AdvancedEditor.css

@@ -158,7 +158,7 @@
   align-items: center;
 }
 
-.ProseMirror  .figure-images-container  .figure-image-container {
+.ProseMirror .figure-images-container .figure-image-container {
   position: relative;
   margin-bottom: 30px;
 }
@@ -172,18 +172,17 @@
   cursor: pointer;
   position: absolute;
   border-radius: 50%;
-  background-color: #6E6E6E;
+  background-color: #6e6e6e;
 }
 
 .ProseMirror .block-figure_element .add-figure-button.disabled {
-  background-color: #E2E2E2 !important;
+  background-color: #e2e2e2 !important;
 }
 
 .ProseMirror .block-figure_element .add-figure-button svg path {
-  fill: #FFFFFF !important;
+  fill: #ffffff !important;
 }
 
-
 .ProseMirror .figure-block:hover .options-button {
   visibility: visible;
 }
@@ -283,7 +282,6 @@
   text-align: left;
 }
 
-
 .ProseMirror .figure-block > figcaption .figure-label {
   display: initial !important;
 }
@@ -448,6 +446,10 @@
   z-index: 3;
 }
 
+.tools-panel.figure-dropdown-active {
+  z-index: 4;
+}
+
 .tools-panel button svg {
   max-width: 16px;
 }
@@ -810,7 +812,7 @@ span.comment-marker {
 }
 
 .ProseMirror .inconsistency-highlight {
-  border: 1px solid #f35143!important;
+  border: 1px solid #f35143 !important;
   background: #fff1f0;
   border-radius: 4px;
   box-sizing: border-box;
@@ -820,7 +822,7 @@ span.comment-marker {
 .ProseMirror .inconsistency-highlight.selected-suggestion,
 .ProseMirror .inconsistency-highlight.footnote-marker-selected,
 .ProseMirror .inconsistency-highlight.ProseMirror-selectednode {
-  border: 2px solid #f35143!important;
+  border: 2px solid #f35143 !important;
   background: #fff1f0;
 }
 
@@ -990,17 +992,22 @@ figure.block:has(.equation.selected-suggestion) {
 .tracking-visible
   .ProseMirror
   [data-track-status='pending'][data-track-op='delete']
-  .block,  .tracking-visible
-  .ProseMirror .figure-block
-   figure[data-track-status='pending'].deleted img {
+  .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 {
+  .ProseMirror
+  .figure-block
+  figure[data-track-status='pending'].deleted
+  img {
   padding-left: 3px;
- }
+}
 
 .selected-suggestion[data-track-status='pending'][data-track-op='delete']
   .block,
@@ -1019,7 +1026,8 @@ figure.block:has(.equation.selected-suggestion) {
 .tracking-visible
   .ProseMirror
   [data-track-op='node_split'][data-track-status='pending']
-  .block, .tracking-visible
+  .block,
+.tracking-visible
   .selected-suggestion[data-track-op='move'][data-track-status='pending']
   .block , .block:has(figure.selected-suggestion, [data-track-op='move'][data-track-status='pending']){
     box-shadow: inset 3px 0 0 var(--updated-border-color) ;
@@ -1030,9 +1038,10 @@ figure.block:has(.equation.selected-suggestion) {
 .tracking-visible
   .block:has(figure.selected-suggestion[data-track-op='set_attrs']),
 .tracking-visible .selected-suggestion[data-track-op='node_split'] .block,
-.tracking-visible figure.block:has(.equation.set_attrs.selected-suggestion), .tracking-visible
-.selected-suggestion[data-track-op='move'][data-track-status='pending']
-.block  {
+.tracking-visible figure.block:has(.equation.set_attrs.selected-suggestion),
+.tracking-visible
+  .selected-suggestion[data-track-op='move'][data-track-status='pending']
+  .block {
   box-shadow: inset 6px 0 0 var(--updated-border-color),
     inset 9px 0 0 var(--updated-bg-color) !important;
   animation: fadeOutBackground 3s forwards;
@@ -1052,7 +1061,6 @@ figure.block:has(.equation.selected-suggestion) {
   display: none !important;
 }
 
-
 .citation-wrapper {
   position: relative;
 }
@@ -1107,13 +1115,17 @@ figure.block:has(.equation.selected-suggestion) {
 }
 
 /* Needed for the snapshot comparison */
-.tracking-visible .block-list [data-track-op="insert"][data-track-status="pending"] {
+.tracking-visible
+  .block-list
+  [data-track-op='insert'][data-track-status='pending'] {
   background: var(--inserted-pending-bg-color);
   color: var(--inserted-pending-color);
   text-decoration: underline;
 }
 /* Needed for the snapshot comparison */
-.tracking-visible .block-list [data-track-op="delete"][data-track-status="pending"] {
+.tracking-visible
+  .block-list
+  [data-track-op='delete'][data-track-status='pending'] {
   background: var(--deleted-pending-bg-color);
   color: var(--deleted-color);
   text-decoration: line-through;
@@ -1615,4 +1627,4 @@ th:hover > .table-context-menu-button,
 .ProseMirror .block-image_element .block:focus-visible,
 .ProseMirror .block-figure_element .block:focus-visible {
   outline: none;
-}
+}