# @artibox/slate-image

Latest version **1.2.2** (published 2020-09-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @artibox/slate-image
pnpm add @artibox/slate-image
yarn add @artibox/slate-image
bun add @artibox/slate-image
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2020-09-26 |
| First published | 2020-01-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 103.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20 |
| Author | Rytass |
| Maintainers | jay0328, fantasywind |

## Links

- npm: https://www.npmjs.com/package/@artibox/slate-image
- Repository: https://github.com/React-Artibox/artibox
- Homepage: https://github.com/React-Artibox/artibox#readme
- Issues: https://github.com/React-Artibox/artibox/issues
- npm.io page: https://npm.io/package/@artibox/slate-image

## Dependencies (9)

- [is-hotkey](https://npm.io/package/is-hotkey.md) ^0.1.6
- [@types/react](https://npm.io/package/@types/react.md) ^16.9.17
- [@types/slate](https://npm.io/package/@types/slate.md) ^0.47.5
- [@artibox/utils](https://npm.io/package/@artibox/utils.md) ^1.0.0
- [@types/is-hotkey](https://npm.io/package/@types/is-hotkey.md) ^0.1.2
- [@types/slate-react](https://npm.io/package/@types/slate-react.md) ^0.22.9
- [@artibox/components](https://npm.io/package/@artibox/components.md) ^1.2.0
- [@artibox/slate-common](https://npm.io/package/@artibox/slate-common.md) ^1.2.0
- [@artibox/slate-jsx-serializer](https://npm.io/package/@artibox/slate-jsx-serializer.md) ^1.2.0

## Recent versions

- 1.2.2 (latest) — 2020-09-26
- 1.2.1 — 2020-09-26
- 1.1.0 — 2020-09-14
- 1.0.0 — 2020-05-12
- 0.2.0 — 2020-01-06

## README

<div align="center">
  <img
    src="https://raw.githubusercontent.com/ianstormtaylor/slate/master/docs/images/banner.png"
    height="200"
  />
</div>

<h1 align="center">@artibox/slate-image</h1>

<div align="center">

[Slate](https://github.com/ianstormtaylor/slate) image.

[![npm package](https://img.shields.io/npm/v/@artibox/slate-image.svg?maxAge=60)](https://www.npmjs.com/package/@artibox/slate-image)
[![npm downloads](https://img.shields.io/npm/dt/@artibox/slate-image.svg?maxAge=60)](https://www.npmjs.com/package/@artibox/slate-image)

</div>

## Installation

```bash
npm install @artibox/slate-image --save

or

$ yarn add @artibox/slate-image
```

## Usage

### Editor

```js
import React from 'react';
import { Image as ImageIcon } from '@artibox/icons';
import { createArtiboxEditor } from '@artibox/slate-editor';
import { createImage } from '@artibox/slate-image';
import { Toolbar } from '@artibox/slate-toolbar';

const Image = createImage();

const plugins = [
  Image.forPlugin(),
  Toolbar.forPlugin({
    collapsedTools: [{ icon: Image, hook: Image.forToolHook() }]
  })
];

const Editor = createArtiboxEditor({
  plugins
});

export default Editor;
```

### Jsx Serializer

```tsx
import { createJsxSerializer } from '@artibox/slate-jsx-serializer';
import { createImageJsxSerializerRule } from '@artibox/slate-image';

const jsxSerializer = createJsxSerializer({
  blocks: [
    createImageJsxSerializerRule()
  ]
});

...

return (
  <div>
    {jsxSerializer(valueJSON /* from slate */)}
  </div>
);
```

## API

- [constants](./src/constants.ts)
- [typings](./src/typings.ts)
- [createImage](./src/image.ts#L23)
- [createImageJsxSerializerRule](./src/jsx-serializer.ts)
- [Image.forPlugin](./src/image.ts#L42)
- [Image.forToolHook](./src/image.ts#L60)
- [ImageController](./src/controller.ts)

### Utils

- [getImagePropsFromBlock](./src/utils/get-image-props-from-block.ts)
- [getImageSrcFromBlock](./src/utils/get-image-src-from-block.ts)
- [getImageStyleFromBlock](./src/utils/get-image-style-from-block.ts)

### Components

- [Image](./src/components/image/index.tsx) - Default component only for renderer of editor since it provide resizer.

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