@fuma-content/studio 0.1.0

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

@@ -0,0 +1,23 @@
+"use client";
+
+import { ToolbarButton } from "../../ui/toolbar.mjs";
+import { jsx } from "react/jsx-runtime";
+import { useEditorRef } from "platejs/react";
+import { RadicalIcon } from "lucide-react";
+import { insertInlineEquation } from "@platejs/math";
+
+//#region src/components/editor/ui/equation-toolbar-button.tsx
+function InlineEquationToolbarButton(props) {
+	const editor = useEditorRef();
+	return /* @__PURE__ */ jsx(ToolbarButton, {
+		...props,
+		onClick: () => {
+			insertInlineEquation(editor);
+		},
+		tooltip: "Mark as equation",
+		children: /* @__PURE__ */ jsx(RadicalIcon, {})
+	});
+}
+
+//#endregion
+export { InlineEquationToolbarButton };

package/dist/src/components/editor/ui/fixed-toolbar-buttons.mjs

@@ -0,0 +1,109 @@
+"use client";
+
+import { ToolbarGroup } from "../../ui/toolbar.mjs";
+import { EmojiToolbarButton } from "./emoji-toolbar-button.mjs";
+import { AIToolbarButton } from "./ai-toolbar-button.mjs";
+import { AlignToolbarButton } from "./align-toolbar-button.mjs";
+import { CommentToolbarButton } from "./comment-toolbar-button.mjs";
+import { FontColorToolbarButton } from "./font-color-toolbar-button.mjs";
+import { FontSizeToolbarButton } from "./font-size-toolbar-button.mjs";
+import { RedoToolbarButton, UndoToolbarButton } from "./history-toolbar-button.mjs";
+import { IndentToolbarButton, OutdentToolbarButton } from "./indent-toolbar-button.mjs";
+import { InsertToolbarButton } from "./insert-toolbar-button.mjs";
+import { LineHeightToolbarButton } from "./line-height-toolbar-button.mjs";
+import { LinkToolbarButton } from "./link-toolbar-button.mjs";
+import { BulletedListToolbarButton, NumberedListToolbarButton, TodoListToolbarButton } from "./list-toolbar-button.mjs";
+import { MarkToolbarButton } from "./mark-toolbar-button.mjs";
+import { MEDIA_CONFIG, MediaToolbarButton } from "./media-toolbar-button.mjs";
+import { ModeToolbarButton } from "./mode-toolbar-button.mjs";
+import { TableToolbarButton } from "./table-toolbar-button.mjs";
+import { TurnIntoToolbarButton } from "./turn-into-toolbar-button.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEditorReadOnly } from "platejs/react";
+import { KEYS } from "platejs";
+import { BaselineIcon, BoldIcon, Code2Icon, HighlighterIcon, ItalicIcon, PaintBucketIcon, StrikethroughIcon, UnderlineIcon, WandSparklesIcon } from "lucide-react";
+
+//#region src/components/editor/ui/fixed-toolbar-buttons.tsx
+function FixedToolbarButtons() {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full",
+		children: [
+			!useEditorReadOnly() && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsxs(ToolbarGroup, { children: [/* @__PURE__ */ jsx(UndoToolbarButton, {}), /* @__PURE__ */ jsx(RedoToolbarButton, {})] }),
+				/* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsx(AIToolbarButton, {
+					tooltip: "AI commands",
+					children: /* @__PURE__ */ jsx(WandSparklesIcon, {})
+				}) }),
+				/* @__PURE__ */ jsxs(ToolbarGroup, { children: [
+					/* @__PURE__ */ jsx(InsertToolbarButton, {}),
+					/* @__PURE__ */ jsx(TurnIntoToolbarButton, {}),
+					/* @__PURE__ */ jsx(FontSizeToolbarButton, {})
+				] }),
+				/* @__PURE__ */ jsxs(ToolbarGroup, { children: [
+					/* @__PURE__ */ jsx(MarkToolbarButton, {
+						nodeType: KEYS.bold,
+						tooltip: "Bold (⌘+B)",
+						children: /* @__PURE__ */ jsx(BoldIcon, {})
+					}),
+					/* @__PURE__ */ jsx(MarkToolbarButton, {
+						nodeType: KEYS.italic,
+						tooltip: "Italic (⌘+I)",
+						children: /* @__PURE__ */ jsx(ItalicIcon, {})
+					}),
+					/* @__PURE__ */ jsx(MarkToolbarButton, {
+						nodeType: KEYS.underline,
+						tooltip: "Underline (⌘+U)",
+						children: /* @__PURE__ */ jsx(UnderlineIcon, {})
+					}),
+					/* @__PURE__ */ jsx(MarkToolbarButton, {
+						nodeType: KEYS.strikethrough,
+						tooltip: "Strikethrough (⌘+⇧+M)",
+						children: /* @__PURE__ */ jsx(StrikethroughIcon, {})
+					}),
+					/* @__PURE__ */ jsx(MarkToolbarButton, {
+						nodeType: KEYS.code,
+						tooltip: "Code (⌘+E)",
+						children: /* @__PURE__ */ jsx(Code2Icon, {})
+					}),
+					/* @__PURE__ */ jsx(FontColorToolbarButton, {
+						nodeType: KEYS.color,
+						tooltip: "Text color",
+						children: /* @__PURE__ */ jsx(BaselineIcon, {})
+					}),
+					/* @__PURE__ */ jsx(FontColorToolbarButton, {
+						nodeType: KEYS.backgroundColor,
+						tooltip: "Background color",
+						children: /* @__PURE__ */ jsx(PaintBucketIcon, {})
+					})
+				] }),
+				/* @__PURE__ */ jsxs(ToolbarGroup, { children: [
+					/* @__PURE__ */ jsx(AlignToolbarButton, {}),
+					/* @__PURE__ */ jsx(NumberedListToolbarButton, {}),
+					/* @__PURE__ */ jsx(BulletedListToolbarButton, {}),
+					/* @__PURE__ */ jsx(TodoListToolbarButton, {})
+				] }),
+				/* @__PURE__ */ jsxs(ToolbarGroup, { children: [
+					/* @__PURE__ */ jsx(LinkToolbarButton, {}),
+					/* @__PURE__ */ jsx(TableToolbarButton, {}),
+					/* @__PURE__ */ jsx(EmojiToolbarButton, {})
+				] }),
+				/* @__PURE__ */ jsx(ToolbarGroup, { children: Object.keys(MEDIA_CONFIG).map((nodeType) => /* @__PURE__ */ jsx(MediaToolbarButton, { nodeType }, nodeType)) }),
+				/* @__PURE__ */ jsxs(ToolbarGroup, { children: [
+					/* @__PURE__ */ jsx(LineHeightToolbarButton, {}),
+					/* @__PURE__ */ jsx(OutdentToolbarButton, {}),
+					/* @__PURE__ */ jsx(IndentToolbarButton, {})
+				] })
+			] }),
+			/* @__PURE__ */ jsx("div", { className: "grow" }),
+			/* @__PURE__ */ jsxs(ToolbarGroup, { children: [/* @__PURE__ */ jsx(MarkToolbarButton, {
+				nodeType: KEYS.highlight,
+				tooltip: "Highlight",
+				children: /* @__PURE__ */ jsx(HighlighterIcon, {})
+			}), /* @__PURE__ */ jsx(CommentToolbarButton, {})] }),
+			/* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsx(ModeToolbarButton, {}) })
+		]
+	});
+}
+
+//#endregion
+export { FixedToolbarButtons };

package/dist/src/components/editor/ui/fixed-toolbar.mjs

@@ -0,0 +1,16 @@
+"use client";
+
+import { cn } from "../../../lib/utils.mjs";
+import { Toolbar } from "../../ui/toolbar.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/editor/ui/fixed-toolbar.tsx
+function FixedToolbar(props) {
+	return /* @__PURE__ */ jsx(Toolbar, {
+		...props,
+		className: cn("sticky top-(--toolbar-offset,0) z-20 w-full justify-between overflow-x-auto rounded-t-lg border-b border-b-border bg-background/95 p-1 backdrop-blur-sm supports-backdrop-blur:bg-background/60 [scrollbar-width:none]", props.className)
+	});
+}
+
+//#endregion
+export { FixedToolbar };

package/dist/src/components/editor/ui/floating-toolbar-buttons.mjs

@@ -0,0 +1,54 @@
+"use client";
+
+import { ToolbarGroup } from "../../ui/toolbar.mjs";
+import { AIToolbarButton } from "./ai-toolbar-button.mjs";
+import { CommentToolbarButton } from "./comment-toolbar-button.mjs";
+import { LinkToolbarButton } from "./link-toolbar-button.mjs";
+import { MarkToolbarButton } from "./mark-toolbar-button.mjs";
+import { TurnIntoToolbarButton } from "./turn-into-toolbar-button.mjs";
+import { InlineEquationToolbarButton } from "./equation-toolbar-button.mjs";
+import { SuggestionToolbarButton } from "./suggestion-toolbar-button.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEditorReadOnly } from "platejs/react";
+import { KEYS } from "platejs";
+import { BoldIcon, Code2Icon, ItalicIcon, StrikethroughIcon, UnderlineIcon, WandSparklesIcon } from "lucide-react";
+
+//#region src/components/editor/ui/floating-toolbar-buttons.tsx
+function FloatingToolbarButtons() {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [!useEditorReadOnly() && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsxs(AIToolbarButton, {
+		tooltip: "AI commands",
+		children: [/* @__PURE__ */ jsx(WandSparklesIcon, {}), "Ask AI"]
+	}) }), /* @__PURE__ */ jsxs(ToolbarGroup, { children: [
+		/* @__PURE__ */ jsx(TurnIntoToolbarButton, {}),
+		/* @__PURE__ */ jsx(MarkToolbarButton, {
+			nodeType: KEYS.bold,
+			tooltip: "Bold (⌘+B)",
+			children: /* @__PURE__ */ jsx(BoldIcon, {})
+		}),
+		/* @__PURE__ */ jsx(MarkToolbarButton, {
+			nodeType: KEYS.italic,
+			tooltip: "Italic (⌘+I)",
+			children: /* @__PURE__ */ jsx(ItalicIcon, {})
+		}),
+		/* @__PURE__ */ jsx(MarkToolbarButton, {
+			nodeType: KEYS.underline,
+			tooltip: "Underline (⌘+U)",
+			children: /* @__PURE__ */ jsx(UnderlineIcon, {})
+		}),
+		/* @__PURE__ */ jsx(MarkToolbarButton, {
+			nodeType: KEYS.strikethrough,
+			tooltip: "Strikethrough (⌘+⇧+M)",
+			children: /* @__PURE__ */ jsx(StrikethroughIcon, {})
+		}),
+		/* @__PURE__ */ jsx(MarkToolbarButton, {
+			nodeType: KEYS.code,
+			tooltip: "Code (⌘+E)",
+			children: /* @__PURE__ */ jsx(Code2Icon, {})
+		}),
+		/* @__PURE__ */ jsx(InlineEquationToolbarButton, {}),
+		/* @__PURE__ */ jsx(LinkToolbarButton, {})
+	] })] }), /* @__PURE__ */ jsxs(ToolbarGroup, { children: [/* @__PURE__ */ jsx(CommentToolbarButton, {}), /* @__PURE__ */ jsx(SuggestionToolbarButton, {})] })] });
+}
+
+//#endregion
+export { FloatingToolbarButtons };

package/dist/src/components/editor/ui/floating-toolbar.mjs

@@ -0,0 +1,51 @@
+"use client";
+
+import { cn } from "../../../lib/utils.mjs";
+import { Toolbar } from "../../ui/toolbar.mjs";
+import { jsx } from "react/jsx-runtime";
+import { useComposedRef, useEditorId, useEventEditorValue, usePluginOption } from "platejs/react";
+import { KEYS } from "platejs";
+import { flip, offset, useFloatingToolbar, useFloatingToolbarState } from "@platejs/floating";
+
+//#region src/components/editor/ui/floating-toolbar.tsx
+function FloatingToolbar({ children, className, state, ...props }) {
+	const editorId = useEditorId();
+	const focusedEditorId = useEventEditorValue("focus");
+	const isFloatingLinkOpen = !!usePluginOption({ key: KEYS.link }, "mode");
+	const isAIChatOpen = usePluginOption({ key: KEYS.aiChat }, "open");
+	const { clickOutsideRef, hidden, props: rootProps, ref: floatingRef } = useFloatingToolbar(useFloatingToolbarState({
+		editorId,
+		focusedEditorId,
+		hideToolbar: isFloatingLinkOpen || isAIChatOpen,
+		...state,
+		floatingOptions: {
+			strategy: "fixed",
+			middleware: [offset(12), flip({
+				fallbackPlacements: [
+					"top-start",
+					"top-end",
+					"bottom-start",
+					"bottom-end"
+				],
+				padding: 12
+			})],
+			placement: "top",
+			...state?.floatingOptions
+		}
+	}));
+	const ref = useComposedRef(props.ref, floatingRef);
+	if (hidden) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref: clickOutsideRef,
+		children: /* @__PURE__ */ jsx(Toolbar, {
+			...props,
+			...rootProps,
+			ref,
+			className: cn("absolute z-50 overflow-x-auto whitespace-nowrap rounded-md border bg-popover text-popover-foreground p-1 opacity-100 shadow-md max-w-[80vw] print:hidden [scrollbar-width:none]", className),
+			children
+		})
+	});
+}
+
+//#endregion
+export { FloatingToolbar };