@gravity-ui/markdown-editor 13.1.0 → 13.1.1

package/build/cjs/extensions/yfm/YfmTable/plugins/YfmTableControls/yfmTableCellView.d.ts

@@ -1,3 +1,3 @@
-import { NodeViewConstructor } from 'prosemirror-view';
+import type { NodeViewConstructor } from 'prosemirror-view';
 export declare const yfmTableCellCn: import("@bem-react/classname").ClassNameFormatter;
 export declare const yfmTableCellView: NodeViewConstructor;

package/build/cjs/extensions/yfm/YfmTable/plugins/YfmTableControls/yfmTableCellView.js

@@ -6,12 +6,13 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const prosemirror_utils_1 = require("prosemirror-utils");
-const react_dom_1 = require("react-dom");
 const classname_1 = require("../../../../../classname");
 const core_1 = require("../../../../../core");
 const yfm_table_1 = require("../../../../../i18n/yfm-table");
 const ErrorBoundary_1 = require("../../../../../react-utils/ErrorBoundary");
 const table_utils_1 = require("../../../../../table-utils");
+const node_children_1 = require("../../../../../utils/node-children");
+const nodes_1 = require("../../../../../utils/nodes");
 const ReactRenderer_1 = require("../../../../behavior/ReactRenderer");
 const actions_1 = require("./actions");
 exports.yfmTableCellCn = (0, classname_1.cn)('table-cell-view');
@@ -163,34 +164,30 @@ const Controls = function Controls({ columnNumber, rowNumber, view, getParentTab
     return controls.length ? react_1.default.createElement(react_1.default.Fragment, null, controls) : null;
 };
 const yfmTableCellView = (node, view, getPos) => {
+    const getParentTable = () => (0, prosemirror_utils_1.findParentNodeClosestToPos)(view.state.doc.resolve(getPos()), table_utils_1.isTableNode);
+    const parentTable = getParentTable();
+    const cellCoords = parentTable ? findCellCoords(parentTable.node, node) : null;
+    // @ts-expect-error
+    if (!cellCoords)
+        return {};
+    const { cellIndex, rowIndex } = cellCoords;
+    const isFirstRow = rowIndex === 0;
+    const isFirstColumn = cellIndex === 0;
+    if (!isFirstRow && !isFirstColumn) {
+        // in this case, we don't need custom nodeView.
+        // @ts-expect-error
+        return {};
+    }
     const dom = document.createElement('td');
     const contentDOM = document.createElement('div');
     const control = document.createElement('span');
     control.setAttribute('style', 'width: 0; height: 0; float: left;');
     dom.setAttribute('style', 'position: relative; overflow: visible;');
-    const getParentTable = () => (0, prosemirror_utils_1.findParentNodeClosestToPos)(view.state.doc.resolve(getPos()), table_utils_1.isTableNode);
-    const parentTable = getParentTable();
-    // @ts-expect-error
-    if (!parentTable)
-        return {};
-    const rowNodes = (0, prosemirror_utils_1.findChildren)(parentTable === null || parentTable === void 0 ? void 0 : parentTable.node, table_utils_1.isTableRowNode);
-    const relativeCelPos = getPos() - (parentTable === null || parentTable === void 0 ? void 0 : parentTable.pos);
-    const rowNumber = rowNodes.findIndex((_v, i) => {
-        var _a;
-        return relativeCelPos > rowNodes[i].pos &&
-            relativeCelPos < (((_a = rowNodes[i + 1]) === null || _a === void 0 ? void 0 : _a.pos) || Number.MAX_SAFE_INTEGER);
-    });
-    const parentRow = rowNodes[rowNumber];
-    const columnNumber = (0, prosemirror_utils_1.findChildren)(parentRow.node, table_utils_1.isTableCellNode).findIndex((c) => {
-        return c.pos === relativeCelPos - parentRow.pos - 2;
-    });
-    const isFirstInRow = rowNodes.findIndex((r) => r.pos === relativeCelPos - 2) >= 0;
     dom.appendChild(contentDOM);
     dom.appendChild(control);
-    const renderItem = (0, ReactRenderer_1.getReactRendererFromState)(view.state).createItem('yfm-table-cell-view', () => (0, react_dom_1.createPortal)(react_1.default.createElement(ErrorBoundary_1.ErrorLoggerBoundary, null,
-        react_1.default.createElement(Controls, { columnNumber: columnNumber, rowNumber: rowNumber, isFirstInRow: isFirstInRow, isInFirstRow: rowNumber === 0, getParentTable: getParentTable, view: view })), control));
-    contentDOM.setAttribute('data-row-number', String(rowNumber));
-    contentDOM.setAttribute('data-col-number', String(columnNumber));
+    const renderItem = (0, ReactRenderer_1.getReactRendererFromState)(view.state).createItem('yfm-table-cell-view', () => (react_1.default.createElement(uikit_1.Portal, { container: control },
+        react_1.default.createElement(ErrorBoundary_1.ErrorLoggerBoundary, null,
+            react_1.default.createElement(Controls, { columnNumber: cellIndex, rowNumber: rowIndex, isFirstInRow: isFirstColumn, isInFirstRow: isFirstRow, getParentTable: getParentTable, view: view })))));
     return {
         dom,
         contentDOM,
@@ -208,3 +205,18 @@ const yfmTableCellView = (node, view, getPos) => {
     };
 };
 exports.yfmTableCellView = yfmTableCellView;
+function findCellCoords(table, cell) {
+    if (!table.lastChild)
+        return null;
+    const rows = (0, nodes_1.getChildrenOfNode)(table.lastChild); // children of tBody
+    for (const row of rows) {
+        const node = (0, node_children_1.getChildByNode)(row.node, cell);
+        if (node) {
+            return {
+                rowIndex: row.index,
+                cellIndex: node.index,
+            };
+        }
+    }
+    return null;
+}

package/build/cjs/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 /** During build process, the current version will be injected here */
-exports.VERSION = typeof '13.1.0' !== 'undefined' ? '13.1.0' : 'unknown';
+exports.VERSION = typeof '13.1.1' !== 'undefined' ? '13.1.1' : 'unknown';

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/yfmTableCellView.d.ts

@@ -1,4 +1,4 @@
-import { NodeViewConstructor } from 'prosemirror-view';
+import type { NodeViewConstructor } from 'prosemirror-view';
 import './yfmTableCellView.css';
 export declare const yfmTableCellCn: import("@bem-react/classname").ClassNameFormatter;
 export declare const yfmTableCellView: NodeViewConstructor;

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/yfmTableCellView.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, EllipsisVertical, TrashBin, Xmark, } from '@gravity-ui/icons';
-import { Button, DropdownMenu, Icon } from '@gravity-ui/uikit';
-import { findChildren, findParentNodeClosestToPos } from 'prosemirror-utils';
-import { createPortal } from 'react-dom';
+import { Button, DropdownMenu, Icon, Portal } from '@gravity-ui/uikit';
+import { findParentNodeClosestToPos } from 'prosemirror-utils';
 import { cn } from '../../../../../classname';
 import { bindActions } from '../../../../../core';
 import { i18n } from '../../../../../i18n/yfm-table';
 import { ErrorLoggerBoundary } from '../../../../../react-utils/ErrorBoundary';
-import { getTableDimensions, isTableCellNode, isTableNode, isTableRowNode, } from '../../../../../table-utils';
+import { getTableDimensions, isTableNode } from '../../../../../table-utils';
+import { getChildByNode } from '../../../../../utils/node-children';
+import { getChildrenOfNode } from '../../../../../utils/nodes';
 import { getReactRendererFromState } from '../../../../behavior/ReactRenderer';
 import { controlActions } from './actions';
 import './yfmTableCellView.css';
@@ -160,34 +161,30 @@ const Controls = function Controls({ columnNumber, rowNumber, view, getParentTab
     return controls.length ? React.createElement(React.Fragment, null, controls) : null;
 };
 export const yfmTableCellView = (node, view, getPos) => {
+    const getParentTable = () => findParentNodeClosestToPos(view.state.doc.resolve(getPos()), isTableNode);
+    const parentTable = getParentTable();
+    const cellCoords = parentTable ? findCellCoords(parentTable.node, node) : null;
+    // @ts-expect-error
+    if (!cellCoords)
+        return {};
+    const { cellIndex, rowIndex } = cellCoords;
+    const isFirstRow = rowIndex === 0;
+    const isFirstColumn = cellIndex === 0;
+    if (!isFirstRow && !isFirstColumn) {
+        // in this case, we don't need custom nodeView.
+        // @ts-expect-error
+        return {};
+    }
     const dom = document.createElement('td');
     const contentDOM = document.createElement('div');
     const control = document.createElement('span');
     control.setAttribute('style', 'width: 0; height: 0; float: left;');
     dom.setAttribute('style', 'position: relative; overflow: visible;');
-    const getParentTable = () => findParentNodeClosestToPos(view.state.doc.resolve(getPos()), isTableNode);
-    const parentTable = getParentTable();
-    // @ts-expect-error
-    if (!parentTable)
-        return {};
-    const rowNodes = findChildren(parentTable === null || parentTable === void 0 ? void 0 : parentTable.node, isTableRowNode);
-    const relativeCelPos = getPos() - (parentTable === null || parentTable === void 0 ? void 0 : parentTable.pos);
-    const rowNumber = rowNodes.findIndex((_v, i) => {
-        var _a;
-        return relativeCelPos > rowNodes[i].pos &&
-            relativeCelPos < (((_a = rowNodes[i + 1]) === null || _a === void 0 ? void 0 : _a.pos) || Number.MAX_SAFE_INTEGER);
-    });
-    const parentRow = rowNodes[rowNumber];
-    const columnNumber = findChildren(parentRow.node, isTableCellNode).findIndex((c) => {
-        return c.pos === relativeCelPos - parentRow.pos - 2;
-    });
-    const isFirstInRow = rowNodes.findIndex((r) => r.pos === relativeCelPos - 2) >= 0;
     dom.appendChild(contentDOM);
     dom.appendChild(control);
-    const renderItem = getReactRendererFromState(view.state).createItem('yfm-table-cell-view', () => createPortal(React.createElement(ErrorLoggerBoundary, null,
-        React.createElement(Controls, { columnNumber: columnNumber, rowNumber: rowNumber, isFirstInRow: isFirstInRow, isInFirstRow: rowNumber === 0, getParentTable: getParentTable, view: view })), control));
-    contentDOM.setAttribute('data-row-number', String(rowNumber));
-    contentDOM.setAttribute('data-col-number', String(columnNumber));
+    const renderItem = getReactRendererFromState(view.state).createItem('yfm-table-cell-view', () => (React.createElement(Portal, { container: control },
+        React.createElement(ErrorLoggerBoundary, null,
+            React.createElement(Controls, { columnNumber: cellIndex, rowNumber: rowIndex, isFirstInRow: isFirstColumn, isInFirstRow: isFirstRow, getParentTable: getParentTable, view: view })))));
     return {
         dom,
         contentDOM,
@@ -204,3 +201,18 @@ export const yfmTableCellView = (node, view, getPos) => {
         },
     };
 };
+function findCellCoords(table, cell) {
+    if (!table.lastChild)
+        return null;
+    const rows = getChildrenOfNode(table.lastChild); // children of tBody
+    for (const row of rows) {
+        const node = getChildByNode(row.node, cell);
+        if (node) {
+            return {
+                rowIndex: row.index,
+                cellIndex: node.index,
+            };
+        }
+    }
+    return null;
+}

package/build/esm/version.js

@@ -1,2 +1,2 @@
 /** During build process, the current version will be injected here */
-export const VERSION = typeof '13.1.0' !== 'undefined' ? '13.1.0' : 'unknown';
+export const VERSION = typeof '13.1.1' !== 'undefined' ? '13.1.1' : 'unknown';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/markdown-editor",
-  "version": "13.1.0",
+  "version": "13.1.1",
   "description": "Markdown wysiwyg and markup editor",
   "license": "MIT",
   "repository": {