Skip to content
📖 A wrapper web component for Ace Editor
TypeScript HTML CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/assets
src
.editorconfig
.gitignore
LICENSE
package-lock.json
package.json
readme.md
stencil.config.ts
tsconfig.json

readme.md

Built With Stencil

Stace Editor

A web component wrapper for Ace Editor, using Stencil + brace


Why?

I needed to make an Ace editor web component to a stencil-based app, so I did this ... and wait, why not? I love Stencil.

Why Wrapper?

I had some limitations with Ace, ex. I didn't found the way to load the ace editor addons (theme/mode/snippets) dynamically, so, yes, you will need to have brace as your dependency too, and load the addons that you will use. Feel free to do a PR with some solution to this :D

Run Demo

npm install
npm start

Usage

Learn how to install this web component in your technology here. Check the demo package too.

You also need to import brace and the used mode(s) and theme(s):

import 'brace';
import 'brace/mode/javascript';
import 'brace/theme/monokai';
<stace-editor
  text={this.code}
  mode="javascript"
  theme="monokai"
  options={options}
  readOnly={false}
  autoUpdateContent={true}
  durationBeforeCallback={1000}
  onTextChange={this.doChange}
  style={{width: '500px', height: '500px'}}
/>

For more detailed documentation with all the supported config options see the Ace documentation.

Feel free to write me :)

Thanks!

You can’t perform that action at this time.