| hide_title | title |
|---|---|
true |
CalloutExtension |
This extension adds callouts to your text editor.
Not all callouts are the same. For example, a callout could contain an urgent warning to the reader that should stand out brightly. In contrast, a callout might contain an informational note which shouldn't overshadow the other text.
These different use cases can be represented by setting the type property to info, warning , error, success, or blank:
commands.toggleCallout({ type: 'error' });The extension will use different background colors for each type like red for errors.
The semantic types are too limiting for some use cases - especially "info" callouts could benefit from more, context-specific sub categories like:
Context-specific sub categories can be created by configuring an emoji for the callout, additionally to the semantic type:
import { CalloutExtension } from '@remirror/extension-callout';
const basicExtensions = () => [new CalloutExtension({ renderEmoji, defaultEmoji: '馃挕' })];
/**
* If you want to update the emoji to a new one, you can dispatch a transaction to update the `emoji` attrs inside this function.
*/
const renderEmoji = (node: ProsemirrorNode) => {
const emoji = document.createElement('span');
emoji.textContent = node.attrs.emoji;
return emoji;
};This extension is installed for you when you install the main remirror package.
You can use the imports in the following way.
import { CalloutExtension } from 'remirror/extensions';To install it directly you can use
The extension is provided by the @remirror/extension-callout package. There are two ways of pulling it into your project.
See storybook for examples.