@manuscripts/body-editor 3.2.35 → 3.2.37

package/dist/cjs/menus.js

@@ -20,7 +20,6 @@ const transform_1 = require("@manuscripts/transform");
 const prosemirror_commands_1 = require("prosemirror-commands");
 const prosemirror_history_1 = require("prosemirror-history");
 const commands_1 = require("./commands");
-const InsertEmbedDialog_1 = require("./components/toolbar/InsertEmbedDialog");
 const InsertTableDialog_1 = require("./components/toolbar/InsertTableDialog");
 const ListMenuItem_1 = require("./components/toolbar/ListMenuItem");
 const InsertSpecialCharacter_1 = require("./components/views/InsertSpecialCharacter");
@@ -263,7 +262,7 @@ const getEditorMenus = (editor) => {
                 label: 'Embedded Media',
                 isActive: (0, commands_1.blockActive)(transform_1.schema.nodes.embed)(state),
                 isEnabled: (0, utils_1.isEditAllowed)(state) && isCommandValid((0, commands_1.canInsert)(transform_1.schema.nodes.embed)),
-                run: () => (0, InsertEmbedDialog_1.openEmbedDialog)(editor.view),
+                run: doCommand(commands_1.insertEmbed),
             },
             {
                 id: 'insert-link',

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

package/dist/cjs/views/embed.js

@@ -1,101 +1,225 @@
 "use strict";
-/*!
- * © 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.
- */
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EmbedMediaView = void 0;
-const style_guide_1 = require("@manuscripts/style-guide");
-const commands_1 = require("../commands");
+exports.EmbedView = void 0;
+const lodash_1 = require("lodash");
+const prosemirror_state_1 = require("prosemirror-state");
 const InsertEmbedDialog_1 = require("../components/toolbar/InsertEmbedDialog");
-const DeleteEmbedDialog_1 = require("../components/views/DeleteEmbedDialog");
+const get_media_type_1 = require("../lib/get-media-type");
+const media_1 = require("../lib/media");
 const oembed_1 = require("../lib/oembed");
+const url_1 = require("../lib/url");
 const block_view_1 = __importDefault(require("./block_view"));
 const creators_1 = require("./creators");
+const editable_block_1 = require("./editable_block");
 const ReactSubView_1 = __importDefault(require("./ReactSubView"));
-class EmbedMediaView extends block_view_1.default {
+class EmbedView extends block_view_1.default {
     constructor() {
         super(...arguments);
+        this.preview = null;
+        this.reactTools = null;
         this.ignoreMutation = () => true;
-        this.stopEvent = () => true;
+        this.initialized = false;
+        this.previousAttrs = {};
         this.createElement = () => {
             this.container = document.createElement('div');
             this.container.classList.add('block');
             this.dom.appendChild(this.container);
+            const figureBlock = document.createElement('div');
+            figureBlock.classList.add('figure-block');
+            this.container.appendChild(figureBlock);
             this.contentDOM = document.createElement('div');
-            this.container.appendChild(this.contentDOM);
-            this.buildContextMenu(this.container);
+            figureBlock.appendChild(this.contentDOM);
+            this.figureBlock = figureBlock;
         };
-        this.buildContextMenu = (preview) => {
-            const can = this.props.getCapabilities();
-            if (!can.editArticle) {
-                return;
+        this.upload = async (file) => {
+            const mediaInfo = (0, get_media_type_1.getMediaTypeInfo)(file);
+            const result = await this.props.fileManagement.upload(file);
+            const pos = this.getPos();
+            const tr = this.view.state.tr;
+            tr.setNodeMarkup(pos, undefined, {
+                ...this.node.attrs,
+                href: result.id,
+                mimetype: mediaInfo.mimetype,
+                mimeSubtype: mediaInfo.mimeSubtype,
+            });
+            this.view.dispatch(tr);
+        };
+        this.setHref = (href) => {
+            const { tr } = this.view.state;
+            const pos = this.getPos();
+            tr.setNodeMarkup(pos, undefined, {
+                ...this.node.attrs,
+                href: href,
+            });
+            tr.setSelection(prosemirror_state_1.NodeSelection.create(tr.doc, pos));
+            this.view.dispatch(tr);
+        };
+        this.createMedia = () => {
+            const { href } = this.node.attrs;
+            if (!href) {
+                return null;
+            }
+            const files = this.props.getFiles();
+            const file = files.find((f) => f.id === href);
+            if (!file) {
+                return null;
+            }
+            const mediaUrl = file.link || file.id;
+            if (!mediaUrl) {
+                return null;
+            }
+            const mediaInfo = (0, get_media_type_1.getMediaTypeInfo)(file.name);
+            if (mediaInfo.isVideo) {
+                const video = document.createElement('video');
+                video.controls = true;
+                video.style.maxWidth = '100%';
+                video.style.height = '250px';
+                const source = document.createElement('source');
+                source.src = mediaUrl;
+                video.appendChild(source);
+                video.appendChild(document.createTextNode('Your browser does not support the video tag.'));
+                return video;
+            }
+            else if (mediaInfo.isAudio) {
+                const audio = document.createElement('audio');
+                audio.controls = true;
+                audio.style.width = '100%';
+                const source = document.createElement('source');
+                source.src = mediaUrl;
+                audio.appendChild(source);
+                audio.appendChild(document.createTextNode('Your browser does not support the audio tag.'));
+                return audio;
+            }
+            else {
+                return (0, media_1.createUnsupportedFormat)(file.name, this.props.getCapabilities().editArticle);
             }
-            const componentProps = {
-                actions: [
-                    {
-                        label: 'Comment',
-                        action: () => (0, commands_1.addNodeComment)(this.node, this.view.state, this.view.dispatch),
-                        icon: 'AddComment',
-                    },
-                    {
-                        label: 'Delete',
-                        action: () => (0, DeleteEmbedDialog_1.openDeleteEmbedDialog)(this.view, this.node, this.getPos()),
-                        icon: 'Delete',
-                    },
-                    {
-                        label: 'Edit',
-                        action: () => (0, InsertEmbedDialog_1.openEmbedDialog)(this.view, this.getPos()),
-                        icon: 'Edit',
-                    },
-                ],
-            };
-            preview.appendChild((0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, ['embed-context-menu']));
         };
     }
-    async updateContents() {
+    updateContents() {
         super.updateContents();
-        if (this.href !== this.node.attrs.href) {
-            this.href = this.node.attrs.href;
-            await this.updateOEmbedPreview();
+        const { href, mimetype, mimeSubtype } = this.node.attrs;
+        const currentAttrs = { href, mimetype, mimeSubtype };
+        const contentChanged = !this.initialized || !(0, lodash_1.isEqual)(this.previousAttrs, currentAttrs);
+        if (contentChanged) {
+            this.initialized = true;
+            this.previousAttrs = currentAttrs;
+            this.updateMediaPreview();
+            this.manageReactTools();
+        }
+    }
+    manageReactTools() {
+        this.reactTools?.remove();
+        let handlers;
+        const can = this.props.getCapabilities();
+        if (this.isUploadedFile()) {
+            handlers = (0, media_1.createFileHandlers)(this.node, this.view, this.getPos, this.props, this.setHref);
+            if (can.uploadFile) {
+                handlers.handleUpload = (0, media_1.createFileUploader)(this.upload, 'video/*,audio/*');
+            }
+        }
+        else if (this.isEmbedLink()) {
+            handlers = this.createEmbedHandlers();
+        }
+        if (handlers) {
+            this.reactTools = (0, media_1.createReactTools)(this.node, this.view, this.getPos, this.props, handlers, true, () => false);
+            if (this.reactTools) {
+                if (this.preview) {
+                    this.preview.insertBefore(this.reactTools, this.preview.firstChild);
+                }
+                else {
+                    this.dom.insertBefore(this.reactTools, this.dom.firstChild);
+                }
+            }
+        }
+    }
+    isUploadedFile() {
+        const { href } = this.node.attrs;
+        if (!href) {
+            return false;
         }
+        const files = this.props.getFiles();
+        return files.some((file) => file.id === href);
+    }
+    isEmbedLink() {
+        const { href } = this.node.attrs;
+        return !!(href && (0, url_1.allowedHref)(href) && !this.isUploadedFile());
     }
-    async updateOEmbedPreview() {
+    async updateMediaPreview() {
         const preview = document.createElement('div');
-        preview.classList.add('embed-media-preview');
+        preview.classList.add('media-preview');
         preview.setAttribute('contenteditable', 'false');
-        const oldPreview = this.container.querySelector('.embed-media-preview');
+        const oldPreview = this.preview
+            ? this.preview
+            : this.figureBlock.querySelector('.media-preview');
         if (oldPreview) {
-            this.container.replaceChild(preview, oldPreview);
+            this.figureBlock.replaceChild(preview, oldPreview);
         }
         else {
-            this.container.prepend(preview);
+            this.figureBlock.prepend(preview);
         }
-        const html = await (0, oembed_1.getOEmbedHTML)(this.href, 643, 363);
-        if (html) {
-            preview.innerHTML = html;
+        this.preview = preview;
+        const href = this.node.attrs.href;
+        let object;
+        if (!href) {
+            object = (0, media_1.createMediaPlaceholder)('media', this.view, this.getPos);
+        }
+        else if (this.isUploadedFile()) {
+            const files = this.props.getFiles();
+            const file = files.find((f) => f.id === href);
+            if (file) {
+                const mediaInfo = (0, get_media_type_1.getMediaTypeInfo)(file.name);
+                const isValidMediaFile = mediaInfo.isAudio || mediaInfo.isVideo;
+                object = isValidMediaFile
+                    ? this.createMedia() ||
+                        (0, media_1.createUnsupportedFormat)(file.name, this.props.getCapabilities().editArticle)
+                    : (0, media_1.createUnsupportedFormat)(file.name, this.props.getCapabilities().editArticle);
+            }
+            else {
+                object = (0, media_1.createMediaPlaceholder)('media', this.view, this.getPos);
+            }
+        }
+        else if (this.isEmbedLink()) {
+            object = await this.createEmbedPreview();
         }
         else {
-            this.showUnavailableMessage(preview);
+            object = (0, media_1.createMediaPlaceholder)('media', this.view, this.getPos);
+        }
+        const can = this.props.getCapabilities();
+        if (can.uploadFile && object.classList.contains('placeholder')) {
+            (0, media_1.addInteractionHandlers)(object, this.upload, 'video/*,audio/*');
+        }
+        preview.appendChild(object);
+    }
+    createEmbedHandlers() {
+        const handlers = {};
+        handlers.handleReplaceEmbed = () => {
+            (0, InsertEmbedDialog_1.openEmbedDialog)(this.view, this.getPos());
+        };
+        return handlers;
+    }
+    async createEmbedPreview() {
+        const container = document.createElement('div');
+        container.classList.add('embed-preview');
+        try {
+            const html = await (0, oembed_1.getOEmbedHTML)(this.node.attrs.href, 643, 363);
+            if (html) {
+                container.innerHTML = html;
+            }
+            else {
+                this.showUnavailableMessage(container);
+            }
+        }
+        catch (error) {
+            this.showUnavailableMessage(container);
         }
+        return container;
     }
-    showUnavailableMessage(preview) {
-        preview.appendChild((0, ReactSubView_1.default)(this.props, InsertEmbedDialog_1.NoPreviewMessageWithLink, { href: this.node.attrs.href }, this.node, this.getPos, this.view));
+    showUnavailableMessage(container) {
+        container.appendChild((0, ReactSubView_1.default)(this.props, InsertEmbedDialog_1.NoPreviewMessageWithLink, { href: this.node.attrs.href }, this.node, this.getPos, this.view));
     }
 }
-exports.EmbedMediaView = EmbedMediaView;
-exports.default = (0, creators_1.createNodeView)(EmbedMediaView);
+exports.EmbedView = EmbedView;
+exports.default = (0, creators_1.createEditableNodeView)((0, editable_block_1.EditableBlock)(EmbedView));

package/dist/cjs/views/figure_editable.js

@@ -14,24 +14,20 @@
  * 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.FigureEditableView = void 0;
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_state_1 = require("prosemirror-state");
 const prosemirror_utils_1 = require("prosemirror-utils");
-const FigureDropdown_1 = require("../components/views/FigureDropdown");
 const icons_1 = require("../icons");
+const media_1 = require("../lib/media");
 const track_changes_utils_1 = require("../lib/track-changes-utils");
 const creators_1 = require("./creators");
 const figure_1 = require("./figure");
-const figure_uploader_1 = require("./figure_uploader");
-const ReactSubView_1 = __importDefault(require("./ReactSubView"));
 class FigureEditableView extends figure_1.FigureView {
     constructor() {
         super(...arguments);
+        this.reactTools = null;
         this.dragAndDropInitialized = false;
         this.upload = async (file) => {
             const result = await this.props.fileManagement.upload(file);
@@ -48,27 +44,7 @@ class FigureEditableView extends figure_1.FigureView {
             this.view.dispatch(tr);
         };
         this.createUnsupportedFormat = (name) => {
-            const element = document.createElement('div');
-            element.classList.add('figure', 'placeholder');
-            const instructions = document.createElement('div');
-            instructions.classList.add('instructions');
-            const iconHtml = icons_1.fileCorruptedIcon;
-            instructions.innerHTML = `
-    <div>
-      <div class="unsupported-icon-wrapper">${iconHtml}</div>
-      <div>${name}</div>
-      <div class="unsupported-format-label">
-        Unsupported file format
-      </div>
-      <div>
-        ${this.props.getCapabilities()?.editArticle
-                ? 'Click to add image'
-                : 'No image here yet…'}
-      </div>
-    </div>
-  `;
-            element.appendChild(instructions);
-            return element;
+            return (0, media_1.createUnsupportedFormat)(name, this.props.getCapabilities().editArticle);
         };
         this.createImg = (src) => {
             const img = document.createElement('img');
@@ -77,18 +53,7 @@ class FigureEditableView extends figure_1.FigureView {
             return img;
         };
         this.createPlaceholder = () => {
-            const element = document.createElement('div');
-            element.classList.add('figure', 'placeholder');
-            const instructions = document.createElement('div');
-            instructions.classList.add('instructions');
-            instructions.innerHTML = `
-      <p>Drag or click here to upload image <br>
-      or drag items here from the file inspector tabs <br>
-      <a data-action='open-other-files'>'Other files'</a> | 
-      <a data-action='open-supplement-files'>'Supplements'</a></p>
-    `;
-            element.appendChild(instructions);
-            return element;
+            return (0, media_1.createMediaPlaceholder)('figure');
         };
     }
     initialise() {
@@ -218,44 +183,7 @@ class FigureEditableView extends figure_1.FigureView {
                 ? this.createUnsupportedFormat(file.name)
                 : this.createPlaceholder();
         if (can.uploadFile && !(0, track_changes_utils_1.isDeleted)(this.node)) {
-            const handlePlaceholderClick = (event) => {
-                const target = event.target;
-                if (target.dataset && target.dataset.action) {
-                    return;
-                }
-                const triggerUpload = (0, figure_uploader_1.figureUploader)(this.upload);
-                triggerUpload();
-            };
-            img.addEventListener('click', handlePlaceholderClick);
-            img.addEventListener('mouseenter', () => {
-                img.classList.toggle('over', true);
-            });
-            img.addEventListener('mouseleave', () => {
-                img.classList.toggle('over', false);
-            });
-            img.addEventListener('dragenter', (event) => {
-                event.preventDefault();
-                img.classList.toggle('over', true);
-            });
-            img.addEventListener('dragleave', () => {
-                img.classList.toggle('over', false);
-            });
-            img.addEventListener('dragover', (e) => {
-                if (e.dataTransfer && e.dataTransfer.items) {
-                    for (const item of e.dataTransfer.items) {
-                        if (item.kind === 'file' && item.type.startsWith('image/')) {
-                            e.preventDefault();
-                            e.dataTransfer.dropEffect = 'copy';
-                        }
-                    }
-                }
-            });
-            img.addEventListener('drop', async (e) => {
-                if (e.dataTransfer && e.dataTransfer.files.length) {
-                    e.preventDefault();
-                    await this.upload(e.dataTransfer.files[0]);
-                }
-            });
+            (0, media_1.addInteractionHandlers)(img, this.upload, 'image/*');
         }
         this.container.innerHTML = '';
         this.container.appendChild(img);
@@ -289,73 +217,22 @@ class FigureEditableView extends figure_1.FigureView {
         return count;
     }
     manageReactTools() {
-        let handleDownload;
-        let handleUpload;
-        let handleReplace;
-        let handleDetach;
-        let handleDelete;
-        const src = this.node.attrs.src;
-        const files = this.props.getFiles();
-        const file = src && files.filter((f) => f.id === src)[0];
+        this.reactTools?.remove();
+        const handlers = (0, media_1.createFileHandlers)(this.node, this.view, this.getPos, this.props, this.setSrc);
         const can = this.props.getCapabilities();
-        if (src) {
-            if (file) {
-                handleDownload = () => {
-                    this.props.fileManagement.download(file);
-                };
-            }
-            handleDetach = () => {
-                this.setSrc('');
-            };
-        }
-        if (can.replaceFile) {
-            handleReplace = (file, isSupplement = false) => {
-                this.setSrc(file.id);
-                if (isSupplement) {
-                    const tr = this.view.state.tr;
-                    this.view.state.doc.descendants((node, pos) => {
-                        if (node.type === node.type.schema.nodes.supplement) {
-                            const href = node.attrs.href;
-                            if (href === file.id) {
-                                tr.delete(pos, pos + node.nodeSize);
-                                this.view.dispatch(tr);
-                            }
-                        }
-                        if (node.type !== node.type.schema.nodes.supplements &&
-                            node.type !== node.type.schema.nodes.manuscript) {
-                            return false;
-                        }
-                    });
-                }
-            };
-        }
         if (can.uploadFile) {
-            handleUpload = (0, figure_uploader_1.figureUploader)(this.upload);
+            handlers.handleUpload = (0, media_1.createFileUploader)(this.upload, 'image/*');
         }
         if (can.detachFile) {
-            handleDelete = () => {
+            handlers.handleDelete = () => {
                 const pos = this.getPos();
                 const tr = this.view.state.tr;
                 tr.delete(pos, pos + this.node.nodeSize);
                 this.view.dispatch(tr);
             };
         }
-        this.reactTools?.remove();
-        if (this.props.dispatch && this.props.theme) {
-            const componentProps = {
-                can,
-                getDoc: () => this.view.state.doc,
-                getFiles: this.props.getFiles,
-                onDownload: handleDownload,
-                onUpload: handleUpload,
-                onDetach: handleDetach,
-                onReplace: handleReplace,
-                onDelete: handleDelete,
-                hasSiblings: () => {
-                    return this.countFigures() > 1;
-                },
-            };
-            this.reactTools = (0, ReactSubView_1.default)(this.props, FigureDropdown_1.FigureOptions, componentProps, this.node, this.getPos, this.view);
+        this.reactTools = (0, media_1.createReactTools)(this.node, this.view, this.getPos, this.props, handlers, false, () => this.countFigures() > 1);
+        if (this.reactTools) {
             this.dom.insertBefore(this.reactTools, this.dom.firstChild);
         }
     }

package/dist/cjs/views/image_element.js

@@ -21,7 +21,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImageElementView = exports.figurePositions = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const transform_1 = require("@manuscripts/transform");
-const icons_1 = require("../icons");
+const position_menu_1 = require("../lib/position-menu");
 const block_view_1 = __importDefault(require("./block_view"));
 const creators_1 = require("./creators");
 const ReactSubView_1 = __importDefault(require("./ReactSubView"));
@@ -35,67 +35,43 @@ class ImageElementView extends block_view_1.default {
     constructor() {
         super(...arguments);
         this.ignoreMutation = () => true;
-        this.createPositionMenuWrapper = () => {
-            const can = this.props.getCapabilities();
-            this.positionMenuWrapper = document.createElement('div');
-            this.positionMenuWrapper.classList.add('position-menu');
-            const positionMenuButton = document.createElement('div');
-            positionMenuButton.classList.add('position-menu-button');
+        this.showPositionMenu = () => {
             const firstFigure = this.getFirstFigure();
-            this.figurePosition = firstFigure?.attrs.type || figurePositions.default;
-            let icon;
-            switch (this.figurePosition) {
-                case figurePositions.left:
-                    icon = icons_1.imageLeftIcon;
-                    break;
-                case figurePositions.right:
-                    icon = icons_1.imageRightIcon;
-                    break;
-                default:
-                    icon = icons_1.imageDefaultIcon;
-                    break;
-            }
-            if (icon) {
-                positionMenuButton.innerHTML = icon;
+            if (!firstFigure) {
+                return;
             }
-            if (can.editArticle) {
-                positionMenuButton.addEventListener('click', this.showPositionMenu);
-            }
-            this.positionMenuWrapper.appendChild(positionMenuButton);
-            return this.positionMenuWrapper;
-        };
-        this.showPositionMenu = () => {
             this.props.popper.destroy();
-            const componentProps = {
-                actions: [
-                    {
-                        label: 'Left',
-                        action: () => {
-                            this.props.popper.destroy();
-                            this.updateAllFiguresPosition(figurePositions.left);
-                        },
-                        icon: 'ImageLeft',
-                        selected: this.figurePosition === figurePositions.left,
+            const options = [
+                {
+                    label: 'Left',
+                    action: () => {
+                        this.props.popper.destroy();
+                        this.updateAllFiguresPosition(figurePositions.left);
                     },
-                    {
-                        label: 'Default',
-                        action: () => {
-                            this.props.popper.destroy();
-                            this.updateAllFiguresPosition(figurePositions.default);
-                        },
-                        icon: 'ImageDefault',
-                        selected: !this.figurePosition,
+                    icon: 'ImageLeft',
+                    selected: this.figurePosition === figurePositions.left,
+                },
+                {
+                    label: 'Default',
+                    action: () => {
+                        this.props.popper.destroy();
+                        this.updateAllFiguresPosition(figurePositions.default);
                     },
-                    {
-                        label: 'Right',
-                        action: () => {
-                            this.props.popper.destroy();
-                            this.updateAllFiguresPosition(figurePositions.right);
-                        },
-                        icon: 'ImageRight',
-                        selected: this.figurePosition === figurePositions.right,
+                    icon: 'ImageDefault',
+                    selected: !this.figurePosition,
+                },
+                {
+                    label: 'Right',
+                    action: () => {
+                        this.props.popper.destroy();
+                        this.updateAllFiguresPosition(figurePositions.right);
                     },
-                ],
+                    icon: 'ImageRight',
+                    selected: this.figurePosition === figurePositions.right,
+                },
+            ];
+            const componentProps = {
+                actions: options,
             };
             this.props.popper.show(this.positionMenuWrapper, (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu', 'position-menu']), 'left', false);
         };
@@ -128,7 +104,10 @@ class ImageElementView extends block_view_1.default {
             if (existingMenu) {
                 existingMenu.remove();
             }
-            this.container.prepend(this.createPositionMenuWrapper());
+            const firstFigure = this.getFirstFigure();
+            this.figurePosition = firstFigure?.attrs.type || figurePositions.default;
+            this.positionMenuWrapper = (0, position_menu_1.createPositionMenuWrapper)(this.figurePosition, this.showPositionMenu, this.props);
+            this.container.prepend(this.positionMenuWrapper);
         }
     }
     getFirstFigure() {