@jinntec/jinntap NPM

JinnTap

Edit TEI XML documents using a rich text editor. JinnTap preserves the structure of the XML in the editor. There's no need for complex transformation steps from TEI to HTML and back. The representation of the document in the editor corresponds directly with the XML. TEI elements are converted to HTML custom elements, preserving all attributes and structural features.

Installation

npm install jinn-tap

Development Setup

Prerequisites

Node.js (v16 or higher)
npm (v7 or higher)

Building the Project

# Install dependencies
npm install

# Build the project
npm run build

# Build the demo
npm run build:demo

Running the Demo

# Start the development server
npm run dev

# Preview the built demo
npm run preview

Running Tests

# Open Cypress test runner
npm run cypress:open

# Run tests in headless mode
npm run cypress:run

Usage

Basic Usage

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <script type="module" src="node_modules/jinn-tap/dist/jinn-tap.es.js"></script>
</head>
<body>
    <jinn-tap></jinn-tap>
    <pre id="output"></pre>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const editor = document.querySelector('jinn-tap');
            const output = document.querySelector('#output');
            
            editor.addEventListener('content-change', (event) => {
                output.textContent = event.detail.teiXml;
            });
        });
    </script>
</body>
</html>

With Initial Content

<jinn-tap content="<tei-div><tei-p>Initial content</tei-p></tei-div>"></jinn-tap>

JavaScript API

// Get the editor instance
const editor = document.querySelector('jinn-tap').tiptap;

// Set content programmatically
editor.commands.setContent('<tei-div><tei-p>New content</tei-p></tei-div>');

// Get content as HTML
const htmlContent = editor.getHTML();

// Get content as TEI XML
const teiXml = editor.teiXml;

// Focus the editor
editor.focus();

Keyboard Shortcuts

The editor supports the following keyboard shortcuts:

Text Formatting

Ctrl/Cmd + B - Toggle bold text (hi with rend="bold")
Ctrl/Cmd + I - Toggle italic text (hi with rend="italic")
Ctrl/Cmd + U - Toggle underline text (hi with rend="underline")

TEI Elements

Ctrl/Cmd + Shift + P - Insert TEI persName
Ctrl/Cmd + Shift + L - Toggle list
Ctrl/Cmd + Shift + U - Insert footnote
Tab - Indent list item
Shift + Tab - Outdent list item
Enter - Create new list item
Backspace at start of list item - Convert to paragraph

General

Ctrl/Cmd + C - Copy selected text
Ctrl/Cmd + V - Paste text
Ctrl/Cmd + X - Cut text
Ctrl/Cmd + Z - Undo
Ctrl/Cmd + Shift + Z - Redo

Events

The component dispatches the following events:

content-change

Fired when the editor content changes.

editor.addEventListener('content-change', (event) => {
    const { content, teiXml } = event.detail;
    // content: HTML content
    // teiXml: TEI XML content
});