mmo-markdown-editor

1 symbol · generated 5 Oct 2026

element

mmo-markdown-editor

A markdown editor, GitHub flavored: a toolbar, the source, its preview (beside it, or in its own tab), and suggestion lists opened by a key.

<mmo-markdown-editor value mode="split" placeholder rows="12" name readonly required></mmo-markdown-editor>

Extends: CustomShadowElement

A **trigger** is a character (or a few) that opens a list of values when it is typed: `@` for the people, `#` for the tickets, `<` for the elements... The list is filtered by what is typed after the character, picked with the arrows and Enter / Tab (or the mouse), and closed by Escape, by a space or by moving the caret away. Triggers are set in javascript: editor.addTrigger('@', {values: ['marc', {value: 'laura', label: 'Laura', description: 'Design'}]}); editor.addTrigger('#', {values: async (query) => (await fetch('/tickets?q=' + query)).json(), insert: (item) => '#' + item.value + ' '}); editor.addTrigger('<', {values: ['mmo-icon', 'mmo-code'], insert: '<{value}>{caret}</{value}>'}); or in the page, as a `<datalist>` child: <datalist trigger="@" insert="@{value} " label="mention"> <option value="marc" data-description="Developer">Marc Mouret</option> (the closing tags follow) A trigger's options: - `values`: an array, or a function `(query, trigger) => array` that may return a promise. An item is a string, or an object `{value, label, description}` (only `value` is required) - `insert`: what replaces the trigger and the query: a template where `{value}`, `{label}`, `{query}` and `{trigger}` are replaced and `{caret}` is where the caret goes, or a function `(item, query, trigger) => string`. Default: `{trigger}{value} ` (`@marc `) - `spaces`: the query may hold spaces (default false: a space closes the list) - `anywhere`: the trigger opens the list in the middle of a word too (default false: only at the start of a word, so an email address does not open `@`'s list) - `inCode`: the trigger works in a code span or block too (default false) - `limit`: how many items the list shows (default 8) - `filter`: a function `(item, query) => bool` replacing the default one, which keeps the items whose value or label holds the query (case and accents ignored), the ones starting with it first - `label`: what the hint under the editor calls the trigger (`@ mention`) The preview is rendered by `MMO.core.markdown` (GitHub flavored: tables, task lists, strikethrough, fenced code, autolinks), its html never live: markdown source is always text.

Index

	value	the markdown
	mode	`write`, `preview` or `split` (the source beside its preview; the preview under the source on a narrow screen)
	placeholder	the text shown while the editor is empty
	rows	the height of the source, in lines
	name	the name of the value in a form
	readonly	the source cannot be changed: no toolbar, no trigger
	required	the form is invalid while the editor is empty
	formAssociated static readonly accessor
	value accessor	Get the markdown
	mode accessor	Get the view: `write`, `preview` or `split`
	readonly accessor	Get whether the source cannot be changed
	triggers accessor	Get the triggers, by their character
	constructor()
	init()
	addTrigger(trigger, config)	Add (or replace) a trigger: typing its character opens a list of values
	removeTrigger(trigger)	Remove a trigger
	focus(options)	Give the focus to the source
	insertText(text)	Insert text at the caret (replacing the selection), as if it was typed: it can be undone
	format(action)	Apply a toolbar action to the selection
	replace(start, end, text, selStart, selEnd)	Replace a range of the source, keeping the undo history, then select a part of what was inserted
	wrap(before, after, placeholder)	Wrap the selection in a marker, or unwrap it when it is already wrapped
	prefixLines(has, prefix, cycle)	Add a prefix to every line of the selection, or remove it when every line already has it
	continueBlock()	Enter in a list (or a quote) starts the next item; in an empty item, it ends the list
	onInput(event)
	onKeyDown(event)
	detect(open)	Find the trigger the caret is in, and open, filter or close its list
	findTrigger()	The trigger before the caret, if the caret is in one
	show(trigger, index, query)	Show the list of a trigger, filtered by the query
	close()	Close the list
	renderList()
	activate(i)
	pick(i)	Insert an item of the open list in place of the trigger and the query
	place()	Put the list under the caret (or above, when there is no room below)
	caretCoordinates(index)	Where a character of the source is drawn, relative to the source's box: a hidden copy of the source, styled the same, measures it
	schedulePreview()
	renderPreview()	Render the preview now
	updateMode()
	updateHint()
	updateForm()
	formResetCallback()
	item(item) static	Normalize an item: a string is its value and its label
	fold(text) static	The text compared by the filter: lower case, no accent
	filter(items, query, config) static	Keep the items matching the query, the best first
	highlight(node, label, query) static	Write a label, the part matching the query in bold (text nodes only)
	inCode(before, index) static	Whether a position of the markdown is inside a code block or a code span
	dedent(text) static	Remove the indentation every line of a text shares (the indentation of the page's html)
	(default)	`<datalist trigger="@">` elements, each a trigger and its values, and a `<script type="text/markdown">` holding the initial markdown

Attributes7

value

mmo-markdown-editor.jhs

the markdown

value

mode

mmo-markdown-editor.jhs

write, preview or split (the source beside its preview; the preview under the source on a narrow screen)

mode="split"

placeholder

mmo-markdown-editor.jhs

the text shown while the editor is empty

placeholder

rows

mmo-markdown-editor.jhs

the height of the source, in lines

rows="12"

name

mmo-markdown-editor.jhs

the name of the value in a form

name

readonly

mmo-markdown-editor.jhs

the source cannot be changed: no toolbar, no trigger

readonly

required

mmo-markdown-editor.jhs

the form is invalid while the editor is empty

required

Properties5

formAssociated

staticreadonlyaccessormmo-markdown-editor.jhs:92

static get formAssociated()

value

accessormmo-markdown-editor.jhs:201

Get the markdown

get value() set value(value)

Type: string

mode

accessormmo-markdown-editor.jhs:220

Get the view: write, preview or split

get mode() set mode(value)

Type: string

readonly

accessormmo-markdown-editor.jhs:233

Get whether the source cannot be changed

get readonly() set readonly(value)

Type: boolean

triggers

accessormmo-markdown-editor.jhs:249

Get the triggers, by their character

get triggers() set triggers(value)

Type: Object

Methods34

constructor()

mmo-markdown-editor.jhs:94

constructor()

init()

mmo-markdown-editor.jhs:109

init()

addTrigger(trigger, config)

mmo-markdown-editor.jhs:264

Add (or replace) a trigger: typing its character opens a list of values

addTrigger(trigger, config)

trigger	`string`	- the character(s) opening the list: `@`, `#`, `<`, `::`...
config	`Object` \| `Array` \| `Function`	- the trigger's options (see the element's description), or only its `values`
returns	`MMO.elements.MarkdownEditor`	the editor

removeTrigger(trigger)

mmo-markdown-editor.jhs:281

Remove a trigger

removeTrigger(trigger)

trigger	`string`	- the character(s) opening its list
returns	`MMO.elements.MarkdownEditor`	the editor

focus(options)

mmo-markdown-editor.jhs:291

Give the focus to the source

focus(options)

options

insertText(text)

mmo-markdown-editor.jhs:299

Insert text at the caret (replacing the selection), as if it was typed: it can be undone

insertText(text)

text string - the text to insert

format(action)

mmo-markdown-editor.jhs:307

Apply a toolbar action to the selection

format(action)

action string - heading, bold, italic, strike, code, link, quote, ul, ol, task, table or hr

replace(start, end, text, selStart, selEnd)

mmo-markdown-editor.jhs:362

Replace a range of the source, keeping the undo history, then select a part of what was inserted

replace(start, end, text, selStart = null, selEnd = null)

start	`int`	- where the range starts
end	`int`	- where it ends
text	`string`	- what replaces it
selStart = null	`?int`	- the selection's start, relative to the inserted text (default: its end)
selEnd = null	`?int`	- the selection's end, relative to the inserted text (default: selStart)

wrap(before, after, placeholder)

mmo-markdown-editor.jhs:386

Wrap the selection in a marker, or unwrap it when it is already wrapped

wrap(before, after, placeholder)

before
after
placeholder

prefixLines(has, prefix, cycle)

mmo-markdown-editor.jhs:405

Add a prefix to every line of the selection, or remove it when every line already has it

prefixLines(has, prefix, cycle = false)

has	`RegExp`	- matches the prefix at the start of a line
prefix	`Function`	- (line, index, current prefix or null) => the prefix to add
cycle = false	`boolean`	- a line's prefix is replaced by the next one instead of being removed (a heading's level)