Purescript, Local First
Editor = async (doc = '', extensions = []) => {
// const { sql } = import(`@codemirror/next/lang-sql`);
// return CodeMirror(doc, [sql(), ...extensions]);
return CodeMirror(doc, [...extensions]);
}
{
let source = Inputs.textarea({label: "source"})
source.value = "Hello from Inputs.text"
Inputs.bind(viewof editor, source)
return source
}
Inputs.bind(Inputs.textarea({label: "target"}),viewof editor)
viewof editor = Editor(`Hello from codemirror;`, [
{
key: 'Shift-Enter',
run: view => {
console.log('Execute query');
return true;
}
}
])
editor
CodeMirror = async (doc = '', extensions = []) => {
// from https://github.com/codemirror/basic-setup/blob/main/src/codemirror.ts
const {EditorView, keymap, highlightSpecialChars, drawSelection, highlightActiveLine, dropCursor, rectangularSelection, crosshairCursor, lineNumbers, highlightActiveLineGutter} = await skypack("@codemirror/view@v6.22.1")
const {Extension, EditorState} = await skypack("@codemirror/state@v6.3.2")
const {defaultHighlightStyle, syntaxHighlighting, indentOnInput, bracketMatching, foldGutter, foldKeymap} = await skypack("@codemirror/language@v6.9.3")
const {defaultKeymap, history, historyKeymap} = await skypack("@codemirror/commands")
const {searchKeymap, highlightSelectionMatches} = await skypack("@codemirror/search")
const {autocompletion, completionKeymap, closeBrackets, closeBracketsKeymap} = await skypack("@codemirror/autocomplete")
// const {
// EditorView,
// keymap,
// highlightSpecialChars,
// drawSelection,
// highlightActiveLine,
// lineNumbers
// } = await skypack('@codemirror/view');
// const { Extension, EditorState, Prec } = await skypack('@codemirror/state');
// const { indentOnInput } = await skypack('@codemirror/language');
// const { defaultKeymap, history, historyKeymap } = await skypack('@codemirror/commands');
// const { commentKeymap } = await skypack('@codemirror/comment');
// const { rectangularSelection } = import(
// '@codemirror/rectangular-selection'
// );
// const { defaultHighlightStyle } = await skypack('@codemirror/highlight');
// const { lintKeymap } = await skypack('@codemirror/lint');
const {
keymapExtensions,
themeExtensions,
otherExtensions
} = extensions.reduce(
(result, extension) => {
if (extension['key']) {
return {
...result,
keymapExtensions: [...result.keymapExtensions, extension]
};
}
if (Object.keys(extension).find(key => key.startsWith('$'))) {
return {
...result,
themeExtensions: [...result.themeExtensions, extension]
};
}
return {
...result,
otherExtensions: [...result.otherExtensions, extension]
};
},
{ keymapExtensions: [], themeExtensions: [], otherExtensions: [] }
);
const view = new EditorView({
state: EditorState.create({
doc,
extensions:
[
// RuntimeError: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.
// highlightSpecialChars(),
// history(),
// drawSelection(),
// syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
keymap.of([
...defaultKeymap,
// ...historyKeymap,
]),
EditorView.theme({
'&': {
fontFamily: 'Consolas, "Roboto Mono", monospace',
fontSize: '12px',
height: '200px',
border: '1px solid #ddd',
},
...themeExtensions
}),
// updateView,
...otherExtensions
]
// [
// lineNumbers(),
// highlightSpecialChars(),
// history(),
// // // drawSelection(),
// // // EditorState.allowMultipleSelections.of(true),
// // indentOnInput(),
// // Prec.default(defaultHighlightStyle),
// // bracketMatching(),
// // closeBrackets(),
// // autocompletion(),
// // rectangularSelection(),
// // highlightActiveLine(),
// // highlightSelectionMatches(),
// keymap.of([
// // ...closeBracketsKeymap,
// ...defaultKeymap,
// // ...searchKeymap,
// ...historyKeymap,
// // ...foldKeymap,
// // ...commentKeymap,
// // ...completionKeymap,
// // ...lintKeymap,
// ...keymapExtensions
// ]),
// ]
})
});
// view.dom.value = view.state.doc.toString();
Object.defineProperty(view.dom, "value", {
get() {
console.log("editor.get called:", view.state.doc.toString())
return view.state.doc.toString();
},
set(v) {
console.log("editor.set called with: ",v)
let transaction = view.state.update({changes: {from: 0, to: view.state.doc.length, insert: v}})
// At this point the view still shows the old state.
view.dispatch(transaction)
// output.value = v;
}
});
return view.dom;
}
skypack = (library) => import(`https://cdn.skypack.dev/${library}?min`)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
