@fuma-content/studio 1.0.0 → 1.0.2

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

@@ -1,46 +0,0 @@
-"use client";
-
-import { InlineCombobox, InlineComboboxContent, InlineComboboxEmpty, InlineComboboxInput, InlineComboboxItem, InlineComboboxList } from "./inline-combobox.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { PlateElement, usePluginOption } from "platejs/react";
-import * as React$1 from "react";
-import { EmojiPlugin } from "@platejs/emoji/react";
-import { EmojiInlineIndexSearch, insertEmoji } from "@platejs/emoji";
-
-//#region src/components/editor/ui/emoji-node.tsx
-const TRAILING_COLON_REGEX = /:$/;
-function EmojiInputElement(props) {
-	const { children, editor, element } = props;
-	const data = usePluginOption(EmojiPlugin, "data");
-	const [value, setValue] = React$1.useState("");
-	const deferredValue = React$1.useDeferredValue(value);
-	const filteredEmojis = React$1.useMemo(() => {
-		if (deferredValue.trim().length === 0) return [];
-		return EmojiInlineIndexSearch.getInstance(data).search(deferredValue.replace(TRAILING_COLON_REGEX, "")).get();
-	}, [data, deferredValue]);
-	return /* @__PURE__ */ jsxs(PlateElement, {
-		as: "span",
-		...props,
-		children: [/* @__PURE__ */ jsxs(InlineCombobox, {
-			inputValue: value,
-			onInputValueChange: setValue,
-			element,
-			trigger: ":",
-			filteredItems: filteredEmojis,
-			children: [/* @__PURE__ */ jsx(InlineComboboxInput, {}), /* @__PURE__ */ jsxs(InlineComboboxContent, { children: [/* @__PURE__ */ jsx(InlineComboboxEmpty, { children: "No results" }), /* @__PURE__ */ jsx(InlineComboboxList, { children: (emoji) => /* @__PURE__ */ jsxs(InlineComboboxItem, {
-				value: emoji,
-				onClick: () => {
-					insertEmoji(editor, emoji);
-				},
-				children: [
-					emoji.skins[0].native,
-					" ",
-					emoji.name
-				]
-			}, emoji.id) })] })]
-		}), children]
-	});
-}
-
-//#endregion
-export { EmojiInputElement };

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

@@ -1,415 +0,0 @@
-"use client";
-
-import { cn } from "../../../lib/utils.mjs";
-import { Button } from "../../ui/button.mjs";
-import { Tooltip as Tooltip$1, TooltipContent, TooltipProvider, TooltipTrigger } from "../../ui/tooltip.mjs";
-import { ToolbarButton } from "../../ui/toolbar.mjs";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import * as React$1 from "react";
-import { AppleIcon, ClockIcon, CompassIcon, FlagIcon, LeafIcon, LightbulbIcon, MusicIcon, SearchIcon, SmileIcon, StarIcon, XIcon } from "lucide-react";
-import { Popover } from "radix-ui";
-import { useEmojiDropdownMenuState } from "@platejs/emoji/react";
-import { EmojiSettings } from "@platejs/emoji";
-
-//#region src/components/editor/ui/emoji-toolbar-button.tsx
-function EmojiToolbarButton({ options, ...props }) {
-	const { emojiPickerState, isOpen, setIsOpen } = useEmojiDropdownMenuState(options);
-	return /* @__PURE__ */ jsx(EmojiPopover, {
-		control: /* @__PURE__ */ jsx(ToolbarButton, {
-			pressed: isOpen,
-			tooltip: "Emoji",
-			isDropdown: true,
-			...props,
-			children: /* @__PURE__ */ jsx(SmileIcon, {})
-		}),
-		isOpen,
-		setIsOpen,
-		children: /* @__PURE__ */ jsx(EmojiPicker, {
-			...emojiPickerState,
-			isOpen,
-			setIsOpen,
-			settings: options?.settings
-		})
-	});
-}
-function EmojiPopover({ children, control, isOpen, setIsOpen }) {
-	return /* @__PURE__ */ jsxs(Popover.Root, {
-		open: isOpen,
-		onOpenChange: setIsOpen,
-		children: [/* @__PURE__ */ jsx(Popover.Trigger, {
-			asChild: true,
-			children: control
-		}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Content, {
-			className: "z-100",
-			children
-		}) })]
-	});
-}
-function EmojiPicker({ clearSearch, emoji, emojiLibrary, focusedCategory, hasFound, i18n, icons = {
-	categories: emojiCategoryIcons,
-	search: emojiSearchIcons
-}, isSearching, refs, searchResult, searchValue, setSearch, settings = EmojiSettings, visibleCategories, handleCategoryClick, onMouseOver, onSelectEmoji }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex flex-col rounded-xl bg-popover text-popover-foreground", "h-[23rem] w-80 border shadow-md"),
-		children: [
-			/* @__PURE__ */ jsx(EmojiPickerNavigation, {
-				onClick: handleCategoryClick,
-				emojiLibrary,
-				focusedCategory,
-				i18n,
-				icons
-			}),
-			/* @__PURE__ */ jsx(EmojiPickerSearchBar, {
-				i18n,
-				searchValue,
-				setSearch,
-				children: /* @__PURE__ */ jsx(EmojiPickerSearchAndClear, {
-					clearSearch,
-					i18n,
-					searchValue
-				})
-			}),
-			/* @__PURE__ */ jsx(EmojiPickerContent, {
-				onMouseOver,
-				onSelectEmoji,
-				emojiLibrary,
-				i18n,
-				isSearching,
-				refs,
-				searchResult,
-				settings,
-				visibleCategories
-			}),
-			/* @__PURE__ */ jsx(EmojiPickerPreview, {
-				emoji,
-				hasFound,
-				i18n,
-				isSearching
-			})
-		]
-	});
-}
-const EmojiButton = React$1.memo(function EmojiButton$1({ emoji, index, onMouseOver, onSelect }) {
-	return /* @__PURE__ */ jsxs("button", {
-		className: "group relative flex size-9 cursor-pointer items-center justify-center border-none bg-transparent text-2xl leading-none",
-		onClick: () => onSelect(emoji),
-		onMouseEnter: () => onMouseOver(emoji),
-		onMouseLeave: () => onMouseOver(),
-		"aria-label": emoji.skins[0].native,
-		"data-index": index,
-		tabIndex: -1,
-		type: "button",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "absolute inset-0 rounded-full opacity-0 group-hover:opacity-100",
-			"aria-hidden": "true"
-		}), /* @__PURE__ */ jsx("span", {
-			className: "relative",
-			style: { fontFamily: "\"Apple Color Emoji\", \"Segoe UI Emoji\", NotoColorEmoji, \"Noto Color Emoji\", \"Segoe UI Symbol\", \"Android Emoji\", EmojiSymbols" },
-			"data-emoji-set": "native",
-			children: emoji.skins[0].native
-		})]
-	});
-});
-const RowOfButtons = React$1.memo(function RowOfButtons$1({ emojiLibrary, row, onMouseOver, onSelectEmoji }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: "flex",
-		"data-index": row.id,
-		children: row.elements.map((emojiId, index) => /* @__PURE__ */ jsx(EmojiButton, {
-			onMouseOver,
-			onSelect: onSelectEmoji,
-			emoji: emojiLibrary.getEmoji(emojiId),
-			index
-		}, emojiId))
-	}, row.id);
-});
-function EmojiPickerContent({ emojiLibrary, i18n, isSearching = false, refs, searchResult, settings = EmojiSettings, visibleCategories, onMouseOver, onSelectEmoji }) {
-	const getRowWidth = settings.perLine.value * settings.buttonSize.value;
-	const isCategoryVisible = React$1.useCallback((categoryId) => visibleCategories.has(categoryId) ? visibleCategories.get(categoryId) : false, [visibleCategories]);
-	const EmojiList = React$1.useCallback(() => emojiLibrary.getGrid().sections().map(({ id: categoryId }) => {
-		const section = emojiLibrary.getGrid().section(categoryId);
-		const { buttonSize } = settings;
-		return /* @__PURE__ */ jsxs("div", {
-			ref: section.root,
-			style: { width: getRowWidth },
-			"data-id": categoryId,
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "-top-px sticky z-1 bg-popover/90 p-1 py-2 font-semibold text-sm backdrop-blur-xs",
-				children: i18n.categories[categoryId]
-			}), /* @__PURE__ */ jsx("div", {
-				className: "relative flex flex-wrap",
-				style: { height: section.getRows().length * buttonSize.value },
-				children: isCategoryVisible(categoryId) && section.getRows().map((row) => /* @__PURE__ */ jsx(RowOfButtons, {
-					onMouseOver,
-					onSelectEmoji,
-					emojiLibrary,
-					row
-				}, row.id))
-			})]
-		}, categoryId);
-	}), [
-		emojiLibrary,
-		getRowWidth,
-		i18n.categories,
-		isCategoryVisible,
-		onSelectEmoji,
-		onMouseOver,
-		settings
-	]);
-	const SearchList = React$1.useCallback(() => /* @__PURE__ */ jsxs("div", {
-		style: { width: getRowWidth },
-		"data-id": "search",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "-top-px sticky z-1 bg-popover/90 p-1 py-2 font-semibold text-card-foreground text-sm backdrop-blur-xs",
-			children: i18n.searchResult
-		}), /* @__PURE__ */ jsx("div", {
-			className: "relative flex flex-wrap",
-			children: searchResult.map((emoji, index) => /* @__PURE__ */ jsx(EmojiButton, {
-				onMouseOver,
-				onSelect: onSelectEmoji,
-				emoji: emojiLibrary.getEmoji(emoji.id),
-				index
-			}, emoji.id))
-		})]
-	}), [
-		emojiLibrary,
-		getRowWidth,
-		i18n.searchResult,
-		searchResult,
-		onSelectEmoji,
-		onMouseOver
-	]);
-	return /* @__PURE__ */ jsx("div", {
-		ref: refs.current.contentRoot,
-		className: "h-full min-h-[50%] overflow-y-auto overflow-x-hidden px-2",
-		"data-id": "scroll",
-		children: /* @__PURE__ */ jsx("div", {
-			ref: refs.current.content,
-			className: "h-full",
-			children: isSearching ? SearchList() : EmojiList()
-		})
-	});
-}
-function EmojiPickerSearchBar({ children, i18n, searchValue, setSearch }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: "flex items-center px-2",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "relative flex grow items-center",
-			children: [/* @__PURE__ */ jsx("input", {
-				className: "block w-full appearance-none rounded-full border-0 bg-muted px-10 py-2 text-sm outline-none placeholder:text-muted-foreground focus-visible:outline-none",
-				value: searchValue,
-				onChange: (event) => setSearch(event.target.value),
-				placeholder: i18n.search,
-				"aria-label": "Search",
-				autoComplete: "off",
-				type: "text",
-				autoFocus: true
-			}), children]
-		})
-	});
-}
-function EmojiPickerSearchAndClear({ clearSearch, i18n, searchValue }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center text-foreground",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: cn("-translate-y-1/2 absolute top-1/2 left-2.5 z-10 flex size-5 items-center justify-center text-foreground"),
-			children: emojiSearchIcons.loupe
-		}), searchValue && /* @__PURE__ */ jsx(Button, {
-			size: "icon",
-			variant: "ghost",
-			className: cn("-translate-y-1/2 absolute top-1/2 right-0.5 flex size-8 cursor-pointer items-center justify-center rounded-full border-none bg-transparent text-popover-foreground hover:bg-transparent"),
-			onClick: clearSearch,
-			title: i18n.clear,
-			"aria-label": "Clear",
-			type: "button",
-			children: emojiSearchIcons.delete
-		})]
-	});
-}
-function EmojiPreview({ emoji }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex h-14 max-h-14 min-h-14 items-center border-muted border-t p-2",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "flex items-center justify-center text-2xl",
-			children: emoji?.skins[0].native
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "overflow-hidden pl-2",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "truncate font-semibold text-sm",
-				children: emoji?.name
-			}), /* @__PURE__ */ jsx("div", {
-				className: "truncate text-sm",
-				children: `:${emoji?.id}:`
-			})]
-		})]
-	});
-}
-function NoEmoji({ i18n }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex h-14 max-h-14 min-h-14 items-center border-muted border-t p-2",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "flex items-center justify-center text-2xl",
-			children: "😢"
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "overflow-hidden pl-2",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "truncate font-bold text-sm",
-				children: i18n.searchNoResultsTitle
-			}), /* @__PURE__ */ jsx("div", {
-				className: "truncate text-sm",
-				children: i18n.searchNoResultsSubtitle
-			})]
-		})]
-	});
-}
-function PickAnEmoji({ i18n }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex h-14 max-h-14 min-h-14 items-center border-muted border-t p-2",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "flex items-center justify-center text-2xl",
-			children: "☝️"
-		}), /* @__PURE__ */ jsx("div", {
-			className: "overflow-hidden pl-2",
-			children: /* @__PURE__ */ jsx("div", {
-				className: "truncate font-semibold text-sm",
-				children: i18n.pick
-			})
-		})]
-	});
-}
-function EmojiPickerPreview({ emoji, hasFound = true, i18n, isSearching = false, ...props }) {
-	const showPickEmoji = !emoji && (!isSearching || hasFound);
-	const showNoEmoji = isSearching && !hasFound;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		emoji && !showNoEmoji && !showNoEmoji && /* @__PURE__ */ jsx(EmojiPreview, {
-			emoji,
-			...props
-		}),
-		showPickEmoji && /* @__PURE__ */ jsx(PickAnEmoji, {
-			i18n,
-			...props
-		}),
-		showNoEmoji && /* @__PURE__ */ jsx(NoEmoji, {
-			i18n,
-			...props
-		})
-	] });
-}
-function EmojiPickerNavigation({ emojiLibrary, focusedCategory, i18n, icons, onClick }) {
-	return /* @__PURE__ */ jsx(TooltipProvider, {
-		delayDuration: 500,
-		children: /* @__PURE__ */ jsx("nav", {
-			id: "emoji-nav",
-			className: "mb-2.5 border-0 border-b border-b-border border-solid p-1.5",
-			children: /* @__PURE__ */ jsx("div", {
-				className: "relative flex items-center justify-evenly",
-				children: emojiLibrary.getGrid().sections().map(({ id }) => /* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-					asChild: true,
-					children: /* @__PURE__ */ jsx(Button, {
-						size: "sm",
-						variant: "ghost",
-						className: cn("h-fit rounded-full fill-current p-1.5 text-muted-foreground hover:bg-muted hover:text-muted-foreground", id === focusedCategory && "pointer-events-none bg-accent fill-current text-accent-foreground"),
-						onClick: () => {
-							onClick(id);
-						},
-						"aria-label": i18n.categories[id],
-						type: "button",
-						children: /* @__PURE__ */ jsx("span", {
-							className: "inline-flex size-5 items-center justify-center",
-							children: icons.categories[id].outline
-						})
-					})
-				}), /* @__PURE__ */ jsx(TooltipContent, {
-					side: "bottom",
-					children: i18n.categories[id]
-				})] }, id))
-			})
-		})
-	});
-}
-const emojiCategoryIcons = {
-	activity: {
-		outline: /* @__PURE__ */ jsxs("svg", {
-			className: "size-full",
-			fill: "none",
-			stroke: "currentColor",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "2",
-			viewBox: "0 0 24 24",
-			xmlns: "http://www.w3.org/2000/svg",
-			children: [
-				/* @__PURE__ */ jsx("circle", {
-					cx: "12",
-					cy: "12",
-					r: "10"
-				}),
-				/* @__PURE__ */ jsx("path", { d: "M2.1 13.4A10.1 10.1 0 0 0 13.4 2.1" }),
-				/* @__PURE__ */ jsx("path", { d: "m5 4.9 14 14.2" }),
-				/* @__PURE__ */ jsx("path", { d: "M21.9 10.6a10.1 10.1 0 0 0-11.3 11.3" })
-			]
-		}),
-		solid: /* @__PURE__ */ jsxs("svg", {
-			className: "size-full",
-			fill: "none",
-			stroke: "currentColor",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "2",
-			viewBox: "0 0 24 24",
-			xmlns: "http://www.w3.org/2000/svg",
-			children: [
-				/* @__PURE__ */ jsx("circle", {
-					cx: "12",
-					cy: "12",
-					r: "10"
-				}),
-				/* @__PURE__ */ jsx("path", { d: "M2.1 13.4A10.1 10.1 0 0 0 13.4 2.1" }),
-				/* @__PURE__ */ jsx("path", { d: "m5 4.9 14 14.2" }),
-				/* @__PURE__ */ jsx("path", { d: "M21.9 10.6a10.1 10.1 0 0 0-11.3 11.3" })
-			]
-		})
-	},
-	custom: {
-		outline: /* @__PURE__ */ jsx(StarIcon, { className: "size-full" }),
-		solid: /* @__PURE__ */ jsx(StarIcon, { className: "size-full" })
-	},
-	flags: {
-		outline: /* @__PURE__ */ jsx(FlagIcon, { className: "size-full" }),
-		solid: /* @__PURE__ */ jsx(FlagIcon, { className: "size-full" })
-	},
-	foods: {
-		outline: /* @__PURE__ */ jsx(AppleIcon, { className: "size-full" }),
-		solid: /* @__PURE__ */ jsx(AppleIcon, { className: "size-full" })
-	},
-	frequent: {
-		outline: /* @__PURE__ */ jsx(ClockIcon, { className: "size-full" }),
-		solid: /* @__PURE__ */ jsx(ClockIcon, { className: "size-full" })
-	},
-	nature: {
-		outline: /* @__PURE__ */ jsx(LeafIcon, { className: "size-full" }),
-		solid: /* @__PURE__ */ jsx(LeafIcon, { className: "size-full" })
-	},
-	objects: {
-		outline: /* @__PURE__ */ jsx(LightbulbIcon, { className: "size-full" }),
-		solid: /* @__PURE__ */ jsx(LightbulbIcon, { className: "size-full" })
-	},
-	people: {
-		outline: /* @__PURE__ */ jsx(SmileIcon, { className: "size-full" }),
-		solid: /* @__PURE__ */ jsx(SmileIcon, { className: "size-full" })
-	},
-	places: {
-		outline: /* @__PURE__ */ jsx(CompassIcon, { className: "size-full" }),
-		solid: /* @__PURE__ */ jsx(CompassIcon, { className: "size-full" })
-	},
-	symbols: {
-		outline: /* @__PURE__ */ jsx(MusicIcon, { className: "size-full" }),
-		solid: /* @__PURE__ */ jsx(MusicIcon, { className: "size-full" })
-	}
-};
-const emojiSearchIcons = {
-	delete: /* @__PURE__ */ jsx(XIcon, { className: "size-4 text-current" }),
-	loupe: /* @__PURE__ */ jsx(SearchIcon, { className: "size-4 text-current" })
-};
-
-//#endregion
-export { EmojiPicker, EmojiPopover, EmojiToolbarButton };

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

@@ -1,65 +0,0 @@
-import { cn } from "../../../lib/utils.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { RadicalIcon } from "lucide-react";
-import { SlateElement } from "platejs/static";
-import { getEquationHtml } from "@platejs/math";
-
-//#region src/components/editor/ui/equation-node-static.tsx
-function EquationElementStatic(props) {
-	const { element } = props;
-	const html = getEquationHtml({
-		element,
-		options: {
-			displayMode: true,
-			errorColor: "#cc0000",
-			fleqn: false,
-			leqno: false,
-			macros: { "\\f": "#1f(#2)" },
-			output: "htmlAndMathml",
-			strict: "warn",
-			throwOnError: false,
-			trust: false
-		}
-	});
-	return /* @__PURE__ */ jsxs(SlateElement, {
-		className: "my-1",
-		...props,
-		children: [/* @__PURE__ */ jsx("div", {
-			className: cn("group flex select-none items-center justify-center rounded-sm hover:bg-primary/10 data-[selected=true]:bg-primary/10", element.texExpression.length === 0 ? "bg-muted p-3 pr-9" : "px-2 py-1"),
-			children: element.texExpression.length > 0 ? /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: html } }) : /* @__PURE__ */ jsxs("div", {
-				className: "flex h-7 w-full items-center gap-2 whitespace-nowrap text-muted-foreground text-sm",
-				children: [/* @__PURE__ */ jsx(RadicalIcon, { className: "size-6 text-muted-foreground/80" }), /* @__PURE__ */ jsx("div", { children: "Add a Tex equation" })]
-			})
-		}), props.children]
-	});
-}
-function InlineEquationElementStatic(props) {
-	const html = getEquationHtml({
-		element: props.element,
-		options: {
-			displayMode: true,
-			errorColor: "#cc0000",
-			fleqn: false,
-			leqno: false,
-			macros: { "\\f": "#1f(#2)" },
-			output: "htmlAndMathml",
-			strict: "warn",
-			throwOnError: false,
-			trust: false
-		}
-	});
-	return /* @__PURE__ */ jsxs(SlateElement, {
-		...props,
-		className: "inline-block select-none rounded-sm [&_.katex-display]:my-0",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: cn("after:-top-0.5 after:-left-1 after:absolute after:inset-0 after:z-1 after:h-[calc(100%)+4px] after:w-[calc(100%+8px)] after:rounded-sm after:content-[\"\"]", "h-6", props.element.texExpression.length === 0 && "text-muted-foreground after:bg-neutral-500/10"),
-			children: /* @__PURE__ */ jsx("span", {
-				className: cn(props.element.texExpression.length === 0 && "hidden", "font-mono leading-none"),
-				dangerouslySetInnerHTML: { __html: html }
-			})
-		}), props.children]
-	});
-}
-
-//#endregion
-export { EquationElementStatic, InlineEquationElementStatic };

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

@@ -1,159 +0,0 @@
-"use client";
-
-import { cn } from "../../../lib/utils.mjs";
-import { Button } from "../../ui/button.mjs";
-import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { PlateElement, createPrimitiveComponent, useEditorRef, useEditorSelector, useElement, useReadOnly, useSelected } from "platejs/react";
-import * as React$1 from "react";
-import { BlockSelectionPlugin } from "@platejs/selection/react";
-import { CornerDownLeftIcon, RadicalIcon } from "lucide-react";
-import { useEquationElement, useEquationInput } from "@platejs/math/react";
-import TextareaAutosize from "react-textarea-autosize";
-
-//#region src/components/editor/ui/equation-node.tsx
-function EquationElement(props) {
-	const selected = useSelected();
-	const [open, setOpen] = React$1.useState(selected);
-	const katexRef = React$1.useRef(null);
-	useEquationElement({
-		element: props.element,
-		katexRef,
-		options: {
-			displayMode: true,
-			errorColor: "#cc0000",
-			fleqn: false,
-			leqno: false,
-			macros: { "\\f": "#1f(#2)" },
-			output: "htmlAndMathml",
-			strict: "warn",
-			throwOnError: false,
-			trust: false
-		}
-	});
-	return /* @__PURE__ */ jsxs(PlateElement, {
-		className: "my-1",
-		...props,
-		children: [/* @__PURE__ */ jsxs(Popover, {
-			open,
-			onOpenChange: setOpen,
-			modal: false,
-			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-				asChild: true,
-				children: /* @__PURE__ */ jsx("div", {
-					className: cn("group flex cursor-pointer select-none items-center justify-center rounded-sm hover:bg-primary/10 data-[selected=true]:bg-primary/10", props.element.texExpression.length === 0 ? "bg-muted p-3 pr-9" : "px-2 py-1"),
-					"data-selected": selected,
-					contentEditable: false,
-					role: "button",
-					children: props.element.texExpression.length > 0 ? /* @__PURE__ */ jsx("span", { ref: katexRef }) : /* @__PURE__ */ jsxs("div", {
-						className: "flex h-7 w-full items-center gap-2 whitespace-nowrap text-muted-foreground text-sm",
-						children: [/* @__PURE__ */ jsx(RadicalIcon, { className: "size-6 text-muted-foreground/80" }), /* @__PURE__ */ jsx("div", { children: "Add a Tex equation" })]
-					})
-				})
-			}), /* @__PURE__ */ jsx(EquationPopoverContent, {
-				open,
-				placeholder: "f(x) = \\begin{cases}\n  x^2, &\\quad x > 0 \\\\\n  0, &\\quad x = 0 \\\\\n  -x^2, &\\quad x < 0\n\\end{cases}",
-				isInline: false,
-				setOpen
-			})]
-		}), props.children]
-	});
-}
-function InlineEquationElement(props) {
-	const element = props.element;
-	const katexRef = React$1.useRef(null);
-	const selected = useSelected();
-	const isCollapsed = useEditorSelector((editor) => editor.api.isCollapsed(), []);
-	const [open, setOpen] = React$1.useState(selected && isCollapsed);
-	React$1.useEffect(() => {
-		if (selected && isCollapsed) setOpen(true);
-	}, [selected, isCollapsed]);
-	useEquationElement({
-		element,
-		katexRef,
-		options: {
-			displayMode: true,
-			errorColor: "#cc0000",
-			fleqn: false,
-			leqno: false,
-			macros: { "\\f": "#1f(#2)" },
-			output: "htmlAndMathml",
-			strict: "warn",
-			throwOnError: false,
-			trust: false
-		}
-	});
-	return /* @__PURE__ */ jsxs(PlateElement, {
-		...props,
-		className: cn("mx-1 inline-block select-none rounded-sm [&_.katex-display]:my-0!"),
-		children: [/* @__PURE__ */ jsxs(Popover, {
-			open,
-			onOpenChange: setOpen,
-			modal: false,
-			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-				asChild: true,
-				children: /* @__PURE__ */ jsxs("div", {
-					className: cn("after:-top-0.5 after:-left-1 after:absolute after:inset-0 after:z-1 after:h-[calc(100%)+4px] after:w-[calc(100%+8px)] after:rounded-sm after:content-[\"\"]", "h-6", (element.texExpression.length > 0 && open || selected) && "after:bg-brand/15", element.texExpression.length === 0 && "text-muted-foreground after:bg-neutral-500/10"),
-					contentEditable: false,
-					children: [/* @__PURE__ */ jsx("span", {
-						ref: katexRef,
-						className: cn(element.texExpression.length === 0 && "hidden", "font-mono leading-none")
-					}), element.texExpression.length === 0 && /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx(RadicalIcon, { className: "mr-1 inline-block h-[19px] w-4 py-[1.5px] align-text-bottom" }), "New equation"] })]
-				})
-			}), /* @__PURE__ */ jsx(EquationPopoverContent, {
-				className: "my-auto",
-				open,
-				placeholder: "E = mc^2",
-				setOpen,
-				isInline: true
-			})]
-		}), props.children]
-	});
-}
-const EquationInput = createPrimitiveComponent(TextareaAutosize)({ propsHook: useEquationInput });
-const EquationPopoverContent = ({ className, isInline, open, setOpen, ...props }) => {
-	const editor = useEditorRef();
-	const readOnly = useReadOnly();
-	const element = useElement();
-	React$1.useEffect(() => {
-		if (isInline && open) setOpen(true);
-	}, [
-		isInline,
-		open,
-		setOpen
-	]);
-	if (readOnly) return null;
-	const onClose = () => {
-		setOpen(false);
-		if (isInline) editor.tf.select(element, {
-			focus: true,
-			next: true
-		});
-		else editor.getApi(BlockSelectionPlugin).blockSelection.set(element.id);
-	};
-	return /* @__PURE__ */ jsxs(PopoverContent, {
-		className: "flex gap-2",
-		onEscapeKeyDown: (e) => {
-			e.preventDefault();
-		},
-		contentEditable: false,
-		children: [/* @__PURE__ */ jsx(EquationInput, {
-			className: cn("max-h-[50vh] grow resize-none p-2 text-sm", className),
-			state: {
-				isInline,
-				open,
-				onClose
-			},
-			autoFocus: true,
-			...props
-		}), /* @__PURE__ */ jsxs(Button, {
-			variant: "secondary",
-			className: "px-3",
-			onClick: onClose,
-			children: ["Done ", /* @__PURE__ */ jsx(CornerDownLeftIcon, { className: "size-3.5" })]
-		})]
-	});
-};
-
-//#endregion
-export { EquationElement, InlineEquationElement };