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 persNameCtrl/Cmd + Shift + L - Toggle listCtrl/Cmd + Shift + U - Insert footnoteTab - Indent list itemShift + Tab - Outdent list itemEnter - Create new list itemBackspace at start of list item - Convert to paragraph
General
Ctrl/Cmd + C - Copy selected textCtrl/Cmd + V - Paste textCtrl/Cmd + X - Cut textCtrl/Cmd + Z - UndoCtrl/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
});
License
GNU General Public License v3.0
