code_lens.html 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>ACE Code Lens demo</title>
  6. <style type="text/css" media="screen">
  7. body {
  8. overflow: hidden;
  9. }
  10. #editor {
  11. margin: 0;
  12. position: absolute;
  13. top: 0;
  14. bottom: 0;
  15. left: 0;
  16. right: 0;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <pre id="editor"></pre>
  22. <!-- load ace -->
  23. <script src="../src/ace.js"></script>
  24. <!-- load ace code_lens extension -->
  25. <script src="../src/ext-code_lens.js"></script>
  26. <script>
  27. var editor = ace.edit("editor");
  28. editor.session.setMode("ace/mode/html");
  29. var commandId = "describeCodeLens";
  30. editor.commands.addCommand({
  31. name: commandId,
  32. exec: function(editor, args) {
  33. // services available in `ctx`
  34. alert('CodeLens command called with arguments ' + args);
  35. }
  36. });
  37. editor.commands.addCommand({
  38. name: "clearCodeLenses",
  39. exec: function(editor, args) {
  40. editor.setOption("enableCodeLens", false);
  41. codeLens.clear(editor.session);
  42. }
  43. });
  44. editor.setOption("enableCodeLens", true);
  45. codeLens.registerCodeLensProvider(editor, {
  46. provideCodeLenses: function(session, callback) {
  47. var p = [{
  48. start: {row: 0},
  49. command: {
  50. id: "clearCodeLenses",
  51. title: "Clear all code lenses",
  52. arguments: []
  53. }
  54. }];
  55. var l = session.getLength()
  56. for (var row = 2; row < l; row ++) {
  57. var line = session.getLine(row);
  58. var endColumn = line.length;
  59. var m = /[{>]\s*$/.exec(line);
  60. if (!m) continue;
  61. p.push({
  62. start: {
  63. row: row,
  64. column: m.index,
  65. },
  66. command: {
  67. id: commandId,
  68. title: "Line " + (row + 1),
  69. arguments: ["line", row]
  70. }
  71. });
  72. if (m.index < 10) continue;
  73. p.push({
  74. start: {
  75. row: row,
  76. column: m.index,
  77. },
  78. end: {
  79. row: row,
  80. column: m.index + 1,
  81. },
  82. command: {
  83. id: commandId,
  84. title: "column " + endColumn,
  85. arguments: ["column", endColumn]
  86. }
  87. });
  88. if (m.index < 30) continue;
  89. p.push({
  90. start: {
  91. row: row,
  92. column: m.index,
  93. },
  94. command: {
  95. id: commandId,
  96. title: "Third Link",
  97. arguments: ["3", row]
  98. }
  99. });
  100. }
  101. callback(p);
  102. }
  103. });
  104. window.editor = editor;
  105. window.codeLens = codeLens;
  106. </script>
  107. <script src="./show_own_source.js"></script>
  108. </body>
  109. </html>