@manuscripts/body-editor 2.8.79-test-multiple-images.1 → 2.8.79

package/dist/es/views/figure_editable.js

@@ -22,10 +22,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { ContextMenu, FileCorruptedIcon, ImageDefaultIcon, ImageLeftIcon, ImageRightIcon, PlusIcon, } from '@manuscripts/style-guide';
+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';
@@ -45,146 +44,60 @@ export var figurePositions;
 export class FigureEditableView extends FigureView {
     constructor() {
         super(...arguments);
-        this.addImageButton = null;
-        this.imageToolContainers = new Map();
-        this.upload = (file, index = 0) => __awaiter(this, void 0, void 0, function* () {
-            try {
-                const result = yield this.props.fileManagement.upload(file);
-                this.addImage(result.id, index);
-            }
-            catch (error) {
-                console.error('Upload failed:', error);
-                throw error;
-            }
+        this.upload = (file) => __awaiter(this, void 0, void 0, function* () {
+            const result = yield this.props.fileManagement.upload(file);
+            this.setSrc(result.id);
         });
-        this.createImg = (src) => {
-            const img = document.createElement('img');
-            img.classList.add('figure-image');
-            img.src = src;
-            return img;
-        };
-        this.createPlaceholder = (index) => {
-            const element = document.createElement('div');
-            element.classList.add('figure', 'placeholder');
-            element.dataset.index = index.toString();
-            const instructions = document.createElement('div');
-            instructions.classList.add('instructions');
-            instructions.innerHTML = `
-      <p>Drag or click here to upload image <br>
-      or drag items here from the file inspector tabs <br>
-      <a data-action='open-other-files'>'Other files'</a> | 
-      <a data-action='open-supplement-files'>'Supplements'</a></p>
-    `;
-            const can = this.props.getCapabilities();
-            if (can.uploadFile && !isDeleted(this.node)) {
-                const handlePlaceholderClick = (event) => {
-                    var _a;
-                    const target = event.target;
-                    if ((_a = target.dataset) === null || _a === void 0 ? void 0 : _a.action) {
-                        return;
-                    }
-                    const triggerUpload = figureUploader((file) => this.upload(file, index));
-                    triggerUpload();
-                };
-                element.addEventListener('click', handlePlaceholderClick);
-                element.addEventListener('dragenter', (event) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    element.classList.add('drag-over');
-                });
-                element.addEventListener('dragover', (event) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    element.classList.add('drag-over');
-                    if (event.dataTransfer) {
-                        event.dataTransfer.dropEffect = 'copy';
-                    }
-                });
-                element.addEventListener('dragleave', (event) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    element.classList.remove('drag-over');
-                });
-                element.addEventListener('drop', (event) => __awaiter(this, void 0, void 0, function* () {
-                    var _a, _b;
-                    event.preventDefault();
-                    event.stopPropagation();
-                    element.classList.remove('drag-over');
-                    if ((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b.length) {
-                        const originalContent = instructions.innerHTML;
-                        instructions.innerHTML = '<p>Uploading image...</p>';
-                        try {
-                            yield this.upload(event.dataTransfer.files[0], index);
-                        }
-                        catch (error) {
-                            console.error('Upload failed:', error);
-                            instructions.innerHTML = originalContent;
-                        }
-                    }
-                }));
-                element.addEventListener('mouseenter', () => {
-                    element.classList.add('over');
-                });
-                element.addEventListener('mouseleave', () => {
-                    element.classList.remove('over');
-                });
-            }
-            element.appendChild(instructions);
-            return element;
+        this.setSrc = (src) => {
+            const { tr } = this.view.state;
+            const pos = this.getPos();
+            tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, this.node.attrs), { src: src }));
+            tr.setSelection(NodeSelection.create(tr.doc, pos));
+            this.view.dispatch(tr);
         };
-        this.createUnsupportedFormat = (file, index) => {
+        this.createUnsupportedFormat = (name) => {
             var _a;
             const element = document.createElement('div');
             element.classList.add('figure', 'placeholder');
-            element.dataset.fileId = file.id;
-            element.dataset.index = index.toString();
             const instructions = document.createElement('div');
             instructions.classList.add('instructions');
             const iconHtml = renderToStaticMarkup(createElement(FileCorruptedIcon, { className: 'icon' }));
             instructions.innerHTML = `
     <div>
       <div class="unsupported-icon-wrapper">${iconHtml}</div>
-      <div>${file.name}</div>
+      <div>${name}</div>
       <div class="unsupported-format-label">
         Unsupported file format
       </div>
       <div>
         ${((_a = this.props.getCapabilities()) === null || _a === void 0 ? void 0 : _a.editArticle)
-                ? 'Click to replace with supported image'
-                : 'Unsupported file format'}
+                ? 'Click to add image'
+                : 'No image here yet…'}
       </div>
     </div>
   `;
-            const can = this.props.getCapabilities();
-            if (can.uploadFile && !isDeleted(this.node)) {
-                element.addEventListener('click', (event) => {
-                    var _a;
-                    const target = event.target;
-                    if ((_a = target.dataset) === null || _a === void 0 ? void 0 : _a.action) {
-                        return;
-                    }
-                    const triggerUpload = figureUploader((newFile) => {
-                        this.detachImage(index);
-                        return this.upload(newFile, index);
-                    });
-                    triggerUpload();
-                });
-                element.addEventListener('mouseenter', () => {
-                    element.classList.add('over');
-                });
-                element.addEventListener('mouseleave', () => {
-                    element.classList.remove('over');
-                });
-            }
             element.appendChild(instructions);
             return element;
         };
-        this.setSrc = (src) => {
-            const { tr } = this.view.state;
-            const pos = this.getPos();
-            tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, this.node.attrs), { src: src }));
-            tr.setSelection(NodeSelection.create(tr.doc, pos));
-            this.view.dispatch(tr);
+        this.createImg = (src) => {
+            const img = document.createElement('img');
+            img.classList.add('figure-image');
+            img.src = src;
+            return img;
+        };
+        this.createPlaceholder = () => {
+            const element = document.createElement('div');
+            element.classList.add('figure', 'placeholder');
+            const instructions = document.createElement('div');
+            instructions.classList.add('instructions');
+            instructions.innerHTML = `
+      <p>Drag or click here to upload image <br>
+      or drag items here from the file inspector tabs <br>
+      <a data-action='open-other-files'>'Other files'</a> | 
+      <a data-action='open-supplement-files'>'Supplements'</a></p>
+    `;
+            element.appendChild(instructions);
+            return element;
         };
         this.createPositionMenuWrapper = () => {
             const can = this.props.getCapabilities();
@@ -257,120 +170,109 @@ export class FigureEditableView extends FigureView {
     }
     updateContents() {
         super.updateContents();
-        const src = this.node.attrs.src || '';
-        const images = Array.isArray(src) ? src : [src];
+        const src = this.node.attrs.src;
         const files = this.props.getFiles();
+        const file = src && files.filter((f) => f.id === src)[0];
         this.figurePosition = this.node.attrs.type;
-        const can = this.props.getCapabilities();
         this.container.innerHTML = '';
-        this.imageToolContainers.clear();
-        this.imagesContainer = document.createElement('div');
-        this.imagesContainer.classList.add('figure-images-container');
-        images.forEach((imageSrc, index) => {
-            const file = imageSrc && files.find((f) => f.id === imageSrc);
-            const imgContainer = document.createElement('div');
-            imgContainer.classList.add('figure-image-container');
-            const imgElement = imageSrc
-                ? file
-                    ? this.props.fileManagement.previewLink(file)
-                        ? this.createImg(this.props.fileManagement.previewLink(file))
-                        : this.createUnsupportedFormat(file, index)
-                    : this.createPlaceholder(index)
-                : this.createPlaceholder(index);
-            imgContainer.appendChild(imgElement);
-            if (can.editArticle && !isDeleted(this.node) && file) {
-                const toolContainer = this.createImageToolContainer(index, file);
-                imgContainer.appendChild(toolContainer);
-                this.imageToolContainers.set(index, toolContainer);
-            }
-            this.imagesContainer.appendChild(imgContainer);
-        });
+        const can = this.props.getCapabilities();
+        const link = file && this.props.fileManagement.previewLink(file);
+        const img = link
+            ? this.createImg(link)
+            : file
+                ? this.createUnsupportedFormat(file.name)
+                : this.createPlaceholder();
         if (can.uploadFile && !isDeleted(this.node)) {
-            const lastImage = images[images.length - 1];
-            const isLastPlaceholderEmpty = lastImage === '' || !lastImage;
-            const parent = findParentNodeOfTypeClosestToPos(this.view.state.tr.doc.resolve(this.getPos()), schema.nodes.figure_element);
-            if (!this.addImageButton) {
-                this.addImageButton = document.createElement('button');
-                this.addImageButton.classList.add('add-image-button');
-                this.addImageButton.innerHTML = renderToStaticMarkup(createElement(PlusIcon, { className: 'icon' }));
-                this.addImageButton.title = 'Add another image';
-                this.addImageButton.addEventListener('click', () => {
-                    this.addNewImagePlaceholder();
-                });
-            }
-            if (isLastPlaceholderEmpty) {
-                this.addImageButton.classList.add('disabled');
-            }
-            else {
-                this.addImageButton.classList.remove('disabled');
-            }
-            if (!this.imagesContainer.contains(this.addImageButton) &&
-                (parent === null || parent === void 0 ? void 0 : parent.node.type) === schema.nodes.figure_element) {
-                this.imagesContainer.appendChild(this.addImageButton);
-            }
-        }
-        else {
-            if (this.addImageButton) {
-                this.addImageButton.remove();
-                this.addImageButton = null;
-            }
+            const handlePlaceholderClick = (event) => {
+                const target = event.target;
+                if (target.dataset && target.dataset.action) {
+                    return;
+                }
+                const triggerUpload = figureUploader(this.upload);
+                triggerUpload();
+            };
+            img.addEventListener('click', handlePlaceholderClick);
+            img.addEventListener('mouseenter', () => {
+                img.classList.toggle('over', true);
+            });
+            img.addEventListener('mouseleave', () => {
+                img.classList.toggle('over', false);
+            });
+            img.addEventListener('dragenter', (event) => {
+                event.preventDefault();
+                img.classList.toggle('over', true);
+            });
+            img.addEventListener('dragleave', () => {
+                img.classList.toggle('over', false);
+            });
+            img.addEventListener('dragover', (e) => {
+                if (e.dataTransfer && e.dataTransfer.items) {
+                    for (const item of e.dataTransfer.items) {
+                        if (item.kind === 'file' && item.type.startsWith('image/')) {
+                            e.preventDefault();
+                            e.dataTransfer.dropEffect = 'copy';
+                        }
+                    }
+                }
+            });
+            img.addEventListener('drop', (e) => __awaiter(this, void 0, void 0, function* () {
+                if (e.dataTransfer && e.dataTransfer.files.length) {
+                    e.preventDefault();
+                    yield this.upload(e.dataTransfer.files[0]);
+                }
+            }));
         }
-        this.container.appendChild(this.imagesContainer);
+        this.container.innerHTML = '';
+        this.container.appendChild(img);
         this.addTools();
     }
-    createImageToolContainer(index, file) {
-        const toolContainer = document.createElement('div');
-        toolContainer.classList.add('image-tool-container');
-        const can = this.props.getCapabilities();
+    addTools() {
+        this.manageReactTools();
+        this.container.appendChild(this.createPositionMenuWrapper());
+    }
+    manageReactTools() {
+        var _a;
+        let handleDownload;
+        let handleUpload;
+        let handleReplace;
+        let handleDetach;
+        const src = this.node.attrs.src;
         const files = this.props.getFiles();
-        const doc = this.view.state.doc;
-        if (file) {
+        const file = src && files.filter((f) => f.id === src)[0];
+        const can = this.props.getCapabilities();
+        if (src) {
+            if (file) {
+                handleDownload = () => {
+                    this.props.fileManagement.download(file);
+                };
+            }
+            handleDetach = () => {
+                this.setSrc('');
+            };
+        }
+        if (can.replaceFile) {
+            handleReplace = (file) => {
+                this.setSrc(file.id);
+            };
+        }
+        if (can.uploadFile) {
+            handleUpload = figureUploader(this.upload);
+        }
+        (_a = this.reactTools) === null || _a === void 0 ? void 0 : _a.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),
-                onDownload: () => this.props.fileManagement.download(file),
-                onUpload: () => {
-                    const triggerUpload = figureUploader((file) => this.upload(file, index));
-                    triggerUpload();
-                },
-                onDetach: () => this.detachImage(index),
-                onReplace: (newFile) => this.addImage(newFile.id, index),
+                onDownload: handleDownload,
+                onUpload: handleUpload,
+                onDetach: handleDetach,
+                onReplace: handleReplace,
             };
-            const reactTools = ReactSubView(this.props, FigureOptions, componentProps, this.node, this.getPos, this.view);
-            toolContainer.appendChild(reactTools);
+            this.reactTools = ReactSubView(this.props, FigureOptions, componentProps, this.node, this.getPos, this.view);
+            this.dom.insertBefore(this.reactTools, this.dom.firstChild);
         }
-        return toolContainer;
-    }
-    addNewImagePlaceholder() {
-        const currentImages = this.getCurrentImages();
-        this.setImages([...currentImages, '']);
-    }
-    addImage(src, index) {
-        const currentImages = this.getCurrentImages();
-        const newImages = [...currentImages];
-        newImages[index] = src;
-        this.setImages(newImages);
-    }
-    detachImage(index) {
-        const currentImages = this.getCurrentImages();
-        const newImages = [...currentImages];
-        newImages[index] = '';
-        this.setImages(newImages);
-    }
-    getCurrentImages() {
-        const src = this.node.attrs.src || '';
-        return Array.isArray(src) ? src : [src];
-    }
-    setImages(images) {
-        const src = images.length === 1 ? images[0] : images;
-        const { tr } = this.view.state;
-        const pos = this.getPos();
-        tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, this.node.attrs), { src }));
-        tr.setSelection(NodeSelection.create(tr.doc, pos));
-        this.view.dispatch(tr);
-    }
-    addTools() {
-        this.container.appendChild(this.createPositionMenuWrapper());
     }
 }
 export default createEditableNodeView(FigureEditableView);

package/dist/types/configs/ManuscriptsEditor.d.ts

@@ -52,6 +52,7 @@ export interface EditorProps {
     dispatch?: Dispatch;
     onEditorClick: (pos: number, node: ManuscriptNode, nodePos: number, event: MouseEvent) => void;
     lockBody: boolean;
+    isViewingMode?: boolean;
 }
 export type ExternalProps = Omit<EditorProps, 'popper' | 'dispatch'>;
 export declare const createEditorState: (props: EditorProps) => EditorState;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "2.8.79-test-multiple-images.1";
+export declare const VERSION = "2.8.79";
 export declare const MATHJAX_VERSION = "3.2.2";

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

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { FileAttachment } from '../lib/files';
 import { FigureView } from './figure';
 export declare enum figurePositions {
     left = "half-left",
@@ -24,23 +23,15 @@ export declare class FigureEditableView extends FigureView {
     reactTools: HTMLDivElement;
     positionMenuWrapper: HTMLDivElement;
     figurePosition: string;
-    addImageButton: HTMLButtonElement | null;
-    imagesContainer: HTMLDivElement;
-    imageToolContainers: Map<number, HTMLDivElement>;
     initialise(): void;
-    upload: (file: File, index?: number) => Promise<void>;
+    upload: (file: File) => Promise<void>;
     updateContents(): void;
-    private createImageToolContainer;
-    private addNewImagePlaceholder;
-    private addImage;
-    private detachImage;
-    private getCurrentImages;
-    private setImages;
-    protected createImg: (src: string) => HTMLImageElement;
-    protected createPlaceholder: (index: number) => HTMLDivElement;
-    protected createUnsupportedFormat: (file: FileAttachment, index: number) => HTMLDivElement;
     protected addTools(): void;
+    private manageReactTools;
     protected setSrc: (src: string) => void;
+    private createUnsupportedFormat;
+    protected createImg: (src: string) => HTMLImageElement;
+    protected createPlaceholder: () => HTMLDivElement;
     createPositionMenuWrapper: () => HTMLDivElement;
     showPositionMenu: () => void;
 }

package/package.json

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

package/styles/AdvancedEditor.css

@@ -122,8 +122,6 @@
   text-indent: 0pt;
 }
 
-/* Figures */
-
 .ProseMirror .figure-block {
   width: 100%;
   border: 1px solid #f2f2f2;
@@ -134,11 +132,6 @@
 
   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 {
@@ -151,134 +144,8 @@
   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 .figure-block > figure .figure-images-container .add-image-button {
-  border: 0px;
-  left: -18px;
-  width: 25px;
-  height: 25px;
-  cursor: pointer;
-  border-radius: 50%;
-  position: absolute;
-  background-color: #6E6E6E;
-}
-
-.ProseMirror .figure-block > figure .figure-images-container .add-image-button.disabled {
-  background-color: #E2E2E2 !important;
-}
-
-.ProseMirror .figure-block > figure .figure-images-container .add-image-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 > 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;
 }