@fuma-content/studio 1.0.0 → 1.0.2

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

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

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

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

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

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

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

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

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