1.2.0 • Published 4 years ago
@artibox/slate-list v1.2.0
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
Hotkey
OS | Feature | Shortcut |
---|---|---|
Increase item depth | tab | |
Decrease item depth | shift+tab |