@fuma-content/studio 0.1.0

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

@@ -0,0 +1,168 @@
+"use client";
+
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItemIndicator, DropdownMenuRadioItem, DropdownMenuTrigger } from "../../ui/dropdown-menu.mjs";
+import { ToolbarButton, ToolbarMenuGroup } from "../../ui/toolbar.mjs";
+import { getBlockType, setBlockType } from "../transforms.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEditorRef, useSelectionFragmentProp } from "platejs/react";
+import * as React$1 from "react";
+import { KEYS } from "platejs";
+import { CheckIcon, ChevronRightIcon, Columns3Icon, FileCodeIcon, Heading1Icon, Heading2Icon, Heading3Icon, Heading4Icon, Heading5Icon, Heading6Icon, ListIcon, ListOrderedIcon, PilcrowIcon, QuoteIcon, SquareIcon } from "lucide-react";
+
+//#region src/components/editor/ui/turn-into-toolbar-button.tsx
+const turnIntoItems = [
+	{
+		icon: /* @__PURE__ */ jsx(PilcrowIcon, {}),
+		keywords: ["paragraph"],
+		label: "Text",
+		value: KEYS.p
+	},
+	{
+		icon: /* @__PURE__ */ jsx(Heading1Icon, {}),
+		keywords: ["title", "h1"],
+		label: "Heading 1",
+		value: "h1"
+	},
+	{
+		icon: /* @__PURE__ */ jsx(Heading2Icon, {}),
+		keywords: ["subtitle", "h2"],
+		label: "Heading 2",
+		value: "h2"
+	},
+	{
+		icon: /* @__PURE__ */ jsx(Heading3Icon, {}),
+		keywords: ["subtitle", "h3"],
+		label: "Heading 3",
+		value: "h3"
+	},
+	{
+		icon: /* @__PURE__ */ jsx(Heading4Icon, {}),
+		keywords: ["subtitle", "h4"],
+		label: "Heading 4",
+		value: "h4"
+	},
+	{
+		icon: /* @__PURE__ */ jsx(Heading5Icon, {}),
+		keywords: ["subtitle", "h5"],
+		label: "Heading 5",
+		value: "h5"
+	},
+	{
+		icon: /* @__PURE__ */ jsx(Heading6Icon, {}),
+		keywords: ["subtitle", "h6"],
+		label: "Heading 6",
+		value: "h6"
+	},
+	{
+		icon: /* @__PURE__ */ jsx(ListIcon, {}),
+		keywords: [
+			"unordered",
+			"ul",
+			"-"
+		],
+		label: "Bulleted list",
+		value: KEYS.ul
+	},
+	{
+		icon: /* @__PURE__ */ jsx(ListOrderedIcon, {}),
+		keywords: [
+			"ordered",
+			"ol",
+			"1"
+		],
+		label: "Numbered list",
+		value: KEYS.ol
+	},
+	{
+		icon: /* @__PURE__ */ jsx(SquareIcon, {}),
+		keywords: [
+			"checklist",
+			"task",
+			"checkbox",
+			"[]"
+		],
+		label: "To-do list",
+		value: KEYS.listTodo
+	},
+	{
+		icon: /* @__PURE__ */ jsx(ChevronRightIcon, {}),
+		keywords: ["collapsible", "expandable"],
+		label: "Toggle list",
+		value: KEYS.toggle
+	},
+	{
+		icon: /* @__PURE__ */ jsx(FileCodeIcon, {}),
+		keywords: ["```"],
+		label: "Code",
+		value: KEYS.codeBlock
+	},
+	{
+		icon: /* @__PURE__ */ jsx(QuoteIcon, {}),
+		keywords: [
+			"citation",
+			"blockquote",
+			">"
+		],
+		label: "Quote",
+		value: KEYS.blockquote
+	},
+	{
+		icon: /* @__PURE__ */ jsx(Columns3Icon, {}),
+		label: "3 columns",
+		value: "action_three_columns"
+	}
+];
+function TurnIntoToolbarButton(props) {
+	const editor = useEditorRef();
+	const [open, setOpen] = React$1.useState(false);
+	const value = useSelectionFragmentProp({
+		defaultValue: KEYS.p,
+		getProp: (node) => getBlockType(node)
+	});
+	const selectedItem = React$1.useMemo(() => turnIntoItems.find((item) => item.value === (value ?? KEYS.p)) ?? turnIntoItems[0], [value]);
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		open,
+		onOpenChange: setOpen,
+		modal: false,
+		...props,
+		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(ToolbarButton, {
+				className: "min-w-[125px]",
+				pressed: open,
+				tooltip: "Turn into",
+				isDropdown: true,
+				children: selectedItem.label
+			})
+		}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			className: "ignore-click-outside/toolbar min-w-[180px]",
+			onCloseAutoFocus: (e) => {
+				e.preventDefault();
+				editor.tf.focus();
+			},
+			align: "start",
+			children: /* @__PURE__ */ jsx(ToolbarMenuGroup, {
+				value,
+				onValueChange: (type) => {
+					setBlockType(editor, type);
+				},
+				label: "Turn into",
+				children: turnIntoItems.map(({ icon, label, value: itemValue }) => /* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
+					className: "pl-2 *:first:[span]:hidden",
+					value: itemValue,
+					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, {}) })
+						}),
+						icon,
+						label
+					]
+				}, itemValue))
+			})
+		})]
+	});
+}
+
+//#endregion
+export { TurnIntoToolbarButton };

package/dist/src/components/editor/use-chat.mjs

@@ -0,0 +1,80 @@
+"use client";
+
+import { discussionPlugin } from "./plugins/discussion-kit.mjs";
+import { aiChatPlugin } from "./plugins/ai-kit.mjs";
+import { deserializeMd } from "@platejs/markdown";
+import { useEditorRef, usePluginOption } from "platejs/react";
+import * as React$1 from "react";
+import { KEYS, NodeApi, TextApi, nanoid } from "platejs";
+import { AIChatPlugin, aiCommentToRange } from "@platejs/ai/react";
+import { getCommentKey, getTransientCommentKey } from "@platejs/comment";
+import { BlockSelectionPlugin } from "@platejs/selection/react";
+import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport } from "ai";
+
+//#region src/components/editor/use-chat.ts
+const useChat$1 = () => {
+	const editor = useEditorRef();
+	const options = usePluginOption(aiChatPlugin, "chatOptions");
+	const chat = useChat({
+		id: "editor",
+		transport: new DefaultChatTransport({ api: options.api || "/api/ai/command" }),
+		onData(data) {
+			if (data.type === "data-toolName") editor.setOption(AIChatPlugin, "toolName", data.data);
+			if (data.type === "data-comment" && data.data) {
+				if (data.data.status === "finished") {
+					editor.getApi(BlockSelectionPlugin).blockSelection.deselect();
+					return;
+				}
+				const aiComment = data.data.comment;
+				const range = aiCommentToRange(editor, aiComment);
+				if (!range) return console.warn("No range found for AI comment");
+				const discussions = editor.getOption(discussionPlugin, "discussions") || [];
+				const discussionId = nanoid();
+				const newDiscussion = {
+					id: discussionId,
+					comments: [{
+						id: nanoid(),
+						contentRich: [{
+							children: [{ text: aiComment.comment }],
+							type: "p"
+						}],
+						createdAt: /* @__PURE__ */ new Date(),
+						discussionId,
+						isEdited: false,
+						userId: editor.getOption(discussionPlugin, "currentUserId")
+					}],
+					createdAt: /* @__PURE__ */ new Date(),
+					documentContent: deserializeMd(editor, aiComment.content).map((node) => NodeApi.string(node)).join("\n"),
+					isResolved: false,
+					userId: editor.getOption(discussionPlugin, "currentUserId")
+				};
+				const updatedDiscussions = [...discussions, newDiscussion];
+				editor.setOption(discussionPlugin, "discussions", updatedDiscussions);
+				editor.tf.withMerging(() => {
+					editor.tf.setNodes({
+						[getCommentKey(newDiscussion.id)]: true,
+						[getTransientCommentKey()]: true,
+						[KEYS.comment]: true
+					}, {
+						at: range,
+						match: TextApi.isText,
+						split: true
+					});
+				});
+			}
+		},
+		...options
+	});
+	React$1.useEffect(() => {
+		editor.setOption(AIChatPlugin, "chat", chat);
+	}, [
+		chat.status,
+		chat.messages,
+		chat.error
+	]);
+	return chat;
+};
+
+//#endregion
+export { useChat$1 as useChat };

package/dist/src/components/json-schema-editor/client.mjs

@@ -0,0 +1,46 @@
+"use client";
+
+import { SchemaProvider, useResolvedSchema, useSchema } from "./schema.mjs";
+import { FieldSet } from "./components/inputs.mjs";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+
+//#region src/components/json-schema-editor/client.tsx
+function JSONSchemaEditorProvider({ children, defaultValue, onValueChange, ...props }) {
+	const form = useForm({ defaultValues: { value: defaultValue } });
+	const onValueChangeRef = useRef(onValueChange);
+	onValueChangeRef.current = onValueChange;
+	useEffect(() => {
+		return form.subscribe({
+			formState: { values: true },
+			callback(data) {
+				onValueChangeRef.current(data.values.value);
+			}
+		});
+	}, []);
+	return /* @__PURE__ */ jsx(FormProvider, {
+		...form,
+		children: /* @__PURE__ */ jsx(SchemaProvider, {
+			...props,
+			children
+		})
+	});
+}
+function JSONSchemaEditorContent() {
+	const { schema } = useSchema();
+	const field = useResolvedSchema(schema);
+	const fieldName = "value";
+	if (field.format === "binary") return /* @__PURE__ */ jsx(FieldSet, {
+		field,
+		fieldName
+	});
+	return /* @__PURE__ */ jsx(FieldSet, {
+		field,
+		fieldName,
+		collapsible: false
+	});
+}
+
+//#endregion
+export { JSONSchemaEditorContent, JSONSchemaEditorProvider };