feat: add editor top banner

AykutSarac · AykutSarac · commit c63d1432198d · 2025-09-15T18:44:37.000+03:00
diff --git a/.env.development b/.env.development
@@ -1 +1,2 @@
+NEXT_PUBLIC_NODE_LIMIT=2000
 NEXT_PUBLIC_DISABLE_EXTERNAL_MODE=false
diff --git a/src/features/Banner.tsx b/src/features/Banner.tsx
@@ -0,0 +1,73 @@
+import React, { useEffect, useState } from "react";
+import { Anchor, Flex, Button } from "@mantine/core";
+
+export const BANNER_HEIGHT =
+  process.env.NEXT_PUBLIC_DISABLE_EXTERNAL_MODE === "true" ? "0px" : "40px";
+
+const BANNER_LIST = [
+  "Save and store your diagrams with ToDiagram",
+  "Explore the ToDiagram from the creators of JSON Crack",
+  "Generate AI diagrams with single prompt",
+  "Try ToDiagram for free, no sign-up required",
+  "Edit data directly inside diagrams",
+  "Explore larger datasets (up to 50 MB) easily",
+];
+
+export const Banner = () => {
+  const ROTATION_INTERVAL = 6000; // ms between label changes
+  const FADE_DURATION = 500; // ms for fade transition
+
+  const [index, setIndex] = useState(0);
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    let fadeTimeout: ReturnType<typeof setTimeout> | undefined;
+    const intervalId = setInterval(() => {
+      setVisible(false);
+      fadeTimeout = setTimeout(() => {
+        setIndex(i => (i + 1) % BANNER_LIST.length);
+        setVisible(true);
+      }, FADE_DURATION);
+    }, ROTATION_INTERVAL);
+
+    return () => {
+      clearInterval(intervalId);
+      if (fadeTimeout) clearTimeout(fadeTimeout);
+    };
+  }, []);
+
+  return (
+    <Anchor
+      href="https://todiagram.com/editor?utm_source=jsoncrack&utm_medium=top_banner"
+      target="_blank"
+      rel="noopener"
+      underline="never"
+    >
+      <Flex
+        h={BANNER_HEIGHT}
+        justify="center"
+        align="center"
+        fw="500"
+        gap="xs"
+        style={{
+          background: "linear-gradient(90deg, #FF75B7 0%, #FED761 100%)",
+          color: "black",
+        }}
+      >
+        <span
+          style={{
+            transition: `opacity ${FADE_DURATION}ms ease`,
+            opacity: visible ? 1 : 0,
+            willChange: "opacity",
+            display: "inline-block",
+          }}
+        >
+          {BANNER_LIST[index]}{" "}
+        </span>
+        <Button size="xs" color="gray">
+          Try now
+        </Button>
+      </Flex>
+    </Anchor>
+  );
+};
diff --git a/src/features/editor/BottomBar.tsx b/src/features/editor/BottomBar.tsx
@@ -3,7 +3,6 @@ import { Flex, Menu, Popover, Text } from "@mantine/core";
 import styled from "styled-components";
 import { event as gaEvent } from "nextjs-google-analytics";
 import { BiSolidDockLeft } from "react-icons/bi";
-import { FaCrown } from "react-icons/fa6";
 import { IoMdCheckmark } from "react-icons/io";
 import { MdArrowUpward } from "react-icons/md";
 import { VscCheck, VscError, VscRunAll, VscSync, VscSyncIgnored } from "react-icons/vsc";
@@ -161,30 +160,6 @@ export const BottomBar = () => {
                 {format.label}
               </Menu.Item>
             ))}
-            <Menu.Item
-              fz={12}
-              onClick={() =>
-                window.open(
-                  "https://todiagram.com/editor?utm_source=jsoncrack&utm_medium=bottom-bar&utm_campaign=custom-diagram",
-                  "_blank"
-                )
-              }
-              rightSection={<FaCrown color="gray" />}
-            >
-              Custom
-            </Menu.Item>
-            <Menu.Item
-              fz={12}
-              onClick={() =>
-                window.open(
-                  "https://todiagram.com/editor?utm_source=jsoncrack&utm_medium=bottom-bar&utm_campaign=mermaid-diagram",
-                  "_blank"
-                )
-              }
-              rightSection={<FaCrown color="gray" />}
-            >
-              Mermaid
-            </Menu.Item>
           </Menu.Dropdown>
         </Menu>
       </StyledRight>
diff --git a/src/features/editor/TextEditor.tsx b/src/features/editor/TextEditor.tsx
@@ -4,6 +4,7 @@ import styled from "styled-components";
 import Editor, { type EditorProps, loader, type OnMount, useMonaco } from "@monaco-editor/react";
 import useConfig from "../../store/useConfig";
 import useFile from "../../store/useFile";
+import { BANNER_HEIGHT } from "../Banner";
 
 loader.config({
   paths: {
@@ -102,7 +103,7 @@ const StyledEditorWrapper = styled.div`
 
 const StyledWrapper = styled.div`
   display: grid;
-  height: calc(100vh - 67px);
+  height: ${`calc(100vh - 67px - ${BANNER_HEIGHT})`};
   grid-template-columns: 100%;
   grid-template-rows: minmax(0, 1fr);
 `;
diff --git a/src/features/editor/Toolbar/index.tsx b/src/features/editor/Toolbar/index.tsx
@@ -1,13 +1,11 @@
 import React from "react";
 import Link from "next/link";
-import { Flex, Group, Button } from "@mantine/core";
+import { Flex, Group } from "@mantine/core";
 import styled from "styled-components";
 import toast from "react-hot-toast";
 import { AiOutlineFullscreen } from "react-icons/ai";
-import { FaCrown, FaGithub } from "react-icons/fa6";
-import { LuLink } from "react-icons/lu";
+import { FaGithub } from "react-icons/fa6";
 import { JSONCrackLogo } from "../../../layout/JsonCrackLogo";
-import { useModal } from "../../../store/useModal";
 import { FileMenu } from "./FileMenu";
 import { ToolsMenu } from "./ToolsMenu";
 import { ViewMenu } from "./ViewMenu";
@@ -43,8 +41,6 @@ function fullscreenBrowser() {
 }
 
 export const Toolbar = () => {
-  const setVisible = useModal(state => state.setVisible);
-
   return (
     <StyledTools>
       <Group gap="xs" justify="left" w="100%" style={{ flexWrap: "nowrap" }}>
@@ -56,33 +52,8 @@ export const Toolbar = () => {
         <FileMenu />
         <ViewMenu />
         <ToolsMenu />
-        <Button
-          component={Link}
-          href="https://todiagram.com/editor?utm_source=jsoncrack&utm_medium=toolbar"
-          target="_blank"
-          rel="noopener"
-          autoContrast
-          color="yellow"
-          variant="light"
-          size="compact-xs"
-          fz="12"
-          fw="600"
-          leftSection={<FaCrown />}
-        >
-          Try Pro for Free | No Sign-up
-        </Button>
       </Group>
       <Group gap="xs" justify="right" w="100%" style={{ flexWrap: "nowrap" }}>
-        <Button
-          color="gray"
-          fz="12"
-          leftSection={<LuLink />}
-          size="compact-sm"
-          variant="default"
-          onClick={() => setVisible("UpgradeModal", true)}
-        >
-          Share
-        </Button>
         <Link href="https://github.com/AykutSarac/jsoncrack.com" rel="noopener" target="_blank">
           <StyledToolElement title="GitHub">
             <FaGithub size="18" />
diff --git a/src/features/editor/views/GraphView/NotSupported.tsx b/src/features/editor/views/GraphView/NotSupported.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import { Anchor, Button, Image, Overlay, Stack, Text } from "@mantine/core";
 import styled, { keyframes } from "styled-components";
 import useConfig from "../../../../store/useConfig";
-import { useModal } from "../../../../store/useModal";
 
 const shineEffect = keyframes`
   0% {
@@ -59,7 +58,6 @@ const ShiningButton = styled.div`
 
 export const NotSupported = () => {
   const darkmodeEnabled = useConfig(state => state.darkmodeEnabled);
-  const setVisible = useModal(state => state.setVisible);
 
   return (
     <Overlay
@@ -77,7 +75,14 @@ export const NotSupported = () => {
           This diagram is too large and not supported at JSON Crack.
           <br />
           Try{" "}
-          <Anchor inherit c="teal" fw="500" onClick={() => setVisible("UpgradeModal", true)}>
+          <Anchor
+            inherit
+            c="teal"
+            fw="500"
+            href="https://todiagram.com/editor?utm_source=jsoncrack&utm_medium=data_limit"
+            target="_blank"
+            rel="noopener"
+          >
             ToDiagram
           </Anchor>{" "}
           for larger diagrams and more features.
diff --git a/src/features/editor/views/GraphView/index.tsx b/src/features/editor/views/GraphView/index.tsx
@@ -8,6 +8,7 @@ import { Canvas } from "reaflow";
 import type { ElkRoot } from "reaflow/dist/layout/useLayout";
 import { useLongPress } from "use-long-press";
 import useConfig from "../../../../store/useConfig";
+import { BANNER_HEIGHT } from "../../../Banner";
 import { CustomEdge } from "./CustomEdge";
 import { CustomNode } from "./CustomNode";
 import { NotSupported } from "./NotSupported";
@@ -19,7 +20,7 @@ import useGraph from "./stores/useGraph";
 const StyledEditorWrapper = styled.div<{ $widget: boolean; $showRulers: boolean }>`
   position: absolute;
   width: 100%;
-  height: ${({ $widget }) => ($widget ? "100vh" : "calc(100vh - 40px)")};
+  height: ${({ $widget }) => ($widget ? "100vh" : `calc(100vh - 40px - ${BANNER_HEIGHT})`)};
 
   --bg-color: ${({ theme }) => theme.GRID_BG_COLOR};
   --line-color-1: ${({ theme }) => theme.GRID_COLOR_PRIMARY};
diff --git a/src/features/modals/SchemaModal/index.tsx b/src/features/modals/SchemaModal/index.tsx
@@ -5,17 +5,14 @@ import Editor from "@monaco-editor/react";
 import { event as gaEvent } from "nextjs-google-analytics";
 import { toast } from "react-hot-toast";
 import { FaChevronDown } from "react-icons/fa";
-import { FaCrown } from "react-icons/fa6";
 import { VscLinkExternal } from "react-icons/vsc";
 import { FileFormat } from "../../../enums/file.enum";
 import useConfig from "../../../store/useConfig";
 import useFile from "../../../store/useFile";
-import { useModal } from "../../../store/useModal";
 
 export const SchemaModal = ({ opened, onClose }: ModalProps) => {
   const setContents = useFile(state => state.setContents);
   const setJsonSchema = useFile(state => state.setJsonSchema);
-  const setVisible = useModal(state => state.setVisible);
   const darkmodeEnabled = useConfig(state => (state.darkmodeEnabled ? "vs-dark" : "light"));
   const [schema, setSchema] = React.useState(
     JSON.stringify(
@@ -116,12 +113,6 @@ export const SchemaModal = ({ opened, onClose }: ModalProps) => {
               </Menu.Target>
               <Menu.Dropdown>
                 <Menu.Item onClick={generateMockData}>Generate Mock Data</Menu.Item>
-                <Menu.Item
-                  onClick={() => setVisible("UpgradeModal", true)}
-                  rightSection={<FaCrown />}
-                >
-                  Validate on Diagrams
-                </Menu.Item>
               </Menu.Dropdown>
             </Menu>
           </Button.Group>
diff --git a/src/features/modals/UpgradeModal/index.tsx b/src/features/modals/UpgradeModal/index.tsx
diff --git a/src/features/modals/index.ts b/src/features/modals/index.ts
diff --git a/src/pages/editor.tsx b/src/pages/editor.tsx

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
	`1`	`+NEXT_PUBLIC_NODE_LIMIT=2000`
`1`	`2`	`NEXT_PUBLIC_DISABLE_EXTERNAL_MODE=false`