cyclejs-ace-editor
v0.0.9
Published
Cycle.js wrapper for the Ace Editor
Downloads
11
Readme
cyclejs-ace-editor
Cycle.js intergration with Ace Editor using brace.
See live example.
Installation
npm install cyclejs-ace-editor --save
API
{editor$, value$} = AceEditor({DOM, params$, initialValue$})
Sources:
params$
- observable with a key-value configurationinitialValue$
- observable with a string as initial editor codeDOM
- DOM driver
Sinks:
editor$
- instance of Ace Editor, use when there is no built-in wrapper for the feature you wantvalue$
- observable of editor content
Supported keys for the params:
theme
readOnly
fontSize
sessionOptions
- callseditor.session.setOptions()
Supported, but deprecated:
mode
- usesessionOptions
instead
Example
import Cycle from '@cycle/core'
import {div, h3, pre, makeDOMDriver} from '@cycle/dom'
import {Observable} from 'rx'
import AceEditor from '../../src'
// Import theme before we can use it
import 'brace/theme/monokai'
function main({DOM}) {
const initialValue$ = Observable.just('Initial code')
const params$ = Observable.just({
theme: 'ace/theme/monokai'
})
const editor = AceEditor({DOM, params$, initialValue$})
return {
DOM: Observable.combineLatest(editor.DOM, editor.value$.debounce(100),
(editorVTree, code) => {
return div([
editorVTree,
h3('Debounced value'),
pre(code)
])
})
}
}
Cycle.run(main, {
DOM: makeDOMDriver('#example')
})