@artibox/slate-image

@artibox/slate-image

Slate image.

Installation

npm install @artibox/slate-image --save

or

$ yarn add @artibox/slate-image

Usage

Editor

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

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
• typings
• createImage
• createImageJsxSerializerRule
• Image.forPlugin
• Image.forToolHook
• ImageController

Utils

• getImagePropsFromBlock
• getImageSrcFromBlock
• getImageStyleFromBlock

Components

• Image - Default component only for renderer of editor since it provide resizer.