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 |