@artibox/slate-heading NPM

Slate heading.

Installation

npm install @artibox/slate-heading --save

or

$ yarn add @artibox/slate-heading

Usage

Editor

import React from 'react';
import { Heading1, Heading2, Heading3 } from '@artibox/icons';
import { createArtiboxEditor } from '@artibox/slate-editor';
import { Toolbar } from '@artibox/slate-toolbar';
import { createHeading } from '@artibox/slate-heading';

const Heading = createHeading();

const plugins = [
  Heading.forPlugin({ disabled: [4, 5, 6] }),
  Toolbar.forPlugin({
    collapsedTools: [
      { icon: Heading1, hook: Heading.forToolHook({ level: 1 }) },
      { icon: Heading2, hook: Heading.forToolHook({ level: 2 }) },
      { icon: Heading3, hook: Heading.forToolHook({ level: 3 }) }
    ]
  })
];

const Editor = createArtiboxEditor({
  plugins
});

export default Editor;

Jsx Serializer

import { createJsxSerializer } from '@artibox/slate-jsx-serializer';
import { createHeadingJsxSerializerRule } from '@artibox/slate-heading';

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

...

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