@jinntec/jinntap
Advanced tools
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.
npm install jinn-tap
# Install dependencies
npm install
# Build the project
npm run build
# Build the demo
npm run build:demo
# Start the development server
npm run dev
# Preview the built demo
npm run preview
# Open Cypress test runner
npm run cypress:open
# Run tests in headless mode
npm run cypress:run
<!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>
<jinn-tap content="<tei-div><tei-p>Initial content</tei-p></tei-div>"></jinn-tap>
// 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();
The editor supports the following keyboard shortcuts:
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")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 paragraphCtrl/Cmd + C - Copy selected textCtrl/Cmd + V - Paste textCtrl/Cmd + X - Cut textCtrl/Cmd + Z - UndoCtrl/Cmd + Shift + Z - RedoThe component dispatches the following events:
Fired when the editor content changes.
editor.addEventListener('content-change', (event) => {
const { content, teiXml } = event.detail;
// content: HTML content
// teiXml: TEI XML content
});
FAQs
The npm package @jinntec/jinntap receives a total of 57 weekly downloads. As such, @jinntec/jinntap popularity was classified as not popular.
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.
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.
Security News
The White House’s Gold Eagle Initiative aims to coordinate AI-discovered vulnerabilities, validate findings, and accelerate patching across critical software.
Security News
A Shai-Hulud infection exposed Suno's source code, which shows the AI music startup stream-ripped tracks to train its models.
Security News
Vercel is formalizing a monthly release program for Next.js. The change follows React2Shell and a sharp rise in AI-assisted vulnerability discovery.