{"id":15134769,"url":"https://github.com/weso/yashe","last_synced_at":"2025-06-28T05:36:47.705Z","repository":{"id":33966371,"uuid":"168233418","full_name":"weso/YASHE","owner":"weso","description":"Yet Another ShEx Editor.","archived":false,"fork":false,"pushed_at":"2023-03-01T08:47:46.000Z","size":141469,"stargazers_count":20,"open_issues_count":35,"forks_count":3,"subscribers_count":5,"default_branch":"gh-pages","last_synced_at":"2025-01-30T18:03:51.855Z","etag":null,"topics":["autocompletion","codemirror","codemirror-editor","codemirror-library","editor","javascript","jsdelivr","mediawiki-api","npm-package","rich-text-editor","semantic-web","shape-expressions","shex","shex-editor","text-editor","wikidata"],"latest_commit_sha":null,"homepage":"http://www.weso.es/YASHE/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"TriplyDB/YASGUI.YASQE","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/weso.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2019-01-29T21:39:48.000Z","updated_at":"2024-07-29T16:19:31.000Z","dependencies_parsed_at":"2023-02-13T18:48:43.083Z","dependency_job_id":"7b498fea-a9bb-4bbb-bd3c-bd30a0d0e11c","html_url":"https://github.com/weso/YASHE","commit_stats":null,"previous_names":[],"tags_count":81,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weso%2FYASHE","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weso%2FYASHE/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weso%2FYASHE/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weso%2FYASHE/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/weso","download_url":"https://codeload.github.com/weso/YASHE/tar.gz/refs/heads/gh-pages","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237811596,"owners_count":19370152,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["autocompletion","codemirror","codemirror-editor","codemirror-library","editor","javascript","jsdelivr","mediawiki-api","npm-package","rich-text-editor","semantic-web","shape-expressions","shex","shex-editor","text-editor","wikidata"],"created_at":"2024-09-26T05:24:19.265Z","updated_at":"2025-02-08T13:31:26.342Z","avatar_url":"https://github.com/weso.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![YASHE](./doc/imgs/yashe_logo.png)\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://travis-ci.com/weso/YASHE\"\u003e\u003cimg src=\"https://app.travis-ci.com/weso/YASHE.svg?branch=gh-pages\" alt=\"travis\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://app.codacy.com/gh/weso/YASHE?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=weso/YASHE\u0026utm_campaign=Badge_Grade_Dashboard\"\u003e\u003cimg src=\"https://api.codacy.com/project/badge/Grade/f1af6dd839d14bfd80503b74c5f02c8f\" alt=\"codacy\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\n# YASHE\n*YASHE* (Yet Another ShEx Editor) is a [Shape Expressions (ShEx)](http://shex.io/) editor which started as a fork of [*YASQE*](https://github.com/Triply-Dev/YASGUI.YASQE-deprecated) (which is based on SPARQL). \nThis 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\nautocomplete mechanisms. \nIn addition, it offers a simple way of integrating into other projects\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/weso/YASHE/blob/gh-pages/doc/imgs/yasheGIF.gif\" alt=\"YASHE GIF\"/\u003e\n\u003c/p\u003e\n\n\n## Table of Contents\n\n* [Features](#features-clipboard)\n* [Install](#install-floppy_disk)\n  - [NPM](#NPM)\n  - [JsDelivr](#JsDelivr)\n  - [Github](#Github)\n* [Getting Started](#Getting-started)\n* [Getting Started](#Getting-started)\n  - [React.js](#Reactjs)\n* [Configuration](#Configuration)\n* [Events](#Events)\n    - [Event Handlers](#event-handlers)\n    - [Fire your own events](#fire-your-own-events)\n* [Shortcuts](#shortcuts-provided-by-yashe)\n* [API](#API)\n* [Statics](#Statics)\n* [Developing YASHE](#developing-yashe-construction)\n  - [Docker](#Docker)\n* [Used By](#used-by-link)\n* [Forked By](#forked-by-link)\n* [Thanks!!!](#thanks)\n\n## Features :clipboard:\n\n* Completely client-side\n* ShEx syntax highlighting and error checking\n* Light and Dark modes\n* Extremely customizable: All functions and handlers from the CodeMirror library are accessible\n* Persistent values (optional): your query is stored for easier reuse between browser sessions\n* Prefix definition autocompletion (using prefix.cc)\n* Prefix and ShEx keywords autocompletion\n* Wikidata property and entity autocompletion (using the MediaWiki API)\n* Information tooltip when hovering over wikidata properties and entities (using the MediaWiki API)\n* Handy keyboard shortcuts\n* Integrated buttons that alows to:\n     * Upload ShEx files\n     * Download the editor content as a ShEx file\n     * Copy the editor content to the clipboard\n     * Delete all the editor content\n     * Change between light and dark mode\n     * FullScreen Mode\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/mistermboy/YASHE/blob/gh-pages/doc/imgs/wikiGIF.gif\" alt=\"YASHE GIF\"/\u003e\n\u003c/p\u003e\n\n## Install :floppy_disk:\n\n### NPM\nYASHE 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](https://www.npmjs.com/package/yashe))\n```\n$ npm i yashe\n```\n### JsDelivr\nThe YASHE files are hosted via JsDelivr. This CDN is the easiest way to include YASHE in your website.\n\n```html\n\u003clink href='https://cdn.jsdelivr.net/npm/yashe/dist/yashe.min.css' rel='stylesheet' type='text/css'/\u003e\n\u003cscript src='https://cdn.jsdelivr.net/npm/yashe/dist/yashe.bundled.min.js'\u003e\u003c/script\u003e\n```\n\n### Github\nVisit the [GitHub repository](https://github.com/weso/YASHE) to download the YASHE [.css](./dist/yashe.min.css) and [.js](./dist/yashe.bundled.min.js) files (find them in the dist directory).  \n\n## Getting Started\nYou 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).\nMain YASHE constructor. Pass a DOM element as argument to append the editor to, and (optionally) pass along config            settings. \nYASHE(parent: DOM-Element, settings: Object) → YASHE instance: yashe . \n[Codepen Example](https://codepen.io/mistermboy/pen/XWJpqdY)\n\n```js\nvar yashe = YASHE(document.getElementById('domId'), {\n  //Options\n});\n```\n\n``\n\n\nInitialize YASHE from an existing text area (see CodeMirror for more info)\nYASHE.fromTextArea(textArea: DOM element, config: Object) → YASHE instance: yashe\n[Codepen Example](https://codepen.io/mistermboy/pen/OJPWZWX)\n\n```js\nvar yashe = YASHE.fromTextArea(document.getElementById('texAreaId'), {\n  //Options\n});\n```\n### React.js\nThis is a basic example about how to use YASHE in React.js using hooks:\n```js\nimport React, {useState,useEffect,useRef} from 'react';\nimport YASHE from 'yashe';\n\nfunction Editor() {\n\n  const [yashe,setYashe] = useState(null);\n  const divRef = useRef(null);\n\n    useEffect(() =\u003e {\n    \n        if (!yashe) {\n            const options = {\n                persistent:false,\n                lineNumbers: true,\n            }\n            \n            const y = YASHE(divRef.current,options);\n        \n            y.refresh();\n            setYashe(y);           \n          }\n      }, [yashe]\n    );\n    return  (\u003cdiv ref={divRef}/\u003e);\n}\n\nexport default Editor;\n```\n\n\n## Configuration\nThis 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.\n\n```js\nvar yashe = YASHE(document.getElementById('domId'), {\n  value:'Starting value of the editor',\n  mode:'shex',\n  theme:'wiki', //dark\n  lineNumbers: true,\n  lineWrapping: true,\n  fontSize: 14, \n  cursorHeight:15,\n  firstLineNumber:1,\n  readOnly:false,\n  showCursorWhenSelecting:fasle,\n  tabMode: 'indent',\n  collapsePrefixesOnLoad: false,\n  matchBrackets: true,\n  fixedGutter: true,\n  syntaxErrorCheck: true,\n  showTooltip: true,\n  showUploadButton: true,\n  showDownloadButton: true,\n  showCopyButton: true,\n  showDeleteButton: true,\n  showThemeButton: true,\n  showFullScreenButton: true,\n  persistent: null,\n  extraKeys: {\n    \"Ctrl-Space\": YASHE.autoComplete,\n    \"Cmd-Space\": YASHE.autoComplete,\n    \"Ctrl-D\": YASHE.deleteLine,\n    \"Cmd-K\": YASHE.deleteLine,\n    \"Ctrl-/\": YASHE.commentLines,\n    \"Cmd-/\": YASHE.commentLines,\n    \"Ctrl-Down\": YASHE.copyLineDown,\n    \"Ctrl-Up\": YASHE.copyLineUp,\n    \"Cmd-Down\": YASHE.copyLineDown,\n    \"Cmd-Up\": YASHE.copyLineUp,\n    \"Shift-Ctrl-F\": YASHE.doAutoFormat,\n    \"Shift-Cmd-F\": YASHE.doAutoFormat,\n    \"Ctrl-S\": YASHE.storeContent,\n    \"Cmd-S\": YASHE.storeConten,\n    \"Ctrl-Enter\": YASHE.executeQuery,\n    \"Cmd-Enter\": YASHE.executeQuery,\n    }\n});\n```\n## Events\nHere are some events provided by YASHE (check the [Codemirror Documentation](https://codemirror.net/doc/manual.html#events) for more info ):\n\n  Event             | Objects              | Action\n  ----------------  | ---------------------| ------------------------ \n  change          |  yashe: CodeMirror,    changeObj: object | Fires every time the content of the editor is changed\n  cursorActivity    |  yashe: CodeMirror  | Will be fired when the cursor or selection moves, or any change is made to the editor content. \n  keyHandled        |  yashe: CodeMirror,name: string,event: Event | Fired after a key is handled through a key map\n  focus          |  yashe: CodeMirror, event: Event | Fires whenever the editor is focused\n  blur           |  yashe: CodeMirror, event: Event | Fires whenever the editor is unfocused\n  scroll         |  yashe: CodeMirror | Fires whenever the editor is scrolled\n  refresh        |  yashe: CodeMirror | Fires when the editor is refreshed or resized\n  optionChange   |  yashe: CodeMirror, option: string | Dispatched every time an option is changed with setOption\n  upload         |  yashe: CodeMirror        | Fires after uploading a file by the upload button\n  download       |  yashe: CodeMirror        | Fires after downloading a file by the download button\n  copy           |  yashe: CodeMirror        | Fires after copying the editor content using the copy button \n  themeChange    |  yashe: CodeMirror        | Fires after changing the editor theme using the change theme button \n  delete         |  yashe: CodeMirror        | Fires after deleting the editor content by the delete buttton\n  expandScreen   |  yashe: CodeMirror        | Fires after expanding screen\n  collapseScreen |  yashe: CodeMirror        | Fires after collapsing screen\n  \n  \n### Event Handlers\n`cm.on(type: string, func: (...args))`\n\nRegister 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.\n\n```js\nyashe.on('blur', function(yashe) {\n console.log('The editor has been unfocused!');\n});\n```\n\n`cm.off(type: string, func: (...args))`\n\nRemove an event handler on the editor instance. An equivalent CodeMirror.off(object, type, func) also exists.\n\n```js\nyashe.off('blur');\n```\n### Fire your own events\n`CodeMirror.signal(target, name, args...)`\n```js\nCodemirror.signal(yashe,'myOwnEvent'args...);\n```\n\n## Shortcuts provided by YASHE:\n \n  Shortcut          | Action\n  -------------     | -------------\n  Ctrl/Cmd-Space    | Trigger Autocompletion\n  Ctrl/Cmd-D        | Delete current/selected line(s)\n  Ctrl/Cmd-/        | Comment or uncomment current/selected line(s)\n  Ctrl/Cmd-Down     | Copy line down\n  Ctrl/Cmd-Up       | Copy line up\n  Ctrl/Cmd-Shift-F  | Auto-format/indent selected lines\n  Ctrl/Cmd-S        | Save current content in local storage\n  Ctrl/Cmd-Z        | Undo\n  Ctrl/Cmd-Y        | Redo\n  F11               | Set query editor full-screen (or leave full-screen)\n  Esc               | Leave full-screen\n\n\n## API\nAPI methods accessible via the yashe instance ( check the [Codemirror Manual](https://codemirror.net/doc/manual.html#api) for more info:\n\n```js\n// Get query value from editor\nyashe.getValue() → query: String\n\n//Set query value in editor\nyashe.setValue(query: String)\n\n// Get the content of line n.\nyashe.getLine(n: integer) → string\n\n// Get the number of lines in the editor.\nyashe.lineCount() → integer\n\n// Get the number of first line in the editor. \nyashe.firstLine() → integer\n\n// Get the number of last line in the editor. \nyashe.lastLine() → integer\n\n// Get the currently selected code. \n// Optionally pass a line separator to put between the lines in the output. \n// When multiple selections are present, they are concatenated with instances \n// of lineSep in between.\nyashe.getSelection(?lineSep: string) → string\n\n\n// Replace the selection(s) with the given string. By default, the new selection \n// ends up after the inserted text. The optional select argument can be used to \n// change this—passing \"around\" will cause the new text to be selected, passing \n// \"start\" will collapse the selection to the start of the inserted text.\nyashe.replaceSelection(replacement: string, ?select: string)\n\n// Retrieve one end of the primary selection. start is an optional string indicating \n// which end of the selection to return. It may be \"from\", \"to\", \"head\" (the side of \n// the selection that moves when you press shift+arrow), or \"anchor\" (the fixed side \n// of the selection). Omitting the argument is the same as passing \"head\". A {line, ch} \n// object will be returned.\nyashe.getCursor(?start: string) → {line, ch}\n\n// Return true if any text is selected\nyashe.somethingSelected() → boolean\n\n// Set the cursor position. You can either pass a single {line, ch} object, or the line \n// and the character as two separate parameters. Will replace all selections with a single, \n// empty selection at the given position\nyashe.setCursor(pos: {line, ch}|number, ?ch: number, ?options: object)\n\n// Tells you whether the editor currently has focus.\nyashe.hasFocus() → boolean\n\n// Returns the start and end of the 'word' (the stretch of letters, whitespace, or \n// punctuation) at the given position.\nyashe.findWordAt(pos: {line, ch}) → {anchor: {line, ch}, head: {line, ch}}\n\n\n// Retrieves the current value of the given option for this editor instance.\nyashe.getOption(option: string) → any\n\n// Change the configuration of the editor. option should the name of an option, \n// and value should be a valid value for that option.\nyashe.setOption(option: string, value: any)\n\n// Retrieve the currently active document from an editor.\nyashe.getDoc() → Doc\n\n// Retrieve the editor associated with a document. May return null.\nyashe.getEditor() → CodeMirror\n\n// Undo one edit (if any undo events are stored).\nyashe.undo()\n\n// Redo one undone edit.\nyashe.redo()\n\n// Programmatically set the size of the editor (overriding the applicable CSS rules). \n// width and height can be either numbers (interpreted as pixels) or CSS units (e.g \"100%\"). \n// You can pass null for either of them to indicate that that dimension should not be changed.\nyashe.setSize(width: number|string, height: number|string)\n\n// Scroll the editor to a given (pixel) position. Both arguments may be left as null \n// or undefined to have no effect.\nyashe.scrollTo(x: number, y: number)\n\n// If your code does something to change the size of the editor element (window resizes \n// are already listened for), or unhides it, you should probably follow up by calling \n// this method to ensure CodeMirror is still looking as intended.\nyashe.refresh()\n\n//Retrieves information about the token the current mode found before the given \n// position (a {line, ch} object). The returned object has the following properties:\n// start -\u003e The character (on the given line) at which the token starts\n// end -\u003e The character at which the token ends.\n// string-\u003eThe token's string.\n// type -\u003e The token type the mode assigned to the token, such as \"keyword\" or \n//         \"comment\" (may also be null).\n// state -\u003e The mode's state at the end of this token.\nyashe.getTokenAt(pos: {line, ch}, ?precise: boolean) → object\n\n// Fetch defined prefixes\nyashe.getDefinedPrefixes() → object:\n\n// Add prefixes to the query. The prefixes are defined as \n// {\"rdf: \"http://www.w3.org/1999/02/22-rdf-syntax-ns#\"}\nyashe.addPrefixes(prefixes: object)\n\n// Remove prefixes from query. The prefixes are defined as \n// {\"rdf\": \"http://www.w3.org/1999/02/22-rdf-syntax-ns#\"}\nyashe.removePrefixes(prefixes: object)\n\n// Set size. Use null value to leave width or height unchanged. \n// To resize the editor to fit its content, see //http://codemirror.net/demo/resize.html\nyashe.setSize(width: Number|string, height: Number|string)\n\n// Enable an autocompleter with this name. Only makes sense if you've programatically \n// disabled this completer before, as a plugin is automatically enabled when registering it \n// (see this function)\nyashe.enableCompleter(completerName: String)\n\n// Disable an autocompleter with this name.\nyashe.disableCompleter(completerName: String)\n\n// Store bulk completions in memory as trie, and in localstorage as well (if enabled). \n// The argument should be a key from the //autocompletion settings\nyashe.storeBulkCompletions(type: String)\n\n// Collapsing prefixes if there are any. Use false to expand them.\nyashe.collapsePrefixes(collapse: boolean)\n\n```\n\n## Statics\nStatic functions YASHE\n```js\n// Register an autocompleter in YASHE. This automatically enables the completer as well\nYASHE.registerAutocompleter(name: String, autocompleter: function)\n\n// When typing a shape, this shape is sometimes syntactically invalid, \n// causing the current tokens to be incorrect.\n// This causes problem for autocompletion. http://bla might result in two tokens: http:// and bla. \n// We'll want to combine these\nYASHE.getCompleteToken(doc: yashe, token: Object, cursor: Object) //→ token: Object\n\n```\n\n## Developing YASHE :construction:\nFeel free to fork and develop this tool.  You can submit your\ncontributions as GitHub pull requests.  To develop *YASHE* locally:\n\n* `npm install`\n* `npm run dev` for local development\n\n### Docker\nYou can also deploy YASHE with Docker. The only important requirement is that you have Docker installed and running on your computer.\nThen, you just need to follow these steps.\n\n1. Download the latest version of the repository, either as a ZIP file or by cloning the master branch.\n```shell\ngit clone https://github.com/weso/yashe\n```\n\n2. Then move to the docker folder from inside YASHE:\n```shell\ncd yashe/docker\n```\n\n3. Build yashe image: `docker-compose build`.\n\n4. Finally, execute `docker-compose up`. This will deploy the container and expose the port 4000.\n\n\n## Used By: :link:\n\n* [ShExAuthor](https://github.com/weso/shex-author): ShEx Graphic Assistant\n* [RDFShape](http://rdfshape.weso.es/): RDF service for conversion and validation using ShEX and SHACL\n* [WikiShape](http://wikishape.weso.es/): Shape Expressions playground customized for Wikidata\n* [ShExML](http://shexml.herminiogarcia.com/) Playground to convert ShExML to RDF and RML offering diferent syntaxes\n\n## Forked By: :link:\n* [YASME](https://github.com/weso/YASME) Yet Another Shape Map Editor\n* [ShExML Editor](http://shexml.herminiogarcia.com/) ShExML is a language based on ShEx to map and merge heterogeneous data sources. It is designed with usability in mind trying to make the script creation easier to the user\n\n## Thanks!\nA big thanks goes out to:\n* Laurens Rietveld for his great work on the [YASQE library](https://github.com/Triply-Dev/YASGUI.YASQE-deprecated)\n* Maxime Lefrançois for his tips at the beginning of the project and for his work on the [YATE library](https://github.com/perfectkb/yate) in which I could be inspired\n\nA big thanks transitively goes out to:\n* The people behind the MediaWiki API which I use for autocompleting Wikidata entities and properties.\n* Marijn Haverbeke for his great work on the CodeMirror library syntax highlighting library\n* Richard Cyganiak for his simple but effective Prefix.cc service, which I use for autocompleting prefixes.\n\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://contributors-img.web.app/image?repo=weso/YASHE\" alt=\"contributors\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweso%2Fyashe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweso%2Fyashe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweso%2Fyashe/lists"}