feat: Add support to import and export using URL param

css/main.css

@@ -142,6 +142,13 @@ h2 {
  top: 3px;
 }
 
+#share-btn {
+ display: inline-block;
+ position: relative;
+ top: -4px;
+ cursor: pointer;
+}
+
 .left-panel {
  width: 200px;
  height: calc(100% - 48px);

index.html

@@ -30,6 +30,9 @@ <h2 class="left">Online JSON Compare</h2>
 	c-1.908-1.243-2.858-2.807-2.858-4.716l-4.853-130.47c0-2.667,0.953-4.665,2.856-5.996c2.474-2.093,4.758-3.14,6.854-3.14h62.809
 	c2.098,0,4.38,1.043,6.854,3.14c1.902,1.331,2.851,3.14,2.851,5.424L292.088,304.357z"/>
  </svg> Invalid JSON</span>
+ <span id="share-btn" title="Share" >
+ <svg class="header-icon" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 1792 1792" fill="#ffffff"><path d="M1344 1024q133 0 226.5 93.5t93.5 226.5-93.5 226.5-226.5 93.5-226.5-93.5-93.5-226.5q0-12 2-34l-360-180q-92 86-218 86-133 0-226.5-93.5t-93.5-226.5 93.5-226.5 226.5-93.5q126 0 218 86l360-180q-2-22-2-34 0-133 93.5-226.5t226.5-93.5 226.5 93.5 93.5 226.5-93.5 226.5-226.5 93.5q-126 0-218-86l-360 180q2 22 2 34t-2 34l360 180q92-86 218-86z"/></svg>
+ </span>
  <a href="https://github.com/justspamjustin/online-json-diff" title="fork me on github!">
  <svg class="header-icon" width="38" height="38" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1664 896q0 251-146.5 451.5t-378.5 277.5q-27 5-39.5-7t-12.5-30v-211q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105 20.5-150.5q0-121-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27t-83.5-38.5-86-13.5q-44 113-7 204-79 85-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-40 36-49 103-21 10-45 15t-57 5-65.5-21.5-55.5-62.5q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 89t.5 54q0 18-13 30t-40 7q-232-77-378.5-277.5t-146.5-451.5q0-209 103-385.5t279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z" fill="#fff"/></svg>
  </a>

js/main.js

@@ -118,9 +118,80 @@
  return $('body').hasClass('lighttheme');
  }
 
- BackboneEvents.mixin(JsonInputView.prototype);
+ const URL_LIMIT = 4000;
+
+ function encodeData(diff) {
+ try {
+ const encoded = encodeURIComponent(diff)
+ if (encoded.length > URL_LIMIT) {
+ throw new Error(`Encoded data is too long (${encoded.length} characters)`)
+ }
+ return encoded
+ } catch (error) {
+ throw new Error(error.message || `Failed to encode data`)
+ }
+ }
+
+ function decodeData(encodedParam) {
+ if (!encodedParam) return undefined;
+ try {
+ return decodeURIComponent(encodedParam)
+ } catch (error) {
+ throw new Error(error.message || `Failed to decode data`)
+ }
+ }
+
+ async function copyToClipboard(text) {
+ if (navigator.clipboard) {
+ await navigator.clipboard.writeText(text);
+ } else {
+ const el = document.createElement('textarea');
+ el.value = text;
+ document.body.appendChild(el);
+ el.select();
+ document.execCommand('copy');
+ document.body.removeChild(el);
+ }
+ }
+
+ document.querySelector('#share-btn').addEventListener('click', async () => {
+ try {
+ const currentDiff = getCurrentDiff();
+ const encoded = encodeData(currentDiff);
+ const url = `${window.location.origin}?d=${encoded}`;
+ await copyToClipboard(url);
+ alert('URL copied to clipboard');
+ } catch (error) {
+ alert(error.message || 'Failed to copy URL to clipboard');
+ }
+ })
+
+
  var currentDiff = localStorage.getItem('current-diff') && JSON.parse(localStorage.getItem('current-diff'));
 
+
+ // Load data from url if present
+ const urlData = new URLSearchParams(window.location.search).get("d");
+
+ if (urlData) {
+ try {
+ const decoded = decodeData(urlData);
+ const urlDiff = JSON.parse(decoded);
+
+ if (urlDiff && (urlDiff.left || urlDiff.right)) {
+ currentDiff = urlDiff;
+
+ saveDiff(JSON.stringify(currentDiff));
+ }
+ } catch(error) {
+ console.error('Failed to load data from URL', error);
+ } finally {
+ window.history.replaceState({}, document.title, window.origin);
+ }
+ }
+
+ BackboneEvents.mixin(JsonInputView.prototype);
+
  var leftInputView = new JsonInputView(document.getElementById('json-diff-left'), currentDiff && currentDiff.left);
  var rightInputView = new JsonInputView(document.getElementById('json-diff-right'), currentDiff && currentDiff.right);
  leftInputView.on('change', onInputChange);
@@ -180,9 +251,9 @@
  });
  }
 
- function saveDiff() {
+ function saveDiff(diff) {
  if (!localStorage.getItem('dont-save-diffs')) {
- var currentDiff = getCurrentDiff();
+ var currentDiff = diff || getCurrentDiff();
  localStorage.setItem('current-diff', currentDiff);
  }
  }