@btst/stack 1.0.1 → 1.1.1

package/src/plugins/blog/client/components/forms/image-field.tsx

@@ -0,0 +1,165 @@
+import { Button } from "@workspace/ui/components/button";
+import {
+	FormControl,
+	FormDescription,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@workspace/ui/components/form";
+import { Input } from "@workspace/ui/components/input";
+import { usePluginOverrides } from "@btst/stack/context";
+import { Loader2, Upload } from "lucide-react";
+import { useRef, useState } from "react";
+import { toast } from "sonner";
+import type { BlogPluginOverrides } from "../../overrides";
+import { BLOG_LOCALIZATION } from "../../localization";
+
+export function FeaturedImageField({
+	isRequired,
+	value,
+	onChange,
+	setFeaturedImageUploading,
+}: {
+	isRequired?: boolean;
+	value?: string;
+	onChange: (value: string) => void;
+	setFeaturedImageUploading: (uploading: boolean) => void;
+}) {
+	const fileInputRef = useRef<HTMLInputElement>(null);
+	const [isUploading, setIsUploading] = useState(false);
+
+	const { uploadImage, Image, localization } = usePluginOverrides<
+		BlogPluginOverrides,
+		Partial<BlogPluginOverrides>
+	>("blog", { localization: BLOG_LOCALIZATION });
+
+	const ImageComponent = Image ? Image : DefaultImage;
+
+	const handleImageUpload = async (
+		event: React.ChangeEvent<HTMLInputElement>,
+	) => {
+		const file = event.target.files?.[0];
+		if (!file) return;
+
+		if (!file.type.startsWith("image/")) {
+			toast.error(localization.BLOG_FORMS_FEATURED_IMAGE_ERROR_NOT_IMAGE);
+			return;
+		}
+
+		if (file.size > 4 * 1024 * 1024) {
+			toast.error(localization.BLOG_FORMS_FEATURED_IMAGE_ERROR_TOO_LARGE);
+			return;
+		}
+
+		try {
+			setIsUploading(true);
+			setFeaturedImageUploading(true);
+			const url = await uploadImage(file);
+			onChange(url);
+			toast.success(localization.BLOG_FORMS_FEATURED_IMAGE_TOAST_SUCCESS);
+		} catch (error) {
+			toast.error(localization.BLOG_FORMS_FEATURED_IMAGE_TOAST_FAILURE);
+			console.error("Failed to upload image:", error);
+			toast.error(localization.BLOG_FORMS_FEATURED_IMAGE_TOAST_FAILURE);
+		} finally {
+			setIsUploading(false);
+			setFeaturedImageUploading(false);
+		}
+	};
+
+	return (
+		<FormItem className="flex flex-col">
+			<FormLabel>
+				{localization.BLOG_FORMS_FEATURED_IMAGE_LABEL}
+				{isRequired && (
+					<span className="text-destructive">
+						{" "}
+						{localization.BLOG_FORMS_FEATURED_IMAGE_REQUIRED_ASTERISK}
+					</span>
+				)}
+			</FormLabel>
+			<FormControl>
+				<div className="space-y-2">
+					<div className="flex gap-2">
+						<Input
+							placeholder={
+								localization.BLOG_FORMS_FEATURED_IMAGE_INPUT_PLACEHOLDER
+							}
+							value={value || ""}
+							onChange={(e) => onChange(e.target.value)}
+							disabled={isUploading}
+						/>
+						<Button
+							type="button"
+							variant="outline"
+							onClick={() => fileInputRef.current?.click()}
+							disabled={isUploading}
+						>
+							{isUploading ? (
+								<>
+									<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+									{localization.BLOG_FORMS_FEATURED_IMAGE_UPLOADING_BUTTON}
+								</>
+							) : (
+								<>
+									<Upload className="mr-2 h-4 w-4" />
+									{localization.BLOG_FORMS_FEATURED_IMAGE_UPLOAD_BUTTON}
+								</>
+							)}
+						</Button>
+					</div>
+					<input
+						ref={fileInputRef}
+						type="file"
+						accept="image/*"
+						onChange={handleImageUpload}
+						className="hidden"
+					/>
+					{isUploading && (
+						<div className="flex items-center gap-2 text-muted-foreground text-sm">
+							<Loader2 className="h-4 w-4 animate-spin" />
+							{localization.BLOG_FORMS_FEATURED_IMAGE_UPLOADING_TEXT}
+						</div>
+					)}
+					{value && !isUploading && (
+						<div className="relative">
+							<ImageComponent
+								src={value}
+								alt={localization.BLOG_FORMS_FEATURED_IMAGE_PREVIEW_ALT}
+								className="h-auto w-full max-w-xs rounded-md border"
+								width={400}
+								height={400}
+							/>
+						</div>
+					)}
+				</div>
+			</FormControl>
+			<FormDescription />
+			<FormMessage />
+		</FormItem>
+	);
+}
+
+function DefaultImage({
+	src,
+	alt,
+	className,
+	width,
+	height,
+}: {
+	src: string;
+	alt: string;
+	className?: string;
+	width?: number;
+	height?: number;
+}) {
+	return (
+		<img
+			src={src}
+			alt={alt}
+			className={className}
+			width={width}
+			height={height}
+		/>
+	);
+}

package/src/plugins/blog/client/components/forms/markdown-editor-styles.css

@@ -0,0 +1,30 @@
+.milkdown-custom .milkdown {
+	border-radius: calc(var(--radius) - 2px);
+	--crepe-color-background: var(--background);
+	--crepe-color-surface: var(--background);
+	--crepe-color-surface-low: var(--muted);
+	--crepe-color-on-background: var(--foreground);
+	--crepe-color-on-surface: var(--secondary-foreground);
+	--crepe-color-on-surface-variant: var(--muted-foreground);
+	--crepe-color-primary: var(--primary);
+	--crepe-color-secondary: var(--secondary);
+	--crepe-color-on-secondary: var(--secondary-foreground);
+	--crepe-color-outline: var(--muted-foreground);
+	--crepe-color-inverse: var(--popover);
+	--crepe-color-on-inverse: var(--popover-foreground);
+	--crepe-color-inline-code: var(--secondary-foreground);
+	--crepe-color-error: var(--destructive);
+	--crepe-color-hover: var(--accent);
+	--crepe-color-selected: var(--secondary);
+	--crepe-color-inline-area: var(--secondary);
+	--crepe-font-title: var(--font-sans);
+	--crepe-font-default: var(--font-sans);
+	--crepe-font-code: var(--font-mono);
+	--crepe-shadow-1:
+		0px 1px 3px 1px color-mix(in oklch, var(--ring) 28%, transparent), 0px 1px
+		2px 0px color-mix(in oklch, var(--ring) 22%, transparent);
+	--crepe-shadow-2:
+		0px 2px 6px 2px color-mix(in oklch, var(--ring) 28%, transparent), 0px 1px
+		2px 0px color-mix(in oklch, var(--ring) 22%, transparent);
+	height: inherit;
+}

package/src/plugins/blog/client/components/forms/markdown-editor.tsx

@@ -0,0 +1,136 @@
+"use client";
+import { Crepe, CrepeFeature } from "@milkdown/crepe";
+import "@milkdown/crepe/theme/common/style.css";
+import "./markdown-editor-styles.css";
+
+import { cn, throttle } from "../../../utils";
+import { editorViewCtx, parserCtx } from "@milkdown/kit/core";
+import { listener, listenerCtx } from "@milkdown/kit/plugin/listener";
+import { Slice } from "@milkdown/kit/prose/model";
+import { Selection } from "@milkdown/kit/prose/state";
+import { useLayoutEffect, useRef, useState } from "react";
+import { usePluginOverrides } from "@btst/stack/context";
+import type { BlogPluginOverrides } from "../../overrides";
+import { BLOG_LOCALIZATION } from "../../localization";
+
+export function MarkdownEditor({
+	value,
+	onChange,
+	className,
+}: {
+	value?: string;
+	onChange?: (markdown: string) => void;
+	className?: string;
+}) {
+	const { uploadImage, localization } = usePluginOverrides<
+		BlogPluginOverrides,
+		Partial<BlogPluginOverrides>
+	>("blog", {
+		localization: BLOG_LOCALIZATION,
+	});
+	const containerRef = useRef<HTMLDivElement | null>(null);
+	const crepeRef = useRef<Crepe | null>(null);
+	const isReadyRef = useRef(false);
+	const [isReady, setIsReady] = useState(false);
+	const onChangeRef = useRef<typeof onChange>(onChange);
+	const initialValueRef = useRef<string>(value ?? "");
+	type ThrottledFn = ((markdown: string) => void) & {
+		cancel?: () => void;
+		flush?: () => void;
+	};
+	const throttledOnChangeRef = useRef<ThrottledFn | null>(null);
+
+	onChangeRef.current = onChange;
+
+	useLayoutEffect(() => {
+		if (crepeRef.current) return;
+		const container = containerRef.current;
+		if (!container) return;
+
+		const crepe = new Crepe({
+			root: container,
+			defaultValue: initialValueRef.current,
+			featureConfigs: {
+				[CrepeFeature.Placeholder]: {
+					text: localization.BLOG_FORMS_EDITOR_PLACEHOLDER,
+				},
+				[CrepeFeature.ImageBlock]: {
+					onUpload: async (file) => {
+						const url = await uploadImage(file);
+						return url;
+					},
+				},
+			},
+		});
+
+		// Prepare throttled onChange once per editor instance
+		throttledOnChangeRef.current = throttle((markdown: string) => {
+			if (onChangeRef.current) onChangeRef.current(markdown);
+		}, 200);
+
+		crepe.editor
+			.config((ctx) => {
+				ctx.get(listenerCtx).markdownUpdated((_, markdown) => {
+					throttledOnChangeRef.current?.(markdown);
+				});
+			})
+			.use(listener);
+
+		crepe.create().then(() => {
+			isReadyRef.current = true;
+			setIsReady(true);
+		});
+		crepeRef.current = crepe;
+
+		return () => {
+			try {
+				isReadyRef.current = false;
+				throttledOnChangeRef.current?.cancel?.();
+				throttledOnChangeRef.current = null;
+				crepe.destroy();
+			} finally {
+				crepeRef.current = null;
+			}
+		};
+	}, []);
+
+	useLayoutEffect(() => {
+		if (!isReady) return;
+		if (!crepeRef.current) return;
+		if (typeof value !== "string") return;
+
+		let currentMarkdown: string | undefined;
+		try {
+			currentMarkdown = crepeRef.current?.getMarkdown?.();
+		} catch {
+			// Editor may not have finished initializing its view/state; skip sync for now
+			return;
+		}
+
+		if (currentMarkdown === value) return;
+
+		crepeRef.current.editor.action((ctx) => {
+			const view = ctx.get(editorViewCtx);
+			if (view?.hasFocus?.() === true) return;
+			const parser = ctx.get(parserCtx);
+			const doc = parser(value);
+			if (!doc) return;
+
+			const state = view.state;
+			const selection = state.selection;
+			const from = selection.from;
+
+			let tr = state.tr;
+			tr = tr.replace(0, state.doc.content.size, new Slice(doc.content, 0, 0));
+
+			const docSize = doc.content.size;
+			const safeFrom = Math.max(1, Math.min(from, Math.max(1, docSize - 2)));
+			tr = tr.setSelection(Selection.near(tr.doc.resolve(safeFrom)));
+			view.dispatch(tr);
+		});
+	}, [value, isReady]);
+
+	return (
+		<div ref={containerRef} className={cn("milkdown-custom", className)} />
+	);
+}