@jinntec/jinn-codemirror NPM

Code Editor Webcomponent

A plain javascript web component based on codemirror.

Demo

Features:

Editing modes for: XML, HTML, CSS, TeX, XQuery, Leiden+ and other variants of the Leiden convention
Configurable toolbar with support for snippets
Autocomplete in XML mode based on a JSON representation of the schema
Commands for XML editing:
- enclose in element
- remove enclosing parent
- select parent
Linting for XML and XQuery
Support for markup following the Leiden+ convention, backed by a grammar
Conversion between EpiDoc XML fragments and Leiden+

The component comes in 3 flavours:

jinn-codemirror: the generic code editor webcomponent
jinn-xml-editor: extends jinn-codemirror with the option to specify an outer element which should wrap around the edited content. This is important if you want users to e.g. edit the contents of a <div> without seeing the wrapping element. The wrapper will be removed when a value is passed to the editor and added back when serializing the edited content.
jinn-epidoc-editor: combines an XML Editor with an option to import and convert a transcription following Leiden conventions. Leiden markup is automatically converted to the corresponding EpiDoc XML.

API

jinn-codemirror

Source code editor component based on codemirror. Features extended support for XML and Leiden+ code.

Properties

Property	Attribute	Type	Description
`code`	`code`	`string`	specifies initial content to be inserted at startup for editing
`content`		`string`	The content edited in the editor as a string.
`linter`	`linter`	`string`	XQuery mode: the API endpoint to use for linting.
`mode`	`mode`	`string`	The mode to use. Currently supported are 'xml', 'xquery', 'css', 'html', 'tex', 'markdown', 'leiden_plus', 'edcs', 'phi' or 'default'.
`namespace`		`string \\| null \\| undefined`	Default element namespace to enforce on the root element in XML mode
`placeholder`	`placeholder`	`string`	A placeholder string to be shown if the user has not yet entered anything.
`status`		`string`	Show a status message below the editor.
`theme`		`string \\| null \\| undefined`	Editor theme to use. Currently `dark`, `material-dark`, `material-light`, `solarized-dark` and`solarized-light` are supported.
`valid`		`boolean`
`value`			The value edited in the editor as either an Element or string - depending on the mode set.

Methods

Method	Type	Description
`clear`	`(): void`
`emitUpdateEvent`	`(content: any): void`
`focus`	`(): void`	Move keyboard focus to the editor
`setMode`	`(mode: string, update?: boolean): void`
`styles`	`(): string`

Events

Event	Description
`invalid`	fired if the content of the editor is invalid (requires a linter to be supported)
`update`	fired when the content of the editor has changed
`valid`	fired if the content of the editor is valid (requires a linter to be supported)

Slots

Name	Description
`header`	optional header to be displayed above the toolbar
`toolbar`	toolbar to be shown

jinn-xml-editor

Extends jinn-codemirror for XML editing: adds a boolean property "unwrap" to indicate if the entire root node passed in as value should be edited or just its content. Setting the property requires that a DOM element is passed via value.

Attributes

Attribute	Type	Description
`check-namespace`	`boolean`	if enabled, a missing namespace will be reported as error

Properties

Property	Attribute	Type	Default	Description
`schema`	`schema`	`string`	null	Schema to load for autocompletion.
`schemaRoot`	`schema-root`	`string`	null	Determines the root element to be used for autocomplete.
`unwrap`	`unwrap`	`string`	false	If set, expects that a value passed in is a DOM element, which will serve as a wrapper for the content. The wrapper element itself will not be shown in the editor.

Methods

Method	Type
`configure`	`(): void`
`emitUpdateEvent`	`(content: string): any`

jinn-epidoc-editor

Combines an XML editor with an option to import and convert markup following variants of the Leiden convention.

Properties

Property	Attribute	Type	Default	Description
`mode`		`string`	"leiden_plus"	Syntax mode to use for the leiden editor, one of leiden_plus, edcs or petrae
`modeSelect`	`mode-select`	`boolean`	false	if set, user may choose from the supported syntaxes
`placeholder`		`string`	""
`schema`		`string \\| null`	null	an optional schema description (JSON syntax) to load for the XML editor
`schemaRoot`	`schema-root`	`string`	null	determines the root element for autocomplete
`showLeiden`		`boolean`	false	Should the leiden editor be shown initially?
`unwrap`		`boolean \\| undefined`	false	If set, expects that a value passed in is a DOM element, which will serve as a wrapper for the content.The wrapper element itself will not be shown in the editor.
`valid`		`boolean \\| undefined`	true
`value`				The value edited in the editor as either an Element or string -depending on the mode set.
`xmlEditor`			null

Events

Event
`invalid`
`valid`

Slots

Name	Description
`leiden-header`	optional header to be displayed above the toolbar of the leiden editor
`leiden-toolbar`	toolbar for the leiden editor
`open-leiden`	control (button by default) which opens/closes the leiden editor
`xml-header`	optional header to be displayed above the toolbar of the xml editor
`xml-toolbar`	toolbar for the xml editor