Merge pull request #4 from RyosukeDTomita/feature/decode-text

feat: encode decode memo

Author: RyosukeDTomita

README.md

@@ -16,7 +16,7 @@
 
 URLのクエリパラメータにメモの内容を保存するブラウザベースのメモアプリケーションです。サーバー不要で動作し、URLを保存・共有するだけで複数デバイス間でのメモ同期や他のユーザーとの共有が可能です。
 
-https://sigma.github.io/url-query-memo/
+https://ryosukedtomita.github.io/url-query-memo
 
 ---
 

url-memo-app/__tests__/utils/urlDecoder.test.ts

@@ -1,10 +1,12 @@
 import { decodeTextFromUrl } from '@/utils/urlDecoder';
+import { encodeTextToUrl } from '@/utils/urlEncoder';
 
 describe('decodeTextFromUrl', () => {
-  it('should decode Base64 to simple text', () => {
-    const encoded = 'SGVsbG8gV29ybGQ=';
+  it('should decode compressed text correctly', () => {
+    const originalText = 'Hello World';
+    const encoded = encodeTextToUrl(originalText);
     const decoded = decodeTextFromUrl(encoded);
-    expect(decoded).toBe('Hello World');
+    expect(decoded).toBe(originalText);
   });
 
   it('should handle empty string', () => {
@@ -15,40 +17,42 @@ describe('decodeTextFromUrl', () => {
 
   it('should decode Japanese text correctly', () => {
     const originalText = 'こんにちは世界';
-    const encoded = Buffer.from(originalText, 'utf-8').toString('base64');
+    const encoded = encodeTextToUrl(originalText);
     const decoded = decodeTextFromUrl(encoded);
     expect(decoded).toBe(originalText);
   });
 
   it('should handle special characters', () => {
     const originalText = '!@#$%^&*()_+-=[]{}|;\':",./<>?';
-    const encoded = Buffer.from(originalText, 'utf-8').toString('base64');
+    const encoded = encodeTextToUrl(originalText);
     const decoded = decodeTextFromUrl(encoded);
     expect(decoded).toBe(originalText);
   });
 
   it('should handle multi-line text', () => {
     const originalText = 'Line 1\nLine 2\nLine 3';
-    const encoded = Buffer.from(originalText, 'utf-8').toString('base64');
+    const encoded = encodeTextToUrl(originalText);
     const decoded = decodeTextFromUrl(encoded);
     expect(decoded).toBe(originalText);
   });
 
   it('should decode emoji correctly', () => {
     const originalText = '😀😃😄😁😆';
-    const encoded = Buffer.from(originalText, 'utf-8').toString('base64');
+    const encoded = encodeTextToUrl(originalText);
     const decoded = decodeTextFromUrl(encoded);
     expect(decoded).toBe(originalText);
   });
 
-  it('should handle invalid Base64 gracefully', () => {
-    const invalidEncoded = 'This is not valid Base64!@#$%';
-    expect(() => decodeTextFromUrl(invalidEncoded)).toThrow('Invalid encoded text');
+  it('should handle invalid compressed data gracefully', () => {
+    // LZ-string returns null for invalid data, which should result in an error
+    const invalidEncoded = 'This is not valid compressed data!@#$%';
+    expect(() => decodeTextFromUrl(invalidEncoded)).toThrowError('Invalid compressed data');
   });
 
-  it('should handle corrupted Base64', () => {
-    const corruptedEncoded = 'SGVsbG8gV29ybGQ'; // Missing padding
-    const decoded = decodeTextFromUrl(corruptedEncoded);
-    expect(decoded).toBe('Hello World');
+  it('should handle very long text', () => {
+    const originalText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '.repeat(50);
+    const encoded = encodeTextToUrl(originalText);
+    const decoded = decodeTextFromUrl(encoded);
+    expect(decoded).toBe(originalText);
   });
 });

url-memo-app/__tests__/utils/urlEncoder.test.ts

@@ -1,10 +1,12 @@
 import { encodeTextToUrl } from '@/utils/urlEncoder';
+import { decodeTextFromUrl } from '@/utils/urlDecoder';
 
 describe('encodeTextToUrl', () => {
-  it('should encode simple text to Base64', () => {
+  it('should encode simple text', () => {
     const text = 'Hello World';
     const encoded = encodeTextToUrl(text);
-    expect(encoded).toBe('SGVsbG8gV29ybGQ=');
+    const decoded = decodeTextFromUrl(encoded);
+    expect(decoded).toBe(text);
   });
 
   it('should handle empty string', () => {
@@ -16,40 +18,43 @@ describe('encodeTextToUrl', () => {
   it('should encode Japanese text correctly', () => {
     const text = 'こんにちは世界';
     const encoded = encodeTextToUrl(text);
-    const decoded = Buffer.from(encoded, 'base64').toString('utf-8');
+    const decoded = decodeTextFromUrl(encoded);
     expect(decoded).toBe(text);
   });
 
   it('should handle special characters', () => {
     const text = '!@#$%^&*()_+-=[]{}|;\':",./<>?';
     const encoded = encodeTextToUrl(text);
-    const decoded = Buffer.from(encoded, 'base64').toString('utf-8');
+    const decoded = decodeTextFromUrl(encoded);
     expect(decoded).toBe(text);
   });
 
   it('should handle multi-line text', () => {
     const text = 'Line 1\nLine 2\nLine 3';
     const encoded = encodeTextToUrl(text);
-    const decoded = Buffer.from(encoded, 'base64').toString('utf-8');
+    const decoded = decodeTextFromUrl(encoded);
     expect(decoded).toBe(text);
   });
 
   it('should encode emoji correctly', () => {
     const text = '😀😃😄😁😆';
     const encoded = encodeTextToUrl(text);
-    const decoded = Buffer.from(encoded, 'base64').toString('utf-8');
+    const decoded = decodeTextFromUrl(encoded);
     expect(decoded).toBe(text);
   });
 
-  it('should handle very long text', () => {
+  it('should handle very long text with compression', () => {
     const text = 'a'.repeat(1000);
     const encoded = encodeTextToUrl(text);
-    const decoded = Buffer.from(encoded, 'base64').toString('utf-8');
+    const decoded = decodeTextFromUrl(encoded);
     expect(decoded).toBe(text);
+    // Compression should make it much smaller than base64
+    expect(encoded.length).toBeLessThan(text.length);
   });
 
   it('should throw error for text exceeding URL limit', () => {
-    const text = 'a'.repeat(3000);
+    // Create a very large text that will exceed 2048 chars when compressed
+    const text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '.repeat(500) + 'a'.repeat(10000);
     expect(() => encodeTextToUrl(text)).toThrow('Text is too long to be safely encoded in URL');
   });
 });

url-memo-app/package-lock.json

@@ -11,6 +11,8 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
+    "@types/lz-string": "^1.3.34",
+    "lz-string": "^1.5.0",
     "next": "15.4.2",
     "react": "19.1.0",
     "react-dom": "19.1.0"

url-memo-app/package.json

@@ -1,17 +1,16 @@
+import LZString from 'lz-string';
+
 export function decodeTextFromUrl(urlParam: string): string {
   if (urlParam === '') {
     return '';
   }
 
   try {
-    // Check if the string is valid Base64
-    const base64Regex = /^[A-Za-z0-9+/]*={0,2}$/;
-    if (!base64Regex.test(urlParam)) {
+    const decompressed = LZString.decompressFromEncodedURIComponent(urlParam);
+    if (decompressed === null) {
       throw new Error('Invalid encoded text');
     }
-
-    const decoded = Buffer.from(urlParam, 'base64').toString('utf-8');
-    return decoded;
+    return decompressed;
   } catch (error) {
     throw new Error('Invalid encoded text');
   }

url-memo-app/utils/urlDecoder.ts

@@ -1,15 +1,17 @@
+import LZString from 'lz-string';
+
 const MAX_URL_LENGTH = 2048;
 
 export function encodeTextToUrl(text: string): string {
   if (text === '') {
     return '';
   }
 
-  const base64Encoded = Buffer.from(text, 'utf-8').toString('base64');
+  const compressed = LZString.compressToEncodedURIComponent(text);
 
-  if (base64Encoded.length > MAX_URL_LENGTH) {
+  if (compressed.length > MAX_URL_LENGTH) {
     throw new Error('Text is too long to be safely encoded in URL');
   }
 
-  return base64Encoded;
+  return compressed;
 }