INCLDE – Includable Linked Data Editor
INCLDE (spelled "/ɪnˈkluːd/", as "include") is a web component that allows editing of linked data. The goal is to allow easy integration into web-based applications.
Installation
npm install
To start the dev server use the following command:
npm start
Embedding / including in to existing projects
The web component can be built using npm run build
and after embedding the resulting files in to a website, INCLDE can be invoked like other web components. The components' documentation has a separate, auto-generated readme file. Example:
fetch("/data/example.jsonld")
.then((response) => response.json())
.then((data) => {
const editor = document.createElement("inclde-editor");
editor.data = data;
editor.config = config;
editor.addEventListener('editorClosed', event => {
console.log('event', event.detail);
})
document.body.appendChild(editor);
});
You may also want to take a look at the index.html example, which is what you see when you run npm start
.
Properties
Property | Attribute | Description | Type | Default |
---|
config (required) | config | | object | string | undefined |
data (required) | data | | object | string | undefined |
data
defines the data that should be edited. It can be either a JSON object or a JSON-LD string.
config
defines the configuration of the editor. It can be either a JSON object or a JSON-LD string.
An example config showcasing all currently available functionality:
{
"title": "INCLDE Demo Instance",
"hideAttributesByDefault": false,
"allowNewAttributes": true,
"attributConfig": [
{
"onType": "http://schema.org/Comment",
"attributes": [
{
"name": "http://schema.org/image",
"readOnly": true
}
]
},
{
"onId": "https://adhesivewombat.bandcamp.com/track/funky-sundays",
"attributes": [
{
"name": "http://schema.org/duration",
"hidden": true
}
]
}
]
}
Allowing specific attributes to be hidden or set to read only.
Events
Event | Description | Type |
---|
editorClosed | Fired when the editor is closed with the save or cancel buttons. event.detail contains the edited data if the save button was clicked, undefined otherwise. | CustomEvent<NodeObject | NodeObject[] | undefined> |
Custom element implementation
Custom Elements provide a way to overwrite the way certain elements are rendered. This can be used to add custom functionality to the editor.
For this custom elements need to implement the CustomElement
interface.
Here a minimal example:
import { h } from '@stencil/core';
import { CustomElement } from './index';
export default class ExampleEl implements CustomElement {
public static id = 'http://custom-elements.definition/example';
public value: string = "";
private callback?: (value: any) => void;
constructor(valueObj: any, callback?: (value: any) => void) {
if (typeof valueObj['value'] === 'string') {
this.value = valueObj['value'];
} else {
}
this.callback = callback;
}
private onInput(event: InputEvent) {
if (event.target instanceof HTMLInputElement) {
this.value = event.target.value;
if (this.callback !== undefined) {
this.callback(this.value);
}
}
}
render() {
return <input value={this.value} onInput={this.onInput} />
}
}
License
INCLDE (formerly lmd-editor) is licensed under MIT License. See LICENSE for more information.
Currently, the editor also makes use of icons from Font Awesome 6.4.0 (License)