Initial

.gitignore

@@ -0,0 +1,2 @@
+/node_modules/
+/main.js

bun.lock

@@ -0,0 +1,37 @@
+{
+  "lockfileVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "obsidian-bytediag",
+      "devDependencies": {
+        "@types/node": "^22.14.0",
+        "obsidian": "^1.8.7",
+      },
+    },
+  },
+  "packages": {
+    "@codemirror/state": ["@codemirror/state@6.5.2", "", { "dependencies": { "@marijn/find-cluster-break": "^1.0.0" } }, "sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA=="],
+
+    "@codemirror/view": ["@codemirror/view@6.36.5", "", { "dependencies": { "@codemirror/state": "^6.5.0", "style-mod": "^4.1.0", "w3c-keyname": "^2.2.4" } }, "sha512-cd+FZEUlu3GQCYnguYm3EkhJ8KJVisqqUsCOKedBoAt/d9c76JUUap6U0UrpElln5k6VyrEOYliMuDAKIeDQLg=="],
+
+    "@marijn/find-cluster-break": ["@marijn/find-cluster-break@1.0.2", "", {}, "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g=="],
+
+    "@types/codemirror": ["@types/codemirror@5.60.8", "", { "dependencies": { "@types/tern": "*" } }, "sha512-VjFgDF/eB+Aklcy15TtOTLQeMjTo07k7KAjql8OK5Dirr7a6sJY4T1uVBDuTVG9VEmn1uUsohOpYnVfgC6/jyw=="],
+
+    "@types/estree": ["@types/estree@1.0.7", "", {}, "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ=="],
+
+    "@types/node": ["@types/node@22.14.0", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-Kmpl+z84ILoG+3T/zQFyAJsU6EPTmOCj8/2+83fSN6djd6I4o7uOuGIH6vq3PrjY5BGitSbFuMN18j3iknubbA=="],
+
+    "@types/tern": ["@types/tern@0.23.9", "", { "dependencies": { "@types/estree": "*" } }, "sha512-ypzHFE/wBzh+BlH6rrBgS5I/Z7RD21pGhZ2rltb/+ZrVM1awdZwjx7hE5XfuYgHWk9uvV5HLZN3SloevCAp3Bw=="],
+
+    "moment": ["moment@2.29.4", "", {}, "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="],
+
+    "obsidian": ["obsidian@1.8.7", "", { "dependencies": { "@types/codemirror": "5.60.8", "moment": "2.29.4" }, "peerDependencies": { "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.0.0" } }, "sha512-h4bWwNFAGRXlMlMAzdEiIM2ppTGlrh7uGOJS6w4gClrsjc+ei/3YAtU2VdFUlCiPuTHpY4aBpFJJW75S1Tl/JA=="],
+
+    "style-mod": ["style-mod@4.1.2", "", {}, "sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw=="],
+
+    "undici-types": ["undici-types@6.21.0", "", {}, "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="],
+
+    "w3c-keyname": ["w3c-keyname@2.2.8", "", {}, "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="],
+  }
+}

main.ts

@@ -0,0 +1,52 @@
+import { Plugin } from 'obsidian';
+
+const headings = ['', '0', '1', '2', '3', '4', '5', '6', '7'];
+
+type TableState = {
+  maxWidth: number;
+  curOffset: number;
+  curWidth: number;
+  tbody: HTMLElement;
+  curTr: HTMLElement | null;
+};
+
+const nextRow = (st: TableState) => {
+  st.curWidth = 1;
+  if (st.curTr != null) st.curOffset += (st.maxWidth - 1);
+  st.curTr = st.tbody.createEl('tr');
+  st.curTr.createEl('td', { text: st.curOffset.toString(16) });
+};
+
+export default class BytediagPlugin extends Plugin {
+  async onload() {
+    this.registerMarkdownCodeBlockProcessor('bytediag', (source, el, ctx) => {
+      const lines = source.split('\n');
+      const parts = source.split('\n').map(line => line.split(': '));
+
+      const table = el.createEl('table');
+
+      const headRow = table.createTHead().createEl('tr');
+      headings.forEach(text => headRow.createEl('td', { text }));
+
+      const tbody = table.createTBody();
+      let st: TableState = { maxWidth: headings.length, curOffset: 0, curWidth: 1, tbody, curTr: null };
+      for (let line of lines) {
+        if (!line.contains(': ')) continue;
+        const parts = line.split(': ');
+
+        if (line.startsWith('!')) {
+          st[parts[0].substring(1)] = parseInt(parts[1]);
+        } else {
+          let width = parseInt(parts[1]);
+          while (width > 0) {
+            if (st.curTr == null || st.curWidth >= st.maxWidth) nextRow(st);
+            const w = Math.min(width, st.maxWidth - st.curWidth);
+            width -= w;
+            st.curTr?.createEl('td', { attr: { colspan: '' + w }, text: (parts[0] !== null ? parts[0] as string : '') + (width > 0 ? '...' : '') });
+            st.curWidth += w;
+          }
+        }
+      }
+    });
+  }
+}

manifest.json

@@ -0,0 +1,9 @@
+{
+  "id": "bytefield",
+  "name": "Byte Field Diagrams",
+  "version": "0.0.1",
+  "minAppVersion": "0.15.0",
+  "description": "Adds diagrams that show how structures are laid out in memory / network.",
+  "author": "Lina <dev@natri.fyi>",
+  "isDesktopOnly": false
+}

package.json

@@ -0,0 +1,13 @@
+{
+  "name": "obsidian-bytediag",
+  "version": "0.0.1",
+  "main": "main.js",
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "obsidian": "^1.8.7"
+  },
+  "scripts": {
+    "build": "bun build --outfile=main.js --target=node --packages=external --format=cjs ./main.ts",
+    "watch": "bun build --outfile=main.js --target=node --packages=external --format=cjs ./main.ts --watch"
+  }
+}