diff --git a/src/AgreementHtml.tsx b/src/AgreementHtml.tsx index f830be2c..f52a5e80 100644 --- a/src/AgreementHtml.tsx +++ b/src/AgreementHtml.tsx @@ -7,7 +7,7 @@ function AgreementHtml({ loading, isModal, }: { - loading: any; + loading: boolean; isModal?: boolean; }) { const agreementHtml = useAppStore((state) => state.agreementHtml); diff --git a/src/App.tsx b/src/App.tsx index cdc8c565..d65e6f29 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -42,14 +42,19 @@ const App = () => { useEffect(() => { const initializeApp = async () => { + try{ await init(); const compressedData = searchParams.get("data"); if (compressedData) { await loadFromLink(compressedData); } + } catch(error){ + console.error(error); + } finally { setLoading(false); - }; - initializeApp(); + } + }; + void initializeApp(); // DarkMode Styles const style = document.createElement("style"); @@ -72,10 +77,18 @@ const App = () => { }, [init, loadFromLink, searchParams, textColor, backgroundColor]); useEffect(() => { + const startTour = async () => { + try { + await tour.start(); + } catch (error) { + console.error("Tour failed to start:", error); + } + }; + const showTour = searchParams.get("showTour") === "true"; if (showTour || !localStorage.getItem("hasVisited")) { - tour.start(); + void startTour(); localStorage.setItem("hasVisited", "true"); } }, [searchParams]); diff --git a/src/components/FullScreenModal.tsx b/src/components/FullScreenModal.tsx index af32a474..f1ee4d3c 100644 --- a/src/components/FullScreenModal.tsx +++ b/src/components/FullScreenModal.tsx @@ -5,7 +5,7 @@ import { FullscreenOutlined } from "@ant-design/icons"; import useAppStore from "../store/store"; const FullScreenModal: React.FC = () => { - const [open, setOpen] = useState(false); + const [open, setOpen] = useState(false); const textColor = useAppStore((state) => state.textColor); const backgroundColor = useAppStore((state) => state.backgroundColor); diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 881391ea..78af7aee 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -14,7 +14,11 @@ import ToggleDarkMode from "./ToggleDarkMode"; const { useBreakpoint } = Grid; -function Navbar({ scrollToFooter }: { scrollToFooter: any }) { +interface NavbarProps { + scrollToFooter: () => void; +} + +function Navbar({ scrollToFooter }: NavbarProps) { const [hovered, setHovered] = useState< null | "home" | "explore" | "help" | "github" | "join" >(null); @@ -33,7 +37,7 @@ function Navbar({ scrollToFooter }: { scrollToFooter: any }) { const helpMenu = ( - + = ({ - steps, -}) => { +interface SidebarProps { + steps: { title: string; link: string }[]; +} +const Sidebar: React.FC = ({ steps }) => { return ( Learning Pathway @@ -24,7 +25,7 @@ const Sidebar: React.FC<{ steps: { title: string; link: string }[] }> = ({ (isActive ? "active" : undefined)} + className={({ isActive }) => (isActive ? "active" : "")} > {step.title} @@ -38,7 +39,7 @@ const Sidebar: React.FC<{ steps: { title: string; link: string }[] }> = ({ Welcome to the Learning Pathway! Use the sidebar to follow the guide. - Open the{" "} + Open the {" "} Template Playground {" "} diff --git a/src/editors/ConcertoEditor.tsx b/src/editors/ConcertoEditor.tsx index 1354c5f0..e5e0ce99 100644 --- a/src/editors/ConcertoEditor.tsx +++ b/src/editors/ConcertoEditor.tsx @@ -1,6 +1,6 @@ import { useMonaco } from "@monaco-editor/react"; import { lazy, Suspense, useCallback, useEffect, useMemo } from "react"; -import { editor, MarkerSeverity } from "monaco-editor"; +import * as monaco from "monaco-editor"; import useAppStore from "../store/store"; const MonacoEditor = lazy(() => @@ -40,15 +40,15 @@ const concertoTypes = [ "Boolean", ]; -const handleEditorWillMount = (monaco: any) => { - monaco.languages.register({ +const handleEditorWillMount = (monacoInstance: typeof monaco) => { + monacoInstance.languages.register({ id: "concerto", extensions: [".cto"], aliases: ["Concerto", "concerto"], mimetypes: ["application/vnd.accordproject.concerto"], }); - monaco.languages.setMonarchTokensProvider("concerto", { + monacoInstance.languages.setMonarchTokensProvider("concerto", { keywords: concertoKeywords, typeKeywords: concertoTypes, operators: ["=", "{", "}", "@", '"'], @@ -83,7 +83,7 @@ const handleEditorWillMount = (monaco: any) => { }, }); - monaco.editor.defineTheme("concertoTheme", { + monacoInstance.editor.defineTheme("concertoTheme", { base: "vs", inherit: true, rules: [ @@ -98,7 +98,7 @@ const handleEditorWillMount = (monaco: any) => { colors: {}, }); - monaco.editor.setTheme("concertoTheme"); + monacoInstance.editor.setTheme("concertoTheme"); }; interface ConcertoEditorProps { @@ -120,7 +120,7 @@ export default function ConcertoEditor({ [backgroundColor] ); - const options: editor.IStandaloneEditorConstructionOptions = { + const options: monaco.editor.IStandaloneEditorConstructionOptions = { minimap: { enabled: false }, wordWrap: "on", automaticLayout: true, @@ -137,7 +137,7 @@ export default function ConcertoEditor({ useEffect(() => { if (!monacoInstance) return; - const model = monacoInstance.editor.getModels()[0]; + const model = monacoInstance.editor.getModels()?.[0]; if (!model) return; if (ctoErr) { @@ -152,7 +152,7 @@ export default function ConcertoEditor({ endLineNumber: lineNumber, endColumn: columnNumber + 1, message: ctoErr, - severity: MarkerSeverity.Error, + severity: monaco.MarkerSeverity.Error, }, ]); } diff --git a/src/editors/MarkdownEditor.tsx b/src/editors/MarkdownEditor.tsx index 7349ef5a..ac0baf99 100644 --- a/src/editors/MarkdownEditor.tsx +++ b/src/editors/MarkdownEditor.tsx @@ -51,8 +51,6 @@ export default function MarkdownEditor({ scrollBeyondLastLine: false, }; - const options = useMemo(() => editorOptions, []); - const handleChange = useCallback( (val: string | undefined) => { if (onChange) onChange(val); @@ -64,7 +62,7 @@ export default function MarkdownEditor({
Loading Editor...
}>