feat: update monaco version

Author: AykutSarac

src/containers/ConverterLayout/options.ts

@@ -3,6 +3,7 @@ import type { EditorProps } from "@monaco-editor/react";
 export const editorOptions: EditorProps["options"] = {
   formatOnPaste: true,
   formatOnType: true,
+  tabSize: 2,
   stopRenderingLineAfter: -1,
   minimap: { enabled: false },
   stickyScroll: { enabled: false },

src/containers/Editor/components/TextEditor.tsx

@@ -1,18 +1,19 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { LoadingOverlay } from "@mantine/core";
 import styled from "styled-components";
-import Editor, { type EditorProps, loader, useMonaco } from "@monaco-editor/react";
+import Editor, { type EditorProps, loader, type OnMount, useMonaco } from "@monaco-editor/react";
 import useConfig from "src/store/useConfig";
 import useFile from "src/store/useFile";
 
 loader.config({
   paths: {
-    vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs",
+    vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.0/min/vs",
   },
 });
 
 const editorOptions: EditorProps["options"] = {
   formatOnPaste: true,
+  tabSize: 2,
   formatOnType: true,
   minimap: { enabled: false },
   scrollBeyondLastLine: false,
@@ -63,6 +64,12 @@ const TextEditor = () => {
     };
   }, [getHasChanges]);
 
+  const handleMount: OnMount = useCallback(editor => {
+    editor.onDidPaste(() => {
+      editor.getAction("editor.action.formatDocument")?.run();
+    });
+  }, []);
+
   return (
     <StyledEditorWrapper>
       <StyledWrapper>
@@ -72,6 +79,7 @@ const TextEditor = () => {
           theme={theme}
           value={contents}
           options={editorOptions}
+          onMount={handleMount}
           onValidate={errors => setError(errors[0]?.message)}
           onChange={contents => setContents({ contents, skipUpdate: true })}
           loading={<LoadingOverlay visible />}

src/containers/Modals/SchemaModal/index.tsx

@@ -89,6 +89,7 @@ export const SchemaModal = ({ opened, onClose }: ModalProps) => {
             language="json"
             options={{
               formatOnPaste: true,
+              tabSize: 2,
               formatOnType: true,
               scrollBeyondLastLine: false,
               minimap: {

src/containers/Modals/UpgradeModal/index.tsx

@@ -84,7 +84,7 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
               loop
               preload="auto"
               playsInline
-              poster="https://todiagram.com/videos/diagrams.webp"
+              poster="https://todiagram.com/images/meta/design-tokens.webp"
               style={{ display: "block" }}
             >
               <source src="https://todiagram.com/videos/diagrams.mp4" type="video/mp4" />