@thebuoyant-tsdev/mui-ts-library 3.27.1 → 3.28.0

package/README.de.md

@@ -191,7 +191,7 @@ import { RichTextEditor } from '@thebuoyant-tsdev/mui-ts-library';
 
 ### SqlEditor
 
-SQL-Code-Editor mit Syntax-Highlighting, dialektbewusstem Autocomplete und Inline-Linting. Konzipiert für Developer-Tools, Datenbank-Clients und Admin-Panels — mit `Cmd+Enter`-Shortcut, Multi-Dialekt-Support (MySQL, PostgreSQL, SQLite, MSSQL) und Schema-basiertem Autocomplete.
+SQL-Code-Editor mit Syntax-Highlighting, dialektbewusstem Autocomplete und Inline-Linting. Konzipiert für Developer-Tools, Datenbank-Clients und Admin-Panels — mit `Cmd+Enter` (Ausführen) und `Shift+Alt+F` (SQL formatieren) als Tastenkürzel, Multi-Dialekt-Support (MySQL, PostgreSQL, SQLite, MSSQL) und Schema-basiertem Autocomplete.
 
 ```tsx
 import { SqlEditor } from '@thebuoyant-tsdev/mui-ts-library';
@@ -483,6 +483,13 @@ Dieses Projekt folgt [Semantic Versioning](https://semver.org/):
 
 ## Changelog
 
+### [Unveröffentlicht]
+
+**Hinzugefügt**
+- `SqlEditor`: `Shift+Alt+F` Tastenkürzel — löst den vorhandenen SQL-Format-Button direkt aus dem Editor heraus aus (respektiert `readonly` und `toolbarConfig.showFormat`). Keine API-Änderung.
+
+---
+
 ### [3.27.1] — 2026-07-14
 
 **Behoben**

package/README.md

@@ -191,7 +191,7 @@ import { RichTextEditor } from '@thebuoyant-tsdev/mui-ts-library';
 
 ### SqlEditor
 
-SQL code editor with syntax highlighting, dialect-aware autocomplete, and inline linting. Designed for developer tools, database clients, and admin panels where users write and execute SQL queries — with `Cmd+Enter` shortcut, multi-dialect support (MySQL, PostgreSQL, SQLite, MSSQL), and schema-based autocomplete.
+SQL code editor with syntax highlighting, dialect-aware autocomplete, and inline linting. Designed for developer tools, database clients, and admin panels where users write and execute SQL queries — with `Cmd+Enter` (Execute) and `Shift+Alt+F` (Format SQL) shortcuts, multi-dialect support (MySQL, PostgreSQL, SQLite, MSSQL), and schema-based autocomplete.
 
 ```tsx
 import { SqlEditor } from '@thebuoyant-tsdev/mui-ts-library';
@@ -483,6 +483,13 @@ This project follows [Semantic Versioning](https://semver.org/):
 
 ## Changelog
 
+### [Unreleased]
+
+**Added**
+- `SqlEditor`: `Shift+Alt+F` keyboard shortcut — triggers the existing SQL Format button directly from the editor (respects `readonly` and `toolbarConfig.showFormat`). No API change.
+
+---
+
 ### [3.27.1] — 2026-07-14
 
 **Fixed**

package/dist/components/sql-editor/SqlEditor.js

@@ -2,78 +2,105 @@ import { normalizeSize as e } from "../shared/normalizeSize.js";
 import { DEFAULT_SQL_EDITOR_TOOLBAR_CONFIG as t, DEFAULT_SQL_EDITOR_TRANSLATION as n } from "./SqlEditor.types.js";
 import { SqlEditorContent as r } from "./SqlEditorContent.js";
 import { SqlEditorToolbar as i } from "./SqlEditorToolbar.js";
-import { SqlEditorFooter as a } from "./SqlEditorFooter.js";
-import { useSqlQueryHistory as o } from "./useSqlQueryHistory.js";
-import { useCallback as s, useRef as c, useState as l } from "react";
-import { Box as u, Divider as d, Paper as f } from "@mui/material";
-import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { SqlEditorFooter as ee } from "./SqlEditorFooter.js";
+import { useSqlQueryHistory as a } from "./useSqlQueryHistory.js";
+import { useCallback as o, useMemo as s, useRef as c, useState as l } from "react";
+import { Box as u, Divider as d, Paper as te } from "@mui/material";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { format as h } from "sql-formatter";
 //#region src/components/sql-editor/SqlEditor.tsx
-function g({ value: g, onChange: _, placeholder: ee, height: v, width: y, disabled: b = !1, readonly: x = !1, error: S = !1, helperText: C, name: w, dialect: T = "standard", showLineNumbers: E = !0, showLineColumn: D = !0, showErrorCount: O = !1, toolbarConfig: k, translation: A, highlightColors: j, schema: M, queryHistoryKey: N = "sql-editor-query-history", queryHistoryMaxEntries: P = 20, onExecute: F, onLint: I, onBlur: L, onFocus: R }) {
+var ne = {
+	standard: "sql",
+	mysql: "mysql",
+	postgresql: "postgresql",
+	sqlite: "sqlite",
+	mssql: "tsql"
+};
+function g({ value: g, onChange: _, placeholder: re, height: v, width: y, disabled: b = !1, readonly: x = !1, error: S = !1, helperText: C, name: w, dialect: T = "standard", showLineNumbers: E = !0, showLineColumn: D = !0, showErrorCount: O = !1, toolbarConfig: k, translation: A, highlightColors: j, schema: M, queryHistoryKey: N = "sql-editor-query-history", queryHistoryMaxEntries: P = 20, onExecute: F, onLint: I, onBlur: L, onFocus: R }) {
 	let z = {
 		...n,
 		...A
 	}, B = {
 		...t,
 		...k
-	}, { history: te, addEntry: V, clearHistory: H } = o(N, P), U = e(v), W = e(y), G = U === "auto", K = G ? void 0 : U ?? 300, q = c(null), [J, Y] = l(null), [X, Z] = l({
+	}, { history: V, addEntry: H, clearHistory: U } = a(N, P), W = e(v), G = e(y), K = W === "auto", q = K ? void 0 : W ?? 300, J = c(null), [Y, X] = l(null), [Z, ie] = l({
 		line: 1,
 		col: 1
-	}), [Q, ne] = l(0), re = s((e) => {
-		q.current = e, Y(e);
-	}, []), ie = s((e, t) => {
-		Z({
+	}), [ae, Q] = l(0), oe = o((e) => {
+		J.current = e, X(e);
+	}, []), se = o((e, t) => {
+		ie({
 			line: e,
 			col: t
 		});
-	}, []), ae = s((e) => {
-		ne(e);
+	}, []), ce = o((e) => {
+		Q(e);
 	}, []), $ = F ? (e) => {
-		V(e), F(e);
-	} : void 0, oe = s((e) => {
-		let t = q.current;
+		H(e), F(e);
+	} : void 0, le = s(() => {
+		if (!(x || !B.showFormat)) return () => {
+			let e = J.current;
+			if (!e) return;
+			let t = e.state.doc.toString();
+			try {
+				let n = h(t, { language: ne[T] });
+				e.dispatch({ changes: {
+					from: 0,
+					to: e.state.doc.length,
+					insert: n
+				} });
+			} catch {}
+			e.focus();
+		};
+	}, [
+		T,
+		x,
+		B.showFormat
+	]), ue = o((e) => {
+		let t = J.current;
 		t && (t.dispatch({ changes: {
 			from: 0,
 			to: t.state.doc.length,
 			insert: e
 		} }), t.focus()), _?.(e);
-	}, [_]), se = D || O || !!C;
-	return /* @__PURE__ */ h(u, {
+	}, [_]), de = D || O || !!C;
+	return /* @__PURE__ */ m(u, {
 		sx: {
-			width: W ?? "100%",
-			...G ? {
+			width: G ?? "100%",
+			...K ? {
 				display: "flex",
 				flexDirection: "column",
 				flex: 1
 			} : {}
 		},
 		children: [
-			/* @__PURE__ */ h(f, {
+			/* @__PURE__ */ m(te, {
 				variant: "outlined",
 				sx: {
 					display: "flex",
 					flexDirection: "column",
 					overflow: "hidden",
-					...G ? { flex: 1 } : { height: K },
+					...K ? { flex: 1 } : { height: q },
 					borderColor: S ? "error.main" : void 0,
 					"&:focus-within": {
 						borderColor: S ? "error.main" : "primary.main",
 						borderWidth: 2
 					}
 				},
-				children: [!x && /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(i, {
-					editorView: J,
+				children: [!x && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(i, {
+					editorView: Y,
 					toolbarConfig: B,
 					translation: z,
 					dialect: T,
 					disabled: b,
 					onExecute: $,
-					queryHistory: te,
-					onSelectHistoryEntry: oe,
-					onClearHistory: H
-				}), /* @__PURE__ */ m(d, {})] }), /* @__PURE__ */ m(r, {
+					queryHistory: V,
+					onSelectHistoryEntry: ue,
+					onClearHistory: U
+				}), /* @__PURE__ */ p(d, {})] }), /* @__PURE__ */ p(r, {
 					value: g,
 					onChange: _,
-					placeholder: ee,
+					placeholder: re,
 					disabled: b,
 					readonly: x,
 					showLineNumbers: E,
@@ -83,25 +110,26 @@ function g({ value: g, onChange: _, placeholder: ee, height: v, width: y, disabl
 					identifierColor: j?.identifier,
 					schema: M,
 					onExecute: $,
+					onFormat: le,
 					onLint: I,
-					onDiagnosticsChange: I ? ae : void 0,
-					onViewReady: re,
-					onCursorChange: ie,
+					onDiagnosticsChange: I ? ce : void 0,
+					onViewReady: oe,
+					onCursorChange: se,
 					onBlur: L,
 					onFocus: R
 				})]
 			}),
-			se && /* @__PURE__ */ m(a, {
+			de && /* @__PURE__ */ p(ee, {
 				helperText: C,
 				error: S,
 				showLineColumn: D,
 				showErrorCount: O,
-				diagnosticsCount: Q,
-				cursorLine: X.line,
-				cursorCol: X.col,
+				diagnosticsCount: ae,
+				cursorLine: Z.line,
+				cursorCol: Z.col,
 				translation: z
 			}),
-			w && /* @__PURE__ */ m("input", {
+			w && /* @__PURE__ */ p("input", {
 				type: "hidden",
 				name: w,
 				value: g ?? ""

package/dist/components/sql-editor/SqlEditorContent.d.ts

@@ -13,6 +13,7 @@ type SqlEditorContentProps = {
     identifierColor?: string;
     schema?: SqlSchema;
     onExecute?: (sql: string) => void;
+    onFormat?: () => void;
     onLint?: (sql: string) => Promise<SqlLintError[]> | SqlLintError[];
     onDiagnosticsChange?: (count: number) => void;
     onViewReady: (view: EditorView | null) => void;
@@ -20,5 +21,5 @@ type SqlEditorContentProps = {
     onBlur?: () => void;
     onFocus?: () => void;
 };
-export declare function SqlEditorContent({ value, onChange, placeholder, disabled, readonly, showLineNumbers, dialect, keywordColor, stringColor, identifierColor, schema, onExecute, onLint, onDiagnosticsChange, onViewReady, onCursorChange, onBlur, onFocus, }: SqlEditorContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function SqlEditorContent({ value, onChange, placeholder, disabled, readonly, showLineNumbers, dialect, keywordColor, stringColor, identifierColor, schema, onExecute, onFormat, onLint, onDiagnosticsChange, onViewReady, onCursorChange, onBlur, onFocus, }: SqlEditorContentProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/sql-editor/SqlEditorContent.js

@@ -1,43 +1,45 @@
 import { useEffect as e, useRef as t } from "react";
 import { Box as n, useTheme as r } from "@mui/material";
 import { jsx as i } from "react/jsx-runtime";
-import { EditorView as a, highlightActiveLine as o, highlightActiveLineGutter as s, keymap as c, lineNumbers as l, placeholder as u } from "@codemirror/view";
-import { Compartment as d, EditorState as f } from "@codemirror/state";
-import { defaultKeymap as p, history as m, historyKeymap as ee } from "@codemirror/commands";
-import { HighlightStyle as te, syntaxHighlighting as ne } from "@codemirror/language";
+import { EditorView as a, highlightActiveLine as ee, highlightActiveLineGutter as te, keymap as o, lineNumbers as s, placeholder as c } from "@codemirror/view";
+import { Compartment as l, EditorState as u } from "@codemirror/state";
+import { defaultKeymap as ne, history as d, historyKeymap as f } from "@codemirror/commands";
+import { HighlightStyle as p, syntaxHighlighting as m } from "@codemirror/language";
 import { lintGutter as h, linter as g } from "@codemirror/lint";
 import { tags as _ } from "@lezer/highlight";
-import { MSSQL as v, MySQL as y, PostgreSQL as b, SQLite as x, StandardSQL as S, sql as C } from "@codemirror/lang-sql";
-import { autocompletion as re, completionKeymap as w } from "@codemirror/autocomplete";
+import { MSSQL as v, MySQL as y, PostgreSQL as b, SQLite as x, StandardSQL as S, sql as re } from "@codemirror/lang-sql";
+import { autocompletion as ie, completionKeymap as ae } from "@codemirror/autocomplete";
 //#region src/components/sql-editor/SqlEditorContent.tsx
-var T = {
+var C = {
 	standard: S,
 	mysql: y,
 	postgresql: b,
 	sqlite: x,
 	mssql: v
 };
-function E({ value: v, onChange: y, placeholder: b, disabled: x = !1, readonly: S = !1, showLineNumbers: E = !0, dialect: D = "standard", keywordColor: O, stringColor: k, identifierColor: A, schema: j, onExecute: M, onLint: N, onDiagnosticsChange: P, onViewReady: F, onCursorChange: I, onBlur: L, onFocus: R }) {
-	let z = t(null), B = t(null), V = t(y), H = t(I), U = t(L), W = t(R), G = t(F), K = t(M), q = t(N), J = t(P), Y = t(new d()), X = t(new d()), Z = r(), Q = Z.palette.mode === "dark", $ = !!N, ie = JSON.stringify(j);
+function w({ value: v, onChange: y, placeholder: b, disabled: x = !1, readonly: S = !1, showLineNumbers: w = !0, dialect: T = "standard", keywordColor: E, stringColor: D, identifierColor: O, schema: k, onExecute: A, onFormat: j, onLint: M, onDiagnosticsChange: N, onViewReady: P, onCursorChange: F, onBlur: I, onFocus: L }) {
+	let R = t(null), z = t(null), B = t(y), V = t(F), H = t(I), U = t(L), W = t(P), G = t(A), K = t(j), q = t(M), J = t(N), Y = t(new l()), X = t(new l()), Z = r(), Q = Z.palette.mode === "dark", $ = !!M, oe = JSON.stringify(k);
 	return e(() => {
-		V.current = y;
+		B.current = y;
 	}, [y]), e(() => {
+		V.current = F;
+	}, [F]), e(() => {
 		H.current = I;
 	}, [I]), e(() => {
 		U.current = L;
 	}, [L]), e(() => {
-		W.current = R;
-	}, [R]), e(() => {
-		G.current = F;
-	}, [F]), e(() => {
-		K.current = M;
+		W.current = P;
+	}, [P]), e(() => {
+		G.current = A;
+	}, [A]), e(() => {
+		K.current = j;
+	}, [j]), e(() => {
+		q.current = M;
 	}, [M]), e(() => {
-		q.current = N;
+		J.current = N;
 	}, [N]), e(() => {
-		J.current = P;
-	}, [P]), e(() => {
-		if (!z.current) return;
-		let e = B.current?.state.doc.toString() ?? v ?? "", t = O ?? Z.palette.primary.main, n = k ?? Z.palette.success.main, r = A ?? Z.palette.info.main, i = te.define([
+		if (!R.current) return;
+		let e = z.current?.state.doc.toString() ?? v ?? "", t = E ?? Z.palette.primary.main, n = D ?? Z.palette.success.main, r = O ?? Z.palette.info.main, i = p.define([
 			{
 				tag: _.keyword,
 				color: t,
@@ -78,7 +80,7 @@ function E({ value: v, onChange: y, placeholder: b, disabled: x = !1, readonly:
 				color: Z.palette.error.main,
 				textDecoration: "underline wavy"
 			}
-		]), d = a.theme({
+		]), l = a.theme({
 			"&": {
 				height: "100%",
 				fontFamily: "'Fira Code', 'JetBrains Mono', 'Consolas', monospace",
@@ -139,11 +141,11 @@ function E({ value: v, onChange: y, placeholder: b, disabled: x = !1, readonly:
 			".cm-diagnostic-error": { borderLeft: `3px solid ${Z.palette.error.main}` },
 			".cm-diagnostic-warning": { borderLeft: `3px solid ${Z.palette.warning.main}` },
 			".cm-diagnostic-info": { borderLeft: `3px solid ${Z.palette.info.main}` }
-		}, { dark: Q }), y = j ? Object.fromEntries(j.tables.map((e) => [e.name, (e.columns ?? []).map((e) => ({
+		}, { dark: Q }), y = k ? Object.fromEntries(k.tables.map((e) => [e.name, (e.columns ?? []).map((e) => ({
 			label: e.name,
 			detail: e.type,
 			type: "property"
-		}))])) : void 0, M = async (e) => {
+		}))])) : void 0, A = async (e) => {
 			let t = q.current;
 			if (!t) return [];
 			let n = e.state.doc.toString();
@@ -161,63 +163,67 @@ function E({ value: v, onChange: y, placeholder: b, disabled: x = !1, readonly:
 			} catch {
 				return [];
 			}
-		}, N = c.of([{
+		}, j = o.of([{
 			key: "Mod-Enter",
-			run: (e) => (K.current?.(e.state.doc.toString()), !0)
-		}]), P = [
-			d,
-			ne(i),
-			C({
-				dialect: T[D],
+			run: (e) => (G.current?.(e.state.doc.toString()), !0)
+		}]), M = o.of([{
+			key: "Shift-Alt-f",
+			run: () => (K.current?.(), !0)
+		}]), N = [
+			l,
+			m(i),
+			re({
+				dialect: C[T],
 				schema: y
 			}),
-			m(),
-			re(),
-			N,
-			c.of([
-				...p,
-				...ee,
-				...w
+			d(),
+			ie(),
+			j,
+			M,
+			o.of([
+				...ne,
+				...f,
+				...ae
 			]),
 			Y.current.of(a.editable.of(!x && !S)),
-			X.current.of(f.readOnly.of(S)),
-			o(),
-			...E ? [l(), s()] : [],
-			...b ? [u(b)] : [],
-			...$ ? [h(), g(M, { delay: 600 })] : [],
+			X.current.of(u.readOnly.of(S)),
+			ee(),
+			...w ? [s(), te()] : [],
+			...b ? [c(b)] : [],
+			...$ ? [h(), g(A, { delay: 600 })] : [],
 			a.updateListener.of((e) => {
-				e.docChanged && V.current?.(e.state.doc.toString());
+				e.docChanged && B.current?.(e.state.doc.toString());
 				let t = e.state.selection.main.head, n = e.state.doc.lineAt(t);
-				H.current(n.number, t - n.from + 1);
+				V.current(n.number, t - n.from + 1);
 			}),
 			a.domEventHandlers({
 				blur: () => {
-					U.current?.();
+					H.current?.();
 				},
 				focus: () => {
-					W.current?.();
+					U.current?.();
 				}
 			})
-		], F = new a({
-			state: f.create({
+		], P = new a({
+			state: u.create({
 				doc: e,
-				extensions: P
+				extensions: N
 			}),
-			parent: z.current
+			parent: R.current
 		});
-		return B.current = F, G.current(F), () => {
-			G.current(null), F.destroy(), B.current = null;
+		return z.current = P, W.current(P), () => {
+			W.current(null), P.destroy(), z.current = null;
 		};
 	}, [
 		Q,
-		D,
+		T,
 		$,
+		E,
+		D,
 		O,
-		k,
-		A,
-		ie
+		oe
 	]), e(() => {
-		let e = B.current;
+		let e = z.current;
 		if (!e) return;
 		let t = e.state.doc.toString();
 		t !== (v ?? "") && e.dispatch({ changes: {
@@ -226,9 +232,9 @@ function E({ value: v, onChange: y, placeholder: b, disabled: x = !1, readonly:
 			insert: v ?? ""
 		} });
 	}, [v]), e(() => {
-		B.current?.dispatch({ effects: [Y.current.reconfigure(a.editable.of(!x && !S)), X.current.reconfigure(f.readOnly.of(S))] });
+		z.current?.dispatch({ effects: [Y.current.reconfigure(a.editable.of(!x && !S)), X.current.reconfigure(u.readOnly.of(S))] });
 	}, [x, S]), /* @__PURE__ */ i(n, {
-		ref: z,
+		ref: R,
 		sx: {
 			flex: 1,
 			overflow: "hidden",
@@ -245,4 +251,4 @@ function E({ value: v, onChange: y, placeholder: b, disabled: x = !1, readonly:
 	});
 }
 //#endregion
-export { E as SqlEditorContent };
+export { w as SqlEditorContent };

package/dist/components/sql-editor/SqlEditorToolbar.js

@@ -10,8 +10,8 @@ import f from "@mui/icons-material/Delete";
 import p from "@mui/icons-material/Undo";
 import m from "@mui/icons-material/Redo";
 import h from "@mui/icons-material/AutoFixHigh";
-import g from "@mui/icons-material/PlayArrow";
-import { format as _ } from "sql-formatter";
+import { format as g } from "sql-formatter";
+import _ from "@mui/icons-material/PlayArrow";
 //#region src/components/sql-editor/SqlEditorToolbar.tsx
 var v = {
 	standard: "sql",
@@ -49,7 +49,7 @@ function y({ editorView: y, toolbarConfig: b, translation: x, dialect: S, disabl
 		if (!e) return;
 		let t = e.state.doc.toString();
 		try {
-			let n = _(t, { language: v[S] });
+			let n = g(t, { language: v[S] });
 			e.dispatch({ changes: {
 				from: 0,
 				to: e.state.doc.length,
@@ -151,7 +151,7 @@ function y({ editorView: y, toolbarConfig: b, translation: x, dialect: S, disabl
 				sx: { mx: .5 }
 			}), /* @__PURE__ */ o(e, {
 				label: x.execute,
-				icon: /* @__PURE__ */ o(g, { fontSize: "small" }),
+				icon: /* @__PURE__ */ o(_, { fontSize: "small" }),
 				onClick: I,
 				disabled: A
 			})] }),