@cgi-learning-hub/ui 1.14.0-dev.1785252242 → 1.14.0-dev.1785319387
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/tiptap/index.cjs.js +36 -36
- package/dist/tiptap/index.es.js +36 -36
- package/package.json +1 -1
package/dist/tiptap/index.cjs.js
CHANGED
|
@@ -4281,7 +4281,7 @@ function toggleBlockquote(editor) {
|
|
|
4281
4281
|
/**
|
|
4282
4282
|
* Determines if the blockquote button should be shown
|
|
4283
4283
|
*/
|
|
4284
|
-
function shouldShowButton$
|
|
4284
|
+
function shouldShowButton$5(props) {
|
|
4285
4285
|
const { editor, hideWhenUnavailable } = props;
|
|
4286
4286
|
if (!editor) return false;
|
|
4287
4287
|
if (!hideWhenUnavailable) return true;
|
|
@@ -4335,7 +4335,7 @@ function useBlockquote(config) {
|
|
|
4335
4335
|
(0, react.useEffect)(() => {
|
|
4336
4336
|
if (!editor) return;
|
|
4337
4337
|
const handleSelectionUpdate = () => {
|
|
4338
|
-
setIsVisible(shouldShowButton$
|
|
4338
|
+
setIsVisible(shouldShowButton$5({
|
|
4339
4339
|
editor,
|
|
4340
4340
|
hideWhenUnavailable
|
|
4341
4341
|
}));
|
|
@@ -4548,7 +4548,7 @@ function toggleCodeBlock(editor) {
|
|
|
4548
4548
|
/**
|
|
4549
4549
|
* Determines if the code block button should be shown
|
|
4550
4550
|
*/
|
|
4551
|
-
function shouldShowButton$
|
|
4551
|
+
function shouldShowButton$4(props) {
|
|
4552
4552
|
const { editor, hideWhenUnavailable } = props;
|
|
4553
4553
|
if (!editor) return false;
|
|
4554
4554
|
if (!hideWhenUnavailable) return true;
|
|
@@ -4609,7 +4609,7 @@ function useCodeBlock(config) {
|
|
|
4609
4609
|
(0, react.useEffect)(() => {
|
|
4610
4610
|
if (!editor) return;
|
|
4611
4611
|
const handleSelectionUpdate = () => {
|
|
4612
|
-
setIsVisible(shouldShowButton$
|
|
4612
|
+
setIsVisible(shouldShowButton$4({
|
|
4613
4613
|
editor,
|
|
4614
4614
|
hideWhenUnavailable
|
|
4615
4615
|
}));
|
|
@@ -4744,7 +4744,7 @@ var HeadingThreeIcon = (0, _mui_material_utils.createSvgIcon)(/* @__PURE__ */ (0
|
|
|
4744
4744
|
})
|
|
4745
4745
|
] }), "HeadingThree");
|
|
4746
4746
|
//#endregion
|
|
4747
|
-
//#region src/tiptap/components/ui/heading-
|
|
4747
|
+
//#region src/tiptap/components/ui/heading-menu-item/use-heading.ts
|
|
4748
4748
|
var headingIcons = {
|
|
4749
4749
|
1: HeadingOneIcon,
|
|
4750
4750
|
2: (0, _mui_material_utils.createSvgIcon)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
|
|
@@ -4844,9 +4844,9 @@ function toggleHeading(editor, level) {
|
|
|
4844
4844
|
}
|
|
4845
4845
|
}
|
|
4846
4846
|
/**
|
|
4847
|
-
* Determines if the heading
|
|
4847
|
+
* Determines if the heading menu item should be shown
|
|
4848
4848
|
*/
|
|
4849
|
-
function
|
|
4849
|
+
function shouldShowItem(props) {
|
|
4850
4850
|
const { editor, level, hideWhenUnavailable } = props;
|
|
4851
4851
|
if (!editor) return false;
|
|
4852
4852
|
if (!hideWhenUnavailable) return true;
|
|
@@ -4864,7 +4864,7 @@ function shouldShowButton$4(props) {
|
|
|
4864
4864
|
* @example
|
|
4865
4865
|
* ```tsx
|
|
4866
4866
|
* // Simple usage
|
|
4867
|
-
* function
|
|
4867
|
+
* function MySimpleHeadingItem() {
|
|
4868
4868
|
* const { isVisible, isActive, handleToggle, Icon } = useHeading({ level: 1 })
|
|
4869
4869
|
*
|
|
4870
4870
|
* if (!isVisible) return null
|
|
@@ -4881,7 +4881,7 @@ function shouldShowButton$4(props) {
|
|
|
4881
4881
|
* }
|
|
4882
4882
|
*
|
|
4883
4883
|
* // Advanced usage with configuration
|
|
4884
|
-
* function
|
|
4884
|
+
* function MyAdvancedHeadingItem() {
|
|
4885
4885
|
* const { isVisible, isActive, handleToggle, label, Icon } = useHeading({
|
|
4886
4886
|
* level: 2,
|
|
4887
4887
|
* editor: myEditor,
|
|
@@ -4913,7 +4913,7 @@ function useHeading(config) {
|
|
|
4913
4913
|
(0, react.useEffect)(() => {
|
|
4914
4914
|
if (!editor) return;
|
|
4915
4915
|
const handleSelectionUpdate = () => {
|
|
4916
|
-
setIsVisible(
|
|
4916
|
+
setIsVisible(shouldShowItem({
|
|
4917
4917
|
editor,
|
|
4918
4918
|
level,
|
|
4919
4919
|
hideWhenUnavailable
|
|
@@ -4949,16 +4949,16 @@ function useHeading(config) {
|
|
|
4949
4949
|
};
|
|
4950
4950
|
}
|
|
4951
4951
|
//#endregion
|
|
4952
|
-
//#region src/tiptap/components/ui/heading-
|
|
4952
|
+
//#region src/tiptap/components/ui/heading-menu-item/heading-menu-item.tsx
|
|
4953
4953
|
function HeadingShortcutBadge({ level, shortcutKeys = HEADING_SHORTCUT_KEYS[level] }) {
|
|
4954
4954
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Badge.default, { children: parseShortcutKeys({ shortcutKeys }) });
|
|
4955
4955
|
}
|
|
4956
4956
|
/**
|
|
4957
|
-
*
|
|
4957
|
+
* Menu item component for toggling heading in a Tiptap editor.
|
|
4958
4958
|
*
|
|
4959
|
-
* For custom
|
|
4959
|
+
* For custom menu item implementations, use the `useHeading` hook instead.
|
|
4960
4960
|
*/
|
|
4961
|
-
var
|
|
4961
|
+
var HeadingMenuItem = (0, react.forwardRef)(({ editor: providedEditor, level, text, hideWhenUnavailable = false, onToggled, showShortcut = false, onClick, children, ...menuItemProps }, ref) => {
|
|
4962
4962
|
const { editor } = useTiptapEditor(providedEditor);
|
|
4963
4963
|
const { isVisible, canToggle, isActive, handleToggle, label, Icon, shortcutKeys } = useHeading({
|
|
4964
4964
|
editor,
|
|
@@ -4983,7 +4983,7 @@ var HeadingButton = (0, react.forwardRef)(({ editor: providedEditor, level, text
|
|
|
4983
4983
|
tooltip: label,
|
|
4984
4984
|
selected: isActive,
|
|
4985
4985
|
onClick: handleClick,
|
|
4986
|
-
...
|
|
4986
|
+
...menuItemProps,
|
|
4987
4987
|
ref,
|
|
4988
4988
|
children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
|
|
4989
4989
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { fontSize: "small" }),
|
|
@@ -4998,7 +4998,7 @@ var HeadingButton = (0, react.forwardRef)(({ editor: providedEditor, level, text
|
|
|
4998
4998
|
] })
|
|
4999
4999
|
});
|
|
5000
5000
|
});
|
|
5001
|
-
|
|
5001
|
+
HeadingMenuItem.displayName = "HeadingMenuItem";
|
|
5002
5002
|
//#endregion
|
|
5003
5003
|
//#region src/tiptap/components/icons/heading-icon.tsx
|
|
5004
5004
|
var HeadingIcon = (0, _mui_material_utils.createSvgIcon)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
|
|
@@ -5006,7 +5006,7 @@ var HeadingIcon = (0, _mui_material_utils.createSvgIcon)(/* @__PURE__ */ (0, rea
|
|
|
5006
5006
|
fill: "currentColor"
|
|
5007
5007
|
}), "Heading");
|
|
5008
5008
|
//#endregion
|
|
5009
|
-
//#region src/tiptap/components/ui/heading-
|
|
5009
|
+
//#region src/tiptap/components/ui/heading-menu/use-heading-menu.ts
|
|
5010
5010
|
/**
|
|
5011
5011
|
* Gets the currently active heading level from the available levels
|
|
5012
5012
|
*/
|
|
@@ -5022,35 +5022,35 @@ function getActiveHeadingLevel(editor, levels = [
|
|
|
5022
5022
|
return levels.find((level) => isHeadingActive(editor, level));
|
|
5023
5023
|
}
|
|
5024
5024
|
/**
|
|
5025
|
-
* Custom hook that provides heading
|
|
5025
|
+
* Custom hook that provides heading menu functionality for Tiptap editor
|
|
5026
5026
|
*
|
|
5027
5027
|
* @example
|
|
5028
5028
|
* ```tsx
|
|
5029
5029
|
* // Simple usage
|
|
5030
|
-
* function
|
|
5030
|
+
* function MyHeading() {
|
|
5031
5031
|
* const {
|
|
5032
5032
|
* isVisible,
|
|
5033
5033
|
* activeLevel,
|
|
5034
5034
|
* isAnyHeadingActive,
|
|
5035
5035
|
* canToggle,
|
|
5036
5036
|
* levels,
|
|
5037
|
-
* } =
|
|
5037
|
+
* } = useHeadingMenu()
|
|
5038
5038
|
*
|
|
5039
5039
|
* if (!isVisible) return null
|
|
5040
5040
|
*
|
|
5041
5041
|
* return (
|
|
5042
|
-
* <
|
|
5043
|
-
* //
|
|
5044
|
-
* </
|
|
5042
|
+
* <Menu>
|
|
5043
|
+
* // content
|
|
5044
|
+
* </Menu>
|
|
5045
5045
|
* )
|
|
5046
5046
|
* }
|
|
5047
5047
|
*
|
|
5048
5048
|
* // Advanced usage with configuration
|
|
5049
|
-
* function
|
|
5049
|
+
* function MyAdvancedHeading() {
|
|
5050
5050
|
* const {
|
|
5051
5051
|
* isVisible,
|
|
5052
5052
|
* activeLevel,
|
|
5053
|
-
* } =
|
|
5053
|
+
* } = useHeadingMenu({
|
|
5054
5054
|
* editor: myEditor,
|
|
5055
5055
|
* levels: [1, 2, 3],
|
|
5056
5056
|
* hideWhenUnavailable: true,
|
|
@@ -5060,7 +5060,7 @@ function getActiveHeadingLevel(editor, levels = [
|
|
|
5060
5060
|
* }
|
|
5061
5061
|
* ```
|
|
5062
5062
|
*/
|
|
5063
|
-
function
|
|
5063
|
+
function useHeadingMenu(config) {
|
|
5064
5064
|
const { editor: providedEditor, levels = [
|
|
5065
5065
|
1,
|
|
5066
5066
|
2,
|
|
@@ -5077,7 +5077,7 @@ function useHeadingDropdownMenu(config) {
|
|
|
5077
5077
|
(0, react.useEffect)(() => {
|
|
5078
5078
|
if (!editor) return;
|
|
5079
5079
|
const handleSelectionUpdate = () => {
|
|
5080
|
-
setIsVisible(
|
|
5080
|
+
setIsVisible(shouldShowItem({
|
|
5081
5081
|
editor,
|
|
5082
5082
|
hideWhenUnavailable,
|
|
5083
5083
|
level: levels
|
|
@@ -5104,13 +5104,13 @@ function useHeadingDropdownMenu(config) {
|
|
|
5104
5104
|
};
|
|
5105
5105
|
}
|
|
5106
5106
|
//#endregion
|
|
5107
|
-
//#region src/tiptap/components/ui/heading-
|
|
5107
|
+
//#region src/tiptap/components/ui/heading-menu/heading-menu.tsx
|
|
5108
5108
|
/**
|
|
5109
|
-
*
|
|
5109
|
+
* Menu component for selecting heading levels in a Tiptap editor.
|
|
5110
5110
|
*
|
|
5111
|
-
* For custom
|
|
5111
|
+
* For custom menu implementations, use the `useHeadingMenu` hook instead.
|
|
5112
5112
|
*/
|
|
5113
|
-
var
|
|
5113
|
+
var HeadingMenu = (0, react.forwardRef)(({ editor: providedEditor, levels = [
|
|
5114
5114
|
1,
|
|
5115
5115
|
2,
|
|
5116
5116
|
3,
|
|
@@ -5121,7 +5121,7 @@ var HeadingDropdownMenu = (0, react.forwardRef)(({ editor: providedEditor, level
|
|
|
5121
5121
|
const { editor } = useTiptapEditor(providedEditor);
|
|
5122
5122
|
const [anchorEl, setAnchorEl] = (0, react.useState)(null);
|
|
5123
5123
|
const open = Boolean(anchorEl);
|
|
5124
|
-
const { isVisible, isActive, canToggle, Icon } =
|
|
5124
|
+
const { isVisible, isActive, canToggle, Icon } = useHeadingMenu({
|
|
5125
5125
|
editor,
|
|
5126
5126
|
levels,
|
|
5127
5127
|
hideWhenUnavailable
|
|
@@ -5166,7 +5166,7 @@ var HeadingDropdownMenu = (0, react.forwardRef)(({ editor: providedEditor, level
|
|
|
5166
5166
|
"aria-labelledby": "heading-button",
|
|
5167
5167
|
role: "listbox"
|
|
5168
5168
|
} },
|
|
5169
|
-
children: levels.map((level) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
5169
|
+
children: levels.map((level) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeadingMenuItem, {
|
|
5170
5170
|
editor,
|
|
5171
5171
|
level,
|
|
5172
5172
|
text: `Heading ${level}`,
|
|
@@ -5174,7 +5174,7 @@ var HeadingDropdownMenu = (0, react.forwardRef)(({ editor: providedEditor, level
|
|
|
5174
5174
|
}, `heading-${level}`))
|
|
5175
5175
|
})] });
|
|
5176
5176
|
});
|
|
5177
|
-
|
|
5177
|
+
HeadingMenu.displayName = "HeadingMenu";
|
|
5178
5178
|
//#endregion
|
|
5179
5179
|
//#region ../../node_modules/.pnpm/@mui+icons-material@9.1.1_@mui+material@9.1.1_@emotion+react@11.14.0_@types+react@19.2._9b347fe2e167545244369f75d4366d7f/node_modules/@mui/icons-material/KeyboardReturnRounded.mjs
|
|
5180
5180
|
var KeyboardReturnRounded_default = (0, _mui_material_SvgIcon.createSvgIcon)(/*#__PURE__*/ (0, react_jsx_runtime.jsx)("path", { d: "M19 8v3H5.83l2.88-2.88c.39-.39.39-1.02 0-1.41a.996.996 0 0 0-1.41 0L2.71 11.3c-.39.39-.39 1.02 0 1.41L7.3 17.3c.39.39 1.02.39 1.41 0s.39-1.02 0-1.41L5.83 13H20c.55 0 1-.45 1-1V8c0-.55-.45-1-1-1s-1 .45-1 1" }), "KeyboardReturnRounded");
|
|
@@ -5710,7 +5710,7 @@ function toggleList(editor, type) {
|
|
|
5710
5710
|
const resolvedTo = state.doc.resolve(to);
|
|
5711
5711
|
chain = chain.setTextSelection(TextSelection.between(resolvedFrom, resolvedTo)).clearNodes();
|
|
5712
5712
|
}
|
|
5713
|
-
if (editor.isActive(type)) chain.liftListItem("listItem").lift("bulletList").lift("orderedList").
|
|
5713
|
+
if (editor.isActive(type)) chain.liftListItem("listItem").lift("bulletList").lift("orderedList").run();
|
|
5714
5714
|
else {
|
|
5715
5715
|
const toggle = {
|
|
5716
5716
|
bulletList: () => chain.toggleBulletList(),
|
|
@@ -6748,7 +6748,7 @@ var FormattingControls = ({ editor }) => {
|
|
|
6748
6748
|
/* @__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" })] }),
|
|
6749
6749
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarSeparator, {}),
|
|
6750
6750
|
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ToolbarGroup, { children: [
|
|
6751
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
6751
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeadingMenu, {
|
|
6752
6752
|
modal: false,
|
|
6753
6753
|
levels: [
|
|
6754
6754
|
1,
|
package/dist/tiptap/index.es.js
CHANGED
|
@@ -4270,7 +4270,7 @@ function toggleBlockquote(editor) {
|
|
|
4270
4270
|
/**
|
|
4271
4271
|
* Determines if the blockquote button should be shown
|
|
4272
4272
|
*/
|
|
4273
|
-
function shouldShowButton$
|
|
4273
|
+
function shouldShowButton$5(props) {
|
|
4274
4274
|
const { editor, hideWhenUnavailable } = props;
|
|
4275
4275
|
if (!editor) return false;
|
|
4276
4276
|
if (!hideWhenUnavailable) return true;
|
|
@@ -4324,7 +4324,7 @@ function useBlockquote(config) {
|
|
|
4324
4324
|
useEffect(() => {
|
|
4325
4325
|
if (!editor) return;
|
|
4326
4326
|
const handleSelectionUpdate = () => {
|
|
4327
|
-
setIsVisible(shouldShowButton$
|
|
4327
|
+
setIsVisible(shouldShowButton$5({
|
|
4328
4328
|
editor,
|
|
4329
4329
|
hideWhenUnavailable
|
|
4330
4330
|
}));
|
|
@@ -4537,7 +4537,7 @@ function toggleCodeBlock(editor) {
|
|
|
4537
4537
|
/**
|
|
4538
4538
|
* Determines if the code block button should be shown
|
|
4539
4539
|
*/
|
|
4540
|
-
function shouldShowButton$
|
|
4540
|
+
function shouldShowButton$4(props) {
|
|
4541
4541
|
const { editor, hideWhenUnavailable } = props;
|
|
4542
4542
|
if (!editor) return false;
|
|
4543
4543
|
if (!hideWhenUnavailable) return true;
|
|
@@ -4598,7 +4598,7 @@ function useCodeBlock(config) {
|
|
|
4598
4598
|
useEffect(() => {
|
|
4599
4599
|
if (!editor) return;
|
|
4600
4600
|
const handleSelectionUpdate = () => {
|
|
4601
|
-
setIsVisible(shouldShowButton$
|
|
4601
|
+
setIsVisible(shouldShowButton$4({
|
|
4602
4602
|
editor,
|
|
4603
4603
|
hideWhenUnavailable
|
|
4604
4604
|
}));
|
|
@@ -4733,7 +4733,7 @@ var HeadingThreeIcon = createSvgIcon(/* @__PURE__ */ jsxs("g", { children: [
|
|
|
4733
4733
|
})
|
|
4734
4734
|
] }), "HeadingThree");
|
|
4735
4735
|
//#endregion
|
|
4736
|
-
//#region src/tiptap/components/ui/heading-
|
|
4736
|
+
//#region src/tiptap/components/ui/heading-menu-item/use-heading.ts
|
|
4737
4737
|
var headingIcons = {
|
|
4738
4738
|
1: HeadingOneIcon,
|
|
4739
4739
|
2: createSvgIcon(/* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("path", {
|
|
@@ -4833,9 +4833,9 @@ function toggleHeading(editor, level) {
|
|
|
4833
4833
|
}
|
|
4834
4834
|
}
|
|
4835
4835
|
/**
|
|
4836
|
-
* Determines if the heading
|
|
4836
|
+
* Determines if the heading menu item should be shown
|
|
4837
4837
|
*/
|
|
4838
|
-
function
|
|
4838
|
+
function shouldShowItem(props) {
|
|
4839
4839
|
const { editor, level, hideWhenUnavailable } = props;
|
|
4840
4840
|
if (!editor) return false;
|
|
4841
4841
|
if (!hideWhenUnavailable) return true;
|
|
@@ -4853,7 +4853,7 @@ function shouldShowButton$4(props) {
|
|
|
4853
4853
|
* @example
|
|
4854
4854
|
* ```tsx
|
|
4855
4855
|
* // Simple usage
|
|
4856
|
-
* function
|
|
4856
|
+
* function MySimpleHeadingItem() {
|
|
4857
4857
|
* const { isVisible, isActive, handleToggle, Icon } = useHeading({ level: 1 })
|
|
4858
4858
|
*
|
|
4859
4859
|
* if (!isVisible) return null
|
|
@@ -4870,7 +4870,7 @@ function shouldShowButton$4(props) {
|
|
|
4870
4870
|
* }
|
|
4871
4871
|
*
|
|
4872
4872
|
* // Advanced usage with configuration
|
|
4873
|
-
* function
|
|
4873
|
+
* function MyAdvancedHeadingItem() {
|
|
4874
4874
|
* const { isVisible, isActive, handleToggle, label, Icon } = useHeading({
|
|
4875
4875
|
* level: 2,
|
|
4876
4876
|
* editor: myEditor,
|
|
@@ -4902,7 +4902,7 @@ function useHeading(config) {
|
|
|
4902
4902
|
useEffect(() => {
|
|
4903
4903
|
if (!editor) return;
|
|
4904
4904
|
const handleSelectionUpdate = () => {
|
|
4905
|
-
setIsVisible(
|
|
4905
|
+
setIsVisible(shouldShowItem({
|
|
4906
4906
|
editor,
|
|
4907
4907
|
level,
|
|
4908
4908
|
hideWhenUnavailable
|
|
@@ -4938,16 +4938,16 @@ function useHeading(config) {
|
|
|
4938
4938
|
};
|
|
4939
4939
|
}
|
|
4940
4940
|
//#endregion
|
|
4941
|
-
//#region src/tiptap/components/ui/heading-
|
|
4941
|
+
//#region src/tiptap/components/ui/heading-menu-item/heading-menu-item.tsx
|
|
4942
4942
|
function HeadingShortcutBadge({ level, shortcutKeys = HEADING_SHORTCUT_KEYS[level] }) {
|
|
4943
4943
|
return /* @__PURE__ */ jsx(Badge, { children: parseShortcutKeys({ shortcutKeys }) });
|
|
4944
4944
|
}
|
|
4945
4945
|
/**
|
|
4946
|
-
*
|
|
4946
|
+
* Menu item component for toggling heading in a Tiptap editor.
|
|
4947
4947
|
*
|
|
4948
|
-
* For custom
|
|
4948
|
+
* For custom menu item implementations, use the `useHeading` hook instead.
|
|
4949
4949
|
*/
|
|
4950
|
-
var
|
|
4950
|
+
var HeadingMenuItem = forwardRef(({ editor: providedEditor, level, text, hideWhenUnavailable = false, onToggled, showShortcut = false, onClick, children, ...menuItemProps }, ref) => {
|
|
4951
4951
|
const { editor } = useTiptapEditor(providedEditor);
|
|
4952
4952
|
const { isVisible, canToggle, isActive, handleToggle, label, Icon, shortcutKeys } = useHeading({
|
|
4953
4953
|
editor,
|
|
@@ -4972,7 +4972,7 @@ var HeadingButton = forwardRef(({ editor: providedEditor, level, text, hideWhenU
|
|
|
4972
4972
|
tooltip: label,
|
|
4973
4973
|
selected: isActive,
|
|
4974
4974
|
onClick: handleClick,
|
|
4975
|
-
...
|
|
4975
|
+
...menuItemProps,
|
|
4976
4976
|
ref,
|
|
4977
4977
|
children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
4978
4978
|
/* @__PURE__ */ jsx(Icon, { fontSize: "small" }),
|
|
@@ -4987,7 +4987,7 @@ var HeadingButton = forwardRef(({ editor: providedEditor, level, text, hideWhenU
|
|
|
4987
4987
|
] })
|
|
4988
4988
|
});
|
|
4989
4989
|
});
|
|
4990
|
-
|
|
4990
|
+
HeadingMenuItem.displayName = "HeadingMenuItem";
|
|
4991
4991
|
//#endregion
|
|
4992
4992
|
//#region src/tiptap/components/icons/heading-icon.tsx
|
|
4993
4993
|
var HeadingIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
|
|
@@ -4995,7 +4995,7 @@ var HeadingIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
|
|
|
4995
4995
|
fill: "currentColor"
|
|
4996
4996
|
}), "Heading");
|
|
4997
4997
|
//#endregion
|
|
4998
|
-
//#region src/tiptap/components/ui/heading-
|
|
4998
|
+
//#region src/tiptap/components/ui/heading-menu/use-heading-menu.ts
|
|
4999
4999
|
/**
|
|
5000
5000
|
* Gets the currently active heading level from the available levels
|
|
5001
5001
|
*/
|
|
@@ -5011,35 +5011,35 @@ function getActiveHeadingLevel(editor, levels = [
|
|
|
5011
5011
|
return levels.find((level) => isHeadingActive(editor, level));
|
|
5012
5012
|
}
|
|
5013
5013
|
/**
|
|
5014
|
-
* Custom hook that provides heading
|
|
5014
|
+
* Custom hook that provides heading menu functionality for Tiptap editor
|
|
5015
5015
|
*
|
|
5016
5016
|
* @example
|
|
5017
5017
|
* ```tsx
|
|
5018
5018
|
* // Simple usage
|
|
5019
|
-
* function
|
|
5019
|
+
* function MyHeading() {
|
|
5020
5020
|
* const {
|
|
5021
5021
|
* isVisible,
|
|
5022
5022
|
* activeLevel,
|
|
5023
5023
|
* isAnyHeadingActive,
|
|
5024
5024
|
* canToggle,
|
|
5025
5025
|
* levels,
|
|
5026
|
-
* } =
|
|
5026
|
+
* } = useHeadingMenu()
|
|
5027
5027
|
*
|
|
5028
5028
|
* if (!isVisible) return null
|
|
5029
5029
|
*
|
|
5030
5030
|
* return (
|
|
5031
|
-
* <
|
|
5032
|
-
* //
|
|
5033
|
-
* </
|
|
5031
|
+
* <Menu>
|
|
5032
|
+
* // content
|
|
5033
|
+
* </Menu>
|
|
5034
5034
|
* )
|
|
5035
5035
|
* }
|
|
5036
5036
|
*
|
|
5037
5037
|
* // Advanced usage with configuration
|
|
5038
|
-
* function
|
|
5038
|
+
* function MyAdvancedHeading() {
|
|
5039
5039
|
* const {
|
|
5040
5040
|
* isVisible,
|
|
5041
5041
|
* activeLevel,
|
|
5042
|
-
* } =
|
|
5042
|
+
* } = useHeadingMenu({
|
|
5043
5043
|
* editor: myEditor,
|
|
5044
5044
|
* levels: [1, 2, 3],
|
|
5045
5045
|
* hideWhenUnavailable: true,
|
|
@@ -5049,7 +5049,7 @@ function getActiveHeadingLevel(editor, levels = [
|
|
|
5049
5049
|
* }
|
|
5050
5050
|
* ```
|
|
5051
5051
|
*/
|
|
5052
|
-
function
|
|
5052
|
+
function useHeadingMenu(config) {
|
|
5053
5053
|
const { editor: providedEditor, levels = [
|
|
5054
5054
|
1,
|
|
5055
5055
|
2,
|
|
@@ -5066,7 +5066,7 @@ function useHeadingDropdownMenu(config) {
|
|
|
5066
5066
|
useEffect(() => {
|
|
5067
5067
|
if (!editor) return;
|
|
5068
5068
|
const handleSelectionUpdate = () => {
|
|
5069
|
-
setIsVisible(
|
|
5069
|
+
setIsVisible(shouldShowItem({
|
|
5070
5070
|
editor,
|
|
5071
5071
|
hideWhenUnavailable,
|
|
5072
5072
|
level: levels
|
|
@@ -5093,13 +5093,13 @@ function useHeadingDropdownMenu(config) {
|
|
|
5093
5093
|
};
|
|
5094
5094
|
}
|
|
5095
5095
|
//#endregion
|
|
5096
|
-
//#region src/tiptap/components/ui/heading-
|
|
5096
|
+
//#region src/tiptap/components/ui/heading-menu/heading-menu.tsx
|
|
5097
5097
|
/**
|
|
5098
|
-
*
|
|
5098
|
+
* Menu component for selecting heading levels in a Tiptap editor.
|
|
5099
5099
|
*
|
|
5100
|
-
* For custom
|
|
5100
|
+
* For custom menu implementations, use the `useHeadingMenu` hook instead.
|
|
5101
5101
|
*/
|
|
5102
|
-
var
|
|
5102
|
+
var HeadingMenu = forwardRef(({ editor: providedEditor, levels = [
|
|
5103
5103
|
1,
|
|
5104
5104
|
2,
|
|
5105
5105
|
3,
|
|
@@ -5110,7 +5110,7 @@ var HeadingDropdownMenu = forwardRef(({ editor: providedEditor, levels = [
|
|
|
5110
5110
|
const { editor } = useTiptapEditor(providedEditor);
|
|
5111
5111
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
5112
5112
|
const open = Boolean(anchorEl);
|
|
5113
|
-
const { isVisible, isActive, canToggle, Icon } =
|
|
5113
|
+
const { isVisible, isActive, canToggle, Icon } = useHeadingMenu({
|
|
5114
5114
|
editor,
|
|
5115
5115
|
levels,
|
|
5116
5116
|
hideWhenUnavailable
|
|
@@ -5155,7 +5155,7 @@ var HeadingDropdownMenu = forwardRef(({ editor: providedEditor, levels = [
|
|
|
5155
5155
|
"aria-labelledby": "heading-button",
|
|
5156
5156
|
role: "listbox"
|
|
5157
5157
|
} },
|
|
5158
|
-
children: levels.map((level) => /* @__PURE__ */ jsx(
|
|
5158
|
+
children: levels.map((level) => /* @__PURE__ */ jsx(HeadingMenuItem, {
|
|
5159
5159
|
editor,
|
|
5160
5160
|
level,
|
|
5161
5161
|
text: `Heading ${level}`,
|
|
@@ -5163,7 +5163,7 @@ var HeadingDropdownMenu = forwardRef(({ editor: providedEditor, levels = [
|
|
|
5163
5163
|
}, `heading-${level}`))
|
|
5164
5164
|
})] });
|
|
5165
5165
|
});
|
|
5166
|
-
|
|
5166
|
+
HeadingMenu.displayName = "HeadingMenu";
|
|
5167
5167
|
//#endregion
|
|
5168
5168
|
//#region ../../node_modules/.pnpm/@mui+icons-material@9.1.1_@mui+material@9.1.1_@emotion+react@11.14.0_@types+react@19.2._9b347fe2e167545244369f75d4366d7f/node_modules/@mui/icons-material/KeyboardReturnRounded.mjs
|
|
5169
5169
|
var KeyboardReturnRounded_default = SvgIcon_default(/*#__PURE__*/ jsx("path", { d: "M19 8v3H5.83l2.88-2.88c.39-.39.39-1.02 0-1.41a.996.996 0 0 0-1.41 0L2.71 11.3c-.39.39-.39 1.02 0 1.41L7.3 17.3c.39.39 1.02.39 1.41 0s.39-1.02 0-1.41L5.83 13H20c.55 0 1-.45 1-1V8c0-.55-.45-1-1-1s-1 .45-1 1" }), "KeyboardReturnRounded");
|
|
@@ -5699,7 +5699,7 @@ function toggleList(editor, type) {
|
|
|
5699
5699
|
const resolvedTo = state.doc.resolve(to);
|
|
5700
5700
|
chain = chain.setTextSelection(TextSelection.between(resolvedFrom, resolvedTo)).clearNodes();
|
|
5701
5701
|
}
|
|
5702
|
-
if (editor.isActive(type)) chain.liftListItem("listItem").lift("bulletList").lift("orderedList").
|
|
5702
|
+
if (editor.isActive(type)) chain.liftListItem("listItem").lift("bulletList").lift("orderedList").run();
|
|
5703
5703
|
else {
|
|
5704
5704
|
const toggle = {
|
|
5705
5705
|
bulletList: () => chain.toggleBulletList(),
|
|
@@ -6737,7 +6737,7 @@ var FormattingControls = ({ editor }) => {
|
|
|
6737
6737
|
/* @__PURE__ */ jsxs(ToolbarGroup, { children: [/* @__PURE__ */ jsx(UndoRedoButton, { action: "undo" }), /* @__PURE__ */ jsx(UndoRedoButton, { action: "redo" })] }),
|
|
6738
6738
|
/* @__PURE__ */ jsx(ToolbarSeparator, {}),
|
|
6739
6739
|
/* @__PURE__ */ jsxs(ToolbarGroup, { children: [
|
|
6740
|
-
/* @__PURE__ */ jsx(
|
|
6740
|
+
/* @__PURE__ */ jsx(HeadingMenu, {
|
|
6741
6741
|
modal: false,
|
|
6742
6742
|
levels: [
|
|
6743
6743
|
1,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cgi-learning-hub/ui",
|
|
3
|
-
"version": "1.14.0-dev.
|
|
3
|
+
"version": "1.14.0-dev.1785319387",
|
|
4
4
|
"description": "React component library for Hub's design system, built on Material UI with custom and extended components.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"cgi-learning-hub",
|