Social Editor

The <SocialEditor> provides a state of the art editor with mention and tag support.

import { SocialEditor } from '@remirror/react-editors/social';

Loading...

1import '../example.css';
2
3import BrowserOnly from '@docusaurus/BrowserOnly';
4import { SocialEditor } from '@remirror/react-editors/social';
5
6const ALL_USERS = [
7  { id: 'joe', label: 'Joe' },
8  { id: 'sue', label: 'Sue' },
9  { id: 'pat', label: 'Pat' },
10  { id: 'tom', label: 'Tom' },
11  { id: 'jim', label: 'Jim' },
12];
13
14const TAGS = ['editor', 'remirror', 'opensource', 'prosemirror'];
15
16const Editor = () => {
17  return (
18    <BrowserOnly fallback={<div>Loading...</div>}>
19      {() => (
20        <SocialEditor placeholder='Mention @joe or add #remirror' users={ALL_USERS} tags={TAGS} />
21      )}
22    </BrowserOnly>
23  );
24};
25
26export default Editor;
27

Find many more examples on Storybook.

note

Want to customize the behavior? Simply copy the <SocialEditor> code and change the extensions. That's what Remirror was built for.