@melv1c/rich-text-editor 0.0.0 → 1.0.0

package/dist/index.d.mts

@@ -1 +1,253 @@
-export { };
+import { Editor, EditorContent, useEditor } from "@tiptap/react";
+import { Button, ButtonGroup, Select, SelectContent, SelectTrigger, ToggleGroup, ToggleGroupItem } from "@melv1c/ui-core";
+import * as react from "react";
+import { ComponentProps, HTMLAttributes } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import StarterKit from "@tiptap/starter-kit";
+
+//#region src/content.d.ts
+type RichTextEditorContentProps = Omit<ComponentProps<typeof EditorContent>, 'editor'> & {
+  /**
+   * Minimum height of the editor content area.
+   * Accepts a number (treated as pixels) or any valid CSS size string.
+   * @default 180
+   */
+  minHeight?: number | string;
+  /**
+   * Maximum height of the editor content area. When set, the content area becomes
+   * scrollable once the content exceeds this height.
+   * Accepts a number (treated as pixels) or any valid CSS size string.
+   */
+  maxHeight?: number | string;
+};
+declare function RichTextEditorContent({
+  className,
+  minHeight,
+  maxHeight,
+  style,
+  ...props
+}: RichTextEditorContentProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/context.d.ts
+type RichTextEditorContextValue = {
+  editor: Editor | null;
+};
+declare const RichTextEditorContext: react.Context<RichTextEditorContextValue | null>;
+declare function useRichTextEditor(): RichTextEditorContextValue;
+//#endregion
+//#region src/editor.d.ts
+type RichTextEditorProps = HTMLAttributes<HTMLDivElement> & {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string, editor: Editor) => void;
+  editable?: boolean;
+  extensions?: Parameters<typeof useEditor>[0]['extensions'];
+  starterKit?: Parameters<typeof StarterKit.configure>[0];
+};
+declare function RichTextEditor({
+  children,
+  className,
+  value,
+  defaultValue,
+  onValueChange,
+  editable,
+  extensions,
+  starterKit,
+  ...props
+}: RichTextEditorProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/groups/formatting-group.d.ts
+type RichTextEditorToggleButtonProps$2 = Omit<ComponentProps<typeof ToggleGroupItem>, 'value'>;
+type RichTextEditorFormattingItem = 'bold' | 'italic' | 'strike' | 'code';
+type RichTextEditorFormattingValue = RichTextEditorFormattingItem[];
+declare function BoldButton({
+  className,
+  ...props
+}: RichTextEditorToggleButtonProps$2): react_jsx_runtime0.JSX.Element;
+declare function ItalicButton({
+  className,
+  ...props
+}: RichTextEditorToggleButtonProps$2): react_jsx_runtime0.JSX.Element;
+declare function StrikethroughButton({
+  className,
+  ...props
+}: RichTextEditorToggleButtonProps$2): react_jsx_runtime0.JSX.Element;
+declare function CodeButton({
+  className,
+  ...props
+}: RichTextEditorToggleButtonProps$2): react_jsx_runtime0.JSX.Element;
+type RichTextEditorToggleGroupProps$2 = Omit<ComponentProps<typeof ToggleGroup>, 'type' | 'value' | 'onValueChange'>;
+type RichTextEditorFormattingGroupProps = RichTextEditorToggleGroupProps$2 & {
+  boldProps?: ComponentProps<typeof BoldButton>;
+  italicProps?: ComponentProps<typeof ItalicButton>;
+  strikethroughProps?: ComponentProps<typeof StrikethroughButton>;
+  codeProps?: ComponentProps<typeof CodeButton>;
+  items?: RichTextEditorFormattingItem[];
+  defaultValue?: RichTextEditorFormattingValue;
+};
+declare function RichTextEditorFormattingGroup({
+  boldProps,
+  italicProps,
+  strikethroughProps,
+  codeProps,
+  items,
+  variant,
+  size,
+  ...props
+}: RichTextEditorFormattingGroupProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/groups/heading-group.d.ts
+type RichTextEditorToggleButtonProps$1 = Omit<ComponentProps<typeof ToggleGroupItem>, 'value'>;
+type RichTextEditorHeadingLevel = 1 | 2 | 3;
+type RichTextEditorHeadingMode = 'toggle' | 'select';
+type RichTextEditorHeadingValue = `heading-${RichTextEditorHeadingLevel}` | '';
+declare function Heading1Button({
+  className,
+  ...props
+}: RichTextEditorToggleButtonProps$1): react_jsx_runtime0.JSX.Element;
+declare function Heading2Button({
+  className,
+  ...props
+}: RichTextEditorToggleButtonProps$1): react_jsx_runtime0.JSX.Element;
+declare function Heading3Button({
+  className,
+  ...props
+}: RichTextEditorToggleButtonProps$1): react_jsx_runtime0.JSX.Element;
+type RichTextEditorToggleGroupProps$1 = Omit<ComponentProps<typeof ToggleGroup>, 'type' | 'value' | 'onValueChange'>;
+type RichTextEditorHeadingSelectProps = Omit<ComponentProps<typeof Select>, 'value' | 'onValueChange'>;
+type RichTextEditorHeadingGroupProps = RichTextEditorToggleGroupProps$1 & {
+  mode?: RichTextEditorHeadingMode;
+  levels?: RichTextEditorHeadingLevel[];
+  heading1Props?: ComponentProps<typeof Heading1Button>;
+  heading2Props?: ComponentProps<typeof Heading2Button>;
+  heading3Props?: ComponentProps<typeof Heading3Button>;
+  includeParagraphOption?: boolean;
+  paragraphLabel?: string;
+  selectPlaceholder?: string;
+  selectProps?: RichTextEditorHeadingSelectProps;
+  selectTriggerProps?: Omit<ComponentProps<typeof SelectTrigger>, 'children'>;
+  selectContentProps?: ComponentProps<typeof SelectContent>;
+  defaultValue?: RichTextEditorHeadingValue;
+};
+declare function RichTextEditorHeadingGroup({
+  mode,
+  levels,
+  heading1Props,
+  heading2Props,
+  heading3Props,
+  includeParagraphOption,
+  paragraphLabel,
+  selectPlaceholder,
+  selectProps,
+  selectTriggerProps,
+  selectContentProps,
+  variant,
+  size,
+  ...props
+}: RichTextEditorHeadingGroupProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/groups/history-group.d.ts
+type RichTextEditorActionButtonProps = ComponentProps<typeof Button>;
+type RichTextEditorHistoryItem = 'undo' | 'redo';
+declare function UndoButton({
+  className,
+  ...props
+}: RichTextEditorActionButtonProps): react_jsx_runtime0.JSX.Element;
+declare function RedoButton({
+  className,
+  ...props
+}: RichTextEditorActionButtonProps): react_jsx_runtime0.JSX.Element;
+type RichTextEditorHistoryGroupProps = ComponentProps<typeof ButtonGroup> & {
+  undoProps?: ComponentProps<typeof UndoButton>;
+  redoProps?: ComponentProps<typeof RedoButton>;
+  items?: RichTextEditorHistoryItem[];
+};
+declare function RichTextEditorHistoryGroup({
+  undoProps,
+  redoProps,
+  items,
+  ...props
+}: RichTextEditorHistoryGroupProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/groups/list-group.d.ts
+type RichTextEditorToggleButtonProps = Omit<ComponentProps<typeof ToggleGroupItem>, 'value'>;
+type RichTextEditorListValue = 'bullet-list' | 'ordered-list' | '';
+type RichTextEditorListItem = Exclude<RichTextEditorListValue, ''>;
+declare function BulletListButton({
+  className,
+  ...props
+}: RichTextEditorToggleButtonProps): react_jsx_runtime0.JSX.Element;
+declare function OrderedListButton({
+  className,
+  ...props
+}: RichTextEditorToggleButtonProps): react_jsx_runtime0.JSX.Element;
+type RichTextEditorToggleGroupProps = Omit<ComponentProps<typeof ToggleGroup>, 'type' | 'value' | 'onValueChange'>;
+type RichTextEditorListGroupProps = RichTextEditorToggleGroupProps & {
+  bulletListProps?: ComponentProps<typeof BulletListButton>;
+  orderedListProps?: ComponentProps<typeof OrderedListButton>;
+  items?: RichTextEditorListItem[];
+  defaultValue?: RichTextEditorListValue;
+};
+declare function RichTextEditorListGroup({
+  bulletListProps,
+  orderedListProps,
+  items,
+  variant,
+  size,
+  ...props
+}: RichTextEditorListGroupProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/built-in.d.ts
+/**
+ * Built-in editor presets:
+ * - `"minimal"`: Formatting controls (bold, italic, strike, code) + undo/redo
+ * - `"simple"` (default): Heading select + formatting + undo/redo
+ * - `"complete"`: Heading toggles + formatting + lists + undo/redo
+ * - `"oneline"`: No toolbar, single-line (Enter is blocked)
+ */
+type RichTextEditorPreset = 'minimal' | 'simple' | 'complete' | 'oneline';
+type RichTextEditorBuiltInProps = Omit<RichTextEditorProps, 'children'> & {
+  contentClassName?: string;
+  toolbarClassName?: string;
+  /**
+   * Selects a built-in toolbar / behaviour configuration.
+   * @default "complete"
+   */
+  preset?: RichTextEditorPreset;
+  /**
+   * Minimum height of the editor content area.
+   * Accepts a number (px) or any valid CSS size string.
+   * Forwarded to `RichTextEditorContent`.
+   */
+  minHeight?: RichTextEditorContentProps['minHeight'];
+  /**
+   * Maximum height of the editor content area. When set the content area becomes
+   * scrollable once the content exceeds this height.
+   * Accepts a number (px) or any valid CSS size string.
+   * Forwarded to `RichTextEditorContent`.
+   */
+  maxHeight?: RichTextEditorContentProps['maxHeight'];
+};
+declare function RichTextEditorBuiltIn({
+  className,
+  contentClassName,
+  toolbarClassName,
+  preset,
+  minHeight,
+  maxHeight,
+  extensions,
+  ...props
+}: RichTextEditorBuiltInProps): react_jsx_runtime0.JSX.Element;
+/** @deprecated Use `RichTextEditorBuiltIn` instead. */
+declare const RichTextEditorSimple: typeof RichTextEditorBuiltIn;
+/** @deprecated Use `RichTextEditorBuiltInProps` instead. */
+type RichTextEditorSimpleProps = RichTextEditorBuiltInProps;
+//#endregion
+//#region src/toolbar.d.ts
+type RichTextEditorToolbarProps = HTMLAttributes<HTMLDivElement>;
+declare function RichTextEditorToolbar({
+  className,
+  ...props
+}: RichTextEditorToolbarProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { RichTextEditor, RichTextEditorBuiltIn, RichTextEditorBuiltInProps, RichTextEditorContent, RichTextEditorContentProps, RichTextEditorContext, RichTextEditorContextValue, RichTextEditorFormattingGroup, RichTextEditorFormattingGroupProps, RichTextEditorHeadingGroup, RichTextEditorHeadingGroupProps, RichTextEditorHistoryGroup, RichTextEditorHistoryGroupProps, RichTextEditorListGroup, RichTextEditorListGroupProps, RichTextEditorPreset, RichTextEditorProps, RichTextEditorSimple, RichTextEditorSimpleProps, RichTextEditorToolbar, RichTextEditorToolbarProps, useRichTextEditor };

package/dist/index.mjs

@@ -1 +1,388 @@
-export {  };
+import { EditorContent, useEditor, useEditorState } from "@tiptap/react";
+import { Button, ButtonGroup, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, ToggleGroup, ToggleGroupItem, cn } from "@melv1c/ui-core";
+import { createContext, useContext, useEffect, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import StarterKit from "@tiptap/starter-kit";
+import { Bold, Code, Heading1, Heading2, Heading3, Italic, List, ListOrdered, Redo2, Strikethrough, Undo2 } from "lucide-react";
+import { Extension } from "@tiptap/core";
+
+//#region src/context.tsx
+const RichTextEditorContext = createContext(null);
+function useRichTextEditor() {
+	const context = useContext(RichTextEditorContext);
+	if (!context) throw new Error("useRichTextEditor must be used within RichTextEditor.");
+	return context;
+}
+
+//#endregion
+//#region src/content.tsx
+function toSize(value) {
+	if (value === void 0) return void 0;
+	return typeof value === "number" ? `${value}px` : value;
+}
+function RichTextEditorContent({ className, minHeight = 180, maxHeight, style, ...props }) {
+	const { editor } = useRichTextEditor();
+	const heightStyles = {
+		minHeight: toSize(minHeight),
+		maxHeight: toSize(maxHeight),
+		overflowY: maxHeight !== void 0 ? "auto" : void 0
+	};
+	return /* @__PURE__ */ jsx(EditorContent, {
+		"data-slot": "rich-text-editor-content",
+		editor,
+		className: cn("text-foreground [&_.ProseMirror]:px-2 [&_.ProseMirror]:py-1 [&_.ProseMirror]:outline-none [&_.ProseMirror_p.is-editor-empty:first-child::before]:text-muted-foreground [&_.ProseMirror_p.is-editor-empty:first-child::before]:pointer-events-none [&_.ProseMirror_p.is-editor-empty:first-child::before]:float-left [&_.ProseMirror_p.is-editor-empty:first-child::before]:h-0 [&_.ProseMirror_p.is-editor-empty:first-child::before]:content-[attr(data-placeholder)]", className),
+		style: {
+			...heightStyles,
+			...style
+		},
+		...props
+	});
+}
+
+//#endregion
+//#region src/editor.tsx
+function RichTextEditor({ children, className, value, defaultValue, onValueChange, editable = true, extensions, starterKit, ...props }) {
+	const mergedExtensions = useMemo(() => [StarterKit.configure(starterKit ?? {}), ...extensions ?? []], [extensions, starterKit]);
+	const editor = useEditor({
+		extensions: mergedExtensions,
+		editable,
+		content: value ?? defaultValue ?? "",
+		onUpdate({ editor: currentEditor }) {
+			onValueChange?.(currentEditor.getHTML(), currentEditor);
+		}
+	}, [mergedExtensions, editable]);
+	useEffect(() => {
+		if (!editor || value === void 0) return;
+		if (editor.getHTML() === value) return;
+		editor.commands.setContent(value, { emitUpdate: false });
+	}, [editor, value]);
+	const contextValue = useMemo(() => ({ editor }), [editor]);
+	return /* @__PURE__ */ jsx(RichTextEditorContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "rich-text-editor",
+			className: cn("bg-background border-border rounded-lg border", className),
+			...props,
+			children
+		})
+	});
+}
+
+//#endregion
+//#region src/groups/formatting-group.tsx
+const ALL_FORMATTING_ITEMS = [
+	"bold",
+	"italic",
+	"strike",
+	"code"
+];
+function BoldButton({ className, ...props }) {
+	const { editor } = useRichTextEditor();
+	return /* @__PURE__ */ jsx(ToggleGroupItem, {
+		"data-slot": "rich-text-editor-toggle-button",
+		value: "bold",
+		"aria-label": "Bold",
+		disabled: editor ? !editor.can().chain().focus().toggleBold().run() : true,
+		onClick: () => editor?.chain().focus().toggleBold().run(),
+		className: cn("shadow-none", className),
+		...props,
+		children: props.children ?? /* @__PURE__ */ jsx(Bold, {})
+	});
+}
+function ItalicButton({ className, ...props }) {
+	const { editor } = useRichTextEditor();
+	return /* @__PURE__ */ jsx(ToggleGroupItem, {
+		"data-slot": "rich-text-editor-toggle-button",
+		value: "italic",
+		"aria-label": "Italic",
+		disabled: editor ? !editor.can().chain().focus().toggleItalic().run() : true,
+		onClick: () => editor?.chain().focus().toggleItalic().run(),
+		className: cn("shadow-none", className),
+		...props,
+		children: props.children ?? /* @__PURE__ */ jsx(Italic, {})
+	});
+}
+function StrikethroughButton({ className, ...props }) {
+	const { editor } = useRichTextEditor();
+	return /* @__PURE__ */ jsx(ToggleGroupItem, {
+		"data-slot": "rich-text-editor-toggle-button",
+		value: "strike",
+		"aria-label": "Strikethrough",
+		disabled: editor ? !editor.can().chain().focus().toggleStrike().run() : true,
+		onClick: () => editor?.chain().focus().toggleStrike().run(),
+		className: cn("shadow-none", className),
+		...props,
+		children: props.children ?? /* @__PURE__ */ jsx(Strikethrough, {})
+	});
+}
+function CodeButton({ className, ...props }) {
+	const { editor } = useRichTextEditor();
+	return /* @__PURE__ */ jsx(ToggleGroupItem, {
+		"data-slot": "rich-text-editor-toggle-button",
+		value: "code",
+		"aria-label": "Inline code",
+		disabled: editor ? !editor.can().chain().focus().toggleCode().run() : true,
+		onClick: () => editor?.chain().focus().toggleCode().run(),
+		className: cn("shadow-none", className),
+		...props,
+		children: props.children ?? /* @__PURE__ */ jsx(Code, {})
+	});
+}
+function RichTextEditorFormattingGroup({ boldProps, italicProps, strikethroughProps, codeProps, items = ALL_FORMATTING_ITEMS, variant = "outline", size = "sm", ...props }) {
+	const { editor } = useRichTextEditor();
+	const visibleItems = new Set(items);
+	const activeValue = useEditorState({
+		editor,
+		selector: ({ editor: currentEditor }) => {
+			if (!currentEditor) return [];
+			return ALL_FORMATTING_ITEMS.filter((format) => visibleItems.has(format) && currentEditor.isActive(format));
+		}
+	});
+	return /* @__PURE__ */ jsxs(ToggleGroup, {
+		type: "multiple",
+		variant,
+		size,
+		"aria-label": "Inline formatting",
+		value: activeValue ?? [],
+		...props,
+		children: [
+			visibleItems.has("bold") && /* @__PURE__ */ jsx(BoldButton, { ...boldProps }),
+			visibleItems.has("italic") && /* @__PURE__ */ jsx(ItalicButton, { ...italicProps }),
+			visibleItems.has("strike") && /* @__PURE__ */ jsx(StrikethroughButton, { ...strikethroughProps }),
+			visibleItems.has("code") && /* @__PURE__ */ jsx(CodeButton, { ...codeProps })
+		]
+	});
+}
+
+//#endregion
+//#region src/groups/heading-group.tsx
+const ALL_HEADING_LEVELS = [
+	1,
+	2,
+	3
+];
+const HEADING_ICONS = {
+	1: Heading1,
+	2: Heading2,
+	3: Heading3
+};
+function HeadingButton({ className, level, ...props }) {
+	const { editor } = useRichTextEditor();
+	const Icon = HEADING_ICONS[level];
+	return /* @__PURE__ */ jsx(ToggleGroupItem, {
+		"data-slot": "rich-text-editor-toggle-button",
+		value: `heading-${level}`,
+		"aria-label": `Heading ${level}`,
+		disabled: editor ? !editor.can().chain().focus().toggleHeading({ level }).run() : true,
+		onClick: () => editor?.chain().focus().toggleHeading({ level }).run(),
+		className: cn("shadow-none", className),
+		...props,
+		children: props.children ?? /* @__PURE__ */ jsx(Icon, {})
+	});
+}
+const headingItemLabelMap = {
+	1: "Heading 1",
+	2: "Heading 2",
+	3: "Heading 3"
+};
+function RichTextEditorHeadingGroup({ mode = "select", levels, heading1Props, heading2Props, heading3Props, includeParagraphOption = true, paragraphLabel = "Paragraph", selectPlaceholder = "Select heading", selectProps, selectTriggerProps, selectContentProps, variant = "outline", size = "sm", ...props }) {
+	const { editor } = useRichTextEditor();
+	const resolvedLevels = levels ?? ALL_HEADING_LEVELS;
+	const visibleLevels = new Set(resolvedLevels);
+	const headingPropsByLevel = {
+		1: heading1Props,
+		2: heading2Props,
+		3: heading3Props
+	};
+	const activeValue = useEditorState({
+		editor,
+		selector: ({ editor: currentEditor }) => {
+			if (!currentEditor) return "";
+			for (const level of ALL_HEADING_LEVELS) if (currentEditor.isActive("heading", { level })) return `heading-${level}`;
+			return "";
+		}
+	});
+	if (mode === "select") return /* @__PURE__ */ jsxs(Select, {
+		value: activeValue || (includeParagraphOption ? "paragraph" : void 0),
+		onValueChange: (value) => {
+			if (!editor) return;
+			if (value === "paragraph") {
+				editor.chain().focus().setParagraph().run();
+				return;
+			}
+			const level = Number(value.replace("heading-", ""));
+			editor.chain().focus().setHeading({ level }).run();
+		},
+		...selectProps,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			"aria-label": "Heading levels",
+			size: "sm",
+			disabled: !editor,
+			className: "shadow-none",
+			...selectTriggerProps,
+			children: /* @__PURE__ */ jsx(SelectValue, { placeholder: selectPlaceholder })
+		}), /* @__PURE__ */ jsxs(SelectContent, {
+			...selectContentProps,
+			children: [includeParagraphOption && /* @__PURE__ */ jsx(SelectItem, {
+				value: "paragraph",
+				disabled: editor ? !editor.can().chain().focus().setParagraph().run() : true,
+				children: paragraphLabel
+			}), ALL_HEADING_LEVELS.filter((level) => visibleLevels.has(level)).map((level) => /* @__PURE__ */ jsx(SelectItem, {
+				value: `heading-${level}`,
+				disabled: editor ? !editor.can().chain().focus().setHeading({ level }).run() : true,
+				children: headingItemLabelMap[level]
+			}, level))]
+		})]
+	});
+	return /* @__PURE__ */ jsx(ToggleGroup, {
+		type: "single",
+		variant,
+		size,
+		"aria-label": "Heading levels",
+		value: activeValue ?? "",
+		...props,
+		children: ALL_HEADING_LEVELS.filter((level) => visibleLevels.has(level)).map((level) => /* @__PURE__ */ jsx(HeadingButton, {
+			level,
+			...headingPropsByLevel[level]
+		}, level))
+	});
+}
+
+//#endregion
+//#region src/groups/history-group.tsx
+function UndoButton({ className, ...props }) {
+	const { editor } = useRichTextEditor();
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "rich-text-editor-action-button",
+		"aria-label": "Undo",
+		variant: "outline",
+		size: "icon-sm",
+		disabled: editor ? !editor.can().chain().focus().undo().run() : true,
+		onClick: () => editor?.chain().focus().undo().run(),
+		className: cn("shadow-none", className),
+		...props,
+		children: props.children ?? /* @__PURE__ */ jsx(Undo2, {})
+	});
+}
+function RedoButton({ className, ...props }) {
+	const { editor } = useRichTextEditor();
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "rich-text-editor-action-button",
+		"aria-label": "Redo",
+		variant: "outline",
+		size: "icon-sm",
+		disabled: editor ? !editor.can().chain().focus().redo().run() : true,
+		onClick: () => editor?.chain().focus().redo().run(),
+		className: cn("shadow-none", className),
+		...props,
+		children: props.children ?? /* @__PURE__ */ jsx(Redo2, {})
+	});
+}
+function RichTextEditorHistoryGroup({ undoProps, redoProps, items = ["undo", "redo"], ...props }) {
+	const visibleItems = new Set(items);
+	return /* @__PURE__ */ jsxs(ButtonGroup, {
+		...props,
+		children: [visibleItems.has("undo") && /* @__PURE__ */ jsx(UndoButton, { ...undoProps }), visibleItems.has("redo") && /* @__PURE__ */ jsx(RedoButton, { ...redoProps })]
+	});
+}
+
+//#endregion
+//#region src/groups/list-group.tsx
+function BulletListButton({ className, ...props }) {
+	const { editor } = useRichTextEditor();
+	return /* @__PURE__ */ jsx(ToggleGroupItem, {
+		"data-slot": "rich-text-editor-toggle-button",
+		value: "bullet-list",
+		"aria-label": "Bullet list",
+		disabled: editor ? !editor.can().chain().focus().toggleBulletList().run() : true,
+		onClick: () => editor?.chain().focus().toggleBulletList().run(),
+		className: cn("shadow-none", className),
+		...props,
+		children: props.children ?? /* @__PURE__ */ jsx(List, {})
+	});
+}
+function OrderedListButton({ className, ...props }) {
+	const { editor } = useRichTextEditor();
+	return /* @__PURE__ */ jsx(ToggleGroupItem, {
+		"data-slot": "rich-text-editor-toggle-button",
+		value: "ordered-list",
+		"aria-label": "Ordered list",
+		disabled: editor ? !editor.can().chain().focus().toggleOrderedList().run() : true,
+		onClick: () => editor?.chain().focus().toggleOrderedList().run(),
+		className: cn("shadow-none", className),
+		...props,
+		children: props.children ?? /* @__PURE__ */ jsx(ListOrdered, {})
+	});
+}
+function RichTextEditorListGroup({ bulletListProps, orderedListProps, items = ["bullet-list", "ordered-list"], variant = "outline", size = "sm", ...props }) {
+	const { editor } = useRichTextEditor();
+	const visibleItems = new Set(items);
+	const activeValue = useEditorState({
+		editor,
+		selector: ({ editor: currentEditor }) => {
+			if (!currentEditor) return "";
+			if (currentEditor.isActive("bulletList")) return "bullet-list";
+			if (currentEditor.isActive("orderedList")) return "ordered-list";
+			return "";
+		}
+	});
+	return /* @__PURE__ */ jsxs(ToggleGroup, {
+		type: "single",
+		variant,
+		size,
+		"aria-label": "List type",
+		value: activeValue ?? "",
+		...props,
+		children: [visibleItems.has("bullet-list") && /* @__PURE__ */ jsx(BulletListButton, { ...bulletListProps }), visibleItems.has("ordered-list") && /* @__PURE__ */ jsx(OrderedListButton, { ...orderedListProps })]
+	});
+}
+
+//#endregion
+//#region src/toolbar.tsx
+function RichTextEditorToolbar({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "rich-text-editor-toolbar",
+		className: cn("border-border flex flex-wrap items-center gap-2 border-b p-2", className),
+		...props
+	});
+}
+
+//#endregion
+//#region src/built-in.tsx
+/** Blocks Enter / Shift-Enter so the editor stays on a single line. */
+const OneLinerExtension = Extension.create({
+	name: "oneLiner",
+	addKeyboardShortcuts() {
+		return {
+			Enter: () => true,
+			"Shift-Enter": () => true
+		};
+	}
+});
+function RichTextEditorBuiltIn({ className, contentClassName, toolbarClassName, preset = "complete", minHeight, maxHeight, extensions, ...props }) {
+	const isOneline = preset === "oneline";
+	const resolvedMinHeight = minHeight ?? (isOneline ? 0 : 180);
+	return /* @__PURE__ */ jsxs(RichTextEditor, {
+		className,
+		extensions: useMemo(() => isOneline ? [OneLinerExtension, ...extensions ?? []] : extensions, [isOneline, extensions]),
+		...props,
+		children: [/* @__PURE__ */ jsxs(RichTextEditorToolbar, {
+			className: toolbarClassName,
+			children: [
+				(preset === "complete" || preset === "simple") && /* @__PURE__ */ jsx(RichTextEditorHistoryGroup, {}),
+				preset !== "oneline" && /* @__PURE__ */ jsx(RichTextEditorHeadingGroup, { mode: "select" }),
+				/* @__PURE__ */ jsx(RichTextEditorFormattingGroup, {}),
+				preset === "complete" && /* @__PURE__ */ jsx(RichTextEditorListGroup, {})
+			]
+		}), /* @__PURE__ */ jsx(RichTextEditorContent, {
+			className: contentClassName,
+			minHeight: resolvedMinHeight,
+			maxHeight
+		})]
+	});
+}
+/** @deprecated Use `RichTextEditorBuiltIn` instead. */
+const RichTextEditorSimple = RichTextEditorBuiltIn;
+
+//#endregion
+export { RichTextEditor, RichTextEditorBuiltIn, RichTextEditorContent, RichTextEditorContext, RichTextEditorFormattingGroup, RichTextEditorHeadingGroup, RichTextEditorHistoryGroup, RichTextEditorListGroup, RichTextEditorSimple, RichTextEditorToolbar, useRichTextEditor };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@melv1c/rich-text-editor",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "description": "A rich text editor component for React, built with TipTap and styled with Tailwind CSS.",
   "repository": {
     "type": "git",
@@ -11,10 +11,10 @@
   ],
   "type": "module",
   "main": "./dist/index.mjs",
-  "types": "./src/index.ts",
+  "types": "./dist/index.d.mts",
   "exports": {
     ".": {
-      "types": "./src/index.ts",
+      "types": "./dist/index.d.mts",
       "import": "./dist/index.mjs",
       "default": "./dist/index.mjs"
     }
@@ -26,7 +26,12 @@
     "build": "tsdown",
     "dev": "tsdown --watch --no-clean"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@tiptap/core": "^3.20.0",
+    "@tiptap/react": "^3.7.2",
+    "@tiptap/starter-kit": "^3.7.2",
+    "lucide-react": "^0.513.0"
+  },
   "devDependencies": {
     "@types/node": "^25.2.3",
     "@types/react": "^19.2.14",
@@ -37,7 +42,7 @@
     "typescript": "~5.9.3"
   },
   "peerDependencies": {
-    "@melv1c/ui-core": ">=1.1.0",
+    "@melv1c/ui-core": ">=1.1.2",
     "react": ">=19",
     "react-dom": ">=19",
     "tailwindcss": "^4.1.17",