Fix for pasting
This commit is contained in:
+149
-98
@@ -5,7 +5,8 @@
|
||||
* along with a send bar, pause/resume, and capture saving.
|
||||
*/
|
||||
|
||||
const { createElement, escapeHtml, formatTimestamp, formatBytes } = window.NexusTerminal;
|
||||
const { createElement, escapeHtml, formatTimestamp, formatBytes } =
|
||||
window.NexusTerminal;
|
||||
|
||||
/**
|
||||
* Maximum number of data entries retained in the scrollback buffer.
|
||||
@@ -40,52 +41,66 @@ class RawViewer {
|
||||
if (!container) return;
|
||||
|
||||
const state = {
|
||||
mode: 'text', // text | hex | split
|
||||
mode: "text", // text | hex | split
|
||||
paused: false,
|
||||
buffer: [],
|
||||
totalBytes: 0,
|
||||
sendFormat: 'text', // text | hex | escaped
|
||||
sendFormat: "text", // text | hex | escaped
|
||||
};
|
||||
|
||||
// ── Toolbar ──────────────────────────────────────────────
|
||||
const toolbar = createElement('div', 'raw-toolbar');
|
||||
const toolbar = createElement("div", "raw-toolbar");
|
||||
|
||||
// Mode toggle
|
||||
const modeGroup = createElement('div', 'raw-mode-group');
|
||||
for (const mode of ['text', 'hex', 'split']) {
|
||||
const btn = createElement('button', `raw-mode-btn ${mode === state.mode ? 'active' : ''}`, {
|
||||
const modeGroup = createElement("div", "raw-mode-group");
|
||||
for (const mode of ["text", "hex", "split"]) {
|
||||
const btn = createElement(
|
||||
"button",
|
||||
`raw-mode-btn ${mode === state.mode ? "active" : ""}`,
|
||||
{
|
||||
textContent: mode.charAt(0).toUpperCase() + mode.slice(1),
|
||||
dataset: { mode },
|
||||
});
|
||||
btn.addEventListener('click', () => this._setMode(sessionId, mode));
|
||||
},
|
||||
);
|
||||
btn.addEventListener("click", () => this._setMode(sessionId, mode));
|
||||
modeGroup.appendChild(btn);
|
||||
}
|
||||
toolbar.appendChild(modeGroup);
|
||||
|
||||
// Controls
|
||||
const controls = createElement('div', 'raw-controls');
|
||||
const controls = createElement("div", "raw-controls");
|
||||
|
||||
const pauseBtn = createElement('button', 'btn btn-sm btn-outline raw-pause', { textContent: '⏸ Pause' });
|
||||
pauseBtn.addEventListener('click', () => this.togglePause(sessionId));
|
||||
const pauseBtn = createElement(
|
||||
"button",
|
||||
"btn btn-sm btn-outline raw-pause",
|
||||
{ textContent: "⏸ Pause" },
|
||||
);
|
||||
pauseBtn.addEventListener("click", () => this.togglePause(sessionId));
|
||||
controls.appendChild(pauseBtn);
|
||||
|
||||
const clearBtn = createElement('button', 'btn btn-sm btn-outline', { textContent: '✕ Clear' });
|
||||
clearBtn.addEventListener('click', () => this.clearBuffer(sessionId));
|
||||
const clearBtn = createElement("button", "btn btn-sm btn-outline", {
|
||||
textContent: "✕ Clear",
|
||||
});
|
||||
clearBtn.addEventListener("click", () => this.clearBuffer(sessionId));
|
||||
controls.appendChild(clearBtn);
|
||||
|
||||
const saveBtn = createElement('button', 'btn btn-sm btn-outline', { textContent: '💾 Save' });
|
||||
saveBtn.addEventListener('click', () => this.saveCapture(sessionId));
|
||||
const saveBtn = createElement("button", "btn btn-sm btn-outline", {
|
||||
textContent: "💾 Save",
|
||||
});
|
||||
saveBtn.addEventListener("click", () => this.saveCapture(sessionId));
|
||||
controls.appendChild(saveBtn);
|
||||
|
||||
// Byte counter
|
||||
const counter = createElement('span', 'raw-counter', { textContent: '0 B' });
|
||||
const counter = createElement("span", "raw-counter", {
|
||||
textContent: "0 B",
|
||||
});
|
||||
controls.appendChild(counter);
|
||||
|
||||
toolbar.appendChild(controls);
|
||||
container.appendChild(toolbar);
|
||||
|
||||
// ── Data display ─────────────────────────────────────────
|
||||
const display = createElement('div', 'raw-display');
|
||||
const display = createElement("div", "raw-display");
|
||||
container.appendChild(display);
|
||||
|
||||
// ── Send bar ─────────────────────────────────────────────
|
||||
@@ -116,7 +131,7 @@ class RawViewer {
|
||||
try {
|
||||
rawStr = atob(payload.data);
|
||||
} catch (_) {
|
||||
rawStr = payload.data || '';
|
||||
rawStr = payload.data || "";
|
||||
}
|
||||
|
||||
const bytes = new Uint8Array(rawStr.length);
|
||||
@@ -125,7 +140,7 @@ class RawViewer {
|
||||
}
|
||||
|
||||
const entry = {
|
||||
direction: payload.direction || 'recv', // 'send' | 'recv'
|
||||
direction: payload.direction || "recv", // 'send' | 'recv'
|
||||
timestamp: payload.timestamp ? new Date(payload.timestamp) : new Date(),
|
||||
data: rawStr,
|
||||
bytes,
|
||||
@@ -158,8 +173,8 @@ class RawViewer {
|
||||
if (!viewer) return;
|
||||
|
||||
viewer.paused = !viewer.paused;
|
||||
viewer.pauseBtn.textContent = viewer.paused ? '▶ Resume' : '⏸ Pause';
|
||||
viewer.pauseBtn.classList.toggle('active', viewer.paused);
|
||||
viewer.pauseBtn.textContent = viewer.paused ? "▶ Resume" : "⏸ Pause";
|
||||
viewer.pauseBtn.classList.toggle("active", viewer.paused);
|
||||
|
||||
// On resume, flush any buffered entries
|
||||
if (!viewer.paused) {
|
||||
@@ -177,8 +192,8 @@ class RawViewer {
|
||||
|
||||
viewer.buffer = [];
|
||||
viewer.totalBytes = 0;
|
||||
viewer.display.innerHTML = '';
|
||||
viewer.counter.textContent = '0 B';
|
||||
viewer.display.innerHTML = "";
|
||||
viewer.counter.textContent = "0 B";
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -188,21 +203,21 @@ class RawViewer {
|
||||
async saveCapture(sessionId) {
|
||||
const viewer = this.viewers.get(sessionId);
|
||||
if (!viewer || viewer.buffer.length === 0) {
|
||||
this.app.notifications.warning('Nothing to save');
|
||||
this.app.notifications.warning("Nothing to save");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const lines = viewer.buffer.map((e) => {
|
||||
const ts = formatTimestamp(e.timestamp);
|
||||
const dir = e.direction === 'send' ? 'TX' : 'RX';
|
||||
const dir = e.direction === "send" ? "TX" : "RX";
|
||||
return `[${ts}] [${dir}] ${e.data}`;
|
||||
});
|
||||
const content = lines.join('\n');
|
||||
const content = lines.join("\n");
|
||||
await window.go.api.Service.SaveSessionCapture(sessionId, content);
|
||||
this.app.notifications.success('Capture saved');
|
||||
this.app.notifications.success("Capture saved");
|
||||
} catch (err) {
|
||||
this.app.notifications.error('Save failed: ' + err);
|
||||
this.app.notifications.error("Save failed: " + err);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -214,21 +229,21 @@ class RawViewer {
|
||||
const viewer = this.viewers.get(sessionId);
|
||||
if (!viewer) return;
|
||||
|
||||
const input = viewer.container.querySelector('.raw-send-input');
|
||||
const formatSelect = viewer.container.querySelector('.raw-send-format');
|
||||
const input = viewer.container.querySelector(".raw-send-input");
|
||||
const formatSelect = viewer.container.querySelector(".raw-send-format");
|
||||
if (!input) return;
|
||||
|
||||
const rawValue = input.value;
|
||||
if (!rawValue) return;
|
||||
|
||||
const format = formatSelect?.value || 'text';
|
||||
const format = formatSelect?.value || "text";
|
||||
let dataToSend;
|
||||
|
||||
switch (format) {
|
||||
case 'hex':
|
||||
case "hex":
|
||||
dataToSend = this._hexToString(rawValue);
|
||||
break;
|
||||
case 'escaped':
|
||||
case "escaped":
|
||||
dataToSend = this._unescapeString(rawValue);
|
||||
break;
|
||||
default:
|
||||
@@ -238,21 +253,22 @@ class RawViewer {
|
||||
try {
|
||||
// For hex/escaped, data is already raw bytes (0-255) so btoa is correct.
|
||||
// For text mode, UTF-8 encode so non-ASCII characters are transmitted properly.
|
||||
const b64 = (format === 'hex' || format === 'escaped')
|
||||
const b64 =
|
||||
format === "hex" || format === "escaped"
|
||||
? btoa(dataToSend)
|
||||
: window.NexusTerminal.utf8ToBase64(dataToSend);
|
||||
await window.go.api.Service.WriteSession(sessionId, b64);
|
||||
input.value = '';
|
||||
input.value = "";
|
||||
|
||||
// Also show in viewer as sent data
|
||||
this.handleData({
|
||||
sessionID: sessionId,
|
||||
data: b64,
|
||||
direction: 'send',
|
||||
direction: "send",
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
} catch (err) {
|
||||
this.app.notifications.error('Send failed: ' + err);
|
||||
this.app.notifications.error("Send failed: " + err);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -274,38 +290,48 @@ class RawViewer {
|
||||
* @private
|
||||
*/
|
||||
_renderSendBar(sessionId, profile) {
|
||||
const bar = createElement('div', 'raw-send-bar');
|
||||
const bar = createElement("div", "raw-send-bar");
|
||||
|
||||
// Format selector
|
||||
const formatSelect = createElement('select', 'form-select form-select-sm raw-send-format');
|
||||
for (const [value, label] of [['text', 'Text'], ['hex', 'Hex'], ['escaped', 'Escaped']]) {
|
||||
const opt = createElement('option', '', { value, textContent: label });
|
||||
const formatSelect = createElement(
|
||||
"select",
|
||||
"form-select form-select-sm raw-send-format",
|
||||
);
|
||||
for (const [value, label] of [
|
||||
["text", "Text"],
|
||||
["hex", "Hex"],
|
||||
["escaped", "Escaped"],
|
||||
]) {
|
||||
const opt = createElement("option", "", { value, textContent: label });
|
||||
formatSelect.appendChild(opt);
|
||||
}
|
||||
bar.appendChild(formatSelect);
|
||||
|
||||
// Input
|
||||
const input = createElement('input', 'form-input raw-send-input', {
|
||||
type: 'text',
|
||||
placeholder: 'Type data to send…',
|
||||
const input = createElement("input", "form-input raw-send-input", {
|
||||
type: "text",
|
||||
placeholder: "Type data to send…",
|
||||
});
|
||||
input.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') this.send(sessionId);
|
||||
input.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") this.send(sessionId);
|
||||
});
|
||||
bar.appendChild(input);
|
||||
|
||||
// Quick-insert buttons for common control bytes
|
||||
const quickBtns = createElement('div', 'raw-quick-btns');
|
||||
const quickBtns = createElement("div", "raw-quick-btns");
|
||||
const controlBytes = [
|
||||
{ label: 'NUL', value: '\\x00' },
|
||||
{ label: 'CR', value: '\\r' },
|
||||
{ label: 'LF', value: '\\n' },
|
||||
{ label: 'ETX', value: '\\x03' },
|
||||
{ label: 'EOT', value: '\\x04' },
|
||||
{ label: "NUL", value: "\\x00" },
|
||||
{ label: "CR", value: "\\r" },
|
||||
{ label: "LF", value: "\\n" },
|
||||
{ label: "ETX", value: "\\x03" },
|
||||
{ label: "EOT", value: "\\x04" },
|
||||
];
|
||||
for (const cb of controlBytes) {
|
||||
const btn = createElement('button', 'btn btn-xs btn-outline', { textContent: cb.label, title: cb.value });
|
||||
btn.addEventListener('click', () => {
|
||||
const btn = createElement("button", "btn btn-xs btn-outline", {
|
||||
textContent: cb.label,
|
||||
title: cb.value,
|
||||
});
|
||||
btn.addEventListener("click", () => {
|
||||
input.value += cb.value;
|
||||
input.focus();
|
||||
});
|
||||
@@ -316,22 +342,31 @@ class RawViewer {
|
||||
// Payload preset dropdown
|
||||
const presets = profile?.raw?.payloadPresets || [];
|
||||
if (presets.length > 0) {
|
||||
const presetSelect = createElement('select', 'form-select form-select-sm raw-preset-select');
|
||||
const defaultOpt = createElement('option', '', { value: '', textContent: 'Presets…' });
|
||||
const presetSelect = createElement(
|
||||
"select",
|
||||
"form-select form-select-sm raw-preset-select",
|
||||
);
|
||||
const defaultOpt = createElement("option", "", {
|
||||
value: "",
|
||||
textContent: "Presets…",
|
||||
});
|
||||
presetSelect.appendChild(defaultOpt);
|
||||
for (const ps of presets) {
|
||||
const opt = createElement('option', '', { value: ps.payload, textContent: ps.name });
|
||||
const opt = createElement("option", "", {
|
||||
value: ps.payload,
|
||||
textContent: ps.name,
|
||||
});
|
||||
opt.dataset.format = ps.format;
|
||||
presetSelect.appendChild(opt);
|
||||
}
|
||||
presetSelect.addEventListener('change', () => {
|
||||
presetSelect.addEventListener("change", () => {
|
||||
if (presetSelect.value) {
|
||||
input.value = presetSelect.value;
|
||||
const selOpt = presetSelect.selectedOptions[0];
|
||||
if (selOpt?.dataset.format) {
|
||||
formatSelect.value = selOpt.dataset.format;
|
||||
}
|
||||
presetSelect.value = '';
|
||||
presetSelect.value = "";
|
||||
input.focus();
|
||||
}
|
||||
});
|
||||
@@ -339,8 +374,10 @@ class RawViewer {
|
||||
}
|
||||
|
||||
// Send button
|
||||
const sendBtn = createElement('button', 'btn btn-sm btn-primary', { textContent: 'Send' });
|
||||
sendBtn.addEventListener('click', () => this.send(sessionId));
|
||||
const sendBtn = createElement("button", "btn btn-sm btn-primary", {
|
||||
textContent: "Send",
|
||||
});
|
||||
sendBtn.addEventListener("click", () => this.send(sessionId));
|
||||
bar.appendChild(sendBtn);
|
||||
|
||||
return bar;
|
||||
@@ -355,10 +392,10 @@ class RawViewer {
|
||||
_renderEntry(viewer, entry) {
|
||||
let el;
|
||||
switch (viewer.mode) {
|
||||
case 'hex':
|
||||
case "hex":
|
||||
el = this._renderHexView(entry);
|
||||
break;
|
||||
case 'split':
|
||||
case "split":
|
||||
el = this._renderSplitView(entry, viewer.profile);
|
||||
break;
|
||||
default:
|
||||
@@ -373,7 +410,7 @@ class RawViewer {
|
||||
* @private
|
||||
*/
|
||||
_renderAllEntries(viewer) {
|
||||
viewer.display.innerHTML = '';
|
||||
viewer.display.innerHTML = "";
|
||||
for (const entry of viewer.buffer) {
|
||||
this._renderEntry(viewer, entry);
|
||||
}
|
||||
@@ -388,18 +425,21 @@ class RawViewer {
|
||||
* @private
|
||||
*/
|
||||
_renderTextView(entry, profile) {
|
||||
const row = createElement('div', `raw-entry raw-entry-${entry.direction}`);
|
||||
const row = createElement(
|
||||
"div",
|
||||
`raw-entry raw-entry-${entry.direction}`,
|
||||
);
|
||||
const raw = profile?.raw || {};
|
||||
|
||||
let prefix = '';
|
||||
let prefix = "";
|
||||
if (raw.showTimestamps) {
|
||||
prefix += `[${formatTimestamp(entry.timestamp)}] `;
|
||||
}
|
||||
if (raw.showDirection) {
|
||||
prefix += entry.direction === 'send' ? '[TX] ' : '[RX] ';
|
||||
prefix += entry.direction === "send" ? "[TX] " : "[RX] ";
|
||||
}
|
||||
|
||||
const pre = createElement('pre', 'raw-text');
|
||||
const pre = createElement("pre", "raw-text");
|
||||
pre.textContent = prefix + entry.data;
|
||||
row.appendChild(pre);
|
||||
return row;
|
||||
@@ -412,8 +452,11 @@ class RawViewer {
|
||||
* @private
|
||||
*/
|
||||
_renderHexView(entry) {
|
||||
const row = createElement('div', `raw-entry raw-entry-${entry.direction}`);
|
||||
const pre = createElement('pre', 'raw-hex');
|
||||
const row = createElement(
|
||||
"div",
|
||||
`raw-entry raw-entry-${entry.direction}`,
|
||||
);
|
||||
const pre = createElement("pre", "raw-hex");
|
||||
pre.textContent = this.formatHexDump(entry.bytes);
|
||||
row.appendChild(pre);
|
||||
return row;
|
||||
@@ -427,25 +470,29 @@ class RawViewer {
|
||||
* @private
|
||||
*/
|
||||
_renderSplitView(entry, profile) {
|
||||
const row = createElement('div', `raw-entry raw-entry-split raw-entry-${entry.direction}`);
|
||||
const row = createElement(
|
||||
"div",
|
||||
`raw-entry raw-entry-split raw-entry-${entry.direction}`,
|
||||
);
|
||||
const raw = profile?.raw || {};
|
||||
|
||||
// Direction/timestamp header
|
||||
const header = createElement('div', 'raw-split-header');
|
||||
let headerText = '';
|
||||
if (raw.showTimestamps) headerText += formatTimestamp(entry.timestamp) + ' ';
|
||||
headerText += entry.direction === 'send' ? '▲ TX' : '▼ RX';
|
||||
const header = createElement("div", "raw-split-header");
|
||||
let headerText = "";
|
||||
if (raw.showTimestamps)
|
||||
headerText += formatTimestamp(entry.timestamp) + " ";
|
||||
headerText += entry.direction === "send" ? "▲ TX" : "▼ RX";
|
||||
header.textContent = headerText;
|
||||
row.appendChild(header);
|
||||
|
||||
// Split panes
|
||||
const panes = createElement('div', 'raw-split-panes');
|
||||
const panes = createElement("div", "raw-split-panes");
|
||||
|
||||
const textPane = createElement('pre', 'raw-text raw-split-text');
|
||||
const textPane = createElement("pre", "raw-text raw-split-text");
|
||||
textPane.textContent = entry.data;
|
||||
panes.appendChild(textPane);
|
||||
|
||||
const hexPane = createElement('pre', 'raw-hex raw-split-hex');
|
||||
const hexPane = createElement("pre", "raw-hex raw-split-hex");
|
||||
hexPane.textContent = this.formatHexDump(entry.bytes);
|
||||
panes.appendChild(hexPane);
|
||||
|
||||
@@ -467,32 +514,32 @@ class RawViewer {
|
||||
const chunk = bytes.slice(offset, offset + bytesPerLine);
|
||||
|
||||
// Offset column
|
||||
const offsetStr = offset.toString(16).padStart(8, '0');
|
||||
const offsetStr = offset.toString(16).padStart(8, "0");
|
||||
|
||||
// Hex column
|
||||
const hexParts = [];
|
||||
for (let i = 0; i < bytesPerLine; i++) {
|
||||
if (i < chunk.length) {
|
||||
hexParts.push(chunk[i].toString(16).padStart(2, '0'));
|
||||
hexParts.push(chunk[i].toString(16).padStart(2, "0"));
|
||||
} else {
|
||||
hexParts.push(' ');
|
||||
hexParts.push(" ");
|
||||
}
|
||||
// Extra space after 8th byte for readability
|
||||
if (i === 7) hexParts.push('');
|
||||
if (i === 7) hexParts.push("");
|
||||
}
|
||||
const hexStr = hexParts.join(' ');
|
||||
const hexStr = hexParts.join(" ");
|
||||
|
||||
// ASCII column
|
||||
let ascii = '';
|
||||
let ascii = "";
|
||||
for (let i = 0; i < chunk.length; i++) {
|
||||
const b = chunk[i];
|
||||
ascii += (b >= 0x20 && b <= 0x7e) ? String.fromCharCode(b) : '.';
|
||||
ascii += b >= 0x20 && b <= 0x7e ? String.fromCharCode(b) : ".";
|
||||
}
|
||||
|
||||
lines.push(`${offsetStr} ${hexStr} |${ascii}|`);
|
||||
}
|
||||
|
||||
return lines.join('\n');
|
||||
return lines.join("\n");
|
||||
}
|
||||
|
||||
// ── Internal helpers ─────────────────────────────────────────────
|
||||
@@ -510,8 +557,8 @@ class RawViewer {
|
||||
viewer.mode = mode;
|
||||
|
||||
// Update active button
|
||||
viewer.toolbar.querySelectorAll('.raw-mode-btn').forEach((btn) => {
|
||||
btn.classList.toggle('active', btn.dataset.mode === mode);
|
||||
viewer.toolbar.querySelectorAll(".raw-mode-btn").forEach((btn) => {
|
||||
btn.classList.toggle("active", btn.dataset.mode === mode);
|
||||
});
|
||||
|
||||
this._renderAllEntries(viewer);
|
||||
@@ -535,8 +582,8 @@ class RawViewer {
|
||||
* @private
|
||||
*/
|
||||
_hexToString(hex) {
|
||||
const cleaned = hex.replace(/\s+/g, '');
|
||||
let str = '';
|
||||
const cleaned = hex.replace(/\s+/g, "");
|
||||
let str = "";
|
||||
for (let i = 0; i < cleaned.length; i += 2) {
|
||||
str += String.fromCharCode(parseInt(cleaned.substring(i, i + 2), 16));
|
||||
}
|
||||
@@ -552,14 +599,19 @@ class RawViewer {
|
||||
_unescapeString(str) {
|
||||
return str.replace(/\\(n|r|t|0|x[0-9a-fA-F]{2}|\\)/g, (match, seq) => {
|
||||
switch (seq) {
|
||||
case 'n': return '\n';
|
||||
case 'r': return '\r';
|
||||
case 't': return '\t';
|
||||
case '0': return '\0';
|
||||
case '\\': return '\\';
|
||||
case "n":
|
||||
return "\n";
|
||||
case "r":
|
||||
return "\r";
|
||||
case "t":
|
||||
return "\t";
|
||||
case "0":
|
||||
return "\0";
|
||||
case "\\":
|
||||
return "\\";
|
||||
default:
|
||||
// \\xHH
|
||||
if (seq.startsWith('x')) {
|
||||
if (seq.startsWith("x")) {
|
||||
return String.fromCharCode(parseInt(seq.slice(1), 16));
|
||||
}
|
||||
return match;
|
||||
@@ -570,5 +622,4 @@ class RawViewer {
|
||||
|
||||
window.NexusTerminal = window.NexusTerminal || {};
|
||||
window.NexusTerminal.RawViewer = RawViewer;
|
||||
|
||||
})();
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
*/
|
||||
function utf8ToBase64(str) {
|
||||
const bytes = new TextEncoder().encode(str);
|
||||
let binary = '';
|
||||
let binary = "";
|
||||
for (let i = 0; i < bytes.length; i++) {
|
||||
binary += String.fromCharCode(bytes[i]);
|
||||
}
|
||||
|
||||
@@ -171,7 +171,7 @@
|
||||
*/
|
||||
function utf8ToBase64(str) {
|
||||
const bytes = new TextEncoder().encode(str);
|
||||
let binary = '';
|
||||
let binary = "";
|
||||
for (let i = 0; i < bytes.length; i++) {
|
||||
binary += String.fromCharCode(bytes[i]);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user