@jinntec/jinn-codemirror

<!DOCTYPE html> <html> <head> <title>jinn-codemirror</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald"/> <style> body { font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.42857143; } h1, h2, h3 { font-family: Oswald, sans-serif; font-weight: 200; } h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1em; } nav a:link, nav a:hover { text-decoration: none; } section { margin-bottom: 2em; max-width: 1024px; margin-left: auto; margin-right: auto; } jinn-codemirror, jinn-xml-editor, jinn-epidoc-editor { font-size: 16px; display:block; --jinn-codemirror-background-color: #f0f0f0; } jinn-codemirror[valid="true"], jinn-xml-editor[valid="true"], jinn-epidoc-editor[valid="true"] { outline: thin solid green; } jinn-codemirror[valid="false"], jinn-xml-editor[valid="false"], jinn-epidoc-editor[valid="false"] { outline: thin solid red; } #epidoc-editor { background-color: #ffc74f; } #xml-editor { background-color: #95ffe6; } .hidden { display: none; } [slot=toolbar] { display: flex; column-gap: 4px; width: 100%; padding: 4px 0; } [slot="leiden-toolbar"] *, [slot="xml-toolbar"] *, jinn-epidoc-editor::part(button) { font-size: .85rem; border: 1px solid transparent; background-color: inherit; } [slot="leiden-toolbar"] *:hover, [slot="xml-toolbar"] *:hover, jinn-epidoc-editor::part(button):hover { border: 1px solid orange; } [slot="leiden-toolbar"] .sep, [slot="xml-toolbar"] .sep { border-right: 1px solid #D0D0D0; } [slot="xml-header"], [slot="leiden-header"] { padding-left: .5rem; } .ts-control .item { background-color: aquamarine; } </style> <script type="module" src="dist/jinn-codemirror-bundle.js"></script> </head> <body> <nav> <a href="https://www.npmjs.com/package/@jinntec/jinn-codemirror"> <img title="npm (scoped)" src="https://img.shields.io/npm/v/@jinntec/jinn-codemirror?style=flat"> </a> <a href="https://github.com/JinnElements/jinn-codemirror"> <img title="Github" src="https://img.shields.io/github/last-commit/JinnElements/jinn-codemirror?style=flat"> </a> </nav> <section> <h1><jinn-codemirror>: code editor webcomponent</h1> <p>A plain javascript web component based on <a href="https://codemirror.net/">codemirror</a>. It adds support for toolbars, XML-specific shortcuts, linting for XML and XQuery, and helpers for the transcription of epigraphic documents.</p> </section> <section class="epidoc"> <h2>EpiDoc Editor</h2> <p>Combines an XML Editor with an option to import and convert a transcription following Leiden conventions. Multiple variants of Leiden are supported, with Leiden+ providing the best coverage as it is backed by a syntax tree. The other two Leiden modes use heuristics and are more prone to produce invalid markup.</p> <p>The toolbar and XML snippets are fully configurable in HTML.</p> <jinn-epidoc-editor id="epidoc-editor" schema="dist/tei.json" schema-root="div" mode="leiden_plus" mode-select placeholder="[Transcription]" show-leiden=""> <h3 slot="leiden-header">Leiden+ Editor</h3> <div slot="open-leiden"> <button title="Import from Leiden markup">Edit as Leiden+</button> </div> <div slot="leiden-toolbar"> <button data-command="expan" data-mode="leiden_plus" data-key="mod-c mod-x" title="Abbreviation expansion">(a(bcd))</button> <button data-command="snippet" data-mode="leiden_plus" data-key="mod-c mod-u" data-params="(|${_}|)" title="Unexpanded abbreviation">(|abc|)</button> <button data-command="snippet" data-mode="leiden_plus" data-key="mod-c mod-r" data-params="〚${_}〛" title="Erasure">〚abc〛</button> <button data-command="unclear" data-mode="leiden_plus" data-key="mod-c mod-c" title="Unclear characters">ạ</button> <button data-command="div" data-mode="leiden_plus" data-key="mod-c mod-d" title="Division (ab)"><=...</button> <button data-command="part" data-mode="leiden_plus" data-key="mod-p mod-p" title="Part"><D=.A.part...</button> <button data-command="recto" data-mode="leiden_plus" data-key="mod-p mod-r" title="Recto"><D=.r...</button> <button data-command="verso" data-mode="leiden_plus" data-key="mod-p mod-v" title="Verso"><D=.v...</button> <button data-command="foreign" data-mode="leiden_plus" data-key="mod-c mod-f" title="Language switch (foreign)">~|...|~</button> <button data-command="erasure" data-mode="edcs" data-key="mod-c mod-r">〚abc〛</button> <button data-command="gap" data-mode="edcs" data-key="mod-c mod-g">[...]</button> <button data-command="convert" data-mode="edcs" data-key="mod-c mod-c">Convert to Leiden+</button> <button data-command="fixNewlines" data-mode="leiden_plus" title="Add missing line numbers">↩</button> </div> <h3 slot="xml-header">EpiDoc XML Editor</h3> <div slot="xml-toolbar"> <button data-command="selectElement" data-key="mod-c mod-s" title="Select element around current cursor position"><|></button> <button data-command="encloseWith" data-key="mod-c mod-e" title="Enclose selection in new element"><...></button> <button data-command="removeEnclosing" title="Remove enclosing tags" data-key="mod-c mod-r" class="sep"><X></button> <button data-command="snippet" data-params='<ab>$|_|</ab>' title="Insert ab" data-key="mod-c mod-a"><ab> </button> <button data-command="snippet" data-params='<lb n="$|1|"/>$|2|' data-key="mod-c mod-l" title="Line break"><lb></button> <button data-command="snippet" data-params='<supplied reason="lost">$|_|</supplied>' title="Insert supplied" data-key="mod-c mod-u"><supplied> </button> <button data-command="snippet" data-params='<expan><abbr>$|1|</abbr><ex>$|2|</ex></expan>$|3|' title="Insert expan/abbr" data-key="mod-c mod-p"><expan> </button> <button data-command="snippet" data-params='<gap reason="lost" extent="unknown" unit="character"/>$|1|' title="Gap extent unknown" data-key="mod-c mod-g"><gap/unknown></button> <button data-command="snippet" data-params='<gap reason="lost" quantity="$|1|" unit="$|2:line|"/>$|3|' title="Gap extent known" data-params="mod-c mod-k"><gap></button> </div> </jinn-epidoc-editor> </section> <section> <h2>XML Editor</h2> <p>An XML editor intended for entering a fragment of TEI XML. This editor instance is configured to wrap the content into a TEI div element. Auto-complete will only suggest elements allowed below div.</p> <jinn-xml-editor id="xml-editor" unwrap namespace="http://www.tei-c.org/ns/1.0" theme="light" wrapper='<div xmlns="http://www.tei-c.org/ns/1.0"></div>' schema="dist/tei.json" schema-root="div" placeholder="[TEI division content]"> <div slot="toolbar"> <button data-command="selectElement" data-key="mod-c mod-s" title="Select element around current cursor position"><|></button> <button data-command="encloseWith" data-key="mod-c mod-e" title="Enclose selection in new element"><...></button> <button data-command="removeEnclosing" title="Remove enclosing tags" data-key="mod-c mod-r" class="sep"><X></button> <button data-command="snippet" data-params="<p>${_}</p>" title="Insert <p>" data-key="mod-c mod-p"><p></button> <button data-command="snippet" data-params='<hi rend="${1}">${_}</hi>' data-key="mod-c mod-h" title="Insert <hi>"><hi></button> <button data-command="snippet" data-params="<list>
	<item>${_}</item>
</list>" title="Insert <list>" data-key="mod-c mod-l"><list></button> <button data-command="zotero" data-params='[2519759]'>📖</button> </div> </jinn-xml-editor> <h3>XML Output</h3> <pre id="xml-output"></pre> </section> <section> <h2>Other syntaxes</h2> <jinn-codemirror linter="http://localhost:8080/exist/apps/tei-publisher/api/lint" theme="solarized-dark"> <div slot="toolbar"> <select name="modes"> <option value="xquery" selected>XQuery</option> <option value="css">CSS</option> <option value="html">HTML</option> <option value="tex">TeX</option> <option value="markdown">Markdown</option> <option value="json">JSON</option> <option value="default">Plain text</option> </select> <button data-mode="css" data-command="snippet" data-params="${1:*} {
 ${_};${3}
}" title="Add CSS rule">+</button> <button data-mode="xquery" data-command="snippet" data-params="for ${1:$i} in ${_}">for</button> <button data-mode="xquery" data-command="snippet" data-params="let ${1:$i} := ${_}">let</button> <button data-mode="markdown" data-command="snippet" data-params="[${_}]{${2}}">Link</button> <button data-mode="html" data-command="selectElement" data-key="mod-c mod-s" title="Select element around current cursor position"><|></button> <button data-mode="html" data-command="encloseWith" data-key="mod-c mod-e" title="Enclose selection in new element"><...></button> <button data-mode="html" data-command="removeEnclosing" title="Remove enclosing tags" data-key="mod-c mod-r" class="sep"><X></button> </div> </jinn-codemirror> </section> <script> window.addEventListener('DOMContentLoaded', () => { const epidoc = document.getElementById('epidoc-editor'); const xml = document.getElementById('xml-editor'); const xmlOutput = document.getElementById('xml-output'); const button = document.getElementById('mybutton'); xml.addEventListener('update', (ev) => { // because we defined a wrapper, the returned content will be a node instead of a string xmlOutput.innerText = new XMLSerializer().serializeToString(ev.detail.content); }); epidoc.addEventListener('leave', (ev) => { console.log('epidoc left %o', ev.relatedTarget); }); xml.addEventListener('leave', (ev) => { console.log('xml left %o', ev.relatedTarget); }); }); </script> </body> </html>