Project Graph
loading...
================================================
FILE: app/src/App.tsx
================================================
import MyContextMenuContent from "@/components/context-menu-content";
import RenderSubWindows from "@/components/render-sub-windows";
import { Button } from "@/components/ui/button";
import { ContextMenu, ContextMenuTrigger } from "@/components/ui/context-menu";
import { Dialog } from "@/components/ui/dialog";
import Welcome from "@/components/welcome-page";
import { Project, ProjectState } from "@/core/Project";
import { GlobalMenu } from "@/core/service/GlobalMenu";
import { Settings } from "@/core/service/Settings";
import { Telemetry } from "@/core/service/Telemetry";
import { Themes } from "@/core/service/Themes";
import { globalShortcutManager } from "@/core/service/controlService/shortcutKeysEngine/GlobalShortcutManager";
import {
activeProjectAtom,
isClassroomModeAtom,
isClickThroughEnabledAtom,
isWindowAlwaysOnTopAtom,
isWindowMaxsizedAtom,
projectsAtom,
} from "@/state";
import { getVersion } from "@tauri-apps/api/app";
import { getAllWindows, getCurrentWindow } from "@tauri-apps/api/window";
import { arch, platform, version } from "@tauri-apps/plugin-os";
import { restoreStateCurrent, saveWindowState, StateFlags } from "@tauri-apps/plugin-window-state";
import { useAtom } from "jotai";
import { ChevronsLeftRight, Copy, Minus, Pin, PinOff, Square, X } from "lucide-react";
import { useCallback, useEffect, useRef, useState } from "react";
import { toast } from "sonner";
import { cpuInfo } from "tauri-plugin-system-info-api";
import { DragFileIntoStageEngine } from "./core/service/dataManageService/dragFileIntoStageEngine/dragFileIntoStageEngine";
import { cn } from "./utils/cn";
import { isMac, isWindows } from "./utils/platform";
import { KeyBindsUI } from "./core/service/controlService/shortcutKeysEngine/KeyBindsUI";
import { checkAndFixShortcutStorage } from "./core/service/controlService/shortcutKeysEngine/ShortcutKeyFixer";
import { ProjectTabs } from "./ProjectTabs";
import { DropWindowCover } from "./DropWindowCover";
import ToolbarContent from "./components/toolbar-content";
import RightToolbar from "./components/right-toolbar";
import ThemeModeSwitch from "@/components/theme-mode-switch";
export default function App() {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [_, _setMaximized] = useAtom(isWindowMaxsizedAtom);
const [projects, setProjects] = useAtom(projectsAtom);
const [activeProject, setActiveProject] = useAtom(activeProjectAtom);
const canvasWrapperRef = useRef e.preventDefault()}
>
{/* 菜单 | 标签页 | ...移动窗口区域... | 窗口控制按钮 */}
{/* ======= */}
{/*
);
}
/**
* 窗口右上角的最小化，最大化，关闭等按钮
*/
function WindowButtons() {
const [maximized] = useAtom(isWindowMaxsizedAtom);
const [isClickThroughEnabled] = useAtom(isClickThroughEnabledAtom);
const [isWindowAlwaysOnTop, setIsWindowAlwaysOnTop] = useAtom(isWindowAlwaysOnTopAtom);
const checkoutWindowsAlwaysTop = async () => {
const tauriWindow = getCurrentWindow();
if (isWindowAlwaysOnTop) {
setIsWindowAlwaysOnTop(false);
await tauriWindow.setAlwaysOnTop(false);
} else {
setIsWindowAlwaysOnTop(true);
await tauriWindow.setAlwaysOnTop(true);
}
};
return (
{isMac &&
getCurrentWindow().close()}
>
)}
{dropMouseLocation !== "notInWindowZone" && (
{isClickThroughEnabled && Alt + 2关闭窗口穿透点击}
{isMac ? (
);
}
export function Catch() {
return <>;
}
================================================
FILE: app/src/DropWindowCover.tsx
================================================
import { cn } from "./utils/cn";
/**
* 拖拽鼠标进入舞台时，覆盖一个提示区域
* 用于提示用户在不同位置释放有不同的效果
*/
export const DropWindowCover = ({
dropMouseLocation,
isDraft,
}: {
dropMouseLocation: "top" | "middle" | "bottom" | "notInWindowZone";
isDraft: boolean;
}) => {
//
return (
getCurrentWindow().close()}
>
getCurrentWindow().minimize()}
>
{
getCurrentWindow()
.isFullscreen()
.then((res) => getCurrentWindow().setFullscreen(!res));
}}
>
{
e.stopPropagation();
checkoutWindowsAlwaysTop();
}}
>
{isWindowAlwaysOnTop ?
) : (
{/* 钉住 */}
{/* 最小化 */}
{/* 最大化/还原 */}
{maximized ? (
) : (
)}
{/* 关闭 */}
)}
拖拽到这里：追加到舞台
如果是图片文件（png/jpg/jpeg/webp），则追加到舞台，如果是prg工程文件，则打开标签页拖拽到这里：以 相对路径 生成文本节点到舞台
{isDraft && （草稿文件无路径，无法使用相对路径）}拖拽到这里：以 绝对路径 生成文本节点到舞台
这样就可以构建外部文件链接，选中路径为内容的文本节点，直接调用系统默认方式打开此文件了
{projects.map((project) => (
))}
);
});
================================================
FILE: app/src/assets/versions.json
================================================
[
{
"version": "0.0.0-dev",
"name": "筑梦空间",
"name_en": "Development Build"
},
{
"version": "0.0.0-nightly",
"name": "夜筑新梦",
"name_en": "Nightly Build"
},
{
"version": "1.0",
"name": "风起云涌之刻",
"name_en": "Whirlwind Ascension"
},
{
"version": "1.1",
"name": "地动山摇之时",
"name_en": "Momentous Rupture"
},
{
"version": "1.2",
"name": "2025年新纪元",
"name_en": "The Great River"
},
{
"version": "1.3",
"name": "层峦叠嶂之绘",
"name_en": "Layered Peaks"
},
{
"version": "1.4",
"name": "寰宇重塑之业",
"name_en": "Cosmic Reform"
},
{
"version": "1.5",
"name": "云程发轫之势",
"name_en": "Promising Start"
},
{
"version": "1.6",
"name": "贝塞流光之幕",
"name_en": "Bézier Luminescence"
},
{
"version": "1.7",
"name": "控弦绘影之织",
"name_en": "CR Precision Weave"
},
{
"version": "1.8",
"name": "视界纵横之窗",
"name_en": "Panoramic Weave"
},
{
"version": "2.0",
"name": "零钥",
"name_en": "Nullkey"
}
]
================================================
FILE: app/src/cli.tsx
================================================
import { writeStdout } from "@/utils/otherApi";
import { CliMatches } from "@tauri-apps/plugin-cli";
export async function runCli(matches: CliMatches) {
if (matches.args.help?.occurrences > 0) {
writeStdout(cliHelpText);
return;
}
if (matches.args.output?.occurrences > 0) {
const outputPath = matches.args.output?.value as string;
const outputFormat = outputPath.endsWith(".svg") || outputPath === "-" ? "svg" : "";
if (outputFormat === "svg") {
// const result = StageExportSvg.dumpStageToSVGString();
// if (outputPath === "-") {
// writeStdout(result);
// } else {
// await writeTextFile(outputPath, result);
// }
} else {
throw new Error("Invalid output format. Only SVG format is supported.");
}
}
}
const cliHelpText = `
____ _ __ ______ __
/ __ \\_________ (_)__ _____/ \\/ ____/________ _____ / /_
/ /_/ / ___/ __ \\ / / _ \\/ ___/ __\\/ __/ ___/ __ \\/ __ \\/ __ \\
/ ____/ / / /_/ / / / __/ /__/ /_/ \\/_/ / / / /_/ / /_/ / / / /
/_/ /_/ \\____/_/ /\\___/\\___/\\__\\/____/_/ \\__,_/ .___/_/ /_/
/___/ /_/
https://project-graph.top/zh/features/cli
`;
================================================
FILE: app/src/components/context-menu-content.tsx
================================================
import { Button } from "@/components/ui/button";
import {
ContextMenuContent,
ContextMenuItem,
ContextMenuSub,
ContextMenuSubContent,
ContextMenuSubTrigger,
} from "@/components/ui/context-menu";
import { Dialog } from "@/components/ui/dialog";
import { MouseLocation } from "@/core/service/controlService/MouseLocation";
import { ColorSmartTools } from "@/core/service/dataManageService/colorSmartTools";
import { ConnectNodeSmartTools } from "@/core/service/dataManageService/connectNodeSmartTools";
import { TextNodeSmartTools } from "@/core/service/dataManageService/textNodeSmartTools";
import { ColorManager } from "@/core/service/feedbackService/ColorManager";
import { Settings } from "@/core/service/Settings";
import { ConnectableEntity } from "@/core/stage/stageObject/abstract/ConnectableEntity";
import { Edge } from "@/core/stage/stageObject/association/Edge";
import { MultiTargetUndirectedEdge } from "@/core/stage/stageObject/association/MutiTargetUndirectedEdge";
import { ImageNode } from "@/core/stage/stageObject/entity/ImageNode";
import { ReferenceBlockNode } from "@/core/stage/stageObject/entity/ReferenceBlockNode";
import { Section } from "@/core/stage/stageObject/entity/Section";
import { TextNode } from "@/core/stage/stageObject/entity/TextNode";
import { activeProjectAtom, contextMenuTooltipWordsAtom } from "@/state";
import ColorPaletteWindow from "@/sub/ColorPaletteWindow";
import ColorWindow from "@/sub/ColorWindow";
import { Direction } from "@/types/directions";
import { parseEmacsKey } from "@/utils/emacs";
import { openBrowserOrFile } from "@/utils/externalOpen";
import { exportImagesToProjectDirectory } from "@/utils/imageExport";
import { Color, Vector } from "@graphif/data-structures";
import { Image as TauriImage } from "@tauri-apps/api/image";
import { writeImage } from "@tauri-apps/plugin-clipboard-manager";
import { useAtom } from "jotai";
import {
AlignCenterHorizontal,
AlignCenterVertical,
AlignEndHorizontal,
AlignEndVertical,
AlignHorizontalJustifyStart,
AlignHorizontalSpaceBetween,
AlignStartHorizontal,
AlignStartVertical,
AlignVerticalJustifyStart,
AlignVerticalSpaceBetween,
ArrowDownUp,
ArrowLeftFromLine,
ArrowLeftRight,
ArrowRightFromLine,
ArrowUpRight,
ArrowUpToLine,
Asterisk,
Box,
Check,
ChevronDown,
ChevronsRightLeft,
ChevronUp,
Clipboard,
Code,
Copy,
CornerUpRight,
Dot,
Ellipsis,
Equal,
ExternalLink,
GitPullRequestCreateArrow,
Grip,
Images,
LayoutDashboard,
LayoutPanelTop,
ListEnd,
Lock,
Maximize2,
Minimize2,
MoveDown,
MoveHorizontal,
MoveRight,
MoveUp,
MoveUpRight,
Network,
Package,
PaintBucket,
Palette,
Rabbit,
RefreshCcw,
RefreshCcwDot,
Repeat2,
Save,
Slash,
Spline,
SquareDashedBottomCode,
SquareDot,
SquareRoundCorner,
SquareSplitHorizontal,
SquareSquare,
SquaresUnite,
Sun,
SunDim,
TextSelect,
Trash,
Undo,
Workflow,
} from "lucide-react";
import { ReactNode, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { toast } from "sonner";
import tailwindColors from "tailwindcss/colors";
import KeyTooltip from "./key-tooltip";
const Content = ContextMenuContent;
const Item = ContextMenuItem;
const Sub = ContextMenuSub;
const SubTrigger = ContextMenuSubTrigger;
const SubContent = ContextMenuSubContent;
// const Separator = ContextMenuSeparator;
/**
* 右键菜单
* @returns
*/
export default function MyContextMenuContent() {
const [p] = useAtom(activeProjectAtom);
const [contextMenuTooltipWords] = useAtom(contextMenuTooltipWordsAtom);
const { t } = useTranslation("contextMenu");
if (!p) return <>;
const isSelectedTreeRoots = () => {
const selectedEntities = p.stageManager.getSelectedEntities();
if (selectedEntities.length === 0) return false;
return selectedEntities.every((entity) => {
return entity instanceof ConnectableEntity && p.graphMethods.isTree(entity);
});
};
// 简化判断，只要选中了两个及以上的节点就显示按钮
const hasMultipleSelectedEntities = () => {
const selectedEntities = p.stageManager.getSelectedEntities();
return selectedEntities.length >= 2 && selectedEntities.every((entity) => entity instanceof ConnectableEntity);
};
return (
{contextMenuTooltipWords || "暂无提示"}
{/* 存在选中实体 */} {p.stageManager.getSelectedStageObjects().length > 0 && p.stageManager.getSelectedStageObjects().some((it) => "color" in it) && ( <> {/* 更改更简单的颜色 */} p.stageObjectColorManager.setSelectedStageObjectColor(color)}
/>
))}
- p.stageObjectColorManager.setSelectedStageObjectColor(new Color(11, 45, 14, 0))}>
改为强制特殊透明色
- {
ColorWindow.open();
}}
>
打开调色板
- {
ColorPaletteWindow.open();
}}
>
打开舞台颜色分布表
)}
{/* 存在两个及以上选中实体 */}
{p.stageManager.getSelectedEntities().length >= 2 && (
<>
- p.stageManager.packEntityToSectionBySelected()}>
- {
const selectedNodes = p.stageManager
.getSelectedEntities()
.filter((node) => node instanceof ConnectableEntity);
if (selectedNodes.length <= 1) {
toast.error("至少选择两个可连接节点");
return;
}
const edge = MultiTargetUndirectedEdge.createFromSomeEntity(p, selectedNodes);
p.stageManager.add(edge);
}}
>
- {
const selectedNodes = p.stageManager
.getSelectedEntities()
.filter((node) => node instanceof ConnectableEntity);
if (selectedNodes.length <= 1) {
toast.error("至少选择两个可连接节点");
return;
}
const edge = MultiTargetUndirectedEdge.createFromSomeEntity(p, selectedNodes);
edge.renderType = "convex";
p.stageManager.add(edge);
}}
>
)}
{/* 没有选中实体，提示用户可以创建实体 */}
{p.stageManager.getSelectedStageObjects().length === 0 && (
<>
-
p.controllerUtils.addTextNodeByLocation(p.renderer.transformView2World(MouseLocation.vector()), true)
}
>
- p.controllerUtils.createConnectPoint(p.renderer.transformView2World(MouseLocation.vector()))}
>
)}
{/* 存在选中 TextNode */}
{p.stageManager.getSelectedEntities().filter((it) => it instanceof TextNode).length > 0 && (
<>
- {
const selectedTextNodes = p.stageManager.getSelectedEntities().filter((it) => it instanceof TextNode);
for (const textNode of selectedTextNodes) {
textNode.increaseFontSize();
}
p.historyManager.recordStep();
}}
>
- {
const selectedTextNodes = p.stageManager.getSelectedEntities().filter((it) => it instanceof TextNode);
for (const textNode of selectedTextNodes) {
textNode.decreaseFontSize();
}
p.historyManager.recordStep();
}}
>
- TextNodeSmartTools.ttt(p)}>
- TextNodeSmartTools.rua(p)}>
- TextNodeSmartTools.kei(p)}>
- TextNodeSmartTools.exchangeTextAndDetails(p)}>
- TextNodeSmartTools.removeFirstCharFromSelectedTextNodes(p)}>
- TextNodeSmartTools.removeLastCharFromSelectedTextNodes(p)}>
- TextNodeSmartTools.okk(p)}>
-
p.stageManager
.getSelectedEntities()
.filter((it) => it instanceof TextNode)
.map((it) => p.sectionPackManager.targetTextNodeToSection(it, false, true))
}
>
- ConnectNodeSmartTools.insertNodeToTree(p)}>
- ConnectNodeSmartTools.removeNodeFromTree(p)}>
- ConnectNodeSmartTools.connectDown(p)}>
- ConnectNodeSmartTools.connectRight(p)}>
- ConnectNodeSmartTools.connectAll(p)}>
- ColorSmartTools.increaseBrightness(p)}>
- ColorSmartTools.decreaseBrightness(p)}>
- ColorSmartTools.changeColorHueUp(p)}>
- ColorSmartTools.changeColorHueDown(p)}>
- ColorSmartTools.changeColorHueMajorUp(p)}>
- ColorSmartTools.changeColorHueMajorDown(p)}>
- TextNodeSmartTools.changeTextNodeToReferenceBlock(p)}>
- openBrowserOrFile(p)}>
)}
{/* 存在选中 Section */}
{p.stageManager.getSelectedEntities().filter((it) => it instanceof Section).length > 0 && (
<>
- p.stageManager.sectionSwitchCollapse()}>
- {
const selectedSections = p.stageManager.getSelectedEntities().filter((it) => it instanceof Section);
for (const section of selectedSections) {
section.locked = !section.locked;
p.sectionRenderer.render(section);
}
// 记录历史步骤
p.historyManager.recordStep();
}}
>
)}
{/* 存在选中 引用块 */}
{p.stageManager.getSelectedEntities().filter((it) => it instanceof ReferenceBlockNode).length > 0 && (
<>
- {
p.stageManager
.getSelectedEntities()
.filter((it) => it instanceof ReferenceBlockNode)
.filter((it) => it.isSelected)
.forEach((it) => {
it.refresh();
});
}}
>
- {
p.stageManager
.getSelectedEntities()
.filter((it) => it instanceof ReferenceBlockNode)
.filter((it) => it.isSelected)
.forEach((it) => {
it.goToSource();
});
}}
>
)}
{/* 存在选中的 Edge */}
{p.stageManager.getSelectedAssociations().filter((it) => it instanceof Edge).length > 0 && (
<>
- {
p.stageManager.switchEdgeToUndirectedEdge();
p.historyManager.recordStep();
}}
>
- {
p.stageManager.setSelectedEdgeLineType("solid");
p.historyManager.recordStep();
}}
>
- {
p.stageManager.setSelectedEdgeLineType("dashed");
p.historyManager.recordStep();
}}
>
- {
p.stageManager.setSelectedEdgeLineType("double");
p.historyManager.recordStep();
}}
>
-
)}
{/* 存在选中的 MTUEdge */}
{p.stageManager.getSelectedAssociations().filter((it) => it instanceof MultiTargetUndirectedEdge).length > 0 && (
<>
- {
const selectedMTUEdges = p.stageManager
.getSelectedAssociations()
.filter((edge) => edge instanceof MultiTargetUndirectedEdge);
for (const multi_target_undirected_edge of selectedMTUEdges) {
multi_target_undirected_edge.arrow = "outer";
}
p.historyManager.recordStep();
}}
>
- {
const selectedMTUEdges = p.stageManager
.getSelectedAssociations()
.filter((edge) => edge instanceof MultiTargetUndirectedEdge);
for (const multi_target_undirected_edge of selectedMTUEdges) {
multi_target_undirected_edge.arrow = "inner";
}
p.historyManager.recordStep();
}}
>
- {
const selectedMTUEdges = p.stageManager
.getSelectedAssociations()
.filter((edge) => edge instanceof MultiTargetUndirectedEdge);
for (const multi_target_undirected_edge of selectedMTUEdges) {
multi_target_undirected_edge.arrow = "none";
}
p.historyManager.recordStep();
}}
>
- {
const selectedMTUEdge = p.stageManager
.getSelectedAssociations()
.filter((edge) => edge instanceof MultiTargetUndirectedEdge);
for (const multi_target_undirected_edge of selectedMTUEdge) {
if (multi_target_undirected_edge.renderType === "line") {
multi_target_undirected_edge.renderType = "convex";
} else if (multi_target_undirected_edge.renderType === "convex") {
multi_target_undirected_edge.renderType = "circle";
} else if (multi_target_undirected_edge.renderType === "circle") {
multi_target_undirected_edge.renderType = "line";
}
}
p.historyManager.recordStep();
}}
>
- {
// 重置所有选中无向边的端点位置到中心
const selectedMTUEdges = p.stageManager
.getSelectedAssociations()
.filter((edge) => edge instanceof MultiTargetUndirectedEdge);
for (const multi_target_undirected_edge of selectedMTUEdges) {
// 重置中心位置到中心
multi_target_undirected_edge.centerRate = Vector.same(0.5);
// 重置每个节点的连接点位置到中心
multi_target_undirected_edge.rectRates = multi_target_undirected_edge.associationList.map(() =>
Vector.same(0.5),
);
}
p.historyManager.recordStep();
}}
>
- {
p.stageManager.switchUndirectedEdgeToEdge();
p.historyManager.recordStep();
}}
>
)}
{/* 涂鸦模式增加修改画笔颜色 */}
{Settings.mouseLeftMode === "draw" && (
- (Settings.autoFillPenStrokeColor = Color.Transparent.toArray())}>
-
{Object.values(tailwindColors)
.filter((it) => typeof it !== "string")
.flatMap((it) => Object.values(it).map(Color.fromCss))
.map((color, index) => (
(Settings.autoFillPenStrokeColor = color.toArray())}
/>
))}
)}
{/* 存在选中 ImageNode */}
{p.stageManager.getSelectedEntities().filter((it) => it instanceof ImageNode).length > 0 && (
<>
- {
// 获取所有选中的 ImageNode
const selectedImageNodes = p.stageManager
.getSelectedEntities()
.filter((it) => it instanceof ImageNode) as ImageNode[];
if (selectedImageNodes.length === 0) {
toast.error("请选中图片节点");
return;
}
// 复制第一张图片到剪贴板（如果有多张图片，只复制第一张）
const imageNode = selectedImageNodes[0];
const blob = p.attachments.get(imageNode.attachmentId);
if (blob) {
try {
const arrayBuffer = await blob.arrayBuffer();
const tauriImage = await TauriImage.fromBytes(new Uint8Array(arrayBuffer));
await writeImage(tauriImage);
if (selectedImageNodes.length === 1) {
toast.success("已将选中的图片复制到系统剪贴板");
} else {
toast.success(`已将第1张图片复制到系统剪贴板（共${selectedImageNodes.length}张）`);
}
} catch (error) {
console.error("复制图片到剪贴板失败:", error);
toast.error("复制图片到剪贴板失败");
}
} else {
toast.error("无法获取图片数据");
}
}}
>
- {
// 获取所有选中的 ImageNode
const selectedImageNodes = p.stageManager
.getSelectedEntities()
.filter((it) => it instanceof ImageNode) as ImageNode[];
if (selectedImageNodes.length === 0) {
toast.error("请选中图片节点");
return;
}
// 对每张图片进行红蓝通道对调
for (const imageNode of selectedImageNodes) {
imageNode.swapRedBlueChannels();
}
// 记录历史步骤
p.historyManager.recordStep();
// 显示提示信息
if (selectedImageNodes.length === 1) {
toast.success("已对调图片的红蓝通道");
} else {
toast.success(`已对调 ${selectedImageNodes.length} 张图片的红蓝通道`);
}
}}
>
- {
// 获取所有选中的 ImageNode
const selectedImageNodes = p.stageManager
.getSelectedEntities()
.filter((it) => it instanceof ImageNode) as ImageNode[];
if (selectedImageNodes.length === 0) {
toast.error("请选中图片节点");
return;
}
// 将选中的图片转化为背景图片
for (const imageNode of selectedImageNodes) {
imageNode.isBackground = true;
}
// 记录历史步骤
p.historyManager.recordStep();
// 显示提示信息
if (selectedImageNodes.length === 1) {
toast.success("已将图片转化为背景图片");
} else {
toast.success(`已将 ${selectedImageNodes.length} 张图片转化为背景图片`);
}
}}
>
- {
// 获取所有选中的 ImageNode
const selectedImageNodes = p.stageManager
.getSelectedEntities()
.filter((it) => it instanceof ImageNode) as ImageNode[];
if (selectedImageNodes.length === 0) {
toast.error("请选中图片节点");
return;
}
// 取消背景化
for (const imageNode of selectedImageNodes) {
imageNode.isBackground = false;
}
// 记录历史步骤
p.historyManager.recordStep();
// 显示提示信息
if (selectedImageNodes.length === 1) {
toast.success("已取消图片的背景化");
} else {
toast.success(`已取消 ${selectedImageNodes.length} 张图片的背景化`);
}
}}
>
- {
// 检查是否是草稿模式
if (p.isDraft) {
toast.error("请先保存项目后再导出图片");
return;
}
// 获取所有选中的 ImageNode
const selectedImageNodes = p.stageManager
.getSelectedEntities()
.filter((it) => it instanceof ImageNode) as ImageNode[];
if (selectedImageNodes.length === 0) {
toast.error("请选中图片节点");
return;
}
// 根据图片数量决定提示信息
const isBatch = selectedImageNodes.length > 1;
const promptMessage = isBatch
? `请输入文件名（不含扩展名，将为 ${selectedImageNodes.length} 张图片添加数字后缀）`
: `请输入文件名（不含扩展名，将自动添加扩展名）`;
// 弹出输入框 - 只弹出一次
const fileName = await Dialog.input("另存图片", promptMessage, {
placeholder: "image",
});
if (!fileName) {
return; // 用户取消
}
// 验证文件名是否合法
const invalidChars = /[/\\:*?"<>|]/;
if (invalidChars.test(fileName)) {
toast.error('文件名包含非法字符：/ \\ : * ? " < > |');
return;
}
// 调用工具函数导出图片
const { successCount, failedCount } = await exportImagesToProjectDirectory(
selectedImageNodes,
p.uri.fsPath,
p.attachments,
fileName,
);
// 显示结果提示
if (successCount > 0 && failedCount === 0) {
toast.success(`成功保存 ${successCount} 张图片`);
} else if (successCount > 0 && failedCount > 0) {
toast.warning(`成功保存 ${successCount} 张图片，${failedCount} 张失败`);
} else {
toast.error(`保存失败，请检查文件名或文件权限`);
}
}}
>
)}
);
}
function ContextMenuTooltip({ keyId, children = <> }: { keyId: string; children: ReactNode }) {
const [keySeq, setKeySeq] = useState[number][]>();
const [activeProject] = useAtom(activeProjectAtom);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [_, setContextMenuTooltipWords] = useAtom(contextMenuTooltipWordsAtom);
const { t } = useTranslation("keyBinds");
useEffect(() => {
activeProject?.keyBinds.get(keyId)?.then((key) => {
if (key) {
const keyStr = typeof key === "string" ? key : key.key;
const parsed = parseEmacsKey(keyStr);
if (parsed.length > 0) {
setKeySeq(parsed);
} else {
setKeySeq(undefined);
}
} else {
setKeySeq(undefined);
}
});
}, [keyId, activeProject]);
const onMouseEnter = () => {
const title = t(`${keyId}.title`);
let keyTips = "";
if (keySeq) {
keyTips = keySeq
.map((seq) => {
let res = "";
if (seq.control) {
res += "Ctrl+";
}
if (seq.meta) {
res += "Meta+";
}
if (seq.shift) {
res += "Shift+";
}
if (seq.alt) {
res += "Alt+";
}
return res + seq.key.toUpperCase();
})
.join(",");
} else {
keyTips = "未绑定快捷键";
}
setContextMenuTooltipWords(`${title} [${keyTips}]`);
};
const onMouseLeave = () => {
setContextMenuTooltipWords("");
};
return (
{children}
);
}
const ColorLine: React.FC = () => {
const [currentColors, setCurrentColors] = useState([]);
const [project] = useAtom(activeProjectAtom);
useEffect(() => {
ColorManager.getUserEntityFillColors().then((colors) => {
setCurrentColors(colors);
});
}, []);
const handleChangeColor = (color: Color) => {
project?.stageObjectColorManager.setSelectedStageObjectColor(color);
};
return (
{currentColors.map((color) => {
return (
;
}
>;
export const commentPlugin = toTPlatePlugin(BaseCommentPlugin, {
handlers: {
onClick: ({ api, event, setOption, type }) => {
let leaf = event.target as HTMLElement;
let isSet = false;
const unsetActiveSuggestion = () => {
setOption("activeId", null);
isSet = true;
};
if (!isSlateString(leaf)) unsetActiveSuggestion();
while (leaf.parentElement) {
if (leaf.classList.contains(`slate-${type}`)) {
const commentsEntry = api.comment!.node();
if (!commentsEntry) {
unsetActiveSuggestion();
break;
}
const id = api.comment!.nodeId(commentsEntry[0]);
setOption("activeId", id ?? null);
isSet = true;
break;
}
leaf = leaf.parentElement;
}
if (!isSet) unsetActiveSuggestion();
},
},
options: {
activeId: null,
commentingBlock: null,
hoverId: null,
uniquePathMap: new Map(),
},
})
.extendTransforms(
({
editor,
setOption,
tf: {
comment: { setDraft },
},
}) => ({
setDraft: () => {
if (editor.api.isCollapsed()) {
editor.tf.select(editor.api.block()![1]);
}
setDraft();
editor.tf.collapse();
setOption("activeId", getDraftCommentKey());
setOption("commentingBlock", editor.selection!.focus.path.slice(0, 1));
},
}),
)
.configure({
node: { component: CommentLeaf },
shortcuts: {
setDraft: { keys: "mod+shift+m" },
},
});
export const CommentKit = [commentPlugin];
================================================
FILE: app/src/components/editor/plugins/date-base-kit.tsx
================================================
import { BaseDatePlugin } from "@platejs/date";
import { DateElementStatic } from "@/components/ui/date-node-static";
export const BaseDateKit = [BaseDatePlugin.withComponent(DateElementStatic)];
================================================
FILE: app/src/components/editor/plugins/discussion-kit.tsx
================================================
"use client";
import type { TComment } from "@/components/ui/comment";
import { createPlatePlugin } from "platejs/react";
import { BlockDiscussion } from "@/components/ui/block-discussion";
export interface TDiscussion {
id: string;
comments: TComment[];
createdAt: Date;
isResolved: boolean;
userId: string;
documentContent?: string;
}
const discussionsData: TDiscussion[] = [
{
id: "discussion1",
comments: [
{
id: "comment1",
contentRich: [
{
children: [
{
text: "Comments are a great way to provide feedback and discuss changes.",
},
],
type: "p",
},
],
createdAt: new Date(Date.now() - 600_000),
discussionId: "discussion1",
isEdited: false,
userId: "charlie",
},
{
id: "comment2",
contentRich: [
{
children: [
{
text: "Agreed! The link to the docs makes it easy to learn more.",
},
],
type: "p",
},
],
createdAt: new Date(Date.now() - 500_000),
discussionId: "discussion1",
isEdited: false,
userId: "bob",
},
],
createdAt: new Date(),
documentContent: "comments",
isResolved: false,
userId: "charlie",
},
{
id: "discussion2",
comments: [
{
id: "comment1",
contentRich: [
{
children: [
{
text: "Nice demonstration of overlapping annotations with both comments and suggestions!",
},
],
type: "p",
},
],
createdAt: new Date(Date.now() - 300_000),
discussionId: "discussion2",
isEdited: false,
userId: "bob",
},
{
id: "comment2",
contentRich: [
{
children: [
{
text: "This helps users understand how powerful the editor can be.",
},
],
type: "p",
},
],
createdAt: new Date(Date.now() - 200_000),
discussionId: "discussion2",
isEdited: false,
userId: "charlie",
},
],
createdAt: new Date(),
documentContent: "overlapping",
isResolved: false,
userId: "bob",
},
];
const avatarUrl = (seed: string) => `https://api.dicebear.com/9.x/glass/svg?seed=${seed}`;
const usersData: Record = {
alice: {
id: "alice",
avatarUrl: avatarUrl("alice6"),
name: "Alice",
},
bob: {
id: "bob",
avatarUrl: avatarUrl("bob4"),
name: "Bob",
},
charlie: {
id: "charlie",
avatarUrl: avatarUrl("charlie2"),
name: "Charlie",
},
};
// This plugin is purely UI. It's only used to store the discussions and users data
export const discussionPlugin = createPlatePlugin({
key: "discussion",
options: {
currentUserId: "alice",
discussions: discussionsData,
users: usersData,
},
})
.configure({
render: { aboveNodes: BlockDiscussion },
})
.extendSelectors(({ getOption }) => ({
currentUser: () => getOption("users")[getOption("currentUserId")],
user: (id: string) => getOption("users")[id],
}));
export const DiscussionKit = [discussionPlugin];
================================================
FILE: app/src/components/editor/plugins/fixed-toolbar-kit.tsx
================================================
"use client";
import { createPlatePlugin } from "platejs/react";
import { FixedToolbar } from "@/components/ui/fixed-toolbar";
import { FixedToolbarButtons } from "@/components/ui/fixed-toolbar-buttons";
export const FixedToolbarKit = [
createPlatePlugin({
key: "fixed-toolbar",
render: {
beforeEditable: () => (
),
},
}),
];
================================================
FILE: app/src/components/editor/plugins/floating-toolbar-kit.tsx
================================================
"use client";
import { createPlatePlugin } from "platejs/react";
import { FloatingToolbar } from "@/components/ui/floating-toolbar";
import { FloatingToolbarButtons } from "@/components/ui/floating-toolbar-buttons";
export const FloatingToolbarKit = [
createPlatePlugin({
key: "floating-toolbar",
render: {
afterEditable: () => (
),
},
}),
];
================================================
FILE: app/src/components/editor/plugins/font-base-kit.tsx
================================================
import type { SlatePluginConfig } from "platejs";
import {
BaseFontBackgroundColorPlugin,
BaseFontColorPlugin,
BaseFontFamilyPlugin,
BaseFontSizePlugin,
} from "@platejs/basic-styles";
import { KEYS } from "platejs";
const options = {
inject: { targetPlugins: [KEYS.p] },
} satisfies SlatePluginConfig;
export const BaseFontKit = [
BaseFontColorPlugin.configure(options),
BaseFontBackgroundColorPlugin.configure(options),
BaseFontSizePlugin.configure(options),
BaseFontFamilyPlugin.configure(options),
];
================================================
FILE: app/src/components/editor/plugins/font-kit.tsx
================================================
"use client";
import type { PlatePluginConfig } from "platejs/react";
import {
FontBackgroundColorPlugin,
FontColorPlugin,
FontFamilyPlugin,
FontSizePlugin,
} from "@platejs/basic-styles/react";
import { KEYS } from "platejs";
const options = {
inject: { targetPlugins: [KEYS.p] },
} satisfies PlatePluginConfig;
export const FontKit = [
FontColorPlugin.configure({
inject: {
...options.inject,
nodeProps: {
defaultNodeValue: "black",
},
},
}),
FontBackgroundColorPlugin.configure(options),
FontSizePlugin.configure(options),
FontFamilyPlugin.configure(options),
];
================================================
FILE: app/src/components/editor/plugins/indent-base-kit.tsx
================================================
import { BaseIndentPlugin } from "@platejs/indent";
import { KEYS } from "platejs";
export const BaseIndentKit = [
BaseIndentPlugin.configure({
inject: {
targetPlugins: [...KEYS.heading, KEYS.p, KEYS.blockquote, KEYS.codeBlock, KEYS.toggle],
},
options: {
offset: 24,
},
}),
];
================================================
FILE: app/src/components/editor/plugins/indent-kit.tsx
================================================
"use client";
import { IndentPlugin } from "@platejs/indent/react";
import { KEYS } from "platejs";
export const IndentKit = [
IndentPlugin.configure({
inject: {
targetPlugins: [...KEYS.heading, KEYS.p, KEYS.blockquote, KEYS.codeBlock, KEYS.toggle, KEYS.img],
},
options: {
offset: 24,
},
}),
];
================================================
FILE: app/src/components/editor/plugins/line-height-base-kit.tsx
================================================
import { BaseLineHeightPlugin } from "@platejs/basic-styles";
import { KEYS } from "platejs";
export const BaseLineHeightKit = [
BaseLineHeightPlugin.configure({
inject: {
nodeProps: {
defaultNodeValue: 1.5,
validNodeValues: [1, 1.2, 1.5, 2, 3],
},
targetPlugins: [...KEYS.heading, KEYS.p],
},
}),
];
================================================
FILE: app/src/components/editor/plugins/link-base-kit.tsx
================================================
import { BaseLinkPlugin } from "@platejs/link";
import { LinkElementStatic } from "@/components/ui/link-node-static";
export const BaseLinkKit = [BaseLinkPlugin.withComponent(LinkElementStatic)];
================================================
FILE: app/src/components/editor/plugins/link-kit.tsx
================================================
"use client";
import { LinkPlugin } from "@platejs/link/react";
import { LinkElement } from "@/components/ui/link-node";
import { LinkFloatingToolbar } from "@/components/ui/link-toolbar";
export const LinkKit = [
LinkPlugin.configure({
render: {
node: LinkElement,
afterEditable: () => ;
}
>;
export const suggestionPlugin = toTPlatePlugin(BaseSuggestionPlugin, ({ editor }) => ({
options: {
activeId: null,
currentUserId: editor.getOption(discussionPlugin, "currentUserId"),
hoverId: null,
uniquePathMap: new Map(),
},
})).configure({
handlers: {
// unset active suggestion when clicking outside of suggestion
onClick: ({ api, event, setOption, type }) => {
let leaf = event.target as HTMLElement;
let isSet = false;
const unsetActiveSuggestion = () => {
setOption("activeId", null);
isSet = true;
};
if (!isSlateString(leaf)) unsetActiveSuggestion();
while (leaf.parentElement && !isSlateElement(leaf.parentElement) && !isSlateEditor(leaf.parentElement)) {
if (leaf.classList.contains(`slate-${type}`)) {
const suggestionEntry = api.suggestion!.node({ isText: true });
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 as any,
node: SuggestionLeaf,
belowRootNodes: ({ api, element }) => {
if (!api.suggestion!.isBlockSuggestion(element)) {
return null;
}
return void> = {
[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.toc]: (editor) => insertToc(editor, { select: true }),
[KEYS.video]: (editor) => insertVideoPlaceholder(editor, { select: true }),
};
const insertInlineMap: Record void> = {
[KEYS.date]: (editor) => insertDate(editor, { select: true }),
[KEYS.inlineEquation]: (editor) => insertInlineEquation(editor, "", { select: true }),
[KEYS.link]: (editor) => triggerFloatingLink(editor, { focused: true }),
};
export const insertBlock = (editor: PlateEditor, type: string) => {
editor.tf.withoutNormalizing(() => {
const block = editor.api.block();
if (!block) return;
if (type in insertBlockMap) {
insertBlockMap[type](editor, type);
} else {
editor.tf.insertNodes(editor.api.create.block({ type }), {
at: PathApi.next(block[1]),
select: true,
});
}
if (getBlockType(block[0]) !== type) {
editor.getApi(SuggestionPlugin).suggestion.withoutSuggestions(() => {
editor.tf.removeNodes({ previousEmptyBlock: true });
});
}
});
};
export const insertInlineElement = (editor: PlateEditor, type: string) => {
if (insertInlineMap[type]) {
insertInlineMap[type](editor, type);
}
};
const setList = (editor: PlateEditor, type: string, entry: NodeEntry) => {
editor.tf.setNodes(
editor.api.create.block({
indent: 1,
listStyleType: type,
}),
{
at: entry[1],
},
);
};
const setBlockMap: Record) => void> = {
[KEYS.listTodo]: setList,
[KEYS.ol]: setList,
[KEYS.ul]: setList,
[ACTION_THREE_COLUMNS]: (editor) => toggleColumnGroup(editor, { columns: 3 }),
[KEYS.codeBlock]: (editor) => toggleCodeBlock(editor),
};
export const setBlockType = (editor: PlateEditor, type: string, { at }: { at?: Path } = {}) => {
editor.tf.withoutNormalizing(() => {
const setEntry = (entry: NodeEntry) => {
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;
}
}
const entries = editor.api.blocks({ mode: "lowest" });
entries.forEach((entry) => setEntry(entry));
});
};
export const getBlockType = (block: TElement) => {
if (block[KEYS.listType]) {
if (block[KEYS.listType] === KEYS.ol) {
return KEYS.ol;
} else if (block[KEYS.listType] === KEYS.listTodo) {
return KEYS.listTodo;
} else {
return KEYS.ul;
}
}
return block.type;
};
================================================
FILE: app/src/components/key-tooltip.tsx
================================================
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { activeProjectAtom } from "@/state";
import { parseEmacsKey } from "@/utils/emacs";
import { useAtom } from "jotai";
import { ReactNode, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { RenderKey } from "./ui/key-bind";
export default function KeyTooltip({ keyId, children = <> }: { keyId: string; children: ReactNode }) {
const [keySeq, setKeySeq] = useState[number][]>();
const [activeProject] = useAtom(activeProjectAtom);
const { t } = useTranslation("keyBinds");
useEffect(() => {
activeProject?.keyBinds.get(keyId)?.then((key) => {
if (key) {
const keyStr = typeof key === "string" ? key : key.key;
const parsed = parseEmacsKey(keyStr);
if (parsed.length > 0) {
setKeySeq(parsed);
} else {
setKeySeq(undefined);
}
} else {
setKeySeq(undefined);
}
});
}, [keyId, activeProject]);
return (
{children}
{/* 给下面的组件加属性，sideOffset={12}，可以缓解右键菜单按钮比较密集的tooltip遮挡的问题 */}
{t(`${keyId}.title`)}
);
}
================================================
FILE: app/src/components/render-sub-windows.tsx
================================================
import { SimpleCard } from "@/components/ui/card";
import { SubWindow } from "@/core/service/SubWindow";
import { cn } from "@/utils/cn";
import { Vector } from "@graphif/data-structures";
import { Rectangle } from "@graphif/shapes";
import { Transition } from "@headlessui/react";
import { X } from "lucide-react";
/**
* 这个组件中管理了所有的 子窗口
* @returns
*/
export default function RenderSubWindows() {
const subWindows = SubWindow.use();
const onClickInner = (win: SubWindow.Window) => {
if (win.closeWhenClickInside) {
SubWindow.close(win.id);
}
};
return (
{
handleChangeColor(color);
}}
/>
);
})}
);
};
================================================
FILE: app/src/components/editor/editor-base-kit.tsx
================================================
import { BaseAlignKit } from "./plugins/align-base-kit";
import { BaseBasicBlocksKit } from "./plugins/basic-blocks-base-kit";
import { BaseBasicMarksKit } from "./plugins/basic-marks-base-kit";
import { BaseCalloutKit } from "./plugins/callout-base-kit";
import { BaseCodeBlockKit } from "./plugins/code-block-base-kit";
import { BaseColumnKit } from "./plugins/column-base-kit";
import { BaseCommentKit } from "./plugins/comment-base-kit";
import { BaseDateKit } from "./plugins/date-base-kit";
import { BaseFontKit } from "./plugins/font-base-kit";
import { BaseLineHeightKit } from "./plugins/line-height-base-kit";
import { BaseLinkKit } from "./plugins/link-base-kit";
import { BaseListKit } from "./plugins/list-base-kit";
import { MarkdownKit } from "./plugins/markdown-kit";
import { BaseMathKit } from "./plugins/math-base-kit";
import { BaseMediaKit } from "./plugins/media-base-kit";
import { BaseMentionKit } from "./plugins/mention-base-kit";
import { BaseSuggestionKit } from "./plugins/suggestion-base-kit";
import { BaseTableKit } from "./plugins/table-base-kit";
import { BaseTocKit } from "./plugins/toc-base-kit";
import { BaseToggleKit } from "./plugins/toggle-base-kit";
export const BaseEditorKit = [
...BaseBasicBlocksKit,
...BaseCodeBlockKit,
...BaseTableKit,
...BaseToggleKit,
...BaseTocKit,
...BaseMediaKit,
...BaseCalloutKit,
...BaseColumnKit,
...BaseMathKit,
...BaseDateKit,
...BaseLinkKit,
...BaseMentionKit,
...BaseBasicMarksKit,
...BaseFontKit,
...BaseListKit,
...BaseAlignKit,
...BaseLineHeightKit,
...BaseCommentKit,
...BaseSuggestionKit,
...MarkdownKit,
];
================================================
FILE: app/src/components/editor/plugins/align-base-kit.tsx
================================================
import { BaseTextAlignPlugin } from "@platejs/basic-styles";
import { KEYS } from "platejs";
export const BaseAlignKit = [
BaseTextAlignPlugin.configure({
inject: {
nodeProps: {
defaultNodeValue: "start",
nodeKey: "align",
styleKey: "textAlign",
validNodeValues: ["start", "left", "center", "right", "end", "justify"],
},
targetPlugins: [...KEYS.heading, KEYS.p, KEYS.img, KEYS.mediaEmbed],
},
}),
];
================================================
FILE: app/src/components/editor/plugins/basic-blocks-base-kit.tsx
================================================
import {
BaseBlockquotePlugin,
BaseH1Plugin,
BaseH2Plugin,
BaseH3Plugin,
BaseH4Plugin,
BaseH5Plugin,
BaseH6Plugin,
BaseHorizontalRulePlugin,
} from "@platejs/basic-nodes";
import { BaseParagraphPlugin } from "platejs";
import { BlockquoteElementStatic } from "@/components/ui/blockquote-node-static";
import {
H1ElementStatic,
H2ElementStatic,
H3ElementStatic,
H4ElementStatic,
H5ElementStatic,
H6ElementStatic,
} from "@/components/ui/heading-node-static";
import { HrElementStatic } from "@/components/ui/hr-node-static";
import { ParagraphElementStatic } from "@/components/ui/paragraph-node-static";
export const BaseBasicBlocksKit = [
BaseParagraphPlugin.withComponent(ParagraphElementStatic),
BaseH1Plugin.withComponent(H1ElementStatic),
BaseH2Plugin.withComponent(H2ElementStatic),
BaseH3Plugin.withComponent(H3ElementStatic),
BaseH4Plugin.withComponent(H4ElementStatic),
BaseH5Plugin.withComponent(H5ElementStatic),
BaseH6Plugin.withComponent(H6ElementStatic),
BaseBlockquotePlugin.withComponent(BlockquoteElementStatic),
BaseHorizontalRulePlugin.withComponent(HrElementStatic),
];
================================================
FILE: app/src/components/editor/plugins/basic-blocks-kit.tsx
================================================
"use client";
import {
BlockquotePlugin,
H1Plugin,
H2Plugin,
H3Plugin,
H4Plugin,
H5Plugin,
H6Plugin,
HorizontalRulePlugin,
} from "@platejs/basic-nodes/react";
import { ParagraphPlugin } from "platejs/react";
import { BlockquoteElement } from "@/components/ui/blockquote-node";
import { H1Element, H2Element, H3Element, H4Element, H5Element, H6Element } from "@/components/ui/heading-node";
import { HrElement } from "@/components/ui/hr-node";
import { ParagraphElement } from "@/components/ui/paragraph-node";
export const BasicBlocksKit = [
ParagraphPlugin.withComponent(ParagraphElement),
H1Plugin.configure({
node: {
component: H1Element,
},
rules: {
break: { empty: "reset" },
},
shortcuts: { toggle: { keys: "mod+alt+1" } },
}),
H2Plugin.configure({
node: {
component: H2Element,
},
rules: {
break: { empty: "reset" },
},
shortcuts: { toggle: { keys: "mod+alt+2" } },
}),
H3Plugin.configure({
node: {
component: H3Element,
},
rules: {
break: { empty: "reset" },
},
shortcuts: { toggle: { keys: "mod+alt+3" } },
}),
H4Plugin.configure({
node: {
component: H4Element,
},
rules: {
break: { empty: "reset" },
},
shortcuts: { toggle: { keys: "mod+alt+4" } },
}),
H5Plugin.configure({
node: {
component: H5Element,
},
rules: {
break: { empty: "reset" },
},
shortcuts: { toggle: { keys: "mod+alt+5" } },
}),
H6Plugin.configure({
node: {
component: H6Element,
},
rules: {
break: { empty: "reset" },
},
shortcuts: { toggle: { keys: "mod+alt+6" } },
}),
BlockquotePlugin.configure({
node: { component: BlockquoteElement },
shortcuts: { toggle: { keys: "mod+shift+period" } },
}),
HorizontalRulePlugin.withComponent(HrElement),
];
================================================
FILE: app/src/components/editor/plugins/basic-marks-base-kit.tsx
================================================
import {
BaseBoldPlugin,
BaseCodePlugin,
BaseHighlightPlugin,
BaseItalicPlugin,
BaseKbdPlugin,
BaseStrikethroughPlugin,
BaseSubscriptPlugin,
BaseSuperscriptPlugin,
BaseUnderlinePlugin,
} from "@platejs/basic-nodes";
import { CodeLeafStatic } from "@/components/ui/code-node-static";
import { HighlightLeafStatic } from "@/components/ui/highlight-node-static";
import { KbdLeafStatic } from "@/components/ui/kbd-node-static";
export const BaseBasicMarksKit = [
BaseBoldPlugin,
BaseItalicPlugin,
BaseUnderlinePlugin,
BaseCodePlugin.withComponent(CodeLeafStatic),
BaseStrikethroughPlugin,
BaseSubscriptPlugin,
BaseSuperscriptPlugin,
BaseHighlightPlugin.withComponent(HighlightLeafStatic),
BaseKbdPlugin.withComponent(KbdLeafStatic),
];
================================================
FILE: app/src/components/editor/plugins/basic-marks-kit.tsx
================================================
"use client";
import {
BoldPlugin,
CodePlugin,
HighlightPlugin,
ItalicPlugin,
KbdPlugin,
StrikethroughPlugin,
SubscriptPlugin,
SuperscriptPlugin,
UnderlinePlugin,
} from "@platejs/basic-nodes/react";
import { CodeLeaf } from "@/components/ui/code-node";
import { HighlightLeaf } from "@/components/ui/highlight-node";
import { KbdLeaf } from "@/components/ui/kbd-node";
export const BasicMarksKit = [
BoldPlugin,
ItalicPlugin,
UnderlinePlugin,
CodePlugin.configure({
node: { component: CodeLeaf },
shortcuts: { toggle: { keys: "mod+e" } },
}),
StrikethroughPlugin.configure({
shortcuts: { toggle: { keys: "mod+shift+x" } },
}),
SubscriptPlugin.configure({
shortcuts: { toggle: { keys: "mod+comma" } },
}),
SuperscriptPlugin.configure({
shortcuts: { toggle: { keys: "mod+period" } },
}),
HighlightPlugin.configure({
node: { component: HighlightLeaf },
shortcuts: { toggle: { keys: "mod+shift+h" } },
}),
KbdPlugin.withComponent(KbdLeaf),
];
================================================
FILE: app/src/components/editor/plugins/callout-base-kit.tsx
================================================
import { BaseCalloutPlugin } from "@platejs/callout";
import { CalloutElementStatic } from "@/components/ui/callout-node-static";
export const BaseCalloutKit = [BaseCalloutPlugin.withComponent(CalloutElementStatic)];
================================================
FILE: app/src/components/editor/plugins/code-block-base-kit.tsx
================================================
import { BaseCodeBlockPlugin, BaseCodeLinePlugin, BaseCodeSyntaxPlugin } from "@platejs/code-block";
import { all, createLowlight } from "lowlight";
import {
CodeBlockElementStatic,
CodeLineElementStatic,
CodeSyntaxLeafStatic,
} from "@/components/ui/code-block-node-static";
const lowlight = createLowlight(all);
export const BaseCodeBlockKit = [
BaseCodeBlockPlugin.configure({
node: { component: CodeBlockElementStatic },
options: { lowlight },
}),
BaseCodeLinePlugin.withComponent(CodeLineElementStatic),
BaseCodeSyntaxPlugin.withComponent(CodeSyntaxLeafStatic),
];
================================================
FILE: app/src/components/editor/plugins/code-block-kit.tsx
================================================
"use client";
import { CodeBlockPlugin, CodeLinePlugin, CodeSyntaxPlugin } from "@platejs/code-block/react";
import { all, createLowlight } from "lowlight";
import { CodeBlockElement, CodeLineElement, CodeSyntaxLeaf } from "@/components/ui/code-block-node";
const lowlight = createLowlight(all);
export const CodeBlockKit = [
CodeBlockPlugin.configure({
node: { component: CodeBlockElement },
options: { lowlight },
shortcuts: { toggle: { keys: "mod+alt+8" } },
}),
CodeLinePlugin.withComponent(CodeLineElement),
CodeSyntaxPlugin.withComponent(CodeSyntaxLeaf),
];
================================================
FILE: app/src/components/editor/plugins/column-base-kit.tsx
================================================
import { BaseColumnItemPlugin, BaseColumnPlugin } from "@platejs/layout";
import { ColumnElementStatic, ColumnGroupElementStatic } from "@/components/ui/column-node-static";
export const BaseColumnKit = [
BaseColumnPlugin.withComponent(ColumnGroupElementStatic),
BaseColumnItemPlugin.withComponent(ColumnElementStatic),
];
================================================
FILE: app/src/components/editor/plugins/comment-base-kit.tsx
================================================
import { BaseCommentPlugin } from "@platejs/comment";
import { CommentLeafStatic } from "@/components/ui/comment-node-static";
export const BaseCommentKit = [BaseCommentPlugin.withComponent(CommentLeafStatic)];
================================================
FILE: app/src/components/editor/plugins/comment-kit.tsx
================================================
"use client";
import type { ExtendConfig, Path } from "platejs";
import { type BaseCommentConfig, BaseCommentPlugin, getDraftCommentKey } from "@platejs/comment";
import { isSlateString } from "platejs";
import { toTPlatePlugin } from "platejs/react";
import { CommentLeaf } from "@/components/ui/comment-node";
type CommentConfig = ExtendConfig<
BaseCommentConfig,
{
activeId: string | null;
commentingBlock: Path | null;
hoverId: string | null;
uniquePathMap: Map
{keySeq ? keySeq.map((data, index) =>
{subWindows.map((win: SubWindow.Window) => (
// transition 组件可以让关闭流程更平滑
onClickInner(win)}
onMouseDown={(e) => {
SubWindow.focus(win.id);
// 如果按到的元素的父元素都没有data-pg-drag-region属性，就不移动窗口
if (!(e.target as HTMLElement).closest("[data-pg-drag-region]")) {
return;
}
const start = new Vector(e.clientX, e.clientY);
const onMouseUp = () => {
window.removeEventListener("mouseup", onMouseUp);
window.removeEventListener("mousemove", onMouseMove);
};
const onMouseMove = (e: MouseEvent) => {
const delta = new Vector(e.clientX, e.clientY).subtract(start);
const newRect = win.rect.translate(delta);
SubWindow.update(win.id, { rect: newRect });
};
window.addEventListener("mouseup", onMouseUp);
window.addEventListener("mousemove", onMouseMove);
}}
onTouchStart={(e) => {
SubWindow.focus(win.id);
if (e.touches.length > 1) return;
const touch = e.touches[0];
// 如果按到的元素的父元素都没有data-pg-drag-region属性，就不移动窗口
if (!(e.target as HTMLElement).closest("[data-pg-drag-region]")) {
return;
}
const start = new Vector(touch.clientX, touch.clientY);
const onTouchEnd = () => {
window.removeEventListener("touchend", onTouchEnd);
window.removeEventListener("touchmove", onTouchMove);
};
const onTouchMove = (e: TouchEvent) => {
if (e.touches.length > 1) return;
const touch = e.touches[0];
const delta = new Vector(touch.clientX, touch.clientY).subtract(start);
const newRect = win.rect.translate(delta);
SubWindow.update(win.id, { rect: newRect });
};
window.addEventListener("touchend", onTouchEnd);
window.addEventListener("touchmove", onTouchMove);
}}
>
{
SubWindow.close(win.id);
}}
/>
)}
{win.title}
{win.closable && (
{win.children && win.children instanceof Object && "props" in win.children
? {
...win.children,
props: {
...(win.children.props || {}),
winId: win.id,
},
}
: win.children}
{/* 添加一个可调整大小的边缘，这里以右下角为例 */}
{
const start = new Vector(e.clientX, e.clientY);
const onMouseUp = () => {
window.removeEventListener("mouseup", onMouseUp);
window.removeEventListener("mousemove", onMouseMove);
};
const onMouseMove = (e: MouseEvent) => {
const delta = new Vector(e.clientX, e.clientY).subtract(start);
SubWindow.update(win.id, {
rect: new Rectangle(win.rect.location, win.rect.size.add(delta)),
});
};
window.addEventListener("mouseup", onMouseUp);
window.addEventListener("mousemove", onMouseMove);
}}
onTouchStart={(e) => {
if (e.touches.length > 1) return;
const touch = e.touches[0];
const start = new Vector(touch.clientX, touch.clientY);
const onTouchEnd = () => {
window.removeEventListener("touchend", onTouchEnd);
window.removeEventListener("touchmove", onTouchMove);
};
const onTouchMove = (e: TouchEvent) => {
if (e.touches.length > 1) return;
const touch = e.touches[0];
const delta = new Vector(touch.clientX, touch.clientY).subtract(start);
SubWindow.update(win.id, {
rect: new Rectangle(win.rect.location, win.rect.size.add(delta)),
});
};
window.addEventListener("touchend", onTouchEnd);
window.addEventListener("touchmove", onTouchMove);
}}
/>
{/* 左下角 */}
;
isHovered: boolean;
}) {
const { t } = useTranslation("settings");
const [value, setValue] = useState(Settings[settingKey] as boolean);
const [showDialog, setShowDialog] = useState(false);
useEffect(() => {
const unwatch = Settings.watch(settingKey, (newValue) => {
if (typeof newValue === "boolean") {
setValue(newValue);
}
});
return unwatch;
}, [settingKey]);
const handleToggle = () => {
const currentValue = Settings[settingKey];
if (typeof currentValue === "boolean") {
// @ts-expect-error 设置值
Settings[settingKey] = !currentValue;
}
};
const handleIconClick = () => {
setShowDialog(true);
};
const Icon = settingsIcons[settingKey as keyof typeof settingsIcons] ?? Fragment;
const title = t(`${settingKey}.title` as string);
const description = t(`${settingKey}.description` as string);
if (Icon === Fragment) return null;
return (
<>
{title}
);
}
/**
* 右侧工具栏
* 显示用户自定义的快捷设置项开关
*/
export default function RightToolbar() {
const [quickSettings, setQuickSettings] = useState([]);
const [isHovered, setIsHovered] = useState(false);
const [isClassroomMode] = useAtom(isClassroomModeAtom);
const loadQuickSettings = async () => {
const items = await QuickSettingsManager.getQuickSettings();
setQuickSettings(items);
};
useEffect(() => {
// 加载快捷设置项列表
loadQuickSettings();
// 定期检查更新（每5秒）
const interval = setInterval(() => {
loadQuickSettings();
}, 5000);
// 监听窗口焦点事件，当窗口重新获得焦点时刷新
const handleFocus = () => {
loadQuickSettings();
};
window.addEventListener("focus", handleFocus);
return () => {
clearInterval(interval);
window.removeEventListener("focus", handleFocus);
};
}, []);
return (
setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
{quickSettings.map((item) => (
);
}
================================================
FILE: app/src/components/theme-mode-switch.tsx
================================================
import { Settings } from "@/core/service/Settings";
import { Switch } from "./ui/switch";
import { Sun, Moon } from "lucide-react";
import { cn } from "@/utils/cn";
import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
import { useTranslation } from "react-i18next";
export default function ThemeModeSwitch() {
const { t } = useTranslation("settings");
const [themeMode] = Settings.use("themeMode");
const isDark = themeMode === "dark";
const handleToggle = () => {
Settings.themeMode = isDark ? "light" : "dark";
};
return (
{isDark ? t("themeMode.options.dark") : t("themeMode.options.light")}
);
}
================================================
FILE: app/src/components/toolbar-content.tsx
================================================
import { Settings } from "@/core/service/Settings";
import { Button } from "./ui/button";
import { Toolbar } from "./ui/toolbar";
import { MousePointer, Pencil, Waypoints } from "lucide-react";
import { Tooltip } from "./ui/tooltip";
import { TooltipContent, TooltipTrigger } from "@radix-ui/react-tooltip";
import { useTranslation } from "react-i18next";
import { useEffect, useState } from "react";
import { cn } from "@/utils/cn";
import { ColorManager } from "@/core/service/feedbackService/ColorManager";
import { Color } from "@graphif/data-structures";
import { useAtom } from "jotai";
import { isClassroomModeAtom } from "@/state";
/**
* 底部工具栏
* @returns
*/
export default function ToolbarContent() {
const { t } = useTranslation("keyBinds");
const [isClassroomMode] = useAtom(isClassroomModeAtom);
const [leftMouseMode, setLeftMouseMode] = useState(Settings.mouseLeftMode);
useEffect(() => {
setLeftMouseMode(Settings.mouseLeftMode);
}, [Settings.mouseLeftMode]);
return (
{t("checkoutLeftMouseToSelectAndMove.title")}
{t("checkoutLeftMouseToDrawing.title")}
{t("checkoutLeftMouseToConnectAndCutting.title")}
{leftMouseMode === "draw" && (
([]);
const [currentDrawColor, setCurrentDrawColor] = useState(Color.Transparent);
useEffect(() => {
ColorManager.getUserEntityFillColors().then((colors) => {
setUserColorList(colors);
});
setCurrentDrawColor(new Color(...Settings.autoFillPenStrokeColor));
}, []);
const handleChangeColor = (color: Color) => {
Settings.autoFillPenStrokeColor = color.toArray();
setCurrentDrawColor(color.clone());
};
return (
{
const start = new Vector(e.clientX, e.clientY);
const onMouseUp = () => {
window.removeEventListener("mouseup", onMouseUp);
window.removeEventListener("mousemove", onMouseMove);
};
const onMouseMove = (e: MouseEvent) => {
const delta = new Vector(e.clientX, e.clientY).subtract(start);
SubWindow.update(win.id, {
rect: new Rectangle(
new Vector(win.rect.left + delta.x, win.rect.top),
new Vector(win.rect.width - delta.x, win.rect.height + delta.y),
),
});
};
window.addEventListener("mouseup", onMouseUp);
window.addEventListener("mousemove", onMouseMove);
}}
onTouchStart={(e) => {
if (e.touches.length > 1) return;
const touch = e.touches[0];
const start = new Vector(touch.clientX, touch.clientY);
const onTouchEnd = () => {
window.removeEventListener("touchend", onTouchEnd);
window.removeEventListener("touchmove", onTouchMove);
};
const onTouchMove = (e: TouchEvent) => {
if (e.touches.length > 1) return;
const touch = e.touches[0];
const delta = new Vector(touch.clientX, touch.clientY).subtract(start);
SubWindow.update(win.id, {
rect: new Rectangle(
new Vector(win.rect.left + delta.x, win.rect.top),
new Vector(win.rect.width - delta.x, win.rect.height + delta.y),
),
});
};
window.addEventListener("touchend", onTouchEnd);
window.addEventListener("touchmove", onTouchMove);
}}
/>
))}
);
}
================================================
FILE: app/src/components/right-toolbar.tsx
================================================
import { Settings, settingsSchema } from "@/core/service/Settings";
import { QuickSettingsManager } from "@/core/service/QuickSettingsManager";
import { settingsIcons } from "@/core/service/SettingsIcons";
import { Button } from "./ui/button";
import { Switch } from "./ui/switch";
import { Toolbar } from "./ui/toolbar";
import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./ui/dialog";
import { useTranslation } from "react-i18next";
import { useEffect, useState } from "react";
import { cn } from "@/utils/cn";
import { Fragment } from "react";
import { useAtom } from "jotai";
import { isClassroomModeAtom } from "@/state";
/**
* 单个快捷设置项按钮
*/
function QuickSettingButton({
settingKey,
isHovered,
}: {
settingKey: keyof ReturnType
{/* Hidden default thumb */}
{userColorList.map((color) => {
return (
);
}
================================================
FILE: app/src/components/ui/ai-toolbar-button.tsx
================================================
// @ts-nocheck
"use client";
import * as React from "react";
import { AIChatPlugin } from "@platejs/ai/react";
import { useEditorPlugin } from "platejs/react";
import { ToolbarButton } from "./toolbar";
export function AIToolbarButton(props: React.ComponentProps) {
const { api } = useEditorPlugin(AIChatPlugin);
return (
{
api.aiChat.show();
}}
onMouseDown={(e) => {
e.preventDefault();
}}
/>
);
}
================================================
FILE: app/src/components/ui/alert-dialog.tsx
================================================
import * as React from "react";
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
import { cn } from "@/utils/cn";
import { buttonVariants } from "@/components/ui/button";
function AlertDialog({ ...props }: React.ComponentProps) {
return ) {
return ) {
return ) {
return (
) {
return (
);
}
function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
);
}
function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
);
}
function AlertDialogTitle({ className, ...props }: React.ComponentProps) {
return (
) {
return (
) {
return ) {
return ) {
return ;
}
function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
return (
);
}
function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
return (
);
}
export { Alert, AlertTitle, AlertDescription };
================================================
FILE: app/src/components/ui/align-toolbar-button.tsx
================================================
"use client";
import * as React from "react";
import type { Alignment } from "@platejs/basic-styles";
import type { DropdownMenuProps } from "@radix-ui/react-dropdown-menu";
import { TextAlignPlugin } from "@platejs/basic-styles/react";
import { AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon } from "lucide-react";
import { useEditorPlugin, useSelectionFragmentProp } from "platejs/react";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { ToolbarButton } from "./toolbar";
const items = [
{
icon: AlignLeftIcon,
value: "left",
},
{
icon: AlignCenterIcon,
value: "center",
},
{
icon: AlignRightIcon,
value: "right",
},
{
icon: AlignJustifyIcon,
value: "justify",
},
];
export function AlignToolbarButton(props: DropdownMenuProps) {
const { editor, tf } = useEditorPlugin(TextAlignPlugin);
const value =
useSelectionFragmentProp({
defaultValue: "start",
getProp: (node) => node.align,
}) ?? "left";
const [open, setOpen] = React.useState(false);
const IconValue = items.find((item) => item.value === value)?.icon ?? AlignLeftIcon;
return (
{
tf.textAlign.setNodes(value as Alignment);
editor.tf.focus();
}}
>
{items.map(({ icon: Icon, value: itemValue }) => (
))}
);
}
================================================
FILE: app/src/components/ui/avatar.tsx
================================================
import * as React from "react";
import * as AvatarPrimitive from "@radix-ui/react-avatar";
import { cn } from "@/utils/cn";
function Avatar({ className, ...props }: React.ComponentProps) {
return (
) {
return (
) {
return (
= (props) => {
const { editor, element } = props;
const commentsApi = editor.getApi(CommentPlugin).comment;
const blockPath = editor.api.findPath(element);
// avoid duplicate in table or column
if (!blockPath || blockPath.length > 1) return;
const draftCommentNode = commentsApi.node({ at: blockPath, isDraft: true });
const commentNodes = [...commentsApi.nodes({ at: blockPath })];
const suggestionNodes = [...editor.getApi(SuggestionPlugin).suggestion.nodes({ at: blockPath })];
if (commentNodes.length === 0 && suggestionNodes.length === 0 && !draftCommentNode) {
return;
}
return (props) => (
[];
draftCommentNode: NodeEntry | undefined;
suggestionNodes: NodeEntry[];
}) => {
const editor = useEditorRef();
const resolvedSuggestions = useResolveSuggestion(suggestionNodes, blockPath);
const resolvedDiscussions = useResolvedDiscussion(commentNodes, blockPath);
const suggestionsCount = resolvedSuggestions.length;
const discussionsCount = resolvedDiscussions.length;
const totalCount = suggestionsCount + discussionsCount;
const activeSuggestionId = usePluginOption(suggestionPlugin, "activeId");
const activeSuggestion = activeSuggestionId && resolvedSuggestions.find((s) => s.suggestionId === activeSuggestionId);
const commentingBlock = usePluginOption(commentPlugin, "commentingBlock");
const activeCommentId = usePluginOption(commentPlugin, "activeId");
const isCommenting = activeCommentId === getDraftCommentKey();
const activeDiscussion = activeCommentId && resolvedDiscussions.find((d) => d.id === activeCommentId);
const noneActive = !activeSuggestion && !activeDiscussion;
const sortedMergedData = [...resolvedDiscussions, ...resolvedSuggestions].sort(
(a, b) => a.createdAt.getTime() - b.createdAt.getTime(),
);
const selected =
resolvedDiscussions.some((d) => d.id === activeCommentId) ||
resolvedSuggestions.some((s) => s.suggestionId === activeSuggestionId);
const [_open, setOpen] = React.useState(selected);
// in some cases, we may comment the multiple blocks
const commentingCurrent = !!commentingBlock && PathApi.equals(blockPath, commentingBlock);
const open = _open || selected || (isCommenting && !!draftCommentNode && commentingCurrent);
const anchorElement = React.useMemo(() => {
let activeNode: NodeEntry | undefined;
if (activeSuggestion) {
activeNode = suggestionNodes.find(
([node]) =>
TextApi.isText(node) &&
editor.getApi(SuggestionPlugin).suggestion.nodeId(node) === activeSuggestion.suggestionId,
);
}
if (activeCommentId) {
if (activeCommentId === getDraftCommentKey()) {
activeNode = draftCommentNode;
} else {
activeNode = commentNodes.find(
([node]) => editor.getApi(commentPlugin).comment.nodeId(node) === activeCommentId,
);
}
}
if (!activeNode) return null;
return editor.api.toDOMNode(activeNode[0])!;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [open, activeSuggestion, activeCommentId, editor.api, suggestionNodes, draftCommentNode, commentNodes]);
if (suggestionsCount + resolvedDiscussions.length === 0 && !draftCommentNode)
return
{
if (!_open_ && isCommenting && draftCommentNode) {
editor.tf.unsetNodes(getDraftCommentKey(), {
at: [],
mode: "lowest",
match: (n) => n[getDraftCommentKey()],
});
}
setOpen(_open_);
}}
>
e.preventDefault()}
onOpenAutoFocus={(e) => e.preventDefault()}
align="center"
side="bottom"
>
{isCommenting ? (
{noneActive ? (
sortedMergedData.map((item, index) =>
isResolvedSuggestion(item) ? (
{activeSuggestion && (
)}
)}
{totalCount > 0 && (
)}
);
};
function BlockComment({ discussion, isLast }: { discussion: TDiscussion; isLast: boolean }) {
const [editingId, setEditingId] = React.useState(null);
return (
);
}
const useResolvedDiscussion = (commentNodes: NodeEntry[], blockPath: Path) => {
const { api, getOption, setOption } = useEditorPlugin(commentPlugin);
const discussions = usePluginOption(discussionPlugin, "discussions");
commentNodes.forEach(([node]) => {
const id = api.comment.nodeId(node);
const map = getOption("uniquePathMap");
if (!id) return;
const previousPath = map.get(id);
// If there are no comment nodes in the corresponding path in the map, then update it.
if (PathApi.isPath(previousPath)) {
const nodes = api.comment.node({ id, at: previousPath });
if (!nodes) {
setOption("uniquePathMap", new Map(map).set(id, blockPath));
return;
}
return;
}
// TODO: fix throw error
setOption("uniquePathMap", new Map(map).set(id, blockPath));
});
const commentsIds = new Set(commentNodes.map(([node]) => api.comment.nodeId(node)).filter(Boolean));
const resolvedDiscussions = discussions
.map((d: TDiscussion) => ({
...d,
createdAt: new Date(d.createdAt),
}))
.filter((item: TDiscussion) => {
/** If comment cross blocks just show it in the first block */
const commentsPathMap = getOption("uniquePathMap");
const firstBlockPath = commentsPathMap.get(item.id);
if (!firstBlockPath) return false;
if (!PathApi.equals(firstBlockPath, blockPath)) return false;
return api.comment.has({ id: item.id }) && commentsIds.has(item.id) && !item.isResolved;
});
return resolvedDiscussions;
};
================================================
FILE: app/src/components/ui/block-list-static.tsx
================================================
import * as React from "react";
import type { RenderStaticNodeWrapper, SlateRenderElementProps, TListElement } from "platejs";
import { isOrderedList } from "@platejs/list";
import { CheckIcon } from "lucide-react";
import { cn } from "@/utils/cn";
const config: Record<
string,
{
Li: React.FC;
Marker: React.FC;
}
> = {
todo: {
Li: TodoLiStatic,
Marker: TodoMarkerStatic,
},
};
export const BlockListStatic: RenderStaticNodeWrapper = (props) => {
if (!props.element.listStyleType) return;
return (props) =>
);
}
function TodoLiStatic(props: SlateRenderElementProps) {
return (
{props.children}
);
}
================================================
FILE: app/src/components/ui/block-list.tsx
================================================
"use client";
import React from "react";
import type { TListElement } from "platejs";
import { isOrderedList } from "@platejs/list";
import { useTodoListElement, useTodoListElementState } from "@platejs/list/react";
import { type PlateElementProps, type RenderNodeWrapper, useReadOnly } from "platejs/react";
import { Checkbox } from "@/components/ui/checkbox";
import { cn } from "@/utils/cn";
const config: Record<
string,
{
Li: React.FC;
Marker: React.FC;
}
> = {
todo: {
Li: TodoLi,
Marker: TodoMarker,
},
};
export const BlockList: RenderNodeWrapper = (props) => {
if (!props.element.listStyleType) return;
return (props) =>
{props.children}
);
}
================================================
FILE: app/src/components/ui/block-selection.tsx
================================================
// @ts-nocheck
"use client";
import { DndPlugin } from "@platejs/dnd";
import { useBlockSelected } from "@platejs/selection/react";
import { cva } from "class-variance-authority";
import { type PlateElementProps, usePluginOption } from "platejs/react";
export const blockSelectionVariants = cva(
"pointer-events-none absolute inset-0 z-1 bg-brand/[.13] transition-opacity",
{
defaultVariants: {
active: true,
},
variants: {
active: {
false: "opacity-0",
true: "opacity-100",
},
},
},
);
export function BlockSelection(props: PlateElementProps) {
const isBlockSelected = useBlockSelected();
const isDragging = usePluginOption(DndPlugin, "isDragging");
if (!isBlockSelected || props.plugin.key === "tr" || props.plugin.key === "table") return null;
return (
);
}
================================================
FILE: app/src/components/ui/block-suggestion.tsx
================================================
"use client";
import * as React from "react";
import type { TResolvedSuggestion } from "@platejs/suggestion";
import { acceptSuggestion, getSuggestionKey, keyId2SuggestionId, rejectSuggestion } from "@platejs/suggestion";
import { SuggestionPlugin } from "@platejs/suggestion/react";
import { CheckIcon, XIcon } from "lucide-react";
import {
type NodeEntry,
type Path,
type TElement,
type TSuggestionElement,
type TSuggestionText,
ElementApi,
KEYS,
PathApi,
TextApi,
} from "platejs";
import { useEditorPlugin, usePluginOption } from "platejs/react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { cn } from "@/utils/cn";
import { type TDiscussion, discussionPlugin } from "@/components/editor/plugins/discussion-kit";
import { suggestionPlugin } from "@/components/editor/plugins/suggestion-kit";
import { type TComment, Comment, CommentCreateForm, formatCommentDate } from "./comment";
export interface ResolvedSuggestion extends TResolvedSuggestion {
comments: TComment[];
}
const BLOCK_SUGGESTION = "__block__";
const TYPE_TEXT_MAP: Record string> = {
[KEYS.audio]: () => "Audio",
[KEYS.blockquote]: () => "Blockquote",
[KEYS.callout]: () => "Callout",
[KEYS.codeBlock]: () => "Code Block",
[KEYS.column]: () => "Column",
[KEYS.equation]: () => "Equation",
[KEYS.file]: () => "File",
[KEYS.h1]: () => `Heading 1`,
[KEYS.h2]: () => `Heading 2`,
[KEYS.h3]: () => `Heading 3`,
[KEYS.h4]: () => `Heading 4`,
[KEYS.h5]: () => `Heading 5`,
[KEYS.h6]: () => `Heading 6`,
[KEYS.hr]: () => "Horizontal Rule",
[KEYS.img]: () => "Image",
[KEYS.mediaEmbed]: () => "Media",
[KEYS.p]: (node) => {
if (node?.[KEYS.listType] === KEYS.listTodo) return "Todo List";
if (node?.[KEYS.listType] === KEYS.ol) return "Ordered List";
if (node?.[KEYS.listType] === KEYS.ul) return "List";
return "Paragraph";
},
[KEYS.table]: () => "Table",
[KEYS.toc]: () => "Table of Contents",
[KEYS.toggle]: () => "Toggle",
[KEYS.video]: () => "Video",
};
export function BlockSuggestion({ element }: { element: TSuggestionElement }) {
const suggestionData = element.suggestion;
if (suggestionData?.isLineBreak) return null;
const isRemove = suggestionData?.type === "remove";
return (
);
}
export function BlockSuggestionCard({
idx,
isLast,
suggestion,
}: {
idx: number;
isLast: boolean;
suggestion: ResolvedSuggestion;
}) {
const { api, editor } = useEditorPlugin(SuggestionPlugin);
const userInfo = usePluginOption(discussionPlugin, "user", suggestion.userId);
const accept = (suggestion: ResolvedSuggestion) => {
api.suggestion.withoutSuggestions(() => {
acceptSuggestion(editor, suggestion);
});
};
const reject = (suggestion: ResolvedSuggestion) => {
api.suggestion.withoutSuggestions(() => {
rejectSuggestion(editor, suggestion);
});
};
const [hovering, setHovering] = React.useState(false);
const suggestionText2Array = (text: string) => {
if (text === BLOCK_SUGGESTION) return ["line breaks"];
return text.split(BLOCK_SUGGESTION).filter(Boolean);
};
const [editingId, setEditingId] = React.useState(null);
return (
[], blockPath: Path) => {
const discussions = usePluginOption(discussionPlugin, "discussions");
const { api, editor, getOption, setOption } = useEditorPlugin(suggestionPlugin);
suggestionNodes.forEach(([node]) => {
const id = api.suggestion.nodeId(node);
const map = getOption("uniquePathMap");
if (!id) return;
const previousPath = map.get(id);
// If there are no suggestion nodes in the corresponding path in the map, then update it.
if (PathApi.isPath(previousPath)) {
const nodes = api.suggestion.node({ id, at: previousPath, isText: true });
const parentNode = api.node(previousPath);
let lineBreakId: string | null = null;
if (parentNode && ElementApi.isElement(parentNode[0])) {
lineBreakId = api.suggestion.nodeId(parentNode[0]) ?? null;
}
if (!nodes && lineBreakId !== id) {
return setOption("uniquePathMap", new Map(map).set(id, blockPath));
}
return;
}
setOption("uniquePathMap", new Map(map).set(id, blockPath));
});
const resolvedSuggestion: ResolvedSuggestion[] = React.useMemo(() => {
const map = getOption("uniquePathMap");
if (suggestionNodes.length === 0) return [];
const suggestionIds = new Set(
suggestionNodes
.flatMap(([node]) => {
if (TextApi.isText(node)) {
const dataList = api.suggestion.dataList(node);
const includeUpdate = dataList.some((data) => data.type === "update");
if (!includeUpdate) return api.suggestion.nodeId(node);
return dataList.filter((data) => data.type === "update").map((d) => d.id);
}
if (ElementApi.isElement(node)) {
return api.suggestion.nodeId(node);
}
})
.filter(Boolean),
);
const res: ResolvedSuggestion[] = [];
suggestionIds.forEach((id) => {
if (!id) return;
const path = map.get(id);
if (!path || !PathApi.isPath(path)) return;
if (!PathApi.equals(path, blockPath)) return;
const entries = [
...editor.api.nodes({
at: [],
mode: "all",
match: (n) => (n[KEYS.suggestion] && n[getSuggestionKey(id)]) || api.suggestion.nodeId(n as TElement) === id,
}),
];
// move line break to the end
entries.sort(([, path1], [, path2]) => {
return PathApi.isChild(path1, path2) ? -1 : 1;
});
let newText = "";
let text = "";
let properties: any = {};
let newProperties: any = {};
// overlapping suggestion
entries.forEach(([node]) => {
if (TextApi.isText(node)) {
const dataList = api.suggestion.dataList(node);
dataList.forEach((data) => {
if (data.id !== id) return;
switch (data.type) {
case "insert": {
newText += node.text;
break;
}
case "remove": {
text += node.text;
break;
}
case "update": {
properties = {
...properties,
...data.properties,
};
newProperties = {
...newProperties,
...data.newProperties,
};
newText += node.text;
break;
}
// No default
}
});
} else {
const lineBreakData = api.suggestion.isBlockSuggestion(node) ? node.suggestion : undefined;
if (lineBreakData?.id !== keyId2SuggestionId(id)) return;
if (lineBreakData.type === "insert") {
newText += lineBreakData.isLineBreak ? BLOCK_SUGGESTION : BLOCK_SUGGESTION + TYPE_TEXT_MAP[node.type](node);
} else if (lineBreakData.type === "remove") {
text += lineBreakData.isLineBreak ? BLOCK_SUGGESTION : BLOCK_SUGGESTION + TYPE_TEXT_MAP[node.type](node);
}
}
});
if (entries.length === 0) return;
const nodeData = api.suggestion.suggestionData(entries[0][0]);
if (!nodeData) return;
// const comments = data?.discussions.find((d) => d.id === id)?.comments;
const comments = discussions.find((s: TDiscussion) => s.id === id)?.comments || [];
const createdAt = new Date(nodeData.createdAt);
const keyId = getSuggestionKey(id);
if (nodeData.type === "update") {
return res.push({
comments,
createdAt,
keyId,
newProperties,
newText,
properties,
suggestionId: keyId2SuggestionId(id),
type: "update",
userId: nodeData.userId,
});
}
if (newText.length > 0 && text.length > 0) {
return res.push({
comments,
createdAt,
keyId,
newText,
suggestionId: keyId2SuggestionId(id),
text,
type: "replace",
userId: nodeData.userId,
});
}
if (newText.length > 0) {
return res.push({
comments,
createdAt,
keyId,
newText,
suggestionId: keyId2SuggestionId(id),
type: "insert",
userId: nodeData.userId,
});
}
if (text.length > 0) {
return res.push({
comments,
createdAt,
keyId,
suggestionId: keyId2SuggestionId(id),
text,
type: "remove",
userId: nodeData.userId,
});
}
});
return res;
}, [api.suggestion, blockPath, discussions, editor.api, getOption, suggestionNodes]);
return resolvedSuggestion;
};
export const isResolvedSuggestion = (
suggestion: ResolvedSuggestion | TDiscussion,
): suggestion is ResolvedSuggestion => {
return "suggestionId" in suggestion;
};
================================================
FILE: app/src/components/ui/blockquote-node-static.tsx
================================================
// @ts-nocheck
import { type SlateElementProps, SlateElement } from "platejs";
export function BlockquoteElementStatic(props: SlateElementProps) {
return & {
asChild?: boolean;
}) {
const Comp = asChild ? Slot : "button";
return & {
buttonVariant?: React.ComponentProps["variant"];
}) {
const defaultClassNames = getDefaultClassNames();
return (
svg]:rotate-180`,
String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
className,
)}
captionLayout={captionLayout}
formatters={{
formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
...formatters,
}}
classNames={{
root: cn("w-fit", defaultClassNames.root),
months: cn("flex gap-4 flex-col md:flex-row relative", defaultClassNames.months),
month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
nav: cn("flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between", defaultClassNames.nav),
button_previous: cn(
buttonVariants({ variant: buttonVariant }),
"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
defaultClassNames.button_previous,
),
button_next: cn(
buttonVariants({ variant: buttonVariant }),
"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
defaultClassNames.button_next,
),
month_caption: cn(
"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
defaultClassNames.month_caption,
),
dropdowns: cn(
"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
defaultClassNames.dropdowns,
),
dropdown_root: cn(
"relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
defaultClassNames.dropdown_root,
),
dropdown: cn("absolute bg-popover inset-0 opacity-0", defaultClassNames.dropdown),
caption_label: cn(
"select-none font-medium",
captionLayout === "label"
? "text-sm"
: "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
defaultClassNames.caption_label,
),
table: "w-full border-collapse",
weekdays: cn("flex", defaultClassNames.weekdays),
weekday: cn(
"text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
defaultClassNames.weekday,
),
week: cn("flex w-full mt-2", defaultClassNames.week),
week_number_header: cn("select-none w-(--cell-size)", defaultClassNames.week_number_header),
week_number: cn("text-[0.8rem] select-none text-muted-foreground", defaultClassNames.week_number),
day: cn(
"relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
defaultClassNames.day,
),
range_start: cn("rounded-l-md bg-accent", defaultClassNames.range_start),
range_middle: cn("rounded-none", defaultClassNames.range_middle),
range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
today: cn(
"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
defaultClassNames.today,
),
outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
hidden: cn("invisible", defaultClassNames.hidden),
...classNames,
}}
components={{
Root: ({ className, rootRef, ...props }) => {
return ;
},
Chevron: ({ className, orientation, ...props }) => {
if (orientation === "left") {
return
);
},
...components,
}}
{...props}
/>
);
}
function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps) {
const defaultClassNames = getDefaultClassNames();
const ref = React.useRef(null);
React.useEffect(() => {
if (modifiers.focused) ref.current?.focus();
}, [modifiers.focused]);
return (
}
isOpen={isOpen}
setIsOpen={setIsOpen}
>
{control}
{children}
);
}
export function EmojiPicker({
clearSearch,
emoji,
emojiLibrary,
focusedCategory,
hasFound,
i18n,
icons = {
categories: emojiCategoryIcons,
search: emojiSearchIcons,
},
isSearching,
refs,
searchResult,
searchValue,
setSearch,
settings = EmojiSettings,
visibleCategories,
handleCategoryClick,
onMouseOver,
onSelectEmoji,
}: Omit & {
icons?: EmojiIconList;
}) {
return (
) {
return (
);
});
}, [emojiLibrary, getRowWidth, i18n.categories, isCategoryVisible, onSelectEmoji, onMouseOver, settings]);
const SearchList = React.useCallback(() => {
return (
);
}, [emojiLibrary, getRowWidth, i18n.searchResult, searchResult, onSelectEmoji, onMouseOver]);
return (
);
}
function EmojiPickerSearchBar({
children,
i18n,
searchValue,
setSearch,
}: {
children: React.ReactNode;
} & Pick) {
return (
);
}
function EmojiPickerSearchAndClear({
clearSearch,
i18n,
searchValue,
}: Pick) {
return (
);
}
function EmojiPreview({ emoji }: Pick) {
return (
);
}
function NoEmoji({ i18n }: Pick) {
return (
);
}
function PickAnEmoji({ i18n }: Pick) {
return (
);
}
function EmojiPickerPreview({
emoji,
hasFound = true,
i18n,
isSearching = false,
...props
}: Pick) {
const showPickEmoji = !emoji && (!isSearching || hasFound);
const showNoEmoji = isSearching && !hasFound;
const showPreview = emoji && !showNoEmoji && !showNoEmoji;
return (
<>
{showPreview && ) {
return (
);
}
const emojiCategoryIcons: Record<
EmojiCategoryList,
{
outline: React.ReactElement;
solid: React.ReactElement; // Needed to add another solid variant - outline will be used for now
}
> = {
activity: {
outline: (
),
solid: (
),
},
custom: {
outline: ) {
const { element } = props;
const html = getEquationHtml({
element,
options: {
displayMode: true,
errorColor: "#cc0000",
fleqn: false,
leqno: false,
macros: { "\\f": "#1f(#2)" },
output: "htmlAndMathml",
strict: "warn",
throwOnError: false,
trust: false,
},
});
return (
);
}
export function InlineEquationElementStatic(props: SlateElementProps) {
const html = getEquationHtml({
element: props.element,
options: {
displayMode: true,
errorColor: "#cc0000",
fleqn: false,
leqno: false,
macros: { "\\f": "#1f(#2)" },
output: "htmlAndMathml",
strict: "warn",
throwOnError: false,
trust: false,
},
});
return (
{props.children}
);
}
================================================
FILE: app/src/components/ui/equation-node.tsx
================================================
// @ts-nocheck
"use client";
import * as React from "react";
import TextareaAutosize, { type TextareaAutosizeProps } from "react-textarea-autosize";
import type { TEquationElement } from "platejs";
import type { PlateElementProps } from "platejs/react";
import { useEquationElement, useEquationInput } from "@platejs/math/react";
import { BlockSelectionPlugin } from "@platejs/selection/react";
import { CornerDownLeftIcon, RadicalIcon } from "lucide-react";
import {
createPrimitiveComponent,
PlateElement,
useEditorRef,
useEditorSelector,
useElement,
useReadOnly,
useSelected,
} from "platejs/react";
import { Button } from "@/components/ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { cn } from "@/utils/cn";
export function EquationElement(props: PlateElementProps) {
const selected = useSelected();
const [open, setOpen] = React.useState(selected);
const katexRef = React.useRef(null);
useEquationElement({
element: props.element,
katexRef: katexRef,
options: {
displayMode: true,
errorColor: "#cc0000",
fleqn: false,
leqno: false,
macros: { "\\f": "#1f(#2)" },
output: "htmlAndMathml",
strict: "warn",
throwOnError: false,
trust: false,
},
});
return (
0 \\\\\n 0, &\\quad x = 0 \\\\\n -x^2, &\\quad x < 0\n\\end{cases}`}
isInline={false}
setOpen={setOpen}
/>
{props.children}
);
}
export function InlineEquationElement(props: PlateElementProps) {
const element = props.element;
const katexRef = React.useRef(null);
const selected = useSelected();
const isCollapsed = useEditorSelector((editor) => editor.api.isCollapsed(), []);
const [open, setOpen] = React.useState(selected && isCollapsed);
React.useEffect(() => {
if (selected && isCollapsed) {
setOpen(true);
}
}, [selected, isCollapsed]);
useEquationElement({
element,
katexRef: katexRef,
options: {
displayMode: true,
errorColor: "#cc0000",
fleqn: false,
leqno: false,
macros: { "\\f": "#1f(#2)" },
output: "htmlAndMathml",
strict: "warn",
throwOnError: false,
trust: false,
},
});
return (
{props.children}
);
}
const EquationInput = createPrimitiveComponent(TextareaAutosize)({
propsHook: useEquationInput,
});
const EquationPopoverContent = ({
className,
isInline,
open,
setOpen,
...props
}: {
isInline: boolean;
open: boolean;
setOpen: (open: boolean) => void;
} & TextareaAutosizeProps) => {
const editor = useEditorRef();
const readOnly = useReadOnly();
const element = useElement();
React.useEffect(() => {
if (isInline && open) {
setOpen(true);
}
}, [isInline, open, setOpen]);
if (readOnly) return null;
const onClose = () => {
setOpen(false);
if (isInline) {
editor.tf.select(element, { focus: true, next: true });
} else {
editor.getApi(BlockSelectionPlugin).blockSelection.set(element.id as string);
}
};
return (
{
e.preventDefault();
}}
contentEditable={false}
>
);
};
================================================
FILE: app/src/components/ui/equation-toolbar-button.tsx
================================================
"use client";
import * as React from "react";
import { insertInlineEquation } from "@platejs/math";
import { RadicalIcon } from "lucide-react";
import { useEditorRef } from "platejs/react";
import { ToolbarButton } from "./toolbar";
export function InlineEquationToolbarButton(props: React.ComponentProps) {
const editor = useEditorRef();
return (
{
insertInlineEquation(editor);
}}
tooltip="Mark as equation"
>
);
}
================================================
FILE: app/src/components/ui/export-toolbar-button.tsx
================================================
"use client";
import * as React from "react";
import type { DropdownMenuProps } from "@radix-ui/react-dropdown-menu";
import { MarkdownPlugin } from "@platejs/markdown";
import { ArrowDownToLineIcon } from "lucide-react";
import { createSlateEditor, serializeHtml } from "platejs";
import { useEditorRef } from "platejs/react";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { BaseEditorKit } from "@/components/editor/editor-base-kit";
import { EditorStatic } from "./editor-static";
import { ToolbarButton } from "./toolbar";
const siteUrl = "https://platejs.org";
export function ExportToolbarButton(props: DropdownMenuProps) {
const editor = useEditorRef();
const [open, setOpen] = React.useState(false);
const getCanvas = async () => {
const { default: html2canvas } = await import("html2canvas-pro");
const style = document.createElement("style");
document.head.append(style);
const canvas = await html2canvas(editor.api.toDOMNode(editor)!, {
onclone: (document: Document) => {
const editorElement = document.querySelector('[contenteditable="true"]');
if (editorElement) {
Array.from(editorElement.querySelectorAll("*")).forEach((element) => {
const existingStyle = element.getAttribute("style") || "";
element.setAttribute(
"style",
`${existingStyle}; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important`,
);
});
}
},
});
style.remove();
return canvas;
};
const downloadFile = async (url: string, filename: string) => {
const response = await fetch(url);
const blob = await response.blob();
const blobUrl = window.URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = blobUrl;
link.download = filename;
document.body.append(link);
link.click();
link.remove();
// Clean up the blob URL
window.URL.revokeObjectURL(blobUrl);
};
const exportToPdf = async () => {
const canvas = await getCanvas();
const PDFLib = await import("pdf-lib");
const pdfDoc = await PDFLib.PDFDocument.create();
const page = pdfDoc.addPage([canvas.width, canvas.height]);
const imageEmbed = await pdfDoc.embedPng(canvas.toDataURL("PNG"));
const { height, width } = imageEmbed.scale(1);
page.drawImage(imageEmbed, {
height,
width,
x: 0,
y: 0,
});
const pdfBase64 = await pdfDoc.saveAsBase64({ dataUri: true });
await downloadFile(pdfBase64, "plate.pdf");
};
const exportToImage = async () => {
const canvas = await getCanvas();
await downloadFile(canvas.toDataURL("image/png"), "plate.png");
};
const exportToHtml = async () => {
const editorStatic = createSlateEditor({
plugins: BaseEditorKit,
value: editor.children,
});
const editorHtml = await serializeHtml(editorStatic, {
editorComponent: EditorStatic,
props: { style: { padding: "0 calc(50% - 350px)", paddingBottom: "" } },
});
const tailwindCss = ``;
const katexCss = ``;
const html = `
${tailwindCss}
${katexCss}
${editorHtml}
`;
const url = `data:text/html;charset=utf-8,${encodeURIComponent(html)}`;
await downloadFile(url, "plate.html");
};
const exportToMarkdown = async () => {
const md = editor.getApi(MarkdownPlugin).markdown.serialize();
const url = `data:text/markdown;charset=utf-8,${encodeURIComponent(md)}`;
await downloadFile(url, "plate.md");
};
return (
Export as HTML
Export as PDF
Export as Image
Export as Markdown
);
}
================================================
FILE: app/src/components/ui/field.tsx
================================================
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Slider } from "@/components/ui/slider";
import { Switch } from "@/components/ui/switch";
import { Settings, settingsSchema } from "@/core/service/Settings";
import { settingsIcons } from "@/core/service/SettingsIcons";
import { Telemetry } from "@/core/service/Telemetry";
import { cn } from "@/utils/cn";
import _ from "lodash";
import { ChevronRight, RotateCw } from "lucide-react";
import React, { CSSProperties, Fragment, useEffect, useLayoutEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
export function SettingField({ settingKey, extra = <> }: { settingKey: keyof Settings; extra?: React.ReactNode }) {
const [value, setValue] = React.useState(Settings[settingKey]);
const { t, i18n } = useTranslation("settings");
const schema = settingsSchema.shape[settingKey];
React.useEffect(() => {
if (value !== Settings[settingKey]) {
// @ts-expect-error 不知道为什么Settings[settingKey]可能是never
Settings[settingKey] = value;
postTelemetryEvent();
}
if (settingKey === "language") {
i18n.changeLanguage(value);
}
}, [value]);
const postTelemetryEvent = _.debounce(() => {
if (settingKey === "aiApiKey") return;
Telemetry.event("修改设置", {
key: settingKey,
value,
});
}, 1000);
// @ts-expect-error fuck ts
const Icon = settingsIcons[settingKey] ?? Fragment;
return (
setValue(schema._def.defaultValue)}
/>
{extra}
{schema._def.innerType._def.typeName === "ZodString" ? (
setValue(e.target.value)} className="w-64" />
) : schema._def.innerType._def.typeName === "ZodNumber" &&
schema._def.innerType._def.checks.find((it) => it.kind === "min") &&
schema._def.innerType._def.checks.find((it) => it.kind === "max") ? (
<>
setValue(v)}
min={schema._def.innerType._def.checks.find((it) => it.kind === "min")?.value ?? 0}
max={schema._def.innerType._def.checks.find((it) => it.kind === "max")?.value ?? 1}
step={
schema._def.innerType._def.checks.find((it) => it.kind === "int")
? 1
: (schema._def.innerType._def.checks.find((it) => it.kind === "multipleOf")?.value ?? 0.01)
}
className="w-48"
/>
setValue(parseFloat(e.target.value))}
type="number"
min={schema._def.innerType._def.checks.find((it) => it.kind === "min")?.value ?? 0}
max={schema._def.innerType._def.checks.find((it) => it.kind === "max")?.value ?? 1}
step={
schema._def.innerType._def.checks.find((it) => it.kind === "int")
? 1
: (schema._def.innerType._def.checks.find((it) => it.kind === "multipleOf")?.value ?? 0.01)
}
className="w-24"
/>
) : schema._def.innerType._def.typeName === "ZodNumber" ? (
setValue(e.target.valueAsNumber)} type="number" className="w-32" />
) : schema._def.innerType._def.typeName === "ZodBoolean" ? (
);
}
const fieldColors = {
default: "hover:bg-field-group-hover-bg",
celebrate: "border-2 border-green-500/20 hover:bg-green-500/25",
danger: "border-2 border-red-500/20 hover:bg-red-500/25",
warning: "border-2 border-yellow-500/20 hover:bg-yellow-500/25",
thinking: "border-2 border-blue-500/20 hover:bg-blue-500/25",
imaging: "border-2 border-purple-500/20 hover:bg-purple-500/25",
};
/**
* 每一个设置段
* @param param0
* @returns
*/
export function Field({
title = "",
description = "",
children = <>,
extra = <>,
color = "default",
icon = <>,
className = "",
style = {},
onClick = () => {},
}: {
title?: string;
description?: string;
children?: React.ReactNode;
extra?: React.ReactNode;
color?: "default" | "celebrate" | "danger" | "warning" | "thinking" | "imaging";
icon?: React.ReactNode;
className?: string;
style?: CSSProperties;
onClick?: () => void;
}) {
return (
{extra}
);
}
/**
* 用于给各种设置项提供一个分类组
* @param param0
* @returns
*/
export function FieldGroup({
title = "",
icon = null,
children = null,
className = "",
description = "",
}: {
title?: string;
icon?: React.ReactNode;
children?: React.ReactNode;
className?: string;
description?: string;
}) {
const [isOpen, setIsOpen] = useState(false);
const [height, setHeight] = useState(0);
const contentRef = useRef(null);
const innerRef = useRef(null);
const [isAnimating, setAnimating] = useState(false);
const [shouldMount, setShouldMount] = useState(isOpen);
useEffect(() => {
const el = innerRef.current;
if (!el) return;
const ro = new ResizeObserver(() => {
if (isOpen) setHeight(el.offsetHeight);
});
ro.observe(el);
return () => ro.disconnect();
}, [isOpen]);
useLayoutEffect(() => {
if (!isOpen) {
setHeight(0);
return;
}
requestAnimationFrame(() => {
const el = innerRef.current;
if (el) setHeight(el.offsetHeight);
});
}, [isOpen]);
const handleToggle = () => {
setAnimating(true);
const next = !isOpen;
setIsOpen(next);
if (next) {
setShouldMount(true); // 展开：立即挂载
} else {
setTimeout(() => {
// 折叠：动画后再卸载
setShouldMount(false);
}, 250);
}
setTimeout(() => setAnimating(false), 500);
};
return (
);
}
================================================
FILE: app/src/components/ui/file-chooser.tsx
================================================
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { isWeb } from "@/utils/platform";
import { open } from "@tauri-apps/plugin-dialog";
import { FolderOpen } from "lucide-react";
export default function FileChooser({
kind,
value = "",
onChange = () => {},
}: {
kind: "file" | "directory";
value?: string;
onChange?: (value: string) => void;
}) {
return isWeb ? (
*/}
{/*
*/}
)}
{/*
*/}
);
}
================================================
FILE: app/src/components/ui/fixed-toolbar.tsx
================================================
"use client";
import { cn } from "@/utils/cn";
import { Toolbar } from "./toolbar";
export function FixedToolbar(props: React.ComponentProps) {
return (
*/}
)}
{/*
*/}
);
}
================================================
FILE: app/src/components/ui/floating-toolbar.tsx
================================================
// @ts-nocheck
"use client";
import * as React from "react";
import {
type FloatingToolbarState,
flip,
offset,
useFloatingToolbar,
useFloatingToolbarState,
} from "@platejs/floating";
import { useComposedRef } from "@udecode/cn";
import { KEYS } from "platejs";
import { useEditorId, useEventEditorValue, usePluginOption } from "platejs/react";
import { cn } from "@/utils/cn";
import { Toolbar } from "./toolbar";
export function FloatingToolbar({
children,
className,
state,
...props
}: React.ComponentProps & {
state?: FloatingToolbarState;
}) {
const editorId = useEditorId();
const focusedEditorId = useEventEditorValue("focus");
const isFloatingLinkOpen = !!usePluginOption({ key: KEYS.link }, "mode");
const isAIChatOpen = usePluginOption({ key: KEYS.aiChat }, "open");
const floatingToolbarState = useFloatingToolbarState({
editorId,
focusedEditorId,
hideToolbar: isFloatingLinkOpen || isAIChatOpen,
...state,
floatingOptions: {
middleware: [
offset(12),
flip({
fallbackPlacements: ["top-start", "top-end", "bottom-start", "bottom-end"],
padding: 12,
}),
],
placement: "top",
...state?.floatingOptions,
},
});
const { clickOutsideRef, hidden, props: rootProps, ref: floatingRef } = useFloatingToolbar(floatingToolbarState);
const ref = useComposedRef(props.ref, floatingRef);
if (hidden) return null;
return (
{children}
);
}
================================================
FILE: app/src/components/ui/font-color-toolbar-button.tsx
================================================
"use client";
import React from "react";
import type { DropdownMenuItemProps, DropdownMenuProps } from "@radix-ui/react-dropdown-menu";
import { useComposedRef } from "@udecode/cn";
import debounce from "lodash/debounce.js";
import { EraserIcon, PlusIcon } from "lucide-react";
import { useEditorRef, useEditorSelector } from "platejs/react";
import { buttonVariants } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { cn } from "@/utils/cn";
import { ToolbarButton, ToolbarMenuGroup } from "./toolbar";
export function FontColorToolbarButton({
children,
nodeType,
tooltip,
}: {
nodeType: string;
tooltip?: string;
} & DropdownMenuProps) {
const editor = useEditorRef();
const selectionDefined = useEditorSelector((editor) => !!editor.selection, []);
const color = useEditorSelector((editor) => editor.api.mark(nodeType) as string, [nodeType]);
const [selectedColor, setSelectedColor] = React.useState();
const [open, setOpen] = React.useState(false);
const onToggle = React.useCallback(
(value = !open) => {
setOpen(value);
},
[open, setOpen],
);
const updateColor = React.useCallback(
(value: string) => {
if (editor.selection) {
setSelectedColor(value);
editor.tf.select(editor.selection);
editor.tf.focus();
editor.tf.addMarks({ [nodeType]: value });
}
},
[editor, nodeType],
);
const updateColorAndClose = React.useCallback(
(value: string) => {
updateColor(value);
onToggle();
},
[onToggle, updateColor],
);
const clearColor = React.useCallback(() => {
if (editor.selection) {
editor.tf.select(editor.selection);
editor.tf.focus();
if (selectedColor) {
editor.tf.removeMarks(nodeType);
}
onToggle();
}
}, [editor, selectedColor, onToggle, nodeType]);
React.useEffect(() => {
if (selectionDefined) {
setSelectedColor(color);
}
}, [color, selectionDefined]);
return (
{
setOpen(value);
}}
modal={false}
>
{children}
);
}
function PureColorPicker({
className,
clearColor,
color,
colors,
customColors,
updateColor,
updateCustomColor,
...props
}: React.ComponentProps<"div"> & {
colors: TColor[];
customColors: TColor[];
clearColor: () => void;
updateColor: (color: string) => void;
updateCustomColor: (color: string) => void;
color?: string;
}) {
return (
{color && (
)}
);
}
const ColorPicker = React.memo(
PureColorPicker,
(prev, next) => prev.color === next.color && prev.colors === next.colors && prev.customColors === next.customColors,
);
function ColorCustom({
className,
color,
colors,
customColors,
updateColor,
updateCustomColor,
...props
}: {
colors: TColor[];
customColors: TColor[];
updateColor: (color: string) => void;
updateCustomColor: (color: string) => void;
color?: string;
} & React.ComponentPropsWithoutRef<"div">) {
const [customColor, setCustomColor] = React.useState();
const [value, setValue] = React.useState(color || "#000000");
React.useEffect(() => {
if (!color || customColors.some((c) => c.value === color) || colors.some((c) => c.value === color)) {
return;
}
setCustomColor(color);
}, [color, colors, customColors]);
const computedColors = React.useMemo(
() =>
customColor
? [
...customColors,
{
isBrightColor: false,
name: "",
value: customColor,
},
]
: customColors,
[customColor, customColors],
);
// eslint-disable-next-line react-hooks/exhaustive-deps
const updateCustomColorDebounced = React.useCallback(debounce(updateCustomColor, 100), [updateCustomColor]);
return (
{
setValue(e.target.value);
updateCustomColorDebounced(e.target.value);
}}
>
{
e.preventDefault();
}}
>
Custom
);
}
function ColorInput({ children, className, value = "#000000", ...props }: React.ComponentProps<"input">) {
const inputRef = React.useRef(null);
return (
{
e.preventDefault();
updateColor(value);
}}
{...props}
/>
);
return name ? (
{content}
{name}
) : (
content
);
}
export function ColorDropdownMenuItems({
className,
color,
colors,
updateColor,
...props
}: {
colors: TColor[];
updateColor: (color: string) => void;
color?: string;
} & React.ComponentProps<"div">) {
return (
{colors.map(({ isBrightColor, name, value }) => (
);
}
export const DEFAULT_COLORS = [
{
isBrightColor: false,
name: "black",
value: "#000000",
},
{
isBrightColor: false,
name: "dark grey 4",
value: "#434343",
},
{
isBrightColor: false,
name: "dark grey 3",
value: "#666666",
},
{
isBrightColor: false,
name: "dark grey 2",
value: "#999999",
},
{
isBrightColor: false,
name: "dark grey 1",
value: "#B7B7B7",
},
{
isBrightColor: false,
name: "grey",
value: "#CCCCCC",
},
{
isBrightColor: false,
name: "light grey 1",
value: "#D9D9D9",
},
{
isBrightColor: true,
name: "light grey 2",
value: "#EFEFEF",
},
{
isBrightColor: true,
name: "light grey 3",
value: "#F3F3F3",
},
{
isBrightColor: true,
name: "white",
value: "#FFFFFF",
},
{
isBrightColor: false,
name: "red berry",
value: "#980100",
},
{
isBrightColor: false,
name: "red",
value: "#FE0000",
},
{
isBrightColor: false,
name: "orange",
value: "#FE9900",
},
{
isBrightColor: true,
name: "yellow",
value: "#FEFF00",
},
{
isBrightColor: false,
name: "green",
value: "#00FF00",
},
{
isBrightColor: false,
name: "cyan",
value: "#00FFFF",
},
{
isBrightColor: false,
name: "cornflower blue",
value: "#4B85E8",
},
{
isBrightColor: false,
name: "blue",
value: "#1300FF",
},
{
isBrightColor: false,
name: "purple",
value: "#9900FF",
},
{
isBrightColor: false,
name: "magenta",
value: "#FF00FF",
},
{
isBrightColor: false,
name: "light red berry 3",
value: "#E6B8AF",
},
{
isBrightColor: false,
name: "light red 3",
value: "#F4CCCC",
},
{
isBrightColor: true,
name: "light orange 3",
value: "#FCE4CD",
},
{
isBrightColor: true,
name: "light yellow 3",
value: "#FFF2CC",
},
{
isBrightColor: true,
name: "light green 3",
value: "#D9EAD3",
},
{
isBrightColor: false,
name: "light cyan 3",
value: "#D0DFE3",
},
{
isBrightColor: false,
name: "light cornflower blue 3",
value: "#C9DAF8",
},
{
isBrightColor: true,
name: "light blue 3",
value: "#CFE1F3",
},
{
isBrightColor: true,
name: "light purple 3",
value: "#D9D2E9",
},
{
isBrightColor: true,
name: "light magenta 3",
value: "#EAD1DB",
},
{
isBrightColor: false,
name: "light red berry 2",
value: "#DC7E6B",
},
{
isBrightColor: false,
name: "light red 2",
value: "#EA9999",
},
{
isBrightColor: false,
name: "light orange 2",
value: "#F9CB9C",
},
{
isBrightColor: true,
name: "light yellow 2",
value: "#FFE598",
},
{
isBrightColor: false,
name: "light green 2",
value: "#B7D6A8",
},
{
isBrightColor: false,
name: "light cyan 2",
value: "#A1C4C9",
},
{
isBrightColor: false,
name: "light cornflower blue 2",
value: "#A4C2F4",
},
{
isBrightColor: false,
name: "light blue 2",
value: "#9FC5E8",
},
{
isBrightColor: false,
name: "light purple 2",
value: "#B5A7D5",
},
{
isBrightColor: false,
name: "light magenta 2",
value: "#D5A6BD",
},
{
isBrightColor: false,
name: "light red berry 1",
value: "#CC4125",
},
{
isBrightColor: false,
name: "light red 1",
value: "#E06666",
},
{
isBrightColor: false,
name: "light orange 1",
value: "#F6B26B",
},
{
isBrightColor: false,
name: "light yellow 1",
value: "#FFD966",
},
{
isBrightColor: false,
name: "light green 1",
value: "#93C47D",
},
{
isBrightColor: false,
name: "light cyan 1",
value: "#76A5AE",
},
{
isBrightColor: false,
name: "light cornflower blue 1",
value: "#6C9EEB",
},
{
isBrightColor: false,
name: "light blue 1",
value: "#6FA8DC",
},
{
isBrightColor: false,
name: "light purple 1",
value: "#8D7CC3",
},
{
isBrightColor: false,
name: "light magenta 1",
value: "#C27BA0",
},
{
isBrightColor: false,
name: "dark red berry 1",
value: "#A61B00",
},
{
isBrightColor: false,
name: "dark red 1",
value: "#CC0000",
},
{
isBrightColor: false,
name: "dark orange 1",
value: "#E59138",
},
{
isBrightColor: false,
name: "dark yellow 1",
value: "#F1C231",
},
{
isBrightColor: false,
name: "dark green 1",
value: "#6AA74F",
},
{
isBrightColor: false,
name: "dark cyan 1",
value: "#45818E",
},
{
isBrightColor: false,
name: "dark cornflower blue 1",
value: "#3B78D8",
},
{
isBrightColor: false,
name: "dark blue 1",
value: "#3E84C6",
},
{
isBrightColor: false,
name: "dark purple 1",
value: "#664EA6",
},
{
isBrightColor: false,
name: "dark magenta 1",
value: "#A64D78",
},
{
isBrightColor: false,
name: "dark red berry 2",
value: "#84200D",
},
{
isBrightColor: false,
name: "dark red 2",
value: "#990001",
},
{
isBrightColor: false,
name: "dark orange 2",
value: "#B45F05",
},
{
isBrightColor: false,
name: "dark yellow 2",
value: "#BF9002",
},
{
isBrightColor: false,
name: "dark green 2",
value: "#38761D",
},
{
isBrightColor: false,
name: "dark cyan 2",
value: "#124F5C",
},
{
isBrightColor: false,
name: "dark cornflower blue 2",
value: "#1155CB",
},
{
isBrightColor: false,
name: "dark blue 2",
value: "#0C5394",
},
{
isBrightColor: false,
name: "dark purple 2",
value: "#351C75",
},
{
isBrightColor: false,
name: "dark magenta 2",
value: "#741B47",
},
{
isBrightColor: false,
name: "dark red berry 3",
value: "#5B0F00",
},
{
isBrightColor: false,
name: "dark red 3",
value: "#660000",
},
{
isBrightColor: false,
name: "dark orange 3",
value: "#783F04",
},
{
isBrightColor: false,
name: "dark yellow 3",
value: "#7E6000",
},
{
isBrightColor: false,
name: "dark green 3",
value: "#274E12",
},
{
isBrightColor: false,
name: "dark cyan 3",
value: "#0D343D",
},
{
isBrightColor: false,
name: "dark cornflower blue 3",
value: "#1B4487",
},
{
isBrightColor: false,
name: "dark blue 3",
value: "#083763",
},
{
isBrightColor: false,
name: "dark purple 3",
value: "#1F124D",
},
{
isBrightColor: false,
name: "dark magenta 3",
value: "#4C1130",
},
];
const DEFAULT_CUSTOM_COLORS = [
{
isBrightColor: false,
name: "dark orange 3",
value: "#783F04",
},
{
isBrightColor: false,
name: "dark grey 3",
value: "#666666",
},
{
isBrightColor: false,
name: "dark grey 2",
value: "#999999",
},
{
isBrightColor: false,
name: "light cornflower blue 1",
value: "#6C9EEB",
},
{
isBrightColor: false,
name: "dark magenta 3",
value: "#4C1130",
},
];
================================================
FILE: app/src/components/ui/font-size-toolbar-button.tsx
================================================
// @ts-nocheck
"use client";
import * as React from "react";
import type { TElement } from "platejs";
import { toUnitLess } from "@platejs/basic-styles";
import { FontSizePlugin } from "@platejs/basic-styles/react";
import { Minus, Plus } from "lucide-react";
import { KEYS } from "platejs";
import { useEditorPlugin, useEditorSelector } from "platejs/react";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { cn } from "@/utils/cn";
import { ToolbarButton } from "./toolbar";
const DEFAULT_FONT_SIZE = "16";
const FONT_SIZE_MAP = {
h1: "36",
h2: "24",
h3: "20",
} as const;
const FONT_SIZES = ["8", "9", "10", "12", "14", "16", "18", "24", "30", "36", "48", "60", "72", "96"] as const;
export function FontSizeToolbarButton() {
const [inputValue, setInputValue] = React.useState(DEFAULT_FONT_SIZE);
const [isFocused, setIsFocused] = React.useState(false);
const { editor, tf } = useEditorPlugin(FontSizePlugin);
const cursorFontSize = useEditorSelector((editor) => {
const fontSize = editor.api.marks()?.[KEYS.fontSize];
if (fontSize) {
return toUnitLess(fontSize as string);
}
const [block] = editor.api.block() || [];
if (!block?.type) return DEFAULT_FONT_SIZE;
return block.type in FONT_SIZE_MAP ? FONT_SIZE_MAP[block.type as keyof typeof FONT_SIZE_MAP] : DEFAULT_FONT_SIZE;
}, []);
const handleInputChange = () => {
const newSize = toUnitLess(inputValue);
if (Number.parseInt(newSize) < 1 || Number.parseInt(newSize) > 100) {
editor.tf.focus();
return;
}
if (newSize !== toUnitLess(cursorFontSize)) {
tf.fontSize.addMark(`${newSize}px`);
}
editor.tf.focus();
};
const handleFontSizeChange = (delta: number) => {
const newSize = Number(displayValue) + delta;
tf.fontSize.addMark(`${newSize}px`);
editor.tf.focus();
};
const displayValue = isFocused ? inputValue : cursorFontSize;
return (
handleFontSizeChange(-1)}>
{
setIsFocused(false);
handleInputChange();
}}
onChange={(e) => setInputValue(e.target.value)}
onFocus={() => {
setIsFocused(true);
setInputValue(toUnitLess(cursorFontSize));
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
handleInputChange();
}
}}
data-plate-focus="true"
type="text"
/>
e.preventDefault()}>
{FONT_SIZES.map((size) => (
))}
handleFontSizeChange(1)}>
);
}
================================================
FILE: app/src/components/ui/heading-node-static.tsx
================================================
import * as React from "react";
import type { SlateElementProps } from "platejs";
import { type VariantProps, cva } from "class-variance-authority";
import { SlateElement } from "platejs";
const headingVariants = cva("relative mb-1", {
variants: {
variant: {
h1: "mt-[1.6em] pb-1 font-heading text-4xl font-bold",
h2: "mt-[1.4em] pb-px font-heading text-2xl font-semibold tracking-tight",
h3: "mt-[1em] pb-px font-heading text-xl font-semibold tracking-tight",
h4: "mt-[0.75em] font-heading text-lg font-semibold tracking-tight",
h5: "mt-[0.75em] text-lg font-semibold tracking-tight",
h6: "mt-[0.75em] text-base font-semibold tracking-tight",
},
},
});
export function HeadingElementStatic({
variant = "h1",
...props
}: SlateElementProps & VariantProps) {
return (
{props.children}
);
}
export function H1ElementStatic(props: SlateElementProps) {
return ) {
return ) {
return ) {
return ) {
return ) {
return ) {
return (
{props.children}
);
}
export function H1Element(props: PlateElementProps) {
return
{props.children}
);
}
================================================
FILE: app/src/components/ui/highlight-node.tsx
================================================
// @ts-nocheck
"use client";
import * as React from "react";
import type { PlateLeafProps } from "platejs/react";
import { PlateLeaf } from "platejs/react";
export function HighlightLeaf(props: PlateLeafProps) {
return (
{props.children}
);
}
================================================
FILE: app/src/components/ui/history-toolbar-button.tsx
================================================
// @ts-nocheck
"use client";
import * as React from "react";
import { Redo2Icon, Undo2Icon } from "lucide-react";
import { useEditorRef, useEditorSelector } from "platejs/react";
import { ToolbarButton } from "./toolbar";
export function RedoToolbarButton(props: React.ComponentProps) {
const editor = useEditorRef();
const disabled = useEditorSelector((editor) => editor.history.redos.length === 0, []);
return (
editor.redo()}
onMouseDown={(e) => e.preventDefault()}
tooltip="Redo"
>
);
}
export function UndoToolbarButton(props: React.ComponentProps) {
const editor = useEditorRef();
const disabled = useEditorSelector((editor) => editor.history.undos.length === 0, []);
return (
editor.undo()}
onMouseDown={(e) => e.preventDefault()}
tooltip="Undo"
>
);
}
================================================
FILE: app/src/components/ui/hr-node-static.tsx
================================================
// @ts-nocheck
import * as React from "react";
import type { SlateElementProps } from "platejs";
import { SlateElement } from "platejs";
import { cn } from "@/utils/cn";
export function HrElementStatic(props: SlateElementProps) {
return (
{props.children}
);
}
================================================
FILE: app/src/components/ui/hr-node.tsx
================================================
// @ts-nocheck
"use client";
import * as React from "react";
import type { PlateElementProps } from "platejs/react";
import { PlateElement, useFocused, useReadOnly, useSelected } from "platejs/react";
import { cn } from "@/utils/cn";
export function HrElement(props: PlateElementProps) {
const readOnly = useReadOnly();
const selected = useSelected();
const focused = useFocused();
return (
{props.children}
);
}
================================================
FILE: app/src/components/ui/import-toolbar-button.tsx
================================================
"use client";
import * as React from "react";
import type { DropdownMenuProps } from "@radix-ui/react-dropdown-menu";
import { MarkdownPlugin } from "@platejs/markdown";
import { ArrowUpToLineIcon } from "lucide-react";
import { getEditorDOMFromHtmlString } from "platejs";
import { useEditorRef } from "platejs/react";
import { useFilePicker } from "use-file-picker";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { ToolbarButton } from "./toolbar";
type ImportType = "html" | "markdown";
export function ImportToolbarButton(props: DropdownMenuProps) {
const editor = useEditorRef();
const [open, setOpen] = React.useState(false);
const getFileNodes = (text: string, type: ImportType) => {
if (type === "html") {
const editorNode = getEditorDOMFromHtmlString(text);
const nodes = editor.api.html.deserialize({
element: editorNode,
});
return nodes;
}
if (type === "markdown") {
return editor.getApi(MarkdownPlugin).markdown.deserialize(text);
}
return [];
};
const { openFilePicker: openMdFilePicker } = useFilePicker({
accept: [".md", ".mdx"],
multiple: false,
onFilesSelected: async ({ plainFiles }) => {
const text = await plainFiles[0].text();
const nodes = getFileNodes(text, "markdown");
editor.tf.insertNodes(nodes);
},
});
const { openFilePicker: openHtmlFilePicker } = useFilePicker({
accept: ["text/html"],
multiple: false,
onFilesSelected: async ({ plainFiles }) => {
const text = await plainFiles[0].text();
const nodes = getFileNodes(text, "html");
editor.tf.insertNodes(nodes);
},
});
return (
{
openHtmlFilePicker();
}}
>
Import from HTML
{
openMdFilePicker();
}}
>
Import from Markdown
);
}
================================================
FILE: app/src/components/ui/indent-toolbar-button.tsx
================================================
"use client";
import * as React from "react";
import { useIndentButton, useOutdentButton } from "@platejs/indent/react";
import { IndentIcon, OutdentIcon } from "lucide-react";
import { ToolbarButton } from "./toolbar";
export function IndentToolbarButton(props: React.ComponentProps) {
const { props: buttonProps } = useIndentButton();
return (
);
}
export function OutdentToolbarButton(props: React.ComponentProps) {
const { props: buttonProps } = useOutdentButton();
return (
);
}
================================================
FILE: app/src/components/ui/inline-combobox.tsx
================================================
// @ts-nocheck
"use client";
import * as React from "react";
import type { Point, TElement } from "platejs";
import {
type ComboboxItemProps,
Combobox,
ComboboxGroup,
ComboboxGroupLabel,
ComboboxItem,
ComboboxPopover,
ComboboxProvider,
ComboboxRow,
Portal,
useComboboxContext,
useComboboxStore,
} from "@ariakit/react";
import { filterWords } from "@platejs/combobox";
import { type UseComboboxInputResult, useComboboxInput, useHTMLInputCursorState } from "@platejs/combobox/react";
import { cva } from "class-variance-authority";
import { useComposedRef, useEditorRef } from "platejs/react";
import { cn } from "@/utils/cn";
type FilterFn = (
item: { value: string; group?: string; keywords?: string[]; label?: string },
search: string,
) => boolean;
interface InlineComboboxContextValue {
filter: FilterFn | false;
inputProps: UseComboboxInputResult["props"];
inputRef: React.RefObject;
removeInput: UseComboboxInputResult["removeInput"];
showTrigger: boolean;
trigger: string;
setHasEmpty: (hasEmpty: boolean) => void;
}
const InlineComboboxContext = React.createContext(
null as unknown as InlineComboboxContextValue,
);
const defaultFilter: FilterFn = ({ group, keywords = [], label, value }, search) => {
const uniqueTerms = new Set([value, ...keywords, group, label].filter(Boolean));
return Array.from(uniqueTerms).some((keyword) => filterWords(keyword!, search));
};
interface InlineComboboxProps {
children: React.ReactNode;
element: TElement;
trigger: string;
filter?: FilterFn | false;
hideWhenNoValue?: boolean;
showTrigger?: boolean;
value?: string;
setValue?: (value: string) => void;
}
const InlineCombobox = ({
children,
element,
filter = defaultFilter,
hideWhenNoValue = false,
setValue: setValueProp,
showTrigger = true,
trigger,
value: valueProp,
}: InlineComboboxProps) => {
const editor = useEditorRef();
const inputRef = React.useRef(null);
const cursorState = useHTMLInputCursorState(inputRef);
const [valueState, setValueState] = React.useState("");
const hasValueProp = valueProp !== undefined;
const value = hasValueProp ? valueProp : valueState;
const setValue = React.useCallback(
(newValue: string) => {
setValueProp?.(newValue);
if (!hasValueProp) {
setValueState(newValue);
}
},
[setValueProp, hasValueProp],
);
/**
* Track the point just before the input element so we know where to
* insertText if the combobox closes due to a selection change.
*/
const insertPoint = React.useRef(null);
React.useEffect(() => {
const path = editor.api.findPath(element);
if (!path) return;
const point = editor.api.before(path);
if (!point) return;
const pointRef = editor.api.pointRef(point);
insertPoint.current = pointRef.current;
return () => {
pointRef.unref();
};
}, [editor, element]);
const { props: inputProps, removeInput } = useComboboxInput({
cancelInputOnBlur: true,
cursorState,
ref: inputRef,
onCancelInput: (cause) => {
if (cause !== "backspace") {
editor.tf.insertText(trigger + value, {
at: insertPoint?.current ?? undefined,
});
}
if (cause === "arrowLeft" || cause === "arrowRight") {
editor.tf.move({
distance: 1,
reverse: cause === "arrowLeft",
});
}
},
});
const [hasEmpty, setHasEmpty] = React.useState(false);
const contextValue: InlineComboboxContextValue = React.useMemo(
() => ({
filter,
inputProps,
inputRef,
removeInput,
setHasEmpty,
showTrigger,
trigger,
}),
[trigger, showTrigger, filter, inputRef, inputProps, removeInput, setHasEmpty],
);
const store = useComboboxStore({
// open: ,
setValue: (newValue) => React.startTransition(() => setValue(newValue)),
});
const items = store.useState("items");
/**
* If there is no active ID and the list of items changes, select the first
* item.
*/
React.useEffect(() => {
if (!store.getState().activeId) {
store.setActiveId(store.first());
}
}, [items, store]);
return (
0 || hasEmpty) && (!hideWhenNoValue || value.length > 0)} store={store}>
{children}
);
};
const InlineComboboxInput = React.forwardRef>(
({ className, ...props }, propRef) => {
const { inputProps, inputRef: contextRef, showTrigger, trigger } = React.useContext(InlineComboboxContext);
const store = useComboboxContext()!;
const value = store.useState("value");
const ref = useComposedRef(propRef, contextRef);
/**
* To create an auto-resizing input, we render a visually hidden span
* containing the input value and position the input element on top of it.
* This works well for all cases except when input exceeds the width of the
* container.
*/
return (
<>
{showTrigger && trigger}
);
};
const comboboxItemVariants = cva(
"relative mx-1 flex h-[28px] items-center rounded-sm px-2 text-sm text-foreground outline-none select-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
{
defaultVariants: {
interactive: true,
},
variants: {
interactive: {
false: "",
true: "cursor-pointer transition-colors hover:bg-accent hover:text-accent-foreground data-[active-item=true]:bg-accent data-[active-item=true]:text-accent-foreground",
},
},
},
);
const InlineComboboxItem = ({
className,
focusEditor = true,
group,
keywords,
label,
onClick,
...props
}: {
focusEditor?: boolean;
group?: string;
keywords?: string[];
label?: string;
} & ComboboxItemProps &
Required>) => {
const { value } = props;
const { filter, removeInput } = React.useContext(InlineComboboxContext);
const store = useComboboxContext()!;
// Optimization: Do not subscribe to value if filter is false
const search = filter && store.useState("value");
const visible = React.useMemo(
() => !filter || filter({ group, keywords, label, value }, search as string),
[filter, group, keywords, label, value, search],
);
if (!visible) return null;
return (
{
removeInput(focusEditor);
onClick?.(event);
}}
{...props}
/>
);
};
const InlineComboboxEmpty = ({ children, className }: React.HTMLAttributes) => {
const { setHasEmpty } = React.useContext(InlineComboboxContext);
const store = useComboboxContext()!;
const items = store.useState("items");
React.useEffect(() => {
setHasEmpty(true);
return () => {
setHasEmpty(false);
};
}, [setHasEmpty]);
if (items.length > 0) return null;
return ) {
return (
) {
return (
{groups.map(({ group, items: nestedItems }) => (
{nestedItems.map(({ icon, label, value, onSelect }) => (
{
onSelect(editor, value);
editor.tf.focus();
}}
>
{icon}
{label}
))}
))}
);
}
================================================
FILE: app/src/components/ui/kbd-node-static.tsx
================================================
// @ts-nocheck
import * as React from "react";
import type { SlateLeafProps } from "platejs";
import { SlateLeaf } from "platejs";
export function KbdLeafStatic(props: SlateLeafProps) {
return (
{props.children}
);
}
================================================
FILE: app/src/components/ui/kbd-node.tsx
================================================
// @ts-nocheck
"use client";
import * as React from "react";
import type { PlateLeafProps } from "platejs/react";
import { PlateLeaf } from "platejs/react";
export function KbdLeaf(props: PlateLeafProps) {
return (
{props.children}
);
}
================================================
FILE: app/src/components/ui/key-bind.tsx
================================================
import { Button } from "@/components/ui/button";
import { formatEmacsKey, parseEmacsKey } from "@/utils/emacs";
import { isLinux, isMac, isWindows } from "@/utils/platform";
import { Check, Delete } from "lucide-react";
import { useCallback, useState } from "react";
import { useTranslation } from "react-i18next";
/**
* 绑定快捷键的组件
* 非受控！！
*/
export default function KeyBind({
defaultValue = "",
onChange = () => {},
}: {
defaultValue?: string;
onChange?: (value: string) => void;
}) {
const [choosing, setChoosing] = useState(false);
const [value, setValue] = useState(defaultValue);
const { t } = useTranslation("keyBinds");
const handleKeyDown = useCallback((event: KeyboardEvent) => {
event.preventDefault();
if (["Control", "Alt", "Shift", "Meta"].includes(event.key)) return;
setValue((prev) => prev + " " + formatEmacsKey(event));
}, []);
const handleMouseDown = useCallback((event: MouseEvent) => {
event.preventDefault();
event.stopPropagation();
if (event.button !== 0) {
setValue((prev) => prev + " " + formatEmacsKey(event));
}
}, []);
const handleMouseUp = useCallback((event: MouseEvent) => {
event.preventDefault();
event.stopPropagation();
}, []);
const handleWheel = useCallback((event: WheelEvent) => {
event.preventDefault();
event.stopPropagation();
setValue((prev) => prev + " " + formatEmacsKey(event));
}, []);
const startInput = useCallback(() => {
document.addEventListener("keydown", handleKeyDown);
document.addEventListener("mousedown", handleMouseDown);
document.addEventListener("mouseup", handleMouseUp);
document.addEventListener("wheel", handleWheel);
setChoosing(true);
setValue("");
}, [handleKeyDown, handleMouseDown, handleMouseUp, handleWheel]);
const endInput = useCallback(() => {
document.removeEventListener("keydown", handleKeyDown);
document.removeEventListener("mousedown", handleMouseDown);
document.removeEventListener("mouseup", handleMouseUp);
document.removeEventListener("wheel", handleWheel);
setChoosing(false);
onChange(value.trim());
}, [handleKeyDown, handleMouseDown, handleMouseUp, handleWheel, value, onChange]);
return (
<>
{choosing && (
<>
)}
);
}
export function RenderKey({ data }: { data: ReturnType[number] }) {
let keyShow = data.key;
if (data.key === "arrowup") {
keyShow = "↑";
} else if (data.key === "arrowdown") {
keyShow = "↓";
} else if (data.key === "arrowleft") {
keyShow = "←";
} else if (data.key === "arrowright") {
keyShow = "→";
}
return (
{
editor.getTransforms(LineHeightPlugin).lineHeight.setNodes(Number(newValue));
editor.tf.focus();
}}
>
{values.map((value) => (
{value}
))}
);
}
================================================
FILE: app/src/components/ui/link-node-static.tsx
================================================
// @ts-nocheck
import * as React from "react";
import type { SlateElementProps, TLinkElement } from "platejs";
import { getLinkAttributes } from "@platejs/link";
import { SlateElement } from "platejs";
export function LinkElementStatic(props: SlateElementProps) {
return (
{props.children}
);
}
================================================
FILE: app/src/components/ui/link-node.tsx
================================================
// @ts-nocheck
"use client";
import * as React from "react";
import type { TLinkElement } from "platejs";
import type { PlateElementProps } from "platejs/react";
import { getLinkAttributes } from "@platejs/link";
import { PlateElement } from "platejs/react";
export function LinkElement(props: PlateElementProps) {
return (
{
e.stopPropagation();
},
}}
>
{props.children}
);
}
================================================
FILE: app/src/components/ui/link-toolbar-button.tsx
================================================
"use client";
import * as React from "react";
import { useLinkToolbarButton, useLinkToolbarButtonState } from "@platejs/link/react";
import { Link } from "lucide-react";
import { ToolbarButton } from "./toolbar";
export function LinkToolbarButton(props: React.ComponentProps) {
const state = useLinkToolbarButtonState();
const { props: buttonProps } = useLinkToolbarButton(state);
return (
);
}
================================================
FILE: app/src/components/ui/link-toolbar.tsx
================================================
// @ts-nocheck
"use client";
import * as React from "react";
import type { TLinkElement } from "platejs";
import { type UseVirtualFloatingOptions, flip, offset } from "@platejs/floating";
import { getLinkAttributes } from "@platejs/link";
import {
type LinkFloatingToolbarState,
FloatingLinkUrlInput,
useFloatingLinkEdit,
useFloatingLinkEditState,
useFloatingLinkInsert,
useFloatingLinkInsertState,
} from "@platejs/link/react";
import { cva } from "class-variance-authority";
import { ExternalLink, Link, Text, Unlink } from "lucide-react";
import { KEYS } from "platejs";
import { useEditorRef, useEditorSelection, useFormInputProps, usePluginOption } from "platejs/react";
import { buttonVariants } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
const popoverVariants = cva(
"z-50 w-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-hidden",
);
const inputVariants = cva(
"flex h-[28px] w-full rounded-md border-none bg-transparent px-1.5 py-1 text-base placeholder:text-muted-foreground focus-visible:ring-transparent focus-visible:outline-none md:text-sm",
);
export function LinkFloatingToolbar({ state }: { state?: LinkFloatingToolbarState }) {
const activeCommentId = usePluginOption({ key: KEYS.comment }, "activeId");
const activeSuggestionId = usePluginOption({ key: KEYS.suggestion }, "activeId");
const floatingOptions: UseVirtualFloatingOptions = React.useMemo(() => {
return {
middleware: [
offset(8),
flip({
fallbackPlacements: ["bottom-end", "top-start", "top-end"],
padding: 12,
}),
],
placement: activeSuggestionId || activeCommentId ? "top-start" : "bottom-start",
};
}, [activeCommentId, activeSuggestionId]);
const insertState = useFloatingLinkInsertState({
...state,
floatingOptions: {
...floatingOptions,
...state?.floatingOptions,
},
});
const { hidden, props: insertProps, ref: insertRef, textInputProps } = useFloatingLinkInsert(insertState);
const editState = useFloatingLinkEditState({
...state,
floatingOptions: {
...floatingOptions,
...state?.floatingOptions,
},
});
const { editButtonProps, props: editProps, ref: editRef, unlinkButtonProps } = useFloatingLinkEdit(editState);
const inputProps = useFormInputProps({
preventDefaultOnEnterKeydown: true,
});
if (hidden) return null;
const input = (
({
match: { type: editor.getType(KEYS.link) },
});
if (!entry) {
return {};
}
const [element] = entry;
return getLinkAttributes(editor, element);
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[editor, selection],
);
return (
{
e.stopPropagation();
}}
aria-label="Open link in a new tab"
target="_blank"
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
if (attributes.href) {
open(attributes.href);
}
}}
>
{
toggleList(editor, {
listStyleType: ListStyleType.Disc,
});
}}
data-state={pressed ? "on" : "off"}
>
toggleList(editor, {
listStyleType: ListStyleType.Disc,
})
}
>
toggleList(editor, {
listStyleType: ListStyleType.Circle,
})
}
>
toggleList(editor, {
listStyleType: ListStyleType.Square,
})
}
>
);
}
export function NumberedListToolbarButton() {
const editor = useEditorRef();
const [open, setOpen] = React.useState(false);
const pressed = useEditorSelector(
(editor) =>
someList(editor, [
ListStyleType.Decimal,
ListStyleType.LowerAlpha,
ListStyleType.UpperAlpha,
ListStyleType.LowerRoman,
ListStyleType.UpperRoman,
]),
[],
);
return (
toggleList(editor, {
listStyleType: ListStyleType.Decimal,
})
}
data-state={pressed ? "on" : "off"}
>
toggleList(editor, {
listStyleType: ListStyleType.Decimal,
})
}
>
Decimal (1, 2, 3)
toggleList(editor, {
listStyleType: ListStyleType.LowerAlpha,
})
}
>
Lower Alpha (a, b, c)
toggleList(editor, {
listStyleType: ListStyleType.UpperAlpha,
})
}
>
Upper Alpha (A, B, C)
toggleList(editor, {
listStyleType: ListStyleType.LowerRoman,
})
}
>
Lower Roman (i, ii, iii)
toggleList(editor, {
listStyleType: ListStyleType.UpperRoman,
})
}
>
Upper Roman (I, II, III)
);
}
export function TodoListToolbarButton(props: React.ComponentProps) {
const state = useIndentTodoToolBarButtonState({ nodeType: "todo" });
const { props: buttonProps } = useIndentTodoToolBarButton(state);
return (
);
}
================================================
FILE: app/src/components/ui/mark-toolbar-button.tsx
================================================
"use client";
import * as React from "react";
import { useMarkToolbarButton, useMarkToolbarButtonState } from "platejs/react";
import { ToolbarButton } from "./toolbar";
export function MarkToolbarButton({
clear,
nodeType,
...props
}: React.ComponentProps & {
nodeType: string;
clear?: string[] | string;
}) {
const state = useMarkToolbarButtonState({ clear, nodeType });
const { props: buttonProps } = useMarkToolbarButton(state);
return ) {
return (
{props.children}
);
}
================================================
FILE: app/src/components/ui/media-audio-node.tsx
================================================
// @ts-nocheck
"use client";
import * as React from "react";
import type { TAudioElement } from "platejs";
import type { PlateElementProps } from "platejs/react";
import { useMediaState } from "@platejs/media/react";
import { ResizableProvider } from "@platejs/resizable";
import { PlateElement, withHOC } from "platejs/react";
import { Caption, CaptionTextarea } from "./caption";
export const AudioElement = withHOC(ResizableProvider, function AudioElement(props: PlateElementProps) {
const { align = "center", readOnly, unsafeUrl } = useMediaState();
return (
{props.children}
);
});
================================================
FILE: app/src/components/ui/media-file-node-static.tsx
================================================
// @ts-nocheck
import * as React from "react";
import type { SlateElementProps, TFileElement } from "platejs";
import { FileUp } from "lucide-react";
import { SlateElement } from "platejs";
export function FileElementStatic(props: SlateElementProps) {
const { name, url } = props.element;
return (
);
}
================================================
FILE: app/src/components/ui/media-file-node.tsx
================================================
// @ts-nocheck
"use client";
import * as React from "react";
import type { TFileElement } from "platejs";
import type { PlateElementProps } from "platejs/react";
import { useMediaState } from "@platejs/media/react";
import { ResizableProvider } from "@platejs/resizable";
import { FileUp } from "lucide-react";
import { PlateElement, useReadOnly, withHOC } from "platejs/react";
import { Caption, CaptionTextarea } from "./caption";
export const FileElement = withHOC(ResizableProvider, function FileElement(props: PlateElementProps) {
const readOnly = useReadOnly();
const { name, unsafeUrl } = useMediaState();
return (
{props.children}
);
});
================================================
FILE: app/src/components/ui/media-image-node-static.tsx
================================================
// @ts-nocheck
import * as React from "react";
import type { SlateElementProps, TCaptionProps, TImageElement, TResizableProps } from "platejs";
import { NodeApi, SlateElement } from "platejs";
import { cn } from "@/utils/cn";
export function ImageElementStatic(props: SlateElementProps) {
const { align = "center", caption, url, width } = props.element;
return (
{caption && (
{NodeApi.string(caption[0])}
)}
{props.children}
);
}
================================================
FILE: app/src/components/ui/media-image-node.tsx
================================================
// @ts-nocheck
"use client";
import * as React from "react";
import type { TImageElement } from "platejs";
import type { PlateElementProps } from "platejs/react";
import { useDraggable } from "@platejs/dnd";
import { Image, ImagePlugin, useMediaState } from "@platejs/media/react";
import { ResizableProvider, useResizableValue } from "@platejs/resizable";
import { PlateElement, withHOC } from "platejs/react";
import { cn } from "@/utils/cn";
import { Caption, CaptionTextarea } from "./caption";
import { MediaToolbar } from "./media-toolbar";
import { mediaResizeHandleVariants, Resizable, ResizeHandle } from "./resize-handle";
export const ImageElement = withHOC(ResizableProvider, function ImageElement(props: PlateElementProps) {
const { align = "center", focused, readOnly, selected } = useMediaState();
const width = useResizableValue("width");
const { isDragging, handleRef } = useDraggable({
element: props.element,
});
return (
{
e.preventDefault();
}}
placeholder="Write a caption..."
/>
{props.children}
);
});
================================================
FILE: app/src/components/ui/media-toolbar-button.tsx
================================================
// @ts-nocheck
"use client";
import * as React from "react";
import type { DropdownMenuProps } from "@radix-ui/react-dropdown-menu";
import { PlaceholderPlugin } from "@platejs/media/react";
import { AudioLinesIcon, FileUpIcon, FilmIcon, ImageIcon, LinkIcon } from "lucide-react";
import { isUrl, KEYS } from "platejs";
import { useEditorRef } from "platejs/react";
import { toast } from "sonner";
import { useFilePicker } from "use-file-picker";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import { ToolbarSplitButton, ToolbarSplitButtonPrimary, ToolbarSplitButtonSecondary } from "./toolbar";
const MEDIA_CONFIG: Record<
string,
{
accept: string[];
icon: React.ReactNode;
title: string;
tooltip: string;
}
> = {
[KEYS.audio]: {
accept: ["audio/*"],
icon: {
openFilePicker();
}}
onKeyDown={(e) => {
if (e.key === "ArrowDown") {
e.preventDefault();
setOpen(true);
}
}}
pressed={open}
>
{currentConfig.icon}
e.stopPropagation()} align="start" alignOffset={-32}>
openFilePicker()}>
{currentConfig.icon}
Upload from computer
setDialogOpen(true)}>
{
setDialogOpen(value);
}}
>
);
}
function MediaUrlDialogContent({
currentConfig,
nodeType,
setOpen,
}: {
currentConfig: (typeof MEDIA_CONFIG)[string];
nodeType: string;
setOpen: (value: boolean) => void;
}) {
const editor = useEditorRef();
const [url, setUrl] = React.useState("");
const embedMedia = React.useCallback(() => {
if (!isUrl(url)) return toast.error("Invalid URL");
setOpen(false);
editor.tf.insertNodes({
children: [{ text: "" }],
name: nodeType === KEYS.file ? url.split("/").pop() : undefined,
type: nodeType,
url,
});
}, [url, editor, nodeType, setOpen]);
return (
<>
{currentConfig.title}
setUrl(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter") embedMedia();
}}
placeholder=""
type="url"
autoFocus
/>
Cancel
{
e.preventDefault();
embedMedia();
}}
>
Accept
);
}
================================================
FILE: app/src/components/ui/media-toolbar.tsx
================================================
// @ts-nocheck
"use client";
import * as React from "react";
import type { WithRequiredKey } from "platejs";
import {
FloatingMedia as FloatingMediaPrimitive,
FloatingMediaStore,
useFloatingMediaValue,
useImagePreviewValue,
} from "@platejs/media/react";
import { cva } from "class-variance-authority";
import { Link, Trash2Icon } from "lucide-react";
import {
useEditorRef,
useEditorSelector,
useElement,
useFocusedLast,
useReadOnly,
useRemoveNodeButton,
useSelected,
} from "platejs/react";
import { Button, buttonVariants } from "@/components/ui/button";
import { Popover, PopoverAnchor, PopoverContent } from "@/components/ui/popover";
import { Separator } from "@/components/ui/separator";
import { CaptionButton } from "./caption";
const inputVariants = cva(
"flex h-[28px] w-full rounded-md border-none bg-transparent px-1.5 py-1 text-base placeholder:text-muted-foreground focus-visible:ring-transparent focus-visible:outline-none md:text-sm",
);
export function MediaToolbar({ children, plugin }: { children: React.ReactNode; plugin: WithRequiredKey }) {
const editor = useEditorRef();
const readOnly = useReadOnly();
const selected = useSelected();
const isFocusedLast = useFocusedLast();
const selectionCollapsed = useEditorSelector((editor) => !editor.api.isExpanded(), []);
const isImagePreviewOpen = useImagePreviewValue("isOpen", editor.id);
const open = isFocusedLast && !readOnly && selected && selectionCollapsed && !isImagePreviewOpen;
const isEditing = useFloatingMediaValue("isEditing");
React.useEffect(() => {
if (!open && isEditing) {
FloatingMediaStore.set("isEditing", false);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [open]);
const element = useElement();
const { props: buttonProps } = useRemoveNodeButton({ element });
return (
{children}
e.preventDefault()}>
{isEditing ? (
Edit link
Caption
);
}
================================================
FILE: app/src/components/ui/media-video-node-static.tsx
================================================
// @ts-nocheck
import * as React from "react";
import type { SlateElementProps, TCaptionElement, TResizableProps, TVideoElement } from "platejs";
import { NodeApi, SlateElement } from "platejs";
export function VideoElementStatic(props: SlateElementProps) {
const { align = "center", caption, url, width } = props.element;
return (
{caption && {NodeApi.string(caption[0])} }
{props.children}
);
}
================================================
FILE: app/src/components/ui/media-video-node.tsx
================================================
// @ts-nocheck
"use client";
import * as React from "react";
import LiteYouTubeEmbed from "react-lite-youtube-embed";
import ReactPlayer from "react-player";
import type { TResizableProps, TVideoElement } from "platejs";
import type { PlateElementProps } from "platejs/react";
import { useDraggable } from "@platejs/dnd";
import { parseTwitterUrl, parseVideoUrl } from "@platejs/media";
import { useMediaState } from "@platejs/media/react";
import { ResizableProvider, useResizableValue } from "@platejs/resizable";
import { PlateElement, useEditorMounted, withHOC } from "platejs/react";
import { cn } from "@/utils/cn";
import { Caption, CaptionTextarea } from "./caption";
import { mediaResizeHandleVariants, Resizable, ResizeHandle } from "./resize-handle";
export const VideoElement = withHOC(
ResizableProvider,
function VideoElement(props: PlateElementProps) {
const {
align = "center",
embed,
isUpload,
isYoutube,
readOnly,
unsafeUrl,
} = useMediaState({
urlParsers: [parseTwitterUrl, parseVideoUrl],
});
const width = useResizableValue("width");
const isEditorMounted = useEditorMounted();
const isTweet = true;
const { isDragging, handleRef } = useDraggable({
element: props.element,
});
return (
_iframe]:absolute [&_>_iframe]:top-0 [&_>_iframe]:left-0 [&_>_iframe]:size-full",
"[&_>_.lty-playbtn]:z-1 [&_>_.lty-playbtn]:h-[46px] [&_>_.lty-playbtn]:w-[70px] [&_>_.lty-playbtn]:rounded-[14%] [&_>_.lty-playbtn]:bg-[#212121] [&_>_.lty-playbtn]:opacity-80 [&_>_.lty-playbtn]:[transition:all_0.2s_cubic-bezier(0,_0,_0.2,_1)]",
"[&:hover_>_.lty-playbtn]:bg-[red] [&:hover_>_.lty-playbtn]:opacity-100",
'[&_>_.lty-playbtn]:before:border-y-[11px] [&_>_.lty-playbtn]:before:border-r-0 [&_>_.lty-playbtn]:before:border-l-[19px] [&_>_.lty-playbtn]:before:border-[transparent_transparent_transparent_#fff] [&_>_.lty-playbtn]:before:content-[""]',
"[&_>_.lty-playbtn]:absolute [&_>_.lty-playbtn]:top-1/2 [&_>_.lty-playbtn]:left-1/2 [&_>_.lty-playbtn]:[transform:translate3d(-50%,-50%,0)]",
"[&_>_.lty-playbtn]:before:absolute [&_>_.lty-playbtn]:before:top-1/2 [&_>_.lty-playbtn]:before:left-1/2 [&_>_.lty-playbtn]:before:[transform:translate3d(-50%,-50%,0)]",
"[&.lyt-activated]:cursor-[unset]",
"[&.lyt-activated]:before:pointer-events-none [&.lyt-activated]:before:opacity-0",
"[&.lyt-activated_>_.lty-playbtn]:pointer-events-none [&.lyt-activated_>_.lty-playbtn]:opacity-0!",
)}
/>
)}
{isUpload && isEditorMounted && (
{props.children}
);
},
);
================================================
FILE: app/src/components/ui/mention-node-static.tsx
================================================
import * as React from "react";
import type { SlateElementProps, TMentionElement } from "platejs";
import { KEYS, SlateElement } from "platejs";
import { cn } from "@/utils/cn";
export function MentionElementStatic(
props: SlateElementProps & {
prefix?: string;
},
) {
const { prefix } = props;
const element = props.element;
return (
{props.children}
{prefix}
{element.value}
);
}
================================================
FILE: app/src/components/ui/mention-node.tsx
================================================
"use client";
import * as React from "react";
import type { TComboboxInputElement, TMentionElement } from "platejs";
import type { PlateElementProps } from "platejs/react";
import { getMentionOnSelectItem } from "@platejs/mention";
import { IS_APPLE, KEYS } from "platejs";
import { PlateElement, useFocused, useReadOnly, useSelected } from "platejs/react";
import { cn } from "@/utils/cn";
import { useMounted } from "@/hooks/use-mounted";
import {
InlineCombobox,
InlineComboboxContent,
InlineComboboxEmpty,
InlineComboboxGroup,
InlineComboboxInput,
InlineComboboxItem,
} from "./inline-combobox";
export function MentionElement(
props: PlateElementProps & {
prefix?: string;
},
) {
const element = props.element;
const selected = useSelected();
const focused = useFocused();
const mounted = useMounted();
const readOnly = useReadOnly();
return (
{mounted && IS_APPLE ? (
// Mac OS IME https://github.com/ianstormtaylor/slate/issues/3490
{props.children}
{props.prefix}
{element.value}
) : (
// Others like Android https://github.com/ianstormtaylor/slate/pull/5360
{props.prefix}
{element.value}
{props.children}
)}
);
}
const onSelectItem = getMentionOnSelectItem();
export function MentionInputElement(props: PlateElementProps) {
const { editor, element } = props;
const [search, setSearch] = React.useState("");
return (
No results
{MENTIONABLES.map((item) => (
onSelectItem(editor, item, search)}>
{item.text}
))}
{props.children}
);
}
const MENTIONABLES = [
{ key: "0", text: "Aayla Secura" },
{ key: "1", text: "Adi Gallia" },
{
key: "2",
text: "Admiral Dodd Rancit",
},
{
key: "3",
text: "Admiral Firmus Piett",
},
{
key: "4",
text: "Admiral Gial Ackbar",
},
{ key: "5", text: "Admiral Ozzel" },
{ key: "6", text: "Admiral Raddus" },
{
key: "7",
text: "Admiral Terrinald Screed",
},
{ key: "8", text: "Admiral Trench" },
{
key: "9",
text: "Admiral U.O. Statura",
},
{ key: "10", text: "Agen Kolar" },
{ key: "11", text: "Agent Kallus" },
{
key: "12",
text: "Aiolin and Morit Astarte",
},
{ key: "13", text: "Aks Moe" },
{ key: "14", text: "Almec" },
{ key: "15", text: "Alton Kastle" },
{ key: "16", text: "Amee" },
{ key: "17", text: "AP-5" },
{ key: "18", text: "Armitage Hux" },
{ key: "19", text: "Artoo" },
{ key: "20", text: "Arvel Crynyd" },
{ key: "21", text: "Asajj Ventress" },
{ key: "22", text: "Aurra Sing" },
{ key: "23", text: "AZI-3" },
{ key: "24", text: "Bala-Tik" },
{ key: "25", text: "Barada" },
{ key: "26", text: "Bargwill Tomder" },
{ key: "27", text: "Baron Papanoida" },
{ key: "28", text: "Barriss Offee" },
{ key: "29", text: "Baze Malbus" },
{ key: "30", text: "Bazine Netal" },
{ key: "31", text: "BB-8" },
{ key: "32", text: "BB-9E" },
{ key: "33", text: "Ben Quadinaros" },
{ key: "34", text: "Berch Teller" },
{ key: "35", text: "Beru Lars" },
{ key: "36", text: "Bib Fortuna" },
{
key: "37",
text: "Biggs Darklighter",
},
{ key: "38", text: "Black Krrsantan" },
{ key: "39", text: "Bo-Katan Kryze" },
{ key: "40", text: "Boba Fett" },
{ key: "41", text: "Bobbajo" },
{ key: "42", text: "Bodhi Rook" },
{ key: "43", text: "Borvo the Hutt" },
{ key: "44", text: "Boss Nass" },
{ key: "45", text: "Bossk" },
{
key: "46",
text: "Breha Antilles-Organa",
},
{ key: "47", text: "Bren Derlin" },
{ key: "48", text: "Brendol Hux" },
{ key: "49", text: "BT-1" },
];
================================================
FILE: app/src/components/ui/menubar.tsx
================================================
import * as MenubarPrimitive from "@radix-ui/react-menubar";
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
import * as React from "react";
import { cn } from "@/utils/cn";
import { SoundService } from "@/core/service/feedbackService/SoundService";
function Menubar({ className, ...props }: React.ComponentProps) {
return (
) {
return ) {
return ) {
return ) {
return ) {
return (
{
SoundService.play.mouseEnterButton();
}}
onMouseDown={() => {
SoundService.play.mouseClickButton();
}}
{...props}
/>
);
}
function MenubarContent({
className,
align = "start",
alignOffset = -4,
sideOffset = 8,
...props
}: React.ComponentProps) {
return (
);
}
function MenubarItem({
className,
inset,
variant = "default",
...props
}: React.ComponentProps & {
inset?: boolean;
variant?: "default" | "destructive";
}) {
return (
{
SoundService.play.mouseEnterButton();
}}
onMouseDown={() => {
SoundService.play.mouseClickButton();
}}
{...props}
/>
);
}
function MenubarCheckboxItem({
className,
children,
checked,
...props
}: React.ComponentProps) {
return (
{children}
);
}
function MenubarRadioItem({ className, children, ...props }: React.ComponentProps) {
return (
{children}
);
}
function MenubarLabel({
className,
inset,
...props
}: React.ComponentProps & {
inset?: boolean;
}) {
return (
) {
return (
) {
return & {
inset?: boolean;
}) {
return (
{
SoundService.play.mouseEnterButton();
}}
onMouseDown={() => {
SoundService.play.mouseClickButton();
}}
{...props}
>
{children}
);
}
function MenubarSubContent({ className, ...props }: React.ComponentProps) {
return (
= {
editing: {
icon:
{item[value].icon}
{item[value].label}
{
if (newValue === "viewing") {
setReadOnly(true);
return;
} else {
setReadOnly(false);
}
if (newValue === "suggestion") {
editor.setOption(SuggestionPlugin, "isSuggesting", true);
return;
} else {
editor.setOption(SuggestionPlugin, "isSuggesting", false);
}
if (newValue === "editing") {
editor.tf.focus();
return;
}
}}
>
{/*
*/}
);
}
function Indicator() {
return (
);
}
================================================
FILE: app/src/components/ui/more-toolbar-button.tsx
================================================
"use client";
import * as React from "react";
import type { DropdownMenuProps } from "@radix-ui/react-dropdown-menu";
import { KeyboardIcon, MoreHorizontalIcon, SubscriptIcon, SuperscriptIcon } from "lucide-react";
import { KEYS } from "platejs";
import { useEditorRef } from "platejs/react";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { ToolbarButton } from "./toolbar";
export function MoreToolbarButton(props: DropdownMenuProps) {
const editor = useEditorRef();
const [open, setOpen] = React.useState(false);
return (
{
editor.tf.toggleMark(KEYS.kbd);
editor.tf.collapse({ edge: "end" });
editor.tf.focus();
}}
>
{
editor.tf.toggleMark(KEYS.sup, {
remove: KEYS.sub,
});
editor.tf.focus();
}}
>
{
editor.tf.toggleMark(KEYS.sub, {
remove: KEYS.sup,
});
editor.tf.focus();
}}
>
);
}
================================================
FILE: app/src/components/ui/paragraph-node-static.tsx
================================================
// @ts-nocheck
import * as React from "react";
import type { SlateElementProps } from "platejs";
import { SlateElement } from "platejs";
import { cn } from "@/utils/cn";
export function ParagraphElementStatic(props: SlateElementProps) {
return (
{props.children}
);
}
================================================
FILE: app/src/components/ui/paragraph-node.tsx
================================================
// @ts-nocheck
"use client";
import * as React from "react";
import type { PlateElementProps } from "platejs/react";
import { PlateElement } from "platejs/react";
import { cn } from "@/utils/cn";
export function ParagraphElement(props: PlateElementProps) {
return (
{props.children}
);
}
================================================
FILE: app/src/components/ui/popover.tsx
================================================
"use client";
import * as PopoverPrimitive from "@radix-ui/react-popover";
import * as React from "react";
import { cn } from "@/utils/cn";
import { Button } from "./button";
function Popover({ ...props }: React.ComponentProps) {
return ) {
return ) {
return (
);
}
function PopoverAnchor({ ...props }: React.ComponentProps) {
return
{children}
);
};
export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
================================================
FILE: app/src/components/ui/progress.tsx
================================================
import * as React from "react";
import * as ProgressPrimitive from "@radix-ui/react-progress";
import { cn } from "@/utils/cn";
function Progress({ className, value, ...props }: React.ComponentProps) {
return (
);
}
export { Progress };
================================================
FILE: app/src/components/ui/resize-handle.tsx
================================================
"use client";
import * as React from "react";
import type { VariantProps } from "class-variance-authority";
import {
type ResizeHandle as ResizeHandlePrimitive,
Resizable as ResizablePrimitive,
useResizeHandle,
useResizeHandleState,
} from "@platejs/resizable";
import { cva } from "class-variance-authority";
import { cn } from "@/utils/cn";
export const mediaResizeHandleVariants = cva(
cn(
"top-0 flex w-6 flex-col justify-center select-none",
"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",
},
},
});
export function ResizeHandle({
className,
options,
...props
}: React.ComponentProps & VariantProps) {
const state = useResizeHandleState(options ?? {});
const resizeHandle = useResizeHandle(state);
if (state.readOnly) return null;
return (
);
}
const resizableVariants = cva("", {
variants: {
align: {
center: "mx-auto",
left: "mr-auto",
right: "ml-auto",
},
},
});
export function Resizable({
align,
className,
...props
}: React.ComponentProps & VariantProps) {
return ) {
return ) {
return ) {
return & {
size?: "sm" | "default";
}) {
return (
{children}
);
}
function SelectContent({
className,
children,
position = "popper",
...props
}: React.ComponentProps) {
return (
{children}
);
}
function SelectLabel({ className, ...props }: React.ComponentProps) {
return (
) {
return (
{children}
);
}
function SelectSeparator({ className, ...props }: React.ComponentProps) {
return (
) {
return (
);
}
function SelectScrollDownButton({
className,
...props
}: React.ComponentProps) {
return (
);
}
export {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectScrollDownButton,
SelectScrollUpButton,
SelectSeparator,
SelectTrigger,
SelectValue,
};
================================================
FILE: app/src/components/ui/separator.tsx
================================================
"use client";
import * as React from "react";
import * as SeparatorPrimitive from "@radix-ui/react-separator";
import { cn } from "@/utils/cn";
function Separator({
className,
orientation = "horizontal",
decorative = true,
...props
}: React.ComponentProps) {
return (
) {
return ) {
return ) {
return ) {
return ) {
return (
& {
side?: "top" | "right" | "bottom" | "left";
}) {
return (
{children}
);
}
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
return ;
}
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
return ;
}
function SheetTitle({ className, ...props }: React.ComponentProps) {
return (
) {
return (
) {
return (
);
}
function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
);
}
function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
);
}
function SidebarSeparator({ className, ...props }: React.ComponentProps) {
return (
svg]:size-4 [&>svg]:shrink-0",
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
className,
)}
{...props}
/>
);
}
function SidebarGroupAction({
className,
asChild = false,
...props
}: React.ComponentProps<"button"> & { asChild?: boolean }) {
const Comp = asChild ? Slot : "button";
return (
svg]:size-4 [&>svg]:shrink-0",
// Increases the hit area of the button on mobile.
"after:absolute after:-inset-2 md:after:hidden",
"group-data-[collapsible=icon]:hidden",
className,
)}
{...props}
/>
);
}
function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">) {
return (
);
}
function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
return (
;
} & VariantProps) {
const Comp = asChild ? Slot : "button";
const button = (
{button}
);
}
function SidebarMenuAction({
className,
asChild = false,
showOnHover = false,
...props
}: React.ComponentProps<"button"> & {
asChild?: boolean;
showOnHover?: boolean;
}) {
const Comp = asChild ? Slot : "button";
return (
svg]:size-4 [&>svg]:shrink-0",
// Increases the hit area of the button on mobile.
"after:absolute after:-inset-2 md:after:hidden",
"peer-data-[size=sm]/menu-button:top-1",
"peer-data-[size=default]/menu-button:top-1.5",
"peer-data-[size=lg]/menu-button:top-2.5",
"group-data-[collapsible=icon]:hidden",
showOnHover &&
"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
className,
)}
{...props}
/>
);
}
function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">) {
return (
);
}
function SidebarMenuSkeleton({
className,
showIcon = false,
...props
}: React.ComponentProps<"div"> & {
showIcon?: boolean;
}) {
// Random width between 50 to 90%.
const width = React.useMemo(() => {
return `${Math.floor(Math.random() * 40) + 50}%`;
}, []);
return (
svg]:text-sidebar-accent-foreground outline-hidden flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
size === "sm" && "text-xs",
size === "md" && "text-sm",
"group-data-[collapsible=icon]:hidden",
className,
)}
{...props}
/>
);
}
export {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarGroup,
SidebarGroupAction,
SidebarGroupContent,
SidebarGroupLabel,
SidebarHeader,
SidebarInput,
SidebarInset,
SidebarMenu,
SidebarMenuAction,
SidebarMenuBadge,
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSkeleton,
SidebarMenuSub,
SidebarMenuSubButton,
SidebarMenuSubItem,
SidebarSeparator,
};
================================================
FILE: app/src/components/ui/skeleton.tsx
================================================
import { cn } from "@/utils/cn";
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
return ;
}
export { Skeleton };
================================================
FILE: app/src/components/ui/slider.tsx
================================================
import * as React from "react";
import * as SliderPrimitive from "@radix-ui/react-slider";
import { cn } from "@/utils/cn";
function Slider({
className,
defaultValue,
value,
min = 0,
max = 100,
...props
}: React.ComponentProps) {
const _values = React.useMemo(
() => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]),
[value, defaultValue, min, max],
);
return (
{Array.from({ length: _values.length }, (_, index) => (
);
}
export { Slider };
================================================
FILE: app/src/components/ui/sonner.tsx
================================================
import { useTheme } from "next-themes";
import { Toaster as Sonner, ToasterProps } from "sonner";
const Toaster = ({ ...props }: ToasterProps) => {
const { theme = "system" } = useTheme();
return (
) {
const { editor, leaf } = props;
const dataList = editor.getApi(BaseSuggestionPlugin).suggestion.dataList(leaf);
const hasRemove = dataList.some((data) => data.type === "remove");
const diffOperation = { type: hasRemove ? "delete" : "insert" } as const;
const Component = ({ delete: "del", insert: "ins", update: "span" } as const)[diffOperation.type];
return (
{props.children}
);
}
================================================
FILE: app/src/components/ui/suggestion-node.tsx
================================================
"use client";
import * as React from "react";
import type { TSuggestionData, TSuggestionText } from "platejs";
import type { PlateLeafProps, RenderNodeWrapper } from "platejs/react";
import { CornerDownLeftIcon } from "lucide-react";
import { PlateLeaf, useEditorPlugin, usePluginOption } from "platejs/react";
import { cn } from "@/utils/cn";
import { type SuggestionConfig, suggestionPlugin } from "@/components/editor/plugins/suggestion-kit";
export function SuggestionLeaf(props: PlateLeafProps) {
const { api, setOption } = useEditorPlugin(suggestionPlugin);
const leaf = props.leaf;
const leafId: string = 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 diffOperation = { type: hasRemove ? "delete" : "insert" } as const;
const Component = ({ delete: "del", insert: "ins", update: "span" } as const)[diffOperation.type];
return (
setOption("hoverId", leafId),
onMouseLeave: () => setOption("hoverId", null),
}}
>
{props.children}
);
}
export const SuggestionLineBreak: RenderNodeWrapper = ({ api, element }) => {
if (!api.suggestion.isBlockSuggestion(element)) return;
const suggestionData = element.suggestion;
if (!suggestionData?.isLineBreak) return;
return function Component({ children }) {
return (
{children}
);
};
};
function SuggestionLineBreakContent({ suggestionData }: { suggestionData: TSuggestionData }) {
const { 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.useRef(null);
return (
setOption("isSuggesting", !isSuggesting)}
onMouseDown={(e) => e.preventDefault()}
tooltip={isSuggesting ? "Turn off suggesting" : "Suggestion edits"}
>
);
}
================================================
FILE: app/src/components/ui/switch.tsx
================================================
import * as React from "react";
import * as SwitchPrimitive from "@radix-ui/react-switch";
import { cn } from "@/utils/cn";
function Switch({ className, ...props }: React.ComponentProps) {
return (
);
}
export { Switch };
================================================
FILE: app/src/components/ui/table-icons.tsx
================================================
"use client";
import type { LucideProps } from "lucide-react";
export function BorderAllIcon(props: LucideProps) {
return (
);
}
export function BorderBottomIcon(props: LucideProps) {
return (
);
}
export function BorderLeftIcon(props: LucideProps) {
return (
);
}
export function BorderNoneIcon(props: LucideProps) {
return (
);
}
export function BorderRightIcon(props: LucideProps) {
return (
);
}
export function BorderTopIcon(props: LucideProps) {
return (
);
}
================================================
FILE: app/src/components/ui/table-node-static.tsx
================================================
import * as React from "react";
import type { SlateElementProps, TTableCellElement, TTableElement } from "platejs";
import { BaseTablePlugin } from "@platejs/table";
import { SlateElement } from "platejs";
import { cn } from "@/utils/cn";
export function TableElementStatic({ children, ...props }: SlateElementProps) {
const { disableMarginLeft } = props.editor.getOptions(BaseTablePlugin);
const marginLeft = disableMarginLeft ? 0 : props.element.marginLeft;
return (
{children}
);
}
export function TableRowElementStatic(props: SlateElementProps) {
return (
{props.children}
);
}
export function TableCellElementStatic({
isHeader,
...props
}: SlateElementProps & {
isHeader?: boolean;
}) {
const { editor, element } = props;
const { api } = editor.getPlugin(BaseTablePlugin);
const { minHeight, width } = api.table.getCellSize({ element });
const borders = api.table.getCellBorders({ element });
return (
);
}
export function TableCellHeaderElementStatic(props: SlateElementProps) {
return ) {
const readOnly = useReadOnly();
const isSelectionAreaVisible = usePluginOption(BlockSelectionPlugin, "isSelectionAreaVisible");
const hasControls = !readOnly && !isSelectionAreaVisible;
const { isSelectingCell, marginLeft, props: tableProps } = useTableElement();
const isSelectingTable = useBlockSelected(props.element.id as string);
const content = (
{children}
{isSelectingTable && }
);
if (readOnly) {
return content;
}
return {content} ;
},
);
function TableFloatingToolbar({ children, ...props }: React.ComponentProps) {
const { tf } = useEditorPlugin(TablePlugin);
const selected = useSelected();
const element = useElement();
const { props: buttonProps } = useRemoveNodeButton({ element });
const collapsedInside = useEditorSelector((editor) => selected && editor.api.isCollapsed(), [selected]);
const isFocusedLast = useFocusedLast();
const { canMerge, canSplit } = useTableMergeState();
return (
{children}
e.preventDefault()} contentEditable={false} {...props}>
{canMerge && (
tf.table.merge()}
onMouseDown={(e) => e.preventDefault()}
tooltip="Merge cells"
>
)}
{canSplit && (
tf.table.split()}
onMouseDown={(e) => e.preventDefault()}
tooltip="Split cell"
>
)}
{collapsedInside && (
)}
{collapsedInside && (
{
tf.insert.tableRow({ before: true });
}}
onMouseDown={(e) => e.preventDefault()}
tooltip="Insert row before"
>
{
tf.insert.tableRow();
}}
onMouseDown={(e) => e.preventDefault()}
tooltip="Insert row after"
>
{
tf.remove.tableRow();
}}
onMouseDown={(e) => e.preventDefault()}
tooltip="Delete row"
>
)}
{collapsedInside && (
{
tf.insert.tableColumn({ before: true });
}}
onMouseDown={(e) => e.preventDefault()}
tooltip="Insert column before"
>
{
tf.insert.tableColumn();
}}
onMouseDown={(e) => e.preventDefault()}
tooltip="Insert column after"
>
{
tf.remove.tableColumn();
}}
onMouseDown={(e) => e.preventDefault()}
tooltip="Delete column"
>
)}
);
}
function TableBordersDropdownMenuContent(props: React.ComponentProps) {
const editor = useEditorRef();
const {
getOnSelectTableBorder,
hasBottomBorder,
hasLeftBorder,
hasNoBorders,
hasOuterBorders,
hasRightBorder,
hasTopBorder,
} = useTableBordersDropdownMenuContentState();
return (
{
e.preventDefault();
editor.tf.focus();
}}
align="start"
side="right"
sideOffset={0}
{...props}
>
);
}
function ColorDropdownMenu({ children, tooltip }: { children: React.ReactNode; tooltip: string }) {
const [open, setOpen] = React.useState(false);
const editor = useEditorRef();
const selectedCells = usePluginOption(TablePlugin, "selectedCells");
const onUpdateColor = React.useCallback(
(color: string) => {
setOpen(false);
setCellBackground(editor, { color, selectedCells: selectedCells ?? [] });
},
[selectedCells, editor],
);
const onClearColor = React.useCallback(() => {
setOpen(false);
setCellBackground(editor, {
color: null,
selectedCells: selectedCells ?? [],
});
}, [selectedCells, editor]);
return (
{children}
);
}
export function TableRowElement(props: PlateElementProps) {
const { element } = props;
const readOnly = useReadOnly();
const selected = useSelected();
const editor = useEditorRef();
const isSelectionAreaVisible = usePluginOption(BlockSelectionPlugin, "isSelectionAreaVisible");
const hasControls = !readOnly && !isSelectionAreaVisible;
const { isDragging, previewRef, handleRef } = useDraggable({
element,
type: element.type,
canDropNode: ({ dragEntry, dropEntry }) =>
PathApi.equals(PathApi.parent(dragEntry[1]), PathApi.parent(dropEntry[1])),
onDropHandler: (_, { dragItem }) => {
const dragElement = (dragItem as { element: TElement }).element;
if (dragElement) {
editor.tf.select(dragElement);
}
},
});
return (
{hasControls && (
)}
{props.children}
);
}
function RowDragHandle({ dragRef }: { dragRef: React.Ref }) {
const editor = useEditorRef();
const element = useElement();
return (
);
}
function RowDropLine() {
const { dropLine } = useDropLine();
if (!dropLine) return null;
return (
);
}
export function TableCellElement({
isHeader,
...props
}: PlateElementProps & {
isHeader?: boolean;
}) {
const { api } = useEditorPlugin(TablePlugin);
const readOnly = useReadOnly();
const element = props.element;
const tableId = useElementSelector(([node]) => node.id as string, [], {
key: KEYS.table,
});
const rowId = useElementSelector(([node]) => node.id as string, [], {
key: KEYS.tr,
});
const isSelectingTable = useBlockSelected(tableId);
const isSelectingRow = useBlockSelected(rowId) || isSelectingTable;
const isSelectionAreaVisible = usePluginOption(BlockSelectionPlugin, "isSelectionAreaVisible");
const { borders, colIndex, colSpan, minHeight, rowIndex, selected, width } = useTableCellElement();
const { bottomProps, hiddenLeft, leftProps, rightProps } = useTableCellElementResizable({
colIndex,
colSpan,
rowIndex,
});
return (
);
}
export function TableCellHeaderElement(props: React.ComponentProps) {
return
Cell
{
tf.table.merge();
editor.tf.focus();
}}
>
{
tf.table.split();
editor.tf.focus();
}}
>
Row
{
tf.insert.tableRow({ before: true });
editor.tf.focus();
}}
>
{
tf.insert.tableRow();
editor.tf.focus();
}}
>
{
tf.remove.tableRow();
editor.tf.focus();
}}
>
Column
{
tf.insert.tableColumn({ before: true });
editor.tf.focus();
}}
>
{
tf.insert.tableColumn();
editor.tf.focus();
}}
>
{
tf.remove.tableColumn();
editor.tf.focus();
}}
>
{
tf.remove.table();
editor.tf.focus();
}}
>
);
}
function TablePicker() {
const { editor, tf } = useEditorPlugin(TablePlugin);
const [tablePicker, setTablePicker] = React.useState({
grid: Array.from({ length: 8 }, () => Array.from({ length: 8 }).fill(0)),
size: { colCount: 0, rowCount: 0 },
});
const onCellMove = (rowIndex: number, colIndex: number) => {
const newGrid = [...tablePicker.grid];
for (let i = 0; i < newGrid.length; i++) {
for (let j = 0; j < newGrid[i].length; j++) {
newGrid[i][j] = i >= 0 && i <= rowIndex && j >= 0 && j <= colIndex ? 1 : 0;
}
}
setTablePicker({
grid: newGrid,
size: { colCount: colIndex + 1, rowCount: rowIndex + 1 },
});
};
return (
{
handleChangeColor(color);
}}
/>
);
})}
);
};
================================================
FILE: app/src/components/ui/ai-node.tsx
================================================
"use client";
import { AIChatPlugin } from "@platejs/ai/react";
import { type PlateElementProps, type PlateTextProps, PlateElement, PlateText, usePluginOption } from "platejs/react";
import { cn } from "@/utils/cn";
export function AILeaf(props: PlateTextProps) {
const streaming = usePluginOption(AIChatPlugin, "streaming");
const streamingLeaf = props.editor.getApi(AIChatPlugin).aiChat.node({ streaming: true });
const isLast = streamingLeaf?.[0] === props.text;
return (
{children}
;
return (
{children}
{anchorElement &&
{discussion.comments.map((comment, index) => (
{!isLast && }
-
{Marker &&
-
{Marker &&
setHovering(true)}
onMouseLeave={() => setHovering(false)}
>
{suggestion.comments.map((comment, index) => (
);
}
export const useResolveSuggestion = (suggestionNodes: NodeEntry
{/* Replace to your own backend or refer to potion */}
{userInfo?.name?.[0]}
{userInfo?.name}
{formatCommentDate(new Date(suggestion.createdAt))}
{suggestion.type === "remove" && (
{suggestionText2Array(suggestion.text!).map((text, index) => (
)}
{suggestion.type === "insert" && (
{suggestionText2Array(suggestion.newText!).map((text, index) => (
)}
{suggestion.type === "replace" && (
Delete:
{text}
))}
Add:
{text || "line breaks"}
))}
{suggestionText2Array(suggestion.newText!).map((text, index) => (
))}
{suggestionText2Array(suggestion.text!).map((text, index) => (
))}
)}
{suggestion.type === "update" && (
with:
{text || "line breaks"}
{index === 0 ? "Replace:" : "Delete:"}
{text || "line breaks"}
{Object.keys(suggestion.properties).map((key) => (
Un{key}
))}
{Object.keys(suggestion.newProperties).map((key) => (
{key.charAt(0).toUpperCase() + key.slice(1)}
))}
{suggestion.newText}
)}
{children}
{row.elements.map((emojiId, index) => (
);
});
function EmojiPickerContent({
emojiLibrary,
i18n,
isSearching = false,
refs,
searchResult,
settings = EmojiSettings,
visibleCategories,
onMouseOver,
onSelectEmoji,
}: Pick<
UseEmojiPickerType,
| "emojiLibrary"
| "i18n"
| "isSearching"
| "onMouseOver"
| "onSelectEmoji"
| "refs"
| "searchResult"
| "settings"
| "visibleCategories"
>) {
const getRowWidth = settings.perLine.value * settings.buttonSize.value;
const isCategoryVisible = React.useCallback(
(categoryId: any) => {
return visibleCategories.has(categoryId) ? visibleCategories.get(categoryId) : false;
},
[visibleCategories],
);
const EmojiList = React.useCallback(() => {
return emojiLibrary
.getGrid()
.sections()
.map(({ id: categoryId }) => {
const section = emojiLibrary.getGrid().section(categoryId);
const { buttonSize } = settings;
return (
{i18n.categories[categoryId]}
{isCategoryVisible(categoryId) &&
section
.getRows()
.map((row: GridRow) => (
{i18n.searchResult}
{searchResult.map((emoji: Emoji, index: number) => (
{isSearching ? SearchList() : EmojiList()}
setSearch(event.target.value)}
placeholder={i18n.search}
aria-label="Search"
autoComplete="off"
type="text"
autoFocus
/>
{children}
{emojiSearchIcons.loupe}
{searchValue && (
)}
{emoji?.skins[0].native}
{emoji?.name}
{`:${emoji?.id}:`}
😢
{i18n.searchNoResultsTitle}
{i18n.searchNoResultsSubtitle}
☝️
{i18n.pick}
{element.texExpression.length > 0 ? (
) : (
{props.children}
Add a Tex equation
{props.element.texExpression.length > 0 ? (
) : (
Add a Tex equation
0 && open) || selected) && "after:bg-brand/15",
element.texExpression.length === 0 && "text-muted-foreground after:bg-neutral-500/10",
)}
contentEditable={false}
>
{element.texExpression.length === 0 && (
{icon}
{children}
{title}
{description.split("\n").map((dd, ii) => (
{dd}
))}
{icon}
{title}
{description && isOpen && {description}
}
{shouldMount && (
)}
{children}
网页版暂不支持文件选择
) : (
onChange(e.target.value)} />
);
}
================================================
FILE: app/src/components/ui/fixed-toolbar-buttons.tsx
================================================
"use client";
import {
ArrowUpToLineIcon,
BaselineIcon,
BoldIcon,
Code2Icon,
ItalicIcon,
PaintBucketIcon,
StrikethroughIcon,
UnderlineIcon,
Hand,
} from "lucide-react";
import { KEYS } from "platejs";
import { useEditorReadOnly } from "platejs/react";
import { AlignToolbarButton } from "./align-toolbar-button";
import { ExportToolbarButton } from "./export-toolbar-button";
import { FontColorToolbarButton } from "./font-color-toolbar-button";
// import { RedoToolbarButton, UndoToolbarButton } from "./history-toolbar-button";
import { ImportToolbarButton } from "./import-toolbar-button";
import { InsertToolbarButton } from "./insert-toolbar-button";
import { LinkToolbarButton } from "./link-toolbar-button";
import { BulletedListToolbarButton, NumberedListToolbarButton, TodoListToolbarButton } from "./list-toolbar-button";
import { MarkToolbarButton } from "./mark-toolbar-button";
import { MoreToolbarButton } from "./more-toolbar-button";
import { TableToolbarButton } from "./table-toolbar-button";
import { ToggleToolbarButton } from "./toggle-toolbar-button";
import { ToolbarGroup } from "./toolbar";
import { TurnIntoToolbarButton } from "./turn-into-toolbar-button";
import { FontSizeToolbarButton } from "./font-size-toolbar-button";
export function FixedToolbarButtons() {
const readOnly = useEditorReadOnly();
return (
{React.Children.map(children, (child) => {
if (!child) return child;
return React.cloneElement(
child as React.ReactElement<{
onClick: () => void;
}>,
{
onClick: () => inputRef.current?.click(),
},
);
})}
);
}
type TColor = {
isBrightColor: boolean;
name: string;
value: string;
};
function ColorDropdownMenuItem({
className,
isBrightColor,
isSelected,
name,
updateColor,
value,
...props
}: {
isBrightColor: boolean;
isSelected: boolean;
value: string;
updateColor: (color: string) => void;
name?: string;
} & DropdownMenuItemProps) {
const content = (
{children}
;
};
const InlineComboboxRow = ComboboxRow;
function InlineComboboxGroup({ className, ...props }: React.ComponentProps
{input}
{editContent}
);
}
function LinkOpenButton() {
const editor = useEditorRef();
const selection = useEditorSelection();
const attributes = React.useMemo(
() => {
const entry = editor.api.node
Default
Circle
Square
{content}
;
}
================================================
FILE: app/src/components/ui/media-audio-node-static.tsx
================================================
// @ts-nocheck
import * as React from "react";
import type { SlateElementProps, TAudioElement } from "platejs";
import { SlateElement } from "platejs";
export function AudioElementStatic(props: SlateElementProps{name}
{name}
{title}
{description}
{/* This is what handles the sidebar gap on desktop */}
);
}
function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
return (
);
}
function SidebarInput({ className, ...props }: React.ComponentProps
{children}
{showIcon &&
);
}
function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
return (
{props.children}
Top Border
Right Border
Bottom Border
Left Border
No Border
Outside Borders
{props.children}
{!isSelectionAreaVisible && (
{!readOnly && (
<>
)}
{isSelectingRow && }
{
tf.insert.table(tablePicker.size, { select: true });
editor.tf.focus();
}}
>
) {
return ) {
return (
) {
return (
{
SoundService.play.mouseEnterButton();
}}
onMouseDown={() => {
SoundService.play.mouseClickButton();
}}
className={cn(
"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring hover:text-foreground focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 text-sm font-medium focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
className,
)}
{...props}
/>
);
}
function TabsContent({ className, ...props }: React.ComponentProps) {
return
);
}
const headingDepth: Record = {
h1: 1,
h2: 2,
h3: 3,
h4: 4,
h5: 5,
h6: 6,
};
const getHeadingList = (editor?: SlateEditor) => {
if (!editor) return [];
const options = editor.getOptions(BaseTocPlugin);
if (options.queryHeading) {
return options.queryHeading(editor);
}
const headingList: Heading[] = [];
const values = editor.api.nodes({
at: [],
match: (n) => isHeading(n),
});
if (!values) return [];
Array.from(values, ([node, path]) => {
const { type } = node;
const title = NodeApi.string(node);
const depth = headingDepth[type];
const id = node.id as string;
if (title) {
headingList.push({ id, depth, path, title, type });
}
});
return headingList;
};
================================================
FILE: app/src/components/ui/toc-node.tsx
================================================
// @ts-nocheck
"use client";
import * as React from "react";
import type { PlateElementProps } from "platejs/react";
import { useTocElement, useTocElementState } from "@platejs/toc/react";
import { cva } from "class-variance-authority";
import { PlateElement } from "platejs/react";
import { Button } from "@/components/ui/button";
const headingItemVariants = cva(
"block h-auto w-full cursor-pointer truncate rounded-none px-0.5 py-1.5 text-left font-medium text-muted-foreground underline decoration-[0.5px] underline-offset-4 hover:bg-accent hover:text-muted-foreground",
{
variants: {
depth: {
1: "pl-0.5",
2: "pl-[26px]",
3: "pl-[50px]",
},
},
},
);
export function TocElement(props: PlateElementProps) {
const state = useTocElementState();
const { props: btnProps } = useTocElement(state);
const { headingList } = state;
return (
);
}
================================================
FILE: app/src/components/ui/toggle-node-static.tsx
================================================
// @ts-nocheck
import * as React from "react";
import type { SlateElementProps } from "platejs";
import { ChevronRight } from "lucide-react";
import { SlateElement } from "platejs";
export function ToggleElementStatic(props: SlateElementProps) {
return (
);
}
================================================
FILE: app/src/components/ui/toggle-node.tsx
================================================
// @ts-nocheck
"use client";
import * as React from "react";
import type { PlateElementProps } from "platejs/react";
import { useToggleButton, useToggleButtonState } from "@platejs/toggle/react";
import { ChevronRight } from "lucide-react";
import { PlateElement } from "platejs/react";
import { Button } from "@/components/ui/button";
export function ToggleElement(props: PlateElementProps) {
const element = props.element;
const state = useToggleButtonState(element.id as string);
const { buttonProps, open } = useToggleButton(state);
return (
{props.children}
);
}
================================================
FILE: app/src/components/ui/toggle-toolbar-button.tsx
================================================
"use client";
import * as React from "react";
import { useToggleToolbarButton, useToggleToolbarButtonState } from "@platejs/toggle/react";
import { ListCollapseIcon } from "lucide-react";
import { ToolbarButton } from "./toolbar";
export function ToggleToolbarButton(props: React.ComponentProps) {
const state = useToggleToolbarButtonState();
const { props: buttonProps } = useToggleToolbarButton(state);
return (
);
}
================================================
FILE: app/src/components/ui/toolbar.tsx
================================================
"use client";
import * as React from "react";
import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import { type VariantProps, cva } from "class-variance-authority";
import { ChevronDown } from "lucide-react";
import { DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
import { Separator } from "@/components/ui/separator";
import { Tooltip, TooltipTrigger } from "@/components/ui/tooltip";
import { cn } from "@/utils/cn";
export function Toolbar({ className, ...props }: React.ComponentProps) {
return ) {
return ) {
return ) {
return , "asChild" | "value"> &
VariantProps;
export const ToolbarButton = withTooltip(function ToolbarButton({
children,
className,
isDropdown,
pressed,
size = "sm",
variant,
...props
}: ToolbarButtonProps) {
return typeof pressed === "boolean" ? (
{isDropdown ? (
<>
) : (
{children}
);
});
export function ToolbarSplitButton({ className, ...props }: React.ComponentPropsWithoutRef) {
return , "value"> &
VariantProps;
export function ToolbarSplitButtonPrimary({
children,
className,
size = "sm",
variant,
...props
}: ToolbarSplitButtonPrimaryProps) {
return (
{children}
);
}
export function ToolbarSplitButtonSecondary({
className,
size,
variant,
...props
}: React.ComponentPropsWithoutRef<"span"> & VariantProps) {
return (
e.stopPropagation()}
role="button"
{...props}
>
& VariantProps) {
return = {
tooltip?: React.ReactNode;
tooltipContentProps?: Omit, "children">;
tooltipProps?: Omit, "children">;
tooltipTriggerProps?: React.ComponentPropsWithoutRef;
} & React.ComponentProps;
function withTooltip(Component: T) {
return function ExtendComponent({
tooltip,
tooltipContentProps,
tooltipProps,
tooltipTriggerProps,
...props
}: TooltipProps) {
const [mounted, setMounted] = React.useState(false);
React.useEffect(() => {
setMounted(true);
}, []);
const component = )} />;
if (tooltip && mounted) {
return (
{component}
{tooltip}
);
}
return component;
};
}
function TooltipContent({
children,
className,
// CHANGE
sideOffset = 4,
...props
}: React.ComponentProps) {
return (
{children}
{/* CHANGE */}
{/*
);
}
export function ToolbarMenuGroup({
children,
className,
label,
...props
}: React.ComponentProps & { label?: string }) {
return (
<>
{label && (
{label}
)}
{children}
);
}
================================================
FILE: app/src/components/ui/tooltip.tsx
================================================
"use client";
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import * as React from "react";
import { cn } from "@/utils/cn";
function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps) {
return ) {
return (
{tablePicker.grid.map((rows, rowIndex) =>
rows.map((value, columIndex) => {
return (
);
}
================================================
FILE: app/src/components/ui/tabs.tsx
================================================
import * as React from "react";
import * as TabsPrimitive from "@radix-ui/react-tabs";
import { cn } from "@/utils/cn";
import { SoundService } from "@/core/service/feedbackService/SoundService";
function Tabs({ className, ...props }: React.ComponentProps {
onCellMove(rowIndex, columIndex);
}}
/>
);
}),
)}
{tablePicker.size.rowCount} x {tablePicker.size.colCount}
{headingList.length > 0 ? (
headingList.map((item) => (
))
) : (
{props.children}
Create a heading to display the table of contents.
)}
{headingList.length > 0 ? (
headingList.map((item) => (
))
) : (
{props.children}
Create a heading to display the table of contents.
)}
{children}
{children}