Write out readme

Author: aapeliv

client/src/index.js

@@ -43,6 +43,21 @@ function getSavedTheme() {
 // Branding: set to false to hide the "Powered by Codebox" message
 const SHOW_BRANDING = true
 
+// Available languages for syntax highlighting
+const LANGUAGES = [
+  { id: 'markdown', label: 'Markdown' },
+  { id: 'plaintext', label: 'Plain Text' },
+  { id: 'javascript', label: 'JavaScript' },
+  { id: 'typescript', label: 'TypeScript' },
+  { id: 'python', label: 'Python' },
+  { id: 'html', label: 'HTML' },
+  { id: 'css', label: 'CSS' },
+  { id: 'json', label: 'JSON' },
+  { id: 'yaml', label: 'YAML' },
+  { id: 'sql', label: 'SQL' },
+  { id: 'shell', label: 'Shell' }
+]
+
 function saveTheme(theme) {
   localStorage.setItem('codebox_theme', theme)
 }
@@ -533,6 +548,13 @@ function createBranding() {
   `
 }
 
+function createLanguageSelector(currentLanguage = 'markdown') {
+  const options = LANGUAGES.map(lang =>
+    `<option value="${lang.id}" ${currentLanguage === lang.id ? 'selected' : ''}>${lang.label}</option>`
+  ).join('')
+  return `<select id="language-select" class="language-select">${options}</select>`
+}
+
 function startEditor(slug, token, canEdit, userName) {
   const app = document.getElementById('app')
 
@@ -545,6 +567,7 @@ function startEditor(slug, token, canEdit, userName) {
       </div>
       <div class="controls">
         <span class="user-name">${userName}</span>
+        ${createLanguageSelector()}
         <span id="status" class="status hidden">connecting</span>
         ${createThemeToggle()}
         <button id="connect-btn" class="hidden">Reconnect</button>
@@ -566,12 +589,14 @@ function startEditor(slug, token, canEdit, userName) {
   })
 
   const ytext = ydoc.getText('monaco')
+  const ySettings = ydoc.getMap('settings')
 
   // Create Monaco editor
   const editorTheme = getEffectiveTheme() === 'dark' ? 'vs-dark' : 'vs'
+  const initialLanguage = ySettings.get('language') || 'markdown'
   const editor = monaco.editor.create(document.getElementById('editor'), {
     value: '',
-    language: 'markdown',
+    language: initialLanguage,
     theme: editorTheme,
     automaticLayout: true,
     minimap: { enabled: false },
@@ -582,6 +607,39 @@ function startEditor(slug, token, canEdit, userName) {
     readOnly: !canEdit
   })
 
+  // Update language selector to match synced value
+  const languageSelect = document.getElementById('language-select')
+
+  function updateLanguageFromYjs() {
+    const language = ySettings.get('language') || 'markdown'
+    if (languageSelect.value !== language) {
+      languageSelect.value = language
+    }
+    const currentModel = editor.getModel()
+    if (currentModel && monaco.editor.getModel(currentModel.uri)) {
+      const currentLang = currentModel.getLanguageId()
+      if (currentLang !== language) {
+        monaco.editor.setModelLanguage(currentModel, language)
+      }
+    }
+  }
+
+  // Listen for remote changes to language setting
+  ySettings.observe(() => {
+    updateLanguageFromYjs()
+  })
+
+  // Update once synced
+  provider.on('sync', () => {
+    updateLanguageFromYjs()
+  })
+
+  // Language selector handler - update Yjs when user changes
+  languageSelect.addEventListener('change', (e) => {
+    const newLanguage = e.target.value
+    ySettings.set('language', newLanguage)
+  })
+
   // Bind Yjs to Monaco
   const monacoBinding = new MonacoBinding(
     ytext,

client/src/styles.css

@@ -104,7 +104,8 @@ header h1 {
   color: var(--text-muted);
 }
 
-.theme-toggle {
+.theme-toggle,
+.language-select {
   background: var(--input-bg);
   border: 1px solid var(--input-border);
   color: var(--text-primary);
@@ -114,7 +115,8 @@ header h1 {
   cursor: pointer;
 }
 
-.theme-toggle:focus {
+.theme-toggle:focus,
+.language-select:focus {
   outline: none;
   border-color: #007acc;
 }

client/webpack.config.js

@@ -32,7 +32,7 @@ export default {
       favicon: './src/favicon.svg'
     }),
     new MonacoWebpackPlugin({
-      languages: ['javascript', 'typescript', 'json', 'html', 'css', 'markdown']
+      languages: ['javascript', 'typescript', 'json', 'html', 'css', 'markdown', 'python', 'yaml', 'sql', 'shell', 'plaintext']
     })
   ],
   devServer: {

readme.md

@@ -1,3 +1,27 @@
 # Codebox
 
 **Note:** this repo was built by and large with Claude, and builds off of the [Yjs Demos](https://github.com/yjs/yjs-demos) Monaco demo (public domain).
+
+![Screenshot of a user editing a notepad with Codebox](./screenshots/editing.png)
+
+## Features
+
+* Real-time collaborative editing (Monaco + Yjs)
+* Live cursors with usernames
+* Syntax highlighting
+* Dark/light themes
+* Password protection options:
+  - Unprotected (anyone can edit/view)
+  - Edit protected (anyone can view but edit requires password)
+  - Fully protected (both view/edit required password)
+  - View only (no one can edit)
+* Admin dashboard
+* Pre-built Docker container
+
+## Note on security
+
+Don't use this for super secret stuff. Security caveats:
+
+* Admin password is securely hashed with bcrypt
+* Notepad passwords are **stored in plain text** (so admin can see them) and use naive compare
+* When a user enters a notepad, they get a JWT token for 24 hours: if you change the protection level, their access is not automatically revoked

screenshots/editing.png

@@ -1,18 +1,16 @@
 import fs from 'fs'
 import path from 'path'
+import crypto from 'crypto'
 import bcrypt from 'bcrypt'
 import jwt from 'jsonwebtoken'
 
 const SALT_ROUNDS = 12
 
-// JWT secret - in production, use environment variable
-const JWT_SECRET = process.env.JWT_SECRET || 'codebox-dev-secret-change-in-production'
-
 export function initAuth(dataDir) {
   const adminFile = path.join(dataDir, 'admin.json')
 
   // Load or initialize admin data
-  let adminData = { passwordHash: null }
+  let adminData = { passwordHash: null, jwtSecret: null }
   if (fs.existsSync(adminFile)) {
     try {
       adminData = JSON.parse(fs.readFileSync(adminFile, 'utf-8'))
@@ -25,6 +23,16 @@ export function initAuth(dataDir) {
     fs.writeFileSync(adminFile, JSON.stringify(adminData, null, 2))
   }
 
+  // Generate JWT secret if not present
+  if (!adminData.jwtSecret) {
+    adminData.jwtSecret = crypto.randomBytes(64).toString('hex')
+    saveAdminData()
+    console.log('Generated new JWT secret')
+  }
+
+  // Allow env override for JWT secret
+  const JWT_SECRET = process.env.JWT_SECRET || adminData.jwtSecret
+
   // Check if admin password is set
   function isAdminSetup() {
     return adminData.passwordHash !== null