@fuma-content/studio 0.1.0

package/dist/src/components/editor/ui/font-color-toolbar-button.mjs

@@ -0,0 +1,637 @@
+"use client";
+
+import { cn } from "../../../lib/utils.mjs";
+import { buttonVariants } from "../../ui/button.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../ui/dropdown-menu.mjs";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../ui/tooltip.mjs";
+import { ToolbarButton, ToolbarMenuGroup } from "../../ui/toolbar.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useComposedRef, useEditorRef, useEditorSelector } from "platejs/react";
+import React from "react";
+import { EraserIcon, PlusIcon } from "lucide-react";
+import debounce from "lodash.debounce";
+
+//#region src/components/editor/ui/font-color-toolbar-button.tsx
+function FontColorToolbarButton({ children, nodeType, tooltip }) {
+	const editor = useEditorRef();
+	const selectionDefined = useEditorSelector((editor$1) => !!editor$1.selection, []);
+	const color = useEditorSelector((editor$1) => editor$1.api.mark(nodeType), [nodeType]);
+	const [selectedColor, setSelectedColor] = React.useState();
+	const [open, setOpen] = React.useState(false);
+	const onToggle = React.useCallback((value = !open) => {
+		setOpen(value);
+	}, [open, setOpen]);
+	const updateColor = React.useCallback((value) => {
+		if (editor.selection) {
+			setSelectedColor(value);
+			editor.tf.select(editor.selection);
+			editor.tf.focus();
+			editor.tf.addMarks({ [nodeType]: value });
+		}
+	}, [editor, nodeType]);
+	const updateColorAndClose = React.useCallback((value) => {
+		updateColor(value);
+		onToggle();
+	}, [onToggle, updateColor]);
+	const clearColor = React.useCallback(() => {
+		if (editor.selection) {
+			editor.tf.select(editor.selection);
+			editor.tf.focus();
+			if (selectedColor) editor.tf.removeMarks(nodeType);
+			onToggle();
+		}
+	}, [
+		editor,
+		selectedColor,
+		onToggle,
+		nodeType
+	]);
+	React.useEffect(() => {
+		if (selectionDefined) setSelectedColor(color);
+	}, [color, selectionDefined]);
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		open,
+		onOpenChange: (value) => {
+			setOpen(value);
+		},
+		modal: false,
+		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(ToolbarButton, {
+				pressed: open,
+				tooltip,
+				children
+			})
+		}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			align: "start",
+			children: /* @__PURE__ */ jsx(ColorPicker, {
+				color: selectedColor || color,
+				clearColor,
+				colors: DEFAULT_COLORS,
+				customColors: DEFAULT_CUSTOM_COLORS,
+				updateColor: updateColorAndClose,
+				updateCustomColor: updateColor
+			})
+		})]
+	});
+}
+function PureColorPicker({ className, clearColor, color, colors, customColors, updateColor, updateCustomColor, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(ToolbarMenuGroup, {
+				label: "Custom Colors",
+				children: /* @__PURE__ */ jsx(ColorCustom, {
+					color,
+					className: "px-2",
+					colors,
+					customColors,
+					updateColor,
+					updateCustomColor
+				})
+			}),
+			/* @__PURE__ */ jsx(ToolbarMenuGroup, {
+				label: "Default Colors",
+				children: /* @__PURE__ */ jsx(ColorDropdownMenuItems, {
+					color,
+					className: "px-2",
+					colors,
+					updateColor
+				})
+			}),
+			color && /* @__PURE__ */ jsx(ToolbarMenuGroup, { children: /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				className: "p-2",
+				onClick: clearColor,
+				children: [/* @__PURE__ */ jsx(EraserIcon, {}), /* @__PURE__ */ jsx("span", { children: "Clear" })]
+			}) })
+		]
+	});
+}
+const ColorPicker = React.memo(PureColorPicker, (prev, next) => prev.color === next.color && prev.colors === next.colors && prev.customColors === next.customColors);
+function ColorCustom({ className, color, colors, customColors, updateColor, updateCustomColor, ...props }) {
+	const [customColor, setCustomColor] = React.useState();
+	const [value, setValue] = React.useState(color || "#000000");
+	React.useEffect(() => {
+		if (!color || customColors.some((c) => c.value === color) || colors.some((c) => c.value === color)) return;
+		setCustomColor(color);
+	}, [
+		color,
+		colors,
+		customColors
+	]);
+	const computedColors = React.useMemo(() => customColor ? [...customColors, {
+		isBrightColor: false,
+		name: "",
+		value: customColor
+	}] : customColors, [customColor, customColors]);
+	const updateCustomColorDebounced = React.useCallback(debounce(updateCustomColor, 100), [updateCustomColor]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative flex flex-col gap-4", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ColorDropdownMenuItems, {
+			color,
+			colors: computedColors,
+			updateColor,
+			children: /* @__PURE__ */ jsx(ColorInput, {
+				value,
+				onChange: (e) => {
+					setValue(e.target.value);
+					updateCustomColorDebounced(e.target.value);
+				},
+				children: /* @__PURE__ */ jsxs(DropdownMenuItem, {
+					className: cn(buttonVariants({
+						size: "icon",
+						variant: "outline"
+					}), "absolute top-1 right-2 bottom-2 flex size-8 items-center justify-center rounded-full"),
+					onSelect: (e) => {
+						e.preventDefault();
+					},
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "Custom"
+					}), /* @__PURE__ */ jsx(PlusIcon, {})]
+				})
+			})
+		})
+	});
+}
+function ColorInput({ children, className, value = "#000000", ...props }) {
+	const inputRef = React.useRef(null);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center",
+		children: [React.Children.map(children, (child) => {
+			if (!child) return child;
+			return React.cloneElement(child, { onClick: () => inputRef.current?.click() });
+		}), /* @__PURE__ */ jsx("input", {
+			...props,
+			ref: useComposedRef(props.ref, inputRef),
+			className: cn("size-0 overflow-hidden border-0 p-0", className),
+			value,
+			type: "color"
+		})]
+	});
+}
+function ColorDropdownMenuItem({ className, isBrightColor, isSelected, name, updateColor, value, ...props }) {
+	const content = /* @__PURE__ */ jsx(DropdownMenuItem, {
+		className: cn(buttonVariants({
+			size: "icon",
+			variant: "outline"
+		}), "my-1 flex size-6 items-center justify-center rounded-full border border-muted border-solid p-0 transition-all hover:scale-125", !isBrightColor && "border-transparent", isSelected && "border-2 border-primary", className),
+		style: { backgroundColor: value },
+		onSelect: (e) => {
+			e.preventDefault();
+			updateColor(value);
+		},
+		...props
+	});
+	return name ? /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { children: content }), /* @__PURE__ */ jsx(TooltipContent, {
+		className: "mb-1 capitalize",
+		children: name
+	})] }) : content;
+}
+function ColorDropdownMenuItems({ className, color, colors, updateColor, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("grid grid-cols-[repeat(10,1fr)] place-items-center gap-x-1", className),
+		...props,
+		children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [colors.map(({ isBrightColor, name, value }) => /* @__PURE__ */ jsx(ColorDropdownMenuItem, {
+			name,
+			value,
+			isBrightColor,
+			isSelected: color === value,
+			updateColor
+		}, name ?? value)), props.children] })
+	});
+}
+const DEFAULT_COLORS = [
+	{
+		isBrightColor: false,
+		name: "black",
+		value: "#000000"
+	},
+	{
+		isBrightColor: false,
+		name: "dark grey 4",
+		value: "#434343"
+	},
+	{
+		isBrightColor: false,
+		name: "dark grey 3",
+		value: "#666666"
+	},
+	{
+		isBrightColor: false,
+		name: "dark grey 2",
+		value: "#999999"
+	},
+	{
+		isBrightColor: false,
+		name: "dark grey 1",
+		value: "#B7B7B7"
+	},
+	{
+		isBrightColor: false,
+		name: "grey",
+		value: "#CCCCCC"
+	},
+	{
+		isBrightColor: false,
+		name: "light grey 1",
+		value: "#D9D9D9"
+	},
+	{
+		isBrightColor: true,
+		name: "light grey 2",
+		value: "#EFEFEF"
+	},
+	{
+		isBrightColor: true,
+		name: "light grey 3",
+		value: "#F3F3F3"
+	},
+	{
+		isBrightColor: true,
+		name: "white",
+		value: "#FFFFFF"
+	},
+	{
+		isBrightColor: false,
+		name: "red berry",
+		value: "#980100"
+	},
+	{
+		isBrightColor: false,
+		name: "red",
+		value: "#FE0000"
+	},
+	{
+		isBrightColor: false,
+		name: "orange",
+		value: "#FE9900"
+	},
+	{
+		isBrightColor: true,
+		name: "yellow",
+		value: "#FEFF00"
+	},
+	{
+		isBrightColor: false,
+		name: "green",
+		value: "#00FF00"
+	},
+	{
+		isBrightColor: false,
+		name: "cyan",
+		value: "#00FFFF"
+	},
+	{
+		isBrightColor: false,
+		name: "cornflower blue",
+		value: "#4B85E8"
+	},
+	{
+		isBrightColor: false,
+		name: "blue",
+		value: "#1300FF"
+	},
+	{
+		isBrightColor: false,
+		name: "purple",
+		value: "#9900FF"
+	},
+	{
+		isBrightColor: false,
+		name: "magenta",
+		value: "#FF00FF"
+	},
+	{
+		isBrightColor: false,
+		name: "light red berry 3",
+		value: "#E6B8AF"
+	},
+	{
+		isBrightColor: false,
+		name: "light red 3",
+		value: "#F4CCCC"
+	},
+	{
+		isBrightColor: true,
+		name: "light orange 3",
+		value: "#FCE4CD"
+	},
+	{
+		isBrightColor: true,
+		name: "light yellow 3",
+		value: "#FFF2CC"
+	},
+	{
+		isBrightColor: true,
+		name: "light green 3",
+		value: "#D9EAD3"
+	},
+	{
+		isBrightColor: false,
+		name: "light cyan 3",
+		value: "#D0DFE3"
+	},
+	{
+		isBrightColor: false,
+		name: "light cornflower blue 3",
+		value: "#C9DAF8"
+	},
+	{
+		isBrightColor: true,
+		name: "light blue 3",
+		value: "#CFE1F3"
+	},
+	{
+		isBrightColor: true,
+		name: "light purple 3",
+		value: "#D9D2E9"
+	},
+	{
+		isBrightColor: true,
+		name: "light magenta 3",
+		value: "#EAD1DB"
+	},
+	{
+		isBrightColor: false,
+		name: "light red berry 2",
+		value: "#DC7E6B"
+	},
+	{
+		isBrightColor: false,
+		name: "light red 2",
+		value: "#EA9999"
+	},
+	{
+		isBrightColor: false,
+		name: "light orange 2",
+		value: "#F9CB9C"
+	},
+	{
+		isBrightColor: true,
+		name: "light yellow 2",
+		value: "#FFE598"
+	},
+	{
+		isBrightColor: false,
+		name: "light green 2",
+		value: "#B7D6A8"
+	},
+	{
+		isBrightColor: false,
+		name: "light cyan 2",
+		value: "#A1C4C9"
+	},
+	{
+		isBrightColor: false,
+		name: "light cornflower blue 2",
+		value: "#A4C2F4"
+	},
+	{
+		isBrightColor: false,
+		name: "light blue 2",
+		value: "#9FC5E8"
+	},
+	{
+		isBrightColor: false,
+		name: "light purple 2",
+		value: "#B5A7D5"
+	},
+	{
+		isBrightColor: false,
+		name: "light magenta 2",
+		value: "#D5A6BD"
+	},
+	{
+		isBrightColor: false,
+		name: "light red berry 1",
+		value: "#CC4125"
+	},
+	{
+		isBrightColor: false,
+		name: "light red 1",
+		value: "#E06666"
+	},
+	{
+		isBrightColor: false,
+		name: "light orange 1",
+		value: "#F6B26B"
+	},
+	{
+		isBrightColor: false,
+		name: "light yellow 1",
+		value: "#FFD966"
+	},
+	{
+		isBrightColor: false,
+		name: "light green 1",
+		value: "#93C47D"
+	},
+	{
+		isBrightColor: false,
+		name: "light cyan 1",
+		value: "#76A5AE"
+	},
+	{
+		isBrightColor: false,
+		name: "light cornflower blue 1",
+		value: "#6C9EEB"
+	},
+	{
+		isBrightColor: false,
+		name: "light blue 1",
+		value: "#6FA8DC"
+	},
+	{
+		isBrightColor: false,
+		name: "light purple 1",
+		value: "#8D7CC3"
+	},
+	{
+		isBrightColor: false,
+		name: "light magenta 1",
+		value: "#C27BA0"
+	},
+	{
+		isBrightColor: false,
+		name: "dark red berry 1",
+		value: "#A61B00"
+	},
+	{
+		isBrightColor: false,
+		name: "dark red 1",
+		value: "#CC0000"
+	},
+	{
+		isBrightColor: false,
+		name: "dark orange 1",
+		value: "#E59138"
+	},
+	{
+		isBrightColor: false,
+		name: "dark yellow 1",
+		value: "#F1C231"
+	},
+	{
+		isBrightColor: false,
+		name: "dark green 1",
+		value: "#6AA74F"
+	},
+	{
+		isBrightColor: false,
+		name: "dark cyan 1",
+		value: "#45818E"
+	},
+	{
+		isBrightColor: false,
+		name: "dark cornflower blue 1",
+		value: "#3B78D8"
+	},
+	{
+		isBrightColor: false,
+		name: "dark blue 1",
+		value: "#3E84C6"
+	},
+	{
+		isBrightColor: false,
+		name: "dark purple 1",
+		value: "#664EA6"
+	},
+	{
+		isBrightColor: false,
+		name: "dark magenta 1",
+		value: "#A64D78"
+	},
+	{
+		isBrightColor: false,
+		name: "dark red berry 2",
+		value: "#84200D"
+	},
+	{
+		isBrightColor: false,
+		name: "dark red 2",
+		value: "#990001"
+	},
+	{
+		isBrightColor: false,
+		name: "dark orange 2",
+		value: "#B45F05"
+	},
+	{
+		isBrightColor: false,
+		name: "dark yellow 2",
+		value: "#BF9002"
+	},
+	{
+		isBrightColor: false,
+		name: "dark green 2",
+		value: "#38761D"
+	},
+	{
+		isBrightColor: false,
+		name: "dark cyan 2",
+		value: "#124F5C"
+	},
+	{
+		isBrightColor: false,
+		name: "dark cornflower blue 2",
+		value: "#1155CB"
+	},
+	{
+		isBrightColor: false,
+		name: "dark blue 2",
+		value: "#0C5394"
+	},
+	{
+		isBrightColor: false,
+		name: "dark purple 2",
+		value: "#351C75"
+	},
+	{
+		isBrightColor: false,
+		name: "dark magenta 2",
+		value: "#741B47"
+	},
+	{
+		isBrightColor: false,
+		name: "dark red berry 3",
+		value: "#5B0F00"
+	},
+	{
+		isBrightColor: false,
+		name: "dark red 3",
+		value: "#660000"
+	},
+	{
+		isBrightColor: false,
+		name: "dark orange 3",
+		value: "#783F04"
+	},
+	{
+		isBrightColor: false,
+		name: "dark yellow 3",
+		value: "#7E6000"
+	},
+	{
+		isBrightColor: false,
+		name: "dark green 3",
+		value: "#274E12"
+	},
+	{
+		isBrightColor: false,
+		name: "dark cyan 3",
+		value: "#0D343D"
+	},
+	{
+		isBrightColor: false,
+		name: "dark cornflower blue 3",
+		value: "#1B4487"
+	},
+	{
+		isBrightColor: false,
+		name: "dark blue 3",
+		value: "#083763"
+	},
+	{
+		isBrightColor: false,
+		name: "dark purple 3",
+		value: "#1F124D"
+	},
+	{
+		isBrightColor: false,
+		name: "dark magenta 3",
+		value: "#4C1130"
+	}
+];
+const DEFAULT_CUSTOM_COLORS = [
+	{
+		isBrightColor: false,
+		name: "dark orange 3",
+		value: "#783F04"
+	},
+	{
+		isBrightColor: false,
+		name: "dark grey 3",
+		value: "#666666"
+	},
+	{
+		isBrightColor: false,
+		name: "dark grey 2",
+		value: "#999999"
+	},
+	{
+		isBrightColor: false,
+		name: "light cornflower blue 1",
+		value: "#6C9EEB"
+	},
+	{
+		isBrightColor: false,
+		name: "dark magenta 3",
+		value: "#4C1130"
+	}
+];
+
+//#endregion
+export { ColorDropdownMenuItems, DEFAULT_COLORS, FontColorToolbarButton };

package/dist/src/components/editor/ui/font-size-toolbar-button.mjs

@@ -0,0 +1,83 @@
+"use client";
+
+import { cn } from "../../../lib/utils.mjs";
+import { ToolbarButton } from "../../ui/toolbar.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEditorPlugin, useEditorSelector } from "platejs/react";
+import * as React$1 from "react";
+import { KEYS } from "platejs";
+import { Minus, Plus } from "lucide-react";
+import { toUnitLess } from "@platejs/basic-styles";
+import { FontSizePlugin } from "@platejs/basic-styles/react";
+
+//#region src/components/editor/ui/font-size-toolbar-button.tsx
+const DEFAULT_FONT_SIZE = "16";
+const FONT_SIZE_MAP = {
+	h1: "36",
+	h2: "24",
+	h3: "20"
+};
+function FontSizeToolbarButton() {
+	const [inputValue, setInputValue] = React$1.useState(DEFAULT_FONT_SIZE);
+	const [isFocused, setIsFocused] = React$1.useState(false);
+	const { editor, tf } = useEditorPlugin(FontSizePlugin);
+	const cursorFontSize = useEditorSelector((editor$1) => {
+		const fontSize = editor$1.api.marks()?.[KEYS.fontSize];
+		if (fontSize) return toUnitLess(fontSize);
+		const [block] = editor$1.api.block() || [];
+		if (!block?.type) return DEFAULT_FONT_SIZE;
+		return block.type in FONT_SIZE_MAP ? FONT_SIZE_MAP[block.type] : DEFAULT_FONT_SIZE;
+	}, []);
+	const handleInputChange = () => {
+		const newSize = toUnitLess(inputValue);
+		if (Number.parseInt(newSize, 10) < 1 || Number.parseInt(newSize, 10) > 100) {
+			editor.tf.focus();
+			return;
+		}
+		if (newSize !== toUnitLess(cursorFontSize)) tf.fontSize.addMark(`${newSize}px`);
+		editor.tf.focus();
+	};
+	const handleFontSizeChange = (delta) => {
+		const newSize = Number(displayValue) + delta;
+		tf.fontSize.addMark(`${newSize}px`);
+		editor.tf.focus();
+	};
+	const displayValue = isFocused ? inputValue : cursorFontSize;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-7 items-center gap-1 rounded-md bg-muted/60 p-0",
+		children: [
+			/* @__PURE__ */ jsx(ToolbarButton, {
+				onClick: () => handleFontSizeChange(-1),
+				children: /* @__PURE__ */ jsx(Minus, {})
+			}),
+			/* @__PURE__ */ jsx("input", {
+				className: cn("h-full w-10 shrink-0 bg-transparent px-1 text-center text-sm hover:bg-muted"),
+				value: displayValue,
+				onBlur: () => {
+					setIsFocused(false);
+					handleInputChange();
+				},
+				onChange: (e) => setInputValue(e.target.value),
+				onFocus: () => {
+					setIsFocused(true);
+					setInputValue(toUnitLess(cursorFontSize));
+				},
+				onKeyDown: (e) => {
+					if (e.key === "Enter") {
+						e.preventDefault();
+						handleInputChange();
+					}
+				},
+				"data-plate-focus": "true",
+				type: "text"
+			}),
+			/* @__PURE__ */ jsx(ToolbarButton, {
+				onClick: () => handleFontSizeChange(1),
+				children: /* @__PURE__ */ jsx(Plus, {})
+			})
+		]
+	});
+}
+
+//#endregion
+export { FontSizeToolbarButton };