Skip to content
A universal react text editor built with prosemirror
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
@remirror
docs
packages
support
.codeclimate.yml
.eslintignore
.gitignore
.prettierignore
.travis.yml
.yarnrc
LICENSE
azure-pipelines.yml
babel.config.js
contributing.md
doczrc.js
lerna.json
netlify.toml
package.json
readme.md
tslint.json
yarn.lock

readme.md


remirror



Azure DevOps builds  Travis (.com) Code Climate maintainability  Code Climate technical debt  LGTM Alerts  LGTM Grade GitHub commit activity  GitHub last commit GitHub issues  GitHub pull requests GitHub stars  GitHub tag (latest SemVer)  LICENSE  Netlify Status



Remirror is a a react based text-editor for building elegant editing experiences for web, mobile and desktop.



Getting Started

Prerequisites

You can use either npm or yarn for managing packages. This project has been built with yarn workspaces so all further instructions will assume you're using yarn.

For help translating commands refer to this helpful document

TypeScript Users

This project is built with and should work with versions >=3.3.

Installation

yarn add remirror

Import and use the component with the child component as a render function.

import { Remirror } from 'remirror';

const Editor = props => (
  <Remirror
    onChange={onChange}
    placeholder='This is a placeholder'
    autoFocus={true}
    initialContent={initialJson}
  >
    {({ getPositionerProps, actions }) => {
      const menuProps = getPositionerProps({
        name: 'floating-menu',
      });
      return (
        <div>
          <div
            style={{
              position: 'absolute',
              top: menuProps.position.top,
              left: menuProps.position.left,
            }}
            ref={menuProps.ref}
          >
            <button
              style={{
                backgroundColor: actions.bold.isActive() ? 'white' : 'pink',
                fontWeight: actions.bold.isActive() ? 600 : 300,
              }}
              disabled={!actions.bold.isEnabled()}
              onClick={runAction(actions.bold.run)}
            >
              B
            </button>
          </div>
        </div>
      );
    }}
  </Remirror>
);

React hooks can also be used to pull the Remirror Context from a parent provider. This api relies on the new(ish) hooks specification and React Context.

import { RemirrorProvider, useRemirror } from 'remirror';

// ...

function HooksComponent(props) {
  // This pull the remirror props out from the context.
  const { getPositionerProps } = useRemirror();

  // ...
  return <Menu {...getPositionerProps()} />;
}

class App extends Component {
  // ...
  render() {
    return (
      <RemirrorProvider>
        <HooksComponent />
      </RemirrorProvider>
    );
  }
}

In a similar fashion Higher Order Components (HOC's) can be used to wrap a component.

import { RemirrorProvider, withRemirror, InjectedRemirrorProps } from 'remirror';

// ...

function EditorComponent(props: InjectedRemirrorProps) {
  const { getPositionerProps } = props;

  // ...
  return <Menu {...getPositionerProps()} />;
}

const WrappedEditorComponent = withRemirror(EditorComponent);

class App extends Component {
  // ...
  render() {
    return (
      <RemirrorProvider>
        <WrappedEditorComponent />
      </RemirrorProvider>
    );
  }
}

Quick Demos

Heart Effect

import React, { FunctionComponent } from 'react';

import { defaultEffect, EpicMode, heartEffect } from '@remirror/extension-epic-mode';
import { Remirror } from '@remirror/react';

const editorStyles = {
  '.remirror-editor': {
    border: '1px solid grey',
    minHeight: '50px',
    borderRadius: '10px',
    padding: '10px',
  },
};

export const EpicModeHeart = () => {
  const extensions = [
    new EpicMode({
      particleEffect: heartEffect,
      shake: false,
    }),
  ];
  return (
    <div style={{ gridArea: 'editor' }}>
      <Remirror
        attributes={{ 'data-test-id': 'editor-instance' }}
        placeholder='Type for hearts'
        extensions={extensions}
        editorStyles={editorStyles}
      >
        {() => <div />}
      </Remirror>
    </div>
  );
};

Epic Mode Heart Example

Twitter

Twitter UI Example


Testing

From the root of this repository run the following to trigger a full typecheck, linting and jest tests.

yarn checks

By default these checks are run on every push. To prevent these hooks from running by default simply copy .config.sample.json to .config.json. This file is read before hooks are run and can cancel checks when configured.

Built With

  • React - The web framework used
  • Prosemirror - A beautiful and elegant text editor for DOM environments.

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests.

Versioning

This project uses SemVer for versioning. For the versions available, see the tags on this repository.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

  • The api and Many ideas were stolen borrowed 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)
You can’t perform that action at this time.