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.

• Demo
• NPM Package

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);
      // Process return data further
    })
    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 {
      // Error handling
    }
    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)