@granite-elements/ace-widget

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.

Modern implementation using Lit 3.1

The legacy Polymer implementation is still available as ace-widget-old.js

Doc and demo

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

Usage example

<script type="module" src="@granite-elements/ace-widget/ace-widget.js"></script>

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

Install

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';

Running demos and tests in browser

• Fork the ace-widget repository and clone it locally.

• Make sure you have npm installed.

• When in the ace-widget directory, run npm install to install dependencies.

• Serve the project using the development server:

  npm start

This will automatically open the demo page in your default browser.

Simple Test Page

A simplified test page is also available at /demo/simple.html. This page contains a minimal setup with just one editor instance and controls for toggling debug features. It's useful for quick testing and debugging.

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
verbose	Boolean	false	If true, outputs basic debug information to the console
debug	Boolean	false	If true, outputs detailed debug information to the console
disableWorker	Boolean	false	If true, disables Ace editor worker scripts (useful for environments where workers don't work)

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

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

Implementation Details

This component is built with Lit 3.1, a modern, lightweight web component library. It provides a clean, efficient wrapper around the Ace editor with reactive properties and a simple API.

License

MIT License