slate-sidebar
Quick and easy way to implement sidebar in your slate editor.
Last updated 2 years ago by chilijung .
MIT · Repository · Original npm · Tarball · package.json
$ cnpm install slate-sidebar 
SYNC missed versions from official npm registry.

slate-sidebar NPM version

Quick and easy way to implement sidebar menu in your slate editor

demo

Installation

$ npm install --save slate-sidebar

Usage

slate-sidebar is the easiest way to implement a medium-like sidebar in your slate editor.

Just add a decorator @sidebar() on you editor component. The parent component of this component must pass two props value: Value and onChange: (change: Change) => void.

import sidebar from "slate-sidebar";

@sidebar() // ----> Add this line and your sidebar is implemented in your editor
class EditorContainer extends React.Component<Props> {
  // On change, update the app's React state with the new editor state.
  render() {
    return (
      <div className="editor">
        <Editor {...this.props} />
      </div>
    );
  }
}

class App extends React.Component<{}, { value: Value }> {
  // Set the initial state when the app is first constructed.
  state = {
    value: initialValue
  };

  render() {
    return (
      <div className="container markdown-body">
        <EditorContainer
          value={this.state.value}
          onChange={({ value }) => this.setState({ value })}
          plugins={plugins}
        />
      </div>
    );
  }
}

see storybook codes for full implementation and demo

Options

slate-sidebar is fully customizable, so it allows you to pass options to setup items you want to implement in your sidebar.

NOTE: Remember to add certain plugin to your editor's plugins

Select your icons here

There's an example

const options = {
  icons: [
    {
      icon: OlList,
      title: "Order List"
    },
    {
      icon: UlList,
      title: "Unorder List"
    },
    {
      icon: Header1,
      title: "Header One"
    },
    {
      icon: Header2,
      title: "Header Two"
    }
  ],
  leftOffset: 20 // offset to left default -20
};

Start example server

npm start

Current Tags

  • 1.5.0                                ...           latest (2 years ago)

12 Versions

  • 1.5.0                                ...           2 years ago
  • 1.4.4                                ...           2 years ago
  • 1.4.3                                ...           2 years ago
  • 1.4.3-alpha.0                                ...           2 years ago
  • 1.4.2                                ...           2 years ago
  • 0.3.0                                ...           2 years ago
  • 0.2.4                                ...           3 years ago
  • 0.2.3                                ...           3 years ago
  • 0.2.2                                ...           3 years ago
  • 0.2.1                                ...           3 years ago
  • 0.2.0                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 1
This Month 0
Last Day 0
Last Week 0
Last Month 3
Dependencies (2)
Dev Dependencies (0)
None

Copyright 2014 - 2017 © taobao.org |