Sharing via gzip

CHANGELOG.md

@@ -0,0 +1,5 @@
+# CHANGELOG
+
+## 2024-07-19
+
+- Better sharing support. When clicking "File -> Share", the Data Contract creates a shareable URL with the Data Contract YAML encoded in the URL. Previously, we only used base64 encoding, but it turned out that may lead to some URLs that are too long. To solve this, we gzip before encoding with base64. This allows for much large data contracts to be shared.

README.md

@@ -11,7 +11,7 @@ The [Data Contract Editor](https://editor.datacontract.com) is like VS Code, but
 - ✅ Live HTML preview
 - ✅ Share data contracts via URLs
 
-Try it out at [editor.datacontract.com](https://editor.datacontract.com).
+Try it out at [editor.datacontract.com](https://editor.datacontract.com). And if you like it, please star the repository.
 
 ![Data Contract Editor](images/screenshot.png)
 

src/sharing/encoding.js

@@ -0,0 +1,82 @@
+/* encoded = encodebase64(gzip(yaml)) */
+export async function encodeYamlCode(yamlCode) {
+	const compressed = await gzip(yamlCode);
+	return window.btoa(String.fromCharCode(...new Uint8Array(compressed)));
+}
+
+/* decoded = gunzip(decodebase64(queryparameter)) */
+export async function decodeQueryParameter(queryParameter) {
+	const compressed = Uint8Array.from(window.atob(queryParameter), c => c.charCodeAt(0));
+	const decompressed = await gunzip(compressed);
+	const decoder = new TextDecoder();
+	return decoder.decode(decompressed)
+}
+
+async function gzip(input) {
+	const encoder = new TextEncoder();
+	const data = encoder.encode(input);
+
+	const stream = new CompressionStream('gzip');
+	const writer = stream.writable.getWriter();
+	writer.write(data);
+	writer.close();
+
+	const compressedStream = stream.readable;
+	const reader = compressedStream.getReader();
+
+	let chunks = [];
+	let done = false;
+
+	while (!done) {
+		const { value, done: doneReading } = await reader.read();
+		if (value) {
+			chunks.push(value);
+		}
+		done = doneReading;
+	}
+
+	let size = 0;
+	chunks.forEach(chunk => size += chunk.length);
+
+	let compressed = new Uint8Array(size);
+	let offset = 0;
+	chunks.forEach(chunk => {
+		compressed.set(chunk, offset);
+		offset += chunk.length;
+	});
+
+	return compressed;
+}
+
+async function gunzip(data) {
+	const stream = new DecompressionStream('gzip');
+	const writer = stream.writable.getWriter();
+	writer.write(data);
+	writer.close();
+
+	const decompressedStream = stream.readable;
+	const reader = decompressedStream.getReader();
+
+	let chunks = [];
+	let done = false;
+
+	while (!done) {
+		const { value, done: doneReading } = await reader.read();
+		if (value) {
+			chunks.push(value);
+		}
+		done = doneReading;
+	}
+
+	let size = 0;
+	chunks.forEach(chunk => size += chunk.length);
+
+	let decompressed = new Uint8Array(size);
+	let offset = 0;
+	chunks.forEach(chunk => {
+		decompressed.set(chunk, offset);
+		offset += chunk.length;
+	});
+
+	return decompressed;
+}

src/storage/storage.js

@@ -1,4 +1,5 @@
 import { getExample } from "../templates/examples.js";
+import {decodeQueryParameter} from "../sharing/encoding.js";
 
 
 function loadDataContractYaml() {
@@ -18,9 +19,10 @@ export function loadInitialDocument() {
     const queryString = window.location.search;
     const urlParams = new URLSearchParams(queryString);
     if (urlParams.has("dc")) {
-        const value = window.atob(urlParams.get("dc"));
-        storeDataContractYaml(value);
-        window.location.search = "";
+        decodeQueryParameter(urlParams.get("dc")).then(value => {
+					storeDataContractYaml(value);
+					window.location.search = "";
+				});
     }
     if (isFirstLoadOfDataContractEditor()) {
         storeDataContractYaml(getExample());

src/ui/elements/nav-element.js

@@ -2,6 +2,7 @@ import { LitElement, html } from "lit";
 import * as monaco from "monaco-editor";
 
 import { getExample, getMinimal } from "../../templates/examples.js";
+import {encodeYamlCode} from "../../sharing/encoding.js";
 
 export class NavElement extends LitElement {
 
@@ -501,11 +502,14 @@ export class NavElement extends LitElement {
 	}
 
   handleShare() {
-		const yamlCode = this.editor.getValue();
-    const shareUrl = location.protocol + "//" + location.host + "/?dc=" + window.btoa(yamlCode);
-    navigator.clipboard.writeText(shareUrl);
-		this.toggleFileMenu();
-		this.notifyUser('Sharing prepared', 'Sharelink copied to Clipboard');
+
+
+		encodeYamlCode(this.editor.getValue()).then((encodedYaml) => {
+			const shareUrl = `${location.protocol}//${location.host}/?dc=${encodedYaml}`;
+			navigator.clipboard.writeText(shareUrl);
+			this.toggleFileMenu();
+			this.notifyUser('Sharing prepared', 'Sharelink copied to Clipboard');
+		});
 	}
 
   handleClear() {