Integrating the Query Editror

[hco]

Hey there 👋 , I'm currently integrating jora into my application. I'd like to have a editor with syntax highlighting and preferably even code completion, so I had a look if I could integrate the query editor into my application, without integrating everything from discovery, but I failed to find a way.

Is that possible? 🤔 Can you give me a few pointers on how to achieve this? Or do you know if someone else did this? Then I could have a look how they achieved it.

[lahmatiy]

@hco You can use the QueryEditor class from the Discovery package:

import { views } from '@discoveryjs/discovery';

const { QueryEditor } = views;
const queryEditor = new QueryEditor();

This class is a wrapper around CodeMirror and is loosely coupled with Discovery itself. However, it’s not intended for use outside of Discovery, so you may need to create your own wrapper and adjust the styles as needed.

I’ve experimented with integrating Discovery as a widget, which you can find here: https://observablehq.com/d/a46b8ad842d5f687 (just updated to the latest Discovery.js version). The widget injects an editor with suggestions (there’s a known issue with the popup display). See the struct function for details:

I plan to add this as a view in Discovery and make it easier to integrate outside of Discovery. However, this has a low priority, and there’s no ETA at the moment.