trent-boyd / remirror

A universal react text editor built with prosemirror

                  

Remirror is your toolkit for building world-class text-editors which run on the web, mobile and desktop.

• Introduction
• Installation
• Walkthrough guide

Getting Started

⚠️Warning: This is still a work in progress library. The docs are being worked on and the API is still subject to breaking changes for minor releases. For now to learn and understand, the best way is via looking through the @remirror/editor-* libraries.

Prerequisites

• Typescript >= 3.5
• React >= 16.8
• Yarn >= 1.13

Installation

yarn add @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_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);

Quick Demos

Heart Effect

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...' />
);

Twitter

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 type:

yarn husky:stop

This 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

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)