@fuma-content/studio 0.1.0

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

@@ -0,0 +1,112 @@
+"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, usePlateState, usePluginOption } from "platejs/react";
+import * as React$1 from "react";
+import { CheckIcon, EyeIcon, PenIcon, PencilLineIcon } from "lucide-react";
+import { SuggestionPlugin } from "@platejs/suggestion/react";
+
+//#region src/components/editor/ui/mode-toolbar-button.tsx
+function ModeToolbarButton(props) {
+	const editor = useEditorRef();
+	const [readOnly, setReadOnly] = usePlateState("readOnly");
+	const [open, setOpen] = React$1.useState(false);
+	const isSuggesting = usePluginOption(SuggestionPlugin, "isSuggesting");
+	let value = "editing";
+	if (readOnly) value = "viewing";
+	if (isSuggesting) value = "suggestion";
+	const item = {
+		editing: {
+			icon: /* @__PURE__ */ jsx(PenIcon, {}),
+			label: "Editing"
+		},
+		suggestion: {
+			icon: /* @__PURE__ */ jsx(PencilLineIcon, {}),
+			label: "Suggestion"
+		},
+		viewing: {
+			icon: /* @__PURE__ */ jsx(EyeIcon, {}),
+			label: "Viewing"
+		}
+	};
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		open,
+		onOpenChange: setOpen,
+		modal: false,
+		...props,
+		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(ToolbarButton, {
+				pressed: open,
+				tooltip: "Editing mode",
+				isDropdown: true,
+				children: [item[value].icon, /* @__PURE__ */ jsx("span", {
+					className: "hidden lg:inline",
+					children: item[value].label
+				})]
+			})
+		}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			className: "min-w-[180px]",
+			align: "start",
+			children: /* @__PURE__ */ jsxs(DropdownMenuRadioGroup, {
+				value,
+				onValueChange: (newValue) => {
+					if (newValue === "viewing") {
+						setReadOnly(true);
+						return;
+					}
+					setReadOnly(false);
+					if (newValue === "suggestion") {
+						editor.setOption(SuggestionPlugin, "isSuggesting", true);
+						return;
+					}
+					editor.setOption(SuggestionPlugin, "isSuggesting", false);
+					if (newValue === "editing") {
+						editor.tf.focus();
+						return;
+					}
+				},
+				children: [
+					/* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
+						className: "pl-2 *:first:[span]:hidden *:[svg]:text-muted-foreground",
+						value: "editing",
+						children: [
+							/* @__PURE__ */ jsx(Indicator, {}),
+							item.editing.icon,
+							item.editing.label
+						]
+					}),
+					/* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
+						className: "pl-2 *:first:[span]:hidden *:[svg]:text-muted-foreground",
+						value: "viewing",
+						children: [
+							/* @__PURE__ */ jsx(Indicator, {}),
+							item.viewing.icon,
+							item.viewing.label
+						]
+					}),
+					/* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
+						className: "pl-2 *:first:[span]:hidden *:[svg]:text-muted-foreground",
+						value: "suggestion",
+						children: [
+							/* @__PURE__ */ jsx(Indicator, {}),
+							item.suggestion.icon,
+							item.suggestion.label
+						]
+					})
+				]
+			})
+		})]
+	});
+}
+function Indicator() {
+	return /* @__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, {}) })
+	});
+}
+
+//#endregion
+export { ModeToolbarButton };

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

@@ -0,0 +1,15 @@
+import { cn } from "../../../lib/utils.mjs";
+import { jsx } from "react/jsx-runtime";
+import { SlateElement } from "platejs/static";
+
+//#region src/components/editor/ui/paragraph-node-static.tsx
+function ParagraphElementStatic(props) {
+	return /* @__PURE__ */ jsx(SlateElement, {
+		...props,
+		className: cn("m-0 px-0 py-1"),
+		children: props.children
+	});
+}
+
+//#endregion
+export { ParagraphElementStatic };

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

@@ -0,0 +1,17 @@
+"use client";
+
+import { cn } from "../../../lib/utils.mjs";
+import { jsx } from "react/jsx-runtime";
+import { PlateElement } from "platejs/react";
+
+//#region src/components/editor/ui/paragraph-node.tsx
+function ParagraphElement(props) {
+	return /* @__PURE__ */ jsx(PlateElement, {
+		...props,
+		className: cn("m-0 px-0 py-1"),
+		children: props.children
+	});
+}
+
+//#endregion
+export { ParagraphElement };

package/dist/src/components/editor/ui/resize-handle.mjs

@@ -0,0 +1,43 @@
+"use client";
+
+import { cn } from "../../../lib/utils.mjs";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Resizable, useResizeHandle, useResizeHandleState } from "@platejs/resizable";
+
+//#region src/components/editor/ui/resize-handle.tsx
+const mediaResizeHandleVariants = cva(cn("top-0 flex w-6 select-none flex-col justify-center", "after:flex after:h-16 after:w-[3px] after:rounded-[6px] after:bg-ring after:opacity-0 after:content-['_'] group-hover:after:opacity-100"), { variants: { direction: {
+	left: "-left-3 -ml-3 pl-3",
+	right: "-right-3 -mr-3 items-end pr-3"
+} } });
+const resizeHandleVariants = cva("absolute z-40", { variants: { direction: {
+	bottom: "w-full cursor-row-resize",
+	left: "h-full cursor-col-resize",
+	right: "h-full cursor-col-resize",
+	top: "w-full cursor-row-resize"
+} } });
+function ResizeHandle({ className, options, ...props }) {
+	const state = useResizeHandleState(options ?? {});
+	const resizeHandle = useResizeHandle(state);
+	if (state.readOnly) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(resizeHandleVariants({ direction: options?.direction }), className),
+		"data-resizing": state.isResizing,
+		...resizeHandle.props,
+		...props
+	});
+}
+const resizableVariants = cva("", { variants: { align: {
+	center: "mx-auto",
+	left: "mr-auto",
+	right: "ml-auto"
+} } });
+function Resizable$1({ align, className, ...props }) {
+	return /* @__PURE__ */ jsx(Resizable, {
+		...props,
+		className: cn(resizableVariants({ align }), className)
+	});
+}
+
+//#endregion
+export { Resizable$1 as Resizable, ResizeHandle, mediaResizeHandleVariants };

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

@@ -0,0 +1,228 @@
+"use client";
+
+import { InlineCombobox, InlineComboboxCollection, InlineComboboxContent, InlineComboboxEmpty, InlineComboboxGroup, InlineComboboxGroupLabel, InlineComboboxInput, InlineComboboxItem, InlineComboboxList } from "./inline-combobox.mjs";
+import { insertBlock, insertInlineElement } from "../transforms.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PlateElement } from "platejs/react";
+import { KEYS } from "platejs";
+import { AIChatPlugin } from "@platejs/ai/react";
+import { CalendarIcon, ChevronRightIcon, Code2, Columns3Icon, Heading1Icon, Heading2Icon, Heading3Icon, KeyboardIcon, LightbulbIcon, ListIcon, ListOrdered, PilcrowIcon, Quote, RadicalIcon, SparklesIcon, Square, SubscriptIcon, SuperscriptIcon, Table, TableOfContentsIcon } from "lucide-react";
+import { filterWords } from "@platejs/combobox";
+
+//#region src/components/editor/ui/slash-node.tsx
+const groups = [
+	{
+		group: "AI",
+		items: [{
+			focusEditor: false,
+			icon: /* @__PURE__ */ jsx(SparklesIcon, {}),
+			value: "AI",
+			onSelect: (editor) => {
+				editor.getApi(AIChatPlugin).aiChat.show();
+			}
+		}]
+	},
+	{
+		group: "Basic blocks",
+		items: [
+			{
+				icon: /* @__PURE__ */ jsx(PilcrowIcon, {}),
+				keywords: ["paragraph"],
+				label: "Text",
+				value: KEYS.p
+			},
+			{
+				icon: /* @__PURE__ */ jsx(Heading1Icon, {}),
+				keywords: ["title", "h1"],
+				label: "Heading 1",
+				value: KEYS.h1
+			},
+			{
+				icon: /* @__PURE__ */ jsx(Heading2Icon, {}),
+				keywords: ["subtitle", "h2"],
+				label: "Heading 2",
+				value: KEYS.h2
+			},
+			{
+				icon: /* @__PURE__ */ jsx(Heading3Icon, {}),
+				keywords: ["subtitle", "h3"],
+				label: "Heading 3",
+				value: KEYS.h3
+			},
+			{
+				icon: /* @__PURE__ */ jsx(ListIcon, {}),
+				keywords: [
+					"unordered",
+					"ul",
+					"-"
+				],
+				label: "Bulleted list",
+				value: KEYS.ul
+			},
+			{
+				icon: /* @__PURE__ */ jsx(ListOrdered, {}),
+				keywords: [
+					"ordered",
+					"ol",
+					"1"
+				],
+				label: "Numbered list",
+				value: KEYS.ol
+			},
+			{
+				icon: /* @__PURE__ */ jsx(Square, {}),
+				keywords: [
+					"checklist",
+					"task",
+					"checkbox",
+					"[]"
+				],
+				label: "To-do list",
+				value: KEYS.listTodo
+			},
+			{
+				icon: /* @__PURE__ */ jsx(ChevronRightIcon, {}),
+				keywords: ["collapsible", "expandable"],
+				label: "Toggle",
+				value: KEYS.toggle
+			},
+			{
+				icon: /* @__PURE__ */ jsx(Code2, {}),
+				keywords: ["```"],
+				label: "Code Block",
+				value: KEYS.codeBlock
+			},
+			{
+				icon: /* @__PURE__ */ jsx(Table, {}),
+				label: "Table",
+				value: KEYS.table
+			},
+			{
+				icon: /* @__PURE__ */ jsx(Quote, {}),
+				keywords: [
+					"citation",
+					"blockquote",
+					"quote",
+					">"
+				],
+				label: "Blockquote",
+				value: KEYS.blockquote
+			},
+			{
+				description: "Insert a highlighted block.",
+				icon: /* @__PURE__ */ jsx(LightbulbIcon, {}),
+				keywords: ["note"],
+				label: "Callout",
+				value: KEYS.callout
+			}
+		].map((item) => ({
+			...item,
+			onSelect: (editor, value) => {
+				insertBlock(editor, value, { upsert: true });
+			}
+		}))
+	},
+	{
+		group: "Advanced blocks",
+		items: [
+			{
+				icon: /* @__PURE__ */ jsx(TableOfContentsIcon, {}),
+				keywords: ["toc"],
+				label: "Table of contents",
+				value: KEYS.toc
+			},
+			{
+				icon: /* @__PURE__ */ jsx(Columns3Icon, {}),
+				label: "3 columns",
+				value: "action_three_columns"
+			},
+			{
+				focusEditor: false,
+				icon: /* @__PURE__ */ jsx(RadicalIcon, {}),
+				label: "Equation",
+				value: KEYS.equation
+			}
+		].map((item) => ({
+			...item,
+			onSelect: (editor, value) => {
+				insertBlock(editor, value, { upsert: true });
+			}
+		}))
+	},
+	{
+		group: "Inline",
+		items: [
+			{
+				focusEditor: true,
+				icon: /* @__PURE__ */ jsx(CalendarIcon, {}),
+				keywords: ["time"],
+				label: "Date",
+				value: KEYS.date
+			},
+			{
+				focusEditor: false,
+				icon: /* @__PURE__ */ jsx(RadicalIcon, {}),
+				label: "Inline Equation",
+				value: KEYS.inlineEquation
+			},
+			{
+				focusEditor: true,
+				icon: /* @__PURE__ */ jsx(KeyboardIcon, {}),
+				label: "Keyboard input",
+				value: KEYS.kbd
+			},
+			{
+				focusEditor: true,
+				icon: /* @__PURE__ */ jsx(SuperscriptIcon, {}),
+				label: "Superscript",
+				value: KEYS.sup
+			},
+			{
+				focusEditor: true,
+				icon: /* @__PURE__ */ jsx(SubscriptIcon, {}),
+				label: "Subscript",
+				value: KEYS.sub
+			}
+		].map((item) => ({
+			...item,
+			onSelect: (editor, value) => {
+				insertInlineElement(editor, value);
+			}
+		}))
+	}
+];
+function SlashInputElement(props) {
+	const { editor, element } = props;
+	return /* @__PURE__ */ jsxs(PlateElement, {
+		...props,
+		as: "span",
+		children: [/* @__PURE__ */ jsxs(InlineCombobox, {
+			element,
+			trigger: "/",
+			items: groups,
+			filter: (itemValue, search) => {
+				const item = itemValue;
+				return [
+					item.value,
+					...item.keywords ?? [],
+					item.label
+				].some((keyword) => keyword && filterWords(keyword, search));
+			},
+			children: [/* @__PURE__ */ jsx(InlineComboboxInput, {}), /* @__PURE__ */ jsxs(InlineComboboxContent, { children: [/* @__PURE__ */ jsx(InlineComboboxEmpty, { children: "No results" }), /* @__PURE__ */ jsx(InlineComboboxList, { children: (group) => /* @__PURE__ */ jsxs(InlineComboboxGroup, {
+				items: group.items,
+				children: [/* @__PURE__ */ jsx(InlineComboboxGroupLabel, { children: group.group }), /* @__PURE__ */ jsx(InlineComboboxCollection, { children: (item) => /* @__PURE__ */ jsxs(InlineComboboxItem, {
+					value: item,
+					onClick: () => item.onSelect(editor, item.value),
+					focusEditor: item.focusEditor,
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "mr-2 text-muted-foreground",
+						children: item.icon
+					}), item.label ?? item.value]
+				}, item.value) })]
+			}, group.group) })] })]
+		}), props.children]
+	});
+}
+
+//#endregion
+export { SlashInputElement };

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

@@ -0,0 +1,24 @@
+import { cn } from "../../../lib/utils.mjs";
+import { jsx } from "react/jsx-runtime";
+import { BaseSuggestionPlugin } from "@platejs/suggestion";
+import { SlateLeaf } from "platejs/static";
+
+//#region src/components/editor/ui/suggestion-node-static.tsx
+function SuggestionLeafStatic(props) {
+	const { editor, leaf } = props;
+	const hasRemove = editor.getApi(BaseSuggestionPlugin).suggestion.dataList(leaf).some((data) => data.type === "remove");
+	const Component = {
+		delete: "del",
+		insert: "ins",
+		update: "span"
+	}[{ type: hasRemove ? "delete" : "insert" }.type];
+	return /* @__PURE__ */ jsx(SlateLeaf, {
+		...props,
+		as: Component,
+		className: cn("border-b-2 border-b-brand/[.24] bg-brand/[.08] text-brand/80 no-underline transition-colors duration-200", hasRemove && "border-b-gray-300 bg-gray-300/25 text-gray-400 line-through"),
+		children: props.children
+	});
+}
+
+//#endregion
+export { SuggestionLeafStatic };

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

@@ -0,0 +1,111 @@
+"use client";
+
+import { cn } from "../../../lib/utils.mjs";
+import { suggestionPlugin } from "../plugins/suggestion-kit.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { PlateLeaf, useEditorPlugin, usePluginOption } from "platejs/react";
+import * as React$1 from "react";
+import { CornerDownLeftIcon } from "lucide-react";
+import { cva } from "class-variance-authority";
+
+//#region src/components/editor/ui/suggestion-node.tsx
+const suggestionVariants = cva(cn("bg-emerald-100 text-emerald-700 no-underline transition-colors duration-200"), {
+	defaultVariants: {
+		insertActive: false,
+		remove: false,
+		removeActive: false
+	},
+	variants: {
+		insertActive: {
+			false: "",
+			true: "bg-emerald-200/80"
+		},
+		remove: {
+			false: "",
+			true: "bg-red-100 text-red-700"
+		},
+		removeActive: {
+			false: "",
+			true: "bg-red-200/80 no-underline"
+		}
+	}
+});
+function SuggestionLeaf(props) {
+	const { api, setOption } = useEditorPlugin(suggestionPlugin);
+	const leaf = props.leaf;
+	const leafId = api.suggestion.nodeId(leaf) ?? "";
+	const activeSuggestionId = usePluginOption(suggestionPlugin, "activeId");
+	const hoverSuggestionId = usePluginOption(suggestionPlugin, "hoverId");
+	const dataList = api.suggestion.dataList(leaf);
+	const hasRemove = dataList.some((data) => data.type === "remove");
+	const hasActive = dataList.some((data) => data.id === activeSuggestionId);
+	const hasHover = dataList.some((data) => data.id === hoverSuggestionId);
+	const Component = {
+		delete: "del",
+		insert: "ins",
+		update: "span"
+	}[{ type: hasRemove ? "delete" : "insert" }.type];
+	return /* @__PURE__ */ jsx(PlateLeaf, {
+		...props,
+		as: Component,
+		className: cn(suggestionVariants({
+			insertActive: hasActive || hasHover,
+			remove: hasRemove,
+			removeActive: (hasActive || hasHover) && hasRemove
+		})),
+		attributes: {
+			...props.attributes,
+			onMouseEnter: () => setOption("hoverId", leafId),
+			onMouseLeave: () => setOption("hoverId", null)
+		},
+		children: props.children
+	});
+}
+const SuggestionLineBreak = ({ api, element }) => {
+	if (!api.suggestion.isBlockSuggestion(element)) return;
+	const suggestionData = element.suggestion;
+	return function Component({ children }) {
+		return /* @__PURE__ */ jsx(SuggestionLineBreakContent, {
+			suggestionData,
+			children
+		});
+	};
+};
+function SuggestionLineBreakContent({ children, suggestionData }) {
+	const { isLineBreak, type } = suggestionData;
+	const isRemove = type === "remove";
+	const isInsert = type === "insert";
+	const activeSuggestionId = usePluginOption(suggestionPlugin, "activeId");
+	const hoverSuggestionId = usePluginOption(suggestionPlugin, "hoverId");
+	const isActive = activeSuggestionId === suggestionData.id;
+	const isHover = hoverSuggestionId === suggestionData.id;
+	const spanRef = React$1.useRef(null);
+	const { setOption } = useEditorPlugin(suggestionPlugin);
+	return /* @__PURE__ */ jsx(Fragment, { children: isLineBreak ? /* @__PURE__ */ jsxs(Fragment, { children: [children, /* @__PURE__ */ jsx("span", {
+		ref: spanRef,
+		className: cn("absolute text-justify", suggestionVariants({
+			insertActive: isInsert && (isActive || isHover),
+			remove: isRemove,
+			removeActive: (isActive || isHover) && isRemove
+		})),
+		style: {
+			bottom: 3.5,
+			height: 21
+		},
+		contentEditable: false,
+		children: /* @__PURE__ */ jsx(CornerDownLeftIcon, { className: "mt-0.5 size-4" })
+	})] }) : /* @__PURE__ */ jsx("div", {
+		className: cn(suggestionVariants({
+			insertActive: isInsert && (isActive || isHover),
+			remove: isRemove,
+			removeActive: (isActive || isHover) && isRemove
+		})),
+		onMouseEnter: () => setOption("hoverId", suggestionData.id),
+		onMouseLeave: () => setOption("hoverId", null),
+		"data-block-suggestion": "true",
+		children
+	}) });
+}
+
+//#endregion
+export { SuggestionLeaf, SuggestionLineBreak };

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

@@ -0,0 +1,24 @@
+"use client";
+
+import { cn } from "../../../lib/utils.mjs";
+import { ToolbarButton } from "../../ui/toolbar.mjs";
+import { jsx } from "react/jsx-runtime";
+import { useEditorPlugin, usePluginOption } from "platejs/react";
+import { PencilLineIcon } from "lucide-react";
+import { SuggestionPlugin } from "@platejs/suggestion/react";
+
+//#region src/components/editor/ui/suggestion-toolbar-button.tsx
+function SuggestionToolbarButton() {
+	const { setOption } = useEditorPlugin(SuggestionPlugin);
+	const isSuggesting = usePluginOption(SuggestionPlugin, "isSuggesting");
+	return /* @__PURE__ */ jsx(ToolbarButton, {
+		className: cn(isSuggesting && "text-brand/80 hover:text-brand/80"),
+		onClick: () => setOption("isSuggesting", !isSuggesting),
+		onMouseDown: (e) => e.preventDefault(),
+		tooltip: isSuggesting ? "Turn off suggesting" : "Suggestion edits",
+		children: /* @__PURE__ */ jsx(PencilLineIcon, {})
+	});
+}
+
+//#endregion
+export { SuggestionToolbarButton };