refactor(constants): move languages.ts and themes.ts to editor folder
refactor(imports): update SUPPORTED_LANGUAGES and SUPPORTED_THEMES import path to use editor folder feat(constants): add MIN_FONT_SIZE、MAX_FONT_SIZE and DEFAULT_FONT_SIZE feat(store): add font size management to code editor store
This commit is contained in:
parent
26efe14fc7
commit
0be9cf3baa
@ -5,8 +5,8 @@ import {
|
|||||||
SelectContent,
|
SelectContent,
|
||||||
SelectTrigger,
|
SelectTrigger,
|
||||||
} from "@/components/ui/select";
|
} from "@/components/ui/select";
|
||||||
import { SUPPORTED_LANGUAGES } from "@/constants/languages";
|
|
||||||
import { useCodeEditorStore } from "@/store/useCodeEditorStore";
|
import { useCodeEditorStore } from "@/store/useCodeEditorStore";
|
||||||
|
import { SUPPORTED_LANGUAGES } from "@/constants/editor/languages";
|
||||||
|
|
||||||
export default function LanguageSelector() {
|
export default function LanguageSelector() {
|
||||||
const { language, setLanguage } = useCodeEditorStore();
|
const { language, setLanguage } = useCodeEditorStore();
|
||||||
|
@ -6,7 +6,7 @@ import {
|
|||||||
SelectTrigger,
|
SelectTrigger,
|
||||||
} from "@/components/ui/select";
|
} from "@/components/ui/select";
|
||||||
import { Palette } from "lucide-react";
|
import { Palette } from "lucide-react";
|
||||||
import { SUPPORTED_THEMES } from "@/constants/themes";
|
import { SUPPORTED_THEMES } from "@/constants/editor/themes";
|
||||||
import { useCodeEditorStore } from "@/store/useCodeEditorStore";
|
import { useCodeEditorStore } from "@/store/useCodeEditorStore";
|
||||||
|
|
||||||
export default function ThemeSelector() {
|
export default function ThemeSelector() {
|
||||||
|
5
src/constants/editor/options.ts
Normal file
5
src/constants/editor/options.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
export const MIN_FONT_SIZE = 8;
|
||||||
|
|
||||||
|
export const MAX_FONT_SIZE = 24;
|
||||||
|
|
||||||
|
export const DEFAULT_FONT_SIZE = 16;
|
@ -1,16 +1,20 @@
|
|||||||
import { create } from "zustand";
|
import { create } from "zustand";
|
||||||
import { CodeEditorState } from "@/types";
|
import { CodeEditorState } from "@/types";
|
||||||
import { DEFAULT_THEME } from "@/constants/themes";
|
import { DEFAULT_THEME } from "@/constants/editor/themes";
|
||||||
import { DEFAULT_LANGUAGE } from "@/constants/languages";
|
import { DEFAULT_LANGUAGE } from "@/constants/editor/languages";
|
||||||
import { persist, createJSONStorage } from "zustand/middleware";
|
import { persist, createJSONStorage } from "zustand/middleware";
|
||||||
|
import { DEFAULT_FONT_SIZE } from "@/constants/editor/options";
|
||||||
|
|
||||||
export const useCodeEditorStore = create<CodeEditorState>()(
|
export const useCodeEditorStore = create<CodeEditorState>()(
|
||||||
persist(
|
persist(
|
||||||
(set, get) => ({
|
(set) => ({
|
||||||
language: DEFAULT_LANGUAGE,
|
language: DEFAULT_LANGUAGE,
|
||||||
theme: DEFAULT_THEME,
|
theme: DEFAULT_THEME,
|
||||||
|
fontSize: DEFAULT_FONT_SIZE,
|
||||||
|
|
||||||
setLanguage: (language: string) => set({ language }),
|
setLanguage: (language: string) => set({ language }),
|
||||||
setTheme: (theme: string) => set({ theme }),
|
setTheme: (theme: string) => set({ theme }),
|
||||||
|
setFontSize: (fontSize: number) => set({ fontSize }),
|
||||||
}),
|
}),
|
||||||
{
|
{
|
||||||
name: "code-editor-storage",
|
name: "code-editor-storage",
|
||||||
|
@ -1,7 +1,9 @@
|
|||||||
export interface CodeEditorState {
|
export interface CodeEditorState {
|
||||||
language: string;
|
language: string;
|
||||||
theme: string;
|
theme: string;
|
||||||
|
fontSize: number;
|
||||||
|
|
||||||
setLanguage: (language: string) => void;
|
setLanguage: (language: string) => void;
|
||||||
setTheme: (theme: string) => void;
|
setTheme: (theme: string) => void;
|
||||||
|
setFontSize: (fontSize: number) => void;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user