@fuma-content/studio 0.1.0

package/dist/src/components/editor/plugins/suggestion-kit.mjs

@@ -0,0 +1,50 @@
+"use client";
+
+import { SuggestionLeaf, SuggestionLineBreak } from "../ui/suggestion-node.mjs";
+import { discussionPlugin } from "./discussion-kit.mjs";
+import { toTPlatePlugin } from "platejs/react";
+import { isSlateEditor, isSlateString } from "platejs";
+import { BaseSuggestionPlugin } from "@platejs/suggestion";
+
+//#region src/components/editor/plugins/suggestion-kit.tsx
+const suggestionPlugin = toTPlatePlugin(BaseSuggestionPlugin, ({ editor }) => ({ options: {
+	activeId: null,
+	currentUserId: editor.getOption(discussionPlugin, "currentUserId"),
+	hoverId: null,
+	uniquePathMap: /* @__PURE__ */ new Map()
+} })).configure({
+	handlers: { onClick: ({ api, event, setOption, type }) => {
+		let leaf = event.target;
+		let isSet = false;
+		const isBlockLeaf = leaf.dataset.blockSuggestion === "true";
+		const unsetActiveSuggestion = () => {
+			setOption("activeId", null);
+			isSet = true;
+		};
+		if (!isSlateString(leaf) && !isBlockLeaf) unsetActiveSuggestion();
+		while (leaf.parentElement && !isSlateEditor(leaf.parentElement)) {
+			const isBlockSuggestion = leaf.dataset.blockSuggestion === "true";
+			if (leaf.classList.contains(`slate-${type}`) || isBlockSuggestion) {
+				const suggestionEntry = api.suggestion?.node({ isText: !isBlockSuggestion });
+				if (!suggestionEntry) {
+					unsetActiveSuggestion();
+					break;
+				}
+				const id = api.suggestion?.nodeId(suggestionEntry[0]);
+				setOption("activeId", id ?? null);
+				isSet = true;
+				break;
+			}
+			leaf = leaf.parentElement;
+		}
+		if (!isSet) unsetActiveSuggestion();
+	} },
+	render: {
+		belowNodes: SuggestionLineBreak,
+		node: SuggestionLeaf
+	}
+});
+const SuggestionKit = [suggestionPlugin];
+
+//#endregion
+export { SuggestionKit, suggestionPlugin };

package/dist/src/components/editor/plugins/table-base-kit.mjs

@@ -0,0 +1,13 @@
+import { TableCellElementStatic, TableCellHeaderElementStatic, TableElementStatic, TableRowElementStatic } from "../ui/table-node-static.mjs";
+import { BaseTableCellHeaderPlugin, BaseTableCellPlugin, BaseTablePlugin, BaseTableRowPlugin } from "@platejs/table";
+
+//#region src/components/editor/plugins/table-base-kit.tsx
+const BaseTableKit = [
+	BaseTablePlugin.withComponent(TableElementStatic),
+	BaseTableRowPlugin.withComponent(TableRowElementStatic),
+	BaseTableCellPlugin.withComponent(TableCellElementStatic),
+	BaseTableCellHeaderPlugin.withComponent(TableCellHeaderElementStatic)
+];
+
+//#endregion
+export { BaseTableKit };

package/dist/src/components/editor/plugins/table-kit.mjs

@@ -0,0 +1,15 @@
+"use client";
+
+import { TableCellElement, TableCellHeaderElement, TableElement, TableRowElement } from "../ui/table-node.mjs";
+import { TableCellHeaderPlugin, TableCellPlugin, TablePlugin, TableRowPlugin } from "@platejs/table/react";
+
+//#region src/components/editor/plugins/table-kit.tsx
+const TableKit = [
+	TablePlugin.withComponent(TableElement),
+	TableRowPlugin.withComponent(TableRowElement),
+	TableCellPlugin.withComponent(TableCellElement),
+	TableCellHeaderPlugin.withComponent(TableCellHeaderElement)
+];
+
+//#endregion
+export { TableKit };

package/dist/src/components/editor/transforms.mjs

@@ -0,0 +1,125 @@
+"use client";
+
+import { KEYS, PathApi } from "platejs";
+import { insertCallout } from "@platejs/callout";
+import { insertCodeBlock, toggleCodeBlock } from "@platejs/code-block";
+import { insertColumnGroup, toggleColumnGroup } from "@platejs/layout";
+import { insertDate } from "@platejs/date";
+import { insertEquation, insertInlineEquation } from "@platejs/math";
+import { insertAudioPlaceholder, insertFilePlaceholder, insertMedia, insertVideoPlaceholder } from "@platejs/media";
+import { SuggestionPlugin } from "@platejs/suggestion/react";
+import { triggerFloatingLink } from "@platejs/link/react";
+import { TablePlugin } from "@platejs/table/react";
+
+//#region src/components/editor/transforms.ts
+const ACTION_THREE_COLUMNS = "action_three_columns";
+const insertList = (editor, type) => {
+	editor.tf.insertNodes(editor.api.create.block({
+		indent: 1,
+		listStyleType: type
+	}), { select: true });
+};
+const insertBlockMap = {
+	[KEYS.listTodo]: insertList,
+	[KEYS.ol]: insertList,
+	[KEYS.ul]: insertList,
+	[ACTION_THREE_COLUMNS]: (editor) => insertColumnGroup(editor, {
+		columns: 3,
+		select: true
+	}),
+	[KEYS.audio]: (editor) => insertAudioPlaceholder(editor, { select: true }),
+	[KEYS.callout]: (editor) => insertCallout(editor, { select: true }),
+	[KEYS.codeBlock]: (editor) => insertCodeBlock(editor, { select: true }),
+	[KEYS.equation]: (editor) => insertEquation(editor, { select: true }),
+	[KEYS.file]: (editor) => insertFilePlaceholder(editor, { select: true }),
+	[KEYS.img]: (editor) => insertMedia(editor, {
+		select: true,
+		type: KEYS.img
+	}),
+	[KEYS.mediaEmbed]: (editor) => insertMedia(editor, {
+		select: true,
+		type: KEYS.mediaEmbed
+	}),
+	[KEYS.table]: (editor) => editor.getTransforms(TablePlugin).insert.table({}, { select: true }),
+	[KEYS.video]: (editor) => insertVideoPlaceholder(editor, { select: true })
+};
+const insertInlineMap = {
+	[KEYS.date]: (editor) => insertDate(editor, { select: true }),
+	[KEYS.inlineEquation]: (editor) => insertInlineEquation(editor, "", { select: true }),
+	[KEYS.link]: (editor) => triggerFloatingLink(editor, { focused: true }),
+	[KEYS.kbd]: (editor) => {
+		editor.tf.toggleMark(KEYS.kbd);
+	},
+	[KEYS.sup]: (editor) => {
+		editor.tf.toggleMark(KEYS.sup, { remove: KEYS.sub });
+	},
+	[KEYS.sub]: (editor) => {
+		editor.tf.toggleMark(KEYS.sub, { remove: KEYS.sup });
+	}
+};
+const insertBlock = (editor, type, options = {}) => {
+	const { upsert = false } = options;
+	editor.tf.withoutNormalizing(() => {
+		const block = editor.api.block();
+		if (!block) return;
+		const [currentNode, path] = block;
+		const isCurrentBlockEmpty = editor.api.isEmpty(currentNode);
+		const isSameBlockType = type === getBlockType(currentNode);
+		if (upsert && isCurrentBlockEmpty && isSameBlockType) return;
+		if (type in insertBlockMap) insertBlockMap[type](editor, type);
+		else editor.tf.insertNodes(editor.api.create.block({ type }), {
+			at: PathApi.next(path),
+			select: true
+		});
+		if (!isSameBlockType) editor.getApi(SuggestionPlugin).suggestion.withoutSuggestions(() => {
+			editor.tf.removeNodes({ previousEmptyBlock: true });
+		});
+	});
+};
+const insertInlineElement = (editor, type) => {
+	if (insertInlineMap[type]) insertInlineMap[type](editor, type);
+};
+const setList = (editor, type, entry) => {
+	editor.tf.setNodes(editor.api.create.block({
+		indent: 1,
+		listStyleType: type
+	}), { at: entry[1] });
+};
+const setBlockMap = {
+	[KEYS.listTodo]: setList,
+	[KEYS.ol]: setList,
+	[KEYS.ul]: setList,
+	[ACTION_THREE_COLUMNS]: (editor) => toggleColumnGroup(editor, { columns: 3 }),
+	[KEYS.codeBlock]: (editor) => toggleCodeBlock(editor)
+};
+const setBlockType = (editor, type, { at } = {}) => {
+	editor.tf.withoutNormalizing(() => {
+		const setEntry = (entry) => {
+			const [node, path] = entry;
+			if (node[KEYS.listType]) editor.tf.unsetNodes([KEYS.listType, "indent"], { at: path });
+			if (type in setBlockMap) return setBlockMap[type](editor, type, entry);
+			if (node.type !== type) editor.tf.setNodes({ type }, { at: path });
+		};
+		if (at) {
+			const entry = editor.api.node(at);
+			if (entry) {
+				setEntry(entry);
+				return;
+			}
+		}
+		editor.api.blocks({ mode: "lowest" }).forEach((entry) => {
+			setEntry(entry);
+		});
+	});
+};
+const getBlockType = (block) => {
+	if (block[KEYS.listType]) {
+		if (block[KEYS.listType] === KEYS.ol) return KEYS.ol;
+		if (block[KEYS.listType] === KEYS.listTodo) return KEYS.listTodo;
+		return KEYS.ul;
+	}
+	return block.type;
+};
+
+//#endregion
+export { getBlockType, insertBlock, insertInlineElement, setBlockType };

package/dist/src/components/editor/ui/ai-chat-editor.mjs

@@ -0,0 +1,21 @@
+"use client";
+
+import { BaseEditorKit } from "../editor-base-kit.mjs";
+import { EditorStatic } from "./editor-static.mjs";
+import { jsx } from "react/jsx-runtime";
+import { usePlateEditor } from "platejs/react";
+import * as React$1 from "react";
+import { useAIChatEditor } from "@platejs/ai/react";
+
+//#region src/components/editor/ui/ai-chat-editor.tsx
+const AIChatEditor = React$1.memo(function AIChatEditor$1({ content }) {
+	const aiEditor = usePlateEditor({ plugins: BaseEditorKit });
+	useAIChatEditor(aiEditor, content);
+	return /* @__PURE__ */ jsx(EditorStatic, {
+		variant: "aiChat",
+		editor: aiEditor
+	});
+});
+
+//#endregion
+export { AIChatEditor };