@fuma-content/studio 0.1.0

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

@@ -0,0 +1,56 @@
+"use client";
+
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItemIndicator, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "../../ui/dropdown-menu.mjs";
+import { ToolbarButton } from "../../ui/toolbar.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEditorRef, useSelectionFragmentProp } from "platejs/react";
+import * as React$1 from "react";
+import { CheckIcon, WrapText } from "lucide-react";
+import { LineHeightPlugin } from "@platejs/basic-styles/react";
+
+//#region src/components/editor/ui/line-height-toolbar-button.tsx
+function LineHeightToolbarButton(props) {
+	const editor = useEditorRef();
+	const { defaultNodeValue, validNodeValues: values = [] } = editor.getInjectProps(LineHeightPlugin);
+	const value = useSelectionFragmentProp({
+		defaultValue: defaultNodeValue,
+		getProp: (node) => node.lineHeight
+	});
+	const [open, setOpen] = React$1.useState(false);
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		open,
+		onOpenChange: setOpen,
+		modal: false,
+		...props,
+		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(ToolbarButton, {
+				pressed: open,
+				tooltip: "Line height",
+				isDropdown: true,
+				children: /* @__PURE__ */ jsx(WrapText, {})
+			})
+		}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			className: "min-w-0",
+			align: "start",
+			children: /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+				value,
+				onValueChange: (newValue) => {
+					editor.getTransforms(LineHeightPlugin).lineHeight.setNodes(Number(newValue));
+					editor.tf.focus();
+				},
+				children: values.map((value$1) => /* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
+					className: "min-w-[180px] pl-2 *:first:[span]:hidden",
+					value: value$1,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "pointer-events-none absolute right-2 flex size-3.5 items-center justify-center",
+						children: /* @__PURE__ */ jsx(DropdownMenuItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+					}), value$1]
+				}, value$1))
+			})
+		})]
+	});
+}
+
+//#endregion
+export { LineHeightToolbarButton };

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

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { SlateElement } from "platejs/static";
+import { getLinkAttributes } from "@platejs/link";
+
+//#region src/components/editor/ui/link-node-static.tsx
+function LinkElementStatic(props) {
+	return /* @__PURE__ */ jsx(SlateElement, {
+		...props,
+		as: "a",
+		className: "font-medium text-primary underline decoration-primary underline-offset-4",
+		attributes: {
+			...props.attributes,
+			...getLinkAttributes(props.editor, props.element)
+		},
+		children: props.children
+	});
+}
+
+//#endregion
+export { LinkElementStatic };

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

@@ -0,0 +1,28 @@
+"use client";
+
+import { cn } from "../../../lib/utils.mjs";
+import { jsx } from "react/jsx-runtime";
+import { PlateElement } from "platejs/react";
+import { getLinkAttributes } from "@platejs/link";
+import { SuggestionPlugin } from "@platejs/suggestion/react";
+
+//#region src/components/editor/ui/link-node.tsx
+function LinkElement(props) {
+	const suggestionData = props.editor.getApi(SuggestionPlugin).suggestion.suggestionData(props.element);
+	return /* @__PURE__ */ jsx(PlateElement, {
+		...props,
+		as: "a",
+		className: cn("font-medium text-primary underline decoration-primary underline-offset-4", suggestionData?.type === "remove" && "bg-red-100 text-red-700", suggestionData?.type === "insert" && "bg-emerald-100 text-emerald-700"),
+		attributes: {
+			...props.attributes,
+			...getLinkAttributes(props.editor, props.element),
+			onMouseOver: (e) => {
+				e.stopPropagation();
+			}
+		},
+		children: props.children
+	});
+}
+
+//#endregion
+export { LinkElement };

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

@@ -0,0 +1,21 @@
+"use client";
+
+import { ToolbarButton } from "../../ui/toolbar.mjs";
+import { jsx } from "react/jsx-runtime";
+import { Link } from "lucide-react";
+import { useLinkToolbarButton, useLinkToolbarButtonState } from "@platejs/link/react";
+
+//#region src/components/editor/ui/link-toolbar-button.tsx
+function LinkToolbarButton(props) {
+	const { props: buttonProps } = useLinkToolbarButton(useLinkToolbarButtonState());
+	return /* @__PURE__ */ jsx(ToolbarButton, {
+		...props,
+		...buttonProps,
+		"data-plate-focus": true,
+		tooltip: "Link",
+		children: /* @__PURE__ */ jsx(Link, {})
+	});
+}
+
+//#endregion
+export { LinkToolbarButton };

package/dist/src/components/editor/ui/link-toolbar.mjs

@@ -0,0 +1,141 @@
+"use client";
+
+import { buttonVariants } from "../../ui/button.mjs";
+import { Separator } from "../../ui/separator.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEditorRef, useEditorSelection, useFormInputProps, usePluginOption } from "platejs/react";
+import * as React$1 from "react";
+import { KEYS } from "platejs";
+import { ExternalLink, Link, Text, Unlink } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { getLinkAttributes } from "@platejs/link";
+import { FloatingLinkUrlInput, useFloatingLinkEdit, useFloatingLinkEditState, useFloatingLinkInsert, useFloatingLinkInsertState } from "@platejs/link/react";
+import { flip, offset } from "@platejs/floating";
+
+//#region src/components/editor/ui/link-toolbar.tsx
+const popoverVariants = cva("z-50 w-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-hidden");
+const inputVariants = cva("flex h-[28px] w-full rounded-md border-none bg-transparent px-1.5 py-1 text-base placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-transparent md:text-sm");
+function LinkFloatingToolbar({ state }) {
+	const activeCommentId = usePluginOption({ key: KEYS.comment }, "activeId");
+	const activeSuggestionId = usePluginOption({ key: KEYS.suggestion }, "activeId");
+	const floatingOptions = React$1.useMemo(() => ({
+		middleware: [offset(8), flip({
+			fallbackPlacements: [
+				"bottom-end",
+				"top-start",
+				"top-end"
+			],
+			padding: 12
+		})],
+		placement: activeSuggestionId || activeCommentId ? "top-start" : "bottom-start"
+	}), [activeCommentId, activeSuggestionId]);
+	const { hidden, props: insertProps, ref: insertRef, textInputProps } = useFloatingLinkInsert(useFloatingLinkInsertState({
+		...state,
+		floatingOptions: {
+			...floatingOptions,
+			...state?.floatingOptions
+		}
+	}));
+	const editState = useFloatingLinkEditState({
+		...state,
+		floatingOptions: {
+			...floatingOptions,
+			...state?.floatingOptions
+		}
+	});
+	const { editButtonProps, props: editProps, ref: editRef, unlinkButtonProps } = useFloatingLinkEdit(editState);
+	const inputProps = useFormInputProps({ preventDefaultOnEnterKeydown: true });
+	if (hidden) return null;
+	const input = /* @__PURE__ */ jsxs("div", {
+		className: "flex w-[330px] flex-col",
+		...inputProps,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex items-center pr-1 pl-2 text-muted-foreground",
+					children: /* @__PURE__ */ jsx(Link, { className: "size-4" })
+				}), /* @__PURE__ */ jsx(FloatingLinkUrlInput, {
+					className: inputVariants(),
+					placeholder: "Paste link",
+					"data-plate-focus": true
+				})]
+			}),
+			/* @__PURE__ */ jsx(Separator, { className: "my-1" }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex items-center pr-1 pl-2 text-muted-foreground",
+					children: /* @__PURE__ */ jsx(Text, { className: "size-4" })
+				}), /* @__PURE__ */ jsx("input", {
+					className: inputVariants(),
+					placeholder: "Text to display",
+					"data-plate-focus": true,
+					...textInputProps
+				})]
+			})
+		]
+	});
+	const editContent = editState.isEditing ? input : /* @__PURE__ */ jsxs("div", {
+		className: "box-content flex items-center",
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				className: buttonVariants({
+					size: "sm",
+					variant: "ghost"
+				}),
+				type: "button",
+				...editButtonProps,
+				children: "Edit link"
+			}),
+			/* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
+			/* @__PURE__ */ jsx(LinkOpenButton, {}),
+			/* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
+			/* @__PURE__ */ jsx("button", {
+				className: buttonVariants({
+					size: "sm",
+					variant: "ghost"
+				}),
+				type: "button",
+				...unlinkButtonProps,
+				children: /* @__PURE__ */ jsx(Unlink, { width: 18 })
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		ref: insertRef,
+		className: popoverVariants(),
+		...insertProps,
+		children: input
+	}), /* @__PURE__ */ jsx("div", {
+		ref: editRef,
+		className: popoverVariants(),
+		...editProps,
+		children: editContent
+	})] });
+}
+function LinkOpenButton() {
+	const editor = useEditorRef();
+	const selection = useEditorSelection();
+	return /* @__PURE__ */ jsx("a", {
+		...React$1.useMemo(() => {
+			const entry = editor.api.node({ match: { type: editor.getType(KEYS.link) } });
+			if (!entry) return {};
+			const [element] = entry;
+			return getLinkAttributes(editor, element);
+		}, [editor, selection]),
+		className: buttonVariants({
+			size: "sm",
+			variant: "ghost"
+		}),
+		onMouseOver: (e) => {
+			e.stopPropagation();
+		},
+		"aria-label": "Open link in a new tab",
+		target: "_blank",
+		children: /* @__PURE__ */ jsx(ExternalLink, { width: 18 })
+	});
+}
+
+//#endregion
+export { LinkFloatingToolbar };

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

@@ -0,0 +1,131 @@
+"use client";
+
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger } from "../../ui/dropdown-menu.mjs";
+import { ToolbarButton, ToolbarSplitButton, ToolbarSplitButtonPrimary, ToolbarSplitButtonSecondary } from "../../ui/toolbar.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEditorRef, useEditorSelector } from "platejs/react";
+import * as React$1 from "react";
+import { List, ListOrdered, ListTodoIcon } from "lucide-react";
+import { ListStyleType, someList, toggleList } from "@platejs/list";
+import { useIndentTodoToolBarButton, useIndentTodoToolBarButtonState } from "@platejs/list/react";
+
+//#region src/components/editor/ui/list-toolbar-button.tsx
+function BulletedListToolbarButton() {
+	const editor = useEditorRef();
+	const [open, setOpen] = React$1.useState(false);
+	const pressed = useEditorSelector((editor$1) => someList(editor$1, [
+		ListStyleType.Disc,
+		ListStyleType.Circle,
+		ListStyleType.Square
+	]), []);
+	return /* @__PURE__ */ jsxs(ToolbarSplitButton, {
+		pressed: open,
+		children: [/* @__PURE__ */ jsx(ToolbarSplitButtonPrimary, {
+			className: "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+			onClick: () => {
+				toggleList(editor, { listStyleType: ListStyleType.Disc });
+			},
+			"data-state": pressed ? "on" : "off",
+			children: /* @__PURE__ */ jsx(List, { className: "size-4" })
+		}), /* @__PURE__ */ jsxs(DropdownMenu, {
+			open,
+			onOpenChange: setOpen,
+			modal: false,
+			children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(ToolbarSplitButtonSecondary, {})
+			}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+				align: "start",
+				alignOffset: -32,
+				children: /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+					/* @__PURE__ */ jsx(DropdownMenuItem, {
+						onClick: () => toggleList(editor, { listStyleType: ListStyleType.Disc }),
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx("div", { className: "size-2 rounded-full border border-current bg-current" }), "Default"]
+						})
+					}),
+					/* @__PURE__ */ jsx(DropdownMenuItem, {
+						onClick: () => toggleList(editor, { listStyleType: ListStyleType.Circle }),
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx("div", { className: "size-2 rounded-full border border-current" }), "Circle"]
+						})
+					}),
+					/* @__PURE__ */ jsx(DropdownMenuItem, {
+						onClick: () => toggleList(editor, { listStyleType: ListStyleType.Square }),
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx("div", { className: "size-2 border border-current bg-current" }), "Square"]
+						})
+					})
+				] })
+			})]
+		})]
+	});
+}
+function NumberedListToolbarButton() {
+	const editor = useEditorRef();
+	const [open, setOpen] = React$1.useState(false);
+	const pressed = useEditorSelector((editor$1) => someList(editor$1, [
+		ListStyleType.Decimal,
+		ListStyleType.LowerAlpha,
+		ListStyleType.UpperAlpha,
+		ListStyleType.LowerRoman,
+		ListStyleType.UpperRoman
+	]), []);
+	return /* @__PURE__ */ jsxs(ToolbarSplitButton, {
+		pressed: open,
+		children: [/* @__PURE__ */ jsx(ToolbarSplitButtonPrimary, {
+			className: "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+			onClick: () => toggleList(editor, { listStyleType: ListStyleType.Decimal }),
+			"data-state": pressed ? "on" : "off",
+			children: /* @__PURE__ */ jsx(ListOrdered, { className: "size-4" })
+		}), /* @__PURE__ */ jsxs(DropdownMenu, {
+			open,
+			onOpenChange: setOpen,
+			modal: false,
+			children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(ToolbarSplitButtonSecondary, {})
+			}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+				align: "start",
+				alignOffset: -32,
+				children: /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+					/* @__PURE__ */ jsx(DropdownMenuItem, {
+						onSelect: () => toggleList(editor, { listStyleType: ListStyleType.Decimal }),
+						children: "Decimal (1, 2, 3)"
+					}),
+					/* @__PURE__ */ jsx(DropdownMenuItem, {
+						onSelect: () => toggleList(editor, { listStyleType: ListStyleType.LowerAlpha }),
+						children: "Lower Alpha (a, b, c)"
+					}),
+					/* @__PURE__ */ jsx(DropdownMenuItem, {
+						onSelect: () => toggleList(editor, { listStyleType: ListStyleType.UpperAlpha }),
+						children: "Upper Alpha (A, B, C)"
+					}),
+					/* @__PURE__ */ jsx(DropdownMenuItem, {
+						onSelect: () => toggleList(editor, { listStyleType: ListStyleType.LowerRoman }),
+						children: "Lower Roman (i, ii, iii)"
+					}),
+					/* @__PURE__ */ jsx(DropdownMenuItem, {
+						onSelect: () => toggleList(editor, { listStyleType: ListStyleType.UpperRoman }),
+						children: "Upper Roman (I, II, III)"
+					})
+				] })
+			})]
+		})]
+	});
+}
+function TodoListToolbarButton(props) {
+	const { props: buttonProps } = useIndentTodoToolBarButton(useIndentTodoToolBarButtonState({ nodeType: "todo" }));
+	return /* @__PURE__ */ jsx(ToolbarButton, {
+		...props,
+		...buttonProps,
+		tooltip: "Todo",
+		children: /* @__PURE__ */ jsx(ListTodoIcon, {})
+	});
+}
+
+//#endregion
+export { BulletedListToolbarButton, NumberedListToolbarButton, TodoListToolbarButton };

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

@@ -0,0 +1,20 @@
+"use client";
+
+import { ToolbarButton } from "../../ui/toolbar.mjs";
+import { jsx } from "react/jsx-runtime";
+import { useMarkToolbarButton, useMarkToolbarButtonState } from "platejs/react";
+
+//#region src/components/editor/ui/mark-toolbar-button.tsx
+function MarkToolbarButton({ clear, nodeType, ...props }) {
+	const { props: buttonProps } = useMarkToolbarButton(useMarkToolbarButtonState({
+		clear,
+		nodeType
+	}));
+	return /* @__PURE__ */ jsx(ToolbarButton, {
+		...props,
+		...buttonProps
+	});
+}
+
+//#endregion
+export { MarkToolbarButton };

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

@@ -0,0 +1,32 @@
+import { cn } from "../../../lib/utils.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NodeApi } from "platejs";
+import { SlateElement } from "platejs/static";
+
+//#region src/components/editor/ui/media-image-node-static.tsx
+function ImageElementStatic(props) {
+	const { align = "center", caption, url, width } = props.element;
+	return /* @__PURE__ */ jsxs(SlateElement, {
+		...props,
+		className: "py-2.5",
+		children: [/* @__PURE__ */ jsx("figure", {
+			className: "group relative m-0 inline-block",
+			style: { width },
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "relative min-w-[92px] max-w-full",
+				style: { textAlign: align },
+				children: [/* @__PURE__ */ jsx("img", {
+					className: cn("w-full max-w-full cursor-default object-cover px-0", "rounded-sm"),
+					alt: props.attributes.alt,
+					src: url
+				}), caption && /* @__PURE__ */ jsx("figcaption", {
+					className: "mx-auto mt-2 h-[24px] max-w-full",
+					children: NodeApi.string(caption[0])
+				})]
+			})
+		}), props.children]
+	});
+}
+
+//#endregion
+export { ImageElementStatic };

package/dist/src/components/editor/ui/media-image-node.mjs

@@ -0,0 +1,64 @@
+"use client";
+
+import { cn } from "../../../lib/utils.mjs";
+import { Caption, CaptionTextarea } from "./caption.mjs";
+import { MediaToolbar } from "./media-toolbar.mjs";
+import { Resizable as Resizable$1, ResizeHandle, mediaResizeHandleVariants } from "./resize-handle.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PlateElement, withHOC } from "platejs/react";
+import { useDraggable } from "@platejs/dnd";
+import { ResizableProvider, useResizableValue } from "@platejs/resizable";
+import { Image, ImagePlugin, useMediaState } from "@platejs/media/react";
+
+//#region src/components/editor/ui/media-image-node.tsx
+const ImageElement = withHOC(ResizableProvider, function ImageElement$1(props) {
+	const { align = "center", focused, readOnly, selected } = useMediaState();
+	const width = useResizableValue("width");
+	const { isDragging, handleRef } = useDraggable({ element: props.element });
+	return /* @__PURE__ */ jsx(MediaToolbar, {
+		plugin: ImagePlugin,
+		children: /* @__PURE__ */ jsxs(PlateElement, {
+			...props,
+			className: "py-2.5",
+			children: [/* @__PURE__ */ jsxs("figure", {
+				className: "group relative m-0",
+				contentEditable: false,
+				children: [/* @__PURE__ */ jsxs(Resizable$1, {
+					align,
+					options: {
+						align,
+						readOnly
+					},
+					children: [
+						/* @__PURE__ */ jsx(ResizeHandle, {
+							className: mediaResizeHandleVariants({ direction: "left" }),
+							options: { direction: "left" }
+						}),
+						/* @__PURE__ */ jsx(Image, {
+							ref: handleRef,
+							className: cn("block w-full max-w-full cursor-pointer object-cover px-0", "rounded-sm", focused && selected && "ring-2 ring-ring ring-offset-2", isDragging && "opacity-50"),
+							alt: props.attributes.alt
+						}),
+						/* @__PURE__ */ jsx(ResizeHandle, {
+							className: mediaResizeHandleVariants({ direction: "right" }),
+							options: { direction: "right" }
+						})
+					]
+				}), /* @__PURE__ */ jsx(Caption, {
+					style: { width },
+					align,
+					children: /* @__PURE__ */ jsx(CaptionTextarea, {
+						readOnly,
+						onFocus: (e) => {
+							e.preventDefault();
+						},
+						placeholder: "Write a caption..."
+					})
+				})]
+			}), props.children]
+		})
+	});
+});
+
+//#endregion
+export { ImageElement };