@cgi-learning-hub/ui 1.15.0-dev.1788516152 → 1.15.0-dev.1788870644

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-DLUPogQT.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-CUvREoVb.js";
 export * from "@mui/material/Tabs";
 export * from "@mui/material/styles";
 export * from "@mui/material/Accordion";

package/dist/{src-2xPjYvOK.js → src-CUvREoVb.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.
@@ -25546,7 +25546,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 +25704,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 +25723,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 +25937,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 +28180,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 +28297,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 +28400,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 +29562,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-CUvREoVb.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-DLUPogQT.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _mui_material_styles = require("@mui/material/styles");
@@ -609,7 +609,7 @@ var CODE_BLOCK_SHORTCUT_KEY = "mod+alt+c";
 /**
 * Checks if code block can be toggled in the current editor state
 */
-function canToggle$1(editor, turnInto = true) {
+function canToggle$2(editor, turnInto = true) {
 	if (!editor || !editor.isEditable) return false;
 	if (!isNodeInSchema("codeBlock", editor) || isNodeTypeSelected(editor, ["image"])) return false;
 	if (!turnInto) return editor.can().toggleNode("codeBlock", "paragraph");
@@ -629,7 +629,7 @@ function canToggle$1(editor, turnInto = true) {
 */
 function toggleCodeBlock(editor) {
 	if (!editor || !editor.isEditable) return false;
-	if (!canToggle$1(editor)) return false;
+	if (!canToggle$2(editor)) return false;
 	try {
 		const view = editor.view;
 		let state = view.state;
@@ -681,7 +681,7 @@ function shouldShowButton$4(props) {
 	if (!hideWhenUnavailable) return true;
 	if (!editor.isEditable) return false;
 	if (!isNodeInSchema("codeBlock", editor)) return false;
-	if (!editor.isActive("code")) return canToggle$1(editor);
+	if (!editor.isActive("code")) return canToggle$2(editor);
 	return true;
 }
 /**
@@ -731,7 +731,7 @@ function useCodeBlock(config) {
 	const { editor: providedEditor, hideWhenUnavailable = false, onToggled } = config || {};
 	const { editor } = useTiptapEditor(providedEditor);
 	const [isVisible, setIsVisible] = (0, react.useState)(true);
-	const canToggleState = canToggle$1(editor);
+	const canToggleState = canToggle$2(editor);
 	const isActive = editor?.isActive("codeBlock") || false;
 	(0, react.useEffect)(() => {
 		if (!editor) return;
@@ -897,7 +897,7 @@ var HEADING_SHORTCUT_KEYS = {
 /**
 * Checks if heading can be toggled in the current editor state
 */
-function canToggle(editor, level, turnInto = true) {
+function canToggle$1(editor, level, turnInto = true) {
 	if (!editor || !editor.isEditable) return false;
 	if (!isNodeInSchema("heading", editor) || isNodeTypeSelected(editor, ["image"])) return false;
 	if (!turnInto) return level ? editor.can().setNode("heading", { level }) : editor.can().setNode("heading");
@@ -926,7 +926,7 @@ function isHeadingActive(editor, level) {
 function toggleHeading(editor, level) {
 	if (!editor || !editor.isEditable) return false;
 	const levels = Array.isArray(level) ? level : [level];
-	const toggleLevel = levels.find((l) => canToggle(editor, l));
+	const toggleLevel = levels.find((l) => canToggle$1(editor, l));
 	if (!toggleLevel) return false;
 	try {
 		const view = editor.view;
@@ -973,15 +973,15 @@ function toggleHeading(editor, level) {
 /**
 * Determines if the heading menu item should be shown
 */
-function shouldShowItem(props) {
+function shouldShowItem$1(props) {
 	const { editor, level, hideWhenUnavailable } = props;
 	if (!editor) return false;
 	if (!hideWhenUnavailable) return true;
 	if (!editor.isEditable) return false;
 	if (!isNodeInSchema("heading", editor)) return false;
 	if (!editor.isActive("code")) {
-		if (Array.isArray(level)) return level.some((l) => canToggle(editor, l));
-		return canToggle(editor, level);
+		if (Array.isArray(level)) return level.some((l) => canToggle$1(editor, l));
+		return canToggle$1(editor, level);
 	}
 	return true;
 }
@@ -1035,12 +1035,12 @@ function useHeading(config) {
 	const { editor: providedEditor, level, hideWhenUnavailable = false, onToggled } = config;
 	const { editor } = useTiptapEditor(providedEditor);
 	const [isVisible, setIsVisible] = (0, react.useState)(true);
-	const canToggleState = canToggle(editor, level);
+	const canToggleState = canToggle$1(editor, level);
 	const isActive = isHeadingActive(editor, level);
 	(0, react.useEffect)(() => {
 		if (!editor) return;
 		const handleSelectionUpdate = () => {
-			setIsVisible(shouldShowItem({
+			setIsVisible(shouldShowItem$1({
 				editor,
 				level,
 				hideWhenUnavailable
@@ -1129,6 +1129,169 @@ var HeadingMenuItem = (0, react.forwardRef)(({ editor: providedEditor, level, te
 });
 HeadingMenuItem.displayName = "HeadingMenuItem";
 //#endregion
+//#region src/tiptap/components/ui/paragraph-menu-item/use-paragraph.ts
+/**
+* Checks if paragraph can be toggled in the current editor state
+*/
+function canToggle(editor, turnInto = true) {
+	if (!editor || !editor.isEditable) return false;
+	if (!isNodeInSchema("paragraph", editor) || isNodeTypeSelected(editor, ["image"])) return false;
+	if (!turnInto) return editor.can().setNode("paragraph");
+	if (!selectionWithinConvertibleTypes(editor, [
+		"paragraph",
+		"heading",
+		"bulletList",
+		"orderedList",
+		"taskList",
+		"blockquote",
+		"codeBlock"
+	])) return false;
+	return editor.can().setNode("paragraph") || editor.can().clearNodes();
+}
+/**
+* Checks if paragraph is currently active
+*/
+function isParagraphActive(editor) {
+	if (!editor || !editor.isEditable) return false;
+	return editor.isActive("paragraph");
+}
+/**
+* Toggles paragraph in the editor
+*/
+function toggleParagraph(editor) {
+	if (!editor || !editor.isEditable || !canToggle(editor)) return false;
+	try {
+		const view = editor.view;
+		let state = view.state;
+		let tr = state.tr;
+		const blocks = getSelectedBlockNodes(editor);
+		const isPossibleToTurnInto = selectionWithinConvertibleTypes(editor, [
+			"paragraph",
+			"heading",
+			"bulletList",
+			"orderedList",
+			"taskList",
+			"blockquote",
+			"codeBlock"
+		]) && blocks.length === 1;
+		if ((state.selection.empty || state.selection instanceof _tiptap_pm_state.TextSelection) && isPossibleToTurnInto) {
+			const pos = findNodePosition({
+				editor,
+				node: state.selection.$anchor.node(1)
+			})?.pos;
+			if (!isValidPosition(pos)) return false;
+			tr = tr.setSelection(_tiptap_pm_state.NodeSelection.create(state.doc, pos));
+			view.dispatch(tr);
+			state = view.state;
+		}
+		const selection = state.selection;
+		let chain = editor.chain().focus();
+		if (selection instanceof _tiptap_pm_state.NodeSelection) {
+			const firstChild = selection.node.firstChild?.firstChild;
+			const lastChild = selection.node.lastChild?.lastChild;
+			const from = firstChild ? selection.from + firstChild.nodeSize : selection.from + 1;
+			const to = lastChild ? selection.to - lastChild.nodeSize : selection.to - 1;
+			const resolvedFrom = state.doc.resolve(from);
+			const resolvedTo = state.doc.resolve(to);
+			chain = chain.setTextSelection(_tiptap_pm_state.TextSelection.between(resolvedFrom, resolvedTo)).clearNodes();
+		}
+		chain.setNode("paragraph").run();
+		editor.chain().focus().selectTextblockEnd().run();
+		return true;
+	} catch {
+		return false;
+	}
+}
+/**
+* Determines if the paragraph menu item should be shown
+*/
+function shouldShowItem(props) {
+	const { editor, hideWhenUnavailable } = props;
+	if (!editor) return false;
+	if (!hideWhenUnavailable) return true;
+	if (!editor.isEditable) return false;
+	if (!isNodeInSchema("paragraph", editor)) return false;
+	if (!editor.isActive("code")) return canToggle(editor);
+	return true;
+}
+/**
+* Custom hook that provides paragraph functionality for Tiptap editor
+*/
+function useParagraph(config) {
+	const { editor: providedEditor, hideWhenUnavailable = false, onToggled } = config;
+	const { editor } = useTiptapEditor(providedEditor);
+	const [isVisible, setIsVisible] = (0, react.useState)(true);
+	const canToggleState = canToggle(editor);
+	const isActive = isParagraphActive(editor);
+	(0, react.useEffect)(() => {
+		if (!editor) return;
+		const handleSelectionUpdate = () => {
+			setIsVisible(shouldShowItem({
+				editor,
+				hideWhenUnavailable
+			}));
+		};
+		handleSelectionUpdate();
+		editor.on("selectionUpdate", handleSelectionUpdate);
+		return () => {
+			editor.off("selectionUpdate", handleSelectionUpdate);
+		};
+	}, [editor, hideWhenUnavailable]);
+	return {
+		isVisible,
+		isActive,
+		handleToggle: (0, react.useCallback)(() => {
+			if (!editor) return false;
+			const success = toggleParagraph(editor);
+			if (success) onToggled?.();
+			return success;
+		}, [editor, onToggled]),
+		canToggle: canToggleState,
+		label: "Paragraphe"
+	};
+}
+//#endregion
+//#region src/tiptap/components/ui/paragraph-menu-item/paragraph-menu-item.tsx
+/**
+* Menu item component for toggling paragraph in a Tiptap editor.
+*
+* For custom menu item implementations, use the `useParagraph` hook instead.
+*/
+var ParagraphMenuItem = (0, react.forwardRef)(({ editor: providedEditor, text, hideWhenUnavailable = false, onToggled, showShortcut = false, onClick, children, ...menuItemProps }, ref) => {
+	const { editor } = useTiptapEditor(providedEditor);
+	const { isVisible, canToggle, isActive, handleToggle, label } = useParagraph({
+		editor,
+		hideWhenUnavailable,
+		onToggled
+	});
+	const handleClick = (0, react.useCallback)((event) => {
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		handleToggle();
+	}, [handleToggle, onClick]);
+	if (!isVisible) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_MenuItem.default, {
+		component: "li",
+		role: "button",
+		tabIndex: -1,
+		disabled: !canToggle,
+		"data-disabled": !canToggle,
+		"aria-label": label,
+		"aria-pressed": isActive,
+		tooltip: label,
+		selected: isActive,
+		onClick: handleClick,
+		...menuItemProps,
+		ref,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Typography.default, {
+			component: "span",
+			variant: "body2",
+			children: label
+		}), showShortcut && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Badge.default, { children: parseShortcutKeys({ shortcutKeys: "ctrl+alt+p" }) })] })
+	});
+});
+ParagraphMenuItem.displayName = "ParagraphMenuItem";
+//#endregion
 //#region src/tiptap/components/icons/heading-icon.tsx
 var HeadingIcon = (0, _mui_material_utils.createSvgIcon)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
 	d: "M6 3C6.55228 3 7 3.44772 7 4V11H17V4C17 3.44772 17.4477 3 18 3C18.5523 3 19 3.44772 19 4V20C19 20.5523 18.5523 21 18 21C17.4477 21 17 20.5523 17 20V13H7V20C7 20.5523 6.55228 21 6 21C5.44772 21 5 20.5523 5 20V4C5 3.44772 5.44772 3 6 3Z",
@@ -1202,11 +1365,11 @@ function useHeadingMenu(config) {
 	const [isVisible, setIsVisible] = (0, react.useState)(true);
 	const activeLevel = getActiveHeadingLevel(editor, levels);
 	const isActive = isHeadingActive(editor);
-	const canToggleState = canToggle(editor);
+	const canToggleState = canToggle$1(editor);
 	(0, react.useEffect)(() => {
 		if (!editor) return;
 		const handleSelectionUpdate = () => {
-			setIsVisible(shouldShowItem({
+			setIsVisible(shouldShowItem$1({
 				editor,
 				hideWhenUnavailable,
 				level: levels
@@ -1286,7 +1449,7 @@ var HeadingMenu = (0, react.forwardRef)(({ editor: providedEditor, levels = [
 		...buttonProps,
 		ref,
 		children: children ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { fontSize: "small" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExpandMoreRounded_default, { sx: { fontSize: "0.75rem" } })] })
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Menu.default, {
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Menu.default, {
 		id: "heading-menu",
 		anchorEl,
 		open,
@@ -1295,12 +1458,15 @@ var HeadingMenu = (0, react.forwardRef)(({ editor: providedEditor, levels = [
 			"aria-labelledby": "heading-button",
 			role: "listbox"
 		} },
-		children: levels.map((level) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeadingMenuItem, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ParagraphMenuItem, {
+			editor,
+			onClick: handleClose
+		}), levels.map((level) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeadingMenuItem, {
 			editor,
 			level,
 			text: `Heading ${level}`,
 			onClick: handleClose
-		}, `heading-${level}`))
+		}, `heading-${level}`))]
 	})] });
 });
 HeadingMenu.displayName = "HeadingMenu";
@@ -2785,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);
@@ -3030,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
@@ -3091,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-CUvREoVb.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";
@@ -585,7 +585,7 @@ var CODE_BLOCK_SHORTCUT_KEY = "mod+alt+c";
 /**
 * Checks if code block can be toggled in the current editor state
 */
-function canToggle$1(editor, turnInto = true) {
+function canToggle$2(editor, turnInto = true) {
 	if (!editor || !editor.isEditable) return false;
 	if (!isNodeInSchema("codeBlock", editor) || isNodeTypeSelected(editor, ["image"])) return false;
 	if (!turnInto) return editor.can().toggleNode("codeBlock", "paragraph");
@@ -605,7 +605,7 @@ function canToggle$1(editor, turnInto = true) {
 */
 function toggleCodeBlock(editor) {
 	if (!editor || !editor.isEditable) return false;
-	if (!canToggle$1(editor)) return false;
+	if (!canToggle$2(editor)) return false;
 	try {
 		const view = editor.view;
 		let state = view.state;
@@ -657,7 +657,7 @@ function shouldShowButton$4(props) {
 	if (!hideWhenUnavailable) return true;
 	if (!editor.isEditable) return false;
 	if (!isNodeInSchema("codeBlock", editor)) return false;
-	if (!editor.isActive("code")) return canToggle$1(editor);
+	if (!editor.isActive("code")) return canToggle$2(editor);
 	return true;
 }
 /**
@@ -707,7 +707,7 @@ function useCodeBlock(config) {
 	const { editor: providedEditor, hideWhenUnavailable = false, onToggled } = config || {};
 	const { editor } = useTiptapEditor(providedEditor);
 	const [isVisible, setIsVisible] = useState(true);
-	const canToggleState = canToggle$1(editor);
+	const canToggleState = canToggle$2(editor);
 	const isActive = editor?.isActive("codeBlock") || false;
 	useEffect(() => {
 		if (!editor) return;
@@ -873,7 +873,7 @@ var HEADING_SHORTCUT_KEYS = {
 /**
 * Checks if heading can be toggled in the current editor state
 */
-function canToggle(editor, level, turnInto = true) {
+function canToggle$1(editor, level, turnInto = true) {
 	if (!editor || !editor.isEditable) return false;
 	if (!isNodeInSchema("heading", editor) || isNodeTypeSelected(editor, ["image"])) return false;
 	if (!turnInto) return level ? editor.can().setNode("heading", { level }) : editor.can().setNode("heading");
@@ -902,7 +902,7 @@ function isHeadingActive(editor, level) {
 function toggleHeading(editor, level) {
 	if (!editor || !editor.isEditable) return false;
 	const levels = Array.isArray(level) ? level : [level];
-	const toggleLevel = levels.find((l) => canToggle(editor, l));
+	const toggleLevel = levels.find((l) => canToggle$1(editor, l));
 	if (!toggleLevel) return false;
 	try {
 		const view = editor.view;
@@ -949,15 +949,15 @@ function toggleHeading(editor, level) {
 /**
 * Determines if the heading menu item should be shown
 */
-function shouldShowItem(props) {
+function shouldShowItem$1(props) {
 	const { editor, level, hideWhenUnavailable } = props;
 	if (!editor) return false;
 	if (!hideWhenUnavailable) return true;
 	if (!editor.isEditable) return false;
 	if (!isNodeInSchema("heading", editor)) return false;
 	if (!editor.isActive("code")) {
-		if (Array.isArray(level)) return level.some((l) => canToggle(editor, l));
-		return canToggle(editor, level);
+		if (Array.isArray(level)) return level.some((l) => canToggle$1(editor, l));
+		return canToggle$1(editor, level);
 	}
 	return true;
 }
@@ -1011,12 +1011,12 @@ function useHeading(config) {
 	const { editor: providedEditor, level, hideWhenUnavailable = false, onToggled } = config;
 	const { editor } = useTiptapEditor(providedEditor);
 	const [isVisible, setIsVisible] = useState(true);
-	const canToggleState = canToggle(editor, level);
+	const canToggleState = canToggle$1(editor, level);
 	const isActive = isHeadingActive(editor, level);
 	useEffect(() => {
 		if (!editor) return;
 		const handleSelectionUpdate = () => {
-			setIsVisible(shouldShowItem({
+			setIsVisible(shouldShowItem$1({
 				editor,
 				level,
 				hideWhenUnavailable
@@ -1105,6 +1105,169 @@ var HeadingMenuItem = forwardRef(({ editor: providedEditor, level, text, hideWhe
 });
 HeadingMenuItem.displayName = "HeadingMenuItem";
 //#endregion
+//#region src/tiptap/components/ui/paragraph-menu-item/use-paragraph.ts
+/**
+* Checks if paragraph can be toggled in the current editor state
+*/
+function canToggle(editor, turnInto = true) {
+	if (!editor || !editor.isEditable) return false;
+	if (!isNodeInSchema("paragraph", editor) || isNodeTypeSelected(editor, ["image"])) return false;
+	if (!turnInto) return editor.can().setNode("paragraph");
+	if (!selectionWithinConvertibleTypes(editor, [
+		"paragraph",
+		"heading",
+		"bulletList",
+		"orderedList",
+		"taskList",
+		"blockquote",
+		"codeBlock"
+	])) return false;
+	return editor.can().setNode("paragraph") || editor.can().clearNodes();
+}
+/**
+* Checks if paragraph is currently active
+*/
+function isParagraphActive(editor) {
+	if (!editor || !editor.isEditable) return false;
+	return editor.isActive("paragraph");
+}
+/**
+* Toggles paragraph in the editor
+*/
+function toggleParagraph(editor) {
+	if (!editor || !editor.isEditable || !canToggle(editor)) return false;
+	try {
+		const view = editor.view;
+		let state = view.state;
+		let tr = state.tr;
+		const blocks = getSelectedBlockNodes(editor);
+		const isPossibleToTurnInto = selectionWithinConvertibleTypes(editor, [
+			"paragraph",
+			"heading",
+			"bulletList",
+			"orderedList",
+			"taskList",
+			"blockquote",
+			"codeBlock"
+		]) && blocks.length === 1;
+		if ((state.selection.empty || state.selection instanceof TextSelection) && isPossibleToTurnInto) {
+			const pos = findNodePosition({
+				editor,
+				node: state.selection.$anchor.node(1)
+			})?.pos;
+			if (!isValidPosition(pos)) return false;
+			tr = tr.setSelection(NodeSelection.create(state.doc, pos));
+			view.dispatch(tr);
+			state = view.state;
+		}
+		const selection = state.selection;
+		let chain = editor.chain().focus();
+		if (selection instanceof NodeSelection) {
+			const firstChild = selection.node.firstChild?.firstChild;
+			const lastChild = selection.node.lastChild?.lastChild;
+			const from = firstChild ? selection.from + firstChild.nodeSize : selection.from + 1;
+			const to = lastChild ? selection.to - lastChild.nodeSize : selection.to - 1;
+			const resolvedFrom = state.doc.resolve(from);
+			const resolvedTo = state.doc.resolve(to);
+			chain = chain.setTextSelection(TextSelection.between(resolvedFrom, resolvedTo)).clearNodes();
+		}
+		chain.setNode("paragraph").run();
+		editor.chain().focus().selectTextblockEnd().run();
+		return true;
+	} catch {
+		return false;
+	}
+}
+/**
+* Determines if the paragraph menu item should be shown
+*/
+function shouldShowItem(props) {
+	const { editor, hideWhenUnavailable } = props;
+	if (!editor) return false;
+	if (!hideWhenUnavailable) return true;
+	if (!editor.isEditable) return false;
+	if (!isNodeInSchema("paragraph", editor)) return false;
+	if (!editor.isActive("code")) return canToggle(editor);
+	return true;
+}
+/**
+* Custom hook that provides paragraph functionality for Tiptap editor
+*/
+function useParagraph(config) {
+	const { editor: providedEditor, hideWhenUnavailable = false, onToggled } = config;
+	const { editor } = useTiptapEditor(providedEditor);
+	const [isVisible, setIsVisible] = useState(true);
+	const canToggleState = canToggle(editor);
+	const isActive = isParagraphActive(editor);
+	useEffect(() => {
+		if (!editor) return;
+		const handleSelectionUpdate = () => {
+			setIsVisible(shouldShowItem({
+				editor,
+				hideWhenUnavailable
+			}));
+		};
+		handleSelectionUpdate();
+		editor.on("selectionUpdate", handleSelectionUpdate);
+		return () => {
+			editor.off("selectionUpdate", handleSelectionUpdate);
+		};
+	}, [editor, hideWhenUnavailable]);
+	return {
+		isVisible,
+		isActive,
+		handleToggle: useCallback(() => {
+			if (!editor) return false;
+			const success = toggleParagraph(editor);
+			if (success) onToggled?.();
+			return success;
+		}, [editor, onToggled]),
+		canToggle: canToggleState,
+		label: "Paragraphe"
+	};
+}
+//#endregion
+//#region src/tiptap/components/ui/paragraph-menu-item/paragraph-menu-item.tsx
+/**
+* Menu item component for toggling paragraph in a Tiptap editor.
+*
+* For custom menu item implementations, use the `useParagraph` hook instead.
+*/
+var ParagraphMenuItem = forwardRef(({ editor: providedEditor, text, hideWhenUnavailable = false, onToggled, showShortcut = false, onClick, children, ...menuItemProps }, ref) => {
+	const { editor } = useTiptapEditor(providedEditor);
+	const { isVisible, canToggle, isActive, handleToggle, label } = useParagraph({
+		editor,
+		hideWhenUnavailable,
+		onToggled
+	});
+	const handleClick = useCallback((event) => {
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		handleToggle();
+	}, [handleToggle, onClick]);
+	if (!isVisible) return null;
+	return /* @__PURE__ */ jsx(MenuItem, {
+		component: "li",
+		role: "button",
+		tabIndex: -1,
+		disabled: !canToggle,
+		"data-disabled": !canToggle,
+		"aria-label": label,
+		"aria-pressed": isActive,
+		tooltip: label,
+		selected: isActive,
+		onClick: handleClick,
+		...menuItemProps,
+		ref,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [label && /* @__PURE__ */ jsx(Typography, {
+			component: "span",
+			variant: "body2",
+			children: label
+		}), showShortcut && /* @__PURE__ */ jsx(Badge, { children: parseShortcutKeys({ shortcutKeys: "ctrl+alt+p" }) })] })
+	});
+});
+ParagraphMenuItem.displayName = "ParagraphMenuItem";
+//#endregion
 //#region src/tiptap/components/icons/heading-icon.tsx
 var HeadingIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
 	d: "M6 3C6.55228 3 7 3.44772 7 4V11H17V4C17 3.44772 17.4477 3 18 3C18.5523 3 19 3.44772 19 4V20C19 20.5523 18.5523 21 18 21C17.4477 21 17 20.5523 17 20V13H7V20C7 20.5523 6.55228 21 6 21C5.44772 21 5 20.5523 5 20V4C5 3.44772 5.44772 3 6 3Z",
@@ -1178,11 +1341,11 @@ function useHeadingMenu(config) {
 	const [isVisible, setIsVisible] = useState(true);
 	const activeLevel = getActiveHeadingLevel(editor, levels);
 	const isActive = isHeadingActive(editor);
-	const canToggleState = canToggle(editor);
+	const canToggleState = canToggle$1(editor);
 	useEffect(() => {
 		if (!editor) return;
 		const handleSelectionUpdate = () => {
-			setIsVisible(shouldShowItem({
+			setIsVisible(shouldShowItem$1({
 				editor,
 				hideWhenUnavailable,
 				level: levels
@@ -1262,7 +1425,7 @@ var HeadingMenu = forwardRef(({ editor: providedEditor, levels = [
 		...buttonProps,
 		ref,
 		children: children ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Icon, { fontSize: "small" }), /* @__PURE__ */ jsx(ExpandMoreRounded_default, { sx: { fontSize: "0.75rem" } })] })
-	}), /* @__PURE__ */ jsx(Menu, {
+	}), /* @__PURE__ */ jsxs(Menu, {
 		id: "heading-menu",
 		anchorEl,
 		open,
@@ -1271,12 +1434,15 @@ var HeadingMenu = forwardRef(({ editor: providedEditor, levels = [
 			"aria-labelledby": "heading-button",
 			role: "listbox"
 		} },
-		children: levels.map((level) => /* @__PURE__ */ jsx(HeadingMenuItem, {
+		children: [/* @__PURE__ */ jsx(ParagraphMenuItem, {
+			editor,
+			onClick: handleClose
+		}), levels.map((level) => /* @__PURE__ */ jsx(HeadingMenuItem, {
 			editor,
 			level,
 			text: `Heading ${level}`,
 			onClick: handleClose
-		}, `heading-${level}`))
+		}, `heading-${level}`))]
 	})] });
 });
 HeadingMenu.displayName = "HeadingMenu";
@@ -2761,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);
@@ -3006,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
@@ -3067,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.1788516152",
+  "version": "1.15.0-dev.1788870644",
   "description": "React component library for Hub's design system, built on Material UI with custom and extended components.",
   "keywords": [
     "cgi-learning-hub",