@granite-elements/ace-widget NPM

ace-widget

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

Originally based on pjako's fork of PolymerLabs ace-element.
Polymer 3.x. element The legacy Polymer 2.x version is available here

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

Install the component using npm:

$ npm i @granite-elements/ace-widget --save

Once installed, import it in your application:

import '@granite-elements/ace-widget/ace-widget.js';

Fork the ace-widget repository and clone it locally.
Make sure you have npm and the Polymer CLI installed.
When in the ace-widget directory, run npm install to install dependencies.
Serve the project using Polyumer CLI:
polymer serve --npm
Open the demo in the browser
- http://127.0.0.1:8080/components/@greanite-elements/ace-widget/demo

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