YASHE
Yet Another ShEx Editor.
Install / Use
/learn @weso/YASHEREADME
YASHE
YASHE (Yet Another ShEx Editor) is a Shape Expressions (ShEx) editor which started as a fork of YASQE (which is based on SPARQL). This tool performs lexical and syntactic analysis of the content of the editor, thus offering the user a realtime syntactic error detector. It has features like: syntax highlighting, visual aid elements (tooltips) and autocomplete mechanisms. In addition, it offers a simple way of integrating into other projects
<p align="center"> <img src="https://github.com/weso/YASHE/blob/gh-pages/doc/imgs/yasheGIF.gif" alt="YASHE GIF"/> </p>Table of Contents
- Features
- Install
- Getting Started
- Getting Started
- Configuration
- Events
- Shortcuts
- API
- Statics
- Developing YASHE
- Used By
- Forked By
- Thanks!!!
Features :clipboard:
- 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
Install :floppy_disk:
NPM
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)
$ npm i yashe
JsDelivr
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/yashe/dist/yashe.min.css' rel='stylesheet' type='text/css'/>
<script src='https://cdn.jsdelivr.net/npm/yashe/dist/yashe.bundled.min.js'></script>
Github
Visit the GitHub repository to download the YASHE .css and .js files (find them in the dist directory).
Getting Started
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). Main YASHE constructor. Pass a DOM element as argument to append the editor to, and (optionally) pass along config settings. YASHE(parent: DOM-Element, settings: Object) → YASHE instance: yashe . Codepen Example
var yashe = YASHE(document.getElementById('domId'), {
//Options
});
``
Initialize YASHE from an existing text area (see CodeMirror for more info) YASHE.fromTextArea(textArea: DOM element, config: Object) → YASHE instance: yashe Codepen Example
var yashe = YASHE.fromTextArea(document.getElementById('texAreaId'), {
//Options
});
React.js
This is a basic example about how to use YASHE in React.js using hooks:
import React, {useState,useEffect,useRef} from 'react';
import YASHE from 'yashe';
function Editor() {
const [yashe,setYashe] = useState(null);
const divRef = useRef(null);
useEffect(() => {
if (!yashe) {
const options = {
persistent:false,
lineNumbers: true,
}
const y = YASHE(divRef.current,options);
y.refresh();
setYashe(y);
}
}, [yashe]
);
return (<div ref={divRef}/>);
}
export default Editor;
Configuration
This configuration object is accessible/changeable via YASHE.defaults and yashe.options, and you can pass these along when initializing YASHE as well. Other than the configuration we describe here, check the CodeMirror documentation for even more options you can set, such as disabling line numbers, or changing keyboard shortcut keys.
var yashe = YASHE(document.getElementById('domId'), {
value:'Starting value of the editor',
mode:'shex',
theme:'wiki', //dark
lineNumbers: true,
lineWrapping: true,
fontSize: 14,
cursorHeight:15,
firstLineNumber:1,
readOnly:false,
showCursorWhenSelecting:fasle,
tabMode: 'indent',
collapsePrefixesOnLoad: false,
matchBrackets: true,
fixedGutter: true,
syntaxErrorCheck: true,
showTooltip: true,
showUploadButton: true,
showDownloadButton: true,
showCopyButton: true,
showDeleteButton: true,
showThemeButton: true,
showFullScreenButton: true,
persistent: null,
extraKeys: {
"Ctrl-Space": YASHE.autoComplete,
"Cmd-Space": YASHE.autoComplete,
"Ctrl-D": YASHE.deleteLine,
"Cmd-K": YASHE.deleteLine,
"Ctrl-/": YASHE.commentLines,
"Cmd-/": YASHE.commentLines,
"Ctrl-Down": YASHE.copyLineDown,
"Ctrl-Up": YASHE.copyLineUp,
"Cmd-Down": YASHE.copyLineDown,
"Cmd-Up": YASHE.copyLineUp,
"Shift-Ctrl-F": YASHE.doAutoFormat,
"Shift-Cmd-F": YASHE.doAutoFormat,
"Ctrl-S": YASHE.storeContent,
"Cmd-S": YASHE.storeConten,
"Ctrl-Enter": YASHE.executeQuery,
"Cmd-Enter": YASHE.executeQuery,
}
});
Events
Here are some events provided by YASHE (check the Codemirror Documentation for more info ):
Event | Objects | Action ---------------- | ---------------------| ------------------------ change | yashe: CodeMirror, changeObj: object | Fires every time the content of the editor is changed cursorActivity | yashe: CodeMirror | Will be fired when the cursor or selection moves, or any change is made to the editor content. keyHandled | yashe: CodeMirror,name: string,event: Event | Fired after a key is handled through a key map focus | yashe: CodeMirror, event: Event | Fires whenever the editor is focused blur | yashe: CodeMirror, event: Event | Fires whenever the editor is unfocused scroll | yashe: CodeMirror | Fires whenever the editor is scrolled refresh | yashe: CodeMirror | Fires when the editor is refreshed or resized optionChange | yashe: CodeMirror, option: string | Dispatched every time an option is changed with setOption upload | yashe: CodeMirror | Fires after uploading a file by the upload button download | yashe: CodeMirror | Fires after downloading a file by the download button copy | yashe: CodeMirror | Fires after copying the editor content using the copy button themeChange | yashe: CodeMirror | Fires after changing the editor theme using the change theme button delete | yashe: CodeMirror | Fires after deleting the editor content by the delete buttton expandScreen | yashe: CodeMirror | Fires after expanding screen collapseScreen | yashe: CodeMirror | Fires after collapsing screen
Event Handlers
cm.on(type: string, func: (...args))
Register an event handler for the given event type (a string) on the editor instance. There is also a CodeMirror.on(object, type, func) version that allows registering of events on any object.
yashe.on('blur', function(yashe) {
console.log('The editor has been unfocused!');
});
cm.off(type: string, func: (...args))
Remove an event handler on the editor instance. An equivalent CodeMirror.off(object, type, func) also exists.
yashe.off('blur');
Fire your own events
CodeMirror.signal(target, name, args...)
Codemirror.signal(yashe,'myOwnEvent'args...);
Shortcuts provided by YASHE:
Shortcut | Action ------------- | ------------- Ctrl/Cmd-Space | Trigger Autocompletion Ctrl/Cmd-D | Delete current/selected line(s) Ctrl/Cmd-/ | Comment or uncomment current/selected line(s) Ctrl/Cmd-Down | Copy line down Ctrl/Cmd-Up | Copy line up Ctrl/Cmd-Shift-F | Auto-format/indent selected lines Ctrl/Cmd-S | Save current content in local storage Ctrl/Cmd-Z | Undo Ctrl/Cmd-Y | Redo F11 | Set query editor full-screen (or leave full-screen) Esc | Leave full-screen
API
API methods accessible via the yashe instance ( check the Codemirror Manual for more info:
// Get query value from editor
yashe.getValue() → query: String
//Set query value in editor
yashe.setV
