mirror of
https://github.com/cfngc4594/monaco-editor-lsp-next.git
synced 2025-05-18 15:26:36 +00:00
refactor(code-toolbar): standardize component exports and simplify reset logic
- Changed all toolbar action components from named exports with curly braces to default exports - Simplified ResetButton by moving template logic to useProblemEditorActions hook - Updated useProblemEditorActions to handle template selection internally using store data - Renamed problem-editor-store import to problem-editor for consistency
This commit is contained in:
parent
eea16a8224
commit
f9cbc5e085
@ -7,7 +7,7 @@ import { useTranslations } from "next-intl";
|
||||
import { TooltipButton } from "@/components/tooltip-button";
|
||||
import { useProblemEditorActions } from "@/features/problems/code/hooks/use-problem-editor-actions";
|
||||
|
||||
const CopyButton = () => {
|
||||
export const CopyButton = () => {
|
||||
const t = useTranslations("WorkspaceEditorHeader.CopyButton");
|
||||
const [copied, setCopied] = useState(false);
|
||||
const { canExecute, handleCopy } = useProblemEditorActions();
|
||||
@ -52,5 +52,3 @@ const CopyButton = () => {
|
||||
</TooltipButton>
|
||||
);
|
||||
};
|
||||
|
||||
export { CopyButton };
|
||||
|
@ -5,7 +5,7 @@ import { useTranslations } from "next-intl";
|
||||
import { TooltipButton } from "@/components/tooltip-button";
|
||||
import { useProblemEditorActions } from "@/features/problems/code/hooks/use-problem-editor-actions";
|
||||
|
||||
const FormatButton = () => {
|
||||
export const FormatButton = () => {
|
||||
const t = useTranslations("WorkspaceEditorHeader.FormatButton");
|
||||
const { canExecute, handleFormat } = useProblemEditorActions();
|
||||
|
||||
@ -20,5 +20,3 @@ const FormatButton = () => {
|
||||
</TooltipButton>
|
||||
);
|
||||
};
|
||||
|
||||
export { FormatButton };
|
||||
|
@ -5,7 +5,7 @@ import { useTranslations } from "next-intl";
|
||||
import { TooltipButton } from "@/components/tooltip-button";
|
||||
import { useProblemEditorActions } from "@/features/problems/code/hooks/use-problem-editor-actions";
|
||||
|
||||
const RedoButton = () => {
|
||||
export const RedoButton = () => {
|
||||
const t = useTranslations("WorkspaceEditorHeader.RedoButton");
|
||||
const { canExecute, handleRedo } = useProblemEditorActions();
|
||||
|
||||
@ -20,5 +20,3 @@ const RedoButton = () => {
|
||||
</TooltipButton>
|
||||
);
|
||||
};
|
||||
|
||||
export { RedoButton };
|
||||
|
@ -1,37 +1,18 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo } from "react";
|
||||
import { RotateCcw } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import type { Template } from "@/generated/client";
|
||||
import { TooltipButton } from "@/components/tooltip-button";
|
||||
import { useProblemEditorStore } from "@/stores/problem-editor-store";
|
||||
import { useProblemEditorActions } from "@/features/problems/code/hooks/use-problem-editor-actions";
|
||||
|
||||
interface ResetButtonProps {
|
||||
templates: Template[];
|
||||
}
|
||||
|
||||
const ResetButton = ({ templates }: ResetButtonProps) => {
|
||||
export const ResetButton = () => {
|
||||
const t = useTranslations("WorkspaceEditorHeader.ResetButton");
|
||||
const { language } = useProblemEditorStore();
|
||||
const { canExecute, handleReset } = useProblemEditorActions();
|
||||
|
||||
const currentTemplate = useMemo(() => {
|
||||
return (
|
||||
templates.find((template) => template.language === language)?.template ??
|
||||
""
|
||||
);
|
||||
}, [language, templates]);
|
||||
|
||||
const handleClick = () => {
|
||||
handleReset(currentTemplate);
|
||||
};
|
||||
|
||||
return (
|
||||
<TooltipButton
|
||||
tooltipContent={t("TooltipContent")}
|
||||
onClick={handleClick}
|
||||
onClick={handleReset}
|
||||
aria-label={t("TooltipContent")}
|
||||
disabled={!canExecute}
|
||||
>
|
||||
@ -39,5 +20,3 @@ const ResetButton = ({ templates }: ResetButtonProps) => {
|
||||
</TooltipButton>
|
||||
);
|
||||
};
|
||||
|
||||
export { ResetButton };
|
||||
|
@ -5,7 +5,7 @@ import { useTranslations } from "next-intl";
|
||||
import { TooltipButton } from "@/components/tooltip-button";
|
||||
import { useProblemEditorActions } from "@/features/problems/code/hooks/use-problem-editor-actions";
|
||||
|
||||
const UndoButton = () => {
|
||||
export const UndoButton = () => {
|
||||
const t = useTranslations("WorkspaceEditorHeader.UndoButton");
|
||||
const { canExecute, handleUndo } = useProblemEditorActions();
|
||||
|
||||
@ -20,5 +20,3 @@ const UndoButton = () => {
|
||||
</TooltipButton>
|
||||
);
|
||||
};
|
||||
|
||||
export { UndoButton };
|
||||
|
@ -0,0 +1,34 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
CopyButton,
|
||||
FormatButton,
|
||||
LanguageSelector,
|
||||
RedoButton,
|
||||
ResetButton,
|
||||
UndoButton,
|
||||
} from "@/features/problems/code/components/toolbar";
|
||||
|
||||
interface CodeToolbarProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const CodeToolbar = async ({ className }: CodeToolbarProps) => {
|
||||
return (
|
||||
<header
|
||||
className={cn("relative flex h-8 flex-none items-center", className)}
|
||||
>
|
||||
<div className="absolute flex w-full items-center justify-between px-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<LanguageSelector />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<ResetButton />
|
||||
<UndoButton />
|
||||
<RedoButton />
|
||||
<FormatButton />
|
||||
<CopyButton />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
@ -1,8 +1,8 @@
|
||||
import { useCallback } from "react";
|
||||
import { useProblemEditorStore } from "@/stores/problem-editor-store";
|
||||
import { useProblemEditorStore } from "@/stores/problem-editor";
|
||||
|
||||
export const useProblemEditorActions = () => {
|
||||
const { editor } = useProblemEditorStore();
|
||||
const { editor, problem, language } = useProblemEditorStore();
|
||||
|
||||
const handleCopy = useCallback(async () => {
|
||||
try {
|
||||
@ -26,12 +26,15 @@ export const useProblemEditorActions = () => {
|
||||
editor?.trigger("redo", "redo", null);
|
||||
}, [editor]);
|
||||
|
||||
const handleReset = useCallback((template: string) => {
|
||||
if (!editor) return;
|
||||
const handleReset = useCallback(() => {
|
||||
if (!editor || !problem) return;
|
||||
|
||||
const model = editor.getModel();
|
||||
if (!model) return;
|
||||
|
||||
const template =
|
||||
problem.templates.find((t) => t.language === language)?.content ?? "";
|
||||
|
||||
const fullRange = model.getFullModelRange();
|
||||
editor.pushUndoStop();
|
||||
editor.executeEdits("reset-code", [
|
||||
@ -42,7 +45,7 @@ export const useProblemEditorActions = () => {
|
||||
},
|
||||
]);
|
||||
editor.pushUndoStop();
|
||||
}, [editor]);
|
||||
}, [editor, language, problem]);
|
||||
|
||||
return {
|
||||
handleCopy,
|
||||
|
Loading…
Reference in New Issue
Block a user