update defaultJson

src/features/editor/views/GraphView/CustomNode/TextNode.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import styled from "styled-components";
 import { MdLink, MdLinkOff } from "react-icons/md";
 import type { CustomNodeProps } from "src/features/editor/views/GraphView/CustomNode";
@@ -72,6 +72,12 @@ const Node = ({ node, x, y, hasCollapse = false }: CustomNodeProps) => {
     validateHiddenNodes();
   };
 
+  const childrenCountText = useMemo(() => {
+    if (type === "object") return `{${childrenCount}}`;
+    if (type === "array") return `[${childrenCount}]`;
+    return "";
+  }, [childrenCount, type]);
+
   return (
     <Styled.StyledForeignObject width={width} height={height} x={0} y={0}>
       {isImage ? (
@@ -90,7 +96,7 @@ const Node = ({ node, x, y, hasCollapse = false }: CustomNodeProps) => {
             <TextRenderer>{value}</TextRenderer>
           </Styled.StyledKey>
           {isParent && childrenCount > 0 && childrenCountVisible && (
-            <Styled.StyledChildrenCount>[{childrenCount}]</Styled.StyledChildrenCount>
+            <Styled.StyledChildrenCount>{childrenCountText}</Styled.StyledChildrenCount>
           )}
           {isParent && hasCollapse && collapseButtonVisible && (
             <StyledExpand aria-label="Expand" onClick={handleExpand}>

src/features/editor/views/GraphView/lib/utils/calculateNodeSize.ts

@@ -7,7 +7,7 @@ type Size = { width: number; height: number };
 export const isContentImage = (value: Text) => {
   if (typeof value !== "string") return false;
 
-  const isImageURL = /(https?:\/\/.*\.(?:png|jpg|gif))/i.test(value);
+  const isImageURL = /(https?:\/\/.*\.(?:png|jpg|gif|svg))/i.test(value);
   const isBase64 = value.startsWith("data:image/") && value.includes("base64");
 
   return isImageURL || isBase64;

src/store/useFile.ts

@@ -11,37 +11,46 @@ import useJson from "./useJson";
 
 const defaultJson = JSON.stringify(
   {
-    squadName: "Super hero squad",
-    homeTown: "Metro City",
-    formed: 2016,
-    secretBase: "Super tower",
-    active: true,
-    members: [
+    appName: "JSON Crack",
+    author: "Aykut Saraç",
+    launched: 2022,
+    openSource: true,
+    stars: 34633,
+    alternative: {
+      appName: "ToDiagram",
+      detail: "New powerful JSON editor.",
+      website: "https://todiagram.com",
+      brandColor: "#fe5e49",
+      paid: true,
+    },
+    milestones: [
       {
-        name: "Molecule Man",
-        age: 29,
-        secretIdentity: "Dan Jukes",
-        powers: ["Radiation resistance", "Turning tiny", "Radiation blast"],
+        title: "Launch",
+        year: 2022,
+        detail: "Released the first version.",
       },
       {
-        name: "Madame Uppercut",
-        age: 39,
-        secretIdentity: "Jane Wilson",
-        powers: ["Million tonne punch", "Damage resistance", "Superhuman reflexes"],
+        title: "10K Stars",
+        date: 2022,
+        detail: "Achieved 10,000 stars on GitHub.",
       },
       {
-        name: "Eternal Flame",
-        age: 1000000,
-        secretIdentity: "Unknown",
-        powers: [
-          "Immortality",
-          "Heat Immunity",
-          "Inferno",
-          "Teleportation",
-          "Interdimensional travel",
-        ],
+        title: "20K Stars",
+        date: 2023,
+        detail: "Achieved 20,000 stars on GitHub.",
+      },
+      {
+        title: "30K Stars",
+        date: 2024,
+        detail: "Achieved 30,000 stars on GitHub.",
       },
     ],
+    social: {
+      github: "https://github.com/AykutSarac/jsoncrack.com",
+      twitter: "https://x.com/jsoncrack",
+      linkedin: "https://www.linkedin.com/company/todiagram",
+    },
+    images: ["http://localhost:3000/assets/logo.svg"],
   },
   null,
   2