JinnTap

Schema overview

The schema is the heart of JinnTap. A single JSON file declares which XML elements the editor understands, how each maps to a ProseMirror node or mark, and the toolbar buttons, keyboard shortcuts and input rules that create them. Customising the editor is mostly a matter of editing this file — for a step-by-step recipe (element → CSS → toolbar → connector), see Customizing the editor.

JinnTap ships two built-in schemas, chosen by the format attribute:

Format Attribute Built-in file
TEI (default) format="tei" or omitted src/tei-schema.json
JATS format="jats" src/jats-schema.json

To replace the built-in schema for the active format, point the schema attribute at a URL:

<jinn-tap format="tei" schema="./my-schema.json"></jinn-tap>

Top-level structure

{
  "css":        "./tei-editor-styles.css", // stylesheet for this format (optional)
  "attributes": { /* attributes available on every element */ },
  "toolbar":    { /* global toolbar buttons (not tied to one element) */ },
  "selects":    { /* dropdown groups that toolbar buttons can belong to */ },
  "schema":     { /* the element definitions — the bulk of the file */ }
}
Key Purpose Reference
css Path to a stylesheet for document elements, relative to the schema file. Injected automatically unless no-schema-css is set. Customizing
attributes Attributes offered on every element (e.g. rend, id) Attributes
toolbar Global toolbar buttons — snippets, mode toggles, structural commands Toolbar & selects
selects Named dropdown groups the toolbar buttons can be filed under Toolbar & selects
schema One entry per XML element, keyed by element name Element definitions

An element entry at a glance

Each entry under schema maps an XML element name to an editor node/mark:

"hi": {
  "type": "inline",                       // → a ProseMirror mark
  "attributes": {                         // attributes + their value types
    "rend": { "type": "string", "default": "i", "enum": ["i", "b", "u", "code"] }
  },
  "keyboard": {                           // shortcuts that toggle it
    "Cmd-b": { "attributes": { "rend": "b" } }
  },
  "toolbar": {                            // toolbar buttons that create it
    "Bold": { "attributes": { "rend": "b" }, "label": "<i class='bi bi-type-bold'></i>", "order": 5 }
  }
}

Read next