Remirror is your toolkit for building world-class text-editors which run on the web, mobile and desktop.
- Full support for Server Side Rendering (SSR) with zero config.
- Top quality prebuilt editors for immediate use in your next application.
- Almost 30 ready-made extensions for adding your own flavour and functionality to build your dream editor.
- CSS-in-JS support (can be switched off).
Coming soon
- React Native support
- Tables support via an extension
- Iframe support
- Markdown editor
- Multicursor editing via an extension
- CSS class support
- Typescript
>= 3.5 - React
>= 16.8 - Yarn
>= 1.13
yarn add @remirror/core @remirror/react @remirror/core-extensionsThe following is an example editor which renders a floating menu and enables the extensions Bold, Italic and Underline.
import React, { FC, FunctionComponent, MouseEventHandler, useState } from 'react';
import { memoize, EMPTY_OBJECT_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.command)}
>
b
</button>
<button
style={{
backgroundColor: actions.italic.isActive() ? 'white' : 'pink',
fontWeight: actions.italic.isActive() ? 600 : 300,
}}
disabled={!actions.italic.isEnabled()}
onClick={runAction(actions.italic.command)}
>
i
</button>
<button
style={{
backgroundColor: actions.underline.isActive() ? 'white' : 'pink',
fontWeight: actions.underline.isActive() ? 600 : 300,
}}
disabled={!actions.underline.isEnabled()}
onClick={runAction(actions.underline.command)}
>
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_OBJECT_NODE}
>
<SimpleFloatingMenu />
</ManagedRemirrorProvider>
</RemirrorManager>
);
};The above example uses hooks but you can just as easily rely on Higher Order Components (HOC's) to wrap your component.
import { withRemirror } from '@remirror/react';
// ...
function SimpleMenu({ getPositionerProps }: InjectedRemirrorProps) {
return <Menu {...getPositionerProps()} />;
}
export const WrappedSimpleMenu = withRemirror(SimpleMenu);import { EpicMode, heartEffect, ParticleEffect } from '@remirror/extension-epic-mode';
import { RemirrorManager, RemirrorExtension, ManagedRemirrorProvider } from '@remirror/react';
interface EpicModeComponentProps {
particleEffect: ParticleEffect;
placeholder: string;
shake?: boolean;
}
const EpicModeComponent: FC<EpicModeComponentProps> = ({ particleEffect, placeholder, shake }) => {
return (
<div>
<RemirrorManager>
<RemirrorExtension Constructor={Bold} />
<RemirrorExtension Constructor={Italic} />
<RemirrorExtension Constructor={Underline} />
<RemirrorExtension Constructor={EpicMode} particleEffect={particleEffect} shake={shake} />
<ManagedRemirrorProvider
autoFocus={true}
attributes={{ 'data-testid': 'editor-instance' }}
placeholder={placeholder}
editorStyles={editorStyles}
/>
</RemirrorManager>
</div>
);
};
export const EpicModeHeart: FunctionComponent = () => (
<EpicModeComponent particleEffect={heartEffect} shake={false} placeholder='Type for hearts...' />
);
From the root of this repository run the following to trigger a full typecheck, linting and jest tests.
yarn checksBy default these checks are run on every push. To prevent these hooks from running by default type:
yarn husky:stopThis copies .config.sample.json to .config.json. This file is read before hooks are run and can cancel checks when configured.
To resume per-commit / per-push checks run:
yarn husky:start- React - The web framework used
- Prosemirror - A beautiful and elegant text editor for DOM environments.
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests.
This project uses SemVer for versioning. For the versions available, see the tags on this repository.
This project is licensed under the MIT License - see the LICENSE.md file for details
- The api and Many ideas were
stolenborrowed from tiptap which is a prosemirror editor for Vue. The concept of extensions and a lot of the early code was a direct port from this library. - At the time I started thinking about building an editor Slate didn't have great support for Android devices (they've since addressed this here)