@melv1c/rich-text-editor 1.0.0 → 1.0.1

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 (3) hide show
  1. package/dist/index.d.mts +95 -152
  2. package/dist/index.mjs +150 -164
  3. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -1,7 +1,7 @@
1
- import { Editor, EditorContent, useEditor } from "@tiptap/react";
2
- import { Button, ButtonGroup, Select, SelectContent, SelectTrigger, ToggleGroup, ToggleGroupItem } from "@melv1c/ui-core";
3
1
  import * as react from "react";
4
2
  import { ComponentProps, HTMLAttributes } from "react";
3
+ import { Button, Toggle } from "@melv1c/ui-core";
4
+ import { Editor, EditorContent, useEditor } from "@tiptap/react";
5
5
  import * as react_jsx_runtime0 from "react/jsx-runtime";
6
6
  import StarterKit from "@tiptap/starter-kit";
7
7
 
@@ -28,13 +28,6 @@ declare function RichTextEditorContent({
28
28
  ...props
29
29
  }: RichTextEditorContentProps): react_jsx_runtime0.JSX.Element;
30
30
  //#endregion
31
- //#region src/context.d.ts
32
- type RichTextEditorContextValue = {
33
- editor: Editor | null;
34
- };
35
- declare const RichTextEditorContext: react.Context<RichTextEditorContextValue | null>;
36
- declare function useRichTextEditor(): RichTextEditorContextValue;
37
- //#endregion
38
31
  //#region src/editor.d.ts
39
32
  type RichTextEditorProps = HTMLAttributes<HTMLDivElement> & {
40
33
  value?: string;
@@ -56,147 +49,6 @@ declare function RichTextEditor({
56
49
  ...props
57
50
  }: RichTextEditorProps): react_jsx_runtime0.JSX.Element;
58
51
  //#endregion
59
- //#region src/groups/formatting-group.d.ts
60
- type RichTextEditorToggleButtonProps$2 = Omit<ComponentProps<typeof ToggleGroupItem>, 'value'>;
61
- type RichTextEditorFormattingItem = 'bold' | 'italic' | 'strike' | 'code';
62
- type RichTextEditorFormattingValue = RichTextEditorFormattingItem[];
63
- declare function BoldButton({
64
- className,
65
- ...props
66
- }: RichTextEditorToggleButtonProps$2): react_jsx_runtime0.JSX.Element;
67
- declare function ItalicButton({
68
- className,
69
- ...props
70
- }: RichTextEditorToggleButtonProps$2): react_jsx_runtime0.JSX.Element;
71
- declare function StrikethroughButton({
72
- className,
73
- ...props
74
- }: RichTextEditorToggleButtonProps$2): react_jsx_runtime0.JSX.Element;
75
- declare function CodeButton({
76
- className,
77
- ...props
78
- }: RichTextEditorToggleButtonProps$2): react_jsx_runtime0.JSX.Element;
79
- type RichTextEditorToggleGroupProps$2 = Omit<ComponentProps<typeof ToggleGroup>, 'type' | 'value' | 'onValueChange'>;
80
- type RichTextEditorFormattingGroupProps = RichTextEditorToggleGroupProps$2 & {
81
- boldProps?: ComponentProps<typeof BoldButton>;
82
- italicProps?: ComponentProps<typeof ItalicButton>;
83
- strikethroughProps?: ComponentProps<typeof StrikethroughButton>;
84
- codeProps?: ComponentProps<typeof CodeButton>;
85
- items?: RichTextEditorFormattingItem[];
86
- defaultValue?: RichTextEditorFormattingValue;
87
- };
88
- declare function RichTextEditorFormattingGroup({
89
- boldProps,
90
- italicProps,
91
- strikethroughProps,
92
- codeProps,
93
- items,
94
- variant,
95
- size,
96
- ...props
97
- }: RichTextEditorFormattingGroupProps): react_jsx_runtime0.JSX.Element;
98
- //#endregion
99
- //#region src/groups/heading-group.d.ts
100
- type RichTextEditorToggleButtonProps$1 = Omit<ComponentProps<typeof ToggleGroupItem>, 'value'>;
101
- type RichTextEditorHeadingLevel = 1 | 2 | 3;
102
- type RichTextEditorHeadingMode = 'toggle' | 'select';
103
- type RichTextEditorHeadingValue = `heading-${RichTextEditorHeadingLevel}` | '';
104
- declare function Heading1Button({
105
- className,
106
- ...props
107
- }: RichTextEditorToggleButtonProps$1): react_jsx_runtime0.JSX.Element;
108
- declare function Heading2Button({
109
- className,
110
- ...props
111
- }: RichTextEditorToggleButtonProps$1): react_jsx_runtime0.JSX.Element;
112
- declare function Heading3Button({
113
- className,
114
- ...props
115
- }: RichTextEditorToggleButtonProps$1): react_jsx_runtime0.JSX.Element;
116
- type RichTextEditorToggleGroupProps$1 = Omit<ComponentProps<typeof ToggleGroup>, 'type' | 'value' | 'onValueChange'>;
117
- type RichTextEditorHeadingSelectProps = Omit<ComponentProps<typeof Select>, 'value' | 'onValueChange'>;
118
- type RichTextEditorHeadingGroupProps = RichTextEditorToggleGroupProps$1 & {
119
- mode?: RichTextEditorHeadingMode;
120
- levels?: RichTextEditorHeadingLevel[];
121
- heading1Props?: ComponentProps<typeof Heading1Button>;
122
- heading2Props?: ComponentProps<typeof Heading2Button>;
123
- heading3Props?: ComponentProps<typeof Heading3Button>;
124
- includeParagraphOption?: boolean;
125
- paragraphLabel?: string;
126
- selectPlaceholder?: string;
127
- selectProps?: RichTextEditorHeadingSelectProps;
128
- selectTriggerProps?: Omit<ComponentProps<typeof SelectTrigger>, 'children'>;
129
- selectContentProps?: ComponentProps<typeof SelectContent>;
130
- defaultValue?: RichTextEditorHeadingValue;
131
- };
132
- declare function RichTextEditorHeadingGroup({
133
- mode,
134
- levels,
135
- heading1Props,
136
- heading2Props,
137
- heading3Props,
138
- includeParagraphOption,
139
- paragraphLabel,
140
- selectPlaceholder,
141
- selectProps,
142
- selectTriggerProps,
143
- selectContentProps,
144
- variant,
145
- size,
146
- ...props
147
- }: RichTextEditorHeadingGroupProps): react_jsx_runtime0.JSX.Element;
148
- //#endregion
149
- //#region src/groups/history-group.d.ts
150
- type RichTextEditorActionButtonProps = ComponentProps<typeof Button>;
151
- type RichTextEditorHistoryItem = 'undo' | 'redo';
152
- declare function UndoButton({
153
- className,
154
- ...props
155
- }: RichTextEditorActionButtonProps): react_jsx_runtime0.JSX.Element;
156
- declare function RedoButton({
157
- className,
158
- ...props
159
- }: RichTextEditorActionButtonProps): react_jsx_runtime0.JSX.Element;
160
- type RichTextEditorHistoryGroupProps = ComponentProps<typeof ButtonGroup> & {
161
- undoProps?: ComponentProps<typeof UndoButton>;
162
- redoProps?: ComponentProps<typeof RedoButton>;
163
- items?: RichTextEditorHistoryItem[];
164
- };
165
- declare function RichTextEditorHistoryGroup({
166
- undoProps,
167
- redoProps,
168
- items,
169
- ...props
170
- }: RichTextEditorHistoryGroupProps): react_jsx_runtime0.JSX.Element;
171
- //#endregion
172
- //#region src/groups/list-group.d.ts
173
- type RichTextEditorToggleButtonProps = Omit<ComponentProps<typeof ToggleGroupItem>, 'value'>;
174
- type RichTextEditorListValue = 'bullet-list' | 'ordered-list' | '';
175
- type RichTextEditorListItem = Exclude<RichTextEditorListValue, ''>;
176
- declare function BulletListButton({
177
- className,
178
- ...props
179
- }: RichTextEditorToggleButtonProps): react_jsx_runtime0.JSX.Element;
180
- declare function OrderedListButton({
181
- className,
182
- ...props
183
- }: RichTextEditorToggleButtonProps): react_jsx_runtime0.JSX.Element;
184
- type RichTextEditorToggleGroupProps = Omit<ComponentProps<typeof ToggleGroup>, 'type' | 'value' | 'onValueChange'>;
185
- type RichTextEditorListGroupProps = RichTextEditorToggleGroupProps & {
186
- bulletListProps?: ComponentProps<typeof BulletListButton>;
187
- orderedListProps?: ComponentProps<typeof OrderedListButton>;
188
- items?: RichTextEditorListItem[];
189
- defaultValue?: RichTextEditorListValue;
190
- };
191
- declare function RichTextEditorListGroup({
192
- bulletListProps,
193
- orderedListProps,
194
- items,
195
- variant,
196
- size,
197
- ...props
198
- }: RichTextEditorListGroupProps): react_jsx_runtime0.JSX.Element;
199
- //#endregion
200
52
  //#region src/built-in.d.ts
201
53
  /**
202
54
  * Built-in editor presets:
@@ -243,11 +95,102 @@ declare const RichTextEditorSimple: typeof RichTextEditorBuiltIn;
243
95
  /** @deprecated Use `RichTextEditorBuiltInProps` instead. */
244
96
  type RichTextEditorSimpleProps = RichTextEditorBuiltInProps;
245
97
  //#endregion
246
- //#region src/toolbar.d.ts
98
+ //#region src/context.d.ts
99
+ type RichTextEditorContextValue = {
100
+ editor: Editor | null;
101
+ };
102
+ declare const RichTextEditorContext: react.Context<RichTextEditorContextValue | null>;
103
+ declare function useRichTextEditor(): RichTextEditorContextValue;
104
+ //#endregion
105
+ //#region src/toolbar/formatting-buttons.d.ts
106
+ type FormattingButtonProps = Omit<ComponentProps<typeof Toggle>, 'pressed' | 'defaultPressed' | 'onPressedChange'>;
107
+ declare function BoldButton({
108
+ children,
109
+ className,
110
+ variant,
111
+ size,
112
+ ...props
113
+ }: FormattingButtonProps): react_jsx_runtime0.JSX.Element;
114
+ declare function ItalicButton({
115
+ children,
116
+ className,
117
+ variant,
118
+ size,
119
+ ...props
120
+ }: FormattingButtonProps): react_jsx_runtime0.JSX.Element;
121
+ declare function StrikethroughButton({
122
+ children,
123
+ className,
124
+ variant,
125
+ size,
126
+ ...props
127
+ }: FormattingButtonProps): react_jsx_runtime0.JSX.Element;
128
+ declare function CodeButton({
129
+ children,
130
+ className,
131
+ variant,
132
+ size,
133
+ ...props
134
+ }: FormattingButtonProps): react_jsx_runtime0.JSX.Element;
135
+ //#endregion
136
+ //#region src/toolbar/heading-buttons.d.ts
137
+ type HeadingButtonProps = Omit<ComponentProps<typeof Toggle>, 'pressed' | 'defaultPressed' | 'onPressedChange'>;
138
+ type RichTextEditorHeadingLevel = 1 | 2 | 3;
139
+ declare function Heading1Button(props: HeadingButtonProps): react_jsx_runtime0.JSX.Element;
140
+ declare function Heading2Button(props: HeadingButtonProps): react_jsx_runtime0.JSX.Element;
141
+ declare function Heading3Button(props: HeadingButtonProps): react_jsx_runtime0.JSX.Element;
142
+ type RichTextEditorHeadingSelectProps = {
143
+ levels?: RichTextEditorHeadingLevel[];
144
+ includeParagraphOption?: boolean;
145
+ paragraphLabel?: string;
146
+ selectPlaceholder?: string;
147
+ };
148
+ declare function RichTextEditorHeadingSelect({
149
+ levels,
150
+ includeParagraphOption,
151
+ paragraphLabel,
152
+ selectPlaceholder
153
+ }: RichTextEditorHeadingSelectProps): react_jsx_runtime0.JSX.Element;
154
+ //#endregion
155
+ //#region src/toolbar/history-buttons.d.ts
156
+ type HistoryButtonProps = ComponentProps<typeof Button>;
157
+ declare function UndoButton({
158
+ children,
159
+ className,
160
+ variant,
161
+ size,
162
+ ...props
163
+ }: HistoryButtonProps): react_jsx_runtime0.JSX.Element;
164
+ declare function RedoButton({
165
+ children,
166
+ className,
167
+ variant,
168
+ size,
169
+ ...props
170
+ }: HistoryButtonProps): react_jsx_runtime0.JSX.Element;
171
+ //#endregion
172
+ //#region src/toolbar/list-buttons.d.ts
173
+ type ListButtonProps = Omit<ComponentProps<typeof Toggle>, 'pressed' | 'defaultPressed' | 'onPressedChange'>;
174
+ declare function BulletListButton({
175
+ children,
176
+ className,
177
+ variant,
178
+ size,
179
+ ...props
180
+ }: ListButtonProps): react_jsx_runtime0.JSX.Element;
181
+ declare function OrderedListButton({
182
+ children,
183
+ className,
184
+ variant,
185
+ size,
186
+ ...props
187
+ }: ListButtonProps): react_jsx_runtime0.JSX.Element;
188
+ //#endregion
189
+ //#region src/toolbar/toolbar.d.ts
247
190
  type RichTextEditorToolbarProps = HTMLAttributes<HTMLDivElement>;
248
191
  declare function RichTextEditorToolbar({
249
192
  className,
250
193
  ...props
251
194
  }: RichTextEditorToolbarProps): react_jsx_runtime0.JSX.Element;
252
195
  //#endregion
253
- export { RichTextEditor, RichTextEditorBuiltIn, RichTextEditorBuiltInProps, RichTextEditorContent, RichTextEditorContentProps, RichTextEditorContext, RichTextEditorContextValue, RichTextEditorFormattingGroup, RichTextEditorFormattingGroupProps, RichTextEditorHeadingGroup, RichTextEditorHeadingGroupProps, RichTextEditorHistoryGroup, RichTextEditorHistoryGroupProps, RichTextEditorListGroup, RichTextEditorListGroupProps, RichTextEditorPreset, RichTextEditorProps, RichTextEditorSimple, RichTextEditorSimpleProps, RichTextEditorToolbar, RichTextEditorToolbarProps, useRichTextEditor };
196
+ export { BoldButton, BulletListButton, CodeButton, FormattingButtonProps, Heading1Button, Heading2Button, Heading3Button, HeadingButtonProps, HistoryButtonProps, ItalicButton, ListButtonProps, OrderedListButton, RedoButton, RichTextEditor, RichTextEditorBuiltIn, RichTextEditorBuiltInProps, RichTextEditorContent, RichTextEditorContentProps, RichTextEditorContext, RichTextEditorContextValue, RichTextEditorHeadingLevel, RichTextEditorHeadingSelect, RichTextEditorHeadingSelectProps, RichTextEditorPreset, RichTextEditorProps, RichTextEditorSimple, RichTextEditorSimpleProps, RichTextEditorToolbar, RichTextEditorToolbarProps, StrikethroughButton, UndoButton, useRichTextEditor };
package/dist/index.mjs CHANGED
@@ -1,10 +1,10 @@
1
- import { EditorContent, useEditor, useEditorState } from "@tiptap/react";
2
- import { Button, ButtonGroup, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, ToggleGroup, ToggleGroupItem, cn } from "@melv1c/ui-core";
1
+ import { Extension } from "@tiptap/core";
3
2
  import { createContext, useContext, useEffect, useMemo } from "react";
3
+ import { Button, ButtonGroup, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Toggle, cn } from "@melv1c/ui-core";
4
+ import { EditorContent, useEditor, useEditorState } from "@tiptap/react";
4
5
  import { jsx, jsxs } from "react/jsx-runtime";
5
6
  import StarterKit from "@tiptap/starter-kit";
6
7
  import { Bold, Code, Heading1, Heading2, Heading3, Italic, List, ListOrdered, Redo2, Strikethrough, Undo2 } from "lucide-react";
7
- import { Extension } from "@tiptap/core";
8
8
 
9
9
  //#region src/context.tsx
10
10
  const RichTextEditorContext = createContext(null);
@@ -69,93 +69,82 @@ function RichTextEditor({ children, className, value, defaultValue, onValueChang
69
69
  }
70
70
 
71
71
  //#endregion
72
- //#region src/groups/formatting-group.tsx
73
- const ALL_FORMATTING_ITEMS = [
74
- "bold",
75
- "italic",
76
- "strike",
77
- "code"
78
- ];
79
- function BoldButton({ className, ...props }) {
72
+ //#region src/toolbar/formatting-buttons.tsx
73
+ function BoldButton({ children, className, variant = "outline", size = "sm", ...props }) {
80
74
  const { editor } = useRichTextEditor();
81
- return /* @__PURE__ */ jsx(ToggleGroupItem, {
82
- "data-slot": "rich-text-editor-toggle-button",
83
- value: "bold",
75
+ const isActive = useEditorState({
76
+ editor,
77
+ selector: ({ editor: e }) => e?.isActive("bold") ?? false
78
+ });
79
+ return /* @__PURE__ */ jsx(Toggle, {
84
80
  "aria-label": "Bold",
81
+ pressed: !!isActive,
85
82
  disabled: editor ? !editor.can().chain().focus().toggleBold().run() : true,
86
- onClick: () => editor?.chain().focus().toggleBold().run(),
83
+ onPressedChange: () => editor?.chain().focus().toggleBold().run(),
84
+ variant,
85
+ size,
87
86
  className: cn("shadow-none", className),
88
87
  ...props,
89
- children: props.children ?? /* @__PURE__ */ jsx(Bold, {})
88
+ children: children ?? /* @__PURE__ */ jsx(Bold, {})
90
89
  });
91
90
  }
92
- function ItalicButton({ className, ...props }) {
91
+ function ItalicButton({ children, className, variant = "outline", size = "sm", ...props }) {
93
92
  const { editor } = useRichTextEditor();
94
- return /* @__PURE__ */ jsx(ToggleGroupItem, {
95
- "data-slot": "rich-text-editor-toggle-button",
96
- value: "italic",
93
+ const isActive = useEditorState({
94
+ editor,
95
+ selector: ({ editor: e }) => e?.isActive("italic") ?? false
96
+ });
97
+ return /* @__PURE__ */ jsx(Toggle, {
97
98
  "aria-label": "Italic",
99
+ pressed: !!isActive,
98
100
  disabled: editor ? !editor.can().chain().focus().toggleItalic().run() : true,
99
- onClick: () => editor?.chain().focus().toggleItalic().run(),
101
+ onPressedChange: () => editor?.chain().focus().toggleItalic().run(),
102
+ variant,
103
+ size,
100
104
  className: cn("shadow-none", className),
101
105
  ...props,
102
- children: props.children ?? /* @__PURE__ */ jsx(Italic, {})
106
+ children: children ?? /* @__PURE__ */ jsx(Italic, {})
103
107
  });
104
108
  }
105
- function StrikethroughButton({ className, ...props }) {
109
+ function StrikethroughButton({ children, className, variant = "outline", size = "sm", ...props }) {
106
110
  const { editor } = useRichTextEditor();
107
- return /* @__PURE__ */ jsx(ToggleGroupItem, {
108
- "data-slot": "rich-text-editor-toggle-button",
109
- value: "strike",
111
+ const isActive = useEditorState({
112
+ editor,
113
+ selector: ({ editor: e }) => e?.isActive("strike") ?? false
114
+ });
115
+ return /* @__PURE__ */ jsx(Toggle, {
110
116
  "aria-label": "Strikethrough",
117
+ pressed: !!isActive,
111
118
  disabled: editor ? !editor.can().chain().focus().toggleStrike().run() : true,
112
- onClick: () => editor?.chain().focus().toggleStrike().run(),
113
- className: cn("shadow-none", className),
114
- ...props,
115
- children: props.children ?? /* @__PURE__ */ jsx(Strikethrough, {})
116
- });
117
- }
118
- function CodeButton({ className, ...props }) {
119
- const { editor } = useRichTextEditor();
120
- return /* @__PURE__ */ jsx(ToggleGroupItem, {
121
- "data-slot": "rich-text-editor-toggle-button",
122
- value: "code",
123
- "aria-label": "Inline code",
124
- disabled: editor ? !editor.can().chain().focus().toggleCode().run() : true,
125
- onClick: () => editor?.chain().focus().toggleCode().run(),
119
+ onPressedChange: () => editor?.chain().focus().toggleStrike().run(),
120
+ variant,
121
+ size,
126
122
  className: cn("shadow-none", className),
127
123
  ...props,
128
- children: props.children ?? /* @__PURE__ */ jsx(Code, {})
124
+ children: children ?? /* @__PURE__ */ jsx(Strikethrough, {})
129
125
  });
130
126
  }
131
- function RichTextEditorFormattingGroup({ boldProps, italicProps, strikethroughProps, codeProps, items = ALL_FORMATTING_ITEMS, variant = "outline", size = "sm", ...props }) {
127
+ function CodeButton({ children, className, variant = "outline", size = "sm", ...props }) {
132
128
  const { editor } = useRichTextEditor();
133
- const visibleItems = new Set(items);
134
- const activeValue = useEditorState({
129
+ const isActive = useEditorState({
135
130
  editor,
136
- selector: ({ editor: currentEditor }) => {
137
- if (!currentEditor) return [];
138
- return ALL_FORMATTING_ITEMS.filter((format) => visibleItems.has(format) && currentEditor.isActive(format));
139
- }
131
+ selector: ({ editor: e }) => e?.isActive("code") ?? false
140
132
  });
141
- return /* @__PURE__ */ jsxs(ToggleGroup, {
142
- type: "multiple",
133
+ return /* @__PURE__ */ jsx(Toggle, {
134
+ "aria-label": "Inline code",
135
+ pressed: !!isActive,
136
+ disabled: editor ? !editor.can().chain().focus().toggleCode().run() : true,
137
+ onPressedChange: () => editor?.chain().focus().toggleCode().run(),
143
138
  variant,
144
139
  size,
145
- "aria-label": "Inline formatting",
146
- value: activeValue ?? [],
140
+ className: cn("shadow-none", className),
147
141
  ...props,
148
- children: [
149
- visibleItems.has("bold") && /* @__PURE__ */ jsx(BoldButton, { ...boldProps }),
150
- visibleItems.has("italic") && /* @__PURE__ */ jsx(ItalicButton, { ...italicProps }),
151
- visibleItems.has("strike") && /* @__PURE__ */ jsx(StrikethroughButton, { ...strikethroughProps }),
152
- visibleItems.has("code") && /* @__PURE__ */ jsx(CodeButton, { ...codeProps })
153
- ]
142
+ children: children ?? /* @__PURE__ */ jsx(Code, {})
154
143
  });
155
144
  }
156
145
 
157
146
  //#endregion
158
- //#region src/groups/heading-group.tsx
147
+ //#region src/toolbar/heading-buttons.tsx
159
148
  const ALL_HEADING_LEVELS = [
160
149
  1,
161
150
  2,
@@ -166,43 +155,72 @@ const HEADING_ICONS = {
166
155
  2: Heading2,
167
156
  3: Heading3
168
157
  };
169
- function HeadingButton({ className, level, ...props }) {
158
+ const HEADING_LABELS = {
159
+ 1: "Heading 1",
160
+ 2: "Heading 2",
161
+ 3: "Heading 3"
162
+ };
163
+ function HeadingButton({ level, children, className, variant = "outline", size = "sm", ...props }) {
170
164
  const { editor } = useRichTextEditor();
171
165
  const Icon = HEADING_ICONS[level];
172
- return /* @__PURE__ */ jsx(ToggleGroupItem, {
173
- "data-slot": "rich-text-editor-toggle-button",
174
- value: `heading-${level}`,
166
+ const isActive = useEditorState({
167
+ editor,
168
+ selector: ({ editor: e }) => e?.isActive("heading", { level }) ?? false
169
+ });
170
+ return /* @__PURE__ */ jsx(Toggle, {
175
171
  "aria-label": `Heading ${level}`,
172
+ pressed: !!isActive,
176
173
  disabled: editor ? !editor.can().chain().focus().toggleHeading({ level }).run() : true,
177
- onClick: () => editor?.chain().focus().toggleHeading({ level }).run(),
174
+ onPressedChange: () => editor?.chain().focus().toggleHeading({ level }).run(),
175
+ variant,
176
+ size,
178
177
  className: cn("shadow-none", className),
179
178
  ...props,
180
- children: props.children ?? /* @__PURE__ */ jsx(Icon, {})
179
+ children: children ?? /* @__PURE__ */ jsx(Icon, {})
181
180
  });
182
181
  }
183
- const headingItemLabelMap = {
184
- 1: "Heading 1",
185
- 2: "Heading 2",
186
- 3: "Heading 3"
187
- };
188
- function RichTextEditorHeadingGroup({ mode = "select", levels, heading1Props, heading2Props, heading3Props, includeParagraphOption = true, paragraphLabel = "Paragraph", selectPlaceholder = "Select heading", selectProps, selectTriggerProps, selectContentProps, variant = "outline", size = "sm", ...props }) {
182
+ function Heading1Button(props) {
183
+ return /* @__PURE__ */ jsx(HeadingButton, {
184
+ level: 1,
185
+ ...props
186
+ });
187
+ }
188
+ function Heading2Button(props) {
189
+ return /* @__PURE__ */ jsx(HeadingButton, {
190
+ level: 2,
191
+ ...props
192
+ });
193
+ }
194
+ function Heading3Button(props) {
195
+ return /* @__PURE__ */ jsx(HeadingButton, {
196
+ level: 3,
197
+ ...props
198
+ });
199
+ }
200
+ function RichTextEditorHeadingSelect({ levels, includeParagraphOption = true, paragraphLabel = "Paragraph", selectPlaceholder = "Select heading" }) {
189
201
  const { editor } = useRichTextEditor();
190
202
  const resolvedLevels = levels ?? ALL_HEADING_LEVELS;
191
203
  const visibleLevels = new Set(resolvedLevels);
192
- const headingPropsByLevel = {
193
- 1: heading1Props,
194
- 2: heading2Props,
195
- 3: heading3Props
196
- };
197
204
  const activeValue = useEditorState({
198
205
  editor,
199
- selector: ({ editor: currentEditor }) => {
200
- if (!currentEditor) return "";
201
- for (const level of ALL_HEADING_LEVELS) if (currentEditor.isActive("heading", { level })) return `heading-${level}`;
206
+ selector: ({ editor: e }) => {
207
+ if (!e) return "";
208
+ for (const level of ALL_HEADING_LEVELS) if (e.isActive("heading", { level })) return `heading-${level}`;
202
209
  return "";
203
210
  }
204
211
  });
205
- if (mode === "select") return /* @__PURE__ */ jsxs(Select, {
212
+ const paragraphItem = includeParagraphOption ? {
213
+ value: "paragraph",
214
+ label: paragraphLabel,
215
+ disabled: editor ? !editor.can().chain().focus().setParagraph().run() : true
216
+ } : null;
217
+ const headingItems = ALL_HEADING_LEVELS.filter((level) => visibleLevels.has(level)).map((level) => ({
218
+ value: `heading-${level}`,
219
+ label: HEADING_LABELS[level],
220
+ disabled: editor ? !editor.can().chain().focus().setHeading({ level }).run() : true
221
+ }));
222
+ const items = [...paragraphItem ? [paragraphItem] : [], ...headingItems];
223
+ return /* @__PURE__ */ jsxs(Select, {
206
224
  value: activeValue || (includeParagraphOption ? "paragraph" : void 0),
207
225
  onValueChange: (value) => {
208
226
  if (!editor) return;
@@ -213,132 +231,90 @@ function RichTextEditorHeadingGroup({ mode = "select", levels, heading1Props, he
213
231
  const level = Number(value.replace("heading-", ""));
214
232
  editor.chain().focus().setHeading({ level }).run();
215
233
  },
216
- ...selectProps,
217
234
  children: [/* @__PURE__ */ jsx(SelectTrigger, {
218
235
  "aria-label": "Heading levels",
219
236
  size: "sm",
220
237
  disabled: !editor,
221
238
  className: "shadow-none",
222
- ...selectTriggerProps,
223
239
  children: /* @__PURE__ */ jsx(SelectValue, { placeholder: selectPlaceholder })
224
- }), /* @__PURE__ */ jsxs(SelectContent, {
225
- ...selectContentProps,
226
- children: [includeParagraphOption && /* @__PURE__ */ jsx(SelectItem, {
227
- value: "paragraph",
228
- disabled: editor ? !editor.can().chain().focus().setParagraph().run() : true,
229
- children: paragraphLabel
230
- }), ALL_HEADING_LEVELS.filter((level) => visibleLevels.has(level)).map((level) => /* @__PURE__ */ jsx(SelectItem, {
231
- value: `heading-${level}`,
232
- disabled: editor ? !editor.can().chain().focus().setHeading({ level }).run() : true,
233
- children: headingItemLabelMap[level]
234
- }, level))]
235
- })]
236
- });
237
- return /* @__PURE__ */ jsx(ToggleGroup, {
238
- type: "single",
239
- variant,
240
- size,
241
- "aria-label": "Heading levels",
242
- value: activeValue ?? "",
243
- ...props,
244
- children: ALL_HEADING_LEVELS.filter((level) => visibleLevels.has(level)).map((level) => /* @__PURE__ */ jsx(HeadingButton, {
245
- level,
246
- ...headingPropsByLevel[level]
247
- }, level))
240
+ }), /* @__PURE__ */ jsx(SelectContent, { children: items.map((item) => /* @__PURE__ */ jsx(SelectItem, {
241
+ value: item.value,
242
+ disabled: item.disabled,
243
+ children: item.label
244
+ }, item.value)) })]
248
245
  });
249
246
  }
250
247
 
251
248
  //#endregion
252
- //#region src/groups/history-group.tsx
253
- function UndoButton({ className, ...props }) {
249
+ //#region src/toolbar/history-buttons.tsx
250
+ function UndoButton({ children, className, variant = "outline", size = "icon-sm", ...props }) {
254
251
  const { editor } = useRichTextEditor();
255
252
  return /* @__PURE__ */ jsx(Button, {
256
- "data-slot": "rich-text-editor-action-button",
257
253
  "aria-label": "Undo",
258
- variant: "outline",
259
- size: "icon-sm",
254
+ variant,
255
+ size,
260
256
  disabled: editor ? !editor.can().chain().focus().undo().run() : true,
261
257
  onClick: () => editor?.chain().focus().undo().run(),
262
258
  className: cn("shadow-none", className),
263
259
  ...props,
264
- children: props.children ?? /* @__PURE__ */ jsx(Undo2, {})
260
+ children: children ?? /* @__PURE__ */ jsx(Undo2, {})
265
261
  });
266
262
  }
267
- function RedoButton({ className, ...props }) {
263
+ function RedoButton({ children, className, variant = "outline", size = "icon-sm", ...props }) {
268
264
  const { editor } = useRichTextEditor();
269
265
  return /* @__PURE__ */ jsx(Button, {
270
- "data-slot": "rich-text-editor-action-button",
271
266
  "aria-label": "Redo",
272
- variant: "outline",
273
- size: "icon-sm",
267
+ variant,
268
+ size,
274
269
  disabled: editor ? !editor.can().chain().focus().redo().run() : true,
275
270
  onClick: () => editor?.chain().focus().redo().run(),
276
271
  className: cn("shadow-none", className),
277
272
  ...props,
278
- children: props.children ?? /* @__PURE__ */ jsx(Redo2, {})
279
- });
280
- }
281
- function RichTextEditorHistoryGroup({ undoProps, redoProps, items = ["undo", "redo"], ...props }) {
282
- const visibleItems = new Set(items);
283
- return /* @__PURE__ */ jsxs(ButtonGroup, {
284
- ...props,
285
- children: [visibleItems.has("undo") && /* @__PURE__ */ jsx(UndoButton, { ...undoProps }), visibleItems.has("redo") && /* @__PURE__ */ jsx(RedoButton, { ...redoProps })]
273
+ children: children ?? /* @__PURE__ */ jsx(Redo2, {})
286
274
  });
287
275
  }
288
276
 
289
277
  //#endregion
290
- //#region src/groups/list-group.tsx
291
- function BulletListButton({ className, ...props }) {
278
+ //#region src/toolbar/list-buttons.tsx
279
+ function BulletListButton({ children, className, variant = "outline", size = "sm", ...props }) {
292
280
  const { editor } = useRichTextEditor();
293
- return /* @__PURE__ */ jsx(ToggleGroupItem, {
294
- "data-slot": "rich-text-editor-toggle-button",
295
- value: "bullet-list",
281
+ const isActive = useEditorState({
282
+ editor,
283
+ selector: ({ editor: e }) => e?.isActive("bulletList") ?? false
284
+ });
285
+ return /* @__PURE__ */ jsx(Toggle, {
296
286
  "aria-label": "Bullet list",
287
+ pressed: !!isActive,
297
288
  disabled: editor ? !editor.can().chain().focus().toggleBulletList().run() : true,
298
- onClick: () => editor?.chain().focus().toggleBulletList().run(),
299
- className: cn("shadow-none", className),
300
- ...props,
301
- children: props.children ?? /* @__PURE__ */ jsx(List, {})
302
- });
303
- }
304
- function OrderedListButton({ className, ...props }) {
305
- const { editor } = useRichTextEditor();
306
- return /* @__PURE__ */ jsx(ToggleGroupItem, {
307
- "data-slot": "rich-text-editor-toggle-button",
308
- value: "ordered-list",
309
- "aria-label": "Ordered list",
310
- disabled: editor ? !editor.can().chain().focus().toggleOrderedList().run() : true,
311
- onClick: () => editor?.chain().focus().toggleOrderedList().run(),
289
+ onPressedChange: () => editor?.chain().focus().toggleBulletList().run(),
290
+ variant,
291
+ size,
312
292
  className: cn("shadow-none", className),
313
293
  ...props,
314
- children: props.children ?? /* @__PURE__ */ jsx(ListOrdered, {})
294
+ children: children ?? /* @__PURE__ */ jsx(List, {})
315
295
  });
316
296
  }
317
- function RichTextEditorListGroup({ bulletListProps, orderedListProps, items = ["bullet-list", "ordered-list"], variant = "outline", size = "sm", ...props }) {
297
+ function OrderedListButton({ children, className, variant = "outline", size = "sm", ...props }) {
318
298
  const { editor } = useRichTextEditor();
319
- const visibleItems = new Set(items);
320
- const activeValue = useEditorState({
299
+ const isActive = useEditorState({
321
300
  editor,
322
- selector: ({ editor: currentEditor }) => {
323
- if (!currentEditor) return "";
324
- if (currentEditor.isActive("bulletList")) return "bullet-list";
325
- if (currentEditor.isActive("orderedList")) return "ordered-list";
326
- return "";
327
- }
301
+ selector: ({ editor: e }) => e?.isActive("orderedList") ?? false
328
302
  });
329
- return /* @__PURE__ */ jsxs(ToggleGroup, {
330
- type: "single",
303
+ return /* @__PURE__ */ jsx(Toggle, {
304
+ "aria-label": "Ordered list",
305
+ pressed: !!isActive,
306
+ disabled: editor ? !editor.can().chain().focus().toggleOrderedList().run() : true,
307
+ onPressedChange: () => editor?.chain().focus().toggleOrderedList().run(),
331
308
  variant,
332
309
  size,
333
- "aria-label": "List type",
334
- value: activeValue ?? "",
310
+ className: cn("shadow-none", className),
335
311
  ...props,
336
- children: [visibleItems.has("bullet-list") && /* @__PURE__ */ jsx(BulletListButton, { ...bulletListProps }), visibleItems.has("ordered-list") && /* @__PURE__ */ jsx(OrderedListButton, { ...orderedListProps })]
312
+ children: children ?? /* @__PURE__ */ jsx(ListOrdered, {})
337
313
  });
338
314
  }
339
315
 
340
316
  //#endregion
341
- //#region src/toolbar.tsx
317
+ //#region src/toolbar/toolbar.tsx
342
318
  function RichTextEditorToolbar({ className, ...props }) {
343
319
  return /* @__PURE__ */ jsx("div", {
344
320
  "data-slot": "rich-text-editor-toolbar",
@@ -369,10 +345,20 @@ function RichTextEditorBuiltIn({ className, contentClassName, toolbarClassName,
369
345
  children: [/* @__PURE__ */ jsxs(RichTextEditorToolbar, {
370
346
  className: toolbarClassName,
371
347
  children: [
372
- (preset === "complete" || preset === "simple") && /* @__PURE__ */ jsx(RichTextEditorHistoryGroup, {}),
373
- preset !== "oneline" && /* @__PURE__ */ jsx(RichTextEditorHeadingGroup, { mode: "select" }),
374
- /* @__PURE__ */ jsx(RichTextEditorFormattingGroup, {}),
375
- preset === "complete" && /* @__PURE__ */ jsx(RichTextEditorListGroup, {})
348
+ (preset === "complete" || preset === "simple") && /* @__PURE__ */ jsxs(ButtonGroup, { children: [/* @__PURE__ */ jsx(UndoButton, {}), /* @__PURE__ */ jsx(RedoButton, {})] }),
349
+ preset === "simple" && /* @__PURE__ */ jsx(RichTextEditorHeadingSelect, {}),
350
+ preset === "complete" && /* @__PURE__ */ jsxs(ButtonGroup, { children: [
351
+ /* @__PURE__ */ jsx(Heading1Button, {}),
352
+ /* @__PURE__ */ jsx(Heading2Button, {}),
353
+ /* @__PURE__ */ jsx(Heading3Button, {})
354
+ ] }),
355
+ /* @__PURE__ */ jsxs(ButtonGroup, { children: [
356
+ /* @__PURE__ */ jsx(BoldButton, {}),
357
+ /* @__PURE__ */ jsx(ItalicButton, {}),
358
+ /* @__PURE__ */ jsx(StrikethroughButton, {}),
359
+ /* @__PURE__ */ jsx(CodeButton, {})
360
+ ] }),
361
+ preset === "complete" && /* @__PURE__ */ jsxs(ButtonGroup, { children: [/* @__PURE__ */ jsx(BulletListButton, {}), /* @__PURE__ */ jsx(OrderedListButton, {})] })
376
362
  ]
377
363
  }), /* @__PURE__ */ jsx(RichTextEditorContent, {
378
364
  className: contentClassName,
@@ -385,4 +371,4 @@ function RichTextEditorBuiltIn({ className, contentClassName, toolbarClassName,
385
371
  const RichTextEditorSimple = RichTextEditorBuiltIn;
386
372
 
387
373
  //#endregion
388
- export { RichTextEditor, RichTextEditorBuiltIn, RichTextEditorContent, RichTextEditorContext, RichTextEditorFormattingGroup, RichTextEditorHeadingGroup, RichTextEditorHistoryGroup, RichTextEditorListGroup, RichTextEditorSimple, RichTextEditorToolbar, useRichTextEditor };
374
+ export { BoldButton, BulletListButton, CodeButton, Heading1Button, Heading2Button, Heading3Button, ItalicButton, OrderedListButton, RedoButton, RichTextEditor, RichTextEditorBuiltIn, RichTextEditorContent, RichTextEditorContext, RichTextEditorHeadingSelect, RichTextEditorSimple, RichTextEditorToolbar, StrikethroughButton, UndoButton, useRichTextEditor };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@melv1c/rich-text-editor",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "A rich text editor component for React, built with TipTap and styled with Tailwind CSS.",
5
5
  "repository": {
6
6
  "type": "git",