Extensions

kbd

Mark 0.05 kB gzipped

A key on the keyboard, as in "press <kbd>Ctrl</kbd>".

Its own mark rather than `code` with a class: a key name is not code, a screen reader announces the two differently, and a stylesheet wants one drawn as a keycap and the other as monospace text. The two never overlap — `code` already refuses every other mark, and refusing `code` back means toggling kbd over code text swaps one for the other instead of doing nothing and looking broken.

1 · Install

One package for every extension · there is no @matrajs/kbd to install.

npm i @matrajs/core

2 · Add it to the editor

Import it and put it in the extensions array. That array is the whole feature list: what is not in it is not in your bundle and not in the document's schema.

import { createEditor, document, paragraph, text, kbd } from '@matrajs/core'

const editor = createEditor({
  extensions: [document, paragraph, text, kbd],
  element: document.querySelector('#editor'),
})

3 · Use it

Run a command, and give focus back · a click on a button takes it away.

editor.commands.toggleKbd()
editor.focus()

From the keyboard: Mod-Alt-k .

Wired to a button, with the pressed state kept in step:

const button = document.querySelector('#toggleKbd')

button.addEventListener('click', () => {
  editor.commands.toggleKbd()
  editor.focus()
})

const read = () => button.setAttribute('aria-pressed', String(editor.isActive('kbd')))
editor.on('selectionChange', read)
editor.on('change', read)
read()

Commands

Every one returns true if it changed the document and false if it could not · a command that does not apply where the caret is says so rather than throwing.

Keyboard shortcuts

• Mod-Alt-k · toggleKbd

Mod is Command on a Mac and Control everywhere else. To rebind one, put your own extension after this in the array · later keys win.

In the document

• Reads kbd when HTML is pasted or loaded.
• Writes kbd in getHTML() and renderToHTML().

← All 83 extensions

Edit this page on GitHub