@gravity-ui/markdown-editor 13.0.0

package/build/esm/extensions/yfm/YfmTable/commands/backspace.js

@@ -0,0 +1,120 @@
+import { chainCommands } from 'prosemirror-commands';
+import { TextSelection } from 'prosemirror-state';
+import { findChildTableCells, findChildTableRows, findParentTableBodyFromPos, findParentTableCellFromPos, findParentTableFromPos, isTableCellNode, isTableRowNode, } from '../../../../table-utils';
+import { isNodeSelection, isTextSelection } from '../../../../utils/selection';
+const removeCellNodeContent = (state, dispatch) => {
+    const sel = state.selection;
+    if (!isNodeSelection(sel))
+        return false;
+    const selNode = sel.node;
+    if (isTableRowNode(selNode)) {
+        // remove the table row
+        dispatch === null || dispatch === void 0 ? void 0 : dispatch(state.tr.deleteSelection());
+        return true;
+    }
+    if (isTableCellNode(selNode)) {
+        if (dispatch) {
+            // clearing the table cell
+            const from = sel.from + 1;
+            const to = sel.to - 1;
+            let tr = state.tr.delete(from, to);
+            tr = tr.setSelection(TextSelection.create(tr.doc, from));
+            dispatch(tr);
+        }
+        return true;
+    }
+    return false;
+};
+// eslint-disable-next-line complexity
+export const clearSelectedCells = (state, dispatch) => {
+    const sel = state.selection;
+    if (!isTextSelection(sel))
+        return false;
+    const { $from, $to } = sel;
+    const fromCell = findParentTableCellFromPos($from);
+    const toCell = findParentTableCellFromPos($to);
+    const fromTBody = findParentTableBodyFromPos($from);
+    const toTBody = findParentTableBodyFromPos($to);
+    const fromTable = findParentTableFromPos($to);
+    if (!fromCell || !toCell || !fromTBody || !toTBody || !fromTable)
+        return false;
+    if (fromCell.node === toCell.node) {
+        // selection inside table cell
+        return false; // should executes default command
+    }
+    if (fromTBody && toTBody && fromTBody.pos === toTBody.pos) {
+        if (dispatch) {
+            const table = fromTable;
+            const tBody = fromTBody;
+            const fromCellIndexInRow = $from.index(fromCell.depth - 1);
+            const toCellIndexInRow = $to.index(toCell.depth - 1);
+            const fromRowIndexInBody = $from.index(fromCell.depth - 2);
+            const toRowIndexInBody = $to.index(toCell.depth - 2);
+            const bodyRows = findChildTableRows(tBody.node);
+            let tr = state.tr;
+            tr = tr.delete(toCell.start, $to.pos);
+            let rowIndex = toRowIndexInBody;
+            while (rowIndex >= fromRowIndexInBody) {
+                const row = bodyRows[rowIndex];
+                const rowCells = findChildTableCells(row.node);
+                let cellIndex = rowIndex === toRowIndexInBody ? toCellIndexInRow - 1 : rowCells.length - 1;
+                while (cellIndex > (rowIndex === fromRowIndexInBody ? fromCellIndexInRow : -1)) {
+                    const cell = rowCells[cellIndex];
+                    const from = tBody.pos + row.pos + cell.pos + 3;
+                    const to = from + cell.node.nodeSize - 2;
+                    tr = tr.delete(from, to);
+                    cellIndex--;
+                }
+                if (rowIndex !== fromRowIndexInBody) {
+                    const rowPos = tBody.pos + row.pos + 1;
+                    const trRow = tr.doc.nodeAt(rowPos);
+                    if (trRow && isEmptyTableRow(trRow)) {
+                        tr = tr.delete(rowPos, rowPos + trRow.nodeSize);
+                    }
+                }
+                rowIndex--;
+            }
+            tr = tr.delete($from.pos, fromCell.pos + fromCell.node.nodeSize);
+            const fromRowPos = tBody.pos + bodyRows[fromRowIndexInBody].pos + 1;
+            const trFromRow = tr.doc.nodeAt(fromRowPos);
+            if (fromCellIndexInRow === 0 && trFromRow && isEmptyTableRow(trFromRow)) {
+                const rowsCountBeforeDelete = tr.doc.nodeAt(tBody.pos).childCount;
+                tr = tr.delete(fromRowPos, fromRowPos + tr.doc.nodeAt(fromRowPos).nodeSize);
+                const trTable = tr.doc.nodeAt(table.pos);
+                if (rowsCountBeforeDelete <= 1) {
+                    if (trTable) {
+                        if (trTable.childCount <= 1) {
+                            tr = tr.delete(table.pos, trTable.nodeSize);
+                        }
+                    }
+                    else {
+                        tr = tr.delete(tBody.pos, tBody.pos + tr.doc.nodeAt(tBody.pos).nodeSize);
+                    }
+                }
+            }
+            tr = tr.setSelection(TextSelection.create(tr.doc, tr.mapping.map(sel.head)));
+            dispatch(tr);
+        }
+        return true;
+    }
+    return false;
+};
+export const backspaceCommand = chainCommands(removeCellNodeContent, clearSelectedCells);
+function isEmptyTableRow(node) {
+    if (!isTableRowNode(node))
+        return false;
+    if (node.childCount === 0)
+        return true;
+    let isRowEmpty = true;
+    node.forEach((cellNode) => {
+        isRowEmpty = isEmptyTableCell(cellNode);
+    });
+    return isRowEmpty;
+}
+function isEmptyTableCell(node) {
+    if (!isTableCellNode(node))
+        return false;
+    if (node.childCount === 0)
+        return true;
+    return node.childCount === 1 && node.child(0).isTextblock && node.child(0).childCount === 0;
+}

package/build/esm/extensions/yfm/YfmTable/commands/convert-table.d.ts

@@ -0,0 +1,2 @@
+import type { Command } from 'prosemirror-state';
+export declare const convertToYfmTable: Command;

package/build/esm/extensions/yfm/YfmTable/commands/convert-table.js

@@ -0,0 +1,24 @@
+import { pType } from '../../../base/BaseSchema';
+import { findTableCells as findMdTableCells, findTableRows as findMdTableRows, findParentTable as findParentMdTable, } from '../../../markdown/Table/helpers';
+import { yfmTableBodyType, yfmTableCellType, yfmTableRowType, yfmTableType } from '../utils';
+export const convertToYfmTable = (state, dispatch) => {
+    const mdTable = findParentMdTable(state);
+    if (!mdTable)
+        return false;
+    if (dispatch) {
+        const { schema } = state;
+        const yfmTableRowNodes = [];
+        const mdTableRows = findMdTableRows(mdTable.node, state.schema);
+        for (const row of mdTableRows) {
+            const yfmTableCellNodes = [];
+            const mdRowCells = findMdTableCells(row.node, state.schema);
+            for (const cell of mdRowCells) {
+                yfmTableCellNodes.push(yfmTableCellType(schema).create(null, pType(schema).create(null, cell.node.content)));
+            }
+            yfmTableRowNodes.push(yfmTableRowType(schema).create(null, yfmTableCellNodes));
+        }
+        const yfmTableNode = yfmTableType(schema).create(null, yfmTableBodyType(schema).create(null, yfmTableRowNodes));
+        dispatch(state.tr.replaceWith(mdTable.pos, mdTable.pos + mdTable.node.nodeSize, yfmTableNode));
+    }
+    return true;
+};

package/build/esm/extensions/yfm/YfmTable/commands/goToNextRow.d.ts

@@ -0,0 +1,2 @@
+import { Command } from 'prosemirror-state';
+export declare function goToNextRow(dir: 'up' | 'down'): Command;

package/build/esm/extensions/yfm/YfmTable/commands/goToNextRow.js

@@ -0,0 +1,47 @@
+import { TextSelection } from 'prosemirror-state';
+import { atEndOfCell, findChildTableCells, findChildTableRows, findParentTable, findParentTableCell, findParentTableRow, } from '../../../../table-utils';
+import { isTextSelection } from '../../../../utils/selection';
+import { createFakeParagraph, findFakeParaPosClosestToPos, findFakeParaPosForTextSelection, } from '../../../behavior/Selection';
+export function goToNextRow(dir) {
+    return (state, dispatch, view) => {
+        var _a;
+        const parentTable = findParentTable(state.selection);
+        const parentRow = findParentTableRow(state.selection);
+        const parentCell = findParentTableCell(state.selection);
+        if (!view || !atEndOfCell(view, dir === 'up' ? -1 : 1)) {
+            return false;
+        }
+        if (!parentTable || !parentRow || !parentCell) {
+            return false;
+        }
+        const allRows = findChildTableRows(parentTable.node);
+        const rowIndex = allRows.findIndex((node) => node.node === parentRow.node);
+        let cellIndex;
+        for (let i = 0; i < parentRow.node.childCount; i++) {
+            if (parentRow.node.child(i) === parentCell.node)
+                cellIndex = i;
+        }
+        if (cellIndex === undefined) {
+            return false;
+        }
+        const newRowIndex = rowIndex + (dir === 'up' ? -1 : 1);
+        if (newRowIndex < 0 || newRowIndex >= allRows.length) {
+            const sel = state.selection;
+            if (isTextSelection(sel) && view.endOfTextblock(dir)) {
+                const [direction, $cursor] = dir === 'up' ? ['before', sel.$from] : ['after', sel.$to];
+                const $pos = (_a = findFakeParaPosForTextSelection(sel, direction)) !== null && _a !== void 0 ? _a : findFakeParaPosClosestToPos($cursor, $cursor.depth - 2, direction);
+                if ($pos) {
+                    dispatch === null || dispatch === void 0 ? void 0 : dispatch(createFakeParagraph(state.tr, $pos, direction).scrollIntoView());
+                    return true;
+                }
+            }
+            return false;
+        }
+        const newRow = allRows[newRowIndex];
+        const childCells = findChildTableCells(newRow.node);
+        const cell = childCells[cellIndex];
+        const from = parentTable.start + newRow.pos + cell.pos + 3;
+        dispatch === null || dispatch === void 0 ? void 0 : dispatch(state.tr.setSelection(new TextSelection(state.doc.resolve(from))).scrollIntoView());
+        return true;
+    };
+}

package/build/esm/extensions/yfm/YfmTable/commands/remove-table.d.ts

@@ -0,0 +1,2 @@
+import type { Command } from 'prosemirror-state';
+export declare const removeYfmTable: Command;

package/build/esm/extensions/yfm/YfmTable/commands/remove-table.js

@@ -0,0 +1,9 @@
+import { findParentNodeOfType, removeParentNodeOfType } from 'prosemirror-utils';
+import { yfmTableType } from '../utils';
+export const removeYfmTable = (state, dispatch) => {
+    const parentTable = findParentNodeOfType(yfmTableType(state.schema))(state.selection);
+    if (!parentTable)
+        return false;
+    dispatch === null || dispatch === void 0 ? void 0 : dispatch(removeParentNodeOfType(parentTable.node.type)(state.tr));
+    return true;
+};

package/build/esm/extensions/yfm/YfmTable/const.d.ts

@@ -0,0 +1 @@
+export * from './YfmTableSpecs/const';

package/build/esm/extensions/yfm/YfmTable/const.js

@@ -0,0 +1 @@
+export * from './YfmTableSpecs/const';

package/build/esm/extensions/yfm/YfmTable/index.d.ts

@@ -0,0 +1,14 @@
+import type { Action, ExtensionWithOptions } from '../../../core';
+import { YfmTableSpecsOptions } from './YfmTableSpecs';
+declare const action = "createYfmTable";
+export { convertToYfmTable } from './commands/convert-table';
+export { YfmTableNode, yfmTableType, yfmTableBodyType, yfmTableRowType, yfmTableCellType, } from './YfmTableSpecs';
+export declare type YfmTableOptions = YfmTableSpecsOptions & {};
+export declare const YfmTable: ExtensionWithOptions<YfmTableOptions>;
+declare global {
+    namespace WysiwygEditor {
+        interface Actions {
+            [action]: Action;
+        }
+    }
+}

package/build/esm/extensions/yfm/YfmTable/index.js

@@ -0,0 +1,23 @@
+import { goToNextCell } from '../../../table-utils';
+import { YfmTableSpecs } from './YfmTableSpecs';
+import { createYfmTable } from './actions';
+import { backspaceCommand } from './commands/backspace';
+import { goToNextRow } from './commands/goToNextRow';
+import { yfmTableControlsPlugin } from './plugins/YfmTableControls/buttons';
+import { yfmTableTransformPastedPlugin } from './plugins/yfmTableTransformPastedPlugin';
+const action = 'createYfmTable';
+export { convertToYfmTable } from './commands/convert-table';
+export { YfmTableNode, yfmTableType, yfmTableBodyType, yfmTableRowType, yfmTableCellType, } from './YfmTableSpecs';
+export const YfmTable = (builder, options) => {
+    builder.use(YfmTableSpecs, options);
+    builder.addKeymap(() => ({
+        Tab: goToNextCell('next'),
+        'Shift-Tab': goToNextCell('prev'),
+        ArrowDown: goToNextRow('down'),
+        ArrowUp: goToNextRow('up'),
+        Backspace: backspaceCommand,
+    }));
+    builder.addAction(action, () => createYfmTable);
+    builder.addPlugin(yfmTableTransformPastedPlugin);
+    builder.addPlugin(yfmTableControlsPlugin);
+};

package/build/esm/extensions/yfm/YfmTable/paste.d.ts

@@ -0,0 +1,2 @@
+import { Schema, Slice } from 'prosemirror-model';
+export declare function fixPastedTableBodies(slice: Slice, schema: Schema): Slice;

package/build/esm/extensions/yfm/YfmTable/paste.js

@@ -0,0 +1,19 @@
+import { Fragment, Slice } from 'prosemirror-model';
+import { getChildrenOfNode } from '../../../utils/nodes';
+import { yfmTableBodyType, yfmTableType } from './utils';
+export function fixPastedTableBodies(slice, schema) {
+    var _a;
+    if (((_a = slice.content.firstChild) === null || _a === void 0 ? void 0 : _a.type) === yfmTableBodyType(schema)) {
+        const tRows = [];
+        let bodiesSize = 0;
+        for (const { node, offset } of getChildrenOfNode(slice.content)) {
+            if (node.type !== yfmTableBodyType(schema))
+                break;
+            tRows.push(...getChildrenOfNode(node).map((item) => item.node));
+            bodiesSize = offset + node.nodeSize;
+        }
+        const tableNode = yfmTableType(schema).create(null, yfmTableBodyType(schema).create(null, tRows));
+        slice = new Slice(Fragment.from(tableNode).append(slice.content.cut(bodiesSize)), 0, 0);
+    }
+    return slice;
+}

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

@@ -0,0 +1 @@
+export declare const controlActions: Record<"deleteTable" | "addRow" | "deleteRow" | "addColumn" | "deleteColumn" | "appendColumn" | "appendRow", import("../../../../../core").ActionSpec>;

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

@@ -0,0 +1,51 @@
+import { addColumnAfter, addRowAfter, appendColumn, appendRow, removeColumn, removeRow, } from '../../../../../table-utils';
+import { defineActions } from '../../../../../utils/actions';
+import { removeNode } from '../../../../../utils/remove-node';
+import { tableControlsPluginKey } from './buttons';
+const removeYfmTable = (state, dispatch, _, attrs) => {
+    if (!attrs)
+        return false;
+    const { tablePos, tableNode } = attrs;
+    if (dispatch) {
+        const tr = state.tr;
+        // After removing node plugin state doesn't change and it crashes
+        tr.setMeta(tableControlsPluginKey, null);
+        removeNode({
+            node: tableNode,
+            pos: tablePos,
+            tr: tr,
+            dispatch,
+        });
+    }
+    return true;
+};
+export const controlActions = defineActions({
+    addRow: {
+        isEnable: addRowAfter,
+        run: addRowAfter,
+    },
+    deleteRow: {
+        isEnable: removeRow,
+        run: removeRow,
+    },
+    addColumn: {
+        isEnable: addColumnAfter,
+        run: addColumnAfter,
+    },
+    deleteColumn: {
+        isEnable: removeColumn,
+        run: removeColumn,
+    },
+    appendColumn: {
+        isEnable: appendColumn,
+        run: appendColumn,
+    },
+    appendRow: {
+        isEnable: appendRow,
+        run: appendRow,
+    },
+    deleteTable: {
+        isEnable: removeYfmTable,
+        run: removeYfmTable,
+    },
+});

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

@@ -0,0 +1,14 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+export declare const tableControlsPluginKey: PluginKey<any>;
+declare type State = null | {
+    upper: {
+        from: number;
+        to: number;
+    };
+    left: {
+        from: number;
+        to: number;
+    };
+};
+export declare const yfmTableControlsPlugin: () => Plugin<State>;
+export {};

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

@@ -0,0 +1,92 @@
+import { Fragment } from 'prosemirror-model';
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { findParentNode, findParentNodeClosestToPos, findSelectedNodeOfType, } from 'prosemirror-utils';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { throttle } from '../../../../../lodash';
+import { isTableBodyNode, isTableCellNode, isTableNode, isTableRowNode, } from '../../../../../table-utils';
+import { getChildrenOfNode } from '../../../../../utils';
+import { YfmTableNode } from '../../YfmTableSpecs';
+import { viewB, yfmTableView } from './view';
+import { yfmTableCellCn, yfmTableCellView } from './yfmTableCellView';
+export const tableControlsPluginKey = new PluginKey('TableControlsPlugin');
+function shouldUpdateState(prev, curr) {
+    if (prev === null && curr === null)
+        return false;
+    if (prev === null || curr === null)
+        return true;
+    if (prev.left.from === curr.left.from &&
+        prev.left.to === curr.left.to &&
+        prev.upper.from === curr.upper.from &&
+        prev.upper.to === curr.upper.to)
+        return false;
+    return true;
+}
+// TODO: split: plus buttons extension & cell controls extension
+export const yfmTableControlsPlugin = () => new Plugin({
+    key: tableControlsPluginKey,
+    state: {
+        init: () => null,
+        apply: (tr, prev) => {
+            const meta = tr.getMeta(tableControlsPluginKey);
+            return meta === undefined ? prev : meta;
+        },
+    },
+    props: {
+        nodeViews: {
+            [YfmTableNode.Table]: yfmTableView,
+            [YfmTableNode.Cell]: yfmTableCellView,
+        },
+        decorations(state) {
+            const pluginState = tableControlsPluginKey.getState(state);
+            const parent = findParentNode(isTableNode)(state.selection) ||
+                findSelectedNodeOfType(state.schema.nodes.yfm_table)(state.selection);
+            if (!parent)
+                return null;
+            const decs = [
+                Decoration.node(parent.pos, parent.pos + parent.node.nodeSize, {
+                    class: viewB('buttons-visible'),
+                }),
+            ];
+            if (pluginState) {
+                const { upper, left } = pluginState;
+                decs.unshift(Decoration.node(left.from, left.to, {
+                    class: yfmTableCellCn('left-visible'),
+                }), Decoration.node(upper.from, upper.to, {
+                    class: yfmTableCellCn('upper-visible'),
+                }));
+            }
+            return DecorationSet.create(state.doc, decs);
+        },
+        handleDOMEvents: {
+            mousemove: throttle((view, e) => {
+                const prevState = tableControlsPluginKey.getState(view.state);
+                const pos = view.posAtCoords({ left: e.x, top: e.y });
+                if (!pos)
+                    return false;
+                const $pos = view.state.doc.resolve(pos.pos);
+                const cell = findParentNodeClosestToPos($pos, isTableCellNode);
+                const row = findParentNodeClosestToPos($pos, isTableRowNode);
+                const tbody = findParentNodeClosestToPos($pos, isTableBodyNode);
+                let state = null;
+                if (cell && row && tbody) {
+                    const cellIndex = getChildrenOfNode(row.node).findIndex((child) => child.node === cell.node);
+                    const firstRowCell = getChildrenOfNode(tbody.node.firstChild || Fragment.empty)[cellIndex];
+                    if (firstRowCell) {
+                        const upperFrom = tbody.pos + 2 + firstRowCell.offset;
+                        const upperTo = upperFrom + firstRowCell.node.nodeSize;
+                        const leftFrom = row.pos;
+                        const leftTo = row.pos + row.node.nodeSize;
+                        state = {
+                            upper: { from: upperFrom, to: upperTo },
+                            left: { from: leftFrom, to: leftTo },
+                        };
+                    }
+                }
+                if (shouldUpdateState(prevState, state)) {
+                    view.dispatch(view.state.tr.setMeta(tableControlsPluginKey, state));
+                }
+                return false;
+            }, 100),
+        },
+    },
+});

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/view.css

@@ -0,0 +1,82 @@
+.g-md-table-view__hack-strip {
+  position: absolute;
+  left: -13px;
+  display: block;
+  width: 13px;
+  height: 100%;
+  background: transparent;
+}
+.g-md-table-view__wrapper {
+  position: relative;
+  display: inline-block;
+  max-width: calc(100% - 18px);
+  margin-right: 18px;
+  /* stylelint-disable declaration-no-important */
+  margin-bottom: 18px !important;
+}
+.g-md-table-view__buttons-visible .g-md-table-view__plus-button-controls {
+  pointer-events: initial;
+  opacity: 1;
+}
+.g-md-table-view__plus-button-controls {
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 150ms ease 50ms;
+}
+.g-md-table-view__plus-button-controls_right {
+  position: absolute;
+  z-index: 100;
+  top: 0;
+  right: -18px;
+  display: flex;
+  align-items: center;
+  width: 16px;
+  height: 100%;
+}
+.g-md-table-view__plus-button-controls_bottom {
+  position: absolute;
+  z-index: 100;
+  bottom: -18px;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 16px;
+}
+.g-md-table-view__plus-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+.g-md-table-view__plus-button_right {
+  width: 16px;
+  height: 100%;
+}
+.g-md-table-view__plus-button_bottom {
+  width: 100%;
+  height: 16px;
+}
+
+.g-md-table-view.g-md-table-view {
+  z-index: unset;
+  display: block;
+  overflow: auto;
+  box-sizing: content-box;
+  width: fit-content;
+  margin: -13px 0 0 -13px;
+  padding: 13px 0 0 13px;
+  border: none;
+  border-radius: 0;
+  background: transparent !important;
+}
+.g-md-table-view.g-md-table-view tbody {
+  display: block;
+  border-radius: 8px;
+  background: var(--g-color-base-background);
+  box-shadow: inset 0 0 0 1px var(--g-color-line-generic);
+}
+
+.g-md-table-wrapper {
+  display: inline-block;
+  margin-right: 2px;
+}

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

@@ -0,0 +1,4 @@
+import { NodeViewConstructor } from '../../../../../core';
+import './view.css';
+export declare const viewB: import("@bem-react/classname").ClassNameFormatter;
+export declare const yfmTableView: NodeViewConstructor;

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Button } from '@gravity-ui/uikit';
+import { createPortal } from 'react-dom';
+import { cn } from '../../../../../classname';
+import { bindActions } from '../../../../../core';
+import { ErrorLoggerBoundary } from '../../../../../react-utils/ErrorBoundary';
+import { getTableDimensions } from '../../../../../table-utils';
+import { getReactRendererFromState } from '../../../../behavior/ReactRenderer';
+import { controlActions } from './actions';
+import './view.css';
+const wrapperB = cn('table-wrapper');
+export const viewB = cn('table-view');
+export const yfmTableView = (node, view, getPos) => {
+    const actions = bindActions(controlActions)(view);
+    const wrapperElem = document.createElement('div');
+    wrapperElem.classList.add(wrapperB());
+    const tableElem = document.createElement('table');
+    tableElem.classList.add(viewB());
+    const viewElem = document.createElement('div');
+    viewElem.classList.add(viewB('wrapper'));
+    const controls = document.createElement('div');
+    controls.setAttribute('contenteditable', 'false');
+    const hackStrip = document.createElement('div');
+    // this is a strip of a table height. it's a hack so that content of table doesn't get outside of editor borders
+    // and thus editing buttons are not cropped
+    hackStrip.classList.add(viewB('hack-strip'));
+    viewElem.appendChild(hackStrip);
+    viewElem.appendChild(tableElem);
+    viewElem.appendChild(controls);
+    wrapperElem.appendChild(viewElem);
+    const components = [
+        React.createElement("div", { className: viewB('plus-button-controls', { bottom: true }), key: 1 },
+            React.createElement(Button, { onClick: () => {
+                    actions.appendRow.run({ tablePos: getPos() });
+                }, className: viewB('plus-button', { bottom: true }), view: 'normal' }, "+")),
+        React.createElement("div", { className: viewB('plus-button-controls', { right: true }), key: 2 },
+            React.createElement(Button, { onClick: () => {
+                    actions.appendColumn.run({ tablePos: getPos() });
+                }, className: viewB('plus-button', { right: true }), view: 'normal' }, "+")),
+    ];
+    const renderItem = getReactRendererFromState(view.state).createItem('yfm-table-plus-buttons', () => createPortal(React.createElement(ErrorLoggerBoundary, null, components), controls));
+    return {
+        dom: wrapperElem,
+        contentDOM: tableElem,
+        destroy() {
+            renderItem.remove();
+            viewElem.remove();
+        },
+        update(n) {
+            const { rows: nRows, cols: nCols } = getTableDimensions(n);
+            const { rows, cols } = getTableDimensions(node);
+            return !(rows !== nRows || cols !== nCols);
+        },
+        ignoreMutation(mutation) {
+            return mutation.type === 'childList' && mutation.target === controls;
+        },
+    };
+};

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

@@ -0,0 +1,37 @@
+.g-md-table-cell-view__left-button {
+  position: absolute;
+  z-index: 110;
+  top: calc(50% - 14px);
+  left: -13px;
+  pointer-events: none;
+  opacity: 0;
+  border-radius: var(--g-border-radius-s);
+  background: var(--g-color-base-background);
+}
+.g-md-table-cell-view__left-button:hover {
+  pointer-events: initial;
+  opacity: 1;
+}
+.g-md-table-cell-view__upper-button {
+  position: absolute;
+  z-index: 110;
+  top: -13px;
+  left: calc(50% - 14px);
+  pointer-events: none;
+  opacity: 0;
+  border-radius: var(--g-border-radius-s);
+  background: var(--g-color-base-background);
+  transform: rotate(90deg);
+}
+.g-md-table-cell-view__upper-button:hover {
+  pointer-events: initial;
+  opacity: 1;
+}
+.g-md-table-cell-view__upper-visible .g-md-table-cell-view__upper-button {
+  pointer-events: initial;
+  opacity: 1;
+}
+.g-md-table-cell-view__left-visible .g-md-table-cell-view__left-button {
+  pointer-events: initial;
+  opacity: 1;
+}

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

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