Merge pull request #98 from fosslife/master

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dev-tools",
-  "version": "2.14.0",
+  "version": "2.14.1",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -118,6 +118,7 @@
     "prettier": "^3.2.4",
     "rollup-plugin-visualizer": "^5.12.0",
     "typescript": "^5.4.3",
-    "vite": "^5.2.7"
+    "vite": "^5.2.7",
+    "vite-tsconfig-paths": "^5.0.1"
   }
 }

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "devtools-x"
-version = "2.14.0"
+version = "2.14.1"
 description = "Developer tools desktop application"
 authors = ["Sparkenstein"]
 license = "MIT"

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "package": {
     "productName": "dev-tools",
-    "version": "2.14.0"
+    "version": "2.14.1"
   },
   "build": {
     "distDir": "../dist",

src/Components/MonacoWrapper.tsx

@@ -4,11 +4,9 @@ import Editor, {
   OnMount,
   EditorProps,
 } from "@monaco-editor/react";
-import * as monaco from "monaco-editor";
 import { editor } from "monaco-editor";
-import { useAppContext } from "../Contexts/AppContextProvider";
-import { themes } from "../Layout/themes";
-import { useEffect, useState } from "react";
+import { useAppContext } from "@/Contexts/AppContextProvider";
+import { themes } from "@/Layout/themes";
 
 type MonacoProps = {
   value?: string;
@@ -28,8 +26,6 @@ type MonacoProps = {
   };
 } & EditorProps;
 
-let inMemoryThemeCache: any = {};
-
 export const Monaco = ({
   value,
   setValue,
@@ -48,23 +44,15 @@ export const Monaco = ({
   const dark = themes.find((t) => t.value === config.editorThemeDark)!;
   const light = themes.find((t) => t.value === config.editorThemeLight)!;
 
-  const applyTheme = (monaco: any, theme: { value: string; label: string }) => {
-    // Importing it from `monaco-themes/themes/${theme.label}.json` gave all sorts of issues
-    // so fallback to using the CDN is fine for now, but we should look into this later / improve caching
-    const themeUrl = `https://cdn.jsdelivr.net/npm/[email protected]/themes/${encodeURIComponent(theme.label)}.json`;
-
-    if ((inMemoryThemeCache as any)[theme.label]) {
-      monaco.editor.setTheme(theme.value);
-      return;
-    }
-
-    fetch(themeUrl)
-      .then(async (data: any) => {
-        console.log(`monaco-themes/themes/${theme.label}.json`);
-        const value = await data.json();
+  const applyTheme = (
+    monaco: typeof import("monaco-editor/esm/vs/editor/editor.api"),
+    theme: { value: string; label: string }
+  ) => {
+    // hardcoding the path is fine since it's a static import.
+    import(`../../node_modules/monaco-themes/themes/${theme.label}.json`)
+      .then((data) => {
         const name = theme.value ?? "tomorrow-night";
-        inMemoryThemeCache[theme.label] = value;
-        monaco.editor.defineTheme(name, value);
+        monaco.editor.defineTheme(name, data);
         monaco.editor.setTheme(name);
       })
       .catch((e: any) => {

src/Components/Welcome.tsx

@@ -1,17 +1,17 @@
 import {
   Group,
+  rem,
   Stack,
   Switch,
   Text,
   ThemeIcon,
   Title,
-  rem,
 } from "@mantine/core";
-import { useContext, useState } from "react";
+import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
-import { useAppContext } from "../Contexts/AppContextProvider";
-import { data } from "../Layout/Navbar";
+import { useAppContext } from "@/Contexts/AppContextProvider";
+import { data } from "@/Layout/Navbar";
 import classes from "./styles.module.css";
 import { MdSettings } from "react-icons/md";
 

src/Features/base64/Base64Image.tsx

@@ -1,7 +1,7 @@
 import { Button, Divider, Select, Stack, Textarea } from "@mantine/core";
 import { useState } from "react";
 
-import { Copy } from "../../Components/Copy";
+import { Copy } from "@/Components/Copy";
 import { fs, invoke } from "@tauri-apps/api";
 import { open, save } from "@tauri-apps/api/dialog";
 

src/Features/base64/Base64Text.tsx

@@ -1,7 +1,7 @@
 import { Button, Group, Stack, Textarea } from "@mantine/core";
 import { useState } from "react";
 
-import { Copy } from "../../Components/Copy";
+import { Copy } from "@/Components/Copy";
 
 const Base64 = () => {
   const [input, setInput] = useState("");
@@ -22,14 +22,26 @@ const Base64 = () => {
         onChange={(e) => setInput(e.target.value)}
         value={input}
         minRows={7}
+        maxRows={7}
         autosize
+        spellCheck={false}
       />
+
       <Group>
         <Button onClick={() => dataToBase64(input)}>To Base64</Button>
+
         <Button onClick={() => base64ToData(input)}>From Base64</Button>
       </Group>
 
-      <Textarea minRows={7} autosize label="Output" value={output} readOnly />
+      <Textarea
+        minRows={7}
+        maxRows={7}
+        autosize
+        label="Output"
+        value={output}
+        readOnly
+      />
+
       <Copy value={output} label="Copy" />
     </Stack>
   );

src/Features/colors/Colors.tsx

@@ -13,7 +13,7 @@ import { useState } from "react";
 import CustomPicker from "./CustomPicker";
 import { BsMoon, BsSun } from "react-icons/bs";
 
-import { OutputBox } from "../../Components/OutputBox";
+import { OutputBox } from "@/Components/OutputBox";
 import { clipboard } from "@tauri-apps/api";
 import {
   Convert,

src/Features/css/CssPlayground.tsx

@@ -1,5 +1,5 @@
 import { Box, Group, Stack } from "@mantine/core";
-import { Monaco } from "../../Components/MonacoWrapper";
+import { Monaco } from "@/Components/MonacoWrapper";
 import { useState } from "react";
 
 const htmlBoilerplate = `

src/Features/epoch/Epoch.tsx

@@ -15,8 +15,8 @@ import { useInterval } from "@mantine/hooks";
 import { useEffect, useMemo, useState } from "react";
 import { FaArrowRight } from "react-icons/fa";
 
-import { Copy } from "../../Components/Copy";
-import { db } from "../../utils";
+import { Copy } from "@/Components/Copy";
+import { db } from "@/utils";
 
 const formats = [
   "toString",

src/Features/faker/Faker.tsx

@@ -15,7 +15,7 @@ import {
 import { FakerInput } from "./FakerInput";
 import { useCallback, useState } from "react";
 import { faker } from "@faker-js/faker";
-import { Monaco } from "../../Components/MonacoWrapper";
+import { Monaco } from "@/Components/MonacoWrapper";
 import {
   MdOutlineRemove,
   MdOutlineClose,

src/Features/hash/FileHash.tsx

@@ -1,7 +1,7 @@
 import { Button, Group, LoadingOverlay, Stack, Table } from "@mantine/core";
 import { dialog, invoke } from "@tauri-apps/api";
 import { useState } from "react";
-import { trackOtherEvent } from "../../utils/analytics";
+import { trackOtherEvent } from "@/utils/analytics";
 
 const FileHash = () => {
   const [fileHashes, setFileHashes] = useState<

src/Features/hash/Hash.tsx

@@ -2,8 +2,8 @@ import { Box, LoadingOverlay, Stack } from "@mantine/core";
 import { MD5, SHA1, SHA224, SHA256, SHA512 } from "crypto-js";
 import { useEffect, useState } from "react";
 
-import { Monaco } from "../../Components/MonacoWrapper";
-import { db } from "../../utils";
+import { Monaco } from "@/Components/MonacoWrapper";
+import { db } from "@/utils";
 import { HashBox } from "./HashBox";
 
 const init = {

src/Features/hash/HashBox.tsx

@@ -1,6 +1,6 @@
 import { Input } from "@mantine/core";
 
-import { Copy } from "../../Components/Copy";
+import { Copy } from "@/Components/Copy";
 
 type HashBoxProps = {
   value: string;

src/Features/html-preview/HtmlPreview.tsx

@@ -1,7 +1,7 @@
 import { Group, Stack } from "@mantine/core";
 import { Interweave } from "interweave";
 import { useState } from "react";
-import { Monaco } from "../../Components/MonacoWrapper";
+import { Monaco } from "@/Components/MonacoWrapper";
 
 const input = `<h2>HTML Preview</h2>
 <p>Enter HTML in the textarea below and see the preview here</p>

src/Features/ids/Ids.tsx

@@ -4,14 +4,14 @@ import {
   NumberInput,
   Select,
   Stack,
-  TextInput,
   Textarea,
+  TextInput,
 } from "@mantine/core";
 import { useInputState } from "@mantine/hooks";
 import { useCallback, useEffect, useState } from "react";
 import { v4 } from "uuid";
-import { nanoid, customAlphabet } from "nanoid";
-import { Copy } from "../../Components/Copy";
+import { customAlphabet, nanoid } from "nanoid";
+import { Copy } from "@/Components/Copy";
 
 type Generator = "v4" | "nanoid" | "custom";
 

src/Features/json-yaml/Yaml.tsx

@@ -2,8 +2,7 @@ import { Box, Group, NativeSelect, Stack } from "@mantine/core";
 import YAML from "js-yaml";
 import { useState } from "react";
 
-import { Monaco } from "../../Components/MonacoWrapper";
-import { useAppContext } from "../../Contexts/AppContextProvider";
+import { Monaco } from "@/Components/MonacoWrapper";
 
 const YamlJson = () => {
   const [mode, setMode] = useState<"json" | "yaml" | string>("json");

src/Features/json/JsonFormatter.tsx

@@ -1,10 +1,10 @@
 import "./styles.module.css";
 
 import { Button, Stack, Tabs } from "@mantine/core";
-import { MouseEvent, MouseEventHandler, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
-import { db } from "../../utils";
-import { useDebouncedCallback } from "../../utils/";
+import { db } from "@/utils";
+import { useDebouncedCallback } from "@/hooks";
 import { SingleTab } from "./SingleTab";
 
 // default state

src/Features/json/SingleTab.tsx

@@ -13,7 +13,7 @@ import {
   BsTextParagraph,
 } from "react-icons/bs";
 
-import { Monaco } from "../../Components/MonacoWrapper";
+import { Monaco } from "@/Components/MonacoWrapper";
 
 export const SingleTab = ({
   tabid,

src/Features/lorem/Lorem.tsx

@@ -1,7 +1,7 @@
 import { Group, NumberInput, Select, Stack, Textarea } from "@mantine/core";
 import { loremIpsum } from "lorem-ipsum";
 import { useEffect, useState } from "react";
-import { Copy } from "../../Components/Copy";
+import { Copy } from "@/Components/Copy";
 
 type mode = "paragraphs" | "sentences" | "words";
 

src/Features/markdown/Markdown.tsx

@@ -5,8 +5,8 @@ import { Box, Button, Group, Stack } from "@mantine/core";
 import MarkdownPreview from "@uiw/react-markdown-preview";
 import { useState } from "react";
 
-import { Monaco } from "../../Components/MonacoWrapper";
-import { openFileAndGetData, saveDataToFile } from "../../utils/functions";
+import { Monaco } from "@/Components/MonacoWrapper";
+import { openFileAndGetData, saveDataToFile } from "@/utils/functions";
 
 const Markdown = () => {
   const [source, setSource] = useState(`
@@ -81,4 +81,4 @@ const codeblock = () => {
 
 export default Markdown;
 
-// TODO: Save previous text
+// TODO: Save previous text,... db?

src/Features/minifiers/Minify.tsx

@@ -25,7 +25,7 @@ import postcss from "prettier/plugins/postcss";
 import { minify as cssMinify } from "csso";
 import { minify as terserMinify } from "terser";
 
-import { Monaco } from "../../Components/MonacoWrapper";
+import { Monaco } from "@/Components/MonacoWrapper";
 import { invoke } from "@tauri-apps/api";
 
 const map: Record<string, prettier.BuiltInParserName> = {

src/Features/number-tools/Nums.tsx

@@ -2,7 +2,7 @@ import { Button, Divider, Group, Stack, Text, TextInput } from "@mantine/core";
 import { useEffect, useState } from "react";
 import { convertBase } from "simple-base-converter";
 
-import { OutputBox } from "../../Components/OutputBox";
+import { OutputBox } from "@/Components/OutputBox";
 
 const init = {
   decimal: "",

src/Features/password/index.tsx

@@ -19,8 +19,8 @@ import { FaCheck } from "react-icons/fa";
 import { FiCheck } from "react-icons/fi";
 import { MdDelete } from "react-icons/md";
 
-import { OutputBox } from "../../Components/OutputBox";
-import { db } from "../../utils";
+import { OutputBox } from "@/Components/OutputBox";
+import { db } from "@/utils";
 import { QuantityInput } from "./Counter";
 
 type Config = {

src/Features/pastebin/Pastebin.tsx

@@ -9,7 +9,7 @@ import {
 } from "@mantine/core";
 import { useState } from "react";
 
-import { Monaco } from "../../Components/MonacoWrapper";
+import { Monaco } from "@/Components/MonacoWrapper";
 import { notifications } from "@mantine/notifications";
 
 const langs = [
@@ -156,5 +156,5 @@ function Pastebin() {
 export default Pastebin;
 
 // TODO: Add a button to copy the link to clipboard
-// TODO: store settings to db
+// TODO: store settings to db -> Would be nice for OpenAi/ api keys too
 // TODO: store prev generated URLS?

src/Features/ping/Ping.tsx

@@ -12,7 +12,6 @@ import { useEffect, useState } from "react";
 
 import "@mantine/charts/styles.css";
 import { LineChart } from "@mantine/charts";
-import { data } from "../../Layout/Navbar/index";
 
 type PingResponse = {
   size: number;

src/Features/quicktype/Quicktype.tsx

@@ -15,7 +15,7 @@ import {
 } from "quicktype-core";
 import { useState } from "react";
 
-import { Monaco } from "../../Components/MonacoWrapper";
+import { Monaco } from "@/Components/MonacoWrapper";
 
 const languages = [
   { language: "ruby", label: "Ruby", baseLang: "ruby" },

src/Features/random/Random.tsx

@@ -13,7 +13,7 @@ import {
 import { generate } from "generate-password-ts";
 import { useEffect, useState } from "react";
 
-import { saveDataToFile } from "../../utils/functions";
+import { saveDataToFile } from "@/utils/functions";
 
 const checkboxtypes = [
   "lowercase",

src/Features/reactPlayground/Playground.tsx

@@ -2,7 +2,7 @@ import { Group, Stack } from "@mantine/core";
 import { useState } from "react";
 import { LivePreview, LiveProvider } from "react-live";
 
-import { Monaco } from "../../Components/MonacoWrapper";
+import { Monaco } from "@/Components/MonacoWrapper";
 
 const boilerplate = `
 // Syntax highlighting, autocompletion etc