@revisium/schema-toolkit-ui 0.6.7 → 0.6.9

package/README.md

@@ -284,6 +284,54 @@ core.applyViewState(s)  // restore view settings
 core.dispose()          // cleanup
 ```
 
+## Hooks
+
+### `useContentEditable`
+
+A controlled `contenteditable` hook that manages DOM synchronization, cursor position, and keyboard shortcuts.
+
+```tsx
+import { useContentEditable } from '@revisium/schema-toolkit-ui';
+
+const editableProps = useContentEditable({
+  value,
+  onChange: (v) => setValue(v),
+  onBlur: () => { /* called after DOM is synced */ },
+  onFocus: () => {},
+  onEnter: () => { /* Enter key pressed with non-empty value */ },
+  onEscape: () => { /* Escape key pressed */ },
+  restrict: /^[a-z0-9-]$/, // optional — block disallowed keys
+  autoFocus: true,          // optional — focus on mount
+  focusTrigger: n,          // optional — increment to focus programmatically
+});
+
+return <div data-testid="editable" {...editableProps} />;
+```
+
+#### How it works
+
+`dangerouslySetInnerHTML` sets the initial DOM content. After that React does not overwrite the DOM on re-renders (standard contenteditable contract). The hook handles synchronization explicitly:
+
+| Event | Behaviour |
+|-------|-----------|
+| User types | `onChange(value)` called on every `input` event. Cursor position is preserved across re-renders. |
+| `value` prop changes while **not focused** | DOM updated immediately via `textContent`. |
+| `value` prop changes while **focused** | DOM is left untouched so the user can keep typing without interruption. |
+| `blur` | If `value` diverged from DOM (e.g. external revert happened while focused), DOM is synced to `value` before `onBlur` is called. |
+| `Enter` | `blur()` called then `onEnter()` (only when `value` is non-empty). |
+| `Escape` | `blur()` called then `onEscape()`. |
+
+#### Controlled revert pattern
+
+Because DOM sync on blur is guaranteed, a revert triggered while the element is focused will correctly reset the displayed text when the user leaves the field:
+
+```tsx
+// External state revert while user is typing:
+//   value prop → 'original'
+//   DOM         → 'user typed...'  (untouched during focus)
+//   on blur    → DOM is reset to 'original' ✓
+```
+
 ### Cleanup
 
 Call `vm.dispose()` (or `core.dispose()` for `TableEditorCore`) when the editor is unmounted.

package/dist/index.cjs

@@ -2550,6 +2550,11 @@ function useContentEditable(options) {
 	const prevFocusTriggerRef = (0, react.useRef)(focusTrigger);
 	const optionsRef = (0, react.useRef)(options);
 	optionsRef.current = options;
+	const isFocusedRef = (0, react.useRef)(false);
+	(0, react.useEffect)(() => {
+		const el = elementRef.current;
+		if (el && !isFocusedRef.current && el.textContent !== value) el.textContent = value;
+	}, [value]);
 	const ref = (0, react.useCallback)((node) => {
 		elementRef.current = node;
 	}, []);
@@ -2592,10 +2597,14 @@ function useContentEditable(options) {
 		optionsRef.current.onChange?.(val);
 	}, []);
 	const handleBlur = (0, react.useCallback)(() => {
+		isFocusedRef.current = false;
+		const el = elementRef.current;
+		if (el && el.textContent !== optionsRef.current.value) el.textContent = optionsRef.current.value;
 		optionsRef.current.onBlur?.();
 		cursorPosition.current = null;
 	}, []);
 	const handleFocus = (0, react.useCallback)(() => {
+		isFocusedRef.current = true;
 		optionsRef.current.onFocus?.();
 	}, []);
 	const handleKeyDown = (0, react.useCallback)((event) => {
@@ -7078,7 +7087,7 @@ function resolveRefColumn(child, fieldPath) {
 			systemFieldId: systemDef.id,
 			isDeprecated,
 			hasFormula,
-			isSortable: !isDeprecated && !hasFormula
+			isSortable: !isDeprecated
 		};
 	}
 	if (refValue === _revisium_schema_toolkit.SystemSchemaIds.File) return resolveFileRefColumns(child, fieldPath);
@@ -7104,7 +7113,8 @@ function stripDataPrefix(fieldPath) {
 }
 function createColumn(fieldPath, child, fieldType) {
 	const isDeprecated = child.metadata().deprecated ?? false;
-	const hasFormula = child.hasFormula();
+	const formula = child.formula();
+	const hasFormula = formula !== void 0;
 	return {
 		field: fieldPath,
 		label: stripDataPrefix(fieldPath),
@@ -7112,7 +7122,8 @@ function createColumn(fieldPath, child, fieldType) {
 		isSystem: false,
 		isDeprecated,
 		hasFormula,
-		isSortable: !isDeprecated && !hasFormula && fieldType !== FilterFieldType.File
+		formulaExpression: formula?.expression(),
+		isSortable: !isDeprecated && fieldType !== FilterFieldType.File
 	};
 }
 
@@ -11115,6 +11126,9 @@ function clearPendingContextMenu() {
 function setPendingContextMenu(value) {
 	pendingContextMenu = value;
 }
+function hasPendingContextMenu() {
+	return pendingContextMenu !== null;
+}
 const cellMenuRegistry = /* @__PURE__ */ new WeakMap();
 function useCellContextMenu(cell, cellRef, deferredEdit) {
 	const [menuAnchor, setMenuAnchor] = (0, react.useState)(null);
@@ -11371,7 +11385,7 @@ const CellWrapper = (0, mobx_react_lite.observer)(({ cell, children, onDoubleCli
 	const handleMouseDown = (0, react.useCallback)((e) => {
 		if (e.detail === 2 && state !== "readonly" && state !== "readonlyFocused") e.preventDefault();
 		if (e.button === 2) {
-			openContextMenuAt(e.clientX, e.clientY);
+			if (!hasPendingContextMenu()) openContextMenuAt(e.clientX, e.clientY);
 			return;
 		}
 		if (!e.shiftKey && e.button === 0 && state !== "editing") {
@@ -13673,6 +13687,35 @@ const RowActionsMenu = ({ rowId, onSelect, onDuplicate, onDelete }) => {
 	});
 };
 
+//#endregion
+//#region src/table-editor/Status/model/CellInfoModel.ts
+var CellInfoModel = class {
+	_cellFSM;
+	_columnsModel;
+	constructor(cellFSM, columnsModel) {
+		this._cellFSM = cellFSM;
+		this._columnsModel = columnsModel;
+		(0, mobx.makeAutoObservable)(this, {}, { autoBind: true });
+	}
+	get _focusedColumn() {
+		const focused = this._cellFSM.focusedCell;
+		if (!focused) return null;
+		return this._columnsModel.allColumns.find((c) => c.field === focused.field) ?? null;
+	}
+	get isVisible() {
+		return this._focusedColumn !== null && !this._cellFSM.hasSelection;
+	}
+	get fieldLabel() {
+		return this._focusedColumn?.label ?? "";
+	}
+	get formulaExpression() {
+		return this._focusedColumn?.formulaExpression;
+	}
+	get foreignKeyTableId() {
+		return this._focusedColumn?.foreignKeyTableId;
+	}
+};
+
 //#endregion
 //#region src/table-editor/Status/model/RowCountModel.ts
 var RowCountModel = class {
@@ -13786,6 +13829,7 @@ var TableEditorCore = class {
 	cellFSM;
 	selection;
 	rowCount;
+	cellInfo;
 	_dataSource;
 	_pageSize;
 	_breadcrumbs;
@@ -13814,6 +13858,7 @@ var TableEditorCore = class {
 		this.cellFSM = new CellFSM();
 		this.selection = new SelectionModel();
 		this.rowCount = new RowCountModel();
+		this.cellInfo = new CellInfoModel(this.cellFSM, this.columns);
 		this.columns.setOnChange(() => this._handleColumnsChange());
 		this.filters.setOnChange(() => this._handleFilterChange());
 		this.filters.setOnApply((_where) => this._handleFilterApply());
@@ -14158,6 +14203,50 @@ var MockDataSource = class {
 	}
 };
 
+//#endregion
+//#region src/table-editor/Status/ui/CellInfoWidget.tsx
+const CellInfoWidget = (0, mobx_react_lite.observer)(({ model }) => {
+	if (!model.isVisible) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_chakra_ui_react.Flex, {
+		alignItems: "center",
+		gap: 2,
+		overflow: "hidden",
+		flexShrink: 1,
+		minW: 0,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Text, {
+				fontSize: "sm",
+				color: "gray.500",
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap",
+				"data-testid": "cell-info-field",
+				children: model.fieldLabel
+			}),
+			model.formulaExpression && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_chakra_ui_react.Text, {
+				fontSize: "sm",
+				color: "purple.400",
+				fontFamily: "mono",
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap",
+				"data-testid": "cell-info-formula",
+				children: ["= ", model.formulaExpression]
+			}),
+			model.foreignKeyTableId && !model.formulaExpression && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_chakra_ui_react.Text, {
+				fontSize: "sm",
+				color: "blue.400",
+				fontFamily: "mono",
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap",
+				"data-testid": "cell-info-fk",
+				children: ["→ ", model.foreignKeyTableId]
+			})
+		]
+	});
+});
+
 //#endregion
 //#region src/table-editor/Status/ui/RowCountWidget.tsx
 const RowCountWidget = (0, mobx_react_lite.observer)(({ model }) => {
@@ -14340,14 +14429,24 @@ const TableEditor = (0, mobx_react_lite.observer)(({ viewModel, useWindowScroll
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_chakra_ui_react.Flex, {
 				px: 3,
 				py: 2,
-				justifyContent: "space-between",
+				alignItems: "center",
+				overflow: "hidden",
 				...useWindowScroll && {
 					position: "sticky",
 					bottom: 0,
 					bg: "white",
 					zIndex: 3
 				},
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowCountWidget, { model: viewModel.rowCount }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ViewSettingsBadge, { model: viewModel.viewBadge })]
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowCountWidget, { model: viewModel.rowCount }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_chakra_ui_react.Flex, {
+					alignItems: "center",
+					gap: 3,
+					overflow: "hidden",
+					flexShrink: 1,
+					minW: 0,
+					flex: 1,
+					justifyContent: "flex-end",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CellInfoWidget, { model: viewModel.cellInfo }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ViewSettingsBadge, { model: viewModel.viewBadge })]
+				})]
 			})
 		]
 	});