Skip to content
Remirror
DocsAPIGitHub

Installation

yarn add @emotion/core @remirror/core @remirror/react @remirror/core-extensions

The following is a small example which renders a floating menu and enables the extensions Bold, Italic and Underline.

import React, { FC, FunctionComponent, MouseEventHandler, useState } from 'react';
import { memoize, EMPTY_PARAGRAPH_NODE } from '@remirror/core';
import { Bold, Italic, Underline } from '@remirror/core-extensions';
import {
bubblePositioner,
ManagedRemirrorProvider,
RemirrorEventListener,
RemirrorExtension,
RemirrorManager,
RemirrorProps,
useRemirrorContext,
} from '@remirror/react';
const runAction = (action: () => void): MouseEventHandler<HTMLElement> => e => {
e.preventDefault();
action();
};
const SimpleFloatingMenu: FC = () => {
const { getPositionerProps, actions } = useRemirrorContext(); // Pull in injected props from context
const props = getPositionerProps({
positionerId: 'bubble',
...bubblePositioner,
});
return (
<div
style={{
position: 'absolute',
bottom: props.isActive ? props.bottom : -9999,
left: props.isActive ? props.left : -9999,
}}
ref={props.ref}
>
<button
style={{
backgroundColor: actions.bold.isActive() ? 'white' : 'pink',
fontWeight: actions.bold.isActive() ? 600 : 300,
}}
disabled={!actions.bold.isEnabled()}
onClick={runAction(actions.bold)}
>
b
</button>
<button
style={{
backgroundColor: actions.italic.isActive() ? 'white' : 'pink',
fontWeight: actions.italic.isActive() ? 600 : 300,
}}
disabled={!actions.italic.isEnabled()}
onClick={runAction(actions.italic)}
>
i
</button>
<button
style={{
backgroundColor: actions.underline.isActive() ? 'white' : 'pink',
fontWeight: actions.underline.isActive() ? 600 : 300,
}}
disabled={!actions.underline.isEnabled()}
onClick={runAction(actions.underline)}
>
u
</button>
</div>
);
};
const EditorLayout: FunctionComponent = () => {
return (
<RemirrorManager>
<RemirrorExtension Constructor={Bold} />
<RemirrorExtension Constructor={Italic} />
<RemirrorExtension Constructor={Underline} />
<ManagedRemirrorProvider
attributes={{ 'data-testid': 'editor-instance' }}
onChange={onChange}
placeholder='Start typing for magic...'
autoFocus={true}
initialContent={EMPTY_PARAGRAPH_NODE}
>
<SimpleFloatingMenu />
</ManagedRemirrorProvider>
</RemirrorManager>
);
};

Then see the examples for more sample code.

Edit the page on GitHub
Previous:
Introduction
Next:
Guides