Code Editor Pro

File Explorer

src/

main.js

index.html

components/

Button.js

styles/

style.scss

Git

main Changes: 3

Initial commit - 2024-07-20 10:30:00

Added basic structure for the project - 2024-07-20 10:31:15

Refactored components - 2024-07-20 11:00:00

Fixed syntax error in main.js - 2024-07-20 11:15:30

Added new feature: dark mode - 2024-07-20 14:00:00

Updated dependencies - 2024-07-20 14:30:00

Refactored styling for components - 2024-07-20 15:00:00

Fixed responsive issues on mobile - 2024-07-20 15:30:00

Added unit tests - 2024-07-20 16:00:00

Improved user interface - 2024-07-20 16:45:00

Added new feature: real-time collaboration - 2024-07-20 17:00:00

Commit Message

`, 'src/main.js': `// main.js document.addEventListener('DOMContentLoaded', () => { const container = document.querySelector('.container'); const h1 = document.querySelector('h1'); h1.textContent = 'Code Editor in Action!'; h1.style.color = 'var(--token-primary-blue)'; // Example of inline styling container.style.backgroundColor = 'var(--token-primary-blue)'; container.style.color = 'var(--token-white)'; console.log('Editor loaded!'); // Simulate a small JavaScript feature if (window.innerWidth < 768) { // Responsive check console.log('Mobile view detected!'); h1.classList.add('text-lg'); } else { console.log('Desktop view detected!'); h1.classList.remove('text-lg'); } }); // Function to highlight text function highlightText(text, highlightWord) { return text.replace(new RegExp(`(${highlightWord})`, 'g'), `${highlightWord}`); } // Example usage const paragraph = document.createElement('p'); paragraph.textContent = "This is a paragraph of text. The word 'editor' appears here, and it also appears in the next sentence: 'The editor is powerful.'"; document.body.appendChild(paragraph); highlightText(paragraph.textContent, 'editor'); }`, 'src/styles/style.scss': `/* style.scss */ $body-bg: #1a1a1a; $body-text: #ffffff; .container { background-color: $body-bg; color: $body-text; border-radius: 0.5rem; padding: 2rem; max-width: 800px; width: 90%; } h1 { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; color: $body-text; } p { font-size: 1.125rem; line-height: 1.6; color: $body-text; margin-bottom: 1.5rem; } `, 'src/components/Button.js': `// Button.js class Button { constructor(text, className = '') { this.text = text; this.className = className; } render() { const button = document.createElement('button'); button.textContent = this.text; button.classList.add('p-2', 'rounded', 'bg-token-primary-blue', 'text-token-white', 'hover:bg-token-primary-blue-darker', 'transition-colors', this.className); return button; } } // Usage const myButton = new Button('Click Me'); document.body.appendChild(myButton.render()); ` }; // Function to render a tab const renderTab = (fileName, content, lineNumber = 0) => { const tab = document.createElement('div'); tab.classList.add('tab', 'flex-shrink-0', 'flex', 'items-center', 'p-2', 'cursor-pointer', 'tab-active'); tab.setAttribute('data-file', fileName); tab.setAttribute('data-line', lineNumber); // Store current line for quick jump tab.innerHTML = ` ${fileName} `; return tab; }; // Function to update the editor content const updateEditorContent = (fileName, lineNumber = 0) => { const content = fileContents[fileName]; if (!content) { editorContent.innerHTML = `

File not found.

`; return; } // Split content into lines for quick jump const lines = content.split('\n'); if (lineNumber >= 0 && lineNumber < lines.length) { editorContent.innerHTML = `

${lines[lineNumber]}

`; } else { editorContent.innerHTML = `

${content}

`; } }; // Simulate tab switching tabContainer.addEventListener('click', (event) => { if (event.target.closest('.tab-close-btn')) { const fileName = event.target.closest('.tab').getAttribute('data-file'); tabContainer.querySelectorAll('.tab').forEach(tab => { if (tab.getAttribute('data-file') === fileName) { tab.remove(); } }); if (tabContainer.children.length === 0) { editorContent.innerHTML = '

No open files.

'; } // If the closed tab was active, switch to the first one if (fileName === tabContainer.querySelector('.tab-active')?.getAttribute('data-file')) { if (tabContainer.children.length > 0) { tabContainer.querySelector('.tab').classList.add('tab-active'); tabContainer.querySelector('.tab').classList.remove('tab-inactive'); updateEditorContent(tabContainer.querySelector('.tab').getAttribute('data-file')); } } return; } if (event.target.closest('.tab')) { tabContainer.querySelectorAll('.tab').forEach(tab => { tab.classList.remove('tab-active'); tab.classList.add('tab-inactive'); }); event.target.closest('.tab').classList.add('tab-active'); event.target.closest('.tab').classList.remove('tab-inactive'); const fileName = event.target.closest('.tab').getAttribute('data-file'); updateEditorContent(fileName, event.target.closest('.tab').getAttribute('data-line')); } }); // Initial load: open index.html const initialTab = renderTab('src/index.html', fileContents['src/index.html'], 0); tabContainer.appendChild(initialTab); updateEditorContent('src/index.html', 0); // Highlighting with Prism (requires correct language detection) // This is a simplified approach; for dynamic content, you'd need more robust language guessing // or allow the user to select a language. // For now, we'll just apply a generic 'language-javascript' class. // A better solution would involve a language detection library or a way to dynamically // determine the file's extension and apply the correct language. const prismCodeElements = document.querySelectorAll('pre code'); prismCodeElements.forEach(codeElement => { if (codeElement.textContent.includes('class') && codeElement.textContent.includes('extends')) { codeElement.classList.add('language-javascript'); } else if (codeElement.textContent.includes('h1') && codeElement.textContent.includes('text-2xl')) { codeElement.classList.add('language-html'); } else if (codeElement.textContent.includes('h1') && codeElement.textContent.includes('text-700')) { codeElement.classList.add('language-css'); } else if (codeElement.textContent.includes('class') && codeElement.textContent.includes('render')) { codeElement.classList.add('language-javascript'); } else if (codeElement.textContent.includes('import')) { codeElement.classList.add('language-javascript'); } else if (codeElement.textContent.includes('body') && codeElement.textContent.includes('background-color')) { codeElement.classList.add('language-css'); } }); prism.highlightAll(); // Apply Prism highlighting to all code elements // Add a new file button (placeholder for a real UI) document.querySelector('.file-explorer > .space-y-1 > .flex:nth-of-type(3)').nextElementSibling.addEventListener('click', () => { const newFileName = prompt('Enter new file name (e.g., new.js, new.html):'); if (newFileName) { const newTab = renderTab(newFileName, '', 0); tabContainer.appendChild(newTab); updateEditorContent(newFileName); } }); });