open-index/open-npm huggingface dataset:
npm package: @remirror-my-fork/extension-react-tables
Description: Create tables with nested react components.
Latest version: 3.0.8

# @remirror/extension-react-tables

[![npm bundle size (scoped)](https://img.shields.io/bundlephobia/minzip/@remirror/extension-react-tables.svg?)](https://bundlephobia.com/result?p=@remirror/extension-react-tables) [![npm](https://img.shields.io/npm/dm/@remirror/extension-react-tables.svg?&logo=npm)](https://www.npmjs.com/package/@remirror/extension-react-tables)

This package includes two main features: table controllers and table cell menu.

Table controllers are some cells at the top and left side of the table. Table controllers can only be seen when the table is forced. With table controllers, a user can easily achieve the following functions:

1. select a row, a column or the whole table
2. delete a row or a column
3. insert a row or a column

![table controllers](https://user-images.githubusercontent.com/24715727/113511783-3877b600-9594-11eb-86a0-ea6365f953ce.gif)

Table cell menu is a menu component that can be opened by clicking the top-right corner of a table cell. A table menu provides a method for user to trigger some ProseMirror commands:

- insert a column
- delete a column
- insert a row
- delete a column
- delete the table
- change the background color of one or multiple cells

Table cell menu can be triggered when users select multiple cell, in which case the menu button will be placed in the cell where the mouse in.

![table cell menu](https://user-images.githubusercontent.com/24715727/113511776-344b9880-9594-11eb-8539-e5d68eabc28a.gif)

You can customize the looking and the behaviour of the menu button and menu popup by passing related paramters to `TableComponents`.

## Installation

```bash
yarn add @remirror/extension-react-tables # yarn
pnpm add @remirror/extension-react-tables # pnpm
npm install @remirror/extension-react-tables # npm
```

```tsx
import { ReactComponentExtension } from '@remirror/extension-react-component';
import { TableComponents, TableExtension } from '@remirror/extension-react-tables';
import { EditorComponent, Remirror, ThemeProvider, useRemirror } from '@remirror/react';
import { AllStyledComponent } from '@remirror/styles/emotion';

const extensions = () => [new ReactComponentExtension(), new TableExtension()];

export const EditorWithTable = () => {
  const { manager, state } = useRemirror({ extensions });

  return (
    <AllStyledComponent>
      <ThemeProvider>
        <Remirror manager={manager} initialContent={state}>
          <EditorComponent />
          <TableComponents />
        </Remirror>
      </ThemeProvider>
    </AllStyledComponent>
  );
};
```
npm package: @remirror/cli
Description: The remirror cli
Latest version: 1.0.8

# @remirror/cli

> Bundle your native editors for remirror.

[![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#)

[version]: https://flat.badgen.net/npm/v/@remirror/cli
[npm]: https://npmjs.com/package/@remirror/cli
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/cli
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/cli
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/cli/red?icon=npm

## Installation

```bash
# yarn
yarn add @remirror/cli

# pnpm
pnpm add @remirror/cli

# npm
npm install @remirror/cli
```

## Usage

```bash
remirror bundle src/index.ts
```
npm package: @remirror/core
Description: Where your quest to create a world class editing experience begins.
Latest version: 3.0.2

# @remirror/core

> Where your quest to create a world class editor begins.

[![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#)

[version]: https://flat.badgen.net/npm/v/@remirror/core
[npm]: https://npmjs.com/package/@remirror/core
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/core
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/core
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/core/red?icon=npm

## Installation

```bash
# yarn
yarn add @remirror/core

# pnpm
pnpm add @remirror/core

# npm
npm install @remirror/core
```

## Usage

This is the core `remirror` package where the `Extension` and `RemirrorManager` are defined.
npm package: @remirror/core-constants
Description: The core constants used throughout the remirror codebase
Latest version: 3.0.0

# @remirror/core-constants

> core constants used throughout the `remirror` codebase.

[![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#)

[version]: https://flat.badgen.net/npm/v/@remirror/core-constants
[npm]: https://npmjs.com/package/@remirror/core-constants
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/core-constants
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/core-constants
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/core-constants/red?icon=npm

## Installation

This is included by default when you install the recommended `remirror` package. All exports are also available via `remirror/core/constants` and `remirror/core`.
npm package: @remirror/core-helpers
Description: Provide helper functions for the remirror codebase, kinda like a tiny lodash
Latest version: 4.0.0

# @remirror/core-helpers

> A mini lodash just for `remirror`.

[![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#)

[version]: https://flat.badgen.net/npm/v/@remirror/core-helpers
[npm]: https://npmjs.com/package/@remirror/core-helpers
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/core-helpers
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/core-helpers
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/core-helpers/red?icon=npm

## Installation

This is included by default when you install the recommended `remirror` package. All exports are also available via `remirror/core/helpers` and `remirror/core`.
npm package: @remirror/core-types
Description: Provides the core TS types for use throughout the remirror codebase
Latest version: 3.0.0

# @remirror/core-types

> The builtin extensions that make `remirror` function.

[![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#)

[version]: https://flat.badgen.net/npm/v/@remirror/core-types
[npm]: https://npmjs.com/package/@remirror/core-types
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/core-types
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/core-types
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/core-types/red?icon=npm

This package provides the core TypeScript types used throughout the remirror code base.

This is included by default when you install the recommended `remirror` package. All exports are also available via `remirror/core/types` and `remirror/core`.
npm package: @remirror/core-utils
Description: Core utilities for dealing with the dom and prosemirror within remirror
Latest version: 3.0.0

# @remirror/core-utils

> Provides core utility functions which are used throughout the remirror codebase.

[![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#)

[version]: https://flat.badgen.net/npm/v/@remirror/core-utils
[npm]: https://npmjs.com/package/@remirror/core-utils
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/core-utils
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/core-utils
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/core-utils/red?icon=npm

## Installation

This is included by default when you install the recommended `remirror` package. All exports are also available via `remirror/core/utils` and `remirror/core`.

## Usage

If you plan to support SSR and need to parse the html contents of the editor in an SSR environment then `min-document` is automatically added to all node environments.

However, `min-document` can't actually parse the content properly since the implementation is intentionally underpowered. To properly parse content from a html string you will need to install `jsdom`. These dependencies are only included within non-browser builds and won't bloat your bundle size in the browser.
npm package: @remirror/dev
Description: Development utilities for remirror
Latest version: 3.0.3

# @remirror/dev

[![npm bundle size (scoped)](https://img.shields.io/bundlephobia/minzip/@remirror/dev.svg?)](https://bundlephobia.com/result?p=@remirror/dev) [![npm](https://img.shields.io/npm/dm/@remirror/dev.svg?&logo=npm)](https://www.npmjs.com/package/@remirror/dev)

Development tools to make life easier when building your editor.

## Installation

```bash
yarn add @remirror/dev# yarn
pnpm add @remirror/dev# pnpm
npm install @remirror/dev# npm
```

## Usage

For in depth usage with proper code example see the [docs](https://remirror.io)

### Prosemirror Dev Tools

The following will render the development view in your editor. For more information on what's possible see the [docs][prosemirror-dev-toolkit].

```tsx
import React from 'react';
import { BoldExtension } from 'remirror/extension/bold';
import { ItalicExtension } from 'remirror/extension/italic';
import { UnderlineExtension } from 'remirror/extension/underline';
import { ProsemirrorDevTools } from '@remirror/dev';
import { Remirror, useRemirror } from '@remirror/react';

const Editor = () => {
  const manager = useRemirror({
    extensions: () => [new BoldExtension(), new ItalicExtension(), new UnderlineExtension()],
  });

  return (
    <Remirror manager={manager} autoRender={true}>
      <ProsemirrorDevTools />
    </Remirror>
  );
};
```

[prosemirror-dev-toolkit]: https://github.com/TeemuKoivisto/prosemirror-dev-toolkit
npm package: @remirror/dom
Description: Use remirror directly in the dom.
Latest version: 3.0.2

# @remirror/dom

> Use remirror directly in the dom.

[![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#)

[version]: https://flat.badgen.net/npm/v/@remirror/dom
[npm]: https://npmjs.com/package/@remirror/dom
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/dom
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/dom
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/dom/red?icon=npm

## Why

You've heard great things about prosemirror and would like to use it in your app, but you're slightly intimidated by some of the moving parts. You don't really want to deal with Schema, Nodes, Marks, Plugins, Decorations. You just want an editor.

This library provides an abstraction that might be right for you.

The functionality of the prosemirror library is wrapped up into extensions which manage the work for you.

## Installation

```bash
# yarn
yarn add @remirror/dom

# pnpm
pnpm add @remirror/dom

# npm
npm install @remirror/dom
```

## Usage

The following code is a guide to get you started.

```ts
import { createDomEditor, createDomManager } from 'remirror/dom';
import { BoldExtension } from 'remirror/extensions';

const element = document.querySelector('#editor');
const manager = createDomManager([new BoldExtension()]);
const editor = createDomEditor({ manager, element });

editor.addHandler('change', () => log('your editor has changed'));

// Make selected text bold.
editor.commands.toggleBold();
```
npm package: @remirror/es-module-shims
Description: A fork of es-module-shims to support the remirror playground.
Latest version: 1.0.2

# @remirror/es-module-shims

**DEPRECATED**

> A fork of [es-module-shims](https://github.com/guybedford/es-module-shims) to support the remirror playground.

[![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#)

[version]: https://flat.badgen.net/npm/v/@remirror/es-module-shims
[npm]: https://npmjs.com/package/@remirror/es-module-shims
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/es-module-shims
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/es-module-shims
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/es-module-shims/red?icon=npm

<br />

## Installation

```bash
# yarn
yarn add @remirror/es-module-shims

# pnpm
pnpm add @remirror/es-module-shims

# npm
npm install @remirror/es-module-shims
```

<br />
npm package: @remirror/extension-auto-link
Description: This package is deprecated. The functionality is now included in [`@remirror/extension-link`](https://www.npmjs.com/package/@remirror/extension-link).
Latest version: 1.0.0

# @remirror/extension-enhanced-link

This package is deprecated. The functionality is now included in [`@remirror/extension-link`](https://www.npmjs.com/package/@remirror/extension-link).

You can still install older versions, but no new releases are planned.
npm package: @remirror/extension-bidi
Description: Add automatic bidirectional text support to your remirror editor. Just start typing for the magic.
Latest version: 3.0.2

# @remirror/extension-bidi

> Add automatic bi-directional text support to your remirror editor. Just start typing for the magic.

[![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#)

[version]: https://flat.badgen.net/npm/v/@remirror/extension-bidi
[npm]: https://npmjs.com/package/@remirror/extension-bidi
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-bidi
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-bidi
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-bidi/red?icon=npm

## Installation

```bash
# yarn
yarn add @remirror/extension-bidi

# pnpm
pnpm add @remirror/extension-bidi

# npm
npm install @remirror/extension-bidi
```

This is included by default when you install the recommended `remirror` package. All exports are also available via the entry-point, `remirror/extensions`.

## Usage

This add bidirectional text support to your editor.

The following code creates an instance of this extension.

```ts
import { BidiExtension } from 'remirror/extensions';

const extension = new BidiExtension();
```
npm package: @remirror/extension-blockquote
Description: Add blockquotes to your text editor.
Latest version: 3.0.2

# @remirror/extension-blockquote

> Add blockquotes to your text editor.

[![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#)

[version]: https://flat.badgen.net/npm/v/@remirror/extension-blockquote
[npm]: https://npmjs.com/package/@remirror/extension-blockquote
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-blockquote
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-blockquote
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-blockquote/red?icon=npm

## Installation

```bash
# yarn
yarn add @remirror/extension-blockquote

# pnpm
pnpm add @remirror/extension-blockquote

# npm
npm install @remirror/extension-blockquote
```

This is included by default when you install the recommended `remirror` package. All exports are also available via the entry-point, `remirror/extensions`.

## Usage

The following code creates an instance of this extension.

```ts
import { BlockquoteExtension } from 'remirror/extensions';

const extension = new BlockquoteExtension();
```
npm package: @remirror/extension-bold
Description: Make your text bold. Make it courageous.
Latest version: 3.0.2

# @remirror/extension-bold

> Make your text bold. Make it courageous.

[![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#)

[version]: https://flat.badgen.net/npm/v/@remirror/extension-bold
[npm]: https://npmjs.com/package/@remirror/extension-bold
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-bold
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-bold
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-bold/red?icon=npm

<br />

## Installation

```bash
yarn add @remirror/extension-bold # yarn
pnpm add @remirror/extension-bold # pnpm
npm install @remirror/extension-bold # npm
```

This is included by default when you install the recommended `remirror` package. All exports are also available via the entry-point, `remirror/extensions`.

<br />

## Usage

When added to your editor it will provide the `toggleBold` command which makes the text under the cursor / or at the provided position range bold.

```ts
import { ExtensionPriority, RemirrorManager } from 'remirror';
import { BoldExtension, CorePreset } from 'remirror/extensions';

// Create the bold extension
const boldExtension = new BoldExtension({ weight: '500' });
const corePreset = new CorePreset();

// Create the Editor Manager with the bold extension passed through.
const manager = RemirrorManager.create([boldExtension, corePreset]);

// Pass the dom element to the editor. If you are using `@remirror/react` this is done for you.
const element = document.createElement('div');
document.body.append(element);

// Add the view to the editor manager.
manager.addView(element);

// Access the commands and toggleBoldness
manager.commands.toggleBold();

// Toggle at the provided range
manager.commands.toggleBold({ from: 1, to: 7 });
```

<br />
npm package: @remirror/extension-callout
Description: Add callouts to your text editor.
Latest version: 3.0.2

# @remirror/extension-callout

> Add callouts to your text editor.

[![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#)

[version]: https://flat.badgen.net/npm/v/@remirror/extension-callout
[npm]: https://npmjs.com/package/@remirror/extension-callout
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-callout
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-callout
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-callout/red?icon=npm

## Installation

```bash
# yarn
yarn add @remirror/extension-callout

# pnpm
pnpm add @remirror/extension-callout

# npm
npm install @remirror/extension-callout
```

## Usage

The following code creates an instance of this extension.

```ts
import { CalloutExtension } from '@remirror/extension-callout';

const extension = new CalloutExtension();
```

To render a emoji at the front.

```ts
import { CalloutExtension } from '@remirror/extension-callout';

const basicExtensions = () => [new CalloutExtension({ renderEmoji, defaultEmoji: '💡' })];

/**
 *  If you want to update the emoji to a new one,
 * you can dispatch a transaction to update the `emoji` attrs inside this function.
 */
const renderEmoji = (node: ProsemirrorNode) => {
  const emoji = document.createElement('span');
  emoji.textContent = node.attrs.emoji;
  return emoji;
};
```
npm package: @remirror/extension-code
Description: Adds the inline code `mark` to your text editor.
Latest version: 3.0.2

# @remirror/extension-code

> Adds the inline code `mark` to your text editor.

[![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#)

[version]: https://flat.badgen.net/npm/v/@remirror/extension-code
[npm]: https://npmjs.com/package/@remirror/extension-code
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-code
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-code
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-code/red?icon=npm

## Installation

```bash
# yarn
yarn add @remirror/extension-code

# pnpm
pnpm add @remirror/extension-code

# npm
npm install @remirror/extension-code
```

This is included by default when you install the recommended `remirror` package. All exports are also available via the entry-point, `remirror/extensions`.

## Usage

The following code creates an instance of this extension.

```ts
import { CodeExtension } from 'remirror/extensions';

const extension = new CodeExtension();
```
npm package: @remirror/extension-code-block
Description: Unleash the inner coder with code blocks for your remirror editor.
Latest version: 3.0.2

# @remirror/extension-code-block

> Unleash the inner coder with code blocks for your remirror editor.

[![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#)

[version]: https://flat.badgen.net/npm/v/@remirror/extension-code-block
[npm]: https://npmjs.com/package/@remirror/extension-code-block
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-code-block
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-code-block
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-code-block/red?icon=npm

## Installation

```bash
yarn add refractor @remirror/extension-code-block # yarn
pnpm add refractor @remirror/extension-code-block # pnpm
npm install refractor @remirror/extension-code-block # npm
```

This is included by default when you install the recommended `remirror` package. All exports are also available via the entry-point, `remirror/extensions`.

Refractor is a peer dependency and must be installed to consume the package properly.

## Usage

The following code sample will create a limited editor and run the available commands from this extension.

```ts
import jsx from 'refractor/lang/jsx';
import typescript from 'refractor/lang/typescript';
import { ExtensionPriority, RemirrorManager } from 'remirror';
import { CodeBlockExtension, CorePreset } from 'remirror/extensions';

// Create the codeBlock extension
const codeBlockExtension = new CodeBlockExtension({ supportedLanguages: [typescript, jsx] });
const corePreset = new CorePreset();

// Create the Editor Manager with the codeBlock extension passed through.
const manager = RemirrorManager.create([codeBlockExtension, corePreset]);

// Pass the dom element to the editor. If you are using `@remirror/react` or
// other framework wrappers then this is handled for you.
const element = document.createElement('div');
document.body.append(element);

// Add the view to the editor manager.
manager.addView(element);

// Access the code block commands
manager.store.commands.createCodeBlock({ language: 'markdown' });

// Also supports chaining
manager.store.chain.updateCodeBlock({ language: 'js' }).formatCodeBlock().run();
```

### Formatter

If you would like to format code, you can import from the `@remirror/extension-code-block/formatter` endpoint.

The formatter requires `prettier@3.2` to be installed as a peer dependency.
npm package: @remirror/extension-codemirror5
Description: Add CodeMirror to your editor.
Latest version: 3.0.2

# @remirror/extension-codemirror5

> Add [CodeMirror](https://codemirror.net/) to your editor.

[![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#)

[version]: https://flat.badgen.net/npm/v/@remirror/extension-codemirror5
[npm]: https://npmjs.com/package/@remirror/extension-codemirror5
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-codemirror5
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-codemirror5
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-codemirror5/red?icon=npm

## Installation

```bash
yarn add @remirror/extension-codemirror5 # yarn
pnpm add @remirror/extension-codemirror5 # pnpm
npm install @remirror/extension-codemirror5 # npm
```

You will also need to make sure you have a version of `codemirror@5` installed. If you are using TypeScript you can also install the `@types/codemirror` package alongside.

```bash
yarn add codemirror @types/codemirror
pnpm add codemirror @types/codemirror
npm install codemirror @types/codemirror
```

## Usage

The following code sample will create a limited editor and run the available commands from this extension.

In order to support codemirror the extension requires you to provide an instance of the CodeMirror import. This is necessary because by default CodeMirror interacts with the DOM and will cause errors when running in node.

```ts
import 'codemirror/mode/meta'; // This must be imported.
import 'codemirror/lib/codemirror.css';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/yaml/yaml';

import CodeMirror from 'codemirror';
import { RemirrorManager } from 'remirror/core';
import { CorePreset } from 'remirror/preset/core';
import { CodeMirrorExtension } from '@remirror/extension-codemirror5';

// Create the codeMirror extension with an instance of the codemirror import.
const codeMirrorExtension = new CodeMirrorExtension({ CodeMirror });
const corePreset = new CorePreset();

// Create the Editor Manager with the codeMirror extension passed through.
const manager = RemirrorManager.create([codeMirrorExtension, corePreset]);

// Pass the dom element to the editor. If you are using `@remirror/react` or
// other framework wrappers then this is handled for you.
const element = document.createElement('div');
document.body.append(element);

// Add the view to the editor manager.
manager.addView(element);

// Access the codeMirror commands
manager.store.commands.createCodeMirror({ language: 'yaml' });

// Update the codeMirror
manager.store.chain
  .updateCodeBlock({ language: 'js', codeMirrorConfig: { lineNumbers: true } })
  .run();
```
npm package: @remirror/extension-codemirror6
Description: Add CodeMirror6 to your editor.
Latest version: 2.0.2

# @remirror/extension-codemirror6

> Add [CodeMirror](https://codemirror.net/) to your editor.

[![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#)

[version]: https://flat.badgen.net/npm/v/@remirror/extension-codemirror6
[npm]: https://npmjs.com/package/@remirror/extension-codemirror6
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-codemirror6
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-codemirror6
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-codemirror6/red?icon=npm

## Installation

```bash
yarn add @remirror/extension-codemirror6 # yarn
pnpm add @remirror/extension-codemirror6 # pnpm
npm install @remirror/extension-codemirror6 # npm
```

<!-- ## Usage -->
npm package: @remirror/extension-collaboration
Description: Add collaboration to your remirror editor.
Latest version: 3.0.2

# @remirror/extension-collaboration

> Add live collaboration to your remirror editor.

[![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#)

[version]: https://flat.badgen.net/npm/v/@remirror/extension-collaboration
[npm]: https://npmjs.com/package/@remirror/extension-collaboration
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-collaboration
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-collaboration
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-collaboration/red?icon=npm

## Installation

```bash
yarn add @remirror/extension-collaboration # yarn
pnpm add @remirror/extension-collaboration # pnpm
npm install @remirror/extension-collaboration # npm
```

This is included by default when you install the recommended `remirror` package. All exports are also available via the entry-point, `remirror/extensions`.
npm package: @remirror/extension-columns
Description: Add column support to the nodes in your editor.
Latest version: 3.0.2

# @remirror/extension-columns

> **Add column support to the nodes in your editor.**

[![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#)

[version]: https://flat.badgen.net/npm/v/@remirror/extension-columns
[npm]: https://npmjs.com/package/@remirror/extension-columns
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-columns
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-columns
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-columns/red?icon=npm

## Installation

```bash
# yarn
yarn add @remirror/extension-columns

# pnpm
pnpm add @remirror/extension-columns

# npm
npm install @remirror/extension-columns
```

## Usage

The following code creates an instance of this extension.

```ts
import { ColumnsExtension } from '@remirror/extension-columns';

const extension = new ColumnsExtension();
```
npm package: @remirror/extension-count
Description: Count characters or words in your editor, and set a soft max length
Latest version: 3.0.2

# @remirror/extension-count

> **Count words or characters in your editor, and set a soft max length**

[![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#)

[version]: https://flat.badgen.net/npm/v/@remirror/extension-count
[npm]: https://npmjs.com/package/@remirror/extension-count
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-count
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-count
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-count/red?icon=npm

## Installation

```bash
# yarn
yarn add @remirror/extension-count

# pnpm
pnpm add @remirror/extension-count

# npm
npm install @remirror/extension-count
```

## Usage

The following code creates an instance of this extension.

```ts
import { CountExtension } from '@remirror/extension-count';

const extension = new CountExtension();
```
npm package: @remirror/extension-diff
Description: Track diffs between your json documents.
Latest version: 3.0.2

# @remirror/extension-diff

> Track user changes in your remirror editor.

[![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#)

[version]: https://flat.badgen.net/npm/v/@remirror/extension-diff
[npm]: https://npmjs.com/package/@remirror/extension-diff
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-diff
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-diff
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-diff/red?icon=npm

## Installation

```bash
# yarn
yarn add @remirror/extension-diff

# pnpm
pnpm add @remirror/extension-diff

# npm
npm install @remirror/extension-diff
```

This is included by default when you install the recommended `remirror` package. All exports are also available via the entry-point, `remirror/extensions`.

## Usage

The following code creates an instance of this extension.

```ts
import { DiffExtension } from 'remirror/extensions';

const extension = new DiffExtension();
```
npm package: @remirror/extension-doc
Description: The root of your text-editor. One doc to rule them all.
Latest version: 3.0.2

# @remirror/extension-doc

> The root of your text-editor. One doc to rule them all.

[![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#)

[version]: https://flat.badgen.net/npm/v/@remirror/extension-doc
[npm]: https://npmjs.com/package/@remirror/extension-doc
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-doc
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-doc
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-doc/red?icon=npm

## Installation

```bash
# yarn
yarn add @remirror/extension-doc

# pnpm
pnpm add @remirror/extension-doc

# npm
npm install @remirror/extension-doc
```

This is included by default when you install the recommended `remirror` package. All exports are also available via the entry-point, `remirror/extensions`.

## Usage

This is one of the **core** extensions and is included by default when using the `CorePreset` from `remirror/presets`.
npm package: @remirror/extension-drop-cursor
Description: A cursor for the ages. Drag and drop content in your editor with class.
Latest version: 3.0.2

# @remirror/extension-drop-cursor

> A cursor for the ages. Drag and drop content in your editor with class.

[![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#)

[version]: https://flat.badgen.net/npm/v/@remirror/extension-drop-cursor
[npm]: https://npmjs.com/package/@remirror/extension-drop-cursor
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-drop-cursor
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-drop-cursor
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-drop-cursor/red?icon=npm

## Installation

```bash
yarn add @remirror/extension-drop-cursor # yarn
pnpm add @remirror/extension-drop-cursor # pnpm
npm install @remirror/extension-drop-cursor # npm
```

This is included by default when you install the recommended `remirror` package. All exports are also available via the entry-point, `remirror/extensions`.

## Usage

The following code sample will create a limited editor and run the available commands from this extension.

```ts
import { ExtensionPriority, RemirrorManager } from 'remirror';
import { CorePreset, DropCursorExtension } from 'remirror/extensions';

// Create the codeBlock extension
const dropCursorExtension = new DropCursorExtension({ supportedLanguages: [typescript, jsx] });
const corePreset = new CorePreset();

// Create the Editor Manager with the codeBlock extension passed through.
const manager = RemirrorManager.create([dropCursorExtension, corePreset]);

// Pass the dom element to the editor. If you are using `@remirror/react` or
// other framework wrappers then this is handled for you.
const element = document.createElement('div');
document.body.append(element);

// Add the view to the editor manager.
manager.addView(element);
```
npm package: @remirror/extension-embed
Description: Add embedded content into your editor
Latest version: 3.0.2

# @remirror/extension-embed

> A collection of extension for adding embedded content into your editor.

[![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#)

[version]: https://flat.badgen.net/npm/v/@remirror/extension-embed
[npm]: https://npmjs.com/package/@remirror/extension-embed
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-embed
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-embed
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-embed/red?icon=npm

<br />

## Installation

```bash
# yarn
yarn add @remirror/extension-embed

# pnpm
pnpm add @remirror/extension-embed

# npm
npm install @remirror/extension-embed
```

This is included by default when you install the recommended `remirror` package. All exports are also available via the entry-point, `remirror/extensions`.

<br />

## Usage

The following adds the support for iFrames in your editor.

```ts
import { createCoreManager, IframeExtension } from 'remirror/extensions';

const manager = createCoreManager([new IframeExtension()]);
```
npm package: @remirror/extension-emoji
Description: Add flavor to your editor with emoji's that make the heart sing.
Latest version: 3.0.2

# @remirror/extension-emoji

> Add flavor to your editor with emoji's that make the heart sing.

[![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#)

[version]: https://flat.badgen.net/npm/v/@remirror/extension-emoji
[npm]: https://npmjs.com/package/@remirror/extension-emoji
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-emoji
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-emoji
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-emoji/red?icon=npm

## Installation

```bash
# yarn
yarn add @remirror/extension-emoji

# pnpm
pnpm add @remirror/extension-emoji

# npm
npm install @remirror/extension-emoji
```

This is included by default when you install the recommended `remirror` package. All exports are also available via the entry-point, `remirror/extensions`.

## Usage

The following code sample will create a limited editor and run the available commands from this extension.

```ts
import { ExtensionPriority, RemirrorManager } from 'remirror';
import { CorePreset, EmojiExtension } from 'remirror/extensions';

// Create the codeBlock extension
const emojiExtension = new EmojiExtension({ supportedLanguages: [typescript, jsx] });
const corePreset = new CorePreset();

// Create the Editor Manager with the codeBlock extension passed through.
const manager = RemirrorManager.create([emojiExtension, corePreset]);

// Pass the dom element to the editor. If you are using `@remirror/react` or
// other framework wrappers then this is handled for you.
const element = document.createElement('div');
document.body.append(element);

// Add the view to the editor manager.
manager.addView(element);

manager.store.commands.insertEmojiByName('+1'); // Insert the thumbs up emoji.
manager.store.commands.suggestEmoji(); // Inserts the suggestion activation character.

manager.store.helpers.updateFrequentlyUsed(['heart', '+1', 'smile']);
```
npm package: @remirror/extension-enhanced-link
Description: This package is deprecated. It has been replaced with [`@remirror/extension-link`](https://www.npmjs.com/package/@remirror/extension-link).
Latest version: 1.0.0

# @remirror/extension-enhanced-link

This package is deprecated. It has been replaced with [`@remirror/extension-link`](https://www.npmjs.com/package/@remirror/extension-link).

You can still install older versions, but no new releases are planned.
npm package: @remirror/extension-entity-reference
Description: Allow users to highlight important content
Latest version: 3.0.2

# @remirror/extension-entity-reference

> **Allow users to highlight important content**

[![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#)

[version]: https://flat.badgen.net/npm/v/@remirror/extension-entity-reference
[npm]: https://npmjs.com/package/@remirror/extension-entity-reference
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-entity-reference
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-entity-reference
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-entity-reference/red?icon=npm

## Installation

```bash
# yarn
yarn add @remirror/extension-entity-reference

# pnpm
pnpm add @remirror/extension-entity-reference

# npm
npm install @remirror/extension-entity-reference
```

## Usage

The following code creates an instance of this extension.

```ts
import { EntityReferenceExtension } from '@remirror/extension-entity-reference';

const extension = new EntityReferenceExtension();
```
npm package: @remirror/extension-epic-mode
Description: Epic (power) mode extension for the remirror wysiwyg editor.
Latest version: 3.0.2

# @remirror/extension-epic-mode

> Epic (power) mode extension for the remirror wysiwyg editor.

[![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#)

[version]: https://flat.badgen.net/npm/v/@remirror/extension-epic-mode
[npm]: https://npmjs.com/package/@remirror/extension-epic-mode
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-epic-mode
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-epic-mode
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-epic-mode/red?icon=npm

## Installation

```bash
yarn add @remirror/extension-epic-mode # yarn
pnpm add @remirror/extension-epic-mode # pnpm
npm install @remirror/extension-epic-mode # npm
```

This is included by default when you install the recommended `remirror` package. All exports are also available via the entry-point, `remirror/extensions`.

## Usage

The following code sample will create a limited editor and run the available commands from this extension.

```ts
import { ExtensionPriority, RemirrorManager } from 'remirror';
import { CorePreset, EpicModeExtension } from 'remirror/extensions';

// Create the codeBlock extension
const epicModeExtension = new EpicModeExtension();
const corePreset = new CorePreset();

// Create the Editor Manager with the codeBlock extension passed through.
const manager = RemirrorManager.create([epicModeExtension, corePreset]);

// Pass the dom element to the editor. If you are using `@remirror/react` or
// other framework wrappers then this is handled for you.
const element = document.createElement('div');
document.body.append(element);

// Add the view to the editor manager.
manager.addView(element);

// Make the epic mode extension active.
epicModeExtension.setOptions({ active: true });
```
npm package: @remirror/extension-events
Description: Manage your remirror editor dom events.
Latest version: 3.0.2

# @remirror/extension-events

> Manage your remirror editor dom events.

[![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#)

[version]: https://flat.badgen.net/npm/v/@remirror/extension-events
[npm]: https://npmjs.com/package/@remirror/extension-events
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-events
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-events
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-events/red?icon=npm

## Installation

```bash
# yarn
yarn add @remirror/extension-events @remirror/core

# pnpm
pnpm add @remirror/extension-events @remirror/core

# npm
npm install @remirror/extension-events @remirror/core
```

This is included by default when you install the recommended `remirror` package. All exports are also available via the entry-point, `remirror/extensions`.

## Usage

The following code creates an instance of this extension.

```ts
import { EventsExtension } from 'remirror/extensions';

const extension = new EventsExtension();

extension.addCustomHandler('focus', () => {
  // Do something.
});
```

This extension is included by default in the `CorePreset` from `remirror/presets`.
npm package: @remirror/extension-file
Description: > Add files to your editor.
Latest version: 2.0.3

# @remirror/extension-file

> Add files to your editor.

[![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#)

[version]: https://flat.badgen.net/npm/v/@remirror/extension-file
[npm]: https://npmjs.com/package/@remirror/extension-file
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-file
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-file
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-file/red?icon=npm

## Installation

```bash
yarn add @remirror/extension-file # yarn
pnpm add @remirror/extension-file # pnpm
npm install @remirror/extension-file # npm
```

This is **NOT** included by default when you install the recommended `remirror` package.

```ts
import { FileExtension } from '@remirror/extension-file';
```

The extension is provided by the `@remirror/extension-file` package.

## Usage

The following code creates an instance of this extension.

```ts
import { DropCursorExtension } from 'remirror/extensions';
import { FileExtension } from '@remirror/extension-file';

const extension = new FileExtension();
```