@fuma-content/studio 0.1.0

package/dist/src/components/editor/ui/code-block-node.mjs

@@ -0,0 +1,121 @@
+"use client";
+
+import { Button } from "../../ui/button.mjs";
+import { lowlight } from "../../../lib/lowlight.mjs";
+import { Combobox, ComboboxChipsInput, ComboboxContent, ComboboxItem, ComboboxList } from "../../ui/combobox.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PlateElement, PlateLeaf, useEditorRef, useElement, useReadOnly } from "platejs/react";
+import * as React$1 from "react";
+import { NodeApi } from "platejs";
+import { BracesIcon, CheckIcon, CopyIcon } from "lucide-react";
+import { formatCodeBlock, isLangSupported } from "@platejs/code-block";
+import highlight from "highlight.js";
+
+//#region src/components/editor/ui/code-block-node.tsx
+function CodeBlockElement(props) {
+	const { editor, element } = props;
+	return /* @__PURE__ */ jsxs(PlateElement, {
+		className: "bg-secondary text-secondary-foreground border p-1 rounded-lg my-1 has-data-popup-open:ring-2 has-data-popup-open:ring-ring",
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center select-none px-3 pb-1 contain-layout",
+			contentEditable: false,
+			children: [
+				/* @__PURE__ */ jsx(CodeBlockCombobox, {}),
+				isLangSupported(element.lang) && /* @__PURE__ */ jsxs(Button, {
+					size: "xs",
+					variant: "ghost",
+					className: "text-muted-foreground",
+					onClick: () => formatCodeBlock(editor, { element }),
+					children: [/* @__PURE__ */ jsx(BracesIcon, {}), "Format"]
+				}),
+				/* @__PURE__ */ jsx(CopyButton, {
+					size: "icon-xs",
+					variant: "ghost",
+					className: "gap-1 text-muted-foreground",
+					value: () => NodeApi.string(element)
+				})
+			]
+		}), /* @__PURE__ */ jsx("pre", {
+			className: "hljs rounded-lg border overflow-auto p-3 font-mono text-sm leading-normal [tab-size:2] shadow-sm print:break-inside-avoid",
+			children: /* @__PURE__ */ jsx("code", { children: props.children })
+		})]
+	});
+}
+function CodeBlockCombobox() {
+	const editor = useEditorRef();
+	const element = useElement();
+	const readOnly = useReadOnly();
+	const items = React$1.useMemo(() => {
+		return lowlight.listLanguages().map((lang) => {
+			return {
+				label: highlight.getLanguage(lang).name ?? lang,
+				value: lang
+			};
+		});
+	}, []);
+	const value = React$1.useMemo(() => {
+		if (!element.lang) return null;
+		const name = highlight.getLanguage(element.lang)?.name ?? element.lang;
+		return items.find((item) => item.label === name) ?? null;
+	}, [element.lang]);
+	if (readOnly) return /* @__PURE__ */ jsx("p", {
+		className: "font-mono text-sm text-muted-foreground me-auto",
+		children: value?.label
+	});
+	return /* @__PURE__ */ jsxs(Combobox, {
+		items,
+		value,
+		onValueChange: (item) => {
+			if (item) editor.tf.replaceNodes({
+				...element,
+				lang: item.value
+			}, {
+				at: element,
+				select: true
+			});
+		},
+		children: [/* @__PURE__ */ jsx(ComboboxChipsInput, {
+			placeholder: "Select Language",
+			className: "flex-1 font-mono text-sm not-data-popup-open:text-muted-foreground"
+		}), /* @__PURE__ */ jsx(ComboboxContent, {
+			className: "max-w-[200px]",
+			children: /* @__PURE__ */ jsx(ComboboxList, { children: (item) => /* @__PURE__ */ jsx(ComboboxItem, {
+				value: item,
+				children: item.label
+			}, item.value) })
+		})]
+	});
+}
+function CopyButton({ value, ...props }) {
+	const [hasCopied, setHasCopied] = React$1.useState(false);
+	const timerRef = React$1.useRef(0);
+	return /* @__PURE__ */ jsxs(Button, {
+		onClick: () => {
+			navigator.clipboard.writeText(typeof value === "function" ? value() : value);
+			setHasCopied(true);
+			if (timerRef.current) window.clearTimeout(timerRef.current);
+			timerRef.current = window.setTimeout(() => {
+				setHasCopied(false);
+			}, 2e3);
+		},
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Copy"
+		}), hasCopied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {})]
+	});
+}
+function CodeLineElement(props) {
+	return /* @__PURE__ */ jsx(PlateElement, { ...props });
+}
+function CodeSyntaxLeaf(props) {
+	const tokenClassName = props.leaf.className;
+	return /* @__PURE__ */ jsx(PlateLeaf, {
+		className: tokenClassName,
+		...props
+	});
+}
+
+//#endregion
+export { CodeBlockElement, CodeLineElement, CodeSyntaxLeaf };

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

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { SlateLeaf } from "platejs/static";
+
+//#region src/components/editor/ui/code-node-static.tsx
+function CodeLeafStatic(props) {
+	return /* @__PURE__ */ jsx(SlateLeaf, {
+		...props,
+		as: "code",
+		className: "whitespace-pre-wrap rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm",
+		children: props.children
+	});
+}
+
+//#endregion
+export { CodeLeafStatic };

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

@@ -0,0 +1,17 @@
+"use client";
+
+import { jsx } from "react/jsx-runtime";
+import { PlateLeaf } from "platejs/react";
+
+//#region src/components/editor/ui/code-node.tsx
+function CodeLeaf(props) {
+	return /* @__PURE__ */ jsx(PlateLeaf, {
+		...props,
+		as: "code",
+		className: "whitespace-pre-wrap rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm",
+		children: props.children
+	});
+}
+
+//#endregion
+export { CodeLeaf };

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

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { SlateElement } from "platejs/static";
+
+//#region src/components/editor/ui/column-node-static.tsx
+function ColumnElementStatic(props) {
+	const { width } = props.element;
+	return /* @__PURE__ */ jsx("div", {
+		className: "group/column relative",
+		style: { width: width ?? "100%" },
+		children: /* @__PURE__ */ jsx(SlateElement, {
+			className: "h-full px-2 pt-2 group-first/column:pl-0 group-last/column:pr-0",
+			...props,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "relative h-full border border-transparent p-1.5",
+				children: props.children
+			})
+		})
+	});
+}
+function ColumnGroupElementStatic(props) {
+	return /* @__PURE__ */ jsx(SlateElement, {
+		className: "mb-2",
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex size-full rounded",
+			children: props.children
+		})
+	});
+}
+
+//#endregion
+export { ColumnElementStatic, ColumnGroupElementStatic };

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

@@ -0,0 +1,229 @@
+"use client";
+
+import { cn } from "../../../lib/utils.mjs";
+import { Button } from "../../ui/button.mjs";
+import { Popover, PopoverAnchor, PopoverContent } from "../../ui/popover.mjs";
+import { Separator } from "../../ui/separator.mjs";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../ui/tooltip.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PlateElement, useComposedRef, useEditorRef, useEditorSelector, useElement, useFocusedLast, usePluginOption, useReadOnly, useRemoveNodeButton, useSelected, withHOC } from "platejs/react";
+import * as React$1 from "react";
+import { PathApi } from "platejs";
+import { BlockSelectionPlugin } from "@platejs/selection/react";
+import { GripHorizontal, Trash2Icon } from "lucide-react";
+import { setColumns } from "@platejs/layout";
+import { useDraggable, useDropLine } from "@platejs/dnd";
+import { ResizableProvider } from "@platejs/resizable";
+
+//#region src/components/editor/ui/column-node.tsx
+const ColumnElement = withHOC(ResizableProvider, function ColumnElement$1(props) {
+	const { width } = props.element;
+	const readOnly = useReadOnly();
+	const isSelectionAreaVisible = usePluginOption(BlockSelectionPlugin, "isSelectionAreaVisible");
+	const { isDragging, previewRef, handleRef } = useDraggable({
+		element: props.element,
+		orientation: "horizontal",
+		type: "column",
+		canDropNode: ({ dragEntry, dropEntry }) => PathApi.equals(PathApi.parent(dragEntry[1]), PathApi.parent(dropEntry[1]))
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "group/column relative",
+		style: { width: width ?? "100%" },
+		children: [!readOnly && !isSelectionAreaVisible && /* @__PURE__ */ jsx("div", {
+			ref: handleRef,
+			className: cn("-translate-x-1/2 -translate-y-1/2 absolute top-2 left-1/2 z-50", "pointer-events-auto flex items-center", "opacity-0 transition-opacity group-hover/column:opacity-100"),
+			children: /* @__PURE__ */ jsx(ColumnDragHandle, {})
+		}), /* @__PURE__ */ jsx(PlateElement, {
+			...props,
+			ref: useComposedRef(props.ref, previewRef),
+			className: "h-full px-2 pt-2 group-first/column:pl-0 group-last/column:pr-0",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: cn("relative h-full border border-transparent p-1.5", !readOnly && "rounded-lg border-border border-dashed", isDragging && "opacity-50"),
+				children: [props.children, !readOnly && !isSelectionAreaVisible && /* @__PURE__ */ jsx(DropLine, {})]
+			})
+		})]
+	});
+});
+const ColumnDragHandle = React$1.memo(function ColumnDragHandle$1() {
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			className: "!px-1 h-5",
+			children: /* @__PURE__ */ jsx(GripHorizontal, {
+				className: "text-muted-foreground",
+				onClick: (event) => {
+					event.stopPropagation();
+					event.preventDefault();
+				}
+			})
+		})
+	}), /* @__PURE__ */ jsx(TooltipContent, { children: "Drag to move column" })] }) });
+});
+function DropLine() {
+	const { dropLine } = useDropLine({ orientation: "horizontal" });
+	if (!dropLine) return null;
+	return /* @__PURE__ */ jsx("div", { className: cn("slate-dropLine", "absolute bg-brand/50", dropLine === "left" && "group-first/column:-left-1 inset-y-0 left-[-10.5px] w-1", dropLine === "right" && "group-last/column:-right-1 inset-y-0 right-[-11px] w-1") });
+}
+function ColumnGroupElement(props) {
+	return /* @__PURE__ */ jsx(PlateElement, {
+		className: "mb-2",
+		...props,
+		children: /* @__PURE__ */ jsx(ColumnFloatingToolbar, { children: /* @__PURE__ */ jsx("div", {
+			className: "flex size-full rounded",
+			children: props.children
+		}) })
+	});
+}
+function ColumnFloatingToolbar({ children }) {
+	const editor = useEditorRef();
+	const readOnly = useReadOnly();
+	const element = useElement();
+	const { props: buttonProps } = useRemoveNodeButton({ element });
+	const selected = useSelected();
+	const isCollapsed = useEditorSelector((editor$1) => editor$1.api.isCollapsed(), []);
+	const open = useFocusedLast() && !readOnly && selected && isCollapsed;
+	const onColumnChange = (widths) => {
+		setColumns(editor, {
+			at: element,
+			widths
+		});
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		modal: false,
+		children: [/* @__PURE__ */ jsx(PopoverAnchor, { children }), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "w-auto p-1",
+			onOpenAutoFocus: (e) => e.preventDefault(),
+			align: "center",
+			side: "top",
+			sideOffset: 10,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "box-content flex h-8 items-center",
+				children: [
+					/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						className: "size-8",
+						onClick: () => onColumnChange(["50%", "50%"]),
+						children: /* @__PURE__ */ jsx(DoubleColumnOutlined, {})
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						className: "size-8",
+						onClick: () => onColumnChange([
+							"33%",
+							"33%",
+							"33%"
+						]),
+						children: /* @__PURE__ */ jsx(ThreeColumnOutlined, {})
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						className: "size-8",
+						onClick: () => onColumnChange(["70%", "30%"]),
+						children: /* @__PURE__ */ jsx(RightSideDoubleColumnOutlined, {})
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						className: "size-8",
+						onClick: () => onColumnChange(["30%", "70%"]),
+						children: /* @__PURE__ */ jsx(LeftSideDoubleColumnOutlined, {})
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						className: "size-8",
+						onClick: () => onColumnChange([
+							"25%",
+							"50%",
+							"25%"
+						]),
+						children: /* @__PURE__ */ jsx(DoubleSideDoubleColumnOutlined, {})
+					}),
+					/* @__PURE__ */ jsx(Separator, {
+						orientation: "vertical",
+						className: "mx-1 h-6"
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						className: "size-8",
+						...buttonProps,
+						children: /* @__PURE__ */ jsx(Trash2Icon, {})
+					})
+				]
+			})
+		})]
+	});
+}
+const DoubleColumnOutlined = (props) => /* @__PURE__ */ jsx("svg", {
+	fill: "none",
+	height: "16",
+	viewBox: "0 0 16 16",
+	width: "16",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		clipRule: "evenodd",
+		d: "M8.5 3H13V13H8.5V3ZM7.5 2H8.5H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H8.5H7.5H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H7.5ZM7.5 13H3L3 3H7.5V13Z",
+		fill: "currentColor",
+		fillRule: "evenodd"
+	})
+});
+const ThreeColumnOutlined = (props) => /* @__PURE__ */ jsx("svg", {
+	fill: "none",
+	height: "16",
+	viewBox: "0 0 16 16",
+	width: "16",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		clipRule: "evenodd",
+		d: "M9.25 3H6.75V13H9.25V3ZM9.25 2H6.75H5.75H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H5.75H6.75H9.25H10.25H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H10.25H9.25ZM10.25 3V13H13V3H10.25ZM3 13H5.75V3H3L3 13Z",
+		fill: "currentColor",
+		fillRule: "evenodd"
+	})
+});
+const RightSideDoubleColumnOutlined = (props) => /* @__PURE__ */ jsx("svg", {
+	fill: "none",
+	height: "16",
+	viewBox: "0 0 16 16",
+	width: "16",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		clipRule: "evenodd",
+		d: "M11.25 3H13V13H11.25V3ZM10.25 2H11.25H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H11.25H10.25H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H10.25ZM10.25 13H3L3 3H10.25V13Z",
+		fill: "currentColor",
+		fillRule: "evenodd"
+	})
+});
+const LeftSideDoubleColumnOutlined = (props) => /* @__PURE__ */ jsx("svg", {
+	fill: "none",
+	height: "16",
+	viewBox: "0 0 16 16",
+	width: "16",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		clipRule: "evenodd",
+		d: "M5.75 3H13V13H5.75V3ZM4.75 2H5.75H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H5.75H4.75H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H4.75ZM4.75 13H3L3 3H4.75V13Z",
+		fill: "currentColor",
+		fillRule: "evenodd"
+	})
+});
+const DoubleSideDoubleColumnOutlined = (props) => /* @__PURE__ */ jsx("svg", {
+	fill: "none",
+	height: "16",
+	viewBox: "0 0 16 16",
+	width: "16",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		clipRule: "evenodd",
+		d: "M10.25 3H5.75V13H10.25V3ZM10.25 2H5.75H4.75H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H4.75H5.75H10.25H11.25H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H11.25H10.25ZM11.25 3V13H13V3H11.25ZM3 13H4.75V3H3L3 13Z",
+		fill: "currentColor",
+		fillRule: "evenodd"
+	})
+});
+
+//#endregion
+export { ColumnElement, ColumnGroupElement };

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

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { SlateLeaf } from "platejs/static";
+
+//#region src/components/editor/ui/comment-node-static.tsx
+function CommentLeafStatic(props) {
+	return /* @__PURE__ */ jsx(SlateLeaf, {
+		...props,
+		className: "border-b-2 border-b-highlight/35 bg-highlight/15",
+		children: props.children
+	});
+}
+
+//#endregion
+export { CommentLeafStatic };

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

@@ -0,0 +1,33 @@
+"use client";
+
+import { cn } from "../../../lib/utils.mjs";
+import { commentPlugin } from "../plugins/comment-kit.mjs";
+import { jsx } from "react/jsx-runtime";
+import { PlateLeaf, useEditorPlugin, usePluginOption } from "platejs/react";
+import { getCommentCount } from "@platejs/comment";
+
+//#region src/components/editor/ui/comment-node.tsx
+function CommentLeaf(props) {
+	const { children, leaf } = props;
+	const { api, setOption } = useEditorPlugin(commentPlugin);
+	const hoverId = usePluginOption(commentPlugin, "hoverId");
+	const activeId = usePluginOption(commentPlugin, "activeId");
+	const isOverlapping = getCommentCount(leaf) > 1;
+	const currentId = api.comment.nodeId(leaf);
+	const isActive = activeId === currentId;
+	const isHover = hoverId === currentId;
+	return /* @__PURE__ */ jsx(PlateLeaf, {
+		...props,
+		className: cn("border-b-2 border-b-highlight/[.36] bg-highlight/[.13] transition-colors duration-200", (isHover || isActive) && "border-b-highlight bg-highlight/25", isOverlapping && "border-b-2 border-b-highlight/[.7] bg-highlight/25", (isHover || isActive) && isOverlapping && "border-b-highlight bg-highlight/45"),
+		attributes: {
+			...props.attributes,
+			onClick: () => setOption("activeId", currentId ?? null),
+			onMouseEnter: () => setOption("hoverId", currentId ?? null),
+			onMouseLeave: () => setOption("hoverId", null)
+		},
+		children
+	});
+}
+
+//#endregion
+export { CommentLeaf };

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

@@ -0,0 +1,23 @@
+"use client";
+
+import { commentPlugin } from "../plugins/comment-kit.mjs";
+import { ToolbarButton } from "../../ui/toolbar.mjs";
+import { jsx } from "react/jsx-runtime";
+import { useEditorRef } from "platejs/react";
+import { MessageSquareTextIcon } from "lucide-react";
+
+//#region src/components/editor/ui/comment-toolbar-button.tsx
+function CommentToolbarButton() {
+	const editor = useEditorRef();
+	return /* @__PURE__ */ jsx(ToolbarButton, {
+		onClick: () => {
+			editor.getTransforms(commentPlugin).comment.setDraft();
+		},
+		"data-plate-prevent-overlay": true,
+		tooltip: "Comment",
+		children: /* @__PURE__ */ jsx(MessageSquareTextIcon, {})
+	});
+}
+
+//#endregion
+export { CommentToolbarButton };