open-index/open-npm huggingface dataset:
npm package: @remirror/extension-find
Description: Find and replace text in the remirror editor.
Latest version: 1.0.2

# @remirror/extension-find

> Find all of your favourite things in the 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-find
[npm]: https://npmjs.com/package/@remirror/extension-find
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-find
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-find
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-find/red?icon=npm

## Installation

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

# pnpm
pnpm add @remirror/extension-find

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

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 { FindExtension } from 'remirror/extensions';

const extension = new FindExtension();
```
npm package: @remirror/extension-font-family
Description: Add a font family to selected text, or text within the provided range.
Latest version: 3.0.2

# @remirror/extension-font-family

> **Add a font family to selected text, or text within the provided range.**

[![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-font-family
[npm]: https://npmjs.com/package/@remirror/extension-font-family
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-font-family
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-font-family
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-font-family/red?icon=npm

## Installation

```bash
# yarn
yarn add @remirror/extension-font-family

# pnpm
pnpm add @remirror/extension-font-family

# npm
npm install @remirror/extension-font-family
```

## Usage

The following code creates an instance of this extension.

```ts
import { FontFamilyExtension } from '@remirror/extension-font-family';

const extension = new FontFamilyExtension();
```
npm package: @remirror/extension-font-size
Description: Add font size to the selected text, or text within the provided range.
Latest version: 3.0.2

# @remirror/extension-font-size

> **Add font size to the selected text, or text within the provided range.**

[![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-font-size
[npm]: https://npmjs.com/package/@remirror/extension-font-size
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-font-size
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-font-size
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-font-size/red?icon=npm

## Installation

```bash
# yarn
yarn add @remirror/extension-font-size

# pnpm
pnpm add @remirror/extension-font-size

# npm
npm install @remirror/extension-font-size
```

## Usage

The following code creates an instance of this extension.

```ts
import { FontSizeExtension } from '@remirror/extension-font-size';

const extension = new FontSizeExtension();
```
npm package: @remirror/extension-gap-cursor
Description: Enable cursors for difficult to reach parts of the document.
Latest version: 3.0.2

# @remirror/extension-gap-cursor

> Enable cursors for difficult to reach parts of the document.

[![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-gap-cursor
[npm]: https://npmjs.com/package/@remirror/extension-gap-cursor
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-gap-cursor
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-gap-cursor
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-gap-cursor/red?icon=npm

## Installation

```bash
# yarn
yarn add @remirror/extension-gap-cursor

# pnpm
pnpm add @remirror/extension-gap-cursor

# npm
npm install @remirror/extension-gap-cursor
```

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 { GapCursorExtension } from 'remirror/extensions';

const extension = new GapCursorExtension();
```

When enabled, this will capture clicks near and arrow-key-motion past places that don't have a normally selectable position nearby, and create a gap cursor selection for them. The cursor is drawn as an element with class `ProseMirror-gapcursor`.

Make sure to import the styles as shown below.

```ts
import 'remirror/styles/gap-cursor.css';
```
npm package: @remirror/extension-hard-break
Description: Add `br` tags to your editor.
Latest version: 3.0.2

# @remirror/extension-hard-break

> Add `br` tags 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-hard-break
[npm]: https://npmjs.com/package/@remirror/extension-hard-break
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-hard-break
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-hard-break
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-hard-break/red?icon=npm

## Installation

```bash
# yarn
yarn add @remirror/extension-hard-break

# pnpm
pnpm add @remirror/extension-hard-break

# npm
npm install @remirror/extension-hard-break
```

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 { HardBreakExtension } from 'remirror/extensions';

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

# @remirror/extension-heading

> Add headings 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-heading
[npm]: https://npmjs.com/package/@remirror/extension-heading
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-heading
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-heading
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-heading/red?icon=npm

## Installation

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

# pnpm
pnpm add @remirror/extension-heading

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

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 { HeadingExtension } from 'remirror/extensions';

const extension = new HeadingExtension();
```
npm package: @remirror/extension-history
Description: Add undo and redo history to your editor.
Latest version: 3.0.2

# @remirror/extension-history

> Add undo and redo history 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-history
[npm]: https://npmjs.com/package/@remirror/extension-history
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-history
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-history
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-history/red?icon=npm

## Installation

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

# pnpm
pnpm add @remirror/extension-history

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

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 { HistoryExtension } from 'remirror/extensions';

const extension = new HistoryExtension();
```

The `CorePreset` includes this extension so may never need to interact with it directly.
npm package: @remirror/extension-horizontal-rule
Description: Allow your users to divide their content with horizontal lines. Nice!
Latest version: 3.0.2

# @remirror/extension-horizontal-rule

> Allow your users to divide their content with horizontal lines. Nice!

[![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-horizontal-rule
[npm]: https://npmjs.com/package/@remirror/extension-horizontal-rule
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-horizontal-rule
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-horizontal-rule
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-horizontal-rule/red?icon=npm

## Installation

```bash
# yarn
yarn add @remirror/extension-horizontal-rule

# pnpm
pnpm add @remirror/extension-horizontal-rule

# npm
npm install @remirror/extension-horizontal-rule
```

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 { HorizontalRuleExtension } from 'remirror/extensions';

const extension = new HorizontalRuleExtension();
```
npm package: @remirror/extension-image
Description: Add images to your editor.
Latest version: 3.0.2

# @remirror/extension-image

> Add images 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-image
[npm]: https://npmjs.com/package/@remirror/extension-image
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-image
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-image
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-image/red?icon=npm

## Installation

```bash
yarn add @remirror/extension-image # yarn
pnpm add @remirror/extension-image # pnpm
npm install @remirror/extension-image # 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, ImageExtension } from 'remirror/extensions';

// Create the codeBlock extension
const imageExtension = new ImageExtension();
const corePreset = new CorePreset();

// Create the Editor Manager with the codeBlock extension passed through.
const manager = RemirrorManager.create([imageExtension, 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);

// Insert an image at the current selection.
manager.store.commands.insertImage({ src: `https://images.com/awesome.jpg` });
```
npm package: @remirror/extension-italic
Description: Adds italic formatting to your text editor.
Latest version: 3.0.2

# @remirror/extension-italic

> Adds italic formatting 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-italic
[npm]: https://npmjs.com/package/@remirror/extension-italic
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-italic
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-italic
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-italic/red?icon=npm

## Installation

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

# pnpm
pnpm add @remirror/extension-italic

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

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 { ItalicExtension } from '@remirror/extension-italic';

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

# @remirror/extension-link

> Add links 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-link
[npm]: https://npmjs.com/package/@remirror/extension-link
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-link
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-link
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-link/red?icon=npm

## Installation

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

# pnpm
pnpm add @remirror/extension-link

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

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 { LinkExtension } from 'remirror/extensions';

const extension = new LinkExtension();
```
npm package: @remirror/extension-list
Description: The list extensions.
Latest version: 3.0.2

# @remirror/extension-list

> The list preset and accompanying extensions.

[![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-list
[npm]: https://npmjs.com/package/@remirror/extension-list
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-list
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-list
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-list/red?icon=npm

<br />

## Installation

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

# pnpm
pnpm add @remirror/extension-list

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

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

<br />

## Usage

The following creates an editor which supports both ordered and bullet lists.

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

const manager = createCoreManager(() => [new BulletListExtension(), new OrderedListExtension()]);
```
npm package: @remirror/extension-markdown
Description: Generate markdown output from your editor
Latest version: 3.0.3

# @remirror/extension-markdown

> Output markdown from 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-markdown
[npm]: https://npmjs.com/package/@remirror/extension-markdown
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-markdown
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-markdown
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-markdown/red?icon=npm

## Installation

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

# pnpm
pnpm add @remirror/extension-markdown

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

## Why

This extension adds support for converting your Prosemirror content to markdown.

This works by transforming the markdown content you provided into html and then using the built in DOMParser to transform the html to a ProseMirror node.

## Usage

The following code creates an instance of this extension.

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

const extension = new MarkdownExtension();
```

##
npm package: @remirror/extension-mention
Description: Mention extension for the remirror wysiwyg editor
Latest version: 3.0.2

# @remirror/extension-mention

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

Add mention and suggesters support to remirror.

## Installation

```bash
yarn add @remirror/extension-mention # yarn
pnpm add @remirror/extension-mention # pnpm
npm install @remirror/extension-mention # 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-mention-atom
Description: Atom mentions for the remirror wysiwyg editor
Latest version: 3.0.2

# @remirror/extension-mention-atom

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

Add non editable mentions to your editor.

## Installation

```bash
yarn add @remirror/extension-mention-atom # yarn
pnpm add @remirror/extension-mention-atom # pnpm
npm install @remirror/extension-mention-atom # 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-node-formatting
Description: Support consistent formatting of nodes within your editor.
Latest version: 3.0.2

# @remirror/extension-node-formatting

> **Support consistent formatting of nodes within 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-node-formatting
[npm]: https://npmjs.com/package/@remirror/extension-node-formatting
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-node-formatting
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-node-formatting
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-node-formatting/red?icon=npm

## Installation

```bash
# yarn
yarn add @remirror/extension-node-formatting

# pnpm
pnpm add @remirror/extension-node-formatting

# npm
npm install @remirror/extension-node-formatting
```

## Usage

The following code creates an instance of this extension.

```ts
import { NodeFormattingExtension } from '@remirror/extension-node-formatting';

const extension = new NodeFormattingExtension();
```
npm package: @remirror/extension-paragraph
Description: Group your words into paragraphs and render each statement a harmonious symphony.
Latest version: 3.0.2

# @remirror/extension-paragraph

> Group your words into paragraphs and render each statement a harmonious symphony.

[![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-paragraph
[npm]: https://npmjs.com/package/@remirror/extension-paragraph
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-paragraph
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-paragraph
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-paragraph/red?icon=npm

<br />

## Installation

```bash
yarn add @remirror/extension-paragraph # yarn
pnpm add @remirror/extension-paragraph # pnpm
npm install @remirror/extension-paragraph # 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 `insertParagraph` which inserts a paragraph into the editor.

```ts
import { ExtensionPriority, RemirrorManager } from 'remirror';
import { DocExtension, ParagraphExtension, TextExtension } from 'remirror/extensions';

// Create the extension
const paragraphExtension = new ParagraphExtension();
const docExtension = new DocExtension({ priority: ExtensionPriority.Low });
const textExtension = new TextExtension({ priority: ExtensionPriority.Low });

// Create the Editor Manager with the paragraph extension passed through.
const manager = RemirrorManager.create([paragraphExtension, docExtension, textExtension]);

// 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 insert a paragraph.
manager.commands.insertParagraph();
```

### Alternatives

There are several presets which contain this extension and make the installation process less verbose. As a result you probably won't ever need to manage it directly.

<br />
npm package: @remirror/extension-placeholder
Description: TEMPLATE_DESCRIPTION
Latest version: 3.0.2

# @remirror/extension-placeholder

> **TEMPLATE_DESCRIPTION**

[![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-placeholder
[npm]: https://npmjs.com/package/@remirror/extension-placeholder
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-placeholder
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-placeholder
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-placeholder/red?icon=npm

## Installation

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

# pnpm
pnpm add @remirror/extension-placeholder

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

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 { PlaceholderExtension } from 'remirror/extensions';

const extension = new PlaceholderExtension();
```
npm package: @remirror/extension-positioner
Description: Reposition your elements with every state update.
Latest version: 3.0.2

# @remirror/extension-positioner

> Reposition your elements with every state update.

[![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-positioner
[npm]: https://npmjs.com/package/@remirror/extension-positioner
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-positioner
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-positioner
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-positioner/red?icon=npm

## Installation

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

# pnpm
pnpm add @remirror/extension-positioner

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

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

## Usage

An extension for tracking the position of the provided element relative to the prosemirror editor. Can be used to find the top / left position in order to position the element as a hover menu.

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

const extension = new PositionerExtension();

const dispose = extension.addCustomHandler({
  positioner: 'bubble',
  element,
  onChange: ({ isActive, top, left }) => {
    // do something
  },
});

// Later in the app
dispose(); // Remove the positioner.
```
npm package: @remirror/extension-react-component
Description: Create prosemirror node views from your react components
Latest version: 3.0.3

# @remirror/extension-react-component

> Create prosemirror node views from your react components

[![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-react-component
[npm]: https://npmjs.com/package/@remirror/extension-react-component
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-react-component
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-react-component
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-react-component/red?icon=npm

## Installation

```bash
# yarn
yarn add @remirror/extension-react-component

# pnpm
pnpm add @remirror/extension-react-component

# npm
npm install @remirror/extension-react-component
```

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 extension allows you to use react Components within the editor.

The following code creates an instance of this extension.

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

const extension = new ReactComponentExtension();
```
npm package: @remirror/extension-react-native-bridge
Description: Support for communication between the webview and native editor.
Latest version: 1.0.4

# @remirror/extension-react-native-bridge

**DEPRECATED**

> **Support for communication between the webview and native 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-react-native-bridge
[npm]: https://npmjs.com/package/@remirror/extension-react-native-bridge
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-react-native-bridge
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-react-native-bridge
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-react-native-bridge/red?icon=npm

## Installation

```bash
# yarn
yarn add @remirror/extension-react-native-bridge

# pnpm
pnpm add @remirror/extension-react-native-bridge

# npm
npm install @remirror/extension-react-native-bridge
```

## Usage

The following code creates an instance of this extension.

```ts
import { NativeBridgeExtension } from '@remirror/extension-react-native-bridge';

const extension = new NativeBridgeExtension();
```
npm package: @remirror/extension-react-ssr
Description: If server side support is important to you, then this is perfect for your remirror editor in react.
Latest version: 3.0.3

# @remirror/extension-react-ssr

> If server side support is important to you, then this is perfect for your remirror editor in react.

[![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-react-ssr
[npm]: https://npmjs.com/package/@remirror/extension-react-ssr
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-react-ssr
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-react-ssr
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-react-ssr/red?icon=npm

## Installation

```bash
# Yarn
yarn add @remirror/extension-react-ssr

# pnpm
pnpm add @remirror/extension-react-ssr

# npm
npm install @remirror/extension-react-ssr
```

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 react** extensions and is included by default in the `ReactPreset`. All exports are also available via the entry-point, `remirror/extensions`.
npm package: @remirror/extension-react-tables
Description: Create tables with nested react components.
Latest version: 3.0.3

# @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/extension-shortcuts
Description: Replace characters with keyboard shortcuts
Latest version: 3.0.2

# @remirror/extension-shortcuts

> **Replace characters with keyboard shortcuts**

[![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-shortcuts
[npm]: https://npmjs.com/package/@remirror/extension-shortcuts
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-shortcuts
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-shortcuts
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-shortcuts/red?icon=npm

## Installation

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

# pnpm
pnpm add @remirror/extension-shortcuts

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

## Usage

The following code creates an instance of this extension.

```ts
import { ShortcutsExtension } from '@remirror/extension-shortcuts';

const extension = new ShortcutsExtension();
```
npm package: @remirror/extension-strike
Description: Add strikethrough formatting to your text editor.
Latest version: 3.0.2

# @remirror/extension-strike

> Add strikethrough formatting 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-strike
[npm]: https://npmjs.com/package/@remirror/extension-strike
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-strike
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-strike
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-strike/red?icon=npm

## Installation

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

# pnpm
pnpm add @remirror/extension-strike

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

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 { StrikeExtension } from 'remirror/extensions';

const extension = new StrikeExtension();
```
npm package: @remirror/extension-sub
Description: Add subscript formatting to your text editor.
Latest version: 3.0.2

# @remirror/extension-sub

> Add subscript formatting 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-sub
[npm]: https://npmjs.com/package/@remirror/extension-sub
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-sub
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-sub
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-sub/red?icon=npm

## Installation

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

# pnpm
pnpm add @remirror/extension-sub

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

## Usage

The following code creates an instance of this extension.

```ts
import { SubExtension } from '@remirror/extension-sub';

const extension = new SubExtension();
```
npm package: @remirror/extension-sup
Description: Add superscript formatting to your text editor.
Latest version: 3.0.2

# @remirror/extension-sup

> Add superscript formatting 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-sup
[npm]: https://npmjs.com/package/@remirror/extension-sup
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-sup
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-sup
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-sup/red?icon=npm

## Installation

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

# pnpm
pnpm add @remirror/extension-sup

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

## Usage

The following code creates an instance of this extension.

```ts
import { SupExtension } from '@remirror/extension-sup';

const extension = new SupExtension();
```
npm package: @remirror/extension-tables
Description: A table a day keeps the doctor away. Remirror and play keeps the bad times at bay.
Latest version: 3.0.2

# @remirror/extension-tables

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

## Installation

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

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

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

const manager = createCoreManager(() => [TableExtension()]);
```
npm package: @remirror/extension-text
Description: Enable text in your text-editor, an oxymoron of sorts.
Latest version: 3.0.2

# @remirror/extension-text

> Enable text in your text-editor, an oxymoron of sorts.

[![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-text
[npm]: https://npmjs.com/package/@remirror/extension-text
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-text
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-text
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-text/red?icon=npm

## Installation

```bash
yarn add @remirror/extension-text # yarn
pnpm add @remirror/extension-text # pnpm
npm install @remirror/extension-text # 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

This is one of the **core** extensions and is included by default via the `CorePreset` from `remirror/presets`.
npm package: @remirror/extension-text-case
Description: Formatting for text casing in your editor.
Latest version: 3.0.2

# @remirror/extension-text-case

> **Formatting for text casing 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-text-case
[npm]: https://npmjs.com/package/@remirror/extension-text-case
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-text-case
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-text-case
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-text-case/red?icon=npm

## Installation

```bash
# yarn
yarn add @remirror/extension-text-case

# pnpm
pnpm add @remirror/extension-text-case

# npm
npm install @remirror/extension-text-case
```

## Usage

The following code creates an instance of this extension.

```ts
import { TextCaseExtension } from '@remirror/extension-text-case';

const extension = new TextCaseExtension();
```
npm package: @remirror/extension-text-color
Description: Wraps text with a styled span using the color css property. The name of the wrapper tag should be configurable.
Latest version: 3.0.2

# @remirror/extension-text-color

> **Wraps text with a styled span using the color css property. The name of the wrapper tag should be configurable.**

[![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-text-color
[npm]: https://npmjs.com/package/@remirror/extension-text-color
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-text-color
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-text-color
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-text-color/red?icon=npm

## Installation

```bash
# yarn
yarn add @remirror/extension-text-color

# pnpm
pnpm add @remirror/extension-text-color

# npm
npm install @remirror/extension-text-color
```

## Usage

The following code creates an instance of this extension.

```ts
import { TextColorExtension } from '@remirror/extension-text-color';

const extension = new TextColorExtension();
```
npm package: @remirror/extension-text-highlight
Description: Add a color background to the selected text (or text within a specified range).
Latest version: 3.0.2

# @remirror/extension-text-highlight

> **Add a color background to the selected text (or text within a specified range).**

[![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-text-highlight
[npm]: https://npmjs.com/package/@remirror/extension-text-highlight
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-text-highlight
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-text-highlight
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-text-highlight/red?icon=npm

## Installation

```bash
# yarn
yarn add @remirror/extension-text-highlight

# pnpm
pnpm add @remirror/extension-text-highlight

# npm
npm install @remirror/extension-text-highlight
```

## Usage

The following code creates an instance of this extension.

```ts
import { TextHighlightExtension } from '@remirror/extension-text-highlight';

const extension = new TextHighlightExtension();
```
npm package: @remirror/extension-trailing-node
Description: Make sure there's always space to type in your editor.
Latest version: 3.0.2

# @remirror/extension-trailing-node

> Make sure there's always space to type 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-trailing-node
[npm]: https://npmjs.com/package/@remirror/extension-trailing-node
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=@remirror/extension-trailing-node
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-trailing-node
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-trailing-node/red?icon=npm

## Installation

```bash
# yarn
yarn add @remirror/extension-trailing-node

# pnpm
pnpm add @remirror/extension-trailing-node

# npm
npm install @remirror/extension-trailing-node
```

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 { TrailingNodeExtension } from 'remirror/extensions';

const extension = new TrailingNodeExtension();
```