demo/code_lens.html (111 lines of code) (raw):

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ACE Code Lens demo</title> <style type="text/css" media="screen"> body { overflow: hidden; } #editor { margin: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } </style> </head> <body> <pre id="editor"></pre> <script src="kitchen-sink/require.js"></script> <script> // setup paths require.config({paths: { "ace" : "../lib/ace"}}); // load ace and extensions require(["ace/ace", "ace/ext/code_lens"], function(ace, codeLens) { var editor = ace.edit("editor"); editor.session.setMode("ace/mode/html"); var commandId = "describeCodeLens"; editor.commands.addCommand({ name: commandId, exec: function(editor, args) { // services available in `ctx` alert('CodeLens command called with arguments ' + args); } }); editor.commands.addCommand({ name: "clearCodeLenses", exec: function(editor, args) { editor.setOption("enableCodeLens", false); codeLens.clear(editor.session); } }); editor.setOption("enableCodeLens", true); codeLens.registerCodeLensProvider(editor, { provideCodeLenses: function(session, callback) { var p = [{ start: {row: 0}, command: { id: "clearCodeLenses", title: "Clear all code lenses", arguments: [] } }]; var l = session.getLength() for (var row = 2; row < l; row ++) { var line = session.getLine(row); var endColumn = line.length; var m = /[{>]\s*$/.exec(line); if (!m) continue; p.push({ start: { row: row, column: m.index, }, command: { id: commandId, title: "Line " + (row + 1), arguments: ["line", row] } }); if (m.index < 10) continue; p.push({ start: { row: row, column: m.index, }, end: { row: row, column: m.index + 1, }, command: { id: commandId, title: "column " + endColumn, arguments: ["column", endColumn] } }); if (m.index < 30) continue; p.push({ start: { row: row, column: m.index, }, command: { id: commandId, title: "Third Link", arguments: ["3", row] } }); } callback(p); } }); window.editor = editor; window.codeLens = codeLens; }); </script> <script src="./show_own_source.js"></script> </body> </html>