sparql-editor

sparql-editor

A text editor custom element which highlights and parses SPARQL queries.

It uses sparqljs to parse the query text.

Usage

Simply add the element to a page. It is possible to provide common prefixes and a base IRI so that they don't have to be explicitly added in the SPARQL string

import '@rdfjs-elements/sparql-editor'
import { html } from 'lit'

const value = `CONSTRUCT { ?s ?p ?o }
FROM <john-doe>
WHERE {
  <john-doe> a schema:Person ;
  schema:name "John Doe" .
}`

const template = html`<rdf-editor prefixes="schema" baseIRI="http://example.com/" .value="${value}"></rdf-editor>`

Properties

Property	Attribute	Modifiers	Type	Default	Description
autoParse	auto-parse		boolean		if set to true, parses the contents automatically when typing. Otherwise, parses on blur event
baseIRI	base-iri		string		Value of the BASE directive which will be injected to the query
codeMirror		readonly	Element | null		The underlying <wc-codemirror> element
customPrefixes	customPrefixes		Record<string, string>	{}	a map of custom prefixes or overrides
format		readonly	string
isParsing	is-parsing		boolean		set to true while the elements parses data when the code has changed
parseDelay	parseDelay		Number	250	time in milliseconds after which parsing will begin while typing. Only applies when autoParse is set
prefixes	prefixes		string		a comma-separated list of prefixes to use for serializing. Any prefix included in the @zazuko/vocabularies package can be used
query			object		The JS object representing the query
readonly	readonly		boolean
ready	ready		Promise<void>		a one-time promise which resolves when CodeMirror has been initialized
value	value		string		The raw contents of the code editor

Methods

Method	Type
parse	(): Promise<void>

Events

Event	Type	Description
parsed	CustomEvent<{ value: string; query: object }>	when the editor contents have changed and have been successfully parsed
parsing-failed	CustomEvent	when there as in an error in parsing the query

CSS Shadow Parts

Part	Description
CodeMirror	The main CodeMirror wrapper element. This and other parts are directly generated from CSS classes set by CodeMirror and should be fairly self-explanatory but not equally useful 😉
CodeMirror-code
CodeMirror-cursors
CodeMirror-gutter-filler
CodeMirror-gutters
CodeMirror-hscrollbar
CodeMirror-linenumbers
CodeMirror-lines
CodeMirror-measure
CodeMirror-scroll
CodeMirror-scrollbar-filler
CodeMirror-sizer
CodeMirror-vscrollbar
error	Line or part of line highlighted as result of parsing error. By default style is red wavy underline