YASHE (Yet Another ShEx Editor) is a ShEx editor which started as a fork of YASQE (which is based on SPARQL). For more information about YASHE, its features, and a HOWTO for including it in your own web site, visit http://www.weso.es/YASHE/
- Completely client-side
- ShEx syntax highlighting and error checking
- Light and Dark modes
- Extremely customizable: All functions and handlers from the CodeMirror library are accessible
- Persistent values (optional): your query is stored for easier reuse between browser sessions
- Prefix definition autocompletion (using prefix.cc)
- Prefix and ShEx keywords autocompletion
- Wikidata property and entity autocompletion (using the MediaWiki API)
- Information tooltip when hovering over wikidata properties and entities (using the MediaWiki API)
- Handy keyboard shortcuts
- Integrated buttons that alows to:
- Upload ShEx files
- Download the editor content as a ShEx file
- Copy the editor content to the clipboard
- Delete all the editor content
- Change between light and dark mode
- FullScreen Mode (F11 shortcut too!)
The YASHE files are hosted via JsDelivr. This CDN is the easiest way to include YASHE in your website.
<link href='https://cdn.jsdelivr.net/npm/[email protected]/dist/yashe.min.css' rel='stylesheet' type='text/css'/>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/yashe.bundled.min.js'></script>
Visit the GitHub repository to download the YASHE .css and .js files (find them in the dist directory).
YASHE is registered as a node package as well, so you'll be able to use the node package manager to keep your version of YASHE up to date. (YASHE NPM Package)
You can initialize YASHE via its constructor, or via the command fromTextArea. Both return in instance of YASHE, from now on referred to as yashe (lowercase). Both function take as argument a config object (that can be null).
YASHE(parent: DOM-Element, settings: Object) → YASHE instance: yashe
Main YASHE constructor. Pass a DOM element as argument to append the editor to, and (optionally) pass along config settings (see the YASHE.defaults object below, as well as the regular CodeMirror documentation, for more information on configurability)
YASHE.fromTextArea(textArea: DOM element, config: Object) → YASHE instance: yashe
Initialize YASQE from an existing text area (see CodeMirror for more info)
Here you can see a code example of the two diferent ways to initialize YASHE
Feel free to fork and develop this tool. You can submit your contributions as Github pull requests. To develop YASHE locally:
npm install
npm run dev
for local development