vibetunnel
Version:
Terminal sharing server with web interface - supports macOS, Linux, and headless environments
72 lines (63 loc) • 2 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Simple Monaco Diff Test</title>
<style>
body {
margin: 0;
height: 100vh;
background: #1e1e1e;
}
#container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="/monaco-editor/vs/loader.js"></script>
<script>
require.config({ paths: { vs: '/monaco-editor/vs' } });
require(['vs/editor/editor.main'], function () {
// Create original content
const originalText = `function hello() {
console.log("Hello World");
}`;
// Create modified content
const modifiedText = `function hello() {
console.log("Hello VibeTunnel!");
return true;
}`;
// Create the diff editor
const diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'), {
theme: 'vs-dark',
automaticLayout: true,
renderSideBySide: true,
ignoreTrimWhitespace: false,
renderIndicators: true,
originalEditable: false,
diffAlgorithm: 'advanced',
});
// Set the models
const originalModel = monaco.editor.createModel(originalText, 'javascript');
const modifiedModel = monaco.editor.createModel(modifiedText, 'javascript');
diffEditor.setModel({
original: originalModel,
modified: modifiedModel,
});
// Log some debug info
console.log('Diff editor created');
console.log('Original content:', originalText);
console.log('Modified content:', modifiedText);
// Check for changes after a delay
setTimeout(() => {
const lineChanges = diffEditor.getLineChanges();
console.log('Line changes:', lineChanges);
}, 1000);
});
</script>
</body>
</html>