Every extension

callout

Node 0.64 kB gzipped

A callout — a Notion block, an admonition, an aside with a colour.

Holds blocks, so a callout can carry a list or a code sample, and carries a type for the colour and an optional emoji for the icon. The icon is outside the editable content, so the caret cannot land in it.

Adding it

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

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

There is no separate package · callout is already in @matrajs/core, and an extension you do not import is not in your bundle. document, paragraph and text are the floor every document needs.

Commands

• editor.commands.toggleCallout()
• editor.commands.setCalloutType()
• editor.commands.setCalloutEmoji()
• editor.commands.exitCallout()

Keys

• Enter · exitCallout

Attributes

• type · defaults to "info"
• emoji

HTML

• Parses div[data-callout]
• Renders div

Styles

This one needs a stylesheet to look right, and ships the minimum as a string rather than a file · nothing is loaded unless you load it.

          import { calloutCSS } from '@matrajs/core'

const style = document.createElement('style')
style.textContent = calloutCSS
document.head.append(style)
        

← All 81 extensions

Edit this page on GitHub