https://github.com/York-IE-Labs/slate-lists

Lists (ol, ul) plugin for the latest version of slate.
https://github.com/York-IE-Labs/slate-lists

contenteditable javascript slate slate-plugins wysiwyg

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/York-IE-Labs/slate-lists
• Owner: York-IE-Labs
• Created: 2020-11-13T19:36:06.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2020-12-04T21:40:53.000Z (almost 4 years ago)
• Last Synced: 2024-07-02T09:21:38.901Z (3 months ago)
• Topics: contenteditable, javascript, slate, slate-plugins, wysiwyg
• Language: JavaScript
• Homepage: https://york-ie-labs.github.io/slate-lists/
• Size: 1.16 MB
• Stars: 11
• Watchers: 3
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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 
{children}
;

    case "numbered-list":

      return 
{children}
;

    case "list-item":

      return 
{children}
;

    default:

      return 
{children}
;

  }

};


const Editor = ({ value, setValue }) => {

  const editor = useMemo(

    () => withLists(withHistory(withReact(createEditor()))),

    []

  );

  const onKeyDown = (event, change) => {

    if (isHotkey("shift+tab", event)) {

      // attempt to un-indent on shift+tab within list

      event.preventDefault();

      undentItem(editor);

    } else if (isHotkey("tab", event)) {

      // attempt to indent on tab within list

      event.preventDefault();

      indentItem(editor);

    }

  };

  return (

     setValue(value)}>

       }

      />

    

  );

};

const App = () => {

  // Add the initial value when setting up our state.

  const [value, setValue] = useState([{ children: [{ text: "" }] }]);

  return ;

};

export default App;

```

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

## License

MIT © [York IE Labs](https://github.com/York-IE-Labs)