slate-lists

KO | EN

gitlite — search

#python #java #python3 #arduino #golang #machine-learning #rust #html #flask #javascript #seismology #nodejs

★ 10 Open GitHub ↗

Lists (ol, ul) plugin for the latest version of slate.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# slate-lists

> Lists (ol, ul) plugin for the latest version of slate.

[![NPM](https://img.shields.io/npm/v/@york-ie-labs/slate-lists.svg)](https://www.npmjs.com/package/@york-ie-labs/slate-lists) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @york-ie-labs/slate-lists
```

## Usage

```jsx
import React, { useState, useMemo } from "react";
import { createEditor } from "slate";
import { Slate, Editable, withReact } from "slate-react";
import { withHistory } from "slate-history";
import isHotkey from "is-hotkey";

import { withLists, indentItem, undentItem } from "@york-ie-labs/slate-lists";

const Element = (props) => {
  const { attributes, children, element } = props;

// standard components
  switch (element.type) {
    case "bulleted-list":
      return <ul {...attributes}>{children}</ul>;
    case "numbered-list":
      return <ol {...attributes}>{children}</ol>;
    case "list-item":
      return <li {...attributes}>{children}</li>;
    default:
      return <p {...attributes}>{children}</p>;
  }
};

const Editor = ({ value, setValue }) => {
  const editor = useMemo(
    () => withLists(withHistory(withReact(createEditor()))),
    []
  );

return (
    <Slate editor={editor} value={value} onChange={(value) => setValue(value)}>
      <Editable
        autoFocus={true}
        onKeyDown={onKeyDown}
        renderElement={(props) => <Element {...props} />}
      />
    </Slate>
  );
};

const App = () => {
  // Add the initial value when setting up our state.
  const [value, setValue] = useState([{ children: [{ text: "" }] }]);

return <Editor value={value} setValue={setValue} />;
};

export default App;
```

Or view the [example](./example/src) code for reference.

## License

slate-lists

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README