vibetunnel/web/scripts/monaco-plugin.js
Mario Zechner 762ebc0196 feat: Replace CodeMirror with Monaco Editor
- Add Monaco Editor (v0.52.2) as dependency
- Create MonacoEditor Lit component with normal and diff modes
- Support inline/side-by-side diff switching with responsive behavior
- Replace CodeMirror in file browser with Monaco
- Add /api/fs/diff-content endpoint for fetching original/modified content
- Update build system to use esbuild with Monaco plugin
- Add proper Monaco asset handling and bundling
- Style Monaco with VibeTunnel dark theme

Note: There are rendering artifacts that need to be addressed

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-06-23 03:14:45 +02:00

64 lines
No EOL
1.8 KiB
JavaScript

/**
* ESBuild plugin for Monaco Editor
*
* This plugin handles bundling Monaco Editor with proper worker configuration
*/
const fs = require('fs');
const path = require('path');
module.exports = {
monacoPlugin: {
name: 'monaco-editor',
setup(build) {
// Copy Monaco editor files to public directory
build.onStart(() => {
const monacoPath = path.join(__dirname, '../node_modules/monaco-editor/min');
const targetPath = path.join(__dirname, '../public/monaco-editor');
// Ensure target directory exists
if (!fs.existsSync(targetPath)) {
fs.mkdirSync(targetPath, { recursive: true });
}
// Copy vs directory (contains workers and other assets)
const vsSource = path.join(monacoPath, 'vs');
const vsTarget = path.join(targetPath, 'vs');
copyDirectorySync(vsSource, vsTarget);
console.log('Monaco Editor assets copied to public/monaco-editor');
});
// Handle monaco-editor imports
build.onResolve({ filter: /^monaco-editor$/ }, (args) => {
return {
path: require.resolve('monaco-editor/esm/vs/editor/editor.api'),
external: false,
};
});
},
},
};
function copyDirectorySync(src, dest) {
// Create destination directory if it doesn't exist
if (!fs.existsSync(dest)) {
fs.mkdirSync(dest, { recursive: true });
}
// Read all items in source directory
const items = fs.readdirSync(src);
items.forEach(item => {
const srcPath = path.join(src, item);
const destPath = path.join(dest, item);
const stat = fs.statSync(srcPath);
if (stat.isDirectory()) {
// Recursively copy subdirectories
copyDirectorySync(srcPath, destPath);
} else {
// Copy file
fs.copyFileSync(srcPath, destPath);
}
});
}