From a4698eee43c8a10c68ca489646c320f66bfb6b10 Mon Sep 17 00:00:00 2001
From: Romein van Buren <romein@vburen.nl>
Date: Thu, 19 Jan 2023 08:57:25 +0100
Subject: [PATCH] Use Webdesq objecttree instead highlight.js

---
 frontend/package-lock.json                    |  16 --
 frontend/package.json                         |   3 -
 frontend/package.json.md5                     |   2 +-
 frontend/src/components/code-example.svelte   |   8 +-
 frontend/src/components/codeviewer.svelte     |  74 -------
 frontend/src/components/objecttree.svelte     | 208 ++++++++++++++++++
 frontend/src/components/objectviewer.svelte   |  52 +++++
 .../connection/collection/find.svelte         |  11 +-
 .../connection/collection/indexes.svelte      |   8 +-
 9 files changed, 270 insertions(+), 112 deletions(-)
 delete mode 100644 frontend/src/components/codeviewer.svelte
 create mode 100644 frontend/src/components/objecttree.svelte
 create mode 100644 frontend/src/components/objectviewer.svelte

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ce0aa5a..dd2fcc9 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -7,9 +7,6 @@
     "": {
       "name": "frontend",
       "version": "0.0.0",
-      "dependencies": {
-        "highlight.js": "^11.7.0"
-      },
       "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^1.0.1",
         "eslint": "^8.31.0",
@@ -1891,14 +1888,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/highlight.js": {
-      "version": "11.7.0",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.7.0.tgz",
-      "integrity": "sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==",
-      "engines": {
-        "node": ">=12.0.0"
-      }
-    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -4534,11 +4523,6 @@
         "has-symbols": "^1.0.2"
       }
     },
-    "highlight.js": {
-      "version": "11.7.0",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.7.0.tgz",
-      "integrity": "sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ=="
-    },
     "ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 8e44cb4..6834bc3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,8 +21,5 @@
       "nodejs",
       "svelte3"
     ]
-  },
-  "dependencies": {
-    "highlight.js": "^11.7.0"
   }
 }
diff --git a/frontend/package.json.md5 b/frontend/package.json.md5
index 83aff09..e072450 100755
--- a/frontend/package.json.md5
+++ b/frontend/package.json.md5
@@ -1 +1 @@
-d445254075c563425c5b0fd21e804d4a
\ No newline at end of file
+e25516ba8abdacf5ab40609a5d48f542
\ No newline at end of file
diff --git a/frontend/src/components/code-example.svelte b/frontend/src/components/code-example.svelte
index ddd44a9..06eb5ea 100644
--- a/frontend/src/components/code-example.svelte
+++ b/frontend/src/components/code-example.svelte
@@ -1,18 +1,12 @@
 <script>
-  import CodeViewer from './codeviewer.svelte';
-
   export let code = '';
-
-  let modalCode = '';
 </script>
 
-<div class="examplecode" on:pointerdown={() => modalCode = code}>
+<div class="examplecode">
   <strong>CLI command</strong>
   <code>{code}</code>
 </div>
 
-<CodeViewer bind:code={modalCode} language="js" />
-
 <style>
   .examplecode {
     border: 1px solid #ccc;
diff --git a/frontend/src/components/codeviewer.svelte b/frontend/src/components/codeviewer.svelte
deleted file mode 100644
index a538740..0000000
--- a/frontend/src/components/codeviewer.svelte
+++ /dev/null
@@ -1,74 +0,0 @@
-<script>
-  import hljs from 'highlight.js/lib/core';
-  import hljsJSON from 'highlight.js/lib/languages/json';
-  import hljsJavaScript from 'highlight.js/lib/languages/javascript';
-  import Icon from './icon.svelte';
-  import Modal from './modal.svelte';
-  import 'highlight.js/styles/atom-one-dark.css';
-  import { onDestroy } from 'svelte';
-
-  export let code = '';
-  export let language = 'json';
-
-  const languageNames = {
-    json: 'JSON',
-    js: 'JavaScript',
-  };
-
-  hljs.registerLanguage('json', hljsJSON);
-  hljs.registerLanguage('js', hljsJavaScript);
-
-  let copySucceeded = false;
-  let timeout;
-  $: highlighted = code ? hljs.highlight(code, { language }).value : '';
-
-  async function copy() {
-    await navigator.clipboard.writeText(code);
-    copySucceeded = true;
-    timeout = setTimeout(() => copySucceeded = false, 1500);
-  }
-
-  onDestroy(() => clearTimeout(timeout));
-</script>
-
-{#if code}
-  <Modal bind:show={code} title="{languageNames[language]} viewer" contentPadding={false}>
-    <div class="codeblock">
-      <div class="buttons">
-        <button class="btn" on:click={copy}>
-          <Icon name={copySucceeded ? 'check' : 'clipboard'} />
-        </button>
-      </div>
-      <pre><code class="hljs">{@html highlighted}</code></pre>
-    </div>
-  </Modal>
-{/if}
-
-<style>
-  .codeblock {
-    position: relative;
-  }
-  .buttons {
-    position: absolute;
-    top: 0;
-    right: 0;
-    margin: 1rem;
-  }
-  .buttons button {
-    margin-left: 1rem;
-    background: none;
-    border: 1px solid rgba(255, 255, 255, 0.3);
-  }
-  .buttons button:hover {
-    background-color: rgba(0, 0, 0, 0.3);
-  }
-
-  .hljs {
-    user-select: text;
-    line-height: 1.2;
-  }
-
-  pre :global(::selection) {
-    background: rgba(5, 5, 5, 0.8);
-  }
-</style>
diff --git a/frontend/src/components/objecttree.svelte b/frontend/src/components/objecttree.svelte
new file mode 100644
index 0000000..1d4c889
--- /dev/null
+++ b/frontend/src/components/objecttree.svelte
@@ -0,0 +1,208 @@
+<script>
+  export let data;
+  export let depth = 0;
+  export let readonly = false;
+  export let level = 0;
+  export let last = true;
+  export let draggable = false;
+  export let kp = '';
+
+  const collapsedSymbol = '...';
+  const getType = i => {
+    if (i === null) {
+      return 'null';
+    }
+    return typeof i;
+  };
+
+  let displayOnly = true;
+  let items;
+  let isArray;
+  let openBracket;
+  let closeBracket;
+  $: {
+    items = getType(data) === 'object' ? Object.keys(data) : [];
+    isArray = Array.isArray(data);
+    openBracket = isArray ? '[' : '{';
+    closeBracket = isArray ? ']' : '}';
+  }
+
+  let collapsed;
+  $: collapsed = depth < level;
+
+  const format = i => {
+    switch (getType(i)) {
+      case 'string':
+        return `${i}`;
+      case 'function':
+        return 'f () {...}';
+      case 'symbol':
+        return i.toString();
+      default:
+        return i;
+    }
+  };
+  const clicked = e => {
+    if (e.shiftKey) {
+      if (depth == 0) {
+        depth = 999;
+      }
+      else {
+        depth = 0;
+      }
+    }
+    collapsed = !collapsed;
+  };
+
+  let invalid = false;
+  let dbg;
+
+  function json2data() {
+    try {
+      data = JSON.parse(dbg.value);
+      invalid = false;
+    }
+    catch {
+      invalid = true;
+      if (dbg.value.trim == '') {
+        data = {};
+      }
+    }
+  }
+
+  function dragstart(e, keypath, value) {
+    console.log('kp:', keypath);
+    const item = {};
+    item[keypath] = value;
+    e.dataTransfer.setData('text/plain', JSON.stringify(item));
+  }
+
+  function onKeydown(event) {
+    const save = (event.key === 's') && (event.metaKey || event.ctrlKey);
+    if (!save) {
+      event.stopPropagation();
+    }
+  }
+</script>
+
+{#if displayOnly}
+  {#if items.length}
+    <span class:root={level == 0} class:hidden={collapsed}>
+      {#if draggable && isArray}
+        <span on:dragstart={e => dragstart(e, kp, data)} draggable="true" class="bracket" on:click={clicked} tabindex="0">{openBracket}</span>
+      {:else}
+        <span class="bracket" on:click={clicked} tabindex="0">{openBracket}</span>
+      {/if}
+      <ul on:dblclick={() => (readonly ? displayOnly = true : displayOnly = false)} >
+        {#each items as i, idx}
+          <li>
+            {#if !isArray}
+              {#if draggable}
+                <span on:dragstart={e => dragstart(e, kp ? kp + '.' + i : i, data[i])} draggable="true" class="key">{i}:</span>
+              {:else}
+                <span class="key">{i}:</span>
+              {/if}
+            {/if}
+            {#if getType(data[i]) === 'object'}
+              <svelte:self {readonly} {draggable} kp={kp ? kp + '.' + i : i} data={data[i]} {depth} level={level + 1} last={idx === items.length - 1} />
+            {:else}
+              {#if draggable}
+                <span on:dragstart={e => dragstart(e, kp ? kp + '.' + i : i, data[i])} draggable="true" class="val {getType(data[i])}">{format(data[i])}</span>{#if idx < items.length - 1}<span draggable class="comma">,</span>{/if}
+              {:else}
+                <span class="val {getType(data[i])}">{format(data[i])}</span>{#if idx < items.length - 1}<span class="comma">,</span>{/if}
+              {/if}
+            {/if}
+          </li>
+        {/each}
+      </ul>
+      <span class="bracket" on:click={clicked} tabindex="0">{closeBracket}</span>{#if !last}<span
+          class="comma">,</span>
+    {/if}
+    </span>
+    <span style="padding: {level == 0 ? 10 : 0}px;" class="bracket" class:hidden={!collapsed} on:click={clicked} tabindex="0">{openBracket}{collapsedSymbol}{closeBracket}</span>{#if !last && collapsed}<span class="comma">,</span>{/if}
+  {:else}
+    {@html isArray ? '[]' : '{}'}
+  {/if}
+{:else}
+  <textarea on:keydown="{onKeydown}" class="debug" spellcheck="false" bind:this={dbg} class:invalid on:input={json2data}>{JSON.stringify(data, null, 2)}</textarea>
+{/if}
+
+<style>
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-family: inherit;
+    font-size: inherit;
+    padding-left: var(--nodePaddingLeft, 1rem);
+    border-left: var(--nodeBorderLeft, 1px dashed #d0d0f0);
+    color: var(--nodeColor, #666);
+  }
+  li {
+    white-space: nowrap;
+  }
+  .root {
+    font-family: menlo, monospace;
+    font-size: 90%;
+    overflow: auto;
+  }
+  .hidden {
+    display: none;
+  }
+  .bracket {
+    cursor: pointer;
+  }
+  .bracket:hover {
+    background: var(--bracketHoverBackground, #d1d5db);
+  }
+  .comma {
+    color: var(--nodeColor, #374151);
+    opacity: 0.5;
+  }
+  .val {
+    color: var(--leafDefaultColor, #9ca3af);
+    white-space: nowrap;
+  }
+  .val[draggable] {
+    cursor: move;
+  }
+  .val.string {
+    color: var(--leafStringColor, #000);
+  }
+  .val.string:before {
+    content: "'";
+    opacity: 0.4;
+  }
+  .val.string:after {
+    content: "'";
+    opacity: 0.4;
+  }
+  .val.number {
+    color: var(--leafNumberColor, #d97706);
+  }
+  .val.boolean {
+    color: var(--leafBooleanColor, #3994dd);
+  }
+  .key.draggable {
+    cursor: move;
+  }
+
+  textarea.debug {
+    font-family: menlo, monospace;
+    padding: 10px;
+    flex: 1 0;
+    white-space: pre;
+    font-size: 90%;
+    border: none;
+    margin: 0;
+    height: 100%;
+    outline: none;
+    line-height: 1.5;
+    resize: none;
+  }
+
+  textarea.invalid {
+    background: #ffe3e3;
+    color: #b30202 !important;
+  }
+</style>
diff --git a/frontend/src/components/objectviewer.svelte b/frontend/src/components/objectviewer.svelte
new file mode 100644
index 0000000..621a304
--- /dev/null
+++ b/frontend/src/components/objectviewer.svelte
@@ -0,0 +1,52 @@
+<script>
+  import Icon from './icon.svelte';
+  import Modal from './modal.svelte';
+  import ObjectTree from './objecttree.svelte';
+  import { onDestroy } from 'svelte';
+
+  export let data;
+
+  let copySucceeded = false;
+  let timeout;
+
+  async function copy() {
+    await navigator.clipboard.writeText(JSON.stringify(data));
+    copySucceeded = true;
+    timeout = setTimeout(() => copySucceeded = false, 1500);
+  }
+
+  onDestroy(() => clearTimeout(timeout));
+</script>
+
+{#if data}
+  <Modal bind:show={data} title="Object viewer" contentPadding={false}>
+    <div class="objectviewer">
+      <div class="buttons">
+        <button class="btn" on:click={copy}>
+          <Icon name={copySucceeded ? 'check' : 'clipboard'} />
+        </button>
+      </div>
+      <div class="code">
+        <ObjectTree {data} />
+      </div>
+    </div>
+  </Modal>
+{/if}
+
+<style>
+  .objectviewer {
+    position: relative;
+  }
+  .code {
+    padding: 1rem;
+  }
+  .buttons {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 1rem;
+  }
+  .buttons button {
+    margin-left: 1rem;
+  }
+</style>
diff --git a/frontend/src/organisms/connection/collection/find.svelte b/frontend/src/organisms/connection/collection/find.svelte
index 86039b5..f8ca158 100644
--- a/frontend/src/organisms/connection/collection/find.svelte
+++ b/frontend/src/organisms/connection/collection/find.svelte
@@ -4,7 +4,7 @@
   import { input } from '../../../actions';
   import ObjectGrid from '../../../components/objectgrid.svelte';
   import Icon from '../../../components/icon.svelte';
-  import CodeViewer from '../../../components/codeviewer.svelte';
+  import ObjectViewer from '../../../components/objectviewer.svelte';
 
   export let collection;
 
@@ -21,7 +21,7 @@
   let submittedForm = {};
   let queryField;
   let activePath = '';
-  let json = '';
+  let objectViewerData;
   $: code = `db.${collection.key}.find(${form.query || '{}'}${form.fields && form.fields !== '{}' ? `, ${form.fields}` : ''}).sort(${form.sort})${form.skip ? `.skip(${form.skip})` : ''}${form.limit ? `.limit(${form.limit})` : ''};`;
 
   async function submitQuery() {
@@ -57,10 +57,7 @@
 
   function openJson(itemId) {
     const item = result?.results?.find(i => i._id == itemId);
-    if (!item) {
-      return;
-    }
-    json = JSON.stringify(item, undefined, 2);
+    objectViewerData = item;
   }
 
   export function performQuery(q) {
@@ -133,7 +130,7 @@
   </div>
 </div>
 
-<CodeViewer bind:code={json} language="json" />
+<ObjectViewer bind:data={objectViewerData} />
 
 <style>
   .find {
diff --git a/frontend/src/organisms/connection/collection/indexes.svelte b/frontend/src/organisms/connection/collection/indexes.svelte
index 22e08a2..86072a4 100644
--- a/frontend/src/organisms/connection/collection/indexes.svelte
+++ b/frontend/src/organisms/connection/collection/indexes.svelte
@@ -1,5 +1,5 @@
 <script>
-  import CodeViewer from '../../../components/codeviewer.svelte';
+  import ObjectViewer from '../../../components/objectviewer.svelte';
   import ObjectGrid from '../../../components/objectgrid.svelte';
   import { DropIndex, GetIndexes } from '../../../../wailsjs/go/app/App';
 
@@ -7,7 +7,7 @@
 
   let indexes = [];
   let activeKey = '';
-  let json = '';
+  let objectViewerData = '';
 
   async function getIndexes() {
     const result = await GetIndexes(collection.hostKey, collection.dbKey, collection.key);
@@ -29,7 +29,7 @@
 
   function openJson(indexId) {
     const item = indexes?.filter(i => i.name == indexId);
-    json = JSON.stringify(item, undefined, 2);
+    objectViewerData = item;
   }
 </script>
 
@@ -50,7 +50,7 @@
   </div>
 </div>
 
-<CodeViewer bind:code={json} language="json" />
+<ObjectViewer bind:data={objectViewerData} />
 
 <style>
   .indexes {