web/src/components/RealtimeTable/Cell/EditCell/EditCell.jsx

@@ -2,15 +2,18 @@
 import { useEffect, useRef, useLayoutEffect, useState } from 'react';
 import { isFormula, extractFormula, calculateFormula, formatNumber } from '../../utils/formulaUtils';
 import { saveToStorage, loadFromStorage } from '../../utils/localStorageUtils';
+import { useRealtime } from '../../contexts/RealtimeContext';
+
+const EditCell = ({ refCell, onChange, disabled, value, tableId, cellId, table }) => {
+  const { endEditing: contextEndEditing } = useRealtime();
 
-const EditCell = ({ refCell, onChange, disabled, value, tableId, cellId }) => {
   const [curValue, setCurValue] = useState(value);
   const [displayValue, setDisplayValue] = useState(value);
   const [isFormulaMode, setIsFormulaMode] = useState(false);
-  
+
   // Ключ для хранения формул в localStorage
   const storageKey = `formula_${tableId}_${cellId}`;
-  
+
   const trFrag = refCell.current.offsetParent.offsetParent;
   const tdFrag = refCell.current.offsetParent;
   const left = tdFrag.offsetLeft;
@@ -69,7 +72,7 @@ const EditCell = ({ refCell, onChange, disabled, value, tableId, cellId }) => {
     if (isFormula(curValue)) {
       // Сохраняем формулу в localStorage
       saveToStorage(storageKey, curValue);
-      
+
       // Вычисляем и сохраняем результат
       try {
         const formula = extractFormula(curValue);
@@ -108,6 +111,29 @@ const EditCell = ({ refCell, onChange, disabled, value, tableId, cellId }) => {
     return displayValue;
   };
 
+  const finishEditing = () => {
+    const editingCell = table.getState().editingCell || null;
+    if (editingCell) {
+      contextEndEditing?.(editingCell.row, editingCell.column);
+    }
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      // Проверяем, был ли клик внутри элемента редактирования
+      const editElement = ref.current;
+      if (editElement && !editElement.contains(event.target)) {
+        finishEditing();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref]);
+
   return (
     <tr>
       <td>

web/src/components/RealtimeTable/RealtimeTable.jsx

@@ -177,6 +177,7 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
         measureElement: (el) => el?.offsetHeight || TABLE_ROW_HEIGHT,
       },
       onEditingCellChange: (cell) => {
+        console.log(cell, editingCell);
         if (cell) {
           if (editingCell) return;
           contextStartEditing?.(cell.row, cell.column);

web/src/components/RealtimeTable/tableColumns.jsx

@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom';
 import { columns as mockColumns } from '../../mocks/mockTable';
 import { config } from './constants/FORM_2/AHR';
 import { useParams } from 'react-router';
+import { useRealtime } from './contexts/RealtimeContext';
 
 function EditCellPortal({
   cell,
@@ -20,6 +21,8 @@ function EditCellPortal({
   const [isSaving, setIsSaving] = useState(false);
   const isDisabled = false;
 
+  const { endEditing: contextEndEditing } = useRealtime();
+
   useEffect(() => {
     if (ref.current) {
       const tbodyRef = ref.current.offsetParent?.offsetParent?.offsetParent;
@@ -68,6 +71,7 @@ function EditCellPortal({
             disabled={!isEditable}
             onChange={handleChange}
             tableId={tableKey}
+            table={table}
             cellId={cell.row.id + '_' + cell.column.id}
           />,
           refTbody,