@pixpilot/shadcn-ui 0.4.0 → 0.4.1

package/dist/rich-text-editor/RichTextEditor.js

@@ -1 +1,126 @@
-import{predefinedToolbarOptions as e}from"./predefined-toolbar-options.js";import{Button as t,Tooltip as n,TooltipContent as r,TooltipTrigger as i,cn as a}from"@pixpilot/shadcn";import o from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{EditorContent as l,useEditor as u}from"@tiptap/react";import d from"@tiptap/starter-kit";const f=({onClick:e,isActive:a,disabled:o,children:l,tooltip:u})=>c(n,{children:[s(i,{asChild:!0,children:s(t,{type:`button`,variant:a?`default`:`ghost`,size:`sm`,onMouseDown:e=>{e.preventDefault()},onClick:e,disabled:o,className:`h-8 w-8 p-0`,children:l})}),s(r,{children:s(`p`,{children:u})})]}),p=[],m=[`bold`,`italic`,`underline`,`strike`,`code`,`|`,`heading1`,`heading2`,`heading3`,`|`,`bulletList`,`orderedList`,`|`,`blockquote`,`codeBlock`],h=({content:t,onChange:n,extensions:r=p,editable:i=!0,className:h,contentClassName:g,showToolbar:_=!0,toolbarOptions:v=m,editorProps:y})=>{let[,b]=o.useReducer(e=>e+1,0),x={attributes:{class:a(`min-h-[200px] p-4 text-sm leading-relaxed focus:outline-none`,`[&_h1]:text-3xl [&_h1]:font-bold [&_h1]:leading-tight [&_h1]:my-2`,`[&_h2]:text-2xl [&_h2]:font-bold [&_h2]:leading-tight [&_h2]:my-2`,`[&_h3]:text-xl [&_h3]:font-bold [&_h3]:leading-tight [&_h3]:my-2`,`[&_p]:my-2`,`[&_ul]:list-disc [&_ul]:pl-6 [&_ul]:my-2`,`[&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:my-2`,`[&_blockquote]:border-l-4 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:my-2 [&_blockquote]:italic`,`[&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-[0.875em] [&_code]:font-mono`,`[&_pre]:bg-muted [&_pre]:p-4 [&_pre]:rounded [&_pre]:overflow-x-auto [&_pre]:font-mono`,g)}},S={...x,...y,attributes:{...x.attributes,...y?.attributes,class:a(x.attributes.class,y?.attributes?.class)}},C=u({extensions:[d].concat(r),content:t,editable:i,onUpdate:({editor:e})=>{n?.(e.getHTML())},editorProps:S});if(o.useEffect(()=>{if(C==null)return()=>{};let e=()=>{b()};return C.on(`selectionUpdate`,e),C.on(`transaction`,e),C.on(`focus`,e),C.on(`blur`,e),()=>{C.off(`selectionUpdate`,e),C.off(`transaction`,e),C.off(`focus`,e),C.off(`blur`,e)}},[C]),C==null)return c(`div`,{className:a(`border rounded-md bg-background`,h),children:[_&&s(`div`,{className:`flex flex-wrap items-center gap-1 border-b p-2 h-10`}),s(`div`,{className:`min-h-[200px] p-4 text-sm leading-relaxed`,children:`Loading editor...`})]});let w=e=>{try{e()}catch{}};return c(`div`,{className:a(`border rounded-md bg-background`,h),children:[(()=>{if(!_)return null;let t=C.isFocused;return s(`div`,{className:`flex flex-wrap items-center gap-1 border-b p-2`,children:v.map((n,r)=>{if(n===`|`)return s(`div`,{className:`mx-1 h-6 w-px bg-border`},`separator-${r}`);if(typeof n==`string`){let r=e[n];return r?s(f,{onClick:()=>w(()=>r.onClick(C)),isActive:t&&(r.isActive?.(C)??!1),tooltip:r.tooltip,children:r.icon},n):null}let i=n;return s(f,{onClick:()=>w(()=>i.onClick(C)),isActive:t&&(i.isActive?.(C)??!1),tooltip:i.tooltip,children:i.icon},`custom-${r}-${i.tooltip}`)})})})(),s(l,{editor:C})]})};h.displayName=`RichTextEditor`;export{h as RichTextEditor};
+import { predefinedToolbarOptions } from "./predefined-toolbar-options.js";
+import { Button, Tooltip, TooltipContent, TooltipTrigger, cn } from "@pixpilot/shadcn";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+
+//#region src/rich-text-editor/RichTextEditor.tsx
+const ToolbarButton = ({ onClick, isActive, disabled, children, tooltip }) => /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+	asChild: true,
+	children: /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: isActive ? "default" : "ghost",
+		size: "sm",
+		onMouseDown: (event) => {
+			event.preventDefault();
+		},
+		onClick,
+		disabled,
+		className: "h-8 w-8 p-0",
+		children
+	})
+}), /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: tooltip }) })] });
+const defaultExtensions = [];
+const defaultToolbarOptions = [
+	"bold",
+	"italic",
+	"underline",
+	"strike",
+	"code",
+	"|",
+	"heading1",
+	"heading2",
+	"heading3",
+	"|",
+	"bulletList",
+	"orderedList",
+	"|",
+	"blockquote",
+	"codeBlock"
+];
+const RichTextEditor = ({ content, onChange, extensions = defaultExtensions, editable = true, className, contentClassName, showToolbar = true, toolbarOptions = defaultToolbarOptions, editorProps: customEditorProps }) => {
+	const [, forceRender] = React.useReducer((x) => x + 1, 0);
+	const defaultEditorProps = { attributes: { class: cn("min-h-[200px] p-4 text-sm leading-relaxed focus:outline-none", "[&_h1]:text-3xl [&_h1]:font-bold [&_h1]:leading-tight [&_h1]:my-2", "[&_h2]:text-2xl [&_h2]:font-bold [&_h2]:leading-tight [&_h2]:my-2", "[&_h3]:text-xl [&_h3]:font-bold [&_h3]:leading-tight [&_h3]:my-2", "[&_p]:my-2", "[&_ul]:list-disc [&_ul]:pl-6 [&_ul]:my-2", "[&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:my-2", "[&_blockquote]:border-l-4 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:my-2 [&_blockquote]:italic", "[&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-[0.875em] [&_code]:font-mono", "[&_pre]:bg-muted [&_pre]:p-4 [&_pre]:rounded [&_pre]:overflow-x-auto [&_pre]:font-mono", contentClassName) } };
+	const mergedEditorProps = {
+		...defaultEditorProps,
+		...customEditorProps,
+		attributes: {
+			...defaultEditorProps.attributes,
+			...customEditorProps?.attributes,
+			class: cn(defaultEditorProps.attributes.class, (customEditorProps?.attributes)?.class)
+		}
+	};
+	const editorInstance = useEditor({
+		extensions: [StarterKit].concat(extensions),
+		content,
+		editable,
+		onUpdate: ({ editor: updatedEditor }) => {
+			onChange?.(updatedEditor.getHTML());
+		},
+		editorProps: mergedEditorProps
+	});
+	React.useEffect(() => {
+		if (editorInstance == null) return () => {};
+		const rerender = () => {
+			forceRender();
+		};
+		editorInstance.on("selectionUpdate", rerender);
+		editorInstance.on("transaction", rerender);
+		editorInstance.on("focus", rerender);
+		editorInstance.on("blur", rerender);
+		return () => {
+			editorInstance.off("selectionUpdate", rerender);
+			editorInstance.off("transaction", rerender);
+			editorInstance.off("focus", rerender);
+			editorInstance.off("blur", rerender);
+		};
+	}, [editorInstance]);
+	if (editorInstance == null) return /* @__PURE__ */ jsxs("div", {
+		className: cn("border rounded-md bg-background", className),
+		children: [showToolbar && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1 border-b p-2 h-10" }), /* @__PURE__ */ jsx("div", {
+			className: "min-h-[200px] p-4 text-sm leading-relaxed",
+			children: "Loading editor..."
+		})]
+	});
+	const handleCommand = (commandFn) => {
+		try {
+			commandFn();
+		} catch {}
+	};
+	const renderToolbar = () => {
+		if (!showToolbar) return null;
+		const isEditorFocused = editorInstance.isFocused;
+		return /* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap items-center gap-1 border-b p-2",
+			children: toolbarOptions.map((option, index) => {
+				if (option === "|") return /* @__PURE__ */ jsx("div", { className: "mx-1 h-6 w-px bg-border" }, `separator-${index}`);
+				if (typeof option === "string") {
+					const predefinedOption = predefinedToolbarOptions[option];
+					if (!predefinedOption) return null;
+					return /* @__PURE__ */ jsx(ToolbarButton, {
+						onClick: () => handleCommand(() => predefinedOption.onClick(editorInstance)),
+						isActive: isEditorFocused && (predefinedOption.isActive?.(editorInstance) ?? false),
+						tooltip: predefinedOption.tooltip,
+						children: predefinedOption.icon
+					}, option);
+				}
+				const customOption = option;
+				return /* @__PURE__ */ jsx(ToolbarButton, {
+					onClick: () => handleCommand(() => customOption.onClick(editorInstance)),
+					isActive: isEditorFocused && (customOption.isActive?.(editorInstance) ?? false),
+					tooltip: customOption.tooltip,
+					children: customOption.icon
+				}, `custom-${index}-${customOption.tooltip}`);
+			})
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("border rounded-md bg-background", className),
+		children: [renderToolbar(), /* @__PURE__ */ jsx(EditorContent, { editor: editorInstance })]
+	});
+};
+RichTextEditor.displayName = "RichTextEditor";
+
+//#endregion
+export { RichTextEditor };

package/dist/rich-text-editor/index.cjs

@@ -1 +1,2 @@
-const e=require(`../_virtual/rolldown_runtime.cjs`),t=require(`./RichTextEditor.cjs`);
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_RichTextEditor = require('./RichTextEditor.cjs');

package/dist/rich-text-editor/index.js

@@ -1 +1 @@
-import{RichTextEditor as e}from"./RichTextEditor.js";
+import { RichTextEditor } from "./RichTextEditor.js";

package/dist/rich-text-editor/predefined-toolbar-options.cjs

@@ -1 +1,84 @@
-const e=require(`../_virtual/rolldown_runtime.cjs`);let t=require(`lucide-react`);t=e.__toESM(t);let n=require(`react/jsx-runtime`);n=e.__toESM(n);const r={bold:{icon:(0,n.jsx)(t.Bold,{className:`h-4 w-4`}),tooltip:`Bold`,onClick:e=>e.chain().focus().toggleBold().run(),isActive:e=>e.isActive(`bold`)},italic:{icon:(0,n.jsx)(t.Italic,{className:`h-4 w-4`}),tooltip:`Italic`,onClick:e=>e.chain().focus().toggleItalic().run(),isActive:e=>e.isActive(`italic`)},underline:{icon:(0,n.jsx)(t.Underline,{className:`h-4 w-4`}),tooltip:`Underline`,onClick:e=>e.chain().focus().toggleUnderline().run(),isActive:e=>e.isActive(`underline`)},strike:{icon:(0,n.jsx)(t.Strikethrough,{className:`h-4 w-4`}),tooltip:`Strikethrough`,onClick:e=>e.chain().focus().toggleStrike().run(),isActive:e=>e.isActive(`strike`)},code:{icon:(0,n.jsx)(t.Code,{className:`h-4 w-4`}),tooltip:`Inline Code`,onClick:e=>e.chain().focus().toggleCode().run(),isActive:e=>e.isActive(`code`)},heading1:{icon:(0,n.jsx)(t.Heading1,{className:`h-4 w-4`}),tooltip:`Heading 1`,onClick:e=>e.chain().focus().toggleHeading({level:1}).run(),isActive:e=>e.isActive(`heading`,{level:1})},heading2:{icon:(0,n.jsx)(t.Heading2,{className:`h-4 w-4`}),tooltip:`Heading 2`,onClick:e=>e.chain().focus().toggleHeading({level:2}).run(),isActive:e=>e.isActive(`heading`,{level:2})},heading3:{icon:(0,n.jsx)(t.Heading3,{className:`h-4 w-4`}),tooltip:`Heading 3`,onClick:e=>e.chain().focus().toggleHeading({level:3}).run(),isActive:e=>e.isActive(`heading`,{level:3})},bulletList:{icon:(0,n.jsx)(t.List,{className:`h-4 w-4`}),tooltip:`Bullet List`,onClick:e=>e.chain().focus().toggleBulletList().run(),isActive:e=>e.isActive(`bulletList`)},orderedList:{icon:(0,n.jsx)(t.ListOrdered,{className:`h-4 w-4`}),tooltip:`Ordered List`,onClick:e=>e.chain().focus().toggleOrderedList().run(),isActive:e=>e.isActive(`orderedList`)},blockquote:{icon:(0,n.jsx)(t.Quote,{className:`h-4 w-4`}),tooltip:`Blockquote`,onClick:e=>e.chain().focus().toggleBlockquote().run(),isActive:e=>e.isActive(`blockquote`)},codeBlock:{icon:(0,n.jsx)(t.Code2,{className:`h-4 w-4`}),tooltip:`Code Block`,onClick:e=>e.chain().focus().toggleCodeBlock().run(),isActive:e=>e.isActive(`codeBlock`)}};exports.predefinedToolbarOptions=r;
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let lucide_react = require("lucide-react");
+lucide_react = require_rolldown_runtime.__toESM(lucide_react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/rich-text-editor/predefined-toolbar-options.tsx
+const predefinedToolbarOptions = {
+	bold: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Bold, { className: "h-4 w-4" }),
+		tooltip: "Bold",
+		onClick: (editor) => editor.chain().focus().toggleBold().run(),
+		isActive: (editor) => editor.isActive("bold")
+	},
+	italic: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Italic, { className: "h-4 w-4" }),
+		tooltip: "Italic",
+		onClick: (editor) => editor.chain().focus().toggleItalic().run(),
+		isActive: (editor) => editor.isActive("italic")
+	},
+	underline: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Underline, { className: "h-4 w-4" }),
+		tooltip: "Underline",
+		onClick: (editor) => editor.chain().focus().toggleUnderline().run(),
+		isActive: (editor) => editor.isActive("underline")
+	},
+	strike: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Strikethrough, { className: "h-4 w-4" }),
+		tooltip: "Strikethrough",
+		onClick: (editor) => editor.chain().focus().toggleStrike().run(),
+		isActive: (editor) => editor.isActive("strike")
+	},
+	code: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Code, { className: "h-4 w-4" }),
+		tooltip: "Inline Code",
+		onClick: (editor) => editor.chain().focus().toggleCode().run(),
+		isActive: (editor) => editor.isActive("code")
+	},
+	heading1: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Heading1, { className: "h-4 w-4" }),
+		tooltip: "Heading 1",
+		onClick: (editor) => editor.chain().focus().toggleHeading({ level: 1 }).run(),
+		isActive: (editor) => editor.isActive("heading", { level: 1 })
+	},
+	heading2: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Heading2, { className: "h-4 w-4" }),
+		tooltip: "Heading 2",
+		onClick: (editor) => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+		isActive: (editor) => editor.isActive("heading", { level: 2 })
+	},
+	heading3: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Heading3, { className: "h-4 w-4" }),
+		tooltip: "Heading 3",
+		onClick: (editor) => editor.chain().focus().toggleHeading({ level: 3 }).run(),
+		isActive: (editor) => editor.isActive("heading", { level: 3 })
+	},
+	bulletList: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.List, { className: "h-4 w-4" }),
+		tooltip: "Bullet List",
+		onClick: (editor) => editor.chain().focus().toggleBulletList().run(),
+		isActive: (editor) => editor.isActive("bulletList")
+	},
+	orderedList: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ListOrdered, { className: "h-4 w-4" }),
+		tooltip: "Ordered List",
+		onClick: (editor) => editor.chain().focus().toggleOrderedList().run(),
+		isActive: (editor) => editor.isActive("orderedList")
+	},
+	blockquote: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Quote, { className: "h-4 w-4" }),
+		tooltip: "Blockquote",
+		onClick: (editor) => editor.chain().focus().toggleBlockquote().run(),
+		isActive: (editor) => editor.isActive("blockquote")
+	},
+	codeBlock: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Code2, { className: "h-4 w-4" }),
+		tooltip: "Code Block",
+		onClick: (editor) => editor.chain().focus().toggleCodeBlock().run(),
+		isActive: (editor) => editor.isActive("codeBlock")
+	}
+};
+
+//#endregion
+exports.predefinedToolbarOptions = predefinedToolbarOptions;

package/dist/rich-text-editor/predefined-toolbar-options.js

@@ -1 +1,81 @@
-import{Bold as e,Code as t,Code2 as n,Heading1 as r,Heading2 as i,Heading3 as a,Italic as o,List as s,ListOrdered as c,Quote as l,Strikethrough as u,Underline as d}from"lucide-react";import{jsx as f}from"react/jsx-runtime";const p={bold:{icon:f(e,{className:`h-4 w-4`}),tooltip:`Bold`,onClick:e=>e.chain().focus().toggleBold().run(),isActive:e=>e.isActive(`bold`)},italic:{icon:f(o,{className:`h-4 w-4`}),tooltip:`Italic`,onClick:e=>e.chain().focus().toggleItalic().run(),isActive:e=>e.isActive(`italic`)},underline:{icon:f(d,{className:`h-4 w-4`}),tooltip:`Underline`,onClick:e=>e.chain().focus().toggleUnderline().run(),isActive:e=>e.isActive(`underline`)},strike:{icon:f(u,{className:`h-4 w-4`}),tooltip:`Strikethrough`,onClick:e=>e.chain().focus().toggleStrike().run(),isActive:e=>e.isActive(`strike`)},code:{icon:f(t,{className:`h-4 w-4`}),tooltip:`Inline Code`,onClick:e=>e.chain().focus().toggleCode().run(),isActive:e=>e.isActive(`code`)},heading1:{icon:f(r,{className:`h-4 w-4`}),tooltip:`Heading 1`,onClick:e=>e.chain().focus().toggleHeading({level:1}).run(),isActive:e=>e.isActive(`heading`,{level:1})},heading2:{icon:f(i,{className:`h-4 w-4`}),tooltip:`Heading 2`,onClick:e=>e.chain().focus().toggleHeading({level:2}).run(),isActive:e=>e.isActive(`heading`,{level:2})},heading3:{icon:f(a,{className:`h-4 w-4`}),tooltip:`Heading 3`,onClick:e=>e.chain().focus().toggleHeading({level:3}).run(),isActive:e=>e.isActive(`heading`,{level:3})},bulletList:{icon:f(s,{className:`h-4 w-4`}),tooltip:`Bullet List`,onClick:e=>e.chain().focus().toggleBulletList().run(),isActive:e=>e.isActive(`bulletList`)},orderedList:{icon:f(c,{className:`h-4 w-4`}),tooltip:`Ordered List`,onClick:e=>e.chain().focus().toggleOrderedList().run(),isActive:e=>e.isActive(`orderedList`)},blockquote:{icon:f(l,{className:`h-4 w-4`}),tooltip:`Blockquote`,onClick:e=>e.chain().focus().toggleBlockquote().run(),isActive:e=>e.isActive(`blockquote`)},codeBlock:{icon:f(n,{className:`h-4 w-4`}),tooltip:`Code Block`,onClick:e=>e.chain().focus().toggleCodeBlock().run(),isActive:e=>e.isActive(`codeBlock`)}};export{p as predefinedToolbarOptions};
+import { Bold, Code, Code2, Heading1, Heading2, Heading3, Italic, List, ListOrdered, Quote, Strikethrough, Underline } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/rich-text-editor/predefined-toolbar-options.tsx
+const predefinedToolbarOptions = {
+	bold: {
+		icon: /* @__PURE__ */ jsx(Bold, { className: "h-4 w-4" }),
+		tooltip: "Bold",
+		onClick: (editor) => editor.chain().focus().toggleBold().run(),
+		isActive: (editor) => editor.isActive("bold")
+	},
+	italic: {
+		icon: /* @__PURE__ */ jsx(Italic, { className: "h-4 w-4" }),
+		tooltip: "Italic",
+		onClick: (editor) => editor.chain().focus().toggleItalic().run(),
+		isActive: (editor) => editor.isActive("italic")
+	},
+	underline: {
+		icon: /* @__PURE__ */ jsx(Underline, { className: "h-4 w-4" }),
+		tooltip: "Underline",
+		onClick: (editor) => editor.chain().focus().toggleUnderline().run(),
+		isActive: (editor) => editor.isActive("underline")
+	},
+	strike: {
+		icon: /* @__PURE__ */ jsx(Strikethrough, { className: "h-4 w-4" }),
+		tooltip: "Strikethrough",
+		onClick: (editor) => editor.chain().focus().toggleStrike().run(),
+		isActive: (editor) => editor.isActive("strike")
+	},
+	code: {
+		icon: /* @__PURE__ */ jsx(Code, { className: "h-4 w-4" }),
+		tooltip: "Inline Code",
+		onClick: (editor) => editor.chain().focus().toggleCode().run(),
+		isActive: (editor) => editor.isActive("code")
+	},
+	heading1: {
+		icon: /* @__PURE__ */ jsx(Heading1, { className: "h-4 w-4" }),
+		tooltip: "Heading 1",
+		onClick: (editor) => editor.chain().focus().toggleHeading({ level: 1 }).run(),
+		isActive: (editor) => editor.isActive("heading", { level: 1 })
+	},
+	heading2: {
+		icon: /* @__PURE__ */ jsx(Heading2, { className: "h-4 w-4" }),
+		tooltip: "Heading 2",
+		onClick: (editor) => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+		isActive: (editor) => editor.isActive("heading", { level: 2 })
+	},
+	heading3: {
+		icon: /* @__PURE__ */ jsx(Heading3, { className: "h-4 w-4" }),
+		tooltip: "Heading 3",
+		onClick: (editor) => editor.chain().focus().toggleHeading({ level: 3 }).run(),
+		isActive: (editor) => editor.isActive("heading", { level: 3 })
+	},
+	bulletList: {
+		icon: /* @__PURE__ */ jsx(List, { className: "h-4 w-4" }),
+		tooltip: "Bullet List",
+		onClick: (editor) => editor.chain().focus().toggleBulletList().run(),
+		isActive: (editor) => editor.isActive("bulletList")
+	},
+	orderedList: {
+		icon: /* @__PURE__ */ jsx(ListOrdered, { className: "h-4 w-4" }),
+		tooltip: "Ordered List",
+		onClick: (editor) => editor.chain().focus().toggleOrderedList().run(),
+		isActive: (editor) => editor.isActive("orderedList")
+	},
+	blockquote: {
+		icon: /* @__PURE__ */ jsx(Quote, { className: "h-4 w-4" }),
+		tooltip: "Blockquote",
+		onClick: (editor) => editor.chain().focus().toggleBlockquote().run(),
+		isActive: (editor) => editor.isActive("blockquote")
+	},
+	codeBlock: {
+		icon: /* @__PURE__ */ jsx(Code2, { className: "h-4 w-4" }),
+		tooltip: "Code Block",
+		onClick: (editor) => editor.chain().focus().toggleCodeBlock().run(),
+		isActive: (editor) => editor.isActive("codeBlock")
+	}
+};
+
+//#endregion
+export { predefinedToolbarOptions };

package/dist/spinner/index.cjs

@@ -1 +1,2 @@
-const e=require(`../_virtual/rolldown_runtime.cjs`),t=require(`./spinner.cjs`);
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_spinner = require('./spinner.cjs');

package/dist/spinner/index.js

@@ -1 +1 @@
-import{Spinner as e}from"./spinner.js";
+import { Spinner } from "./spinner.js";

package/dist/spinner/spinner.cjs

@@ -1,7 +1,74 @@
-const e=require(`../_virtual/rolldown_runtime.cjs`),t=require(`./styles.cjs`);let n=require(`react`);n=e.__toESM(n);let r=require(`react/jsx-runtime`);r=e.__toESM(r);const i={sm:24,md:40,lg:64,xl:96},a=40,o=2,s=.1,c=2,l=`currentColor`,u=40,d=100;let f=0;const p=({size:e=40,strokeWidth:a,speed:o=2,color:s=`currentColor`,colors:c,className:l=``})=>{let u=typeof e==`string`?i[e]:e,d=a??Math.max(2,Math.round(u*.1)),p=(0,n.useMemo)(()=>`spinner-${++f}-${Date.now()}`,[]),m=d/u*40,h=()=>!c||c.length===0?``:`${p}-color-change`;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(`style`,{children:[t.getGlobalStyles({uniqueId:p,speed:o,size:u,colors:c,color:s,strokeWidth:d}),c&&c.length>0&&(()=>{if(!c||c.length===0)return``;let e=c.map((e,t)=>`${t/c.length*100}% { stroke: ${e}; }`).join(`
-`);return`
-      @keyframes ${h()} {
-        ${e}
-        100% { stroke: ${c[0]}; }
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_styles = require('./styles.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/spinner/spinner.tsx
+const SpinnerSize = {
+	sm: 24,
+	md: 40,
+	lg: 64,
+	xl: 96
+};
+const DEFAULT_SIZE = 40;
+const MIN_STROKE_WIDTH = 2;
+const STROKE_WIDTH_RATIO = .1;
+const DEFAULT_SPEED = 2;
+const DEFAULT_COLOR = "currentColor";
+const VIEWBOX_STROKE_REF = 40;
+const PERCENT_MULTIPLIER = 100;
+let spinnerIdCounter = 0;
+const Spinner = ({ size: sizeProp = DEFAULT_SIZE, strokeWidth: strokeWidthProp, speed = DEFAULT_SPEED, color = DEFAULT_COLOR, colors, className = "" }) => {
+	const size = typeof sizeProp === "string" ? SpinnerSize[sizeProp] : sizeProp;
+	const strokeWidth = strokeWidthProp ?? Math.max(MIN_STROKE_WIDTH, Math.round(size * STROKE_WIDTH_RATIO));
+	const uniqueId = (0, react.useMemo)(() => `spinner-${++spinnerIdCounter}-${Date.now()}`, []);
+	const viewBoxStrokeWidth = strokeWidth / size * VIEWBOX_STROKE_REF;
+	const CIRCLE_RADIUS = 20;
+	const getColorAnimationId = () => {
+		if (!colors || colors.length === 0) return "";
+		return `${uniqueId}-color-change`;
+	};
+	const getColorAnimationKeyframes = () => {
+		if (!colors || colors.length === 0) return "";
+		const keyframes = colors.map((c, i) => {
+			return `${i / colors.length * PERCENT_MULTIPLIER}% { stroke: ${c}; }`;
+		}).join("\n");
+		return `
+      @keyframes ${getColorAnimationId()} {
+        ${keyframes}
+        100% { stroke: ${colors[0]}; }
       }
-    `})()]}),(0,r.jsx)(`div`,{className:`${p}-loader ${l}`,children:(0,r.jsx)(`svg`,{className:`${p}-circular`,viewBox:`25 25 50 50`,width:`100%`,height:`100%`,children:(0,r.jsx)(`circle`,{className:`${p}-path`,cx:50,cy:50,r:20,fill:`none`,strokeWidth:m,strokeMiterlimit:`10`})})})]})};p.displayName=`Spinner`,exports.Spinner=p;
+    `;
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("style", { children: [require_styles.getGlobalStyles({
+		uniqueId,
+		speed,
+		size,
+		colors,
+		color,
+		strokeWidth
+	}), colors && colors.length > 0 && getColorAnimationKeyframes()] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `${uniqueId}-loader ${className}`,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+			className: `${uniqueId}-circular`,
+			viewBox: "25 25 50 50",
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+				className: `${uniqueId}-path`,
+				cx: 50,
+				cy: 50,
+				r: CIRCLE_RADIUS,
+				fill: "none",
+				strokeWidth: viewBoxStrokeWidth,
+				strokeMiterlimit: "10"
+			})
+		})
+	})] });
+};
+Spinner.displayName = "Spinner";
+
+//#endregion
+exports.Spinner = Spinner;

package/dist/spinner/spinner.js

@@ -1,7 +1,71 @@
-import{getGlobalStyles as e}from"./styles.js";import t,{useMemo as n}from"react";import{Fragment as r,jsx as i,jsxs as a}from"react/jsx-runtime";const o={sm:24,md:40,lg:64,xl:96};let s=0;const c=({size:t=40,strokeWidth:c,speed:l=2,color:u=`currentColor`,colors:d,className:f=``})=>{let p=typeof t==`string`?o[t]:t,m=c??Math.max(2,Math.round(p*.1)),h=n(()=>`spinner-${++s}-${Date.now()}`,[]),g=m/p*40,_=()=>!d||d.length===0?``:`${h}-color-change`;return a(r,{children:[a(`style`,{children:[e({uniqueId:h,speed:l,size:p,colors:d,color:u,strokeWidth:m}),d&&d.length>0&&(()=>{if(!d||d.length===0)return``;let e=d.map((e,t)=>`${t/d.length*100}% { stroke: ${e}; }`).join(`
-`);return`
-      @keyframes ${_()} {
-        ${e}
-        100% { stroke: ${d[0]}; }
+import { getGlobalStyles } from "./styles.js";
+import React, { useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/spinner/spinner.tsx
+const SpinnerSize = {
+	sm: 24,
+	md: 40,
+	lg: 64,
+	xl: 96
+};
+const DEFAULT_SIZE = 40;
+const MIN_STROKE_WIDTH = 2;
+const STROKE_WIDTH_RATIO = .1;
+const DEFAULT_SPEED = 2;
+const DEFAULT_COLOR = "currentColor";
+const VIEWBOX_STROKE_REF = 40;
+const PERCENT_MULTIPLIER = 100;
+let spinnerIdCounter = 0;
+const Spinner = ({ size: sizeProp = DEFAULT_SIZE, strokeWidth: strokeWidthProp, speed = DEFAULT_SPEED, color = DEFAULT_COLOR, colors, className = "" }) => {
+	const size = typeof sizeProp === "string" ? SpinnerSize[sizeProp] : sizeProp;
+	const strokeWidth = strokeWidthProp ?? Math.max(MIN_STROKE_WIDTH, Math.round(size * STROKE_WIDTH_RATIO));
+	const uniqueId = useMemo(() => `spinner-${++spinnerIdCounter}-${Date.now()}`, []);
+	const viewBoxStrokeWidth = strokeWidth / size * VIEWBOX_STROKE_REF;
+	const CIRCLE_RADIUS = 20;
+	const getColorAnimationId = () => {
+		if (!colors || colors.length === 0) return "";
+		return `${uniqueId}-color-change`;
+	};
+	const getColorAnimationKeyframes = () => {
+		if (!colors || colors.length === 0) return "";
+		const keyframes = colors.map((c, i) => {
+			return `${i / colors.length * PERCENT_MULTIPLIER}% { stroke: ${c}; }`;
+		}).join("\n");
+		return `
+      @keyframes ${getColorAnimationId()} {
+        ${keyframes}
+        100% { stroke: ${colors[0]}; }
       }
-    `})()]}),i(`div`,{className:`${h}-loader ${f}`,children:i(`svg`,{className:`${h}-circular`,viewBox:`25 25 50 50`,width:`100%`,height:`100%`,children:i(`circle`,{className:`${h}-path`,cx:50,cy:50,r:20,fill:`none`,strokeWidth:g,strokeMiterlimit:`10`})})})]})};c.displayName=`Spinner`;export{c as Spinner};
+    `;
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("style", { children: [getGlobalStyles({
+		uniqueId,
+		speed,
+		size,
+		colors,
+		color,
+		strokeWidth
+	}), colors && colors.length > 0 && getColorAnimationKeyframes()] }), /* @__PURE__ */ jsx("div", {
+		className: `${uniqueId}-loader ${className}`,
+		children: /* @__PURE__ */ jsx("svg", {
+			className: `${uniqueId}-circular`,
+			viewBox: "25 25 50 50",
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ jsx("circle", {
+				className: `${uniqueId}-path`,
+				cx: 50,
+				cy: 50,
+				r: CIRCLE_RADIUS,
+				fill: "none",
+				strokeWidth: viewBoxStrokeWidth,
+				strokeMiterlimit: "10"
+			})
+		})
+	})] });
+};
+Spinner.displayName = "Spinner";
+
+//#endregion
+export { Spinner };

package/dist/spinner/styles.cjs

@@ -1,11 +1,20 @@
-const e=require(`../_virtual/rolldown_runtime.cjs`);function t(e){let{uniqueId:t,speed:n=2,size:r,colors:i,color:a}=e;return`
-      @keyframes ${t}-rotate {
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+
+//#region src/spinner/styles.ts
+function getGlobalStyles(options) {
+	const { uniqueId, speed = 2, size, colors, color } = options;
+	const getColorAnimationId = () => {
+		if (!colors || colors.length === 0) return "";
+		return `${uniqueId}-color-change`;
+	};
+	return `
+      @keyframes ${uniqueId}-rotate {
         100% {
           transform: rotate(360deg);
         }
       }
 
-      @keyframes ${t}-dash {
+      @keyframes ${uniqueId}-dash {
         0% {
           stroke-dasharray: 1, 200;
           stroke-dashoffset: 0;
@@ -20,27 +29,31 @@ const e=require(`../_virtual/rolldown_runtime.cjs`);function t(e){let{uniqueId:t
         }
       }
 
-      .${t}-loader {
+      .${uniqueId}-loader {
         position: relative;
         display: inline-block;
-        width: ${r}px;
-        height: ${r}px;
+        width: ${size}px;
+        height: ${size}px;
         overflow: hidden;
       }
 
-      .${t}-circular {
-        animation: ${t}-rotate ${n}s linear infinite;
+      .${uniqueId}-circular {
+        animation: ${uniqueId}-rotate ${speed}s linear infinite;
         height: 100%;
         width: 100%;
         max-height: 100%;
         max-width: 100%;
       }
 
-      .${t}-path {
-        stroke: ${i&&i.length>0?i[0]:a};
+      .${uniqueId}-path {
+        stroke: ${colors && colors.length > 0 ? colors[0] : color};
         stroke-dasharray: 1, 200;
         stroke-dashoffset: 0;
-        animation: ${i&&i.length>0?`${t}-dash 1.5s ease-in-out infinite, ${(()=>!i||i.length===0?``:`${t}-color-change`)()} ${n*i.length}s ease-in-out infinite`:`${t}-dash 1.5s ease-in-out infinite`};
+        animation: ${colors && colors.length > 0 ? `${uniqueId}-dash 1.5s ease-in-out infinite, ${getColorAnimationId()} ${speed * colors.length}s ease-in-out infinite` : `${uniqueId}-dash 1.5s ease-in-out infinite`};
         stroke-linecap: round;
       }
-    `}exports.getGlobalStyles=t;
+    `;
+}
+
+//#endregion
+exports.getGlobalStyles = getGlobalStyles;

package/dist/spinner/styles.js

@@ -1,11 +1,18 @@
-function e(e){let{uniqueId:t,speed:n=2,size:r,colors:i,color:a}=e;return`
-      @keyframes ${t}-rotate {
+//#region src/spinner/styles.ts
+function getGlobalStyles(options) {
+	const { uniqueId, speed = 2, size, colors, color } = options;
+	const getColorAnimationId = () => {
+		if (!colors || colors.length === 0) return "";
+		return `${uniqueId}-color-change`;
+	};
+	return `
+      @keyframes ${uniqueId}-rotate {
         100% {
           transform: rotate(360deg);
         }
       }
 
-      @keyframes ${t}-dash {
+      @keyframes ${uniqueId}-dash {
         0% {
           stroke-dasharray: 1, 200;
           stroke-dashoffset: 0;
@@ -20,27 +27,31 @@ function e(e){let{uniqueId:t,speed:n=2,size:r,colors:i,color:a}=e;return`
         }
       }
 
-      .${t}-loader {
+      .${uniqueId}-loader {
         position: relative;
         display: inline-block;
-        width: ${r}px;
-        height: ${r}px;
+        width: ${size}px;
+        height: ${size}px;
         overflow: hidden;
       }
 
-      .${t}-circular {
-        animation: ${t}-rotate ${n}s linear infinite;
+      .${uniqueId}-circular {
+        animation: ${uniqueId}-rotate ${speed}s linear infinite;
         height: 100%;
         width: 100%;
         max-height: 100%;
         max-width: 100%;
       }
 
-      .${t}-path {
-        stroke: ${i&&i.length>0?i[0]:a};
+      .${uniqueId}-path {
+        stroke: ${colors && colors.length > 0 ? colors[0] : color};
         stroke-dasharray: 1, 200;
         stroke-dashoffset: 0;
-        animation: ${i&&i.length>0?`${t}-dash 1.5s ease-in-out infinite, ${(()=>!i||i.length===0?``:`${t}-color-change`)()} ${n*i.length}s ease-in-out infinite`:`${t}-dash 1.5s ease-in-out infinite`};
+        animation: ${colors && colors.length > 0 ? `${uniqueId}-dash 1.5s ease-in-out infinite, ${getColorAnimationId()} ${speed * colors.length}s ease-in-out infinite` : `${uniqueId}-dash 1.5s ease-in-out infinite`};
         stroke-linecap: round;
       }
-    `}export{e as getGlobalStyles};
+    `;
+}
+
+//#endregion
+export { getGlobalStyles };