@manuscripts/body-editor 3.6.10 → 3.6.12

package/dist/cjs/commands.js

@@ -297,18 +297,21 @@ const insertTable = (config, state, dispatch) => {
     return true;
 };
 exports.insertTable = insertTable;
-const insertSupplement = (file, state, dispatch) => {
+const insertSupplement = (file, view) => {
     const supplement = transform_1.schema.nodes.supplement.createAndFill({
         id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.supplement),
         href: file.id,
-    });
-    const tr = state.tr;
-    const supplements = (0, doc_1.insertSupplementsNode)(tr);
-    const pos = supplements.pos + supplements.node.nodeSize - 1;
-    tr.insert(pos, supplement);
-    if (dispatch) {
-        dispatch((0, track_changes_plugin_1.skipTracking)(tr));
-    }
+    }, [
+        transform_1.schema.nodes.figcaption.create({}, [
+            transform_1.schema.nodes.caption_title.create(),
+            transform_1.schema.nodes.caption.create(),
+        ]),
+    ]);
+    const tr = view.state.tr;
+    const { pos } = (0, doc_1.upsertSupplementsSection)(tr, supplement);
+    tr.setSelection(prosemirror_state_1.NodeSelection.create(tr.doc, pos));
+    view.focus();
+    view.dispatch(tr.scrollIntoView());
     return true;
 };
 exports.insertSupplement = insertSupplement;

package/dist/cjs/components/LanguageDropdown/index.js

@@ -60,24 +60,9 @@ const LanguageOptionItem = ({ language, isSelected, onSelect }) => (react_1.defa
     language.nativeName && ` (${language.nativeName})`,
     isSelected && (react_1.default.createElement(TickIconWrapper, null,
         react_1.default.createElement(style_guide_1.TickIcon, null)))));
-const LanguageDropdown = ({ onLanguageSelect, onClose, currentLanguage = 'en', showButton = false, selectedLanguageDisplay, onCloseParent, }) => {
-    const [allLanguages, setAllLanguages] = (0, react_1.useState)([]);
+const LanguageDropdown = ({ onLanguageSelect, onClose, currentLanguage = 'en', showButton = false, selectedLanguageDisplay, onCloseParent, languages, }) => {
     const [isOpen, setIsOpen] = (0, react_1.useState)(!showButton);
     const dropdownRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        const loadLanguages = async () => {
-            try {
-                const languages = await (0, languages_1.loadAllLanguages)();
-                const sortedLanguages = (0, languages_1.sortLanguagesByCommonality)(languages);
-                setAllLanguages(sortedLanguages);
-            }
-            catch (error) {
-                console.error('Failed to load language data:', error);
-                setAllLanguages([]);
-            }
-        };
-        loadLanguages();
-    }, []);
     (0, react_1.useEffect)(() => {
         const handleClickOutside = (event) => {
             if (dropdownRef.current &&
@@ -103,7 +88,7 @@ const LanguageDropdown = ({ onLanguageSelect, onClose, currentLanguage = 'en', s
         onLanguageSelect(languageCode);
     };
     const getDisplayName = (languageCode) => {
-        return (0, languages_1.getSelectedLanguageName)(languageCode, allLanguages);
+        return (0, languages_1.getSelectedLanguageName)(languageCode, languages);
     };
     return (react_1.default.createElement(style_guide_1.DropdownContainer, { ref: dropdownRef },
         showButton && (react_1.default.createElement(LanguageButton, { onClick: toggleDropdown },
@@ -114,7 +99,7 @@ const LanguageDropdown = ({ onLanguageSelect, onClose, currentLanguage = 'en', s
                 react_1.default.createElement(SelectedLanguage, null, selectedLanguageDisplay || getDisplayName(currentLanguage))))),
         isOpen && (react_1.default.createElement(DropdownMenu, { direction: "right", width: 231, height: 400, top: 18 },
             !showButton && react_1.default.createElement(DropdownTitle, null, "Choose language"),
-            allLanguages.map((language) => (react_1.default.createElement(LanguageOptionItem, { key: language.code, language: language, isSelected: currentLanguage === language.code, onSelect: handleSelect })))))));
+            languages.map((language) => (react_1.default.createElement(LanguageOptionItem, { key: language.code, language: language, isSelected: currentLanguage === language.code, onSelect: handleSelect })))))));
 };
 const StyledDropdownList = (0, styled_components_1.default)(style_guide_1.DropdownList) `
   overflow-y: auto;

package/dist/cjs/components/LanguageDropdown/languages.js

@@ -1,98 +1,26 @@
 "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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+/*!
+ * © 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.
+ */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sortLanguagesByCommonality = exports.getLanguageDisplayName = exports.getSelectedLanguageName = exports.loadAllLanguages = exports.initializeLanguageData = exports.ENGLISH_FALLBACK = exports.COMMON_LANGUAGES = exports.COMMON_LANGUAGES_INFO = void 0;
-const i18n_iso_languages_1 = __importDefault(require("@cospired/i18n-iso-languages"));
-exports.COMMON_LANGUAGES_INFO = {
-    en: { englishName: 'English', nativeName: 'Default' },
-    es: { englishName: 'Spanish', nativeName: 'Español' },
-    fr: { englishName: 'French', nativeName: 'Français' },
-    de: { englishName: 'German', nativeName: 'Deutsch' },
-    it: { englishName: 'Italian', nativeName: 'Italiano' },
-    pt: { englishName: 'Portuguese', nativeName: 'Português' },
-    ru: { englishName: 'Russian', nativeName: 'Русский' },
-    ja: { englishName: 'Japanese', nativeName: '日本語' },
-    ko: { englishName: 'Korean', nativeName: '한국어' },
-    zh: { englishName: 'Chinese', nativeName: '中文' },
-    ar: { englishName: 'Arabic', nativeName: 'العربية' },
-};
-exports.COMMON_LANGUAGES = Object.keys(exports.COMMON_LANGUAGES_INFO);
+exports.getLanguageDisplayName = exports.getSelectedLanguageName = exports.ENGLISH_FALLBACK = void 0;
 exports.ENGLISH_FALLBACK = {
     code: 'en',
     name: 'English',
     nativeName: 'English',
-    isCommon: true,
-};
-const initializeLanguageData = async () => {
-    try {
-        const englishLanguageData = await Promise.resolve().then(() => __importStar(require('@cospired/i18n-iso-languages/langs/en.json')));
-        i18n_iso_languages_1.default.registerLocale(englishLanguageData.default);
-    }
-    catch (error) {
-        console.error('Failed to initialize language data:', error);
-        throw error;
-    }
 };
-exports.initializeLanguageData = initializeLanguageData;
-const loadAllLanguages = async () => {
-    try {
-        await (0, exports.initializeLanguageData)();
-        const languageCodes = i18n_iso_languages_1.default.getAlpha2Codes();
-        return Object.keys(languageCodes).map((code) => {
-            const commonLanguageInfo = exports.COMMON_LANGUAGES_INFO[code];
-            return {
-                code,
-                name: commonLanguageInfo?.englishName ||
-                    i18n_iso_languages_1.default.getName(code, 'en') ||
-                    code.toUpperCase(),
-                nativeName: commonLanguageInfo?.nativeName ||
-                    i18n_iso_languages_1.default.getName(code, code) ||
-                    undefined,
-                isCommon: exports.COMMON_LANGUAGES.includes(code),
-            };
-        });
-    }
-    catch (error) {
-        console.error('Failed to load languages:', error);
-        return [exports.ENGLISH_FALLBACK];
-    }
-};
-exports.loadAllLanguages = loadAllLanguages;
 const getSelectedLanguageName = (selectedLanguage, allLanguages) => {
     if (!allLanguages.length) {
         return 'English (Default)';
@@ -105,30 +33,6 @@ const getSelectedLanguageName = (selectedLanguage, allLanguages) => {
 };
 exports.getSelectedLanguageName = getSelectedLanguageName;
 const getLanguageDisplayName = (languageCode) => {
-    const languageInfo = exports.COMMON_LANGUAGES_INFO[languageCode];
-    if (languageInfo) {
-        const { englishName, nativeName } = languageInfo;
-        if (nativeName !== englishName && nativeName !== 'Default') {
-            return `${englishName} (${nativeName})`;
-        }
-        return englishName;
-    }
-    const englishName = i18n_iso_languages_1.default.getName(languageCode, 'en');
-    if (englishName) {
-        return englishName;
-    }
     return languageCode.toUpperCase();
 };
 exports.getLanguageDisplayName = getLanguageDisplayName;
-const sortLanguagesByCommonality = (languages) => {
-    return [...languages].sort((a, b) => {
-        if (a.isCommon && !b.isCommon) {
-            return -1;
-        }
-        if (!a.isCommon && b.isCommon) {
-            return 1;
-        }
-        return a.name.localeCompare(b.name);
-    });
-};
-exports.sortLanguagesByCommonality = sortLanguagesByCommonality;

package/dist/cjs/components/outline/DraggableTree.js

@@ -63,6 +63,7 @@ const excludedTypes = [
     transform_1.schema.nodes.trans_abstract,
     transform_1.schema.nodes.subtitles,
     transform_1.schema.nodes.subtitle,
+    transform_1.schema.nodes.supplements,
 ];
 const childrenExcludedTypes = [
     transform_1.schema.nodes.pullquote_element,

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

@@ -47,6 +47,8 @@ const section_label_1 = __importDefault(require("../views/section_label"));
 const section_title_editable_1 = __importDefault(require("../views/section_title_editable"));
 const subtitle_editable_1 = __importDefault(require("../views/subtitle_editable"));
 const subtitles_editable_1 = __importDefault(require("../views/subtitles_editable"));
+const supplement_editable_1 = __importDefault(require("../views/supplement_editable"));
+const supplements_editable_1 = __importDefault(require("../views/supplements_editable"));
 const table_cell_1 = __importDefault(require("../views/table_cell"));
 const table_element_editable_1 = __importDefault(require("../views/table_element_editable"));
 const table_element_footer_1 = __importDefault(require("../views/table_element_footer"));
@@ -96,7 +98,8 @@ exports.default = (props, dispatch) => {
         table_header: (0, table_cell_1.default)(props),
         table_element_footer: (0, table_element_footer_1.default)(props),
         comments: (0, empty_1.default)('comments'),
-        supplements: (0, empty_1.default)('supplements'),
+        supplements: (0, supplements_editable_1.default)(props, dispatch),
+        supplement: (0, supplement_editable_1.default)(props, dispatch),
         author_notes: (0, author_notes_1.default)(props, dispatch),
         awards: (0, awards_1.default)(props, dispatch),
         award: (0, award_1.default)(props, dispatch),

package/dist/cjs/lib/doc.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.findNodeByID = exports.findGraphicalAbstractFigureElement = exports.findFootnotesSection = exports.findBibliographySection = exports.findBackmatter = exports.findBody = exports.findAbstractsNode = exports.insertFootnotesSection = exports.insertAttachmentsNode = exports.insertSupplementsNode = exports.insertAwardsNode = void 0;
+exports.findNodeByID = exports.findGraphicalAbstractFigureElement = exports.findFootnotesSection = exports.findBibliographySection = exports.findBackmatter = exports.findBody = exports.findAbstractsNode = exports.insertFootnotesSection = exports.insertAttachmentsNode = exports.upsertSupplementsSection = exports.insertAwardsNode = void 0;
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_utils_1 = require("prosemirror-utils");
 const utils_1 = require("./utils");
@@ -19,21 +19,23 @@ const insertAwardsNode = (tr) => {
     };
 };
 exports.insertAwardsNode = insertAwardsNode;
-const insertSupplementsNode = (tr) => {
+const upsertSupplementsSection = (tr, supplement) => {
     const doc = tr.doc;
     const supplements = (0, prosemirror_utils_1.findChildrenByType)(doc, transform_1.schema.nodes.supplements)[0];
     if (supplements) {
-        return supplements;
+        const pos = supplements.pos + supplements.node.nodeSize - 1;
+        tr.insert(pos, supplement);
+        return { node: supplements.node, pos };
     }
     const pos = (0, utils_1.findInsertionPosition)(transform_1.schema.nodes.supplements, doc);
-    const node = transform_1.schema.nodes.supplements.createAndFill();
+    const node = transform_1.schema.nodes.supplements.createAndFill({ id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.supplements) }, [supplement]);
     tr.insert(pos, node);
     return {
         node,
         pos,
     };
 };
-exports.insertSupplementsNode = insertSupplementsNode;
+exports.upsertSupplementsSection = upsertSupplementsSection;
 const insertAttachmentsNode = (tr) => {
     const attachmentsNodes = (0, prosemirror_utils_1.findChildrenByType)(tr.doc, transform_1.schema.nodes.attachments);
     if (attachmentsNodes.length) {

package/dist/cjs/plugins/placeholder.js

@@ -84,6 +84,9 @@ exports.default = () => new prosemirror_state_1.Plugin({
                         if ((0, prosemirror_utils_1.findParentNodeOfTypeClosestToPos)($pos, transform_1.schema.nodes.box_element)) {
                             placeholderText = 'Optional box title...';
                         }
+                        if ((0, prosemirror_utils_1.findParentNodeOfTypeClosestToPos)($pos, transform_1.schema.nodes.supplements)) {
+                            placeholderText = 'Supplements';
+                        }
                         decorations.push(prosemirror_view_1.Decoration.widget(pos + 1, placeholderWidget(placeholderText)));
                     }
                     else if (node.type === node.type.schema.nodes.trans_abstract) {

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

package/dist/cjs/views/abstracts.js

@@ -16,29 +16,12 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AbstractsView = void 0;
-const prosemirror_state_1 = require("prosemirror-state");
-const icons_1 = require("../icons");
 const base_node_view_1 = require("./base_node_view");
 const creators_1 = require("./creators");
 class AbstractsView extends base_node_view_1.BaseNodeView {
     constructor() {
         super(...arguments);
         this.elementType = 'div';
-        this.addTranslation = () => {
-            const { state } = this.view;
-            const { schema } = state;
-            const documentLanguage = state.doc.attrs.primaryLanguageCode || 'en';
-            const sectionTitle = schema.nodes.section_title.create();
-            const paragraph = schema.nodes.paragraph.create();
-            const transAbstractNode = schema.nodes.trans_abstract.create({
-                lang: documentLanguage,
-            }, [sectionTitle, paragraph]);
-            const tr = state.tr.insert(this.getPos() + this.node.nodeSize - 1, transAbstractNode);
-            const titlePos = this.getPos() + this.node.nodeSize;
-            const selection = prosemirror_state_1.TextSelection.create(tr.doc, titlePos);
-            tr.setSelection(selection).scrollIntoView();
-            this.view.dispatch(tr);
-        };
     }
     initialise() {
         this.createDOM();
@@ -52,25 +35,6 @@ class AbstractsView extends base_node_view_1.BaseNodeView {
     createElement() {
         this.contentDOM = document.createElement(this.elementType);
         this.dom.appendChild(this.contentDOM);
-        this.addTranslationBtn();
-    }
-    addTranslationBtn() {
-        if (this.props.getCapabilities()?.editArticle) {
-            const btnContainer = document.createElement('div');
-            btnContainer.classList.add('add-translation-container');
-            btnContainer.addEventListener('click', () => this.addTranslation());
-            const addTranslationBtn = Object.assign(document.createElement('button'), {
-                className: 'add-button',
-                innerHTML: icons_1.addBtnIcon,
-                title: 'Add Translation',
-            });
-            const textElement = document.createElement('span');
-            textElement.textContent = 'Add translation';
-            textElement.classList.add('add-translation-text');
-            btnContainer.appendChild(addTranslationBtn);
-            btnContainer.appendChild(textElement);
-            this.dom.prepend(btnContainer);
-        }
     }
     updateContents() {
         super.updateContents();

package/dist/cjs/views/editable_block.js

@@ -42,6 +42,7 @@ const EditableBlock = (Base) => {
             const nodeType = this.node.type;
             if (nodeType === transform_1.schema.nodes.hero_image ||
                 nodeType === transform_1.schema.nodes.subtitles ||
+                nodeType === transform_1.schema.nodes.supplements ||
                 (0, utils_1.hasParent)($pos, [
                     transform_1.schema.nodes.keywords,
                     transform_1.schema.nodes.bibliography_section,

package/dist/cjs/views/section.js

@@ -19,6 +19,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SectionView = void 0;
+const transform_1 = require("@manuscripts/transform");
+const prosemirror_state_1 = require("prosemirror-state");
+const prosemirror_utils_1 = require("prosemirror-utils");
+const icons_1 = require("../icons");
 const section_title_1 = require("../plugins/section_title");
 const block_view_1 = __importDefault(require("./block_view"));
 const creators_1 = require("./creators");
@@ -26,6 +30,26 @@ class SectionView extends block_view_1.default {
     constructor() {
         super(...arguments);
         this.elementType = 'section';
+        this.addTranslationButton = null;
+        this.addTranslation = () => {
+            const { state } = this.view;
+            const { schema } = state;
+            const documentLanguage = state.doc.attrs.primaryLanguageCode || 'en';
+            const sectionTitle = schema.nodes.section_title.create();
+            const paragraph = schema.nodes.paragraph.create();
+            const transAbstractNode = schema.nodes.trans_abstract.create({
+                lang: documentLanguage,
+                category: this.node.attrs.category,
+            }, [sectionTitle, paragraph]);
+            const abstracts = (0, prosemirror_utils_1.findParentNodeOfTypeClosestToPos)(this.view.state.doc.resolve(this.getPos()), schema.nodes.abstracts);
+            if (abstracts) {
+                const tr = state.tr.insert(abstracts.pos + abstracts.node.nodeSize - 1, transAbstractNode);
+                const titlePos = abstracts.pos + abstracts.node.nodeSize;
+                const selection = prosemirror_state_1.TextSelection.create(tr.doc, titlePos);
+                tr.setSelection(selection).scrollIntoView();
+                this.view.dispatch(tr);
+            }
+        };
     }
     initialise() {
         this.createDOM();
@@ -40,6 +64,7 @@ class SectionView extends block_view_1.default {
         super.updateContents();
         this.dom.setAttribute('data-category', this.node.attrs.category);
         this.handleSectionNumbering();
+        this.handleAddTranslationButton();
     }
     handleSectionNumbering() {
         const sections = section_title_1.sectionTitleKey.getState(this.view.state);
@@ -54,6 +79,64 @@ class SectionView extends block_view_1.default {
             }
         });
     }
+    handleAddTranslationButton() {
+        this.cleanupAddTranslationButton();
+        const $pos = this.view.state.doc.resolve(this.getPos());
+        const isInAbstracts = (0, prosemirror_utils_1.findParentNodeOfTypeClosestToPos)($pos, transform_1.schema.nodes.abstracts);
+        const isAbstractCategory = this.isAbstractCategory(this.node.attrs.category);
+        if (isInAbstracts &&
+            isAbstractCategory &&
+            this.props.getCapabilities()?.editArticle) {
+            this.createAddTranslationButton();
+        }
+    }
+    isAbstractCategory(category) {
+        const sectionCategories = this.props.sectionCategories;
+        if (!sectionCategories) {
+            return false;
+        }
+        const categoryObj = sectionCategories.get(category);
+        if (!categoryObj) {
+            return false;
+        }
+        return (categoryObj.group === 'abstracts' ||
+            categoryObj.group === 'abstracts-graphic');
+    }
+    createAddTranslationButton() {
+        const btnContainer = document.createElement('div');
+        btnContainer.classList.add('add-translation-container');
+        btnContainer.addEventListener('mousedown', (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.addTranslation();
+        });
+        const addTranslationBtn = Object.assign(document.createElement('button'), {
+            className: 'add-button',
+            innerHTML: icons_1.addBtnIcon,
+            title: 'Add Translation',
+            type: 'button',
+        });
+        const textElement = document.createElement('span');
+        textElement.textContent = 'Add translation';
+        textElement.classList.add('add-translation-text');
+        btnContainer.appendChild(addTranslationBtn);
+        btnContainer.appendChild(textElement);
+        this.dom.appendChild(btnContainer);
+        this.addTranslationButton = addTranslationBtn;
+    }
+    cleanupAddTranslationButton() {
+        if (this.addTranslationButton) {
+            const container = this.addTranslationButton.closest('.add-translation-container');
+            if (container) {
+                container.remove();
+            }
+            this.addTranslationButton = null;
+        }
+    }
+    destroy() {
+        this.cleanupAddTranslationButton();
+        super.destroy();
+    }
 }
 exports.SectionView = SectionView;
 exports.default = (0, creators_1.createNodeView)(SectionView);

package/dist/cjs/views/section_title.js

@@ -32,6 +32,7 @@ class SectionTitleView extends block_view_1.default {
             transform_1.schema.nodes.bibliography_section,
             transform_1.schema.nodes.footnotes_section,
             transform_1.schema.nodes.graphical_abstract_section,
+            transform_1.schema.nodes.supplements,
         ];
         this.createElement = () => {
             this.contentDOM = document.createElement(this.elementType);

package/dist/cjs/views/supplement.js

@@ -0,0 +1,175 @@
+"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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SupplementView = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const server_1 = require("react-dom/server");
+const icons_1 = require("../icons");
+const doc_1 = require("../lib/doc");
+const base_node_view_1 = require("./base_node_view");
+const creators_1 = require("./creators");
+class SupplementView extends base_node_view_1.BaseNodeView {
+    constructor() {
+        super(...arguments);
+        this.ignoreMutation = () => true;
+        this.createElement = () => {
+            this.dom = document.createElement('div');
+            this.dom.classList.add('supplement-item');
+            this.dom.classList.add('block');
+            this.dom.setAttribute('id', this.node.attrs.id);
+            this.dom.setAttribute('href', this.node.attrs.href);
+            this.dom.draggable = true;
+            this.contentDOM = document.createElement('div');
+            this.contentDOM.classList.add('supplement-caption');
+            this.dom.appendChild(this.contentDOM);
+            this.addFileInfo();
+            this.addDragIcon();
+        };
+    }
+    initialise() {
+        this.createElement();
+        this.updateContents();
+        this.setupDragAndDrop();
+    }
+    updateContents() {
+        super.updateContents();
+        this.refreshFileInfo();
+    }
+    getDropSide(element, clientY) {
+        const { top, bottom } = element.getBoundingClientRect();
+        const middleY = (top + bottom) / 2;
+        return clientY > middleY ? 'after' : 'before';
+    }
+    noActualMove(currentPos, nodeSize, targetPos) {
+        return targetPos === currentPos || targetPos === currentPos + nodeSize;
+    }
+    handleDragStart() {
+        const supplementId = this.node.attrs.id;
+        SupplementView.currentDragSupplementId = supplementId;
+        this.dom.classList.add('dragging');
+    }
+    setupDragAndDrop() {
+        const clearDropClasses = () => {
+            this.dom.classList.remove('drop-target-above', 'drop-target-below');
+        };
+        this.dom.addEventListener('dragstart', () => {
+            if (this.node.attrs.id) {
+                this.handleDragStart();
+            }
+        });
+        this.dom.addEventListener('dragend', () => {
+            SupplementView.currentDragSupplementId = null;
+            this.dom.classList.remove('dragging');
+            clearDropClasses();
+        });
+        this.dom.addEventListener('dragover', (e) => {
+            if (SupplementView.currentDragSupplementId) {
+                e.preventDefault();
+                e.stopPropagation();
+                const side = this.getDropSide(this.dom, e.clientY);
+                clearDropClasses();
+                this.dom.classList.add(side === 'before' ? 'drop-target-above' : 'drop-target-below');
+            }
+        });
+        this.dom.addEventListener('dragleave', (e) => {
+            if (!this.dom.contains(e.relatedTarget)) {
+                clearDropClasses();
+            }
+        });
+        this.dom.addEventListener('drop', (e) => {
+            if (!SupplementView.currentDragSupplementId) {
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            const supplementId = SupplementView.currentDragSupplementId;
+            if (!supplementId) {
+                return;
+            }
+            const { state } = this.view;
+            const supplement = (0, doc_1.findNodeByID)(state.doc, supplementId);
+            if (!supplement) {
+                return;
+            }
+            const toPos = this.getPos();
+            const side = this.getDropSide(this.dom, e.clientY);
+            const targetPos = side === 'before' ? toPos : toPos + this.node.nodeSize;
+            if (this.noActualMove(supplement.pos, supplement.node.nodeSize, targetPos)) {
+                clearDropClasses();
+                return;
+            }
+            this.moveSupplement(supplement.pos, supplement.node, targetPos);
+            clearDropClasses();
+        });
+    }
+    moveSupplement(fromPos, fromNode, targetPos) {
+        const { state } = this.view;
+        const { tr } = state;
+        tr.insert(targetPos, fromNode);
+        const mappedFrom = tr.mapping.map(fromPos, -1);
+        tr.delete(mappedFrom, mappedFrom + fromNode.nodeSize);
+        this.view.dispatch(tr);
+    }
+    addFileInfo() {
+        this.supplementInfoEl = document.createElement('div');
+        this.supplementInfoEl.classList.add('supplement-file-info');
+        this.supplementInfoEl.contentEditable = 'false';
+        const files = this.props.getFiles();
+        const file = files.find((f) => f.id === this.node.attrs.href);
+        if (file) {
+            const iconElement = document.createElement('span');
+            iconElement.classList.add('supplement-file-icon');
+            const icon = (0, style_guide_1.getFileIcon)(file.name);
+            if (icon) {
+                iconElement.innerHTML = (0, server_1.renderToStaticMarkup)(icon);
+            }
+            this.supplementInfoEl.appendChild(iconElement);
+            const fileName = document.createElement('span');
+            fileName.classList.add('supplement-file-name');
+            fileName.textContent = file.name;
+            this.supplementInfoEl.appendChild(fileName);
+        }
+        else {
+            const placeholder = document.createElement('span');
+            placeholder.textContent = 'File not found';
+            this.supplementInfoEl.appendChild(placeholder);
+        }
+        this.dom.appendChild(this.supplementInfoEl);
+    }
+    refreshFileInfo() {
+        this.supplementInfoEl.remove();
+        this.addFileInfo();
+    }
+    addDragIcon() {
+        if (this.dragIcon) {
+            this.dragIcon.remove();
+            this.dragIcon = undefined;
+        }
+        const dragIcon = document.createElement('div');
+        dragIcon.className = 'drag-icon';
+        dragIcon.innerHTML = icons_1.draggableIcon;
+        dragIcon.draggable = false;
+        dragIcon.addEventListener('mousedown', (e) => {
+            e.stopPropagation();
+        });
+        this.dragIcon = dragIcon;
+        this.dom.appendChild(dragIcon);
+    }
+}
+exports.SupplementView = SupplementView;
+SupplementView.currentDragSupplementId = null;
+exports.default = (0, creators_1.createNodeView)(SupplementView);