Skip to content

Commit

Permalink
docs: simplify readme (#1012)
Browse files Browse the repository at this point in the history
  • Loading branch information
ifiokjr committed Jul 21, 2021
1 parent 0464a68 commit 8a8cc59
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 57 deletions.
38 changes: 3 additions & 35 deletions docs/introduction.md
Expand Up @@ -8,51 +8,19 @@ hide_title: true

# Introduction

## Motivation

I started **remirror** as a challenge to myself. Would it be possible to build an editor that combined great performance with ease of use? I wanted something that allowed developers like myself to fall in love and feel playful even when working through deeply complex concepts. The editor would need to combine plug-and-play features, with ample room for customisation.

I also wanted to give users of all frameworks, the ability to build an editor by picking and choosing their desired building blocks.

In order to meet my goals, I settled on [ProseMirror](https://prosemirror.net/) as the core editor layer. The second decision was to base the structure of the editor on blocks of functionality called `Extensions`. Each extension would add a slice of beauty to the editor, allowing users to craft their masterpieces.

In this latest version, I believe I'm starting to see these goals come to fruition. Every single part of the editor can be controlled by extensions. For example, the core (`Schema`) is managed by a [built-in extension](https://github.com/remirror/remirror/blob/next/packages/remirror__core/src/builtins/schema-extension.ts). There's already a huge selection of extensions for users to choose from.

And the new API is beautiful. For React, this comes with a slew of drop-in components and hooks. Many more are being worked on. It's almost magical how well it works.

For example, to add a drop down emoji picker to your react editor the following code will suffice.

```tsx
import React from 'react';
import { SocialEmojiComponent, SocialProvider } from '@remirror/react';

const Editor = () => {
return (
<SocialProvider>
<SocialEmojiComponent />
</SocialProvider>
);
};
```

With this tiny snippet your editor now supports a really nice ui element. And it's all customisable with ordinary `css`. No more fighting against yet another `CSS-in-JS` library.

There's so much more to come and I'm glad you're taking a look. I hope `remirror` proves to be everything you need for your next text editor and more.

This documentation is still a work in progress. It is being updated in parallel with the `next` branch and still has many iterations before it can be called ready.
This documentation is still a work in progress. It is being updated and still has many iterations before it can be called ready.

While reading through this guide, if you find errors or would like to suggest improvements there are several options.

- Open an issue in our [github repo](https://github.com/remirror/remirror/issues).
- [Join our discord server](https://discord.gg/C4cfrMK) and discuss the problem with us.
- Create a pull request with your proposed improvement by clicking the edit button on the relevant page.
- Move on, because deadlines are looming and life is too short.

Whatever you decide I'm happy that you've taken the time to dive into the `remirror` project.

## Target audience

This guide is targeted at the following audidence.
This guide is designed for the following:

- Consumers of the library.
- Extension developers.
Expand All @@ -74,4 +42,4 @@ Labels will be used to identify areas which may be more advanced.

### Expected knowledge

This guide assumes that you're familiar with JavaScript and have some understanding of `React`. If you're brand new to programming or JavaScript then many would encourage you to look into other resources before attempting to read through this. I say, don't let that stop you from doing what you want. Joy is a wonderful commodity and if you find any comfort while reading this documentation, then by all means, craft your own beautiful unique path.
This guide assumes that you're familiar with **JavaScript** and have some understanding of `React`. If you're brand new to programming or JavaScript then many would encourage you to look into other resources before attempting to read through this.
30 changes: 8 additions & 22 deletions readme.md
Expand Up @@ -45,17 +45,7 @@

<br />

## Motivation

`remirror` was started as a personal challenge. Would it be possible to build an editor that combined great performance with ease of use? It was also important to give users of all frameworks, the ability to build an editor by picking and choosing their desired building blocks.

In order to meet these goals, [ProseMirror][prosemirror] was picked as the best choice for the core editor layer. The second decision was to base the structure of the editor on blocks of functionality called `Extensions`. Each extension would be designed to fulfil a specific purpose in the editor. Due to this structure, users would be able to craft a fully custom implementation.

In the upcoming version of `remirror`, some of these initial goals are starting to be met. Every single part of the editor is controlled by extensions. For example, the core (`Schema`) is managed by a [built-in extension](https://github.com/remirror/remirror/blob/HEAD/packages/remirror__core/src/builtins/schema-extension.ts). This means that the editor you choose to build is completely customizable.

The API has also improved a lot. Multi-framework support is being added in the future. Currently the focus is on `React` and the `DOM`.

There are also a host of drop in components and hooks being developed. To get started with the simplest possible editor the following will suffice.
## Introduction

```tsx
import React from 'react';
Expand All @@ -76,26 +66,22 @@ const Editor = () => {
};
```

With this small snippet your editor now supports some complex UI Functionality. And it's all customisable with ordinary `css`. If you prefer `CSS-in-JS` the styles are also available via `emotion` and `styled-components`.

There's so much more to come and I'm glad you're taking a look. I hope `remirror` proves to be everything you need for your next text editor project.
With this code snippet your editor now supports basic editing functionality.

<br />

## Status

This is the `beta` branch of the `remirror` which will be fully released in the coming weeks.

In the meantime, you can install the beta version via the following command.
## Installation

```bash
yarn add remirror@pr706 @remirror/react@pr706 # Yarn
yarn add remirror @remirror/react # Yarn

npm install remirror@pr706 @remirror/react@pr706 # npm
npm install remirror @remirror/react # npm

pnpm add remirror@pr706 @remirror/react@pr706 # pnpm
pnpm add remirror @remirror/react # pnpm
```

If you run into any issues we recommend any of the following:

- Open an issue in our [github repo](https://github.com/remirror/remirror/issues).
- [Join our discord server](https://remirror.io/chat) and discuss the problem with our community.
- Create a pull request with your proposed improvement by clicking the edit button on the relevant page.
Expand Down

1 comment on commit 8a8cc59

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Published on https://remirror.io as production
🚀 Deployed on https://60f7cda2022fc5cb7c86da3d--remirror.netlify.app

Please sign in to comment.