@cgi-learning-hub/ui 1.15.0-dev.1788530642 → 1.15.0-dev.1788883967

package/dist/index.cjs.js

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-DldG1AFs.cjs");
+const require_src = require("./src-SrVFLE7u.cjs");
 let _mui_material_Accordion = require("@mui/material/Accordion");
 let _mui_material_AccordionActions = require("@mui/material/AccordionActions");
 let _mui_material_AccordionDetails = require("@mui/material/AccordionDetails");

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { $ as ListSubheader, $t as FolderCard, A as DialogTitle, At as TableSortLabel, B as Grid, Bt as ZoomControl, C as CircularProgress, Ct as TableBody, D as DialogActions, Dt as TableHead, E as Container, Et as TableFooter, F as FormControlLabel, Ft as Toolbar, G as InputLabel, Gt as ResourceCard, H as IconButton, Ht as ICON_TYPE, I as FormGroup, It as Tooltip, J as List, Jt as LoaderBackdrop, K as LinearProgress, Kt as QueryError, L as FormHelperText, Lt as Typography, M as Drawer, Mt as TextField, N as Fade, Nt as ToggleButton, O as DialogContent, Ot as TablePagination, P as FormControl, Pt as ToggleButtonGroup, Q as ListItemText, Qt as Heading, R as FormLabel, Rt as Zoom, S as Chip, St as Table, T as Collapse, Tt as TableContainer, U as Input, Ut as TimePicker, V as Grow, Vt as TreeView, W as InputBase, Wt as SearchInput, X as ListItemButton, Xt as ImagePicker, Y as ListItem, Yt as Loader, Z as ListItemIcon, _ as CardActions, _n as TabList, _t as StepLabel, a as AlertTitle, an as Dialog, at as Paper, b as CardMedia, bn as getTabId, bt as Switch, c as Avatar, cn as DEFAULT_COLOR_OPTIONS, ct as RadioGroup, d as Box, dn as Alert, dt as Slide, en as FileList, et as Menu, f as Breadcrumbs, fn as ActionBar, ft as Slider, g as CardActionArea, gt as StepButton, h as Card, hn as tabPanelClasses, ht as Step, i as AccordionSummary, in as Dropzone, it as Pagination, j as Divider, jt as Tabs, k as DialogContentText, kt as TableRow, l as Backdrop, lt as Select, m as ButtonGroup, mn as getTabPanelUtilityClass, mt as Stack, n as AccordionActions, nn as EmptyState, nt as MobileStepper, o as AppBar, on as DatePicker, ot as Popover, p as Button, pn as TabPanel, pt as Snackbar, q as Link, qt as PasswordInput, r as AccordionDetails, rn as EllipsisWithTooltip, rt as Modal, s as Autocomplete, sn as ColorPicker, st as Radio, t as Accordion, tn as FileListItem, tt as MenuItem, u as Badge, ut as Skeleton, v as CardContent, vn as TabContext, vt as Stepper, w as ClickAwayListener, wt as TableCell, x as Checkbox, xn as useTabContext, xt as Tab, y as CardHeader, yn as getPanelId, yt as SvgIcon, z as GlobalStyles, zt as useMediaQuery } from "./src-2xPjYvOK.js";
+import { $ as ListSubheader, $t as FolderCard, A as DialogTitle, At as TableSortLabel, B as Grid, Bt as ZoomControl, C as CircularProgress, Ct as TableBody, D as DialogActions, Dt as TableHead, E as Container, Et as TableFooter, F as FormControlLabel, Ft as Toolbar, G as InputLabel, Gt as ResourceCard, H as IconButton, Ht as ICON_TYPE, I as FormGroup, It as Tooltip, J as List, Jt as LoaderBackdrop, K as LinearProgress, Kt as QueryError, L as FormHelperText, Lt as Typography, M as Drawer, Mt as TextField, N as Fade, Nt as ToggleButton, O as DialogContent, Ot as TablePagination, P as FormControl, Pt as ToggleButtonGroup, Q as ListItemText, Qt as Heading, R as FormLabel, Rt as Zoom, S as Chip, St as Table, T as Collapse, Tt as TableContainer, U as Input, Ut as TimePicker, V as Grow, Vt as TreeView, W as InputBase, Wt as SearchInput, X as ListItemButton, Xt as ImagePicker, Y as ListItem, Yt as Loader, Z as ListItemIcon, _ as CardActions, _n as TabList, _t as StepLabel, a as AlertTitle, an as Dialog, at as Paper, b as CardMedia, bn as getTabId, bt as Switch, c as Avatar, cn as DEFAULT_COLOR_OPTIONS, ct as RadioGroup, d as Box, dn as Alert, dt as Slide, en as FileList, et as Menu, f as Breadcrumbs, fn as ActionBar, ft as Slider, g as CardActionArea, gt as StepButton, h as Card, hn as tabPanelClasses, ht as Step, i as AccordionSummary, in as Dropzone, it as Pagination, j as Divider, jt as Tabs, k as DialogContentText, kt as TableRow, l as Backdrop, lt as Select, m as ButtonGroup, mn as getTabPanelUtilityClass, mt as Stack, n as AccordionActions, nn as EmptyState, nt as MobileStepper, o as AppBar, on as DatePicker, ot as Popover, p as Button, pn as TabPanel, pt as Snackbar, q as Link, qt as PasswordInput, r as AccordionDetails, rn as EllipsisWithTooltip, rt as Modal, s as Autocomplete, sn as ColorPicker, st as Radio, t as Accordion, tn as FileListItem, tt as MenuItem, u as Badge, ut as Skeleton, v as CardContent, vn as TabContext, vt as Stepper, w as ClickAwayListener, wt as TableCell, x as Checkbox, xn as useTabContext, xt as Tab, y as CardHeader, yn as getPanelId, yt as SvgIcon, z as GlobalStyles, zt as useMediaQuery } from "./src-Dq1ktT5o.js";
 export * from "@mui/material/Tabs";
 export * from "@mui/material/styles";
 export * from "@mui/material/Accordion";

package/dist/{src-2xPjYvOK.js → src-Dq1ktT5o.js}

@@ -2023,7 +2023,7 @@ var ColorPicker = ({ disabled = false, options, value, onChange, slotProps, useC
 	});
 };
 //#endregion
-//#region ../../node_modules/.pnpm/@mui+x-internals@9.12.0_@types+react@19.2.18_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/@mui/x-internals/formatErrorMessage/formatErrorMessage.mjs
+//#region ../../node_modules/.pnpm/@mui+x-internals@9.13.0_@types+react@19.2.18_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/@mui/x-internals/formatErrorMessage/formatErrorMessage.mjs
 /**
 * WARNING: Don't import this directly. It's imported by the code generated by
 * `@mui/internal-babel-plugin-minify-errors`. Make sure to always use string literals in `Error`
@@ -2610,7 +2610,7 @@ var require_advancedFormat = /* @__PURE__ */ __commonJSMin(((exports, module) =>
 	}));
 }));
 //#endregion
-//#region ../../node_modules/.pnpm/@mui+x-internals@9.12.0_@types+react@19.2.18_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/@mui/x-internals/warning/warning.mjs
+//#region ../../node_modules/.pnpm/@mui+x-internals@9.13.0_@types+react@19.2.18_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/@mui/x-internals/warning/warning.mjs
 var warnedOnceCache = /* @__PURE__ */ new Set();
 /**
 * Logs a message to the console on development mode. The warning will only be logged once.
@@ -18671,6 +18671,7 @@ var DeleteRounded_default = SvgIcon_default(/*#__PURE__*/ jsx("path", { d: "M6 1
 var StyledStack = styled(Stack)(({ theme, disabled, hasFile, height, width }) => ({
 	justifyContent: "center",
 	alignItems: "center",
+	position: "relative",
 	minWidth: "150px",
 	width,
 	minHeight: "150px",
@@ -25546,7 +25547,7 @@ function lruMemoize(func, equalityCheckOrOptions) {
 	return memoized;
 }
 //#endregion
-//#region ../../node_modules/.pnpm/@mui+x-internals@9.12.0_@types+react@19.2.18_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/@mui/x-internals/store/createSelector.mjs
+//#region ../../node_modules/.pnpm/@mui+x-internals@9.13.0_@types+react@19.2.18_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/@mui/x-internals/store/createSelector.mjs
 var reselectCreateSelector = createSelectorCreator({
 	memoize: lruMemoize,
 	memoizeOptions: {
@@ -25704,7 +25705,7 @@ var createSelectorMemoizedWithOptions = (options) => (...inputs) => {
 */
 var createSelectorMemoized = createSelectorMemoizedWithOptions();
 //#endregion
-//#region ../../node_modules/.pnpm/@mui+x-internals@9.12.0_@types+react@19.2.18_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/@mui/x-internals/store/useStore.mjs
+//#region ../../node_modules/.pnpm/@mui+x-internals@9.13.0_@types+react@19.2.18_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/@mui/x-internals/store/useStore.mjs
 var useStoreImplementation = parseInt(React$1.version, 10) >= 19 ? useStoreR19 : useStoreLegacy;
 function useStore(store, selector, a1, a2, a3) {
 	return useStoreImplementation(store, selector, a1, a2, a3);
@@ -25723,7 +25724,7 @@ function useStoreLegacy(store, selector, a1, a2, a3) {
 	return useSyncExternalStoreWithSelector(store.subscribe, store.getSnapshot, store.getSnapshot, (state) => selector(state, a1, a2, a3));
 }
 //#endregion
-//#region ../../node_modules/.pnpm/@mui+x-internals@9.12.0_@types+react@19.2.18_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/@mui/x-internals/store/Store.mjs
+//#region ../../node_modules/.pnpm/@mui+x-internals@9.13.0_@types+react@19.2.18_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/@mui/x-internals/store/Store.mjs
 var Store = class Store {
 	static create(state) {
 		return new Store(state);
@@ -25937,7 +25938,7 @@ function TreeViewProvider(props) {
 	});
 }
 //#endregion
-//#region ../../node_modules/.pnpm/@mui+x-internals@9.12.0_@types+react@19.2.18_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/@mui/x-internals/fastObjectShallowCompare/fastObjectShallowCompare.mjs
+//#region ../../node_modules/.pnpm/@mui+x-internals@9.13.0_@types+react@19.2.18_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/@mui/x-internals/fastObjectShallowCompare/fastObjectShallowCompare.mjs
 var is = Object.is;
 /**
 * Fast shallow compare for objects.
@@ -28180,7 +28181,7 @@ function useOnMount(fn) {
 */
 var SafeReact = { ...React$1 };
 //#endregion
-//#region ../../node_modules/.pnpm/@mui+x-internals@9.12.0_@types+react@19.2.18_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/@mui/x-internals/disposable/index.mjs
+//#region ../../node_modules/.pnpm/@mui+x-internals@9.13.0_@types+react@19.2.18_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/@mui/x-internals/disposable/index.mjs
 /**
 * Well-known `Symbol.dispose`. Resolves to the native well-known symbol when
 * the runtime ships the explicit resource management proposal; otherwise falls
@@ -28297,7 +28298,7 @@ function unwrapSuppressedErrors(error) {
 	return failures;
 }
 //#endregion
-//#region ../../node_modules/.pnpm/@mui+x-internals@9.12.0_@types+react@19.2.18_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/@mui/x-internals/useDisposable/useDisposable.mjs
+//#region ../../node_modules/.pnpm/@mui+x-internals@9.13.0_@types+react@19.2.18_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/@mui/x-internals/useDisposable/useDisposable.mjs
 var STRICT_MODE_BITS = 16;
 var SafeReactInternals = SafeReact;
 var ReactInternals = SafeReactInternals.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE ?? SafeReactInternals.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
@@ -28400,7 +28401,7 @@ function useTreeViewStore(StoreClass, parameters) {
 	return store;
 }
 //#endregion
-//#region ../../node_modules/.pnpm/@mui+x-internals@9.12.0_@types+react@19.2.18_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/@mui/x-internals/EventManager/EventManager.mjs
+//#region ../../node_modules/.pnpm/@mui+x-internals@9.13.0_@types+react@19.2.18_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/@mui/x-internals/EventManager/EventManager.mjs
 var EventManager = class {
 	maxListeners = 20;
 	warnOnce = false;
@@ -29562,4 +29563,4 @@ var ZoomControl = ({ step = 10, value = 50, onChange, max = 100, min = 0, label
 //#endregion
 export { ListSubheader as $, FolderCard as $t, DialogTitle as A, TableSortLabel as At, Grid as B, ZoomControl as Bt, CircularProgress$1 as C, TableBody as Ct, DialogActions$1 as D, TableHead as Dt, Container as E, TableFooter as Et, FormControlLabel as F, Toolbar as Ft, InputLabel$1 as G, ResourceCard as Gt, IconButton as H, ICON_TYPE as Ht, FormGroup as I, Tooltip$1 as It, List$1 as J, LoaderBackdrop as Jt, LinearProgress as K, QueryError as Kt, FormHelperText$1 as L, Typography$1 as Lt, Drawer as M, TextField$1 as Mt, Fade$1 as N, ToggleButton as Nt, DialogContent$1 as O, TablePagination as Ot, FormControl$1 as P, ToggleButtonGroup as Pt, ListItemText$1 as Q, Heading as Qt, FormLabel as R, Zoom as Rt, Chip$1 as S, Table as St, Collapse$1 as T, TableContainer as Tt, Input as U, TimePicker as Ut, Grow$1 as V, TreeView as Vt, InputBase$1 as W, SearchInput as Wt, ListItemButton$1 as X, ImagePicker as Xt, ListItem$1 as Y, Loader as Yt, ListItemIcon$1 as Z, DeleteRounded_default as Zt, CardActions as _, TabList as _n, StepLabel as _t, AlertTitle$1 as a, Dialog as an, Paper as at, CardMedia$1 as b, getTabId as bn, Switch as bt, Avatar as c, DEFAULT_COLOR_OPTIONS as cn, RadioGroup as ct, Box$1 as d, Alert as dn, Slide as dt, FileList as en, Menu as et, Breadcrumbs as f, ActionBar as fn, Slider as ft, CardActionArea as g, clsx as gn, StepButton as gt, Card$1 as h, tabPanelClasses as hn, Step as ht, AccordionSummary as i, Dropzone as in, Pagination as it, Divider$1 as j, Tabs$1 as jt, DialogContentText as k, TableRow as kt, Backdrop$1 as l, SvgIcon_default as ln, Select as lt, ButtonGroup as m, getTabPanelUtilityClass as mn, Stack$1 as mt, AccordionActions as n, EmptyState as nn, MobileStepper as nt, AppBar as o, DatePicker as on, Popover as ot, Button$1 as p, TabPanel as pn, Snackbar as pt, Link as q, PasswordInput as qt, AccordionDetails as r, EllipsisWithTooltip as rn, Modal as rt, Autocomplete as s, ColorPicker as sn, Radio as st, Accordion as t, FileListItem as tn, MenuItem$1 as tt, Badge as u, Circle as un, Skeleton as ut, CardContent$1 as v, TabContext as vn, Stepper as vt, ClickAwayListener$1 as w, TableCell as wt, Checkbox as x, useTabContext as xn, Tab as xt, CardHeader as y, getPanelId as yn, SvgIcon as yt, GlobalStyles as z, useMediaQuery$1 as zt };
 
-//# sourceMappingURL=src-2xPjYvOK.js.map
+//# sourceMappingURL=src-Dq1ktT5o.js.map

package/dist/tiptap/index.cjs.js

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-DldG1AFs.cjs");
+const require_src = require("../src-SrVFLE7u.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _mui_material_styles = require("@mui/material/styles");
@@ -2951,6 +2951,139 @@ var UndoRedoButton = (0, react.forwardRef)(({ editor: providedEditor, action, te
 });
 UndoRedoButton.displayName = "UndoRedoButton";
 //#endregion
+//#region src/tiptap/components/ui-primitive/formatting-controls/const.tsx
+var BUTTON_DEFS = [
+	{
+		id: "undo",
+		extensionName: "undoRedo",
+		group: "history",
+		Component: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UndoRedoButton, { action: "undo" })
+	},
+	{
+		id: "redo",
+		extensionName: "undoRedo",
+		group: "history",
+		Component: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UndoRedoButton, { action: "redo" })
+	},
+	{
+		id: "heading",
+		extensionName: "heading",
+		group: "blocks",
+		Component: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeadingMenu, {
+			modal: false,
+			levels: [
+				1,
+				2,
+				3,
+				4
+			]
+		})
+	},
+	{
+		id: "bulletList",
+		extensionName: "bulletList",
+		group: "blocks",
+		Component: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListButton, { type: "bulletList" })
+	},
+	{
+		id: "orderedList",
+		extensionName: "orderedList",
+		group: "blocks",
+		Component: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListButton, { type: "orderedList" })
+	},
+	{
+		id: "blockquote",
+		extensionName: "blockquote",
+		group: "blocks",
+		Component: BlockquoteButton
+	},
+	{
+		id: "codeBlock",
+		extensionName: "codeBlock",
+		group: "blocks",
+		Component: CodeBlockButton
+	},
+	{
+		id: "textColor",
+		extensionName: "textStyle",
+		group: "marks",
+		Component: TextColorPopover
+	},
+	{
+		id: "bold",
+		extensionName: "bold",
+		group: "marks",
+		Component: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarkButton, { type: "bold" })
+	},
+	{
+		id: "italic",
+		extensionName: "italic",
+		group: "marks",
+		Component: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarkButton, { type: "italic" })
+	},
+	{
+		id: "strike",
+		extensionName: "strike",
+		group: "marks",
+		Component: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarkButton, { type: "strike" })
+	},
+	{
+		id: "code",
+		extensionName: "code",
+		group: "marks",
+		Component: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarkButton, { type: "code" })
+	},
+	{
+		id: "underline",
+		extensionName: "underline",
+		group: "marks",
+		Component: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarkButton, { type: "underline" })
+	},
+	{
+		id: "link",
+		extensionName: "link",
+		group: "marks",
+		Component: LinkPopover
+	},
+	{
+		id: "superscript",
+		extensionName: "superscript",
+		group: "scripts",
+		Component: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarkButton, { type: "superscript" })
+	},
+	{
+		id: "subscript",
+		extensionName: "subscript",
+		group: "scripts",
+		Component: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarkButton, { type: "subscript" })
+	},
+	{
+		id: "alignLeft",
+		extensionName: "textAlign",
+		group: "textAlign",
+		Component: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextAlignButton, { align: "left" })
+	},
+	{
+		id: "alignCenter",
+		extensionName: "textAlign",
+		group: "textAlign",
+		Component: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextAlignButton, { align: "center" })
+	},
+	{
+		id: "alignRight",
+		extensionName: "textAlign",
+		group: "textAlign",
+		Component: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextAlignButton, { align: "right" })
+	},
+	{
+		id: "alignJustify",
+		extensionName: "textAlign",
+		group: "textAlign",
+		Component: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextAlignButton, { align: "justify" })
+	}
+];
+var BUTTON_IDS = BUTTON_DEFS.map((def) => def.id);
+//#endregion
 //#region src/tiptap/hooks/use-composed-ref.ts
 var updateRef = (ref, value) => {
 	if (typeof ref === "function") ref(value);
@@ -3196,48 +3329,28 @@ var ToolbarSeparator = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_mat
 });
 ToolbarSeparator.displayName = "ToolbarSeparator";
 //#endregion
+//#region src/tiptap/components/ui-primitive/formatting-controls/hooks.ts
+var useFormattingItems = (editor) => {
+	return (0, react.useMemo)(() => {
+		if (!editor) return [];
+		return BUTTON_DEFS.filter((def) => def.extensionName ? editor.extensionManager.extensions.some((e) => e.name === def.extensionName) : true);
+	}, [editor]);
+};
+//#endregion
+//#region src/tiptap/components/ui-primitive/formatting-controls/utils.ts
+function groupBy(items, getKey) {
+	return items.reduce((acc, item) => {
+		const key = getKey(item);
+		(acc[key] ??= []).push(item);
+		return acc;
+	}, {});
+}
+//#endregion
 //#region src/tiptap/components/ui-primitive/formatting-controls/formatting-controls.tsx
-var FormattingControls = ({ editor }) => {
-	const extensionNames = editor.extensionManager.extensions.map((e) => e.name);
-	const hasSuperscriptSubscript = extensionNames.some((name) => name === "subscript" || name === "superscript");
-	const hasTextStyle = extensionNames.some((name) => name === "textStyle");
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ToolbarGroup, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UndoRedoButton, { action: "undo" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UndoRedoButton, { action: "redo" })] }),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarSeparator, {}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ToolbarGroup, { children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeadingMenu, {
-				modal: false,
-				levels: [
-					1,
-					2,
-					3,
-					4
-				]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListButton, { type: "bulletList" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListButton, { type: "orderedList" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BlockquoteButton, {}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeBlockButton, {})
-		] }),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarSeparator, {}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ToolbarGroup, { children: [
-			hasTextStyle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextColorPopover, {}) : null,
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarkButton, { type: "bold" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarkButton, { type: "italic" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarkButton, { type: "strike" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarkButton, { type: "code" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarkButton, { type: "underline" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkPopover, {})
-		] }),
-		hasSuperscriptSubscript ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarSeparator, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ToolbarGroup, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarkButton, { type: "superscript" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarkButton, { type: "subscript" })] })] }) : null,
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarSeparator, {}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ToolbarGroup, { children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextAlignButton, { align: "left" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextAlignButton, { align: "center" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextAlignButton, { align: "right" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextAlignButton, { align: "justify" })
-		] })
-	] });
+var FormattingControls = ({ editor, include }) => {
+	const items = useFormattingItems(editor);
+	const groups = groupBy(include ? items.filter((button) => include.includes(button.id)) : items, (button) => button.group);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: Object.entries(groups).map(([groupId, groupItems], index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [index > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarSeparator, {}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarGroup, { children: groupItems.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(item.Component, {}, item.id)) })] }, groupId)) });
 };
 FormattingControls.displayName = "FormattingControls";
 //#endregion
@@ -3257,6 +3370,7 @@ function Spacer({ orientation = "horizontal", size, style = {}, ...props }) {
 	});
 }
 //#endregion
+exports.BUTTON_IDS = BUTTON_IDS;
 exports.FormattingControls = FormattingControls;
 exports.Spacer = Spacer;
 exports.Toolbar = Toolbar;

package/dist/tiptap/index.d.ts

@@ -7,13 +7,25 @@ declare type BaseProps = React.HTMLAttributes<HTMLDivElement>;
 
 declare type BaseProps_2 = React.HTMLAttributes<HTMLDivElement>;
 
+export declare const BUTTON_IDS: string[];
+
+declare type ButtonDef = {
+    Component: React.FC;
+    extensionName: string;
+    group: ButtonGroup;
+    id: string;
+};
+
+declare type ButtonGroup = "history" | "blocks" | "marks" | "scripts" | "textAlign";
+
 export declare const FormattingControls: {
-    ({ editor }: FormattingControlsProps): JSX.Element;
+    ({ editor, include, }: FormattingControlsProps): JSX.Element;
     displayName: string;
 };
 
 declare interface FormattingControlsProps extends BaseProps {
     editor: Editor;
+    include?: ButtonDef["id"][];
 }
 
 export declare function Spacer({ orientation, size, style, ...props }: React.ComponentProps<"div"> & {

package/dist/tiptap/index.es.js

@@ -1,4 +1,4 @@
-import { H as IconButton, It as Tooltip, Lt as Typography, Nt as ToggleButton, W as InputBase, Zt as DeleteRounded_default, et as Menu, gn as clsx, j as Divider, ln as SvgIcon_default, mt as Stack, ot as Popover, tt as MenuItem, u as Badge, un as Circle } from "../src-2xPjYvOK.js";
+import { H as IconButton, It as Tooltip, Lt as Typography, Nt as ToggleButton, W as InputBase, Zt as DeleteRounded_default, et as Menu, gn as clsx, j as Divider, ln as SvgIcon_default, mt as Stack, ot as Popover, tt as MenuItem, u as Badge, un as Circle } from "../src-Dq1ktT5o.js";
 import { Fragment, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { styled } from "@mui/material/styles";
@@ -2927,6 +2927,139 @@ var UndoRedoButton = forwardRef(({ editor: providedEditor, action, text, hideWhe
 });
 UndoRedoButton.displayName = "UndoRedoButton";
 //#endregion
+//#region src/tiptap/components/ui-primitive/formatting-controls/const.tsx
+var BUTTON_DEFS = [
+	{
+		id: "undo",
+		extensionName: "undoRedo",
+		group: "history",
+		Component: () => /* @__PURE__ */ jsx(UndoRedoButton, { action: "undo" })
+	},
+	{
+		id: "redo",
+		extensionName: "undoRedo",
+		group: "history",
+		Component: () => /* @__PURE__ */ jsx(UndoRedoButton, { action: "redo" })
+	},
+	{
+		id: "heading",
+		extensionName: "heading",
+		group: "blocks",
+		Component: () => /* @__PURE__ */ jsx(HeadingMenu, {
+			modal: false,
+			levels: [
+				1,
+				2,
+				3,
+				4
+			]
+		})
+	},
+	{
+		id: "bulletList",
+		extensionName: "bulletList",
+		group: "blocks",
+		Component: () => /* @__PURE__ */ jsx(ListButton, { type: "bulletList" })
+	},
+	{
+		id: "orderedList",
+		extensionName: "orderedList",
+		group: "blocks",
+		Component: () => /* @__PURE__ */ jsx(ListButton, { type: "orderedList" })
+	},
+	{
+		id: "blockquote",
+		extensionName: "blockquote",
+		group: "blocks",
+		Component: BlockquoteButton
+	},
+	{
+		id: "codeBlock",
+		extensionName: "codeBlock",
+		group: "blocks",
+		Component: CodeBlockButton
+	},
+	{
+		id: "textColor",
+		extensionName: "textStyle",
+		group: "marks",
+		Component: TextColorPopover
+	},
+	{
+		id: "bold",
+		extensionName: "bold",
+		group: "marks",
+		Component: () => /* @__PURE__ */ jsx(MarkButton, { type: "bold" })
+	},
+	{
+		id: "italic",
+		extensionName: "italic",
+		group: "marks",
+		Component: () => /* @__PURE__ */ jsx(MarkButton, { type: "italic" })
+	},
+	{
+		id: "strike",
+		extensionName: "strike",
+		group: "marks",
+		Component: () => /* @__PURE__ */ jsx(MarkButton, { type: "strike" })
+	},
+	{
+		id: "code",
+		extensionName: "code",
+		group: "marks",
+		Component: () => /* @__PURE__ */ jsx(MarkButton, { type: "code" })
+	},
+	{
+		id: "underline",
+		extensionName: "underline",
+		group: "marks",
+		Component: () => /* @__PURE__ */ jsx(MarkButton, { type: "underline" })
+	},
+	{
+		id: "link",
+		extensionName: "link",
+		group: "marks",
+		Component: LinkPopover
+	},
+	{
+		id: "superscript",
+		extensionName: "superscript",
+		group: "scripts",
+		Component: () => /* @__PURE__ */ jsx(MarkButton, { type: "superscript" })
+	},
+	{
+		id: "subscript",
+		extensionName: "subscript",
+		group: "scripts",
+		Component: () => /* @__PURE__ */ jsx(MarkButton, { type: "subscript" })
+	},
+	{
+		id: "alignLeft",
+		extensionName: "textAlign",
+		group: "textAlign",
+		Component: () => /* @__PURE__ */ jsx(TextAlignButton, { align: "left" })
+	},
+	{
+		id: "alignCenter",
+		extensionName: "textAlign",
+		group: "textAlign",
+		Component: () => /* @__PURE__ */ jsx(TextAlignButton, { align: "center" })
+	},
+	{
+		id: "alignRight",
+		extensionName: "textAlign",
+		group: "textAlign",
+		Component: () => /* @__PURE__ */ jsx(TextAlignButton, { align: "right" })
+	},
+	{
+		id: "alignJustify",
+		extensionName: "textAlign",
+		group: "textAlign",
+		Component: () => /* @__PURE__ */ jsx(TextAlignButton, { align: "justify" })
+	}
+];
+var BUTTON_IDS = BUTTON_DEFS.map((def) => def.id);
+//#endregion
 //#region src/tiptap/hooks/use-composed-ref.ts
 var updateRef = (ref, value) => {
 	if (typeof ref === "function") ref(value);
@@ -3172,48 +3305,28 @@ var ToolbarSeparator = () => /* @__PURE__ */ jsx(Divider, {
 });
 ToolbarSeparator.displayName = "ToolbarSeparator";
 //#endregion
+//#region src/tiptap/components/ui-primitive/formatting-controls/hooks.ts
+var useFormattingItems = (editor) => {
+	return useMemo(() => {
+		if (!editor) return [];
+		return BUTTON_DEFS.filter((def) => def.extensionName ? editor.extensionManager.extensions.some((e) => e.name === def.extensionName) : true);
+	}, [editor]);
+};
+//#endregion
+//#region src/tiptap/components/ui-primitive/formatting-controls/utils.ts
+function groupBy(items, getKey) {
+	return items.reduce((acc, item) => {
+		const key = getKey(item);
+		(acc[key] ??= []).push(item);
+		return acc;
+	}, {});
+}
+//#endregion
 //#region src/tiptap/components/ui-primitive/formatting-controls/formatting-controls.tsx
-var FormattingControls = ({ editor }) => {
-	const extensionNames = editor.extensionManager.extensions.map((e) => e.name);
-	const hasSuperscriptSubscript = extensionNames.some((name) => name === "subscript" || name === "superscript");
-	const hasTextStyle = extensionNames.some((name) => name === "textStyle");
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		/* @__PURE__ */ jsxs(ToolbarGroup, { children: [/* @__PURE__ */ jsx(UndoRedoButton, { action: "undo" }), /* @__PURE__ */ jsx(UndoRedoButton, { action: "redo" })] }),
-		/* @__PURE__ */ jsx(ToolbarSeparator, {}),
-		/* @__PURE__ */ jsxs(ToolbarGroup, { children: [
-			/* @__PURE__ */ jsx(HeadingMenu, {
-				modal: false,
-				levels: [
-					1,
-					2,
-					3,
-					4
-				]
-			}),
-			/* @__PURE__ */ jsx(ListButton, { type: "bulletList" }),
-			/* @__PURE__ */ jsx(ListButton, { type: "orderedList" }),
-			/* @__PURE__ */ jsx(BlockquoteButton, {}),
-			/* @__PURE__ */ jsx(CodeBlockButton, {})
-		] }),
-		/* @__PURE__ */ jsx(ToolbarSeparator, {}),
-		/* @__PURE__ */ jsxs(ToolbarGroup, { children: [
-			hasTextStyle ? /* @__PURE__ */ jsx(TextColorPopover, {}) : null,
-			/* @__PURE__ */ jsx(MarkButton, { type: "bold" }),
-			/* @__PURE__ */ jsx(MarkButton, { type: "italic" }),
-			/* @__PURE__ */ jsx(MarkButton, { type: "strike" }),
-			/* @__PURE__ */ jsx(MarkButton, { type: "code" }),
-			/* @__PURE__ */ jsx(MarkButton, { type: "underline" }),
-			/* @__PURE__ */ jsx(LinkPopover, {})
-		] }),
-		hasSuperscriptSubscript ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ToolbarSeparator, {}), /* @__PURE__ */ jsxs(ToolbarGroup, { children: [/* @__PURE__ */ jsx(MarkButton, { type: "superscript" }), /* @__PURE__ */ jsx(MarkButton, { type: "subscript" })] })] }) : null,
-		/* @__PURE__ */ jsx(ToolbarSeparator, {}),
-		/* @__PURE__ */ jsxs(ToolbarGroup, { children: [
-			/* @__PURE__ */ jsx(TextAlignButton, { align: "left" }),
-			/* @__PURE__ */ jsx(TextAlignButton, { align: "center" }),
-			/* @__PURE__ */ jsx(TextAlignButton, { align: "right" }),
-			/* @__PURE__ */ jsx(TextAlignButton, { align: "justify" })
-		] })
-	] });
+var FormattingControls = ({ editor, include }) => {
+	const items = useFormattingItems(editor);
+	const groups = groupBy(include ? items.filter((button) => include.includes(button.id)) : items, (button) => button.group);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: Object.entries(groups).map(([groupId, groupItems], index) => /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 ? /* @__PURE__ */ jsx(ToolbarSeparator, {}) : null, /* @__PURE__ */ jsx(ToolbarGroup, { children: groupItems.map((item) => /* @__PURE__ */ jsx(item.Component, {}, item.id)) })] }, groupId)) });
 };
 FormattingControls.displayName = "FormattingControls";
 //#endregion
@@ -3233,6 +3346,6 @@ function Spacer({ orientation = "horizontal", size, style = {}, ...props }) {
 	});
 }
 //#endregion
-export { FormattingControls, Spacer, Toolbar, ToolbarGroup, ToolbarSeparator };
+export { BUTTON_IDS, FormattingControls, Spacer, Toolbar, ToolbarGroup, ToolbarSeparator };
 
 //# sourceMappingURL=index.es.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cgi-learning-hub/ui",
-  "version": "1.15.0-dev.1788530642",
+  "version": "1.15.0-dev.1788883967",
   "description": "React component library for Hub's design system, built on Material UI with custom and extended components.",
   "keywords": [
     "cgi-learning-hub",