Skip to content

jeanbenitez/stace-editor

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 

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!

About

📖 A wrapper web component for Ace Editor

Resources

License

Stars

Watchers

Forks

Packages

No packages published