@fuma-content/studio 0.1.0

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

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

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

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

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