# bq-editor

> BQ Remirror Editor

Latest version **0.0.82** (published 2025-04-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install bq-editor
pnpm add bq-editor
yarn add bq-editor
bun add bq-editor
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 0.0.82 |
| Published | 2025-04-15 |
| First published | 2023-01-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 673 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Carmen Domínguez Campillo |
| Maintainers | carmendominguez |
| Keywords | prosemirror, react, remirror, text editor |

## Links

- npm: https://www.npmjs.com/package/bq-editor
- Repository: https://github.com/bq-educacion/editor
- Homepage: https://github.com/bq-educacion/editor#readme
- Issues: https://github.com/bq-educacion/editor/issues
- npm.io page: https://npm.io/package/bq-editor

## Dependencies (8)

- [remirror](https://npm.io/package/remirror.md) 2.0.39
- [classnames](https://npm.io/package/classnames.md) ^2.3.1
- [@remirror/pm](https://npm.io/package/@remirror/pm.md) 2.0.8
- [@remirror/react](https://npm.io/package/@remirror/react.md) 2.0.35
- [@floating-ui/dom](https://npm.io/package/@floating-ui/dom.md) ^1.6.3
- [@floating-ui/react](https://npm.io/package/@floating-ui/react.md) ^0.26.9
- [create-context-state](https://npm.io/package/create-context-state.md) ^2.0.0
- [@remirror/extension-node-formatting](https://npm.io/package/@remirror/extension-node-formatting.md) 2.0.13

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.82 (latest) — 2025-04-15
- 0.0.81 — 2025-01-10
- 0.0.80 — 2024-10-04
- 0.0.79 — 2024-10-04
- 0.0.78 — 2024-09-13
- 0.0.77 — 2024-09-13
- 0.0.76 — 2024-09-13
- 0.0.75 — 2024-09-13
- 0.0.74 — 2024-09-13
- 0.0.73 — 2024-08-28
- 0.0.72 — 2024-07-19
- 0.0.71 — 2024-07-04
- 0.0.70 — 2024-03-04
- 0.0.69 — 2024-02-28
- 0.0.68 — 2024-02-23
- … 67 more at https://npm.io/package/bq-editor/versions

## README

# bq Editor

Simple and Bqeautiful React Rich Text Editor.

## Installation

```
npm i bq-editor
```
```
yarn add bq-editor
```

## Usage

### Render

To render the editor with default extensions we simply do:

```
<Editor />
```

### Extensions

Extensions indicate what type of content the editor can handle.

```
<Editor
  extensions={[
    [
      {
        name: "heading",
        attrs: {
          levels: [1, 2, 3]
        }
      },
      {
        name: "bold"
      },
      {
        name: "italic"
      }
    ],
    [
      {
        name: "text-color",
        attrs: {
          color: #ffffff
        }
      }
    ]
  ]}
/>
```

It is an matrix, whose order and separations will define the toolbar.

Everything you type will be passed through with keybindings to the extensions. Users can even bold text via input rules: Type \*\*bold\*\* to add bold text.

Some extensions have additional parameters, run the [storybook](https://github.com/bq-educacion/bq-editor#storybook) or go to the [examples](https://github.com/bq-educacion/bq-editor/tree/main/src/examples) folder to see them.

### Content

Editor provides an `onChange` function to export and save the contents.

```
export const MyEditor<{ content: ProsemirrorNode }> = ({ content }) => {
  const [doc, setDoc] = useState<ProsemirrorNode>();

  return (
    <Editor
      initialContent={JSON.stringify(content)}
      onChange={setDoc}
    />
  );
};
```

The output content is a `ProsemirrorNode` type.

The input content is a `string`, which will be handle as `ProsemirrorNode` type except if a specific string handle is activated.

### Html Editor

Two remirror functions are exposed to handle html content: `editorNodeToHtml` and `htmlToEditorNode`.

```
export const MyHtmlEditor<{ html: string }> = ({ html }) => {
  const [doc, setDoc] = useState<ProsemirrorNode>();

  return (
    <Editor
      initialContent={html}
      onChange={setDoc}
      stringHandler="html"
    />
  );
};
```

### Markdown Editor

Due to the limitations of markdown some extensions do not work.

```
export const MyMarkdownEditor<{ markdown: string }> = ({ markdown }) => {
  const [doc, setDoc] = useState<ProsemirrorNode>();

  return (
    <Editor
      initialContent={markdown}
      onChange={setDoc}
      stringHandler="markdown"
    />
  );
};
```

### Code Editor

The code editor is activated with the codeEditor variable, there is no need to add extensions.

```
export const MyCodeEditor<{ content: ProsemirrorNode }> = ({ content }) => {
  const [doc, setDoc] = useState<ProsemirrorNode>();

  return (
    <Editor
      codeEditor
      initialContent={JSON.stringify(content)}
      onChange={setDoc}
    />
  );
};
```

### Visor

To view non-editable content:

```
export const MyVisor<{ content: ProsemirrorNode }> = ({ content }) => {
  return (
    <Visor content={JSON.stringify(content)} />
  );
};
```

Corresponding extensions, handler or codeEditor must be added so visor can interpret the content.

## Storybook

To see more examples and play with them, download the project, install dependencies and run our storybook:

```
yarn sb-start
```

## Contribute

First of all, thanks for using bq editor!

If you run into any issues, open an issue in our [github repository](https://github.com/bq-educacion/bq-editor) or create a pull request with your improvement proposal, explaining in detail the problem and the solution.

Please be patient, as this is a work in progress project.

## Credits

This editor uses the wonderful [Remirror](https://remirror.io/) React library.

All credits and applause go to the Remirror team.

## License

This project is licensed under the MIT License. See [LICENSE](https://github.com/bq-educacion/bq-editor/blob/main/LICENSE) file for more details.

---
_Source: https://npm.io/package/bq-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._