You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

100 lines
4.1 KiB

10 months ago
  1. # brace
  2. <a href="https://www.patreon.com/bePatron?u=8663953"><img alt="become a patron" src="https://c5.patreon.com/external/logo/become_a_patron_button.png" height="35px"></a>
  3. [browserify](https://github.com/substack/node-browserify) compatible version of the [ace editor](http://ajaxorg.github.io/ace/).
  4. [![browser support](https://ci.testling.com/thlorenz/brace.png)](https://ci.testling.com/thlorenz/brace)
  5. ***This badge shows which browsers support annotations, however the editor itself works in pretty much every browser.***
  6. [![screenshot](assets/brace.png)](http://thlorenz.github.io/brace/)
  7. *[Try it in your browser](http://thlorenz.github.io/brace/)*
  8. ## Installation
  9. npm install brace
  10. ## Example
  11. ```js
  12. var ace = require('brace');
  13. require('brace/mode/javascript');
  14. require('brace/theme/monokai');
  15. var editor = ace.edit('javascript-editor');
  16. editor.getSession().setMode('ace/mode/javascript');
  17. editor.setTheme('ace/theme/monokai');
  18. ```
  19. Include the above as an **entry** in your browserify build, add a `<div id="javascript-editor"></div>` to your html page and
  20. a JavaScript editor will appear.
  21. This editor will show error/warning annotations if your browser supports WebWorkers
  22. created via a blob URL (see testling support badge on top).
  23. Please consult the [detailed example](https://github.com/thlorenz/brace/tree/master/example) for more information.
  24. ## Why not just use ace?
  25. The ace editor creates the [WebWorker](http://www.html5rocks.com/en/tutorials/workers/basics/) via a worker script url.
  26. This requires the worker scripts to reside on your server and forces you to host the ace editor on your server as well.
  27. While that is ok in most cases, it prevents you from providing a fully working ace editor package.
  28. With brace, you have two options:
  29. - include brace itself when browserifying your app to get a fully working ace editor included with your bundle (no other
  30. external scripts needed)
  31. - create the bundle as explained above and provide it to others so they can include it in their html page simply via a
  32. script tag
  33. ## What if my browser doesn't support it?
  34. If brace is unable to inline the web worker, it just falls back to provide the ace editor without annotation support.
  35. This means the editor is fully functional, but doesn't display errors/warnings on the left side.
  36. As far as I understand, the original ace editor behaves in exactly the same way.
  37. ## How does it work?
  38. brace has an [update script](https://github.com/thlorenz/brace/blob/master/build/update.js) which automatically pulls
  39. down the [ace builds](https://github.com/ajaxorg/ace-builds) and refactors them to provide the following:
  40. - inline all supported workers
  41. - automatically require the workers that a 'mode' (language) depends on inside the mode file itself
  42. - provide the modes and themes at the same paths that ace's `setMode` and `setTheme` use (just replace 'ace' with
  43. 'brace') as seen in the above example
  44. ## Supported Workers
  45. All workers included with ace are supported, except `php` and `xquery`, mainly because I wasn't able to properly
  46. stringify their code (any help with that is appreciated).
  47. ## Can I use it with TypeScript?
  48. Yes, brace includes modular type definitions so you can do normal import statements and type safety checking
  49. with TypeScript. The example above becomes:
  50. ```ts
  51. import * as ace from 'brace';
  52. import 'brace/mode/javascript';
  53. import 'brace/theme/monokai';
  54. const editor = ace.edit('javascript-editor');
  55. editor.getSession().setMode('ace/mode/javascript');
  56. editor.setTheme('ace/theme/monokai');
  57. ```
  58. brace exposes these type definitions in `package.json`, so they are available when you do `npm install brace`.
  59. You do not need an additional install step or another tool to install these definitions.
  60. These type definitions are kept up to date in the same way as the rest of brace. There is an
  61. [update script](https://github.com/thlorenz/brace/blob/master/build/update-ts.js) which automatically pulls
  62. down the [DefinitelyTyped definition](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/ace/index.d.ts)
  63. and refactors it to be modular rather than global.
  64. ## Test
  65. npm explore brace
  66. npm test