@cgi-learning-hub/ui 1.15.0-dev.1788362942 → 1.15.0-dev.1788514401

package/dist/index.cjs.js

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-BXHOgzdu.cjs");
+const require_src = require("./src-DldG1AFs.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 TabContext, _t as StepLabel, a as AlertTitle, an as Dialog, at as Paper, b as CardMedia, bn as useTabContext, bt as Switch, c as Avatar, cn as DEFAULT_COLOR_OPTIONS, ct as RadioGroup, d as Box, dn as ActionBar, dt as Slide, en as FileList, et as Menu, f as Breadcrumbs, fn as TabPanel, ft as Slider, g as CardActionArea, gn as TabList, gt as StepButton, h as Card, 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 tabPanelClasses, 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 getTabPanelUtilityClass, 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, un as Alert, ut as Skeleton, v as CardContent, vn as getPanelId, vt as Stepper, w as ClickAwayListener, wt as TableCell, x as Checkbox, xt as Tab, y as CardHeader, yn as getTabId, yt as SvgIcon, z as GlobalStyles, zt as useMediaQuery } from "./src-jE7nLe9k.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-2xPjYvOK.js";
 export * from "@mui/material/Tabs";
 export * from "@mui/material/styles";
 export * from "@mui/material/Accordion";

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

@@ -29560,6 +29560,6 @@ 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 _, TabContext as _n, StepLabel as _t, AlertTitle$1 as a, Dialog as an, Paper as at, CardMedia$1 as b, useTabContext as bn, Switch as bt, Avatar as c, DEFAULT_COLOR_OPTIONS as cn, RadioGroup as ct, Box$1 as d, ActionBar as dn, Slide as dt, FileList as en, Menu as et, Breadcrumbs as f, TabPanel as fn, Slider as ft, CardActionArea as g, TabList as gn, StepButton as gt, Card$1 as h, clsx 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, tabPanelClasses 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, getTabPanelUtilityClass 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, Alert as un, Skeleton as ut, CardContent$1 as v, getPanelId as vn, Stepper as vt, ClickAwayListener$1 as w, TableCell as wt, Checkbox as x, Tab as xt, CardHeader as y, getTabId as yn, SvgIcon as yt, GlobalStyles as z, useMediaQuery$1 as zt };
+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-jE7nLe9k.js.map
+//# sourceMappingURL=src-2xPjYvOK.js.map

package/dist/tiptap/index.cjs.js

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-BXHOgzdu.cjs");
+const require_src = require("../src-DldG1AFs.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _mui_material_styles = require("@mui/material/styles");
@@ -2373,6 +2373,234 @@ var TextAlignButton = (0, react.forwardRef)(({ editor: providedEditor, align, te
 });
 TextAlignButton.displayName = "TextAlignButton";
 //#endregion
+//#region src/tiptap/components/ui/text-color-popover/const.ts
+var COLORS = [
+	"#F44336",
+	"#E91E63",
+	"#9C27B0",
+	"#673AB7",
+	"#3F51B5",
+	"#2196F3",
+	"#03A9F4",
+	"#00BCD4",
+	"#009688",
+	"#4CAF50",
+	"#8BC34a",
+	"#CDDC39",
+	"#FFEB3B",
+	"#FFC107",
+	"#FF9800",
+	"#FF5722",
+	"#795548",
+	"#607D8B"
+];
+//#endregion
+//#region ../../node_modules/.pnpm/@mui+icons-material@9.4.0_@mui+material@9.4.0_@emotion+react@11.14.0_@types+react@19.2._02cb1dd638d2ccdea7d16c50ea4ea174/node_modules/@mui/icons-material/FormatColorTextRounded.mjs
+var FormatColorTextRounded_default = (0, _mui_material_SvgIcon.createSvgIcon)(/*#__PURE__*/ (0, react_jsx_runtime.jsx)("path", { d: "M20 20H4c-1.1 0-2 .9-2 2s.9 2 2 2h16c1.1 0 2-.9 2-2s-.9-2-2-2M7.11 17c.48 0 .91-.3 1.06-.75l1.01-2.83h5.65l.99 2.82c.16.46.59.76 1.07.76.79 0 1.33-.79 1.05-1.52L13.69 4.17C13.43 3.47 12.75 3 12 3s-1.43.47-1.69 1.17L6.06 15.48c-.28.73.27 1.52 1.05 1.52m4.83-11.4h.12l2.03 5.79H9.91z" }), "FormatColorTextRounded");
+//#endregion
+//#region src/tiptap/components/ui/text-color-popover/use-text-color-popover.ts
+/**
+* Checks if a text color can be set in the current editor state
+*/
+function canSetTextColor(editor) {
+	if (!editor || !editor.isEditable) return false;
+	if (isNodeTypeSelected(editor, ["image"], true)) return false;
+	try {
+		return editor.can().setColor("red");
+	} catch {
+		return false;
+	}
+}
+/**
+* Gets the currently active text color from the editor selection
+*/
+function getActiveTextColor(editor) {
+	if (!editor || !editor.isEditable || !editor.isActive("textStyle")) return null;
+	return editor.getAttributes("textStyle").color;
+}
+/**
+* Determines if the text color button should be shown
+*/
+function shouldShowTextColorButton(props) {
+	const { editor, hideWhenUnavailable } = props;
+	if (!editor || !editor.isEditable) return false;
+	const textStyleInSchema = isMarkInSchema("textStyle", editor);
+	if (!hideWhenUnavailable) return true;
+	if (!textStyleInSchema) return false;
+	if (!editor.isActive("code")) return canSetTextColor(editor);
+	return true;
+}
+/**
+* Custom hook for handling text style operations in a Tiptap editor
+*/
+function useTextStyleHandler(props) {
+	const { editor, onSetTextStyle } = props;
+	return {
+		setTextColor: (0, react.useCallback)((color) => {
+			if (!editor) return;
+			editor.chain().focus().setColor(color).run();
+			onSetTextStyle?.();
+		}, [editor, onSetTextStyle]),
+		removeTextColor: (0, react.useCallback)(() => {
+			if (!editor) return;
+			editor.chain().focus().unsetColor().removeEmptyTextStyle().run();
+		}, [editor])
+	};
+}
+/**
+* Main hook that provides text color popover functionality for Tiptap editor
+*/
+function useTextColorPopover(config) {
+	const { editor: providedEditor, hideWhenUnavailable = false, onSetTextColor } = config || {};
+	const { editor } = useTiptapEditor(providedEditor);
+	const [isVisible, setIsVisible] = (0, react.useState)(true);
+	const activeColor = getActiveTextColor(editor);
+	const isActive = activeColor !== null;
+	const canSet = canSetTextColor(editor);
+	const textColorHandler = useTextStyleHandler({
+		editor,
+		onSetTextStyle: onSetTextColor
+	});
+	(0, react.useEffect)(() => {
+		if (!editor) return;
+		const handleSelectionUpdate = () => {
+			setIsVisible(shouldShowTextColorButton({
+				editor,
+				hideWhenUnavailable
+			}));
+		};
+		handleSelectionUpdate();
+		editor.on("selectionUpdate", handleSelectionUpdate);
+		return () => {
+			editor.off("selectionUpdate", handleSelectionUpdate);
+		};
+	}, [editor, hideWhenUnavailable]);
+	return {
+		isVisible,
+		canSet,
+		activeColor,
+		isActive,
+		label: "Couleur",
+		Icon: FormatColorTextRounded_default,
+		...textColorHandler
+	};
+}
+//#endregion
+//#region src/tiptap/components/ui/text-color-popover/text-color-popover.tsx
+/**
+* Text color button component for triggering the text color popover
+*/
+var TextColorButton = (0, react.forwardRef)(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+		type: "button",
+		className,
+		role: "button",
+		tabIndex: -1,
+		ref,
+		...props,
+		children: children || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormatColorTextRounded_default, { fontSize: "small" })
+	});
+});
+TextColorButton.displayName = "TextColorButton";
+/**
+* Main content component for the text color popover
+*/
+var TextColorMain = ({ setTextColor, removeTextColor, onChange, activeColor }) => {
+	const handleChange = (color) => {
+		if (color.hex === activeColor) removeTextColor();
+		else setTextColor(color.hex);
+		onChange?.();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Circle, {
+		colors: COLORS,
+		color: activeColor ?? void 0,
+		onChange: handleChange,
+		style: {
+			gap: 5,
+			width: "15rem",
+			padding: 10
+		},
+		pointProps: { style: {
+			width: 20,
+			height: 20
+		} }
+	});
+};
+/**
+* text color popover component for Tiptap editors.
+*
+* For custom popover implementations, use the `useTextColorPopover` hook instead.
+*/
+var TextColorPopover = (0, react.forwardRef)(({ editor: providedEditor, hideWhenUnavailable = false, onSetTextColor, onOpenChange, onClick, children, ...buttonProps }, ref) => {
+	const { editor } = useTiptapEditor(providedEditor);
+	const [anchorEl, setAnchorEl] = (0, react.useState)(null);
+	const internalRef = (0, react.useRef)(null);
+	const justSubmittedRef = (0, react.useRef)(false);
+	const { isVisible, canSet, activeColor, isActive, setTextColor, removeTextColor, label, Icon } = useTextColorPopover({
+		editor,
+		hideWhenUnavailable,
+		onSetTextColor
+	});
+	const setRefs = (0, react.useCallback)((node) => {
+		internalRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	const handleClose = (0, react.useCallback)(() => {
+		setAnchorEl(null);
+		onOpenChange?.(false);
+	}, [onOpenChange]);
+	const handleSetTextColor = (0, react.useCallback)((color) => {
+		justSubmittedRef.current = true;
+		setTextColor(color);
+		setAnchorEl(null);
+		queueMicrotask(() => {
+			justSubmittedRef.current = false;
+		});
+	}, [setTextColor]);
+	const handleClick = (0, react.useCallback)((event) => {
+		onClick?.(event, !isActive);
+		if (event.defaultPrevented) return;
+		setAnchorEl(event.currentTarget);
+	}, [onClick, anchorEl]);
+	if (!isVisible) return null;
+	const open = Boolean(anchorEl);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextColorButton, {
+		value: "textStyle",
+		disabled: !canSet,
+		selected: isActive || open,
+		"data-disabled": !canSet,
+		"aria-label": label,
+		tooltip: label,
+		onClick: handleClick,
+		...buttonProps,
+		ref: setRefs,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+			fontSize: "small",
+			sx: { color: activeColor ?? "inherit" }
+		})
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Popover.default, {
+		open,
+		anchorEl,
+		onClose: handleClose,
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "center"
+		},
+		transformOrigin: {
+			vertical: -4,
+			horizontal: "center"
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextColorMain, {
+			setTextColor: handleSetTextColor,
+			removeTextColor,
+			onChange: handleClose,
+			activeColor
+		})
+	})] });
+});
+TextColorPopover.displayName = "TextColorPopover";
+//#endregion
 //#region ../../node_modules/.pnpm/@mui+icons-material@9.4.0_@mui+material@9.4.0_@emotion+react@11.14.0_@types+react@19.2._02cb1dd638d2ccdea7d16c50ea4ea174/node_modules/@mui/icons-material/RedoRounded.mjs
 var RedoRounded_default = (0, _mui_material_SvgIcon.createSvgIcon)(/*#__PURE__*/ (0, react_jsx_runtime.jsx)("path", { d: "M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.16 0-7.74 2.42-9.44 5.93-.32.67.04 1.47.75 1.71.59.2 1.23-.08 1.5-.64 1.3-2.66 4.03-4.5 7.19-4.5 1.95 0 3.73.72 5.12 1.88l-1.91 1.91c-.63.63-.19 1.71.7 1.71H21c.55 0 1-.45 1-1V9.41c0-.89-1.08-1.34-1.71-.71z" }), "RedoRounded");
 //#endregion
@@ -2806,7 +3034,9 @@ ToolbarSeparator.displayName = "ToolbarSeparator";
 //#endregion
 //#region src/tiptap/components/ui-primitive/formatting-controls/formatting-controls.tsx
 var FormattingControls = ({ editor }) => {
-	const hasSuperscriptSubscript = editor.extensionManager.extensions.map((e) => e.name).some((name) => name === "subscript" || name === "superscript");
+	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, {}),
@@ -2827,6 +3057,7 @@ var FormattingControls = ({ editor }) => {
 		] }),
 		/* @__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" }),

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, hn as clsx, j as Divider, ln as SvgIcon_default, mt as Stack, ot as Popover, tt as MenuItem, u as Badge } from "../src-jE7nLe9k.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-2xPjYvOK.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";
@@ -2349,6 +2349,234 @@ var TextAlignButton = forwardRef(({ editor: providedEditor, align, text, hideWhe
 });
 TextAlignButton.displayName = "TextAlignButton";
 //#endregion
+//#region src/tiptap/components/ui/text-color-popover/const.ts
+var COLORS = [
+	"#F44336",
+	"#E91E63",
+	"#9C27B0",
+	"#673AB7",
+	"#3F51B5",
+	"#2196F3",
+	"#03A9F4",
+	"#00BCD4",
+	"#009688",
+	"#4CAF50",
+	"#8BC34a",
+	"#CDDC39",
+	"#FFEB3B",
+	"#FFC107",
+	"#FF9800",
+	"#FF5722",
+	"#795548",
+	"#607D8B"
+];
+//#endregion
+//#region ../../node_modules/.pnpm/@mui+icons-material@9.4.0_@mui+material@9.4.0_@emotion+react@11.14.0_@types+react@19.2._02cb1dd638d2ccdea7d16c50ea4ea174/node_modules/@mui/icons-material/FormatColorTextRounded.mjs
+var FormatColorTextRounded_default = SvgIcon_default(/*#__PURE__*/ jsx("path", { d: "M20 20H4c-1.1 0-2 .9-2 2s.9 2 2 2h16c1.1 0 2-.9 2-2s-.9-2-2-2M7.11 17c.48 0 .91-.3 1.06-.75l1.01-2.83h5.65l.99 2.82c.16.46.59.76 1.07.76.79 0 1.33-.79 1.05-1.52L13.69 4.17C13.43 3.47 12.75 3 12 3s-1.43.47-1.69 1.17L6.06 15.48c-.28.73.27 1.52 1.05 1.52m4.83-11.4h.12l2.03 5.79H9.91z" }), "FormatColorTextRounded");
+//#endregion
+//#region src/tiptap/components/ui/text-color-popover/use-text-color-popover.ts
+/**
+* Checks if a text color can be set in the current editor state
+*/
+function canSetTextColor(editor) {
+	if (!editor || !editor.isEditable) return false;
+	if (isNodeTypeSelected(editor, ["image"], true)) return false;
+	try {
+		return editor.can().setColor("red");
+	} catch {
+		return false;
+	}
+}
+/**
+* Gets the currently active text color from the editor selection
+*/
+function getActiveTextColor(editor) {
+	if (!editor || !editor.isEditable || !editor.isActive("textStyle")) return null;
+	return editor.getAttributes("textStyle").color;
+}
+/**
+* Determines if the text color button should be shown
+*/
+function shouldShowTextColorButton(props) {
+	const { editor, hideWhenUnavailable } = props;
+	if (!editor || !editor.isEditable) return false;
+	const textStyleInSchema = isMarkInSchema("textStyle", editor);
+	if (!hideWhenUnavailable) return true;
+	if (!textStyleInSchema) return false;
+	if (!editor.isActive("code")) return canSetTextColor(editor);
+	return true;
+}
+/**
+* Custom hook for handling text style operations in a Tiptap editor
+*/
+function useTextStyleHandler(props) {
+	const { editor, onSetTextStyle } = props;
+	return {
+		setTextColor: useCallback((color) => {
+			if (!editor) return;
+			editor.chain().focus().setColor(color).run();
+			onSetTextStyle?.();
+		}, [editor, onSetTextStyle]),
+		removeTextColor: useCallback(() => {
+			if (!editor) return;
+			editor.chain().focus().unsetColor().removeEmptyTextStyle().run();
+		}, [editor])
+	};
+}
+/**
+* Main hook that provides text color popover functionality for Tiptap editor
+*/
+function useTextColorPopover(config) {
+	const { editor: providedEditor, hideWhenUnavailable = false, onSetTextColor } = config || {};
+	const { editor } = useTiptapEditor(providedEditor);
+	const [isVisible, setIsVisible] = useState(true);
+	const activeColor = getActiveTextColor(editor);
+	const isActive = activeColor !== null;
+	const canSet = canSetTextColor(editor);
+	const textColorHandler = useTextStyleHandler({
+		editor,
+		onSetTextStyle: onSetTextColor
+	});
+	useEffect(() => {
+		if (!editor) return;
+		const handleSelectionUpdate = () => {
+			setIsVisible(shouldShowTextColorButton({
+				editor,
+				hideWhenUnavailable
+			}));
+		};
+		handleSelectionUpdate();
+		editor.on("selectionUpdate", handleSelectionUpdate);
+		return () => {
+			editor.off("selectionUpdate", handleSelectionUpdate);
+		};
+	}, [editor, hideWhenUnavailable]);
+	return {
+		isVisible,
+		canSet,
+		activeColor,
+		isActive,
+		label: "Couleur",
+		Icon: FormatColorTextRounded_default,
+		...textColorHandler
+	};
+}
+//#endregion
+//#region src/tiptap/components/ui/text-color-popover/text-color-popover.tsx
+/**
+* Text color button component for triggering the text color popover
+*/
+var TextColorButton = forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		className,
+		role: "button",
+		tabIndex: -1,
+		ref,
+		...props,
+		children: children || /* @__PURE__ */ jsx(FormatColorTextRounded_default, { fontSize: "small" })
+	});
+});
+TextColorButton.displayName = "TextColorButton";
+/**
+* Main content component for the text color popover
+*/
+var TextColorMain = ({ setTextColor, removeTextColor, onChange, activeColor }) => {
+	const handleChange = (color) => {
+		if (color.hex === activeColor) removeTextColor();
+		else setTextColor(color.hex);
+		onChange?.();
+	};
+	return /* @__PURE__ */ jsx(Circle, {
+		colors: COLORS,
+		color: activeColor ?? void 0,
+		onChange: handleChange,
+		style: {
+			gap: 5,
+			width: "15rem",
+			padding: 10
+		},
+		pointProps: { style: {
+			width: 20,
+			height: 20
+		} }
+	});
+};
+/**
+* text color popover component for Tiptap editors.
+*
+* For custom popover implementations, use the `useTextColorPopover` hook instead.
+*/
+var TextColorPopover = forwardRef(({ editor: providedEditor, hideWhenUnavailable = false, onSetTextColor, onOpenChange, onClick, children, ...buttonProps }, ref) => {
+	const { editor } = useTiptapEditor(providedEditor);
+	const [anchorEl, setAnchorEl] = useState(null);
+	const internalRef = useRef(null);
+	const justSubmittedRef = useRef(false);
+	const { isVisible, canSet, activeColor, isActive, setTextColor, removeTextColor, label, Icon } = useTextColorPopover({
+		editor,
+		hideWhenUnavailable,
+		onSetTextColor
+	});
+	const setRefs = useCallback((node) => {
+		internalRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	const handleClose = useCallback(() => {
+		setAnchorEl(null);
+		onOpenChange?.(false);
+	}, [onOpenChange]);
+	const handleSetTextColor = useCallback((color) => {
+		justSubmittedRef.current = true;
+		setTextColor(color);
+		setAnchorEl(null);
+		queueMicrotask(() => {
+			justSubmittedRef.current = false;
+		});
+	}, [setTextColor]);
+	const handleClick = useCallback((event) => {
+		onClick?.(event, !isActive);
+		if (event.defaultPrevented) return;
+		setAnchorEl(event.currentTarget);
+	}, [onClick, anchorEl]);
+	if (!isVisible) return null;
+	const open = Boolean(anchorEl);
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(TextColorButton, {
+		value: "textStyle",
+		disabled: !canSet,
+		selected: isActive || open,
+		"data-disabled": !canSet,
+		"aria-label": label,
+		tooltip: label,
+		onClick: handleClick,
+		...buttonProps,
+		ref: setRefs,
+		children: children ?? /* @__PURE__ */ jsx(Icon, {
+			fontSize: "small",
+			sx: { color: activeColor ?? "inherit" }
+		})
+	}), /* @__PURE__ */ jsx(Popover, {
+		open,
+		anchorEl,
+		onClose: handleClose,
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "center"
+		},
+		transformOrigin: {
+			vertical: -4,
+			horizontal: "center"
+		},
+		children: /* @__PURE__ */ jsx(TextColorMain, {
+			setTextColor: handleSetTextColor,
+			removeTextColor,
+			onChange: handleClose,
+			activeColor
+		})
+	})] });
+});
+TextColorPopover.displayName = "TextColorPopover";
+//#endregion
 //#region ../../node_modules/.pnpm/@mui+icons-material@9.4.0_@mui+material@9.4.0_@emotion+react@11.14.0_@types+react@19.2._02cb1dd638d2ccdea7d16c50ea4ea174/node_modules/@mui/icons-material/RedoRounded.mjs
 var RedoRounded_default = SvgIcon_default(/*#__PURE__*/ jsx("path", { d: "M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.16 0-7.74 2.42-9.44 5.93-.32.67.04 1.47.75 1.71.59.2 1.23-.08 1.5-.64 1.3-2.66 4.03-4.5 7.19-4.5 1.95 0 3.73.72 5.12 1.88l-1.91 1.91c-.63.63-.19 1.71.7 1.71H21c.55 0 1-.45 1-1V9.41c0-.89-1.08-1.34-1.71-.71z" }), "RedoRounded");
 //#endregion
@@ -2782,7 +3010,9 @@ ToolbarSeparator.displayName = "ToolbarSeparator";
 //#endregion
 //#region src/tiptap/components/ui-primitive/formatting-controls/formatting-controls.tsx
 var FormattingControls = ({ editor }) => {
-	const hasSuperscriptSubscript = editor.extensionManager.extensions.map((e) => e.name).some((name) => name === "subscript" || name === "superscript");
+	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, {}),
@@ -2803,6 +3033,7 @@ var FormattingControls = ({ editor }) => {
 		] }),
 		/* @__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" }),

package/package.json

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