Re-SNBT

Bringing back SNBT into the main editor, since GUI editing isn't quite ready yet, and I think I'm going to have both of them available while I develop GUI support. I don't want this branch to get stale from not being used in production, so I'm gonna bring it to `main` so I can dogfood it :P

index.html

@@ -29,7 +29,8 @@
 
 <main>
 
-<nbt-tree id="editor"></nbt-tree>
+<textarea id="editor" disabled placeholder="NBT data will show here..." wrap="off" spellcheck="false" autocomplete="off" autocapitalize="none" autocorrect="off"></textarea>
+<nbt-tree id="tree"></nbt-tree>
 
 <dialog id="formatDialog">
   <form id="formatForm" method="dialog">

src/app.ts

@@ -45,7 +45,8 @@ document.addEventListener("drop",async event => {
 });
 
 saver.addEventListener("click",async () => {
-  const nbt = editor.value!;
+  const snbt = editor.value;
+  const nbt = parse(snbt);
   const options = saveOptions();
   const nbtData = new NBTData(nbt,options);
   const file = await writeFile(nbtData);
@@ -82,6 +83,7 @@ demo.then(openFile);
 export async function openFile(file: File | FileSystemFileHandle | DataTransferFile): Promise<void> {
   saver.disabled = true;
   formatOpener.disabled = true;
+  editor.disabled = true;
 
   if (file instanceof DataTransferItem){
     const handle = await file.getAsFileSystemHandle?.() ?? null;
@@ -97,14 +99,16 @@ export async function openFile(file: File | FileSystemFileHandle | DataTransferF
   const nbt = await readFile(file);
   if (nbt === null) return;
 
+  const snbt = stringify(nbt,{ space: 2 });
   openOptions(nbt);
   name = file.name;
 
   document.title = `Dovetail - ${name}`;
 
   saver.disabled = false;
   formatOpener.disabled = false;
-  editor.value = nbt;
+  editor.value = snbt;
+  editor.disabled = false;
 }
 
 /**

src/global.d.ts

@@ -17,7 +17,8 @@ declare global {
   var saver: HTMLButtonElement;
   var fileOpener: HTMLInputElement;
   var formatOpener: HTMLButtonElement;
-  var editor: NBTTree;
+  var editor: HTMLTextAreaElement;
+  var tree: NBTTree;
   var formatDialog: HTMLDialogElement;
   var formatForm: HTMLFormElement & {
     readonly elements: FormatOptionsCollection;

src/nbt-tree/NBTBranch.ts

@@ -32,7 +32,7 @@ export class NBTBranch<T extends Tag = Tag> extends HTMLElement {
       case 10:
       case 11:
       case 12: {
-        const value = this.#value as ByteArrayTag | ListTag | CompoundTag | IntArrayTag | LongArrayTag;
+        const value = this.#value as ByteArrayTag | ListTag<Tag> | CompoundTag | IntArrayTag | LongArrayTag;
         const details = document.createElement("details");
         const summary = document.createElement("summary");
         if (this.#name !== null){
@@ -42,6 +42,7 @@ export class NBTBranch<T extends Tag = Tag> extends HTMLElement {
         }
         details.append(summary);
         for (const [name,entry] of Object.entries(value)){
+          if (entry === undefined) continue;
           details.append(new NBTBranch(entry,name));
         }
         this.append(details);

styles.css

@@ -62,12 +62,35 @@ main {
   display: flex;
 }
 
+textarea {
+  padding: 8px;
+  flex-grow: 1;
+  font-size: 13px;
+  font-family: ui-monospace, "Noto Sans Mono", "Cousine", monospace;
+  line-height: 1.4;
+  caret-color: currentColor;
+  background: #aaaaaa40;
+  border: 0 solid transparent;
+  border-left-width: env(safe-area-inset-left);
+  border-right-width: env(safe-area-inset-right);
+  border-top: 1px solid #80808080;
+  border-bottom-width: env(safe-area-inset-bottom);
+  border-radius: 0;
+  outline: none;
+  resize: none;
+}
+
+textarea[disabled] {
+  opacity: unset;
+}
+
 nbt-tree {
   padding: 8px 12px;
   position: absolute;
   inset: 0;
   height: 100%;
-  display: flex;
+  /* display: flex; */
+  display: none;
   gap: 1em;
   flex-direction: column;
   font-size: 13px;