@manuscripts/body-editor 3.4.2 → 3.4.4

package/dist/cjs/commands.js

@@ -1113,7 +1113,8 @@ const isCommentingAllowed = (type) => type === transform_1.schema.nodes.title ||
     type === transform_1.schema.nodes.affiliations ||
     type === transform_1.schema.nodes.contributors ||
     type === transform_1.schema.nodes.image_element ||
-    type === transform_1.schema.nodes.hero_image;
+    type === transform_1.schema.nodes.hero_image ||
+    type === transform_1.schema.nodes.trans_abstract;
 exports.isCommentingAllowed = isCommentingAllowed;
 const addNodeComment = (node, state, dispatch) => {
     if (!(0, exports.isCommentingAllowed)(node.type)) {

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

@@ -0,0 +1,215 @@
+"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 __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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const style_guide_1 = require("@manuscripts/style-guide");
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const languages_1 = require("./languages");
+const LanguageOptionItem = ({ language, isSelected, onSelect }) => (react_1.default.createElement(StyledLanguageOption, { key: language.code, onClick: (event) => onSelect(event, language.code) },
+    language.name,
+    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 [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 &&
+                !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+                onClose?.();
+                onCloseParent?.();
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen, onClose, onCloseParent]);
+    const toggleDropdown = (event) => {
+        event.stopPropagation();
+        setIsOpen(!isOpen);
+    };
+    const handleSelect = (event, languageCode) => {
+        event.stopPropagation();
+        onLanguageSelect(languageCode);
+    };
+    const getDisplayName = (languageCode) => {
+        return (0, languages_1.getSelectedLanguageName)(languageCode, allLanguages);
+    };
+    return (react_1.default.createElement(style_guide_1.DropdownContainer, { ref: dropdownRef },
+        showButton && (react_1.default.createElement(LanguageButton, { onClick: toggleDropdown },
+            react_1.default.createElement(ButtonContent, null,
+                react_1.default.createElement(ButtonLabel, null,
+                    "Document language ",
+                    react_1.default.createElement(style_guide_1.TriangleCollapsedIcon, null)),
+                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 })))))));
+};
+const StyledDropdownList = (0, styled_components_1.default)(style_guide_1.DropdownList) `
+  overflow-y: auto;
+  overflow-x: hidden;
+  border-radius: 8px;
+
+  /* Custom scrollbar styling */
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: ${(props) => props.theme.colors.background.secondary};
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #6e6e6e;
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: #6e6e6e;
+  }
+`;
+const LanguageButton = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-family: ${(props) => props.theme.font.family.Lato};
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 24px;
+  color: ${(props) => props.theme.colors.text.primary};
+  padding: 10px 16px;
+  width: 100%;
+
+  &:hover {
+    background: ${(props) => props.theme.colors.background.fifth};
+  }
+`;
+const ButtonContent = styled_components_1.default.span `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`;
+const ButtonLabel = styled_components_1.default.span `
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+
+  svg {
+    top: 10px;
+    right: -10px;
+    position: relative;
+  }
+`;
+const SelectedLanguage = styled_components_1.default.span `
+  font-size: 12px;
+  color: ${(props) => props.theme.colors.text.secondary};
+  margin-top: 2px;
+`;
+const DropdownMenu = (0, styled_components_1.default)(StyledDropdownList) `
+  // Inherits all styles from StyledDropdownList
+`;
+const DropdownTitle = styled_components_1.default.div `
+  font-family: 'PT Sans', sans-serif;
+  font-size: 16px;
+  font-style: italic;
+  font-weight: 400;
+  line-height: 32px;
+  color: #c9c9c9;
+  padding: 12px 16px 8px 16px;
+  border-bottom: 1px solid #c9c9c9;
+  margin-bottom: 4px;
+`;
+const TickIconWrapper = styled_components_1.default.div `
+  svg path {
+    fill: #6e6e6e;
+  }
+`;
+const StyledLanguageOption = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-family: ${(props) => props.theme.font.family.Lato};
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 24px;
+  color: ${(props) => props.theme.colors.text.primary};
+  padding: 10px 16px;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: #f2fbfc;
+  }
+`;
+exports.default = LanguageDropdown;

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

@@ -0,0 +1,134 @@
+"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 };
+};
+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.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)';
+    }
+    const language = allLanguages.find((lang) => lang.code === selectedLanguage) ||
+        exports.ENGLISH_FALLBACK;
+    return language.nativeName && language.nativeName !== language.name
+        ? `${language.name} (${language.nativeName})`
+        : language.name;
+};
+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/configs/editor-views.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const abstracts_1 = __importDefault(require("../views/abstracts"));
 const accessibility_element_1 = __importDefault(require("../views/accessibility_element"));
 const affiliations_1 = __importDefault(require("../views/affiliations"));
 const alt_title_1 = __importDefault(require("../views/alt_title"));
@@ -46,6 +47,7 @@ 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"));
 const title_editable_1 = __importDefault(require("../views/title_editable"));
+const translated_abstract_editable_1 = __importDefault(require("../views/translated_abstract_editable"));
 exports.default = (props, dispatch) => {
     return {
         title: (0, title_editable_1.default)(props, dispatch),
@@ -97,6 +99,7 @@ exports.default = (props, dispatch) => {
         long_desc: (0, accessibility_element_1.default)(props, dispatch),
         alt_text: (0, accessibility_element_1.default)(props, dispatch),
         hero_image: (0, hero_image_editable_1.default)(props, dispatch),
-        trans_abstract: (0, empty_1.default)('trans_abstract'),
+        abstracts: (0, abstracts_1.default)(props),
+        trans_abstract: (0, translated_abstract_editable_1.default)(props),
     };
 };

package/dist/cjs/icons.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.draggableIcon = exports.fileCorruptedIcon = exports.imageDefaultIcon = exports.imageLeftIcon = exports.imageRightIcon = exports.addFigureBtnIcon = exports.plusIcon = exports.lockIcon = exports.scrollIcon = exports.sectionCategoryIcon = exports.editIcon = exports.deleteIcon = exports.alertIcon = exports.arrowUp = exports.arrowDown = void 0;
+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 = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const react_1 = require("react");
 const server_1 = require("react-dom/server");
@@ -14,9 +14,10 @@ exports.sectionCategoryIcon = renderIcon(style_guide_1.SectionCategoryIcon);
 exports.scrollIcon = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(style_guide_1.ScrollIcon));
 exports.lockIcon = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(style_guide_1.LockIcon));
 exports.plusIcon = renderIcon(style_guide_1.PlusIcon);
-exports.addFigureBtnIcon = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(style_guide_1.PlusIcon));
+exports.addBtnIcon = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(style_guide_1.PlusIcon));
 exports.imageRightIcon = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(style_guide_1.ImageRightIcon));
 exports.imageLeftIcon = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(style_guide_1.ImageLeftIcon));
 exports.imageDefaultIcon = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(style_guide_1.ImageDefaultIcon));
 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));

package/dist/cjs/index.js

@@ -28,8 +28,11 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.affiliationLabel = exports.authorLabel = exports.bibliographyItemTypes = exports.metadata = exports.getClosestMatch = exports.getNewMatch = exports.detectInconsistencyPluginKey = exports.searchReplacePluginKey = exports.bibliographyPluginKey = exports.footnotesPluginKey = exports.objectsPluginKey = exports.selectedSuggestionKey = exports.PopperManager = exports.CollabProvider = exports.TypeSelector = exports.OutlineItemIcon = exports.ManuscriptOutline = void 0;
+exports.affiliationLabel = exports.authorLabel = exports.bibliographyItemTypes = exports.metadata = exports.getClosestMatch = exports.getNewMatch = exports.detectInconsistencyPluginKey = exports.searchReplacePluginKey = exports.bibliographyPluginKey = exports.footnotesPluginKey = exports.objectsPluginKey = exports.selectedSuggestionKey = exports.PopperManager = exports.CollabProvider = exports.LanguageDropdown = exports.TypeSelector = exports.OutlineItemIcon = exports.ManuscriptOutline = void 0;
 __exportStar(require("./commands"), exports);
 var ManuscriptOutline_1 = require("./components/outline/ManuscriptOutline");
 Object.defineProperty(exports, "ManuscriptOutline", { enumerable: true, get: function () { return ManuscriptOutline_1.ManuscriptOutline; } });
@@ -37,6 +40,8 @@ var Outline_1 = require("./components/outline/Outline");
 Object.defineProperty(exports, "OutlineItemIcon", { enumerable: true, get: function () { return Outline_1.OutlineItemIcon; } });
 var TypeSelector_1 = require("./components/toolbar/type-selector/TypeSelector");
 Object.defineProperty(exports, "TypeSelector", { enumerable: true, get: function () { return TypeSelector_1.TypeSelector; } });
+var LanguageDropdown_1 = require("./components/LanguageDropdown");
+Object.defineProperty(exports, "LanguageDropdown", { enumerable: true, get: function () { return __importDefault(LanguageDropdown_1).default; } });
 __exportStar(require("./components/toolbar/ListMenuItem"), exports);
 __exportStar(require("./components/toolbar/InsertTableDialog"), exports);
 __exportStar(require("./menus"), exports);

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

package/dist/cjs/views/abstracts.js

@@ -0,0 +1,82 @@
+"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.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({
+                placeholder: 'Type here',
+            });
+            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();
+        this.createElement();
+        this.updateContents();
+    }
+    createDOM() {
+        this.dom = document.createElement(this.elementType);
+        this.dom.classList.add('abstracts');
+    }
+    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();
+    }
+}
+exports.AbstractsView = AbstractsView;
+exports.default = (0, creators_1.createNodeView)(AbstractsView);

package/dist/cjs/views/figure_element.js

@@ -67,8 +67,8 @@ class FigureElementView extends image_element_1.ImageElementView {
     addFigureElementButtons() {
         if (this.props.getCapabilities()?.editArticle) {
             this.addFigureBtn = Object.assign(document.createElement('button'), {
-                className: 'add-figure-button',
-                innerHTML: icons_1.addFigureBtnIcon,
+                className: 'add-button',
+                innerHTML: icons_1.addBtnIcon,
                 title: 'Add figure',
             });
             this.addFigureBtn.addEventListener('click', () => this.addFigure());

package/dist/cjs/views/section_title.js

@@ -61,6 +61,9 @@ class SectionTitleView extends block_view_1.default {
             if ($pos.node($pos.depth - 1).type === transform_1.schema.nodes.box_element) {
                 this.contentDOM.setAttribute('data-placeholder', `Optional box title...`);
             }
+            else if ($pos.node($pos.depth).type === transform_1.schema.nodes.trans_abstract) {
+                this.contentDOM.setAttribute('data-placeholder', `Type new abstract title here`);
+            }
             else {
                 this.contentDOM.setAttribute('data-placeholder', `Type heading here`);
             }

package/dist/cjs/views/translated_abstract.js

@@ -0,0 +1,117 @@
+"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.TransAbstractView = void 0;
+const LanguageDropdown_1 = __importDefault(require("../components/LanguageDropdown"));
+const languages_1 = require("../components/LanguageDropdown/languages");
+const icons_1 = require("../icons");
+const block_view_1 = __importDefault(require("./block_view"));
+const creators_1 = require("./creators");
+const ReactSubView_1 = __importDefault(require("./ReactSubView"));
+class TransAbstractView extends block_view_1.default {
+    constructor() {
+        super(...arguments);
+        this.elementType = 'section';
+        this.languageButton = null;
+        this.handleButtonClick = (e) => {
+            e.stopPropagation();
+            if (this.languageButton) {
+                this.showLanguageDropdown(this.languageButton);
+            }
+        };
+        this.handleLanguageChange = (languageCode) => {
+            this.updateNodeLanguage(languageCode);
+            this.updateButtonContent(languageCode);
+        };
+    }
+    createDOM() {
+        super.createDOM();
+        this.dom.classList.add('block-section');
+    }
+    createElement() {
+        super.createElement();
+        if (this.contentDOM) {
+            this.contentDOM.classList.add('trans-abstract');
+        }
+    }
+    updateContents() {
+        super.updateContents();
+        this.updateLanguageAttributes();
+        this.handleLanguageSelector();
+    }
+    destroy() {
+        this.cleanupLanguageButton();
+        super.destroy();
+    }
+    updateLanguageAttributes() {
+        if (this.contentDOM && this.node.attrs.lang) {
+            this.contentDOM.lang = this.node.attrs.lang;
+        }
+    }
+    handleLanguageSelector() {
+        this.cleanupLanguageButton();
+        if (this.props.getCapabilities()?.editArticle) {
+            this.createLanguageButton();
+        }
+    }
+    createLanguageButton() {
+        this.languageButton = document.createElement('button');
+        this.languageButton.classList.add('language-selector-btn');
+        this.languageButton.setAttribute('data-cy', 'language-selector-btn');
+        this.updateButtonContent();
+        this.languageButton.addEventListener('click', this.handleButtonClick);
+        this.dom.prepend(this.languageButton);
+    }
+    cleanupLanguageButton() {
+        if (this.languageButton) {
+            this.languageButton.removeEventListener('click', this.handleButtonClick);
+            this.languageButton.remove();
+            this.languageButton = null;
+        }
+    }
+    updateButtonContent(languageCode = this.node.attrs.lang || 'en') {
+        if (!this.languageButton) {
+            return;
+        }
+        const languageName = (0, languages_1.getLanguageDisplayName)(languageCode);
+        const finalLanguageName = languageCode === 'en' ? 'English (Default)' : languageName;
+        this.languageButton.innerHTML = `${finalLanguageName} ${icons_1.translateIcon}`;
+    }
+    showLanguageDropdown(trigger) {
+        const currentLanguage = this.node.attrs.lang || 'en';
+        this.props.popper.show(trigger, this.createDropdownContainer(currentLanguage), 'bottom-start', false);
+    }
+    createDropdownContainer(currentLanguage) {
+        return (0, ReactSubView_1.default)(this.props, LanguageDropdown_1.default, {
+            showButton: false,
+            currentLanguage,
+            onLanguageSelect: this.handleLanguageChange,
+        }, this.node, this.getPos.bind(this), this.view, ['abstracts-language-dropdown']);
+    }
+    updateNodeLanguage(languageCode) {
+        const tr = this.view.state.tr.setNodeMarkup(this.getPos(), undefined, {
+            ...this.node.attrs,
+            lang: languageCode,
+        });
+        this.view.dispatch(tr);
+    }
+}
+exports.TransAbstractView = TransAbstractView;
+exports.default = (0, creators_1.createNodeView)(TransAbstractView);