<!DOCTYPE html> <html lang="en"> <head> <title>Jody's Notes</title> <meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> <meta http-equiv="pragma" content="no-cache" /> <link rel="stylesheet" href="lib/codemirror.css"> <link rel="stylesheet" href="addon/dialog/dialog.css"> <script src="lib/codemirror.js"></script> <script src="addon/edit/continuelist.js"></script> <script src="addon/mode/overlay.js"></script> <script src="mode/markdown/markdown.js"></script> <script src="mode/gfm/gfm.js"></script> <script src="addon/selection/active-line.js"></script> <script src="addon/dialog/dialog.js"></script> <script src="addon/search/searchcursor.js"></script> <script src="addon/edit/matchbrackets.js"></script> <script src="keymap/vim.js"></script> <script src="2.1.1-socket.io.slim.js"></script> <style type="text/css"> html, body { height: 100%; margin: 0; padding: 0; } .wrap { position: relative; height: 100%; background: #eee; padding: 15px; box-sizing: border-box; } .border { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 1px solid #999; position: relative; height: 100%; padding: 1px; } .CodeMirror { height: 96%; } .cm-s-default .cm-emoji {color: #009688;} </style> <!-- favicon design by Rockicon of thenounproject.com --> </head> <body> <div class=wrap> <div class=border> <textarea id="editor" name="editor"></textarea> </div> </div> <script> var editor = CodeMirror.fromTextArea(document.getElementById("editor"), { mode: { name: "gfm", tokenTypeOverrides: { emoji: "emoji" } }, lineNumbers: "true", keyMap: "vim", matchBrackets: true, showCursorWhenSelecting: true, viewportMargin: Infinity, indentUnit: 4, styleActiveLine: true, autofocus: true, theme: "default", extraKeys: {"Enter": "newlineAndIndentContinueMarkdownList"} }); // Add my .vimrc stuff. CodeMirror.Vim.map('jj', '<Esc>', 'insert'); CodeMirror.Vim.map(';', ':', 'normal'); // Note, ~/notes.kaplon.us/CodeMirror is symlinked it into /assets! // These mappings don't work, there's no concept of <leader> in CodeMirror, but i was hoping to work-around it. //CodeMirror.Vim.map(' c', '<Esc>o- [ ] ', 'normal') //CodeMirror.Vim.map(' x', '<ESC>;s/\[\s\]/[x]/g<CR>;noh<CR>', 'normal') //CodeMirror.Vim.map('xx', '<ESC>;s/\[\s\]/[x]/g<CR>;noh<CR>', 'normal') //CodeMirror.Vim.map('xx', '<ESC>;s/\[\s\]/[x]/g<CR>;noh<CR>', 'insert') CodeMirror.commands.save = function(){ socket.emit('cm-save', 'codemirror save event'); } var userKeypress = false; var socket = io(); socket.on('download allNotes', function(msg){ userKeypress = false; // Set back to false to avoid infinite content update loop when server sends initial content or changes from another client. var cursorPos = editor.getCursor(); var scrollTop = editor.getScrollerElement().scrollTop; editor.getDoc().setValue(msg); editor.setCursor(cursorPos); editor.scrollTo(null, scrollTop); }); document.onkeydown = function(){ userKeypress = true; }; var typingTimer; editor.on("changes", function() { if (!userKeypress) { return; }; // Do nothing if no keys hit yet, avoids infinite loop since 'changes' event fires after initial websocket content loading. clearTimeout(typingTimer); typingTimer = setTimeout( function() { userKeypress = false; // Set back to false to avoid infinite content update loop when server sends initial content or changes from another client. socket.emit('upload allNotes', editor.getValue()); }, 2000 ); }); socket.on('conflict', function(msg){ alert(msg) }); socket.on('redirect', function(destination) { window.location.href = destination; }); </script> </body> </html>