@fuma-content/studio 1.0.0 → 1.0.2

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

@@ -1,637 +0,0 @@
-"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

@@ -1,83 +0,0 @@
-"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 };