πŸ“Rich Text / WYSIWYG Editor built for Modularity and Extensibility.
Clone or download
Latest commit 0330dc6 Sep 30, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook fix storyboook addon Sep 7, 2018
.vscode init lerna Mar 15, 2018
__mocks__ fix many tests Sep 4, 2018
packages Update repo url Sep 24, 2018
preview add more demos Sep 6, 2018
stories add story Sep 7, 2018
test fix inline-link tests Sep 5, 2018
.editorconfig init Oct 7, 2016
.eslintignore fix flow Apr 16, 2018
.eslintrc.js init lerna Mar 15, 2018
.flowconfig setup storybook Sep 5, 2018
.gitattributes init Oct 7, 2016
.gitignore update pkgs Sep 6, 2018
.travis.yml fix travis Oct 11, 2016
LICENSE init Oct 7, 2016
README.md add webpack setting in readme Sep 8, 2018
babel.config.js replace docs with storybook Sep 5, 2018
gulpfile.js add adjust image with ratio Sep 7, 2018
lerna.json v1.5.4 Sep 10, 2018
package.json fix trailing spaces problem, ref #26 Sep 7, 2018
yarn.lock update storybook link Sep 7, 2018

README.md

canner-slate-editor lerna Storybook

πŸ“ Rich text / WYSIWYG editor focus on modularity and extensibility, build on top of Slate framework with beautiful designs and high-level APIs.

Features 😍

  • 20+ Editor Features, support list
  • Markdown Syntax, support list
  • Hot Keys, support list
  • Full Screen Edit mode
  • Serialize and Deserialize into HTML
  • Copy and Paste HTML in Editor
  • Support Toolbar
  • Support Sidebar

πŸ‘‡ canner-slate-editor is a modulized editor, everything is a npm module! You could 100% compose to your personal usage!

Why another Editor?

Since this project is originally started from Canner, we notice that there is NO SINGLE editor is going to fit in all varieties of requirements, so we think the only way to solve this issue is to design a modular-first editor.

There are many other rich text and WYSIWYG editors online, but as slate - why section mentioned that most of these solutions are

  1. Not small and reusable
  2. Hardcoded and hard to customize
  3. Re-inventing the view layer seemed inefficient and limiting
  4. ...

Hence, this repository will try to keep all the advantages slate framework provides and create a more high level APIs for developers could also easily reuse and customize their own version of editor. Also we are always welcome to all kinds of contributions! πŸ™Œ

Notice

This project is using Antd as our primiary UI library.

Why

  1. Complete React UI solutions.
  2. Easy to customize styles: https://ant.design/docs/react/customize-theme
  3. Build-in i18n: https://ant.design/docs/react/i18n

One of the downside of using it, is it will increase your bundle size. see here for solution

Setting up Webpack

You will need to add css and less test rules in your webpack setting.

...
rules: [
  {
    test: /\.js$/,
    use: {
      loader: "babel-loader"
    },
    exclude: /node_modules/
  },
  {
    test: /\.css$/,
    use: [
      {
        loader: "style-loader"
      },
      {
        loader: "css-loader"
      }
    ]
  },
  {
    test: /\.less$/,
    use: [
      {
        loader: "style-loader"
      },
      {
        loader: "css-loader"
      },
      {
        loader: "less-loader"
      }
    ]
  }
]
...

Project structure

This projects currently contains over 47+ npm modules, every features are packaged into npm modules, such as icons, helpers, plugins, utils, etc..., so this enable developers to pick modules to assemble into your own usages.

1. canner-slate-editor npm-image

Another rich text editor using Slate framework, with beautiful design

Installation

$ npm install --save canner-slate-editor

You will also need to install

$ npm install antd slate slate-react

2. slate-md-editor npm-image

A markdown editor, that allows you to edit live with hot keys support!

Installation

$ npm install --save slate-md-editor

You will also need to install

$ npm install antd slate slate-react

3. slate-icons

20+ shared slate icons and helpers for Slate editors.

Supported features:

πŸ‘‰ Learn more slate-icons

4. slate-selectors

shared slate selectors for Slate editors.

Supported selectors:

πŸ‘‰ Learn more slate-selectors

5. quill-icons npm-image

Icons extract from quill editor with React component wrapper, support 65+ icons!

Installation

$ npm install --save quill-icons

6. slate plugins

A set of slate plugins.

7. slate-utils & slate-changes

A set of changes and utility functions for Slate editors

8. Editor utils components

A set of editor utility components.

9. slate-constant

Share constants through repos.

πŸ‘‰ Learn more slate-constant

Development

We are using yarn workspace to manage all repos, learn more about Yarn workspace

To install packages

yarn

See demos

npm start

Test

You need to build js files through babel by entering

yarn run build:watch

Run test independently

yarn jest <...path/to/pkg> [--coverage]

FAQ

1. Why not use Slate directly?

Slate is a well-designed powerful editor framework that helps you deal with difficult parts when building an editor, such as data modeling, updating states, rendering, editor schemas, serializing... (you could learn more here), while you are trying to build your own editors, it still need a lot of efforts to build a simple beautiful editor up and running with the framework.

This repository aims to provide complete editors and plugins solutions that allows you to use it right away, instead of digging through slate documentations and using our high-level components you could almost build editors without any slate framework knowledge to use.

2. Editor's bundle size is too large?

canner-slate-editor is using an awesome React library called Ant Design, the library provides many commonly used React components such as Tooltip, Table, Modal, etc... which is widely used in rendering our editors. One of the downside of using the library is it's bundle size. If you are trying to tackle size issue, we recommend following solutions:

  1. At Canner, our solution is to external antd in your bundler, and use CDN instead.
  2. Use modularized antd to reduce your bundle size.