@manuscripts/body-editor 3.5.9 → 3.5.11

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

@@ -8,6 +8,8 @@ const accessibility_element_1 = __importDefault(require("../views/accessibility_
 const affiliations_1 = __importDefault(require("../views/affiliations"));
 const alt_title_1 = __importDefault(require("../views/alt_title"));
 const alt_titles_section_1 = __importDefault(require("../views/alt_titles_section"));
+const attachment_1 = __importDefault(require("../views/attachment"));
+const attachments_1 = __importDefault(require("../views/attachments"));
 const author_notes_1 = __importDefault(require("../views/author_notes"));
 const award_1 = __importDefault(require("../views/award"));
 const awards_1 = __importDefault(require("../views/awards"));
@@ -103,5 +105,7 @@ exports.default = (props, dispatch) => {
         hero_image: (0, hero_image_editable_1.default)(props, dispatch),
         abstracts: (0, abstracts_1.default)(props),
         trans_abstract: (0, translated_abstract_editable_1.default)(props),
+        attachment: (0, attachment_1.default)(props, dispatch),
+        attachments: (0, attachments_1.default)(props, dispatch),
     };
 };

package/dist/cjs/icons.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.translateIcon = exports.draggableIcon = exports.fileCorruptedIcon = exports.imageDefaultIcon = exports.imageLeftIcon = exports.imageRightIcon = exports.addBtnIcon = exports.plusIcon = exports.lockIcon = exports.scrollIcon = exports.sectionCategoryIcon = exports.editIcon = exports.deleteIcon = exports.alertIcon = exports.arrowUp = exports.arrowDown = exports.addAuthorIcon = void 0;
+exports.fileMainDocumentIcon = exports.translateIcon = exports.draggableIcon = exports.fileCorruptedIcon = exports.imageDefaultIcon = exports.imageLeftIcon = exports.imageRightIcon = exports.addBtnIcon = exports.plusIcon = exports.lockIcon = exports.scrollIcon = exports.sectionCategoryIcon = exports.editIcon = exports.deleteIcon = exports.alertIcon = exports.arrowUp = exports.arrowDown = exports.addAuthorIcon = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const react_1 = require("react");
 const server_1 = require("react-dom/server");
@@ -22,3 +22,4 @@ exports.imageDefaultIcon = (0, server_1.renderToStaticMarkup)((0, react_1.create
 exports.fileCorruptedIcon = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(style_guide_1.FileCorruptedIcon));
 exports.draggableIcon = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(style_guide_1.DraggableIcon));
 exports.translateIcon = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(style_guide_1.TranslateIcon));
+exports.fileMainDocumentIcon = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(style_guide_1.FileMainDocumentIcon));

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

package/dist/cjs/views/attachment.js

@@ -0,0 +1,131 @@
+"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.AttachmentView = void 0;
+const icons_1 = require("../icons");
+const block_view_1 = __importDefault(require("./block_view"));
+const creators_1 = require("./creators");
+class AttachmentView extends block_view_1.default {
+    constructor() {
+        super(...arguments);
+        this.createElement = () => {
+            this.createContainer();
+            this.renderView();
+        };
+    }
+    updateContents() {
+        this.renderView();
+    }
+    renderView() {
+        this.container.innerHTML = '';
+        const file = this.getFileFromAttachment();
+        if (!file) {
+            return;
+        }
+        if (this.isPDF(file)) {
+            this.createPDFPreview(file);
+        }
+    }
+    createContainer() {
+        this.container = document.createElement('div');
+        this.container.classList.add('attachment-item');
+        this.container.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.setMainDocumentSelection();
+        });
+        this.dom.appendChild(this.container);
+    }
+    isPDF(file) {
+        return file.name?.toLowerCase().endsWith('.pdf') ?? false;
+    }
+    getFileFromAttachment() {
+        const { href } = this.node.attrs;
+        if (!href) {
+            return null;
+        }
+        const files = this.props?.getFiles?.() || [];
+        return files.find((f) => f.id === href) || null;
+    }
+    createPDFPreview(file) {
+        this.container.setAttribute('data-pdf-preview', file.id);
+        const header = this.createHeader(file);
+        const content = this.createContent(file);
+        this.container.appendChild(header);
+        this.container.appendChild(content);
+    }
+    createHeader(file) {
+        const header = document.createElement('div');
+        header.className = 'attachment-header';
+        const icon = this.createIcon();
+        const name = this.createFileName(file.name);
+        header.append(icon, name);
+        return header;
+    }
+    createIcon() {
+        const icon = document.createElement('span');
+        icon.className = 'attachment-icon';
+        icon.innerHTML = icons_1.fileMainDocumentIcon;
+        return icon;
+    }
+    createFileName(fileName) {
+        const name = document.createElement('span');
+        Object.assign(name, {
+            textContent: fileName,
+            className: 'attachment-name',
+            title: fileName,
+        });
+        return name;
+    }
+    createContent(file) {
+        const content = document.createElement('div');
+        content.className = 'attachment-content';
+        const embed = document.createElement('embed');
+        Object.assign(embed, {
+            src: this.getPDFUrl(file),
+            type: 'application/pdf',
+            className: 'attachment-pdf',
+            height: '400px',
+            width: '100%',
+        });
+        embed.style.border = 'none';
+        content.appendChild(embed);
+        return content;
+    }
+    getPDFUrl(file) {
+        const baseUrl = file.link || file.id || '#';
+        if (baseUrl && baseUrl !== '#') {
+            const separator = baseUrl.includes('?') ? '&' : '?';
+            return `${baseUrl}${separator}inline=true`;
+        }
+        return baseUrl;
+    }
+    setMainDocumentSelection() {
+        if (this.props.onEditorClick) {
+            const event = {
+                target: { dataset: { action: 'select-main-document' } },
+                stopPropagation: () => {
+                },
+            };
+            this.props.onEditorClick(this.getPos(), this.node, this.getPos(), event);
+        }
+    }
+}
+exports.AttachmentView = AttachmentView;
+exports.default = (0, creators_1.createNodeView)(AttachmentView);

package/dist/cjs/views/attachments.js

@@ -0,0 +1,64 @@
+"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.AttachmentsView = void 0;
+const icons_1 = require("../icons");
+const block_view_1 = __importDefault(require("./block_view"));
+const creators_1 = require("./creators");
+class AttachmentsView extends block_view_1.default {
+    constructor() {
+        super(...arguments);
+        this.collapsed = false;
+        this.ignoreMutation = () => true;
+        this.createElement = () => {
+            this.container = document.createElement('div');
+            this.container.classList.add('block', 'attachments-container');
+            this.dom.appendChild(this.container);
+            this.container.appendChild(this.createPanel());
+            const content = document.createElement('div');
+            content.className = 'attachments-content';
+            this.container.appendChild(content);
+            this.contentDOM = content;
+        };
+    }
+    createPanel() {
+        const panel = document.createElement('div');
+        panel.classList.add('panel-header');
+        const label = document.createElement('span');
+        label.textContent = 'Main Document';
+        label.contentEditable = 'false';
+        const toggleBtn = document.createElement('button');
+        toggleBtn.classList.add('toggle-btn', 'button-reset');
+        toggleBtn.innerHTML = icons_1.arrowUp;
+        toggleBtn.classList.toggle('collapsed', this.collapsed);
+        toggleBtn.onclick = () => {
+            this.collapsed = !this.collapsed;
+            if (this.contentDOM) {
+                this.contentDOM.style.display = this.collapsed ? 'none' : '';
+            }
+            toggleBtn.classList.toggle('collapsed', this.collapsed);
+        };
+        panel.appendChild(label);
+        panel.appendChild(toggleBtn);
+        return panel;
+    }
+}
+exports.AttachmentsView = AttachmentsView;
+exports.default = (0, creators_1.createNodeView)(AttachmentsView);

package/dist/cjs/views/hero_image.js

@@ -40,12 +40,12 @@ class HeroImageView extends block_view_1.default {
     }
     createPanel() {
         const panel = document.createElement('div');
-        panel.classList.add('hero-image-panel');
+        panel.classList.add('panel-header');
         const label = document.createElement('span');
         label.textContent = 'Hero image';
         label.contentEditable = 'false';
         const heroImageToggleBtn = document.createElement('button');
-        heroImageToggleBtn.classList.add('hero-image-toggle-btn', 'button-reset');
+        heroImageToggleBtn.classList.add('toggle-btn', 'button-reset');
         heroImageToggleBtn.innerHTML = icons_1.arrowUp;
         heroImageToggleBtn.classList.toggle('collapsed', this.collapsed);
         heroImageToggleBtn.onclick = () => {

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

@@ -3,6 +3,8 @@ import accessibilityElement from '../views/accessibility_element';
 import affiliations from '../views/affiliations';
 import alt_title from '../views/alt_title';
 import alt_titles_section from '../views/alt_titles_section';
+import attachment from '../views/attachment';
+import attachments from '../views/attachments';
 import authorNotes from '../views/author_notes';
 import award from '../views/award';
 import awards from '../views/awards';
@@ -98,5 +100,7 @@ export default (props, dispatch) => {
         hero_image: heroImage(props, dispatch),
         abstracts: abstracts(props),
         trans_abstract: transAbstract(props),
+        attachment: attachment(props, dispatch),
+        attachments: attachments(props, dispatch),
     };
 };

package/dist/es/icons.js

@@ -1,4 +1,4 @@
-import { AddAuthorIcon, AlertIcon, ArrowDownCircleIcon, ArrowUpIcon, DeleteIcon, DraggableIcon, EditIcon, FileCorruptedIcon, ImageDefaultIcon, ImageLeftIcon, ImageRightIcon, LockIcon, PlusIcon, ScrollIcon, SectionCategoryIcon, TranslateIcon, } from '@manuscripts/style-guide';
+import { AddAuthorIcon, AlertIcon, ArrowDownCircleIcon, ArrowUpIcon, DeleteIcon, DraggableIcon, EditIcon, FileCorruptedIcon, FileMainDocumentIcon, ImageDefaultIcon, ImageLeftIcon, ImageRightIcon, LockIcon, PlusIcon, ScrollIcon, SectionCategoryIcon, TranslateIcon, } from '@manuscripts/style-guide';
 import { createElement } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 const renderIcon = (c) => renderToStaticMarkup(createElement(c));
@@ -19,3 +19,4 @@ export const imageDefaultIcon = renderToStaticMarkup(createElement(ImageDefaultI
 export const fileCorruptedIcon = renderToStaticMarkup(createElement(FileCorruptedIcon));
 export const draggableIcon = renderToStaticMarkup(createElement(DraggableIcon));
 export const translateIcon = renderToStaticMarkup(createElement(TranslateIcon));
+export const fileMainDocumentIcon = renderToStaticMarkup(createElement(FileMainDocumentIcon));

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.5.9';
+export const VERSION = '3.5.11';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/attachment.js

@@ -0,0 +1,124 @@
+/*!
+ * © 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 { fileMainDocumentIcon } from '../icons';
+import BlockView from './block_view';
+import { createNodeView } from './creators';
+export class AttachmentView extends BlockView {
+    constructor() {
+        super(...arguments);
+        this.createElement = () => {
+            this.createContainer();
+            this.renderView();
+        };
+    }
+    updateContents() {
+        this.renderView();
+    }
+    renderView() {
+        this.container.innerHTML = '';
+        const file = this.getFileFromAttachment();
+        if (!file) {
+            return;
+        }
+        if (this.isPDF(file)) {
+            this.createPDFPreview(file);
+        }
+    }
+    createContainer() {
+        this.container = document.createElement('div');
+        this.container.classList.add('attachment-item');
+        this.container.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.setMainDocumentSelection();
+        });
+        this.dom.appendChild(this.container);
+    }
+    isPDF(file) {
+        return file.name?.toLowerCase().endsWith('.pdf') ?? false;
+    }
+    getFileFromAttachment() {
+        const { href } = this.node.attrs;
+        if (!href) {
+            return null;
+        }
+        const files = this.props?.getFiles?.() || [];
+        return files.find((f) => f.id === href) || null;
+    }
+    createPDFPreview(file) {
+        this.container.setAttribute('data-pdf-preview', file.id);
+        const header = this.createHeader(file);
+        const content = this.createContent(file);
+        this.container.appendChild(header);
+        this.container.appendChild(content);
+    }
+    createHeader(file) {
+        const header = document.createElement('div');
+        header.className = 'attachment-header';
+        const icon = this.createIcon();
+        const name = this.createFileName(file.name);
+        header.append(icon, name);
+        return header;
+    }
+    createIcon() {
+        const icon = document.createElement('span');
+        icon.className = 'attachment-icon';
+        icon.innerHTML = fileMainDocumentIcon;
+        return icon;
+    }
+    createFileName(fileName) {
+        const name = document.createElement('span');
+        Object.assign(name, {
+            textContent: fileName,
+            className: 'attachment-name',
+            title: fileName,
+        });
+        return name;
+    }
+    createContent(file) {
+        const content = document.createElement('div');
+        content.className = 'attachment-content';
+        const embed = document.createElement('embed');
+        Object.assign(embed, {
+            src: this.getPDFUrl(file),
+            type: 'application/pdf',
+            className: 'attachment-pdf',
+            height: '400px',
+            width: '100%',
+        });
+        embed.style.border = 'none';
+        content.appendChild(embed);
+        return content;
+    }
+    getPDFUrl(file) {
+        const baseUrl = file.link || file.id || '#';
+        if (baseUrl && baseUrl !== '#') {
+            const separator = baseUrl.includes('?') ? '&' : '?';
+            return `${baseUrl}${separator}inline=true`;
+        }
+        return baseUrl;
+    }
+    setMainDocumentSelection() {
+        if (this.props.onEditorClick) {
+            const event = {
+                target: { dataset: { action: 'select-main-document' } },
+                stopPropagation: () => {
+                },
+            };
+            this.props.onEditorClick(this.getPos(), this.node, this.getPos(), event);
+        }
+    }
+}
+export default createNodeView(AttachmentView);

package/dist/es/views/attachments.js

@@ -0,0 +1,57 @@
+/*!
+ * © 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 { arrowUp } from '../icons';
+import BlockView from './block_view';
+import { createNodeView } from './creators';
+export class AttachmentsView extends BlockView {
+    constructor() {
+        super(...arguments);
+        this.collapsed = false;
+        this.ignoreMutation = () => true;
+        this.createElement = () => {
+            this.container = document.createElement('div');
+            this.container.classList.add('block', 'attachments-container');
+            this.dom.appendChild(this.container);
+            this.container.appendChild(this.createPanel());
+            const content = document.createElement('div');
+            content.className = 'attachments-content';
+            this.container.appendChild(content);
+            this.contentDOM = content;
+        };
+    }
+    createPanel() {
+        const panel = document.createElement('div');
+        panel.classList.add('panel-header');
+        const label = document.createElement('span');
+        label.textContent = 'Main Document';
+        label.contentEditable = 'false';
+        const toggleBtn = document.createElement('button');
+        toggleBtn.classList.add('toggle-btn', 'button-reset');
+        toggleBtn.innerHTML = arrowUp;
+        toggleBtn.classList.toggle('collapsed', this.collapsed);
+        toggleBtn.onclick = () => {
+            this.collapsed = !this.collapsed;
+            if (this.contentDOM) {
+                this.contentDOM.style.display = this.collapsed ? 'none' : '';
+            }
+            toggleBtn.classList.toggle('collapsed', this.collapsed);
+        };
+        panel.appendChild(label);
+        panel.appendChild(toggleBtn);
+        return panel;
+    }
+}
+export default createNodeView(AttachmentsView);

package/dist/es/views/hero_image.js

@@ -34,12 +34,12 @@ export class HeroImageView extends BlockView {
     }
     createPanel() {
         const panel = document.createElement('div');
-        panel.classList.add('hero-image-panel');
+        panel.classList.add('panel-header');
         const label = document.createElement('span');
         label.textContent = 'Hero image';
         label.contentEditable = 'false';
         const heroImageToggleBtn = document.createElement('button');
-        heroImageToggleBtn.classList.add('hero-image-toggle-btn', 'button-reset');
+        heroImageToggleBtn.classList.add('toggle-btn', 'button-reset');
         heroImageToggleBtn.innerHTML = arrowUp;
         heroImageToggleBtn.classList.toggle('collapsed', this.collapsed);
         heroImageToggleBtn.onclick = () => {

package/dist/types/icons.d.ts

@@ -15,3 +15,4 @@ export declare const imageDefaultIcon: string;
 export declare const fileCorruptedIcon: string;
 export declare const draggableIcon: string;
 export declare const translateIcon: string;
+export declare const fileMainDocumentIcon: string;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.5.9";
+export declare const VERSION = "3.5.11";
 export declare const MATHJAX_VERSION = "3.2.2";

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

@@ -0,0 +1,36 @@
+/*!
+ * © 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 { AttachmentNode } from '@manuscripts/transform';
+import { Trackable } from '../types';
+import BlockView from './block_view';
+export declare class AttachmentView extends BlockView<Trackable<AttachmentNode>> {
+    private container;
+    createElement: () => void;
+    updateContents(): void;
+    private renderView;
+    private createContainer;
+    private isPDF;
+    private getFileFromAttachment;
+    private createPDFPreview;
+    private createHeader;
+    private createIcon;
+    private createFileName;
+    private createContent;
+    private getPDFUrl;
+    private setMainDocumentSelection;
+}
+declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch) => import("../types").NodeViewCreator<AttachmentView>;
+export default _default;

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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "3.5.9",
+  "version": "3.5.11",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -40,7 +40,7 @@
     "@iarna/word-count": "1.1.2",
     "@manuscripts/json-schema": "2.2.12",
     "@manuscripts/style-guide": "3.3.0",
-    "@manuscripts/track-changes-plugin": "2.0.12",
+    "@manuscripts/track-changes-plugin": "2.0.13",
     "@manuscripts/transform": "4.2.17",
     "@popperjs/core": "2.11.8",
     "citeproc": "2.4.63",

package/styles/AdvancedEditor.css

@@ -1607,10 +1607,14 @@ th:hover > .table-context-menu-button,
   left: 93%;
 }
 
-.hero-image-container {
+.block-hero_image {
+  margin-bottom: 30px;
+}
+
+.hero-image-container, .attachments-container {
   border: 1px solid #c9c9c9;
   border-radius: 4px;
-  background: white;
+  background: #ffffff;
   padding: 0 !important;
 }
 
@@ -1621,7 +1625,7 @@ th:hover > .table-context-menu-button,
   margin: 0 35pt 32px 35pt;
 }
 
-.hero-image-panel {
+.panel-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -1640,11 +1644,14 @@ th:hover > .table-context-menu-button,
 .hero-image-container .position-menu {
   display: none !important;
 }
-.hero-image-toggle-btn svg {
+.toggle-btn {
+  cursor: pointer;
+}
+.toggle-btn svg {
   width: 16px;
   height: 9px;
 }
-.hero-image-toggle-btn.collapsed svg {
+.toggle-btn.collapsed svg {
   transform: rotate(180deg);
 }
 
@@ -1793,3 +1800,66 @@ th:hover > .table-context-menu-button,
 .ProseMirror .abstracts.empty-node .add-translation-container {
   display: none;
 }
+
+/* Attachment styles */
+.attachments-container .attachment-item {
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 16px;
+  margin: 15px !important;
+  background: #f9f9f9;
+  cursor: pointer;
+}
+
+ .attachments-container .attachment-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.attachments-container .attachment-item .attachment-icon {
+  margin-right: 12px;
+}
+
+.attachments-container .attachment-item .attachment-name {
+  font-weight: bold;
+  color: #333;
+  flex: 1;
+}
+
+.attachments-container .attachment-item .attachment-badge {
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.attachments-container .attachment-item .attachment-badge.pdf {
+  background: #28a745;
+  color: white;
+}
+
+.attachments-container .attachment-item .attachment-badge.file {
+  background: #6c757d;
+  color: white;
+}
+
+.attachments-container .attachment-item .attachment-content {
+  text-align: center;
+  margin: 20px;
+}
+
+.attachments-container .attachment-item .attachment-iframe {
+  width: 100%;
+  height: 500px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  margin-bottom: 12px;
+}
+
+
+.block-attachments:has(.attachment-item:empty), .block-attachments.empty-node {
+  display: none !important;
+}