# @groupher/editor-utils

> utils function for Editor.js

Latest version **0.2.56** (published 2021-09-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install @groupher/editor-utils
pnpm add @groupher/editor-utils
yarn add @groupher/editor-utils
bun add @groupher/editor-utils
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.56 |
| Published | 2021-09-19 |
| First published | 2019-12-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 67.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | CodeX Team |
| Maintainers | mydearxym |
| Keywords | codex editor, embed, tool, editor.js, editorjs |

## Links

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

## Dependencies (3)

- [debug](https://npm.io/package/debug.md) ^4.1.1
- [stringz](https://npm.io/package/stringz.md) ^2.1.0
- [pubsub-js](https://npm.io/package/pubsub-js.md) ^1.8.0

## Alternatives

- [lodash.assign](https://npm.io/package/lodash.assign.md) — 2.3M weekly downloads
- [lodash.chunk](https://npm.io/package/lodash.chunk.md) — 1.8M weekly downloads
- [react-native-ios-utilities](https://npm.io/package/react-native-ios-utilities.md) — 138.5K weekly downloads
- [@technically/lodash](https://npm.io/package/@technically/lodash.md) — 50.9K weekly downloads
- [@fluid-topics/ft-icon](https://npm.io/package/@fluid-topics/ft-icon.md) — 20.6K weekly downloads

## Recent versions

- 0.2.56 (latest) — 2021-09-19
- 0.2.55 — 2021-09-19
- 0.2.54 — 2021-09-18
- 0.2.53 — 2021-09-18
- 0.2.52 — 2021-09-17
- 0.2.51 — 2021-09-17
- 0.2.50 — 2021-09-16
- 0.2.49 — 2021-09-16
- 0.2.48 — 2021-09-16
- 0.2.47 — 2021-09-16
- 0.2.46 — 2021-09-16
- 0.2.45 — 2021-09-16
- 0.2.44 — 2021-09-16
- 0.2.43 — 2021-09-16
- 0.2.42 — 2021-09-16
- … 129 more at https://npm.io/package/@groupher/editor-utils/versions

## README

![](https://badgen.net/badge/Editor.js/v2.0/blue)

# Embed Tool

Provides Block tool for embedded content for the [Editor.js](https://editorjs.io).
Tool uses Editor.js pasted patterns handling and inserts iframe with embedded content.

## Installation

### Install via NPM

Get the package

```shell
npm i --save-dev @editorjs/embed
```

Include module at your application

```javascript
const Embed = require('@editorjs/embed');
```

### Download to your project's source dir

1. Upload folder `dist` from repository
2. Add `dist/bundle.js` file to your page.

### Load from CDN
You can load specific version of package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@editorjs/embed).

`https://cdn.jsdelivr.net/npm/@editorjs/embed@2.0.0`

Then require this script on page with Editor.js.

```html
<script src="..."></script>
```

## Usage

Add a new Tool to the `tools` property of the Editor.js initial config.

```javascript
var editor = EditorJS({
  ...

  tools: {
    ...
    embed: Embed,
  },

  ...
});
```

## Available configuration

Embed Tool supports some services by default (see the full list [here](docs/services.md)). You can specify services you would like to use:

```javascript
var editor = EditorJS({
  ...

  tools: {
    ...
    embed: {
      class: Embed,
      config: {
        services: {
          youtube: true,
          coub: true
        }
      }
    },
  },

  ...
});
```

> Note that if you pass services you want to use like in the example above, others will not be enabled.

Also you can provide your own services using simple configuration.


First of all you should create a Service configuration object. It contains following fields:

| Field      | Type       | Description |
| ---------- | ---------- | ----------- |
| `regex`    | `RegExp`   | Pattern of pasted URLs. You should use regexp groups to extract resource id
| `embedUrl` | `string`   | Url of resource\`s embed page. Use `<%= remote_id %>` to substitute resource identifier
| `html`     | `string`   | HTML code of iframe with embedded content. `embedUrl` will be set as iframe `src`
| `height`   | `number`   | _Optional_. Height of inserted iframe
| `width`    | `number`   | _Optional_. Width of inserted iframe
| `id`       | `Function` | _Optional_. If your id is complex you can provide function to make the id from extraced regexp groups

Example:

```javascript
{
  regex: /https?:\/\/codepen.io\/([^\/\?\&]*)\/pen\/([^\/\?\&]*)/,
  embedUrl: 'https://codepen.io/<%= remote_id %>?height=300&theme-id=0&default-tab=css,result&embed-version=2',
  html: "<iframe height='300' scrolling='no' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>",
  height: 300,
  width: 600,
  id: (groups) => groups.join('/embed/')
}
```

When you create a Service configuration object, you can provide it with Tool\`s configuration:

```javascript
var editor = EditorJS({
  ...

  tools: {
    ...
    embed: {
      class: Embed,
      config: {
        services: {
          youtube: true,
          coub: true,
          codepen: {
            regex: /https?:\/\/codepen.io\/([^\/\?\&]*)\/pen\/([^\/\?\&]*)/,
            embedUrl: 'https://codepen.io/<%= remote_id %>?height=300&theme-id=0&default-tab=css,result&embed-version=2',
            html: "<iframe height='300' scrolling='no' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>",
            height: 300,
            width: 600,
            id: (groups) => groups.join('/embed/')
          }
        }
      }
    },
  },

  ...
});
```

#### Inline Toolbar
Editor.js provides useful inline toolbar. You can allow it\`s usage in the Embed Tool caption by providing `inlineToolbar: true`.

```javascript
var editor = EditorJS({
  ...

  tools: {
    ...
    embed: {
      class: Embed,
      inlineToolbar: true
    },
  },

  ...
});
```

## Output data

| Field   | Type     | Description
| ------- | -------- | -----------
| service | `string` | service unique name
| source  | `string` | source URL
| embed   | `string` | URL for source embed page
| width   | `number` | embedded content width
| height  | `number` | embedded content height
| caption | `string` | content caption


```json
{
  "type" : "embed",
  "data" : {
    "service" : "coub",
    "source" : "https://coub.com/view/1czcdf",
    "embed" : "https://coub.com/embed/1czcdf",
    "width" : 580,
    "height" : 320,
    "caption" : "My Life"
  }
}
```

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