/ace-widget

Polymer wrap around Ace editor

Primary LanguageHTML

Published on webcomponents.org

ace-widget

Even more embeddable code editor Custom Element - just one tag, and no JS needed to provide Ace - The High Performance Code Editor

Based on pjako's fork of PolymerLabs ace-element.

Hybrid Polymer element, 1.x-2.x ready

Doc and demo

https://lostinbrittany.github.io/ace-widget/

Usage example

  <ace-widget placeholder="Write something... Anything..." initial-focus>
  </ace-widget>

Install

Install the component using Bower:

$ bower install LostInBrittany/ace-widget --save

Or download as ZIP.

Usage

  1. Import Web Components' polyfill (if needed):

    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>

  2. Import Custom Element:

    <link rel="import" href="bower_components/ace-widget/ace-widget.html">

  3. Start using it!

    <ace-widget>Editable code here</ace-widget>

Note on ShadowDOM

The new tools from the Polymer team, like Polymer CLI use the true shadow-dom instead of shady-dom, by means of the setup of Polymer options:

    // setup Polymer options
    window.Polymer = {lazyRegister: true, dom: 'shadow'};

Ace editor isn't currently not compatible with ShadowDOM, as it creates global styles that doesn't pass the ShadowDOM border. In order to make ace-widget work, I've taken inspiration from the ace-shim-about-shadow-dom project and made a Polymer behavior that detects if an application using ace-widget is in ShadowDOM mode, and if it is, it copies Ace editor's styles into the component ShadowDOM.

Attributes

Attribute Type Default Description
theme String `` Editor#setTheme at Ace API
mode String `` EditSession#setMode at Ace API
font-size String `` Editor#setFontSize at Ace API
softtabs Boolean `` EditSession#setUseSoftTabs() at Ace API
tab-size Boolean `` Session#setTabSize() at Ace API
readonly Boolean `` Editor#setReadOnly() at Ace API
wrap Boolean `` Session#setWrapMode() at Ace API
autoComplete Object `` Callback for langTools.addCompleter like the example at Ace API
minlines Number 15 Editor.setOptions({minlines: minlines})
maxlines Number 30 Editor.setOptions({minlines: maxlines})
initialFocus Boolean `` If true, Editor.focus() is called upon initialisation
placeholder String `` A placeholder text to show when the editor is empty

Properties

Name Description
editor Ace editor object.
value editor.get-/setValue()

Events

Name Description
editor-content Triggered when editor content gets changed
editor-ready Triggered once Ace editor instance is created.

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -m 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

License

MIT License