40글자 이상부터 GZip

src/App.tsx

@@ -1,81 +1,95 @@
-import { useState, useEffect } from 'react';
-import { encode, decode } from 'base65536'; // 실제 base65536 라이브러리 사용을 가정합니다.
+import { useState, useEffect } from "react";
+import { encode, decode } from "base65536";
+import pako from "pako";
 
 import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
 import { useCreateBlockNote } from "@blocknote/react";
-import CopyLink from './components/CopyLink';
+import CopyLink from "./components/CopyLink";
 
 export default function App() {
   const editor = useCreateBlockNote();
-  const [, setContentForURL] = useState<string>('');
+  const [, setContentForURL] = useState<string>("");
 
   useEffect(() => {
     const loadContentFromURL = async () => {
-      if (!editor) {
-        return;
-      }
+      if (!editor) return;
 
       const urlParams = new URLSearchParams(window.location.search);
-      const encoded = urlParams.get('c');
-
-      console.log("Encoded from URL:", encoded);
+      const encoded = urlParams.get("c");
 
       if (encoded) {
         try {
           const decodedBytes = decode(encoded);
-          const decodedString = new TextDecoder().decode(decodedBytes);
-          console.log("Decoded string:", decodedString);
 
+          let decompressed: Uint8Array;
+          try {
+            decompressed = pako.ungzip(decodedBytes);
+          } catch {
+            // 압축 안 되어 있음
+            decompressed = decodedBytes;
+          }
 
-          const blocks = await editor.tryParseMarkdownToBlocks(decodedString);
-          
+          const markdown = new TextDecoder().decode(decompressed);
+          const blocks = await editor.tryParseMarkdownToBlocks(markdown);
           editor.replaceBlocks(editor.topLevelBlocks, blocks);
-          
-          setContentForURL(decodedString);
+          setContentForURL(markdown);
         } catch (e) {
-          console.error("Failed to decode or load content:", e);
-          setContentForURL('');
+          console.error("Failed to decode or decompress content:", e);
+          setContentForURL("");
         }
       } else {
-        setContentForURL('');
+        setContentForURL("");
       }
     };
 
     loadContentFromURL();
-  }, [editor]); 
+  }, [editor]);
 
   const handleChange = async () => {
     if (!editor) return;
 
-    const newContentMarkdown = await editor.blocksToMarkdownLossy(editor.topLevelBlocks);
-    setContentForURL(newContentMarkdown); // URL 업데이트 및 상태 반영
+    const newContentMarkdown = await editor.blocksToMarkdownLossy(
+      editor.topLevelBlocks
+    );
+    setContentForURL(newContentMarkdown);
 
     const encoder = new TextEncoder();
-    const encodedContent = encoder.encode(newContentMarkdown);
-    const encodedString = encode(encodedContent); // base65536의 encode 함수
+    let encodedString: string;
 
-    window.history.replaceState({}, '', `?c=${encodedString}`);
+    if (newContentMarkdown.length >= 40) {
+      const encodedBytes = encoder.encode(newContentMarkdown);
+      const compressed = pako.gzip(encodedBytes);
+      encodedString = encode(compressed); // 압축 + 인코딩
+    } else {
+      const plainBytes = encoder.encode(newContentMarkdown);
+      encodedString = encode(plainBytes); // 압축 없이 인코딩
+    }
+
+    const newUrl = `${window.location.pathname}?c=${encodedString}`;
+    window.history.replaceState({}, "", newUrl);
     window.dispatchEvent(new Event("url-changed"));
   };
 
   return (
-      <main className='flex flex-col w-full h-screen'>
-        <div className='flex flex-row items-center justify-between w-full p-4 bg-background'>
-          <div>
-            <h1 className='text-2xl font-bold'>65536.md</h1>
-            <p className='text-sm text-gray-500'>A simple markdown editor</p>
-          </div>
-          <CopyLink />
+    <main className="flex flex-col w-full h-screen">
+      <div className="flex flex-row items-center justify-between w-full p-4 bg-background">
+        <div>
+          <h1 className="text-2xl font-bold">65536.md</h1>
+          <p className="text-sm text-muted-foreground">
+            A simple markdown editor
+          </p>
         </div>
-        <div id='editor-container' className='w-full p-4 h-full max-h-screen'>
-          <BlockNoteView
-            editor={editor}
-            onChange={handleChange}
-            className='w-full h-full'
-          />
-        </div>
-      </main>
+        <CopyLink />
+      </div>
+      <div id="editor-container" className="w-full p-4 h-full max-h-screen">
+        <BlockNoteView
+          editor={editor}
+          onChange={handleChange}
+          className="w-full h-full"
+        />
+      </div>
+    </main>
   );
-}
+}