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

package/dist/tiptap/index.cjs.js

@@ -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";

package/dist/tiptap/index.es.js

@@ -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";

package/package.json

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