@manuscripts/body-editor 3.8.1 → 3.8.3

package/dist/{cjs/components/LanguageDropdown → es/lib}/languages.js

@@ -1,4 +1,3 @@
-"use strict";
 /*!
  * © 2025 Atypon Systems LLC
  *
@@ -14,25 +13,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getLanguageDisplayName = exports.getSelectedLanguageName = exports.ENGLISH_FALLBACK = void 0;
-exports.ENGLISH_FALLBACK = {
+const ENGLISH = {
     code: 'en',
     name: 'English',
     nativeName: 'English',
 };
-const getSelectedLanguageName = (selectedLanguage, allLanguages) => {
-    if (!allLanguages.length) {
-        return 'English (Default)';
-    }
-    const language = allLanguages.find((lang) => lang.code === selectedLanguage) ||
-        exports.ENGLISH_FALLBACK;
+export const getLanguage = (code, languages) => {
+    return languages.find((l) => l.code === code) || ENGLISH;
+};
+export const getLanguageLabel = (language) => {
     return language.nativeName && language.nativeName !== language.name
         ? `${language.name} (${language.nativeName})`
         : language.name;
 };
-exports.getSelectedLanguageName = getSelectedLanguageName;
-const getLanguageDisplayName = (languageCode) => {
-    return languageCode.toUpperCase();
-};
-exports.getLanguageDisplayName = getLanguageDisplayName;

package/dist/es/lib/popper.js

@@ -62,6 +62,7 @@ export class PopperManager {
                 }
             };
             if (contents.classList.contains('context-menu') ||
+                contents.classList.contains('language') ||
                 contents.classList.contains('section-category')) {
                 window.addEventListener('click', this.handleDocumentClick);
             }

package/dist/es/plugins/section_category.js

@@ -13,7 +13,7 @@ export default (props) => new Plugin({
                 return value;
             }
             return buildPluginState(newState, props);
-        }
+        },
     },
     props: {
         decorations: (state) => sectionCategoryKey.getState(state)?.decorations || DecorationSet.empty,

package/dist/es/plugins/translations.js

@@ -0,0 +1,94 @@
+/*!
+ * © 2019 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 { schema } from '@manuscripts/transform';
+import { Plugin } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { insertTransAbstract } from '../commands';
+import { addAuthorIcon, translateIcon } from '../icons';
+import { getLanguage, getLanguageLabel } from '../lib/languages';
+const createMenuItem = (props, contents, handler, isSelected = false) => {
+    const item = document.createElement('div');
+    item.className = `menu-item ${isSelected ? 'selected' : ''}`;
+    item.textContent = contents;
+    item.addEventListener('mousedown', (event) => {
+        handler(event);
+        props.popper.destroy();
+    });
+    return item;
+};
+const createLanguageMenu = (props, selectedCode, onSelect) => {
+    const menu = document.createElement('div');
+    menu.className = 'language menu';
+    props.languages.forEach((language) => {
+        const item = createMenuItem(props, getLanguageLabel(language), () => onSelect(language.code), selectedCode === language.code);
+        menu.appendChild(item);
+    });
+    return menu;
+};
+export default (props) => new Plugin({
+    props: {
+        decorations: (state) => {
+            const can = props.getCapabilities();
+            const canEdit = can.editArticle && insertTransAbstract(state);
+            const widgets = [];
+            state.doc.descendants((node, pos, parent) => {
+                if (node.type === schema.nodes.section &&
+                    parent?.type === schema.nodes.abstracts &&
+                    canEdit) {
+                    widgets.push(Decoration.widget(pos + 1, (view) => {
+                        const $span = document.createElement('span');
+                        $span.className = 'add-trans-abstract';
+                        $span.title = 'Add translation';
+                        $span.innerHTML = `${addAuthorIcon} <span class="add-trans-abstract-text">Add translation</span>`;
+                        $span.addEventListener('mousedown', (event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            insertTransAbstract(view.state, view.dispatch, node.attrs.category);
+                        });
+                        return $span;
+                    }));
+                }
+                if (node.type === schema.nodes.trans_abstract) {
+                    widgets.push(Decoration.widget(pos + 1, (view) => {
+                        const $btn = document.createElement('span');
+                        $btn.className = 'language-selector-btn';
+                        $btn.setAttribute('data-cy', 'language-selector-btn');
+                        $btn.contentEditable = 'false';
+                        const code = node.attrs.lang || 'en';
+                        const lang = getLanguage(code, props.languages);
+                        const label = getLanguageLabel(lang);
+                        $btn.innerHTML = `<span>${label}</span> ${translateIcon}`;
+                        if (canEdit) {
+                            $btn.addEventListener('mousedown', (event) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                props.popper.destroy();
+                                const handleSelect = (code) => {
+                                    const tr = view.state.tr.setNodeAttribute(pos, 'lang', code);
+                                    view.dispatch(tr);
+                                };
+                                const menu = createLanguageMenu(props, code, handleSelect);
+                                props.popper.show($btn, menu, 'bottom-end', false);
+                            });
+                        }
+                        return $btn;
+                    }));
+                }
+            });
+            return DecorationSet.create(state.doc, widgets);
+        },
+    },
+});

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.8.1';
+export const VERSION = '3.8.3';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/figure_element.js

@@ -15,7 +15,7 @@
  */
 import { schema } from '@manuscripts/transform';
 import { TextSelection } from 'prosemirror-state';
-import { addBtnIcon } from '../icons';
+import { addAuthorIcon } from '../icons';
 import { createNodeView } from './creators';
 import { ImageElementView } from './image_element';
 export class FigureElementView extends ImageElementView {
@@ -67,7 +67,7 @@ export class FigureElementView extends ImageElementView {
         if (this.props.getCapabilities()?.editArticle) {
             this.addFigureBtn = Object.assign(document.createElement('button'), {
                 className: 'add-button',
-                innerHTML: addBtnIcon,
+                innerHTML: addAuthorIcon,
                 title: 'Add figure',
             });
             this.addFigureBtn.addEventListener('click', () => this.addFigure());

package/dist/es/views/section.js

@@ -13,10 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { schema } from '@manuscripts/transform';
-import { TextSelection } from 'prosemirror-state';
-import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
-import { addBtnIcon } from '../icons';
 import { sectionTitleKey } from '../plugins/section_title';
 import BlockView from './block_view';
 import { createNodeView } from './creators';
@@ -24,26 +20,6 @@ export class SectionView extends BlockView {
     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 = 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 = TextSelection.create(tr.doc, titlePos);
-                tr.setSelection(selection).scrollIntoView();
-                this.view.dispatch(tr);
-            }
-        };
     }
     initialise() {
         this.createDOM();
@@ -58,7 +34,6 @@ export class SectionView extends BlockView {
         super.updateContents();
         this.dom.setAttribute('data-category', this.node.attrs.category);
         this.handleSectionNumbering();
-        this.handleAddTranslationButton();
     }
     handleSectionNumbering() {
         const sections = sectionTitleKey.getState(this.view.state);
@@ -73,62 +48,7 @@ export class SectionView extends BlockView {
             }
         });
     }
-    handleAddTranslationButton() {
-        this.cleanupAddTranslationButton();
-        const $pos = this.view.state.doc.resolve(this.getPos());
-        const isInAbstracts = findParentNodeOfTypeClosestToPos($pos, 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: 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();
     }
 }

package/dist/es/views/translated_abstract.js

@@ -13,27 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import LanguageDropdown from '../components/LanguageDropdown';
-import { getSelectedLanguageName } from '../components/LanguageDropdown/languages';
-import { translateIcon } from '../icons';
 import BlockView from './block_view';
 import { createNodeView } from './creators';
-import ReactSubView from './ReactSubView';
 export class TransAbstractView extends BlockView {
     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();
@@ -48,11 +33,6 @@ export class TransAbstractView extends BlockView {
     updateContents() {
         super.updateContents();
         this.updateAttributes();
-        this.handleLanguageSelector();
-    }
-    destroy() {
-        this.cleanupLanguageButton();
-        super.destroy();
     }
     updateAttributes() {
         if (this.contentDOM && this.node.attrs.lang) {
@@ -62,51 +42,5 @@ export class TransAbstractView extends BlockView {
             this.dom.setAttribute('data-category', this.node.attrs.category);
         }
     }
-    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 = getSelectedLanguageName(languageCode, this.props.languages || []);
-        this.languageButton.innerHTML = `${languageName} ${translateIcon}`;
-    }
-    showLanguageDropdown(trigger) {
-        const currentLanguage = this.node.attrs.lang || 'en';
-        this.props.popper.show(trigger, this.createDropdownContainer(currentLanguage), 'bottom-start', false);
-    }
-    createDropdownContainer(currentLanguage) {
-        return ReactSubView(this.props, LanguageDropdown, {
-            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);
-    }
 }
 export default createNodeView(TransAbstractView);

package/dist/types/commands.d.ts

@@ -61,6 +61,7 @@ export declare const insertKeywords: (state: ManuscriptEditorState, dispatch?: D
 export declare const insertList: (type: ManuscriptNodeType, style?: string) => (state: ManuscriptEditorState, dispatch?: Dispatch, view?: EditorView) => boolean;
 export declare const insertBibliographySection: () => boolean;
 export declare const insertTOCSection: () => boolean;
+export declare const insertTransAbstract: (state: ManuscriptEditorState, dispatch?: Dispatch, category?: string) => boolean;
 export declare const isAtStartOfTextBlock: (state: ManuscriptEditorState, $cursor: ResolvedPos, view?: ManuscriptEditorView) => boolean;
 export declare const isTextSelection: (selection: Selection) => selection is ManuscriptTextSelection;
 export declare const ignoreAtomBlockNodeBackward: (state: ManuscriptEditorState, dispatch?: Dispatch, view?: ManuscriptEditorView) => boolean;

package/dist/types/components/LanguageDropdown/index.d.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import React from 'react';
-import { Language } from './languages';
+import { Language } from '../../lib/languages';
 interface LanguageDropdownProps {
     onLanguageSelect: (languageCode: string) => void;
     onClose?: () => void;

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

@@ -22,7 +22,7 @@ import { Location, NavigateFunction } from 'react-router-dom';
 import { DefaultTheme } from 'styled-components';
 import { CollabProvider } from '../classes/collabProvider';
 import { Dispatch } from '../commands';
-import { Language } from '../components/LanguageDropdown/languages';
+import { Language } from '../lib/languages';
 import { Capabilities } from '../lib/capabilities';
 import { FileAttachment, FileManagement } from '../lib/files';
 import { PopperManager } from '../lib/popper';

package/dist/types/icons.d.ts

@@ -8,7 +8,6 @@ export declare const sectionCategoryIcon: string;
 export declare const scrollIcon: string;
 export declare const lockIcon: string;
 export declare const plusIcon: string;
-export declare const addBtnIcon: string;
 export declare const imageRightIcon: string;
 export declare const imageLeftIcon: string;
 export declare const imageDefaultIcon: string;
@@ -17,3 +16,4 @@ export declare const draggableIcon: string;
 export declare const translateIcon: string;
 export declare const linkIcon: string;
 export declare const fileMainDocumentIcon: string;
+export declare const tickIcon: string;

package/dist/types/{components/LanguageDropdown → lib}/languages.d.ts

@@ -18,14 +18,5 @@ export interface Language {
     name: string;
     nativeName: string;
 }
-export declare const ENGLISH_FALLBACK: {
-    code: string;
-    name: string;
-    nativeName: string;
-};
-export declare const getSelectedLanguageName: (selectedLanguage: string, allLanguages: Array<{
-    code: string;
-    name: string;
-    nativeName?: string;
-}>) => string;
-export declare const getLanguageDisplayName: (languageCode: string) => string;
+export declare const getLanguage: (code: string, languages: Language[]) => Language;
+export declare const getLanguageLabel: (language: Language) => string;

package/dist/types/plugins/translations.d.ts

@@ -0,0 +1,19 @@
+/*!
+ * © 2019 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 { Plugin } from 'prosemirror-state';
+import { EditorProps } from '../configs/ManuscriptsEditor';
+declare const _default: (props: EditorProps) => Plugin<null>;
+export default _default;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.8.1";
+export declare const VERSION = "3.8.3";
 export declare const MATHJAX_VERSION = "3.2.2";

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

@@ -17,17 +17,10 @@ import { SectionNode } from '@manuscripts/transform';
 import BlockView from './block_view';
 export declare class SectionView extends BlockView<SectionNode> {
     elementType: string;
-    element: HTMLElement;
-    private addTranslationButton;
     initialise(): void;
     createElement(): void;
     updateContents(): void;
     handleSectionNumbering(): void;
-    private handleAddTranslationButton;
-    private isAbstractCategory;
-    private createAddTranslationButton;
-    private cleanupAddTranslationButton;
-    private addTranslation;
     destroy(): void;
 }
 declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch) => import("../types").NodeViewCreator<SectionView>;

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

@@ -18,21 +18,10 @@ import { Trackable } from '../types';
 import BlockView from './block_view';
 export declare class TransAbstractView extends BlockView<Trackable<TransAbstractNode>> {
     elementType: string;
-    private languageButton;
     createDOM(): void;
     createElement(): void;
     updateContents(): void;
-    destroy(): void;
     private updateAttributes;
-    private handleLanguageSelector;
-    private createLanguageButton;
-    private cleanupLanguageButton;
-    private updateButtonContent;
-    private handleButtonClick;
-    private showLanguageDropdown;
-    private createDropdownContainer;
-    private handleLanguageChange;
-    private updateNodeLanguage;
 }
 declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch) => import("../types").NodeViewCreator<TransAbstractView>;
 export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "3.8.1",
+  "version": "3.8.3",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -40,7 +40,7 @@
     "@manuscripts/json-schema": "2.2.12",
     "@manuscripts/style-guide": "3.4.0",
     "@manuscripts/track-changes-plugin": "2.2.3",
-    "@manuscripts/transform": "4.3.14",
+    "@manuscripts/transform": "4.3.15",
     "@popperjs/core": "2.11.8",
     "citeproc": "2.4.63",
     "codemirror": "5.65.19",

package/styles/AdvancedEditor.css

@@ -183,14 +183,6 @@
   margin-bottom: 30px;
 }
 
-.ProseMirror .block-figure_element .add-button {
-  border: 0px;
-  left: 53px;
-  width: 25px;
-  height: 25px;
-  position: absolute;
-}
-
 .ProseMirror .figure-block:hover .options-button {
   visibility: visible;
 }
@@ -1820,45 +1812,37 @@ th:hover > .table-context-menu-button,
 .prosemirror-dropcursor-block {
   background-color: transparent !important;
 }
+
 .ProseMirror .add-button {
-  border: 0px;
+  border: 0;
   z-index: 1;
   cursor: pointer;
   border-radius: 50%;
-  background-color: #6e6e6e;
+  background: unset;
+  padding: 0;
 }
 
-.ProseMirror .add-button.disabled {
-  background-color: #e2e2e2 !important;
+.ProseMirror .block-figure_element .add-button {
+  left: 53px;
+  position: absolute;
 }
 
-.ProseMirror .add-button svg path {
-  fill: #ffffff !important;
+.ProseMirror .add-button svg rect {
+  fill: #6E6E6E !important;
 }
 
-/*  Abstract translations */
-.ProseMirror .abstracts {
-  position: relative;
+.ProseMirror .add-button.disabled svg rect {
+  fill: #e2e2e2 !important;
 }
 
-.ProseMirror .abstracts .add-translation-container {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 8px 0;
-  padding: 6px 12px;
-  position: absolute;
-  right: 50px;
-  z-index: 5;
-  cursor: pointer;
-}
+/*  Abstract translations */
 
 /* Add translation button for individual sections within abstracts */
 .ProseMirror .abstracts section[data-category] {
   position: relative;
 }
 
-.ProseMirror .abstracts section[data-category] .add-translation-container {
+.ProseMirror .add-trans-abstract {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -1869,41 +1853,56 @@ th:hover > .table-context-menu-button,
   top: 0;
   z-index: 5;
   cursor: pointer;
+  background: unset;
+  border: none;
 }
-.ProseMirror .abstracts .add-translation-text {
-  font-size: 14px;
-  color: #353535;
-}
-.ProseMirror .abstracts .add-translation-container .add-button {
-  margin: 0;
-  padding: 0;
+
+.ProseMirror .add-trans-abstract svg {
   width: 16px;
   height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
-.ProseMirror .abstracts .add-translation-container .add-button svg {
-  width: 10px;
-  height: 8px;
+.ProseMirror .add-trans-abstract svg rect {
+  fill: #6E6E6E !important;
 }
+
+.ProseMirror .add-trans-abstract-text {
+  font-size: 14px;
+  color: #353535;
+}
+
 .ProseMirror .block-trans_abstract .language-selector-btn {
-  position: absolute;
-  z-index: 9;
-  top: 40px;
-  border: 0px;
-  background: transparent;
-  right: 60px;
   display: flex;
-  align-items: center;
+  position: absolute;
+  top: 14px;
+  right: 50px;
+  line-height: 1.6;
+  background: unset;
+  border: none;
+  padding: 0;
+  margin: 0 6px;
+  cursor: pointer;
+  z-index: 10;
+  align-items: end;
+  gap: 8px;
   font-size: 14px;
   color: #6e6e6e;
-  cursor: pointer;
 }
-.abstracts-language-dropdown {
-  right: -142px !important;
-  top: -86px !important;
+
+.language.menu .menu-item {
+  margin-right: 25px
+}
+
+.language.menu .menu-item.selected:after {
+  top: 10px;
+  right: 19px;
+  position: absolute;
+  content: '';
+  height: 10px;
+  width: 5px;
+  border-bottom: 2px solid #36b260;
+  border-right: 2px solid #36b260;
+  transform: rotate(45deg);
 }
 
 .ProseMirror .block-trans_abstract p.empty-node[data-placeholder] {