!YASHE

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

Table of Contents

* Features
* Install
- NPM
- JsDelivr
- Github
* Getting Started
- React.js
* Configuration
* Events
- Event Handlers
- Fire your own 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:

$3

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
`

$3

The YASHE files are hosted via JsDelivr. This CDN is the easiest way to include YASHE in your website.

`html


`

$3

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

`js
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

`js
var yashe = YASHE.fromTextArea(document.getElementById('texAreaId'), {
//Options
});
`

$3

This is a basic example about how to use YASHE in React.js using hooks:
`js
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 (