Security News
Frontier AI Is Now Critical Infrastructure
The Fable shutdown shows how quickly model access can become a business continuity risk for AI-dependent engineering teams.
By Sarah Gooding - Jun 24, 2026
🚀 Socket Launch Week Day 5:Introducing Repository Access Permissions and Custom Roles.Learn more →
@jinntec/jinntap
Advanced tools
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.
JinnTap comes as a web component. While it can be used standalone, it is usually meant to be embedded into a larger application context such as TEI Publisher 10, which will include JinnTap and does allow saving and reloading documents. TP 10 has not been released yet.
Installation
npm install @jinntec/jinntap
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">
<!-- Import the general editor styles-->
<link rel="stylesheet" href="node_modules/@jinntec/jinntap/dist/jinn-tap.css" />
<!-- Import the styles for displaying TEI documents -->
<link rel="stylesheet" href="node_modules/@jinntec/jinntap/dist/editor-styles.css" />
<script type="module" src="node_modules/@jinntec/jinntap/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 itemBackspaceat 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
Keywords
FAQs
We found that @jinntec/jinntap demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Package last updated on 30 Apr 2026
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
The Code You Didn't Write Is Still Yours to Defend
AI agents are pulling packages into environments no scanner is watching, creating exposure before security teams can see it.
By Brad Arkin - Jun 23, 2026
Security News
GitHub Actions Checkout Now Blocks Risky pull_request_target Checkouts
GitHub Actions checkout now blocks risky pull_request_target checkouts by default to help prevent pwn request supply chain attacks.
By Sarah Gooding - Jun 20, 2026