GithubHelp home page GithubHelp logo

shawtim / slate-editor-icons Goto Github PK

View Code? Open in Web Editor NEW

This project forked from sajinshrestha/slate-editor-icons

1.0 2.0 0.0 13.67 MB

๐Ÿ“20+ shared slate icons, selectors and helpers for Slate editors, in a monorepo

Home Page: https://canner.github.io/slate-editor-icons/

License: MIT License

JavaScript 100.00%

slate-editor-icons's Introduction

slate-editor-icons

Shared icons and render functions for slate editors, icons are extracted from Quill editor (see quill-icons for more information)

IMPORTANT NOTE:

slate-editor-icons are for managing feature functions and components. If you don't want to assemble editor by yourself you can directly use list below, which use these packages to build editors on top of it:

  1. Another rich text editor using Slate framework, with beautiful design: https://github.com/Canner/canner-slate-editor
  2. A markdown editor, that allows you to edit live.: https://github.com/Canner/slate-md-editor
  3. Quick and customizable way to implement medium like toolbar in your slate editor: https://github.com/Canner/slate-toolbar

Live demo: https://canner.github.io/slate-editor-icons/

Demo

Packages

DON'T DIRECTLY INSTALL slate-editor-icons

Supported features:

Supported selectors:

Helpers:

Usage

This project is maintain in a monorepo, see packages in packages folder

Install icons that you want to support in your slate project, and pass slate editor change (value.change()) and onChange function as props into the component. When users click these icons it will apply changes and trigger onChange function to update new change to your editor.

NOTE: You have to add corresponding plugins to your editor!

You will need to pass icon classnames as props into your components (supported classes), you could look at the example how to setup your icon's styles

class App extends React.Component {
  // Set the initial state when the app is first constructed.
  state = {
    value: initialValue // your slate editor's initial value
  }

  render() {
    const {value} = this.state;
    const onChange = ({value}) => this.setState({value});

    return (
      <div style={{margin: '50px'}}>
        <div className="toolbar">
          {icons.map((Type, i) => {
            return <Type
              change={value.change()}
              onChange={onChange}
              key={i}
              className="toolbar-item"
              activeClassName="toolbar-item-active"
              activeStrokeClassName="ql-stroke-active"
              activeFillClassName="ql-fill-active"
              activeThinClassName="ql-thin-active"
              activeEvenClassName="ql-even-active"
            />
          })}
        </div>
        <div className="editor markdown-body">
          <Editor
            value={value}
            onChange={onChange}
            plugins={plugins} // ----> use corresponding plugins of your selected icons, for example `Bold` icon use `BoldPlugin`
          />
        </div>
      </div>
    );
  }
}

The best explanation is a simple example: https://github.com/Canner/slate-editor-icons/blob/master/docs/index.js

Icon and selectors' props

All icons must passed these two props to ensure working properly.

props type required default description
type string false each icons are different customized block/mark types
change object true null changes to value
onChange func true null onChange function usually change => this.setState({value}) to update slate state

Start example server

npm start

Maintainer

chilijung

License

MIT ยฉ Canner

slate-editor-icons's People

Contributors

abz53378 avatar chilijung avatar shawtim avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.