@artibox/slate-list

Installation

npm install @artibox/slate-list --save

or

$ yarn add @artibox/slate-list

Usage

Editor

import React from 'react';
import { UnorderedList, OrderedList } from '@artibox/icons';
import { createArtiboxEditor } from '@artibox/slate-editor';
import { Toolbar } from '@artibox/slate-toolbar';
import { createList } from '@artibox/slate-list';

const List = createList();

const plugins = [
  ...List.forPlugin(),
  Toolbar.forPlugin({
    collapsedTools: [
      { icon: UnorderedList, hook: List.forToolHook({ orderedType: 'unordered' }) },
      { icon: OrderedList, hook: List.forToolHook({ orderedType: 'ordered' }) }
    ]
  })
];

const Editor = createArtiboxEditor({
  plugins
});

export default Editor;

Jsx Serializer

import { createJsxSerializer } from '@artibox/slate-jsx-serializer';
import { createListJsxSerializerRules } from '@artibox/slate-list';

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

...

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

API

• constants
• typings
• createList
• createListJsxSerializerRules
• List.forPlugin
• List.forToolHook
• ListController

Hotkey

OS	Feature	Shortcut
	Increase item depth	tab
	Decrease item depth	shift+tab