@wecode-team/we0-cms 1.1.33 → 1.1.34

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.
Files changed (122) hide show
  1. package/dist/components/tiptap-extension/node-background-extension.d.ts +23 -0
  2. package/dist/components/tiptap-icons/align-center-icon.d.ts +3 -0
  3. package/dist/components/tiptap-icons/align-justify-icon.d.ts +3 -0
  4. package/dist/components/tiptap-icons/align-left-icon.d.ts +3 -0
  5. package/dist/components/tiptap-icons/align-right-icon.d.ts +3 -0
  6. package/dist/components/tiptap-icons/arrow-left-icon.d.ts +3 -0
  7. package/dist/components/tiptap-icons/ban-icon.d.ts +3 -0
  8. package/dist/components/tiptap-icons/blockquote-icon.d.ts +3 -0
  9. package/dist/components/tiptap-icons/bold-icon.d.ts +3 -0
  10. package/dist/components/tiptap-icons/check-icon.d.ts +3 -0
  11. package/dist/components/tiptap-icons/chevron-down-icon.d.ts +3 -0
  12. package/dist/components/tiptap-icons/close-icon.d.ts +3 -0
  13. package/dist/components/tiptap-icons/code-block-icon.d.ts +3 -0
  14. package/dist/components/tiptap-icons/code2-icon.d.ts +3 -0
  15. package/dist/components/tiptap-icons/corner-down-left-icon.d.ts +3 -0
  16. package/dist/components/tiptap-icons/external-link-icon.d.ts +3 -0
  17. package/dist/components/tiptap-icons/heading-five-icon.d.ts +3 -0
  18. package/dist/components/tiptap-icons/heading-four-icon.d.ts +3 -0
  19. package/dist/components/tiptap-icons/heading-icon.d.ts +3 -0
  20. package/dist/components/tiptap-icons/heading-one-icon.d.ts +3 -0
  21. package/dist/components/tiptap-icons/heading-six-icon.d.ts +3 -0
  22. package/dist/components/tiptap-icons/heading-three-icon.d.ts +3 -0
  23. package/dist/components/tiptap-icons/heading-two-icon.d.ts +3 -0
  24. package/dist/components/tiptap-icons/highlighter-icon.d.ts +3 -0
  25. package/dist/components/tiptap-icons/image-plus-icon.d.ts +3 -0
  26. package/dist/components/tiptap-icons/italic-icon.d.ts +3 -0
  27. package/dist/components/tiptap-icons/link-icon.d.ts +3 -0
  28. package/dist/components/tiptap-icons/list-icon.d.ts +3 -0
  29. package/dist/components/tiptap-icons/list-ordered-icon.d.ts +3 -0
  30. package/dist/components/tiptap-icons/list-todo-icon.d.ts +3 -0
  31. package/dist/components/tiptap-icons/moon-star-icon.d.ts +3 -0
  32. package/dist/components/tiptap-icons/redo2-icon.d.ts +3 -0
  33. package/dist/components/tiptap-icons/strike-icon.d.ts +3 -0
  34. package/dist/components/tiptap-icons/subscript-icon.d.ts +3 -0
  35. package/dist/components/tiptap-icons/sun-icon.d.ts +3 -0
  36. package/dist/components/tiptap-icons/superscript-icon.d.ts +3 -0
  37. package/dist/components/tiptap-icons/trash-icon.d.ts +3 -0
  38. package/dist/components/tiptap-icons/underline-icon.d.ts +3 -0
  39. package/dist/components/tiptap-icons/undo2-icon.d.ts +3 -0
  40. package/dist/components/tiptap-node/horizontal-rule-node/horizontal-rule-node-extension.d.ts +2 -0
  41. package/dist/components/tiptap-node/image-upload-node/image-upload-node-extension.d.ts +58 -0
  42. package/dist/components/tiptap-node/image-upload-node/image-upload-node.d.ts +69 -0
  43. package/dist/components/tiptap-node/image-upload-node/index.d.ts +1 -0
  44. package/dist/components/tiptap-templates/simple/simple-editor.d.ts +19 -0
  45. package/dist/components/tiptap-templates/simple/theme-toggle.d.ts +1 -0
  46. package/dist/components/tiptap-ui/blockquote-button/blockquote-button.d.ts +22 -0
  47. package/dist/components/tiptap-ui/blockquote-button/index.d.ts +2 -0
  48. package/dist/components/tiptap-ui/blockquote-button/use-blockquote.d.ts +80 -0
  49. package/dist/components/tiptap-ui/code-block-button/code-block-button.d.ts +22 -0
  50. package/dist/components/tiptap-ui/code-block-button/index.d.ts +2 -0
  51. package/dist/components/tiptap-ui/code-block-button/use-code-block.d.ts +87 -0
  52. package/dist/components/tiptap-ui/color-highlight-button/color-highlight-button.d.ts +46 -0
  53. package/dist/components/tiptap-ui/color-highlight-button/index.d.ts +2 -0
  54. package/dist/components/tiptap-ui/color-highlight-button/use-color-highlight.d.ts +93 -0
  55. package/dist/components/tiptap-ui/color-highlight-popover/color-highlight-popover.d.ts +35 -0
  56. package/dist/components/tiptap-ui/color-highlight-popover/index.d.ts +1 -0
  57. package/dist/components/tiptap-ui/heading-button/heading-button.d.ts +23 -0
  58. package/dist/components/tiptap-ui/heading-button/index.d.ts +2 -0
  59. package/dist/components/tiptap-ui/heading-button/use-heading.d.ts +108 -0
  60. package/dist/components/tiptap-ui/heading-dropdown-menu/heading-dropdown-menu.d.ts +19 -0
  61. package/dist/components/tiptap-ui/heading-dropdown-menu/index.d.ts +2 -0
  62. package/dist/components/tiptap-ui/heading-dropdown-menu/use-heading-dropdown-menu.d.ts +73 -0
  63. package/dist/components/tiptap-ui/image-upload-button/image-upload-button.d.ts +29 -0
  64. package/dist/components/tiptap-ui/image-upload-button/index.d.ts +2 -0
  65. package/dist/components/tiptap-ui/image-upload-button/use-image-upload.d.ts +84 -0
  66. package/dist/components/tiptap-ui/link-popover/index.d.ts +2 -0
  67. package/dist/components/tiptap-ui/link-popover/link-popover.d.ts +58 -0
  68. package/dist/components/tiptap-ui/link-popover/use-link-popover.d.ts +117 -0
  69. package/dist/components/tiptap-ui/list-button/index.d.ts +2 -0
  70. package/dist/components/tiptap-ui/list-button/list-button.d.ts +23 -0
  71. package/dist/components/tiptap-ui/list-button/use-list.d.ts +97 -0
  72. package/dist/components/tiptap-ui/list-dropdown-menu/index.d.ts +1 -0
  73. package/dist/components/tiptap-ui/list-dropdown-menu/list-dropdown-menu.d.ts +28 -0
  74. package/dist/components/tiptap-ui/list-dropdown-menu/use-list-dropdown-menu.d.ts +90 -0
  75. package/dist/components/tiptap-ui/mark-button/index.d.ts +2 -0
  76. package/dist/components/tiptap-ui/mark-button/mark-button.d.ts +23 -0
  77. package/dist/components/tiptap-ui/mark-button/use-mark.d.ts +104 -0
  78. package/dist/components/tiptap-ui/text-align-button/index.d.ts +2 -0
  79. package/dist/components/tiptap-ui/text-align-button/text-align-button.d.ts +30 -0
  80. package/dist/components/tiptap-ui/text-align-button/use-text-align.d.ts +102 -0
  81. package/dist/components/tiptap-ui/undo-redo-button/index.d.ts +2 -0
  82. package/dist/components/tiptap-ui/undo-redo-button/undo-redo-button.d.ts +23 -0
  83. package/dist/components/tiptap-ui/undo-redo-button/use-undo-redo.d.ts +90 -0
  84. package/dist/components/tiptap-ui-primitive/badge/badge.d.ts +11 -0
  85. package/dist/components/tiptap-ui-primitive/badge/index.d.ts +1 -0
  86. package/dist/components/tiptap-ui-primitive/button/button.d.ts +16 -0
  87. package/dist/components/tiptap-ui-primitive/button/index.d.ts +1 -0
  88. package/dist/components/tiptap-ui-primitive/button-group/button-group.d.ts +11 -0
  89. package/dist/components/tiptap-ui-primitive/button-group/index.d.ts +1 -0
  90. package/dist/components/tiptap-ui-primitive/card/card.d.ts +10 -0
  91. package/dist/components/tiptap-ui-primitive/card/index.d.ts +1 -0
  92. package/dist/components/tiptap-ui-primitive/dropdown-menu/dropdown-menu.d.ts +29 -0
  93. package/dist/components/tiptap-ui-primitive/dropdown-menu/index.d.ts +1 -0
  94. package/dist/components/tiptap-ui-primitive/input/index.d.ts +1 -0
  95. package/dist/components/tiptap-ui-primitive/input/input.d.ts +3 -0
  96. package/dist/components/tiptap-ui-primitive/popover/index.d.ts +1 -0
  97. package/dist/components/tiptap-ui-primitive/popover/popover.d.ts +6 -0
  98. package/dist/components/tiptap-ui-primitive/separator/index.d.ts +1 -0
  99. package/dist/components/tiptap-ui-primitive/separator/separator.d.ts +6 -0
  100. package/dist/components/tiptap-ui-primitive/spacer/index.d.ts +1 -0
  101. package/dist/components/tiptap-ui-primitive/spacer/spacer.d.ts +5 -0
  102. package/dist/components/tiptap-ui-primitive/toolbar/index.d.ts +1 -0
  103. package/dist/components/tiptap-ui-primitive/toolbar/toolbar.d.ts +9 -0
  104. package/dist/components/tiptap-ui-primitive/tooltip/index.d.ts +1 -0
  105. package/dist/components/tiptap-ui-primitive/tooltip/tooltip.d.ts +29 -0
  106. package/dist/hooks/use-composed-ref.d.ts +3 -0
  107. package/dist/hooks/use-cursor-visibility.d.ts +20 -0
  108. package/dist/hooks/use-element-rect.d.ts +35 -0
  109. package/dist/hooks/use-is-breakpoint.d.ts +9 -0
  110. package/dist/hooks/use-menu-navigation.d.ts +52 -0
  111. package/dist/hooks/use-scrolling.d.ts +8 -0
  112. package/dist/hooks/use-throttled-callback.d.ts +18 -0
  113. package/dist/hooks/use-tiptap-editor.d.ts +6 -0
  114. package/dist/hooks/use-unmount.d.ts +7 -0
  115. package/dist/hooks/use-window-size.d.ts +35 -0
  116. package/dist/index.css +2 -2
  117. package/dist/index.esm.js +11 -5
  118. package/dist/index.esm.js.map +1 -1
  119. package/dist/index.js +11 -5
  120. package/dist/index.js.map +1 -1
  121. package/dist/lib/tiptap-utils.d.ts +173 -0
  122. package/package.json +1 -1
@@ -0,0 +1,117 @@
1
+ import type { Editor } from "@tiptap/react";
2
+ /**
3
+ * Configuration for the link popover functionality
4
+ */
5
+ export interface UseLinkPopoverConfig {
6
+ /**
7
+ * The Tiptap editor instance.
8
+ */
9
+ editor?: Editor | null;
10
+ /**
11
+ * Whether to hide the link popover when not available.
12
+ * @default false
13
+ */
14
+ hideWhenUnavailable?: boolean;
15
+ /**
16
+ * Callback function called when the link is set.
17
+ */
18
+ onSetLink?: () => void;
19
+ }
20
+ /**
21
+ * Configuration for the link handler functionality
22
+ */
23
+ export interface LinkHandlerProps {
24
+ /**
25
+ * The Tiptap editor instance.
26
+ */
27
+ editor: Editor | null;
28
+ /**
29
+ * Callback function called when the link is set.
30
+ */
31
+ onSetLink?: () => void;
32
+ }
33
+ /**
34
+ * Checks if a link can be set in the current editor state
35
+ */
36
+ export declare function canSetLink(editor: Editor | null): boolean;
37
+ /**
38
+ * Checks if a link is currently active in the editor
39
+ */
40
+ export declare function isLinkActive(editor: Editor | null): boolean;
41
+ /**
42
+ * Determines if the link button should be shown
43
+ */
44
+ export declare function shouldShowLinkButton(props: {
45
+ editor: Editor | null;
46
+ hideWhenUnavailable: boolean;
47
+ }): boolean;
48
+ /**
49
+ * Custom hook for handling link operations in a Tiptap editor
50
+ */
51
+ export declare function useLinkHandler(props: LinkHandlerProps): {
52
+ url: string;
53
+ setUrl: import("react").Dispatch<import("react").SetStateAction<string | null>>;
54
+ setLink: () => void;
55
+ removeLink: () => void;
56
+ openLink: (target?: string, features?: string) => void;
57
+ };
58
+ /**
59
+ * Custom hook for link popover state management
60
+ */
61
+ export declare function useLinkState(props: {
62
+ editor: Editor | null;
63
+ hideWhenUnavailable: boolean;
64
+ }): {
65
+ isVisible: boolean;
66
+ canSet: boolean;
67
+ isActive: boolean;
68
+ };
69
+ /**
70
+ * Main hook that provides link popover functionality for Tiptap editor
71
+ *
72
+ * @example
73
+ * ```tsx
74
+ * // Simple usage
75
+ * function MyLinkButton() {
76
+ * const { isVisible, canSet, isActive, Icon, label } = useLinkPopover()
77
+ *
78
+ * if (!isVisible) return null
79
+ *
80
+ * return <button disabled={!canSet}>Link</button>
81
+ * }
82
+ *
83
+ * // Advanced usage with configuration
84
+ * function MyAdvancedLinkButton() {
85
+ * const { isVisible, canSet, isActive, Icon, label } = useLinkPopover({
86
+ * editor: myEditor,
87
+ * hideWhenUnavailable: true,
88
+ * onSetLink: () => console.log('Link set!')
89
+ * })
90
+ *
91
+ * if (!isVisible) return null
92
+ *
93
+ * return (
94
+ * <MyButton
95
+ * disabled={!canSet}
96
+ * aria-label={label}
97
+ * aria-pressed={isActive}
98
+ * >
99
+ * <Icon />
100
+ * {label}
101
+ * </MyButton>
102
+ * )
103
+ * }
104
+ * ```
105
+ */
106
+ export declare function useLinkPopover(config?: UseLinkPopoverConfig): {
107
+ url: string;
108
+ setUrl: import("react").Dispatch<import("react").SetStateAction<string | null>>;
109
+ setLink: () => void;
110
+ removeLink: () => void;
111
+ openLink: (target?: string, features?: string) => void;
112
+ isVisible: boolean;
113
+ canSet: boolean;
114
+ isActive: boolean;
115
+ label: string;
116
+ Icon: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
117
+ };
@@ -0,0 +1,2 @@
1
+ export * from "./list-button";
2
+ export * from "./use-list";
@@ -0,0 +1,23 @@
1
+ import type { ButtonProps } from "@/components/tiptap-ui-primitive/button";
2
+ import type { ListType, UseListConfig } from "@/components/tiptap-ui/list-button";
3
+ export interface ListButtonProps extends Omit<ButtonProps, "type">, UseListConfig {
4
+ /**
5
+ * Optional text to display alongside the icon.
6
+ */
7
+ text?: string;
8
+ /**
9
+ * Optional show shortcut keys in the button.
10
+ * @default false
11
+ */
12
+ showShortcut?: boolean;
13
+ }
14
+ export declare function ListShortcutBadge({ type, shortcutKeys, }: {
15
+ type: ListType;
16
+ shortcutKeys?: string;
17
+ }): import("react").JSX.Element;
18
+ /**
19
+ * Button component for toggling lists in a Tiptap editor.
20
+ *
21
+ * For custom button implementations, use the `useList` hook instead.
22
+ */
23
+ export declare const ListButton: import("react").ForwardRefExoticComponent<ListButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
@@ -0,0 +1,97 @@
1
+ import { type Editor } from "@tiptap/react";
2
+ export type ListType = "bulletList" | "orderedList" | "taskList";
3
+ /**
4
+ * Configuration for the list functionality
5
+ */
6
+ export interface UseListConfig {
7
+ /**
8
+ * The Tiptap editor instance.
9
+ */
10
+ editor?: Editor | null;
11
+ /**
12
+ * The type of list to toggle.
13
+ */
14
+ type: ListType;
15
+ /**
16
+ * Whether the button should hide when list is not available.
17
+ * @default false
18
+ */
19
+ hideWhenUnavailable?: boolean;
20
+ /**
21
+ * Callback function called after a successful toggle.
22
+ */
23
+ onToggled?: () => void;
24
+ }
25
+ export declare const listIcons: {
26
+ bulletList: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
27
+ orderedList: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
28
+ taskList: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
29
+ };
30
+ export declare const listLabels: Record<ListType, string>;
31
+ export declare const LIST_SHORTCUT_KEYS: Record<ListType, string>;
32
+ /**
33
+ * Checks if a list can be toggled in the current editor state
34
+ */
35
+ export declare function canToggleList(editor: Editor | null, type: ListType, turnInto?: boolean): boolean;
36
+ /**
37
+ * Checks if list is currently active
38
+ */
39
+ export declare function isListActive(editor: Editor | null, type: ListType): boolean;
40
+ /**
41
+ * Toggles list in the editor
42
+ */
43
+ export declare function toggleList(editor: Editor | null, type: ListType): boolean;
44
+ /**
45
+ * Determines if the list button should be shown
46
+ */
47
+ export declare function shouldShowButton(props: {
48
+ editor: Editor | null;
49
+ type: ListType;
50
+ hideWhenUnavailable: boolean;
51
+ }): boolean;
52
+ /**
53
+ * Custom hook that provides list functionality for Tiptap editor
54
+ *
55
+ * @example
56
+ * ```tsx
57
+ * // Simple usage
58
+ * function MySimpleListButton() {
59
+ * const { isVisible, handleToggle, isActive } = useList({ type: "bulletList" })
60
+ *
61
+ * if (!isVisible) return null
62
+ *
63
+ * return <button onClick={handleToggle}>Bullet List</button>
64
+ * }
65
+ *
66
+ * // Advanced usage with configuration
67
+ * function MyAdvancedListButton() {
68
+ * const { isVisible, handleToggle, label, isActive } = useList({
69
+ * type: "orderedList",
70
+ * editor: myEditor,
71
+ * hideWhenUnavailable: true,
72
+ * onToggled: () => console.log('List toggled!')
73
+ * })
74
+ *
75
+ * if (!isVisible) return null
76
+ *
77
+ * return (
78
+ * <MyButton
79
+ * onClick={handleToggle}
80
+ * aria-label={label}
81
+ * aria-pressed={isActive}
82
+ * >
83
+ * Toggle List
84
+ * </MyButton>
85
+ * )
86
+ * }
87
+ * ```
88
+ */
89
+ export declare function useList(config: UseListConfig): {
90
+ isVisible: boolean;
91
+ isActive: boolean;
92
+ handleToggle: () => boolean;
93
+ canToggle: boolean;
94
+ label: string;
95
+ shortcutKeys: string;
96
+ Icon: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element> | import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element> | import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
97
+ };
@@ -0,0 +1 @@
1
+ export * from "./list-dropdown-menu";
@@ -0,0 +1,28 @@
1
+ import { type Editor } from "@tiptap/react";
2
+ import { type ListType } from "@/components/tiptap-ui/list-button";
3
+ import type { ButtonProps } from "@/components/tiptap-ui-primitive/button";
4
+ export interface ListDropdownMenuProps extends Omit<ButtonProps, "type"> {
5
+ /**
6
+ * The Tiptap editor instance.
7
+ */
8
+ editor?: Editor;
9
+ /**
10
+ * The list types to display in the dropdown.
11
+ */
12
+ types?: ListType[];
13
+ /**
14
+ * Whether the dropdown should be hidden when no list types are available
15
+ * @default false
16
+ */
17
+ hideWhenUnavailable?: boolean;
18
+ /**
19
+ * Callback for when the dropdown opens or closes
20
+ */
21
+ onOpenChange?: (isOpen: boolean) => void;
22
+ /**
23
+ * Whether the dropdown should use a modal
24
+ */
25
+ modal?: boolean;
26
+ }
27
+ export declare function ListDropdownMenu({ editor: providedEditor, types, hideWhenUnavailable, onOpenChange, modal, ...props }: ListDropdownMenuProps): import("react").JSX.Element | null;
28
+ export default ListDropdownMenu;
@@ -0,0 +1,90 @@
1
+ import type { Editor } from "@tiptap/react";
2
+ import { type ListType } from "@/components/tiptap-ui/list-button";
3
+ /**
4
+ * Configuration for the list dropdown menu functionality
5
+ */
6
+ export interface UseListDropdownMenuConfig {
7
+ /**
8
+ * The Tiptap editor instance.
9
+ */
10
+ editor?: Editor | null;
11
+ /**
12
+ * The list types to display in the dropdown.
13
+ * @default ["bulletList", "orderedList", "taskList"]
14
+ */
15
+ types?: ListType[];
16
+ /**
17
+ * Whether the dropdown should be hidden when no list types are available
18
+ * @default false
19
+ */
20
+ hideWhenUnavailable?: boolean;
21
+ }
22
+ export interface ListOption {
23
+ label: string;
24
+ type: ListType;
25
+ icon: React.ElementType;
26
+ }
27
+ export declare const listOptions: ListOption[];
28
+ export declare function canToggleAnyList(editor: Editor | null, listTypes: ListType[]): boolean;
29
+ export declare function isAnyListActive(editor: Editor | null, listTypes: ListType[]): boolean;
30
+ export declare function getFilteredListOptions(availableTypes: ListType[]): typeof listOptions;
31
+ export declare function shouldShowListDropdown(params: {
32
+ editor: Editor | null;
33
+ listTypes: ListType[];
34
+ hideWhenUnavailable: boolean;
35
+ listInSchema: boolean;
36
+ canToggleAny: boolean;
37
+ }): boolean;
38
+ /**
39
+ * Gets the currently active list type from the available types
40
+ */
41
+ export declare function getActiveListType(editor: Editor | null, availableTypes: ListType[]): ListType | undefined;
42
+ /**
43
+ * Custom hook that provides list dropdown menu functionality for Tiptap editor
44
+ *
45
+ * @example
46
+ * ```tsx
47
+ * // Simple usage
48
+ * function MyListDropdown() {
49
+ * const {
50
+ * isVisible,
51
+ * activeType,
52
+ * isAnyActive,
53
+ * canToggleAny,
54
+ * filteredLists,
55
+ * } = useListDropdownMenu()
56
+ *
57
+ * if (!isVisible) return null
58
+ *
59
+ * return (
60
+ * <DropdownMenu>
61
+ * // dropdown content
62
+ * </DropdownMenu>
63
+ * )
64
+ * }
65
+ *
66
+ * // Advanced usage with configuration
67
+ * function MyAdvancedListDropdown() {
68
+ * const {
69
+ * isVisible,
70
+ * activeType,
71
+ * } = useListDropdownMenu({
72
+ * editor: myEditor,
73
+ * types: ["bulletList", "orderedList"],
74
+ * hideWhenUnavailable: true,
75
+ * })
76
+ *
77
+ * // component implementation
78
+ * }
79
+ * ```
80
+ */
81
+ export declare function useListDropdownMenu(config?: UseListDropdownMenuConfig): {
82
+ isVisible: boolean;
83
+ activeType: ListType | undefined;
84
+ isActive: boolean;
85
+ canToggle: boolean;
86
+ types: ListType[];
87
+ filteredLists: ListOption[];
88
+ label: string;
89
+ Icon: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
90
+ };
@@ -0,0 +1,2 @@
1
+ export * from "./mark-button";
2
+ export * from "./use-mark";
@@ -0,0 +1,23 @@
1
+ import type { Mark, UseMarkConfig } from "@/components/tiptap-ui/mark-button";
2
+ import type { ButtonProps } from "@/components/tiptap-ui-primitive/button";
3
+ export interface MarkButtonProps extends Omit<ButtonProps, "type">, UseMarkConfig {
4
+ /**
5
+ * Optional text to display alongside the icon.
6
+ */
7
+ text?: string;
8
+ /**
9
+ * Optional show shortcut keys in the button.
10
+ * @default false
11
+ */
12
+ showShortcut?: boolean;
13
+ }
14
+ export declare function MarkShortcutBadge({ type, shortcutKeys, }: {
15
+ type: Mark;
16
+ shortcutKeys?: string;
17
+ }): import("react").JSX.Element;
18
+ /**
19
+ * Button component for toggling marks in a Tiptap editor.
20
+ *
21
+ * For custom button implementations, use the `useMark` hook instead.
22
+ */
23
+ export declare const MarkButton: import("react").ForwardRefExoticComponent<MarkButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
@@ -0,0 +1,104 @@
1
+ import type { Editor } from "@tiptap/react";
2
+ export type Mark = "bold" | "italic" | "strike" | "code" | "underline" | "superscript" | "subscript";
3
+ /**
4
+ * Configuration for the mark functionality
5
+ */
6
+ export interface UseMarkConfig {
7
+ /**
8
+ * The Tiptap editor instance.
9
+ */
10
+ editor?: Editor | null;
11
+ /**
12
+ * The type of mark to toggle
13
+ */
14
+ type: Mark;
15
+ /**
16
+ * Whether the button should hide when mark is not available.
17
+ * @default false
18
+ */
19
+ hideWhenUnavailable?: boolean;
20
+ /**
21
+ * Callback function called after a successful mark toggle.
22
+ */
23
+ onToggled?: () => void;
24
+ }
25
+ export declare const markIcons: {
26
+ bold: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
27
+ italic: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
28
+ underline: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
29
+ strike: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
30
+ code: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
31
+ superscript: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
32
+ subscript: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
33
+ };
34
+ export declare const MARK_SHORTCUT_KEYS: Record<Mark, string>;
35
+ /**
36
+ * Checks if a mark can be toggled in the current editor state
37
+ */
38
+ export declare function canToggleMark(editor: Editor | null, type: Mark): boolean;
39
+ /**
40
+ * Checks if a mark is currently active
41
+ */
42
+ export declare function isMarkActive(editor: Editor | null, type: Mark): boolean;
43
+ /**
44
+ * Toggles a mark in the editor
45
+ */
46
+ export declare function toggleMark(editor: Editor | null, type: Mark): boolean;
47
+ /**
48
+ * Determines if the mark button should be shown
49
+ */
50
+ export declare function shouldShowButton(props: {
51
+ editor: Editor | null;
52
+ type: Mark;
53
+ hideWhenUnavailable: boolean;
54
+ }): boolean;
55
+ /**
56
+ * Gets the formatted mark name
57
+ */
58
+ export declare function getFormattedMarkName(type: Mark): string;
59
+ /**
60
+ * Custom hook that provides mark functionality for Tiptap editor
61
+ *
62
+ * @example
63
+ * ```tsx
64
+ * // Simple usage
65
+ * function MySimpleBoldButton() {
66
+ * const { isVisible, handleMark } = useMark({ type: "bold" })
67
+ *
68
+ * if (!isVisible) return null
69
+ *
70
+ * return <button onClick={handleMark}>Bold</button>
71
+ * }
72
+ *
73
+ * // Advanced usage with configuration
74
+ * function MyAdvancedItalicButton() {
75
+ * const { isVisible, handleMark, label, isActive } = useMark({
76
+ * editor: myEditor,
77
+ * type: "italic",
78
+ * hideWhenUnavailable: true,
79
+ * onToggled: () => console.log('Mark toggled!')
80
+ * })
81
+ *
82
+ * if (!isVisible) return null
83
+ *
84
+ * return (
85
+ * <MyButton
86
+ * onClick={handleMark}
87
+ * aria-pressed={isActive}
88
+ * aria-label={label}
89
+ * >
90
+ * Italic
91
+ * </MyButton>
92
+ * )
93
+ * }
94
+ * ```
95
+ */
96
+ export declare function useMark(config: UseMarkConfig): {
97
+ isVisible: boolean;
98
+ isActive: boolean;
99
+ handleMark: () => boolean;
100
+ canToggle: boolean;
101
+ label: string;
102
+ shortcutKeys: string;
103
+ Icon: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element> | import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element> | import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element> | import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element> | import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element> | import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element> | import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
104
+ };
@@ -0,0 +1,2 @@
1
+ export * from "./text-align-button";
2
+ export * from "./use-text-align";
@@ -0,0 +1,30 @@
1
+ import type { TextAlign, UseTextAlignConfig } from "@/components/tiptap-ui/text-align-button";
2
+ import type { ButtonProps } from "@/components/tiptap-ui-primitive/button";
3
+ type IconProps = React.SVGProps<SVGSVGElement>;
4
+ type IconComponent = ({ className, ...props }: IconProps) => React.ReactElement;
5
+ export interface TextAlignButtonProps extends Omit<ButtonProps, "type">, UseTextAlignConfig {
6
+ /**
7
+ * Optional text to display alongside the icon.
8
+ */
9
+ text?: string;
10
+ /**
11
+ * Optional show shortcut keys in the button.
12
+ * @default false
13
+ */
14
+ showShortcut?: boolean;
15
+ /**
16
+ * Optional custom icon component to render instead of the default.
17
+ */
18
+ icon?: React.MemoExoticComponent<IconComponent> | React.FC<IconProps>;
19
+ }
20
+ export declare function TextAlignShortcutBadge({ align, shortcutKeys, }: {
21
+ align: TextAlign;
22
+ shortcutKeys?: string;
23
+ }): import("react").JSX.Element;
24
+ /**
25
+ * Button component for setting text alignment in a Tiptap editor.
26
+ *
27
+ * For custom button implementations, use the `useTextAlign` hook instead.
28
+ */
29
+ export declare const TextAlignButton: import("react").ForwardRefExoticComponent<TextAlignButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
30
+ export {};
@@ -0,0 +1,102 @@
1
+ import type { ChainedCommands } from "@tiptap/react";
2
+ import { type Editor } from "@tiptap/react";
3
+ export type TextAlign = "left" | "center" | "right" | "justify";
4
+ /**
5
+ * Configuration for the text align functionality
6
+ */
7
+ export interface UseTextAlignConfig {
8
+ /**
9
+ * The Tiptap editor instance.
10
+ */
11
+ editor?: Editor | null;
12
+ /**
13
+ * The text alignment to apply.
14
+ */
15
+ align: TextAlign;
16
+ /**
17
+ * Whether the button should hide when alignment is not available.
18
+ * @default false
19
+ */
20
+ hideWhenUnavailable?: boolean;
21
+ /**
22
+ * Callback function called after a successful alignment change.
23
+ */
24
+ onAligned?: () => void;
25
+ }
26
+ export declare const TEXT_ALIGN_SHORTCUT_KEYS: Record<TextAlign, string>;
27
+ export declare const textAlignIcons: {
28
+ left: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
29
+ center: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
30
+ right: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
31
+ justify: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
32
+ };
33
+ export declare const textAlignLabels: Record<TextAlign, string>;
34
+ /**
35
+ * Checks if text alignment can be performed in the current editor state
36
+ */
37
+ export declare function canSetTextAlign(editor: Editor | null, align: TextAlign): boolean;
38
+ export declare function hasSetTextAlign(commands: ChainedCommands): commands is ChainedCommands & {
39
+ setTextAlign: (align: TextAlign) => ChainedCommands;
40
+ };
41
+ /**
42
+ * Checks if the text alignment is currently active
43
+ */
44
+ export declare function isTextAlignActive(editor: Editor | null, align: TextAlign): boolean;
45
+ /**
46
+ * Sets text alignment in the editor
47
+ */
48
+ export declare function setTextAlign(editor: Editor | null, align: TextAlign): boolean;
49
+ /**
50
+ * Determines if the text align button should be shown
51
+ */
52
+ export declare function shouldShowButton(props: {
53
+ editor: Editor | null;
54
+ hideWhenUnavailable: boolean;
55
+ align: TextAlign;
56
+ }): boolean;
57
+ /**
58
+ * Custom hook that provides text align functionality for Tiptap editor
59
+ *
60
+ * @example
61
+ * ```tsx
62
+ * // Simple usage
63
+ * function MySimpleAlignButton() {
64
+ * const { isVisible, handleTextAlign } = useTextAlign({ align: "center" })
65
+ *
66
+ * if (!isVisible) return null
67
+ *
68
+ * return <button onClick={handleTextAlign}>Align Center</button>
69
+ * }
70
+ *
71
+ * // Advanced usage with configuration
72
+ * function MyAdvancedAlignButton() {
73
+ * const { isVisible, handleTextAlign, label, isActive } = useTextAlign({
74
+ * editor: myEditor,
75
+ * align: "right",
76
+ * hideWhenUnavailable: true,
77
+ * onAligned: () => console.log('Text aligned!')
78
+ * })
79
+ *
80
+ * if (!isVisible) return null
81
+ *
82
+ * return (
83
+ * <MyButton
84
+ * onClick={handleTextAlign}
85
+ * aria-pressed={isActive}
86
+ * aria-label={label}
87
+ * >
88
+ * Align Right
89
+ * </MyButton>
90
+ * )
91
+ * }
92
+ * ```
93
+ */
94
+ export declare function useTextAlign(config: UseTextAlignConfig): {
95
+ isVisible: boolean;
96
+ isActive: boolean;
97
+ handleTextAlign: () => boolean;
98
+ canAlign: boolean;
99
+ label: string;
100
+ shortcutKeys: string;
101
+ Icon: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element> | import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element> | import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element> | import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
102
+ };
@@ -0,0 +1,2 @@
1
+ export * from "./undo-redo-button";
2
+ export * from "./use-undo-redo";
@@ -0,0 +1,23 @@
1
+ import type { UndoRedoAction, UseUndoRedoConfig } from "@/components/tiptap-ui/undo-redo-button";
2
+ import type { ButtonProps } from "@/components/tiptap-ui-primitive/button";
3
+ export interface UndoRedoButtonProps extends Omit<ButtonProps, "type">, UseUndoRedoConfig {
4
+ /**
5
+ * Optional text to display alongside the icon.
6
+ */
7
+ text?: string;
8
+ /**
9
+ * Optional show shortcut keys in the button.
10
+ * @default false
11
+ */
12
+ showShortcut?: boolean;
13
+ }
14
+ export declare function HistoryShortcutBadge({ action, shortcutKeys, }: {
15
+ action: UndoRedoAction;
16
+ shortcutKeys?: string;
17
+ }): import("react").JSX.Element;
18
+ /**
19
+ * Button component for triggering undo/redo actions in a Tiptap editor.
20
+ *
21
+ * For custom button implementations, use the `useHistory` hook instead.
22
+ */
23
+ export declare const UndoRedoButton: import("react").ForwardRefExoticComponent<UndoRedoButtonProps & import("react").RefAttributes<HTMLButtonElement>>;