@manuscripts/body-editor 2.0.46 → 2.0.47

package/dist/cjs/components/views/TableCellContextMenu.js

@@ -57,7 +57,7 @@ const ColumnChangeWarningDialog = ({ isOpen, primaryAction, secondaryAction }) =
             title: 'Cancel',
         },
     } }));
-const ContextMenu = ({ view, close, }) => {
+const ContextMenu = ({ view, close, onCancelColumnDialog }) => {
     const runCommand = (command, noTracking) => {
         command(view.state, (tr) => view.dispatch((noTracking && (0, track_changes_plugin_1.skipTracking)(tr)) || tr));
         close();
@@ -66,7 +66,7 @@ const ContextMenu = ({ view, close, }) => {
     const isCellSelectionMerged = (0, prosemirror_tables_1.mergeCells)(view.state);
     const isCellSelectionSplittable = (0, prosemirror_tables_1.splitCell)(view.state);
     const { rows, columns } = getSelectedCellsCount(view.state);
-    return (react_1.default.createElement(MenuDropdownList, null,
+    return (react_1.default.createElement(MenuDropdownList, { className: 'table-ctx' },
         react_1.default.createElement(ActionButton, { onClick: () => runCommand((0, commands_1.addRows)('top')) },
             react_1.default.createElement(style_guide_1.PlusIcon, null),
             " Insert ",
@@ -104,7 +104,10 @@ const ContextMenu = ({ view, close, }) => {
                     runCommand(columnAction, true);
                     setColumnAction(undefined);
                 }
-            }, secondaryAction: () => setColumnAction(undefined) })));
+            }, secondaryAction: () => {
+                setColumnAction(undefined);
+                onCancelColumnDialog();
+            } })));
 };
 exports.ContextMenu = ContextMenu;
 const MenuDropdownList = styled_components_1.default.div `

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

package/dist/cjs/views/table_cell.js

@@ -77,9 +77,11 @@ class TableCellView extends block_view_1.default {
                         this.props.popper.destroy();
                         contextMenuButton.classList.toggle('open-context-menu');
                     },
+                    onCancelColumnDialog: () => this.addOutClickListener(contextMenuButton),
                 }, this.view.state.selection.$from.node(), this.getPos, this.view, 'table-cell-context-menu');
                 contextMenuButton.classList.toggle('open-context-menu');
                 this.props.popper.show(contextMenuButton, contextMenu, 'right', false);
+                this.addOutClickListener(contextMenuButton);
             }
         });
         this.dom.appendChild(contextMenuButton);
@@ -93,6 +95,21 @@ class TableCellView extends block_view_1.default {
         const outputSpec = this.node.type.spec.toDOM(this.node);
         return prosemirror_model_1.DOMSerializer.renderSpec(document, outputSpec).dom;
     }
+    addOutClickListener(contextMenuButton) {
+        const listener = (event) => {
+            var _a;
+            const target = event.target;
+            if (!target.classList.contains('open-context-menu') &&
+                !((_a = target.parentNode) === null || _a === void 0 ? void 0 : _a.classList.contains('table-ctx'))) {
+                this.props.popper.destroy();
+                contextMenuButton.classList.toggle('open-context-menu');
+            }
+            window.removeEventListener('mousedown', listener);
+            window.removeEventListener('keydown', listener);
+        };
+        window.addEventListener('mousedown', listener);
+        window.addEventListener('keydown', listener);
+    }
 }
 exports.TableCellView = TableCellView;
 exports.default = (0, creators_1.createNodeView)(TableCellView);

package/dist/es/components/views/TableCellContextMenu.js

@@ -28,7 +28,7 @@ const ColumnChangeWarningDialog = ({ isOpen, primaryAction, secondaryAction }) =
             title: 'Cancel',
         },
     } }));
-export const ContextMenu = ({ view, close, }) => {
+export const ContextMenu = ({ view, close, onCancelColumnDialog }) => {
     const runCommand = (command, noTracking) => {
         command(view.state, (tr) => view.dispatch((noTracking && skipTracking(tr)) || tr));
         close();
@@ -37,7 +37,7 @@ export const ContextMenu = ({ view, close, }) => {
     const isCellSelectionMerged = mergeCells(view.state);
     const isCellSelectionSplittable = splitCell(view.state);
     const { rows, columns } = getSelectedCellsCount(view.state);
-    return (React.createElement(MenuDropdownList, null,
+    return (React.createElement(MenuDropdownList, { className: 'table-ctx' },
         React.createElement(ActionButton, { onClick: () => runCommand(addRows('top')) },
             React.createElement(PlusIcon, null),
             " Insert ",
@@ -75,7 +75,10 @@ export const ContextMenu = ({ view, close, }) => {
                     runCommand(columnAction, true);
                     setColumnAction(undefined);
                 }
-            }, secondaryAction: () => setColumnAction(undefined) })));
+            }, secondaryAction: () => {
+                setColumnAction(undefined);
+                onCancelColumnDialog();
+            } })));
 };
 const MenuDropdownList = styled.div `
   display: flex;

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '2.0.46';
+export const VERSION = '2.0.47';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/table_cell.js

@@ -71,9 +71,11 @@ export class TableCellView extends BlockView {
                         this.props.popper.destroy();
                         contextMenuButton.classList.toggle('open-context-menu');
                     },
+                    onCancelColumnDialog: () => this.addOutClickListener(contextMenuButton),
                 }, this.view.state.selection.$from.node(), this.getPos, this.view, 'table-cell-context-menu');
                 contextMenuButton.classList.toggle('open-context-menu');
                 this.props.popper.show(contextMenuButton, contextMenu, 'right', false);
+                this.addOutClickListener(contextMenuButton);
             }
         });
         this.dom.appendChild(contextMenuButton);
@@ -87,5 +89,20 @@ export class TableCellView extends BlockView {
         const outputSpec = this.node.type.spec.toDOM(this.node);
         return DOMSerializer.renderSpec(document, outputSpec).dom;
     }
+    addOutClickListener(contextMenuButton) {
+        const listener = (event) => {
+            var _a;
+            const target = event.target;
+            if (!target.classList.contains('open-context-menu') &&
+                !((_a = target.parentNode) === null || _a === void 0 ? void 0 : _a.classList.contains('table-ctx'))) {
+                this.props.popper.destroy();
+                contextMenuButton.classList.toggle('open-context-menu');
+            }
+            window.removeEventListener('mousedown', listener);
+            window.removeEventListener('keydown', listener);
+        };
+        window.addEventListener('mousedown', listener);
+        window.addEventListener('keydown', listener);
+    }
 }
 export default createNodeView(TableCellView);

package/dist/types/components/views/TableCellContextMenu.d.ts

@@ -3,4 +3,5 @@ import React from 'react';
 export declare const ContextMenu: React.FC<{
     view: EditorView;
     close: () => void;
+    onCancelColumnDialog: () => void;
 }>;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "2.0.46";
+export declare const VERSION = "2.0.47";
 export declare const MATHJAX_VERSION = "3.2.2";

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

@@ -22,6 +22,7 @@ export declare class TableCellView extends BlockView<ManuscriptNode> {
     updateContents: () => void;
     private createContextMenu;
     private toDom;
+    private addOutClickListener;
 }
 declare const _default: (props: import("./base_node_view").BaseNodeProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<TableCellView>;
 export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "2.0.46",
+  "version": "2.0.47",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -116,4 +116,4 @@
   "engines": {
     "node": ">=20.16.0"
   }
-}
+}