@fuma-content/studio 0.1.0

package/dist/src/components/editor/ui/comment.mjs

@@ -0,0 +1,422 @@
+"use client";
+
+import { cn } from "../../../lib/utils.mjs";
+import { Button } from "../../ui/button.mjs";
+import { Avatar, AvatarFallback, AvatarImage } from "../../ui/avatar.mjs";
+import { BasicMarksKit } from "../plugins/basic-marks-kit.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger } from "../../ui/dropdown-menu.mjs";
+import { Editor, EditorContainer } from "./editor.mjs";
+import { discussionPlugin } from "../plugins/discussion-kit.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Plate, useEditorPlugin, useEditorRef, usePlateEditor, usePluginOption } from "platejs/react";
+import * as React$1 from "react";
+import { KEYS, NodeApi, nanoid } from "platejs";
+import { getCommentKey, getDraftCommentKey } from "@platejs/comment";
+import { ArrowUpIcon, CheckIcon, MoreHorizontalIcon, PencilIcon, TrashIcon, XIcon } from "lucide-react";
+import { CommentPlugin, useCommentId } from "@platejs/comment/react";
+import { differenceInDays, differenceInHours, differenceInMinutes, format } from "date-fns";
+
+//#region src/components/editor/ui/comment.tsx
+function Comment(props) {
+	const { comment, discussionLength, documentContent, editingId, index, setEditingId, showDocumentContent = false, onEditorClick } = props;
+	const editor = useEditorRef();
+	const userInfo = usePluginOption(discussionPlugin, "user", comment.userId);
+	const currentUserId = usePluginOption(discussionPlugin, "currentUserId");
+	const resolveDiscussion = async (id) => {
+		const updatedDiscussions = editor.getOption(discussionPlugin, "discussions").map((discussion) => {
+			if (discussion.id === id) return {
+				...discussion,
+				isResolved: true
+			};
+			return discussion;
+		});
+		editor.setOption(discussionPlugin, "discussions", updatedDiscussions);
+	};
+	const removeDiscussion = async (id) => {
+		const updatedDiscussions = editor.getOption(discussionPlugin, "discussions").filter((discussion) => discussion.id !== id);
+		editor.setOption(discussionPlugin, "discussions", updatedDiscussions);
+	};
+	const updateComment = async (input) => {
+		const updatedDiscussions = editor.getOption(discussionPlugin, "discussions").map((discussion) => {
+			if (discussion.id === input.discussionId) {
+				const updatedComments = discussion.comments.map((comment$1) => {
+					if (comment$1.id === input.id) return {
+						...comment$1,
+						contentRich: input.contentRich,
+						isEdited: true,
+						updatedAt: /* @__PURE__ */ new Date()
+					};
+					return comment$1;
+				});
+				return {
+					...discussion,
+					comments: updatedComments
+				};
+			}
+			return discussion;
+		});
+		editor.setOption(discussionPlugin, "discussions", updatedDiscussions);
+	};
+	const { tf } = useEditorPlugin(CommentPlugin);
+	const isMyComment = currentUserId === comment.userId;
+	const initialValue = comment.contentRich;
+	const commentEditor = useCommentEditor({
+		id: comment.id,
+		value: initialValue
+	}, [initialValue]);
+	const onCancel = () => {
+		setEditingId(null);
+		commentEditor.tf.replaceNodes(initialValue, {
+			at: [],
+			children: true
+		});
+	};
+	const onSave = () => {
+		updateComment({
+			id: comment.id,
+			contentRich: commentEditor.children,
+			discussionId: comment.discussionId,
+			isEdited: true
+		});
+		setEditingId(null);
+	};
+	const onResolveComment = () => {
+		resolveDiscussion(comment.discussionId);
+		tf.comment.unsetMark({ id: comment.discussionId });
+	};
+	const isFirst = index === 0;
+	const isLast = index === discussionLength - 1;
+	const isEditing = editingId && editingId === comment.id;
+	const [hovering, setHovering] = React$1.useState(false);
+	const [dropdownOpen, setDropdownOpen] = React$1.useState(false);
+	return /* @__PURE__ */ jsxs("div", {
+		onMouseEnter: () => setHovering(true),
+		onMouseLeave: () => setHovering(false),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative flex items-center",
+				children: [
+					/* @__PURE__ */ jsxs(Avatar, {
+						className: "size-5",
+						children: [/* @__PURE__ */ jsx(AvatarImage, {
+							alt: userInfo?.name,
+							src: userInfo?.avatarUrl
+						}), /* @__PURE__ */ jsx(AvatarFallback, { children: userInfo?.name?.[0] })]
+					}),
+					/* @__PURE__ */ jsx("h4", {
+						className: "mx-2 font-semibold text-sm leading-none",
+						children: userInfo?.name
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "text-muted-foreground/80 text-xs leading-none",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "mr-1",
+							children: formatCommentDate(new Date(comment.createdAt))
+						}), comment.isEdited && /* @__PURE__ */ jsx("span", { children: "(edited)" })]
+					}),
+					isMyComment && (hovering || dropdownOpen) && /* @__PURE__ */ jsxs("div", {
+						className: "absolute top-0 right-0 flex space-x-1",
+						children: [index === 0 && /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							className: "h-6 p-1 text-muted-foreground",
+							onClick: onResolveComment,
+							type: "button",
+							children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" })
+						}), /* @__PURE__ */ jsx(CommentMoreDropdown, {
+							onCloseAutoFocus: () => {
+								setTimeout(() => {
+									commentEditor.tf.focus({ edge: "endEditor" });
+								}, 0);
+							},
+							onRemoveComment: () => {
+								if (discussionLength === 1) {
+									tf.comment.unsetMark({ id: comment.discussionId });
+									removeDiscussion(comment.discussionId);
+								}
+							},
+							comment,
+							dropdownOpen,
+							setDropdownOpen,
+							setEditingId
+						})]
+					})
+				]
+			}),
+			isFirst && showDocumentContent && /* @__PURE__ */ jsxs("div", {
+				className: "relative mt-1 flex pl-[32px] text-sm text-subtle-foreground",
+				children: [
+					discussionLength > 1 && /* @__PURE__ */ jsx("div", { className: "absolute top-[5px] left-3 h-full w-0.5 shrink-0 bg-muted" }),
+					/* @__PURE__ */ jsx("div", { className: "my-px w-0.5 shrink-0 bg-highlight" }),
+					documentContent && /* @__PURE__ */ jsx("div", {
+						className: "ml-2",
+						children: documentContent
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative my-1 pl-[26px]",
+				children: [!isLast && /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-3 h-full w-0.5 shrink-0 bg-muted" }), /* @__PURE__ */ jsx(Plate, {
+					readOnly: !isEditing,
+					editor: commentEditor,
+					children: /* @__PURE__ */ jsxs(EditorContainer, {
+						variant: "comment",
+						children: [/* @__PURE__ */ jsx(Editor, {
+							variant: "comment",
+							className: "w-auto grow",
+							onClick: () => onEditorClick?.()
+						}), isEditing && /* @__PURE__ */ jsxs("div", {
+							className: "ml-auto flex shrink-0 gap-1",
+							children: [/* @__PURE__ */ jsx(Button, {
+								size: "icon",
+								variant: "ghost",
+								className: "size-[28px]",
+								onClick: (e) => {
+									e.stopPropagation();
+									onCancel();
+								},
+								children: /* @__PURE__ */ jsx("div", {
+									className: "flex size-5 shrink-0 items-center justify-center rounded-[50%] bg-primary/40",
+									children: /* @__PURE__ */ jsx(XIcon, { className: "size-3 stroke-[3px] text-background" })
+								})
+							}), /* @__PURE__ */ jsx(Button, {
+								size: "icon",
+								variant: "ghost",
+								onClick: (e) => {
+									e.stopPropagation();
+									onSave();
+								},
+								children: /* @__PURE__ */ jsx("div", {
+									className: "flex size-5 shrink-0 items-center justify-center rounded-[50%] bg-brand",
+									children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3 stroke-[3px] text-background" })
+								})
+							})]
+						})]
+					})
+				})]
+			})
+		]
+	});
+}
+function CommentMoreDropdown(props) {
+	const { comment, dropdownOpen, setDropdownOpen, setEditingId, onCloseAutoFocus, onRemoveComment } = props;
+	const editor = useEditorRef();
+	const selectedEditCommentRef = React$1.useRef(false);
+	const onDeleteComment = React$1.useCallback(() => {
+		if (!comment.id) return alert("You are operating too quickly, please try again later.");
+		const updatedDiscussions = editor.getOption(discussionPlugin, "discussions").map((discussion) => {
+			if (discussion.id !== comment.discussionId) return discussion;
+			const commentIndex = discussion.comments.findIndex((c) => c.id === comment.id);
+			if (commentIndex === -1) return discussion;
+			return {
+				...discussion,
+				comments: [...discussion.comments.slice(0, commentIndex), ...discussion.comments.slice(commentIndex + 1)]
+			};
+		});
+		editor.setOption(discussionPlugin, "discussions", updatedDiscussions);
+		onRemoveComment?.();
+	}, [
+		comment.discussionId,
+		comment.id,
+		editor,
+		onRemoveComment
+	]);
+	const onEditComment = React$1.useCallback(() => {
+		selectedEditCommentRef.current = true;
+		if (!comment.id) return alert("You are operating too quickly, please try again later.");
+		setEditingId(comment.id);
+	}, [comment.id, setEditingId]);
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		open: dropdownOpen,
+		onOpenChange: setDropdownOpen,
+		modal: false,
+		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			asChild: true,
+			onClick: (e) => e.stopPropagation(),
+			children: /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				className: cn("h-6 p-1 text-muted-foreground"),
+				children: /* @__PURE__ */ jsx(MoreHorizontalIcon, { className: "size-4" })
+			})
+		}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			className: "w-48",
+			onCloseAutoFocus: (e) => {
+				if (selectedEditCommentRef.current) {
+					onCloseAutoFocus?.();
+					selectedEditCommentRef.current = false;
+				}
+				return e.preventDefault();
+			},
+			children: /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [/* @__PURE__ */ jsxs(DropdownMenuItem, {
+				onClick: onEditComment,
+				children: [/* @__PURE__ */ jsx(PencilIcon, { className: "size-4" }), "Edit comment"]
+			}), /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				onClick: onDeleteComment,
+				children: [/* @__PURE__ */ jsx(TrashIcon, { className: "size-4" }), "Delete comment"]
+			})] })
+		})]
+	});
+}
+const useCommentEditor = (options = {}, deps = []) => {
+	return usePlateEditor({
+		id: "comment",
+		plugins: BasicMarksKit,
+		value: [],
+		...options
+	}, deps);
+};
+function CommentCreateForm({ autoFocus = false, className, discussionId: discussionIdProp, focusOnMount = false }) {
+	const discussions = usePluginOption(discussionPlugin, "discussions");
+	const editor = useEditorRef();
+	const commentId = useCommentId();
+	const discussionId = discussionIdProp ?? commentId;
+	const userInfo = usePluginOption(discussionPlugin, "currentUser");
+	const [commentValue, setCommentValue] = React$1.useState();
+	const commentContent = React$1.useMemo(() => commentValue ? NodeApi.string({
+		children: commentValue,
+		type: KEYS.p
+	}) : "", [commentValue]);
+	const commentEditor = useCommentEditor();
+	React$1.useEffect(() => {
+		if (commentEditor && focusOnMount) commentEditor.tf.focus();
+	}, [commentEditor, focusOnMount]);
+	const onAddComment = React$1.useCallback(async () => {
+		if (!commentValue) return;
+		commentEditor.tf.reset();
+		if (discussionId) {
+			const discussion = discussions.find((d) => d.id === discussionId);
+			if (!discussion) {
+				const newDiscussion$1 = {
+					id: discussionId,
+					comments: [{
+						id: nanoid(),
+						contentRich: commentValue,
+						createdAt: /* @__PURE__ */ new Date(),
+						discussionId,
+						isEdited: false,
+						userId: editor.getOption(discussionPlugin, "currentUserId")
+					}],
+					createdAt: /* @__PURE__ */ new Date(),
+					isResolved: false,
+					userId: editor.getOption(discussionPlugin, "currentUserId")
+				};
+				editor.setOption(discussionPlugin, "discussions", [...discussions, newDiscussion$1]);
+				return;
+			}
+			const comment = {
+				id: nanoid(),
+				contentRich: commentValue,
+				createdAt: /* @__PURE__ */ new Date(),
+				discussionId,
+				isEdited: false,
+				userId: editor.getOption(discussionPlugin, "currentUserId")
+			};
+			const updatedDiscussion = {
+				...discussion,
+				comments: [...discussion.comments, comment]
+			};
+			const updatedDiscussions = discussions.filter((d) => d.id !== discussionId).concat(updatedDiscussion);
+			editor.setOption(discussionPlugin, "discussions", updatedDiscussions);
+			return;
+		}
+		const commentsNodeEntry = editor.getApi(CommentPlugin).comment.nodes({
+			at: [],
+			isDraft: true
+		});
+		if (commentsNodeEntry.length === 0) return;
+		const documentContent = commentsNodeEntry.map(([node]) => node.text).join("");
+		const _discussionId = nanoid();
+		const newDiscussion = {
+			id: _discussionId,
+			comments: [{
+				id: nanoid(),
+				contentRich: commentValue,
+				createdAt: /* @__PURE__ */ new Date(),
+				discussionId: _discussionId,
+				isEdited: false,
+				userId: editor.getOption(discussionPlugin, "currentUserId")
+			}],
+			createdAt: /* @__PURE__ */ new Date(),
+			documentContent,
+			isResolved: false,
+			userId: editor.getOption(discussionPlugin, "currentUserId")
+		};
+		editor.setOption(discussionPlugin, "discussions", [...discussions, newDiscussion]);
+		const id = newDiscussion.id;
+		commentsNodeEntry.forEach(([, path]) => {
+			editor.tf.setNodes({ [getCommentKey(id)]: true }, {
+				at: path,
+				split: true
+			});
+			editor.tf.unsetNodes([getDraftCommentKey()], { at: path });
+		});
+	}, [
+		commentValue,
+		commentEditor.tf,
+		discussionId,
+		editor,
+		discussions
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex w-full", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "mt-2 mr-1 shrink-0",
+			children: /* @__PURE__ */ jsxs(Avatar, {
+				className: "size-5",
+				children: [/* @__PURE__ */ jsx(AvatarImage, {
+					alt: userInfo?.name,
+					src: userInfo?.avatarUrl
+				}), /* @__PURE__ */ jsx(AvatarFallback, { children: userInfo?.name?.[0] })]
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "relative flex grow gap-2",
+			children: /* @__PURE__ */ jsx(Plate, {
+				onChange: ({ value }) => {
+					setCommentValue(value);
+				},
+				editor: commentEditor,
+				children: /* @__PURE__ */ jsxs(EditorContainer, {
+					variant: "comment",
+					children: [/* @__PURE__ */ jsx(Editor, {
+						variant: "comment",
+						className: "min-h-[25px] grow pt-0.5 pr-8",
+						onKeyDown: (e) => {
+							if (e.key === "Enter" && !e.shiftKey) {
+								e.preventDefault();
+								onAddComment();
+							}
+						},
+						placeholder: "Reply...",
+						autoComplete: "off",
+						autoFocus
+					}), /* @__PURE__ */ jsx(Button, {
+						size: "icon",
+						variant: "ghost",
+						className: "absolute right-0.5 bottom-0.5 ml-auto size-6 shrink-0",
+						disabled: commentContent.trim().length === 0,
+						onClick: (e) => {
+							e.stopPropagation();
+							onAddComment();
+						},
+						children: /* @__PURE__ */ jsx("div", {
+							className: "flex size-6 items-center justify-center rounded-full",
+							children: /* @__PURE__ */ jsx(ArrowUpIcon, {})
+						})
+					})]
+				})
+			})
+		})]
+	});
+}
+const formatCommentDate = (date) => {
+	const now = /* @__PURE__ */ new Date();
+	const diffMinutes = differenceInMinutes(now, date);
+	const diffHours = differenceInHours(now, date);
+	const diffDays = differenceInDays(now, date);
+	if (diffMinutes < 60) return `${diffMinutes}m`;
+	if (diffHours < 24) return `${diffHours}h`;
+	if (diffDays < 2) return `${diffDays}d`;
+	return format(date, "MM/dd/yyyy");
+};
+
+//#endregion
+export { Comment, CommentCreateForm, formatCommentDate };

package/dist/src/components/editor/ui/cursor-overlay.mjs

@@ -0,0 +1,36 @@
+"use client";
+
+import { cn } from "../../../lib/utils.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { usePluginOption } from "platejs/react";
+import { RangeApi } from "platejs";
+import { AIChatPlugin } from "@platejs/ai/react";
+import { useCursorOverlay } from "@platejs/selection/react";
+
+//#region src/components/editor/ui/cursor-overlay.tsx
+function CursorOverlay() {
+	const { cursors } = useCursorOverlay();
+	return /* @__PURE__ */ jsx(Fragment, { children: cursors.map((cursor) => /* @__PURE__ */ jsx(Cursor, { ...cursor }, cursor.id)) });
+}
+function Cursor({ id, caretPosition, data, selection, selectionRects }) {
+	const streaming = usePluginOption(AIChatPlugin, "streaming");
+	const { style, selectionStyle = style } = data ?? {};
+	const isCursor = RangeApi.isCollapsed(selection);
+	if (streaming) return null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [selectionRects.map((position, i) => /* @__PURE__ */ jsx("div", {
+		className: cn("pointer-events-none absolute z-10", id === "selection" && "bg-brand/25", id === "selection" && isCursor && "bg-primary"),
+		style: {
+			...selectionStyle,
+			...position
+		}
+	}, i)), caretPosition && /* @__PURE__ */ jsx("div", {
+		className: cn("pointer-events-none absolute z-10 w-0.5", id === "drag" && "w-px bg-brand"),
+		style: {
+			...caretPosition,
+			...style
+		}
+	})] });
+}
+
+//#endregion
+export { CursorOverlay };

package/dist/src/components/editor/ui/date-node-static.mjs

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SlateElement } from "platejs/static";
+
+//#region src/components/editor/ui/date-node-static.tsx
+function DateElementStatic(props) {
+	const { element } = props;
+	return /* @__PURE__ */ jsxs(SlateElement, {
+		className: "inline-block",
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "w-fit rounded-sm bg-muted px-1 text-muted-foreground",
+			children: element.date ? (() => {
+				const today = /* @__PURE__ */ new Date();
+				const elementDate = new Date(element.date);
+				const isToday = elementDate.getDate() === today.getDate() && elementDate.getMonth() === today.getMonth() && elementDate.getFullYear() === today.getFullYear();
+				const isYesterday = new Date(today.setDate(today.getDate() - 1)).toDateString() === elementDate.toDateString();
+				const isTomorrow = new Date(today.setDate(today.getDate() + 2)).toDateString() === elementDate.toDateString();
+				if (isToday) return "Today";
+				if (isYesterday) return "Yesterday";
+				if (isTomorrow) return "Tomorrow";
+				return elementDate.toLocaleDateString(void 0, {
+					day: "numeric",
+					month: "long",
+					year: "numeric"
+				});
+			})() : /* @__PURE__ */ jsx("span", { children: "Pick a date" })
+		}), props.children]
+	});
+}
+
+//#endregion
+export { DateElementStatic };

package/dist/src/components/editor/ui/date-node.mjs

@@ -0,0 +1,60 @@
+"use client";
+
+import { cn } from "../../../lib/utils.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.mjs";
+import { Calendar } from "../../ui/calendar.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PlateElement, useReadOnly } from "platejs/react";
+
+//#region src/components/editor/ui/date-node.tsx
+function DateElement(props) {
+	const { editor, element } = props;
+	const readOnly = useReadOnly();
+	const trigger = /* @__PURE__ */ jsx("span", {
+		className: cn("w-fit cursor-pointer rounded-sm bg-muted px-1 text-muted-foreground"),
+		contentEditable: false,
+		draggable: true,
+		children: element.date ? (() => {
+			const today = /* @__PURE__ */ new Date();
+			const elementDate = new Date(element.date);
+			const isToday = elementDate.getDate() === today.getDate() && elementDate.getMonth() === today.getMonth() && elementDate.getFullYear() === today.getFullYear();
+			const isYesterday = new Date(today.setDate(today.getDate() - 1)).toDateString() === elementDate.toDateString();
+			const isTomorrow = new Date(today.setDate(today.getDate() + 2)).toDateString() === elementDate.toDateString();
+			if (isToday) return "Today";
+			if (isYesterday) return "Yesterday";
+			if (isTomorrow) return "Tomorrow";
+			return elementDate.toLocaleDateString(void 0, {
+				day: "numeric",
+				month: "long",
+				year: "numeric"
+			});
+		})() : /* @__PURE__ */ jsx("span", { children: "Pick a date" })
+	});
+	if (readOnly) return trigger;
+	return /* @__PURE__ */ jsxs(PlateElement, {
+		...props,
+		className: "inline-block",
+		attributes: {
+			...props.attributes,
+			contentEditable: false
+		},
+		children: [/* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: trigger
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "w-auto p-0",
+			children: /* @__PURE__ */ jsx(Calendar, {
+				selected: new Date(element.date),
+				onSelect: (date) => {
+					if (!date) return;
+					editor.tf.setNodes({ date: date.toDateString() }, { at: element });
+				},
+				mode: "single",
+				initialFocus: true
+			})
+		})] }), props.children]
+	});
+}
+
+//#endregion
+export { DateElement };

package/dist/src/components/editor/ui/editor-static.mjs

@@ -0,0 +1,31 @@
+import { cn } from "../../../lib/utils.mjs";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { PlateStatic } from "platejs/static";
+
+//#region src/components/editor/ui/editor-static.tsx
+const editorVariants = cva(cn("group/editor", "relative w-full cursor-text select-text overflow-x-hidden whitespace-pre-wrap break-words", "rounded-md ring-offset-background focus-visible:outline-none", "placeholder:text-muted-foreground/80 **:data-slate-placeholder:top-[auto_!important] **:data-slate-placeholder:text-muted-foreground/80 **:data-slate-placeholder:opacity-100!", "[&_strong]:font-bold"), {
+	defaultVariants: { variant: "none" },
+	variants: {
+		disabled: { true: "cursor-not-allowed opacity-50" },
+		focused: { true: "ring-2 ring-ring ring-offset-2" },
+		variant: {
+			ai: "w-full px-0 text-base md:text-sm",
+			aiChat: "max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-5 py-3 text-base md:text-sm",
+			default: "size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]",
+			demo: "size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]",
+			fullWidth: "size-full px-16 pt-4 pb-72 text-base sm:px-24",
+			none: "",
+			select: "px-3 py-2 text-base data-readonly:w-fit"
+		}
+	}
+});
+function EditorStatic({ className, variant, ...props }) {
+	return /* @__PURE__ */ jsx(PlateStatic, {
+		className: cn(editorVariants({ variant }), className),
+		...props
+	});
+}
+
+//#endregion
+export { EditorStatic };

package/dist/src/components/editor/ui/editor.mjs

@@ -0,0 +1,60 @@
+"use client";
+
+import { cn } from "../../../lib/utils.mjs";
+import { jsx } from "react/jsx-runtime";
+import { PlateContainer, PlateContent, PlateView } from "platejs/react";
+import { cva } from "class-variance-authority";
+
+//#region src/components/editor/ui/editor.tsx
+const editorContainerVariants = cva("w-full cursor-text select-text caret-primary selection:bg-brand/25 focus-visible:outline-none [&_.slate-selection-area]:z-50 [&_.slate-selection-area]:border [&_.slate-selection-area]:border-brand/25 [&_.slate-selection-area]:bg-brand/15", {
+	defaultVariants: { variant: "card" },
+	variants: { variant: {
+		comment: cn("flex flex-wrap justify-between gap-1 px-1 py-0.5 text-sm overflow-y-auto rounded-md border-[1.5px] border-transparent bg-transparent", "has-[[data-slate-editor]:focus]:border-brand/50 has-[[data-slate-editor]:focus]:ring-2 has-[[data-slate-editor]:focus]:ring-brand/30", "has-aria-disabled:border-input has-aria-disabled:bg-muted"),
+		card: "border bg-card text-card-foreground rounded-xl",
+		select: cn("group overflow-y-auto rounded-md border border-input ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2", "has-data-readonly:w-fit has-data-readonly:cursor-default has-data-readonly:border-transparent has-data-readonly:focus-within:[box-shadow:none]")
+	} }
+});
+function EditorContainer({ className, variant, ...props }) {
+	return /* @__PURE__ */ jsx(PlateContainer, {
+		className: cn("ignore-click-outside/toolbar", editorContainerVariants({ variant }), className),
+		...props
+	});
+}
+const editorVariants = cva(cn("group/editor", "relative w-full cursor-text select-text overflow-x-hidden whitespace-pre-wrap break-words", "rounded-md ring-offset-background focus-visible:outline-none", "**:data-slate-placeholder:!top-1/2 **:data-slate-placeholder:-translate-y-1/2 placeholder:text-muted-foreground/80 **:data-slate-placeholder:text-muted-foreground/80 **:data-slate-placeholder:opacity-100!", "[&_strong]:font-bold"), {
+	defaultVariants: { variant: "default" },
+	variants: {
+		disabled: { true: "cursor-not-allowed opacity-50" },
+		focused: { true: "ring-2 ring-ring ring-offset-2" },
+		variant: {
+			ai: "w-full px-0 text-base md:text-sm",
+			aiChat: "max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-3 py-2 text-base md:text-sm",
+			comment: "rounded-none border-none bg-transparent text-sm",
+			default: "size-full px-8 py-4 text-base",
+			fullWidth: "size-full px-16 pt-4 pb-72 text-base sm:px-24",
+			none: "",
+			select: "px-3 py-2 text-base data-readonly:w-fit"
+		}
+	}
+});
+const Editor = ({ className, disabled, focused, variant, ref, ...props }) => /* @__PURE__ */ jsx(PlateContent, {
+	ref,
+	className: cn(editorVariants({
+		disabled,
+		focused,
+		variant
+	}), className),
+	disabled,
+	disableDefaultStyles: true,
+	...props
+});
+Editor.displayName = "Editor";
+function EditorView({ className, variant, ...props }) {
+	return /* @__PURE__ */ jsx(PlateView, {
+		...props,
+		className: cn(editorVariants({ variant }), className)
+	});
+}
+EditorView.displayName = "EditorView";
+
+//#endregion
+export { Editor, EditorContainer };