Owner of Hammies, former Jupyter core developer and co-lead of Jupyter Notebook and JupyterLab teams
SqlEditor = async (doc = '', extensions = []) => {
const { sql } = await skypack(`@codemirror/next/lang-sql`);
return CodeMirror(doc, [sql(), ...extensions]);
}
viewof sqlEditor = SqlEditor(`SELECT * FROM hammies_orders;`, [
{
key: 'Shift-Enter',
run: view => {
console.log('Execute query');
return true;
}
}
])
sqlEditor
CodeMirror = async (doc = '', extensions = []) => {
const {
EditorView,
keymap,
highlightSpecialChars,
drawSelection,
highlightActiveLine
} = await skypack('@codemirror/next/view');
const { Extension, EditorState, Prec } = await skypack(
'@codemirror/next/state'
);
const { history, historyKeymap } = await skypack('@codemirror/next/history');
const { foldGutter, foldKeymap } = await skypack('@codemirror/next/fold');
const { indentOnInput } = await skypack('@codemirror/next/language');
const { lineNumbers } = await skypack('@codemirror/next/gutter');
const { defaultKeymap } = await skypack('@codemirror/next/commands');
const { bracketMatching } = await skypack('@codemirror/next/matchbrackets');
const { closeBrackets, closeBracketsKeymap } = await skypack(
'@codemirror/next/closebrackets'
);
const { searchKeymap, highlightSelectionMatches } = await skypack(
'@codemirror/next/search'
);
const { autocompletion, completionKeymap } = await skypack(
'@codemirror/next/autocomplete'
);
const { commentKeymap } = await skypack('@codemirror/next/comment');
const { rectangularSelection } = await skypack(
'@codemirror/next/rectangular-selection'
);
const { defaultHighlightStyle } = await skypack('@codemirror/next/highlight');
const { lintKeymap } = await skypack('@codemirror/next/lint');
const updateView = EditorView.updateListener.of(update => {
const { dom } = update.view;
dom.value = update.state.doc.toString();
dom.dispatchEvent(new CustomEvent('input'));
});
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: [
// lineNumbers(),
highlightSpecialChars(),
history(),
// foldGutter(),
// drawSelection(),
EditorState.allowMultipleSelections.of(true),
indentOnInput(),
Prec.fallback(defaultHighlightStyle),
bracketMatching(),
closeBrackets(),
autocompletion(),
// rectangularSelection(),
// highlightActiveLine(),
highlightSelectionMatches(),
keymap.of([
...closeBracketsKeymap,
...defaultKeymap,
// ...searchKeymap,
...historyKeymap,
// ...foldKeymap,
...commentKeymap,
...completionKeymap,
// ...lintKeymap,
...keymapExtensions
]),
EditorView.theme({
$: {
'font-family': 'Menlo, Consolas, monospace !important',
'font-size': '14px',
border: 'none',
outline: 'none'
},
$scroller: {
'font-family': 'inherit'
},
...themeExtensions
}),
updateView,
...otherExtensions
]
})
});
view.dom.value = view.state.doc.toString();
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.
