From 1a48ef11ab0d93a8e3ceb3369310ff2fad110811 Mon Sep 17 00:00:00 2001
From: AykutSarac <aykutsarac0@gmail.com>
Date: Sat, 7 Dec 2024 21:04:32 +0300
Subject: [PATCH] feat: update monaco version

---
 src/containers/ConverterLayout/options.ts       |  1 +
 src/containers/Editor/components/TextEditor.tsx | 14 +++++++++++---
 src/containers/Modals/SchemaModal/index.tsx     |  1 +
 src/containers/Modals/UpgradeModal/index.tsx    |  2 +-
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/containers/ConverterLayout/options.ts b/src/containers/ConverterLayout/options.ts
index 2387a29..e8d6b68 100644
--- a/src/containers/ConverterLayout/options.ts
+++ b/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 },
diff --git a/src/containers/Editor/components/TextEditor.tsx b/src/containers/Editor/components/TextEditor.tsx
index cd9ae83..464df7b 100644
--- a/src/containers/Editor/components/TextEditor.tsx
+++ b/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 />}
diff --git a/src/containers/Modals/SchemaModal/index.tsx b/src/containers/Modals/SchemaModal/index.tsx
index cca0ed6..60a8566 100644
--- a/src/containers/Modals/SchemaModal/index.tsx
+++ b/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: {
diff --git a/src/containers/Modals/UpgradeModal/index.tsx b/src/containers/Modals/UpgradeModal/index.tsx
index cfbc25a..cdfd882 100644
--- a/src/containers/Modals/UpgradeModal/index.tsx
+++ b/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" />